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/Register.js
Normal file
180
new-lamassu-admin/src/pages/Authentication/Register.js
Normal file
|
|
@ -0,0 +1,180 @@
|
|||
import { makeStyles, Grid } from '@material-ui/core'
|
||||
import Paper from '@material-ui/core/Paper'
|
||||
import axios from 'axios'
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { useLocation, useHistory } from 'react-router-dom'
|
||||
|
||||
import { Button } from 'src/components/buttons'
|
||||
import { TextInput } from 'src/components/inputs/base'
|
||||
import { H2, Label2, P } from 'src/components/typography'
|
||||
import { ReactComponent as Logo } from 'src/styling/icons/menu/logo.svg'
|
||||
|
||||
import styles from './Login.styles'
|
||||
|
||||
const useQuery = () => new URLSearchParams(useLocation().search)
|
||||
const useStyles = makeStyles(styles)
|
||||
|
||||
const url =
|
||||
process.env.NODE_ENV === 'development' ? 'https://localhost:8070' : ''
|
||||
|
||||
const Register = () => {
|
||||
const classes = useStyles()
|
||||
const history = useHistory()
|
||||
const query = useQuery()
|
||||
const [passwordField, setPasswordField] = useState('')
|
||||
const [confirmPasswordField, setConfirmPasswordField] = useState('')
|
||||
const [invalidPassword, setInvalidPassword] = useState(false)
|
||||
const [username, setUsername] = useState(null)
|
||||
const [role, setRole] = useState(null)
|
||||
const [isLoading, setLoading] = useState(true)
|
||||
const [wasSuccessful, setSuccess] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
validateQuery()
|
||||
}, [])
|
||||
|
||||
const validateQuery = () => {
|
||||
axios({
|
||||
url: `${url}/api/register?t=${query.get('t')}`,
|
||||
method: 'GET',
|
||||
options: {
|
||||
withCredentials: true
|
||||
}
|
||||
})
|
||||
.then((res, err) => {
|
||||
if (err) return
|
||||
if (res && res.status === 200) {
|
||||
setLoading(false)
|
||||
if (res.data === 'The link has expired') setSuccess(false)
|
||||
else {
|
||||
setSuccess(true)
|
||||
setUsername(res.data.username)
|
||||
setRole(res.data.role)
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
history.push('/')
|
||||
})
|
||||
}
|
||||
|
||||
const handleRegister = () => {
|
||||
if (!isValidPassword()) return setInvalidPassword(true)
|
||||
axios({
|
||||
url: `${url}/api/register`,
|
||||
method: 'POST',
|
||||
data: {
|
||||
username: username,
|
||||
password: passwordField,
|
||||
role: role
|
||||
},
|
||||
withCredentials: true,
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
.then((res, err) => {
|
||||
if (err) return
|
||||
if (res && res.status === 200) {
|
||||
history.push('/wizard', { fromAuthRegister: true })
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
history.push('/')
|
||||
})
|
||||
}
|
||||
|
||||
const isValidPassword = () => {
|
||||
return passwordField === confirmPasswordField
|
||||
}
|
||||
|
||||
const handlePasswordChange = event => {
|
||||
setInvalidPassword(false)
|
||||
setPasswordField(event.target.value)
|
||||
}
|
||||
|
||||
const handleConfirmPasswordChange = event => {
|
||||
setInvalidPassword(false)
|
||||
setConfirmPasswordField(event.target.value)
|
||||
}
|
||||
|
||||
return (
|
||||
<Grid
|
||||
container
|
||||
spacing={0}
|
||||
direction="column"
|
||||
alignItems="center"
|
||||
justify="center"
|
||||
style={{ minHeight: '100vh' }}
|
||||
className={classes.welcomeBackground}>
|
||||
<Grid>
|
||||
<div>
|
||||
<Paper elevation={1}>
|
||||
<div className={classes.wrapper}>
|
||||
<div className={classes.titleWrapper}>
|
||||
<Logo className={classes.icon} />
|
||||
<H2 className={classes.title}>Lamassu Admin</H2>
|
||||
</div>
|
||||
{!isLoading && wasSuccessful && (
|
||||
<>
|
||||
<Label2 className={classes.inputLabel}>
|
||||
Insert a password
|
||||
</Label2>
|
||||
<TextInput
|
||||
className={classes.input}
|
||||
error={invalidPassword}
|
||||
name="new-password"
|
||||
autoFocus
|
||||
id="new-password"
|
||||
type="password"
|
||||
size="lg"
|
||||
onChange={handlePasswordChange}
|
||||
value={passwordField}
|
||||
/>
|
||||
<Label2 className={classes.inputLabel}>
|
||||
Confirm password
|
||||
</Label2>
|
||||
<TextInput
|
||||
className={classes.input}
|
||||
error={invalidPassword}
|
||||
name="confirm-password"
|
||||
id="confirm-password"
|
||||
type="password"
|
||||
size="lg"
|
||||
onChange={handleConfirmPasswordChange}
|
||||
value={confirmPasswordField}
|
||||
/>
|
||||
<div className={classes.footer}>
|
||||
{invalidPassword && (
|
||||
<P className={classes.errorMessage}>
|
||||
Passwords do not match!
|
||||
</P>
|
||||
)}
|
||||
<Button
|
||||
onClick={() => {
|
||||
handleRegister()
|
||||
}}
|
||||
buttonClassName={classes.loginButton}>
|
||||
Done
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{!isLoading && !wasSuccessful && (
|
||||
<>
|
||||
<Label2 className={classes.inputLabel}>
|
||||
Link has expired
|
||||
</Label2>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</Paper>
|
||||
</div>
|
||||
</Grid>
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
|
||||
export default Register
|
||||
Loading…
Add table
Add a link
Reference in a new issue