adding admin dashboard modals

app/mobile/src/dashboard/Dashboard.jsx

@@ -1,4 +1,4 @@
-import { TouchableOpacity, View, Text, Modal, FlatList } from 'react-native';
+import { TextInput, TouchableOpacity, View, Text, Modal, FlatList, KeyboardAvoidingView } from 'react-native';
 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
 import Ionicons from '@expo/vector-icons/AntDesign';
 import { styles } from './Dashboard.styled';
@@ -16,13 +16,19 @@ export function Dashboard(props) {
     <SafeAreaView style={styles.container}>
       <View style={styles.header}>
         <Text style={styles.headerLabel}>Accounts</Text>
-        <Ionicons style={styles.icon} name={'reload1'} size={20} />        
-        <Ionicons style={styles.icon} name={'setting'} size={20} />
+        <TouchableOpacity onPress={actions.refresh}>
+          <Ionicons style={styles.icon} name={'reload1'} size={20} />
+        </TouchableOpacity>
+        <TouchableOpacity onPress={actions.showEditConfig}>
+          <Ionicons style={styles.icon} name={'setting'} size={20} />
+        </TouchableOpacity>
         <TouchableOpacity onPress={actions.logout}>
           <Ionicons style={styles.icon} name={'logout'} size={20} /> 
         </TouchableOpacity>
-        <View style={styles.end}>       
-          <Ionicons style={styles.icon} name={'adduser'} size={24} /> 
+        <View style={styles.end}>
+          <TouchableOpacity onPress={actions.showAddUser}>
+            <Ionicons style={styles.icon} name={'adduser'} size={24} /> 
+          </TouchableOpacity>
         </View>       
       </View>
       <View style={styles.accounts}>
@@ -37,7 +43,9 @@ export function Dashboard(props) {
                 <Text style={styles.handle}>{ item.handle }</Text>
               </View>
               <View style={styles.control}>
-                <Ionicons style={styles.icon} name={'unlock'} size={20} /> 
+                <TouchableOpacity activeOpacity={1} onPress={() => actions.showAccessUser(item.accountId)}>
+                  <Ionicons style={styles.icon} name={'unlock'} size={20} /> 
+                </TouchableOpacity>
                 <Ionicons style={styles.disable} name={'closecircleo'} size={20} /> 
                 <Ionicons style={styles.delete} name={'deleteuser'} size={20} /> 
               </View>
@@ -45,6 +53,75 @@ export function Dashboard(props) {
           )}
         />
       </View>
+
+      <Modal
+        animationType="fade"
+        transparent={true}
+        visible={state.editConfig}
+        supportedOrientations={['portrait', 'landscape']}
+        onRequestClose={actions.hideEditConfig}
+      >
+        <KeyboardAvoidingView behavior="height" style={styles.modalBackground}>
+          <View style={styles.modalContainer}>
+            <View style={styles.modalHeader}>
+              <Text style={styles.modalHeaderText}>Settings:</Text>
+            </View>
+            <View style={styles.modalBody}>
+              <TextInput style={styles.input} value={state.hostname} onChangeText={actions.setHostname}
+                  autoCorrect={false} autoCapitalize="none" placeholder="Federated Host" />
+              <TextInput style={styles.input} value={state.storage} onChangeText={actions.setStorage}
+                  keyboardType='numeric' placeholder="Storage Limit (GB) / Account" />
+            </View>
+            <View style={styles.modalControls}>
+              <TouchableOpacity style={styles.cancel} onPress={actions.hideEditConfig}>
+                <Text>Cancel</Text>
+              </TouchableOpacity>
+              <TouchableOpacity style={styles.save} onPress={actions.hideEditConfig}>
+                <Text style={styles.saveText}>Save</Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </KeyboardAvoidingView>
+      </Modal>
+
+      <Modal
+        animationType="fade"
+        transparent={true}
+        visible={state.addUser}
+        supportedOrientations={['portrait', 'landscape']}
+        onRequestClose={actions.hideAddUser}
+      >
+        <KeyboardAvoidingView behavior="height" style={styles.modalBackground}>
+          <View style={styles.modalContainer}>
+            <Text style={styles.modalHeader}>Add User:</Text>
+            <View style={styles.modalControls}>
+              <TouchableOpacity style={styles.cancel} onPress={actions.hideAddUser}>
+                <Text>Done</Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </KeyboardAvoidingView>
+      </Modal>
+
+      <Modal
+        animationType="fade"
+        transparent={true}
+        visible={state.accessUser}
+        supportedOrientations={['portrait', 'landscape']}
+        onRequestClose={actions.hideAccessUser}
+      >
+        <KeyboardAvoidingView behavior="height" style={styles.modalBackground}>
+          <View style={styles.modalContainer}>
+            <Text style={styles.modalHeader}>Access User:</Text>
+            <View style={styles.modalControls}>
+              <TouchableOpacity style={styles.cancel} onPress={actions.hideAccessUser}>
+                <Text>Done</Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </KeyboardAvoidingView>
+      </Modal>
+
     </SafeAreaView>
   )
 }

