Adding Register option on the app

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() {

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 (
         <SafeAreaView style={styles.container}>
-            <LoginForm />
-            <StatusBar style="auto" />
-            <View style={{ position: "absolute", top: 60, left: 10, opacity: 0.5 }} >
-                <Text onPress={()=>{
-                alert("Register your church on fellowshipapps.com");
-            }}>{"<- Not an EMI family member?"}</Text>
+            <Image
+                style={styles.logo}
+                source={require('./../assets/icon.png')}
+            />
+            <Text style={styles.header}>EMI Fellowship</Text>
+            <View style={{ flexDirection: "row", justifyContent: "center", width: "100%" }}>
+                <Button disabled={isLogin} onPress={() => setIsLogin(true)}>
+                    {i18n.t("message.login")}
+                </Button>
+                <Button disabled={!isLogin} onPress={() => setIsLogin(false)}>
+                    {i18n.t("message.register")}
+                </Button>
             </View>
+            {
+                isLogin ? <LoginForm /> : <RegisterForm />
+            }
+            <StatusBar style="auto" />
+            {/* <View style={{ position: "absolute", top: 60, left: 10, opacity: 0.5 }} >
+                <Text onPress={() => {
+                    alert("Register your church on fellowshipapps.com");
+                }}>{"<- Not an EMI family member?"}</Text>
+            </View>  */}
         </SafeAreaView>
     );
 }
 
 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',
     },
 });

components/Login.js

@@ -42,12 +42,6 @@ let LoginForm = () => {
 
   return (
     <View style={styles.mainView}>
-      <Image
-        style={styles.logo}
-        source={require('./../assets/icon.png')}
-      />
-      <Text style={styles.header}>EMI Fellowship</Text>
-      <Text >{i18n.t("message.login")}</Text>
       <TextInput
         style={styles.input}
         onChangeText={text => 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%"

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 = (
+    <>
+      <TextInput
+        style={styles.input}
+        onChangeText={text => setPassword(text)}
+        defaultValue={password}
+        placeholder="password"
+        textContentType="password"
+        label={i18n.t("message.password")}
+        secureTextEntry={true}
+        autoCapitalize='none'
+        autoComplete='email'
+        autoCorrect={false}
+        mode="outlined"
+      />
+      <TextInput
+        style={styles.input}
+        onChangeText={text => 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"
+      />
+      <TextInput
+        style={styles.input}
+        onChangeText={text => setFirstName(text)}
+        defaultValue={firstName}
+        placeholder="First Name"
+        label={i18n.t("message.name")}
+        autoCapitalize='words'
+        autoComplete='name'
+        mode="outlined"
+        keyboardType='default'
+      />
+      <TextInput
+        style={styles.input}
+        onChangeText={text => setLastName(text)}
+        defaultValue={lastName}
+        placeholder="Last Name"
+        label={i18n.t("message.lastName")}
+        autoCapitalize='words'
+        autoComplete='name'
+        mode="outlined"
+        keyboardType='default'
+      />
+      <TextInput
+        style={styles.input}
+        onChangeText={text => 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 (
+    <View style={styles.mainView}>
+      <TextInput
+        style={styles.input}
+        onChangeText={text => 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 : <></>}
+      <View style={{ flexDirection: "row" }}>
+        <Button
+          style={styles.button}
+          onPress={async () => {
+            if (emailValidated) registerUser();
+            else validateEmail();
+          }}
+        >
+          {i18n.t("message.submit")}
+        </Button>
+      </View>
+    </View>
+  );
+}
+
+export default RegisterForm;
+
+const styles = StyleSheet.create({
+  mainView: {
+    width: "100%",
+    alignContent: 'center',
+    alignItems: 'center',
+  },
+  input: {
+    backgroundColor: 'white',
+    width: "80%"
+  },
+  button: {
+    marginTop: 10,
+
+  }
+});

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",