adding mfa login for admin

app/mobile/src/access/admin/Admin.jsx

@@ -5,6 +5,8 @@ import { useAdmin } from './useAdmin.hook';
 import Colors from 'constants/Colors';
 import MatIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import { tos } from 'constants/TermsOfService';
+import { BlurView } from "@react-native-community/blur";
+import { InputCode } from 'utils/InputCode';
 
 export function Admin() {
 
@@ -111,6 +113,47 @@ export function Admin() {
           </TouchableOpacity>
         </View>
       </Modal>
+      <Modal
+        animationType="fade"
+        transparent={true}
+        visible={state.mfaModal}
+        supportedOrientations={['portrait', 'landscape']}
+        onRequestClose={actions.dismissMFA}
+      >
+        <View>
+          <BlurView style={styles.mfaOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black" />
+          <View style={styles.mfaBase}>
+            <View style={styles.mfaContainer}>
+              <Text style={styles.mfaTitle}>{ state.strings.mfaTitle }</Text>
+              <Text style={styles.mfaDescription}>{ state.strings.mfaEnter }</Text>
+              <InputCode style={{ width: '100%' }} onChangeText={actions.setCode} />
+              <View style={styles.mfaError}>
+                { state.mfaError == '403' && (
+                  <Text style={styles.mfaErrorLabel}>{ state.strings.mfaError }</Text>
+                )}
+                { state.mfaError == '429' && (
+                  <Text style={styles.mfaErrorLabel}>{ state.strings.mfaDisabled }</Text>
+                )}
+              </View>
+              <View style={styles.mfaControl}>
+                <TouchableOpacity style={styles.mfaCancel} onPress={actions.dismissMFA}>
+                  <Text style={styles.mfaCancelLabel}>{ state.strings.cancel }</Text>
+                </TouchableOpacity>
+                { state.mfaCode != '' && (
+                  <TouchableOpacity style={styles.mfaConfirm} onPress={actions.login}>
+                    <Text style={styles.mfaConfirmLabel}>{ state.strings.mfaConfirm }</Text>
+                  </TouchableOpacity>
+                )}
+                { state.mfaCode == '' && (
+                  <View style={styles.mfaDisabled}>
+                    <Text style={styles.mfaDisabledLabel}>{ state.strings.mfaConfirm }</Text>
+                  </View>
+                )}
+              </View>
+            </View>
+          </View>
+        </View>
+      </Modal>
     </KeyboardAvoidingView>
   );
 }

app/mobile/src/access/admin/Admin.styled.js

@@ -15,6 +15,98 @@ export const styles = StyleSheet.create({
   space: {
     width: 32,
   },
+  mfaOverlay: {
+    width: '100%',
+    height: '100%',
+  },
+  mfaError: {
+    width: '100%',
+    height: 24,
+    display: 'flex',
+    alignItems: 'center',
+  },
+  mfaErrorLabel: {
+    color: Colors.dangerText,
+  },
+  mfaControl: {
+    height: 32,
+    display: 'flex',
+    flexDirection: 'row',
+    width: '100%',
+    justifyContent: 'flex-end',
+    gap: 16,
+  },
+  mfaCancel: {
+    width: 72,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: Colors.cancelButton,
+    borderRadius: 4,
+  },
+  mfaCancelLabel: {
+    color: Colors.cancelButtonText,
+  },
+  mfaConfirm: {
+    width: 72,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: Colors.primaryButton,
+    borderRadius: 4,
+  },
+  mfaConfirmLabel: {
+    color: Colors.primaryButtonText,
+  },
+  mfaDisabled: {
+    width: 72,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: Colors.disabledButton,
+    borderRadius: 4,
+  },
+  mfaDisabledLabel: {
+    color: Colors.disabledButtonText,
+  },
+  mfaBase: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  mfaContainer: {
+    backgroundColor: Colors.modalBase,
+    borderColor: Colors.modalBorder,
+    borderWidth: 1,
+    width: '80%',
+    maxWidth: 400,
+    display: 'flex',
+    gap: 8,
+    alignItems: 'center',
+    borderRadius: 8,
+    padding: 16,
+  },
+  mfaTitle: {
+    fontSize: 20,
+    color: Colors.descriptionText,
+    paddingBottom: 8,
+  },
+  mfaDescription: {
+    fontSize: 14,
+    color: Colors.descriptionText,
+  },
+  mfaCode: {
+    width: 400,
+    borderWidth: 1,
+    borderColor: '#333333',
+    width: '100%',
+    opacity: 0,
+  },
   modalContainer: {
     width: '100%',
     height: '100%',

app/mobile/src/access/admin/useAdmin.hook.js

@@ -23,7 +23,9 @@ export function useAdmin() {
     agree: false,
     showTerms: false,
 
+    mfaModal: false,
     mfaCode: '',
+    mfaError: null,
   });
 
   const updateState = (value) => {
@@ -86,17 +88,35 @@ export function useAdmin() {
           if (unclaimed) {
             await setNodeStatus(node, state.token);
           }
+          try { 
             const session = await setNodeAccess(node, state.token, state.mfaCode);
             updateState({ server: node, busy: false });
             navigate('/dashboard', { state: { server: node, token: session }});
           }
+          catch (err) {
+            if (err.message == '405' || err.message == '403' || err.message == '429') {
+              updateState({ mfaModal: true, mfaError: err.message });
+            }
+            else {
+              console.log(err.message);
+              updateState({ busy: false, showAlert: true });
+              throw new Error('login failed');
+            }
+          }
+        }
         catch (err) {
           console.log(err);
           updateState({ busy: false });
           throw new Error("access failed");
         }
       }
-    }
+    },
+    setCode: (mfaCode) => {
+      updateState({ mfaCode });
+    },
+    dismissMFA: () => {
+      updateState({ mfaModal: false });
+    },
   };
 
   return { state, actions };