completed login screen

app/mobile/src/access/login/Login.jsx

@@ -1,4 +1,4 @@
-import { Text, TextInput, View, TouchableOpacity } from 'react-native';
+import { ActivityIndicator, Alert, Text, TextInput, View, TouchableOpacity } from 'react-native';
 import { styles } from './Login.styled';
 import Ionicons from '@expo/vector-icons/AntDesign';
 import { useLogin } from './useLogin.hook';
@@ -7,6 +7,18 @@ export function Login() {
 
   const { state, actions } = useLogin();
 
+  const login = async () => {
+    try {
+      await actions.login();
+    }
+    catch (err) {
+      Alert.alert(
+        "Login Failed",
+        "Please check your login and password.",
+      );
+    }
+  }
+
   return (
     <View style={styles.wrapper}>
       <View style={styles.container}>
@@ -26,17 +38,34 @@ export function Login() {
                 autoCapitalize="none" />
             <View style={styles.space} />
           </View>
-          <View style={styles.inputwrapper}>
+          { state.showPassword && (
-            <Ionicons style={styles.icon} name="lock" size={18} color="#aaaaaa" />
+            <View style={styles.inputwrapper}>
-            <TextInput style={styles.inputfield} value={state.password} onChangeText={actions.setPassword}
+              <Ionicons style={styles.icon} name="lock" size={18} color="#aaaaaa" />
-                autoCapitalize="none" />
+              <TextInput style={styles.inputfield} value={state.password} onChangeText={actions.setPassword}
-            <TouchableOpacity>
+                  autoCapitalize="none" />
-              <Ionicons style={styles.icon} name="eye" size={18} color="#aaaaaa" />
+              <TouchableOpacity onPress={actions.hidePassword}>
-            </TouchableOpacity>
+                <Ionicons style={styles.icon} name="eye" size={18} color="#aaaaaa" />
-          </View>
+              </TouchableOpacity>
+            </View>
+          )}
+          { !state.showPassword && (
+            <View style={styles.inputwrapper}>
+              <Ionicons style={styles.icon} name="lock" size={18} color="#aaaaaa" />
+              <TextInput style={styles.inputfield} value={state.password} onChangeText={actions.setPassword}
+                  secureTextEntry={true} autoCapitalize="none" />
+              <TouchableOpacity onPress={actions.showPassword}>
+                <Ionicons style={styles.icon} name="eyeo" size={18} color="#aaaaaa" />
+              </TouchableOpacity>
+            </View>
+          )}
           { state.enabled && (
-            <TouchableOpacity style={styles.login}>
+            <TouchableOpacity style={styles.login} onPress={login}>
-              <Text style={styles.logintext}>Login</Text>
+              { state.busy && (
+                <ActivityIndicator size="small" color="#ffffff" />
+              )}
+              { !state.busy && (
+                <Text style={styles.logintext}>Login</Text>
+              )}
             </TouchableOpacity>
           )}
           { !state.enabled && (
@@ -44,16 +73,9 @@ export function Login() {
               <Text style={styles.nologintext}>Login</Text>
             </View>
           )}
-          { state.createable && (
+          <TouchableOpacity style={styles.create} onPress={actions.create}>
-            <TouchableOpacity style={styles.create}>
+            <Text style={styles.createtext}>Create Account</Text>
-              <Text style={styles.createtext}>Create Account</Text>
+          </TouchableOpacity>
-            </TouchableOpacity>
-          )}
-          { !state.createable && (
-            <View style={styles.create}>
-              <Text style={styles.nocreatetext}>Create Account</Text>
-            </View>
-          )}
         </View>      
       </View>
     </View>

app/mobile/src/access/login/useLogin.hook.js

@@ -1,16 +1,19 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useContext } from 'react';
 import { useWindowDimensions } from 'react-native';
 import { useNavigate } from 'react-router-dom';
+import { AppContext } from 'context/AppContext';
 
 export function useLogin() {
 
   const navigate = useNavigate();
+  const app = useContext(AppContext);
 
   const [state, setState] = useState({
-    createable: false,
+    busy: false,
     enabled: false,
     login: null,
     password: null,
+    showPassword: false,
   });
 
   const updateState = (value) => {
@@ -36,6 +39,30 @@ export function useLogin() {
     setPassword: (password) => {
       updateState({ password });
     },
+    create: () => {
+      navigate('/create');
+    },
+    showPassword: () => {
+      updateState({ showPassword: true });
+    },
+    hidePassword: () => {
+      updateState({ showPassword: false });
+    },
+    login: async () => {
+      if (!state.busy) {
+        updateState({ busy: true });
+        try {
+          await app.actions.login(state.login, state.password);
+          navigate('/');
+        }
+        catch (err) {
+          console.log(err);
+          updateState({ busy: false, showAlert: true });
+          throw new Error('login failed');
+        }
+        updateState({ busy: false });
+      }
+    }
   };
 
   return { state, actions };

app/mobile/src/api/setLogin.js

@@ -1,11 +1,11 @@
 import { checkResponse, fetchWithTimeout } from './fetchUtil';
 import base64 from 'react-native-base64'
 
-export async function setLogin(username, password) {
+export async function setLogin(username, server, password) {
   let headers = new Headers()
   headers.append('Authorization', 'Basic ' + base64.encode(username + ":" + password));
-  let app = { Name: "indicom", Description: "decentralized communication" }
+  let app = { Name: "topics", Description: "decentralized communication" }
-  let login = await fetchWithTimeout('/account/apps', { method: 'POST', body: JSON.stringify(app), headers: headers })
+  let login = await fetchWithTimeout(`https://${server}/account/apps`, { method: 'POST', body: JSON.stringify(app), headers: headers })
   checkResponse(login)
   return await login.json()
 }

app/mobile/src/context/useAppContext.hook.js

@@ -51,7 +51,9 @@ export function useAppContext() {
   } 
 
   const appLogin = async (username, password) => {
+    const acc = username.split('@');
     let access = await setLogin(acc[0], acc[1], password)
+console.log(access);
     setWebsocket(acc[1], access.appToken)
     updateState({ session: true, token: access.appToken, server: acc[1] });
     // store