app/mobile/src/dashboard/Dashboard.styled.js

@@ -86,4 +86,67 @@ export const styles = StyleSheet.create({
     color: Colors.pending,
     paddingLeft: 16,
   },
+  saveText: {
+    color: Colors.white,
+  },
+  save: {
+    backgroundColor: Colors.primary,
+    borderRadius: 4,
+    padding: 6,
+    marginRight: 8,
+    width: 72,
+    display: 'flex',
+    alignItems: 'center',
+  },
+  cancel: {
+    borderWidth: 1,
+    borderColor: Colors.lightgrey,
+    borderRadius: 4,
+    padding: 6,
+    marginRight: 8,
+    width: 72,
+    display: 'flex',
+    alignItems: 'center',
+  },
+  modalBackground: {
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(52, 52, 52, 0.8)'
+  },
+  modalControls: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    paddingTop: 16,
+    borderTopWidth: 1,
+    borderColor: Colors.divider,
+  },
+  modalContainer: {
+    backgroundColor: Colors.formBackground,
+    padding: 16,
+    width: '80%',
+    maxWidth: 400,
+  },
+  modalHeader: {
+    paddingBottom: 4,
+    borderBottomWidth: 1,
+    borderColor: Colors.divider,
+    paddingLeft: 8,
+  },
+  modalHeaderText: {
+    fontSize: 18,
+  },
+  modalBody: {
+    padding: 8,
+  },
+  input: {
+    marginTop: 4,
+    marginBottom: 4,
+    backgroundColor: Colors.white,
+    padding: 4,
+    borderRadius: 4,
+  },
 });

app/mobile/src/dashboard/useDashboard.hook.js

@@ -15,6 +15,9 @@ export function useDashboard(config, server, token) {
     editConfig: false,
     addUser: false,
     accessUser: false,
+    accessId: null,
+    hostname: null,
+    storage: null,
   });
 
   const navigate = useNavigate();
@@ -49,6 +52,9 @@ export function useDashboard(config, server, token) {
     logout: () => {
       navigate('/admin');
     },
+    refresh: () => {
+      refreshAccounts();
+    },
     showEditConfig: () => {
       updateState({ editConfig: true });
     },
@@ -61,12 +67,19 @@ export function useDashboard(config, server, token) {
     hideAddUser: () => {
       updateState({ addUser: false });
     },
-    showAccessUser: () => {
-      updateState({ accessUser: true });
+    showAccessUser: (accessId) => {
+      updateState({ accessUser: true, accountId: accessId });
     },
     hideAccessUser: () => {
       updateState({ accessUser: false });
     },
+    setHostname: (hostname) => {
+      updateState({ hostname });
+    },
+    setStorage: (storage) => {
+      console.log(">>> ", storage, Number(storage.replace(/[^0-9]/g, '')));
+      updateState({ storage: Number(storage.replace(/[^0-9]/g, '')) });
+    },
   };
 
   return { state, actions };