feat: submit 2FA code upon pressing enter

new-lamassu-admin/src/pages/Authentication/Input2FAState.js

@@ -1,6 +1,7 @@
 import { useMutation, useLazyQuery } from '@apollo/react-hooks'
 import { makeStyles } from '@material-ui/core/styles'
 import base64 from 'base-64'
+import { Form, Formik } from 'formik'
 import gql from 'graphql-tag'
 import React, { useContext, useState } from 'react'
 import { useHistory } from 'react-router-dom'
@@ -120,6 +121,9 @@ const Input2FAState = ({ state, dispatch }) => {
       <TL1 className={classes.info}>
         Enter your two-factor authentication code
       </TL1>
+      {/* TODO: refactor the 2FA CodeInput to properly use Formik */}
+      <Formik onSubmit={() => {}} initialValues={{}}>
+        <Form>
           <CodeInput
             name="2fa"
             value={state.twoFAField}
@@ -128,6 +132,9 @@ const Input2FAState = ({ state, dispatch }) => {
             error={invalidToken}
             shouldAutoFocus
           />
+          <button onClick={handleSubmit} className={classes.enterButton} />
+        </Form>
+      </Formik>
       <div className={classes.twofaFooter}>
         {errorMessage && <P className={classes.errorMessage}>{errorMessage}</P>}
         <Button onClick={handleSubmit} buttonClassName={classes.loginButton}>

new-lamassu-admin/src/pages/Authentication/Reset2FA.js

@@ -1,6 +1,7 @@
 import { useQuery, useMutation } from '@apollo/react-hooks'
 import { makeStyles, Grid } from '@material-ui/core'
 import Paper from '@material-ui/core/Paper'
+import { Form, Formik } from 'formik'
 import gql from 'graphql-tag'
 import QRCode from 'qrcode.react'
 import React, { useReducer, useState } from 'react'
@@ -101,6 +102,20 @@ const Reset2FA = () => {
     return null
   }
 
+  const handleSubmit = () => {
+    if (twoFAConfirmation.length !== 6) {
+      setInvalidToken(true)
+      return
+    }
+    reset2FA({
+      variables: {
+        token: token,
+        userID: state.userID,
+        code: twoFAConfirmation
+      }
+    })
+  }
+
   return (
     <Grid
       container
@@ -152,6 +167,9 @@ const Reset2FA = () => {
                     </ActionButton>
                   </div>
                   <div className={classes.confirm2FAInput}>
+                    {/* TODO: refactor the 2FA CodeInput to properly use Formik */}
+                    <Formik onSubmit={() => {}} initialValues={{}}>
+                      <Form>
                         <CodeInput
                           name="2fa"
                           value={twoFAConfirmation}
@@ -160,25 +178,19 @@ const Reset2FA = () => {
                           error={invalidToken}
                           shouldAutoFocus
                         />
+                        <button
+                          onClick={handleSubmit}
+                          className={classes.enterButton}
+                        />
+                      </Form>
+                    </Formik>
                   </div>
                   <div className={classes.twofaFooter}>
                     {getErrorMsg() && (
                       <P className={classes.errorMessage}>{getErrorMsg()}</P>
                     )}
                     <Button
-                      onClick={() => {
+                      onClick={handleSubmit}
-                        if (twoFAConfirmation.length !== 6) {
-                          setInvalidToken(true)
-                          return
-                        }
-                        reset2FA({
-                          variables: {
-                            token: token,
-                            userID: state.userID,
-                            code: twoFAConfirmation
-                          }
-                        })
-                      }}
                       buttonClassName={classes.loginButton}>
                       Done
                     </Button>

new-lamassu-admin/src/pages/Authentication/Setup2FAState.js

@@ -1,6 +1,7 @@
 import { useMutation, useQuery, useLazyQuery } from '@apollo/react-hooks'
 import { makeStyles } from '@material-ui/core/styles'
 import base64 from 'base-64'
+import { Form, Formik } from 'formik'
 import gql from 'graphql-tag'
 import QRCode from 'qrcode.react'
 import React, { useContext, useState } from 'react'
@@ -125,6 +126,14 @@ const Setup2FAState = ({ state, dispatch }) => {
     return null
   }
 
+  const handleSubmit = () => {
+    if (twoFAConfirmation.length !== 6) {
+      setInvalidToken(true)
+      return
+    }
+    setup2FA(mutationOptions)
+  }
+
   return (
     secret &&
     otpauth && (
@@ -159,6 +168,9 @@ const Setup2FAState = ({ state, dispatch }) => {
           </ActionButton>
         </div>
         <div className={classes.confirm2FAInput}>
+          {/* TODO: refactor the 2FA CodeInput to properly use Formik */}
+          <Formik onSubmit={() => {}} initialValues={{}}>
+            <Form>
               <CodeInput
                 name="2fa"
                 value={twoFAConfirmation}
@@ -167,20 +179,15 @@ const Setup2FAState = ({ state, dispatch }) => {
                 error={invalidToken}
                 shouldAutoFocus
               />
+              <button onClick={handleSubmit} className={classes.enterButton} />
+            </Form>
+          </Formik>
         </div>
         <div className={classes.twofaFooter}>
           {getErrorMsg() && (
             <P className={classes.errorMessage}>{getErrorMsg()}</P>
           )}
-          <Button
+          <Button onClick={handleSubmit} buttonClassName={classes.loginButton}>
-            onClick={() => {
-              if (twoFAConfirmation.length !== 6) {
-                setInvalidToken(true)
-                return
-              }
-              setup2FA(mutationOptions)
-            }}
-            buttonClassName={classes.loginButton}>
             Done
           </Button>
         </div>

new-lamassu-admin/src/pages/Authentication/shared.styles.js

@@ -100,6 +100,9 @@ const styles = {
   },
   error: {
     color: errorColor
+  },
+  enterButton: {
+    display: 'none'
   }
 }
 

new-lamassu-admin/src/pages/UserManagement/modals/Input2FAModal.js

@@ -1,5 +1,6 @@
 import { useLazyQuery } from '@apollo/react-hooks'
 import { makeStyles } from '@material-ui/core/styles'
+import { Form, Formik } from 'formik'
 import gql from 'graphql-tag'
 import React, { useState } from 'react'
 
@@ -48,6 +49,14 @@ const Input2FAModal = ({ showModal, handleClose, setConfirmation }) => {
     return null
   }
 
+  const handleSubmit = () => {
+    if (twoFACode.length !== 6) {
+      setInvalidCode(true)
+      return
+    }
+    confirm2FA({ variables: { code: twoFACode } })
+  }
+
   return (
     showModal && (
       <Modal
@@ -61,6 +70,9 @@ const Input2FAModal = ({ showModal, handleClose, setConfirmation }) => {
           To make changes on this user, please confirm this action by entering
           your two-factor authentication code below.
         </P>
+        {/* TODO: refactor the 2FA CodeInput to properly use Formik */}
+        <Formik onSubmit={() => {}} initialValues={{}}>
+          <Form>
             <CodeInput
               name="2fa"
               value={twoFACode}
@@ -70,19 +82,14 @@ const Input2FAModal = ({ showModal, handleClose, setConfirmation }) => {
               containerStyle={classes.codeContainer}
               shouldAutoFocus
             />
+            <button onClick={handleSubmit} className={classes.enterButton} />
+          </Form>
+        </Formik>
         {getErrorMsg() && (
           <P className={classes.errorMessage}>{getErrorMsg()}</P>
         )}
         <div className={classes.footer}>
-          <Button
+          <Button className={classes.submit} onClick={handleSubmit}>
-            className={classes.submit}
-            onClick={() => {
-              if (twoFACode.length !== 6) {
-                setInvalidCode(true)
-                return
-              }
-              confirm2FA({ variables: { code: twoFACode } })
-            }}>
             Confirm
           </Button>
         </div>