lamassu/lamassu-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: submit 2FA code upon pressing enter

Browse source
This commit is contained in:
José Oliveira 2021-12-14 18:42:54 +00:00
parent 6023895547
commit 1b81da35d2
5 changed files with 100 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

23
new-lamassu-admin/src/pages/Authentication/Input2FAState.js
View file

@ -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
name="2fa"
value={state.twoFAField}
onChange={handle2FAChange}
numInputs={6}
error={invalidToken}
shouldAutoFocus
/>
{/* TODO: refactor the 2FA CodeInput to properly use Formik */}
<Formik onSubmit={() => {}} initialValues={{}}>
<Form>
<CodeInput
name="2fa"
value={state.twoFAField}
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}>

54
new-lamassu-admin/src/pages/Authentication/Reset2FA.js
View file

@ -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
name="2fa"
value={twoFAConfirmation}
onChange={handle2FAChange}
numInputs={6}
error={invalidToken}
shouldAutoFocus
/>
{/* TODO: refactor the 2FA CodeInput to properly use Formik */}
<Formik onSubmit={() => {}} initialValues={{}}>
<Form>
<CodeInput
name="2fa"
value={twoFAConfirmation}
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={() => {
if (twoFAConfirmation.length !== 6) {
setInvalidToken(true)
return
}
reset2FA({
variables: {
token: token,
userID: state.userID,
code: twoFAConfirmation
}
})
}}
onClick={handleSubmit}
buttonClassName={classes.loginButton}>
Done
</Button>

41
new-lamassu-admin/src/pages/Authentication/Setup2FAState.js
View file

@ -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
name="2fa"
value={twoFAConfirmation}
onChange={handle2FAChange}
numInputs={6}
error={invalidToken}
shouldAutoFocus
/>
{/* TODO: refactor the 2FA CodeInput to properly use Formik */}
<Formik onSubmit={() => {}} initialValues={{}}>
<Form>
<CodeInput
name="2fa"
value={twoFAConfirmation}
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={() => {
if (twoFAConfirmation.length !== 6) {
setInvalidToken(true)
return
}
setup2FA(mutationOptions)
}}
buttonClassName={classes.loginButton}>
<Button onClick={handleSubmit} buttonClassName={classes.loginButton}>
Done
</Button>
</div>

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

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

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

@ -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
name="2fa"
value={twoFACode}
onChange={handleCodeChange}
numInputs={6}
error={invalidCode}
containerStyle={classes.codeContainer}
shouldAutoFocus
/>
{/* TODO: refactor the 2FA CodeInput to properly use Formik */}
<Formik onSubmit={() => {}} initialValues={{}}>
<Form>
<CodeInput
name="2fa"
value={twoFACode}
onChange={handleCodeChange}
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
className={classes.submit}
onClick={() => {
if (twoFACode.length !== 6) {
setInvalidCode(true)
return
}
confirm2FA({ variables: { code: twoFACode } })
}}>
<Button className={classes.submit} onClick={handleSubmit}>
Confirm
</Button>
</div>