support mfa on login

app/client/web/src/access/Access.module.css

@@ -8,7 +8,7 @@
   }
 
   .mfaPin {
-    padding: 32px;
+    padding-top: 32px;
   }
 
   .mfaDescription {
@@ -19,6 +19,13 @@
     display: flex;
     gap: 8px;
   }
+
+  .mfaDisabled {
+    height: 48px;
+    display: flex;
+    align-items: center;
+    color: var(--mantine-color-red-6);
+  }
 }
 
 .split {

app/client/web/src/access/Access.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { useAccess } from './useAccess.hook'
 import classes from './Access.module.css'
 import {
@@ -28,13 +28,11 @@ export function Access() {
     useDisclosure(false)
   const [urlOpened, { open: urlOpen, close: urlClose }] = useDisclosure(false)
   const [otpOpened, { open: otpOpen, close: otpClose }] = useDisclosure(false)
-
-console.log("LANG: ", state.language);
+  const [disabled, setDisabled] = useState(false)
 
   const login = async () => {
     if (!state.loading) {
       actions.setLoading(true)
-      otpClose()
       try {
         if (state.mode === 'account') {
           await actions.accountLogin()
@@ -45,9 +43,23 @@ console.log("LANG: ", state.language);
         } else if (state.mode === 'admin') {
           await actions.adminLogin()
         }
+        otpClose()
       } catch (err) {
-        console.log(err)
-        alertOpen()
+        console.log(err.message)
+        if (
+          err.message === '405' ||
+          err.message === '403' ||
+          err.message === '429'
+        ) {
+          if (err.message === '429') {
+            setDisabled(true)
+          } else {
+            setDisabled(false)
+          }
+          otpOpen()
+        } else {
+          alertOpen()
+        }
       }
       actions.setLoading(false)
     }
@@ -351,15 +363,24 @@ console.log("LANG: ", state.language);
           <div className={classes.mfaTitle}>{state.strings.mfaTitle}</div>
           <div className={classes.mfaDescription}>{state.strings.mfaEnter}</div>
           <PinInput
+            value={state.code}
             length={6}
             className={classes.mfaPin}
             onChange={(event) => actions.setCode(event)}
           />
+          <div className={classes.mfaDisabled}>
+            {disabled ? state.strings.mfaDisabled : ''}
+          </div>
           <div className={classes.mfaControl}>
             <Button variant="outline" onClick={otpClose}>
               {state.strings.cancel}
             </Button>
-            <Button variant="filled" onClick={login}>
+            <Button
+              variant="filled"
+              onClick={login}
+              loading={state.loading}
+              disabled={state.code.length !== 6}
+            >
               {state.strings.login}
             </Button>
           </div>

app/client/web/src/access/useAccess.hook.ts

@@ -98,8 +98,6 @@ export function useAccess() {
         secure
       )
       updateState({ taken: !available })
-
-      console.log('TAKEN: ', taken)
     }, 2000)
   }
 

app/sdk/src/net/setLogin.ts

@@ -5,9 +5,11 @@ export async function setLogin(node: string, secure: boolean, username: string,
   const mfa = code ? `&code=${code}` : '';
   const endpoint = `http${secure ? 's' : ''}://${node}/account/apps?appName=${appName}&appVersion=${appVersion}&platform=${platform}&deviceToken=${deviceToken}&pushType=${pushType}${mfa}`;
   const auth = encode(`${username}:${password}`);
-  const response = await axios.post(endpoint, notifications, { auth: `Basic ${auth}` });
-  if (response.status >= 400 && response.status < 600) {
-    throw new Error('setLogin fetch failed');
+  try {
+    const response = await axios.post(endpoint, notifications, { auth: `Basic ${auth}` });
+    return response.data;
+  }
+  catch(err) {
+    throw new Error(err.status);
   }
-  return response.data;
 }