Merge pull request #997 from josepfo/fix/get-ui-registration-up-to-spec

fix: font family and default on focus input border

new-lamassu-admin/src/components/inputs/base/CodeInput.styles.js

@@ -9,10 +9,12 @@ const styles = {
     borderRadius: '4px'
   },
   focus: {
-    color: primaryColor,
     border: '2px solid',
     borderColor: primaryColor,
-    borderRadius: '4px'
+    borderRadius: '4px',
+    '&:focus': {
+      outline: 'none'
+    }
   },
   error: {
     borderColor: errorColor

new-lamassu-admin/src/components/typography/styles.js

@@ -129,7 +129,7 @@ export default {
   confirmationCode: {
     extend: base,
     fontSize: codeInputFontSize,
-    fontFamily: fontPrimary,
+    fontFamily: fontSecondary,
     fontWeight: 900
   },
   inline: {

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,14 +121,20 @@ const Input2FAState = ({ state, dispatch }) => {
       <TL1 className={classes.info}>
         Enter your two-factor authentication code
       </TL1>
-      <CodeInput
+      {/* TODO: refactor the 2FA CodeInput to properly use Formik */}
-        name="2fa"
+      <Formik onSubmit={() => {}} initialValues={{}}>
-        value={state.twoFAField}
+        <Form>
-        onChange={handle2FAChange}
+          <CodeInput
-        numInputs={6}
+            name="2fa"
-        error={invalidToken}
+            value={state.twoFAField}
-        shouldAutoFocus
+            onChange={handle2FAChange}
-      />
+            numInputs={6}
+            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,33 +167,30 @@ const Reset2FA = () => {
                     </ActionButton>
                   </div>
                   <div className={classes.confirm2FAInput}>
-                    <CodeInput
+                    {/* TODO: refactor the 2FA CodeInput to properly use Formik */}
-                      name="2fa"
+                    <Formik onSubmit={() => {}} initialValues={{}}>
-                      value={twoFAConfirmation}
+                      <Form>
-                      onChange={handle2FAChange}
+                        <CodeInput
-                      numInputs={6}
+                          name="2fa"
-                      error={invalidToken}
+                          value={twoFAConfirmation}
-                      shouldAutoFocus
+                          onChange={handle2FAChange}
-                    />
+                          numInputs={6}
+                          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,28 +168,26 @@ const Setup2FAState = ({ state, dispatch }) => {
           </ActionButton>
         </div>
         <div className={classes.confirm2FAInput}>
-          <CodeInput
+          {/* TODO: refactor the 2FA CodeInput to properly use Formik */}
-            name="2fa"
+          <Formik onSubmit={() => {}} initialValues={{}}>
-            value={twoFAConfirmation}
+            <Form>
-            onChange={handle2FAChange}
+              <CodeInput
-            numInputs={6}
+                name="2fa"
-            error={invalidToken}
+                value={twoFAConfirmation}
-            shouldAutoFocus
+                onChange={handle2FAChange}
-          />
+                numInputs={6}
+                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,28 +70,26 @@ const Input2FAModal = ({ showModal, handleClose, setConfirmation }) => {
           To make changes on this user, please confirm this action by entering
           your two-factor authentication code below.
         </P>
-        <CodeInput
+        {/* TODO: refactor the 2FA CodeInput to properly use Formik */}
-          name="2fa"
+        <Formik onSubmit={() => {}} initialValues={{}}>
-          value={twoFACode}
+          <Form>
-          onChange={handleCodeChange}
+            <CodeInput
-          numInputs={6}
+              name="2fa"
-          error={invalidCode}
+              value={twoFACode}
-          containerStyle={classes.codeContainer}
+              onChange={handleCodeChange}
-          shouldAutoFocus
+              numInputs={6}
-        />
+              error={invalidCode}
+              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>