From caaed40476b1455b045b810bbabee10ff6f70dd7 Mon Sep 17 00:00:00 2001 From: Adolfo Reyna Date: Tue, 4 Feb 2025 23:55:59 -0500 Subject: [PATCH] Adding Register option on the app --- API.js | 2 +- Views/Login.js | 56 ++++++++++++-- components/Login.js | 25 ------- components/Register.js | 165 +++++++++++++++++++++++++++++++++++++++++ i18nMessages.js | 6 +- 5 files changed, 219 insertions(+), 35 deletions(-) create mode 100644 components/Register.js diff --git a/API.js b/API.js index 082197a..29570bd 100644 --- a/API.js +++ b/API.js @@ -189,7 +189,7 @@ const API = { return postCall("/user/invite", { name, email }); }, getInvitation(email){ - return getCall("/user/invite", { email }); + return getCall("/invite/" + email ); }, //Profiles async getMe() { diff --git a/Views/Login.js b/Views/Login.js index bdc39e9..b8547d2 100644 --- a/Views/Login.js +++ b/Views/Login.js @@ -1,10 +1,15 @@ import { StatusBar } from 'expo-status-bar'; -import React, { useEffect, useState } from 'react'; -import { StyleSheet, Text, View, TextInput, SafeAreaView } from 'react-native'; +import React, { use, useEffect, useState } from 'react'; +import { StyleSheet, Text, View, Image, SafeAreaView } from 'react-native'; import API from './../API.js'; import LoginForm from './../components/Login.js'; +import RegisterForm from './../components/Register.js'; +import i18n from "../i18nMessages.js"; +import { Button } from 'react-native-paper'; export default function App({ navigation, route }) { + const [isLogin, setIsLogin] = useState(true); + useEffect(() => { getData = async () => { let r = await API.isLoggedIn(); @@ -21,19 +26,54 @@ export default function App({ navigation, route }) { return ( - - - - { - alert("Register your church on fellowshipapps.com"); - }}>{"<- Not an EMI family member?"} + + EMI Fellowship + + + + { + isLogin ? : + } + + {/* + { + alert("Register your church on fellowshipapps.com"); + }}>{"<- Not an EMI family member?"} + */} ); } const styles = StyleSheet.create({ container: { + backgroundColor: 'white', flex: 1, + flexDirection: "column", + justifyContent: "center", + width: "100%", + alignContent: 'center', + alignItems: 'center', + }, + header: { + fontFamily: 'Helvetica-Bold', + fontSize: 42, + textAlign: "left", + paddingBottom: 15, + color: '#777', + alignContent: 'center' + }, + logo: { + width: 250, + height: 250, + justifyContent: 'center', + alignItems: 'center', }, }); diff --git a/components/Login.js b/components/Login.js index d1221b2..d16de49 100644 --- a/components/Login.js +++ b/components/Login.js @@ -42,12 +42,6 @@ let LoginForm = () => { return ( - - EMI Fellowship - {i18n.t("message.login")} setEmail(text)} @@ -107,29 +101,10 @@ export default LoginForm; const styles = StyleSheet.create({ mainView: { - backgroundColor: 'white', - flex: 1, - flexDirection: "column", - justifyContent: "center", - padding: 15, width: "100%", alignContent: 'center', alignItems: 'center', }, - header: { - fontFamily: 'Helvetica-Bold', - fontSize: 42, - textAlign: "left", - paddingBottom: 15, - color: '#777', - alignContent: 'center' - }, - logo: { - width: 250, - height: 250, - justifyContent: 'center', - alignItems: 'center', - }, input: { backgroundColor: 'white', width: "80%" diff --git a/components/Register.js b/components/Register.js new file mode 100644 index 0000000..f3e38f4 --- /dev/null +++ b/components/Register.js @@ -0,0 +1,165 @@ +import React, { useState } from 'react'; +import { Text, View, StyleSheet, Image } from 'react-native'; +import { TextInput, Button, HelperText } from 'react-native-paper'; +import API from './../API.js'; +import { useNavigation } from '@react-navigation/native'; +import i18n from "../i18nMessages.js"; + + +let RegisterForm = () => { + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + const [password2, setPassword2] = useState(''); + const navigation = useNavigation(); + const [firstName, setFirstName] = useState(''); + const [lastName, setLastName] = useState(''); + const [description, setDescription] = useState(''); + const [emailValidated, setEmailValidated] = useState(false); + + const validateEmail = async () => { + if (!email) return; + API.getInvitation(email) + .then(data => { + //console.log(data); + if (data && data.status && data.status === 'ok') setEmailValidated(true); + else alert(data.status); + }).catch(console.log); + } + + const registerUser = async () => { + if (!password || (password != password2)) + return alert("Passwords do not match!"); + if (!firstName || !lastName) + return alert("Please enter your name!"); + if (!description) + return alert("Please enter a description!"); + await API.signup(email, password, email, { + firstName, + lastName, + description + }) + .then(data => { + console.log('registerData:', data); + if (data && data.status && data.status === 'ok') { + return navigation.reset({ + index: 0, + routes: [{ name: 'MainNavigation' }], + }); + } + }).catch( (error) => { + console.error("error at registering", error); + }); + } + + const registrationData = ( + <> + setPassword(text)} + defaultValue={password} + placeholder="password" + textContentType="password" + label={i18n.t("message.password")} + secureTextEntry={true} + autoCapitalize='none' + autoComplete='email' + autoCorrect={false} + mode="outlined" + /> + setPassword2(text)} + defaultValue={password} + placeholder="same password" + textContentType="same password" + label={i18n.t("message.rpassword")} + secureTextEntry={true} + autoCapitalize='none' + autoComplete='email' + autoCorrect={false} + mode="outlined" + /> + setFirstName(text)} + defaultValue={firstName} + placeholder="First Name" + label={i18n.t("message.name")} + autoCapitalize='words' + autoComplete='name' + mode="outlined" + keyboardType='default' + /> + setLastName(text)} + defaultValue={lastName} + placeholder="Last Name" + label={i18n.t("message.lastName")} + autoCapitalize='words' + autoComplete='name' + mode="outlined" + keyboardType='default' + /> + setDescription(text)} + defaultValue={description} + placeholder="Description so others can know you" + label={i18n.t("message.describeYourself")} + autoCapitalize='sentences' + autoComplete='description' + mode="outlined" + keyboardType='default' + /> + + ); + + return ( + + setEmail(text)} + defaultValue={email} + placeholder="email" + label={i18n.t("message.email")} + autoCapitalize='none' + autoComplete='email' + autoCorrect={false} + mode="outlined" + keyboardType='email-address' + disabled={emailValidated} + /> + {emailValidated ? registrationData : <>} + + + + + ); +} + +export default RegisterForm; + +const styles = StyleSheet.create({ + mainView: { + width: "100%", + alignContent: 'center', + alignItems: 'center', + }, + input: { + backgroundColor: 'white', + width: "80%" + }, + button: { + marginTop: 10, + + } +}); \ No newline at end of file diff --git a/i18nMessages.js b/i18nMessages.js index 79e8fae..1fc662a 100644 --- a/i18nMessages.js +++ b/i18nMessages.js @@ -41,7 +41,8 @@ const messages = { rpassword: "Repeat Password", resetPassword: "Reset password", register: "Register", - name: "Nombre", + name: "Name", + firstName: "First Name", lastName: "Last Name", describeYourself: 'Describe Yourself', continueWatching: "Continues Watching", @@ -114,6 +115,7 @@ const messages = { resetPassword: 'Restablecer contraseña', register: 'Registrarse', name: 'Nombre', + firstName: 'Nombre', lastName: 'Apellido', describeYourself: 'Describirse', continueWatching: 'Continuar viendo', @@ -186,6 +188,7 @@ const messages = { resetPassword: 'Réinitialiser le mot de passe', register: 'S\'inscrire', name: 'Nom', + firstName: 'Prénom', lastName: 'Nom de famille', describeYourself: 'Décrivez-vous', continueWatching: 'Continuer à regarder', @@ -258,6 +261,7 @@ const messages = { resetPassword: "Nulstil adgangskode", register: "Registrer", name: "Navn", + firstName: "Fornavn", lastName: "Efternavn", describeYourself: 'Beskriv dig selv', continueWatching: "Fortsæt med at se",