feat: add user management screen
feat: login screen fix: login routing and layout feat: add users migration feat: passport login strategy fix: users migration feat: simple authentication fix: request body feat: JWT authorization feat: 2fa step on login feat: 2fa flow feat: add rememberme to req body fix: hide 2fa secret from jwt fix: block login access to logged in user fix: rerouting to wizard refactor: login screen feat: setup 2fa state on login feat: 2fa secret qr code fix: remove jwt from 2fa secret fix: wizard redirect after login fix: 2fa setup flow fix: user id to uuid feat: user roles feat: user sessions and db persistence feat: session saving on DB and cookie refactor: unused code feat: cookie auto renew on request feat: get user data endpoint fix: repeated requests feat: react routing fix: private routes refactor: auth feat: sessions aware of ua and ip feat: sessions on gql feat: session management screen feat: replace user_tokens usage for users feat: user deletion also deletes active sessions feat: remember me alters session cookie accordingly feat: last session by all users fix: login feedback fix: page loading UX feat: routes based on user role feat: header aware of roles feat: reset password fix: reset password endpoint feat: handle password change feat: reset 2FA feat: user role on management screen feat: change user role fix: user last session query fix: context fix: destroy own session feat: reset password now resets sessions feat: reset 2fa now resets sessions refactor: user data refactor: user management screen feat: user enable feat: schema directives fix: remove schema directive temp feat: create new users feat: register endpoint feat: modals for reset links fix: directive Date errors feat: superuser directive feat: create user url modal fix: user management layout feat: confirmation modals fix: info text feat: 2fa input component feat: code input on 2fa state feat: add button styling feat: confirmation modal on superuser action feat: rework 2fa setup screen feat: rework reset 2fa screen fix: session management screen fix: user management screen fix: blacklist roles chore: migrate old customer values to new columns fix: value migration fix: value migration refactor: remove old code
This commit is contained in:
Sérgio Salgado
Josh Harvey
parent
368781864e
commit
fded22f39a
50 changed files with 9839 additions and 4501 deletions
180
new-lamassu-admin/src/pages/Authentication/Setup2FAState.js
Normal file
180
new-lamassu-admin/src/pages/Authentication/Setup2FAState.js
Normal file
|
|
@ -0,0 +1,180 @@
|
|||
import { makeStyles } from '@material-ui/core/styles'
|
||||
import axios from 'axios'
|
||||
import QRCode from 'qrcode.react'
|
||||
import React, { useState, useEffect } from 'react'
|
||||
|
||||
import { ActionButton, Button } from 'src/components/buttons'
|
||||
import { CodeInput } from 'src/components/inputs/base'
|
||||
import { Label2, P } from 'src/components/typography'
|
||||
import { primaryColor } from 'src/styling/variables'
|
||||
|
||||
import styles from './Login.styles'
|
||||
|
||||
const url =
|
||||
process.env.NODE_ENV === 'development' ? 'https://localhost:8070' : ''
|
||||
|
||||
const useStyles = makeStyles(styles)
|
||||
|
||||
const Setup2FAState = ({
|
||||
clientField,
|
||||
passwordField,
|
||||
STATES,
|
||||
handleLoginState
|
||||
}) => {
|
||||
const classes = useStyles()
|
||||
|
||||
const [secret, setSecret] = useState(null)
|
||||
const [otpauth, setOtpauth] = useState(null)
|
||||
const [isShowing, setShowing] = useState(false)
|
||||
|
||||
const [invalidToken, setInvalidToken] = useState(false)
|
||||
const [twoFAConfirmation, setTwoFAConfirmation] = useState('')
|
||||
|
||||
const handle2FAChange = value => {
|
||||
setTwoFAConfirmation(value)
|
||||
setInvalidToken(false)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
get2FASecret()
|
||||
}, [])
|
||||
|
||||
const get2FASecret = () => {
|
||||
axios({
|
||||
method: 'POST',
|
||||
url: `${url}/api/login/2fa/setup`,
|
||||
data: {
|
||||
username: clientField,
|
||||
password: passwordField
|
||||
},
|
||||
options: {
|
||||
withCredentials: true
|
||||
},
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
.then((res, err) => {
|
||||
if (err) return
|
||||
if (res) {
|
||||
setSecret(res.data.secret)
|
||||
setOtpauth(res.data.otpauth)
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
if (err.response && err.response.data) {
|
||||
if (err.response.status === 403) {
|
||||
handleLoginState(STATES.LOGIN)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const save2FASecret = () => {
|
||||
axios({
|
||||
method: 'POST',
|
||||
url: `${url}/api/login/2fa/save`,
|
||||
data: {
|
||||
username: clientField,
|
||||
password: passwordField,
|
||||
secret: secret,
|
||||
code: twoFAConfirmation
|
||||
},
|
||||
options: {
|
||||
withCredentials: true
|
||||
},
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
.then((res, err) => {
|
||||
if (err) console.log(err)
|
||||
if (res) {
|
||||
const status = res.status
|
||||
if (status === 200) handleLoginState(STATES.LOGIN)
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
if (err.response && err.response.data) {
|
||||
if (err.response.status === 403) {
|
||||
setInvalidToken(true)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{secret && otpauth ? (
|
||||
<>
|
||||
<div className={classes.infoWrapper}>
|
||||
<Label2 className={classes.info2}>
|
||||
We detected that this account does not have its two-factor
|
||||
authentication enabled. In order to protect the resources in the
|
||||
system, a two-factor authentication is enforced.
|
||||
</Label2>
|
||||
<Label2 className={classes.info2}>
|
||||
To finish this process, please scan the following QR code or
|
||||
insert the secret further below on an authentication app of your
|
||||
choice, preferably Google Authenticator or Authy.
|
||||
</Label2>
|
||||
</div>
|
||||
<div className={classes.qrCodeWrapper}>
|
||||
<QRCode size={240} fgColor={primaryColor} value={otpauth} />
|
||||
</div>
|
||||
<div className={classes.secretWrapper}>
|
||||
<Label2 className={classes.secretLabel}>Your secret:</Label2>
|
||||
<Label2
|
||||
className={isShowing ? classes.secret : classes.hiddenSecret}>
|
||||
{secret}
|
||||
</Label2>
|
||||
<ActionButton
|
||||
disabled={!secret && !otpauth}
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
setShowing(!isShowing)
|
||||
}}>
|
||||
{isShowing ? 'Hide' : 'Show'}
|
||||
</ActionButton>
|
||||
</div>
|
||||
<div className={classes.confirm2FAInput}>
|
||||
<CodeInput
|
||||
name="2fa"
|
||||
value={twoFAConfirmation}
|
||||
onChange={handle2FAChange}
|
||||
numInputs={6}
|
||||
error={invalidToken}
|
||||
/>
|
||||
</div>
|
||||
<div className={classes.twofaFooter}>
|
||||
{invalidToken && (
|
||||
<P className={classes.errorMessage}>
|
||||
Code is invalid. Please try again.
|
||||
</P>
|
||||
)}
|
||||
<Button
|
||||
onClick={() => {
|
||||
save2FASecret()
|
||||
}}
|
||||
buttonClassName={classes.loginButton}>
|
||||
Done
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
// TODO: should maybe show a spinner here?
|
||||
<div className={classes.twofaFooter}>
|
||||
<Button
|
||||
onClick={() => {
|
||||
console.log('response should be arriving soon')
|
||||
}}
|
||||
buttonClassName={classes.loginButton}>
|
||||
Generate Two Factor Authentication Secret
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Setup2FAState
|
||||
Loading…
Add table
Add a link
Reference in a new issue