fix: email verification and UX
fix: remove annotations fix: styles fix: move directives from schema chore: rework auth routes feat: start graphql schema modularization feat: start directives rework fix: directive cycle fix: directive resolve fix: schema auth directive feat: migrate auth routes to gql fix: apollo client fix: migrate forms to formik refactor: user resolver chore: final touches on auth components fix: routes
This commit is contained in:
Sérgio Salgado
Josh Harvey
parent
fded22f39a
commit
d295acc261
33 changed files with 1319 additions and 1139 deletions
|
|
@ -1,100 +1,94 @@
|
|||
import { useQuery, useMutation } from '@apollo/react-hooks'
|
||||
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 { Field, Form, Formik } from 'formik'
|
||||
import gql from 'graphql-tag'
|
||||
import React, { useState } from 'react'
|
||||
import { useLocation, useHistory } from 'react-router-dom'
|
||||
import * as Yup from 'yup'
|
||||
|
||||
import { Button } from 'src/components/buttons'
|
||||
import { TextInput } from 'src/components/inputs/base'
|
||||
import { SecretInput } from 'src/components/inputs/formik/'
|
||||
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 QueryParams = () => new URLSearchParams(useLocation().search)
|
||||
const useStyles = makeStyles(styles)
|
||||
|
||||
const url =
|
||||
process.env.NODE_ENV === 'development' ? 'https://localhost:8070' : ''
|
||||
const VALIDATE_RESET_PASSWORD_LINK = gql`
|
||||
query validateResetPasswordLink($token: String!) {
|
||||
validateResetPasswordLink(token: $token) {
|
||||
id
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
const RESET_PASSWORD = gql`
|
||||
mutation resetPassword($userID: ID!, $newPassword: String!) {
|
||||
resetPassword(userID: $userID, newPassword: $newPassword)
|
||||
}
|
||||
`
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
password: Yup.string()
|
||||
.required('A new password is required')
|
||||
.test(
|
||||
'len',
|
||||
'New password must contain more than 8 characters',
|
||||
val => val.length >= 8
|
||||
),
|
||||
confirmPassword: Yup.string().oneOf(
|
||||
[Yup.ref('password'), null],
|
||||
'Passwords must match'
|
||||
)
|
||||
})
|
||||
|
||||
const initialValues = {
|
||||
password: '',
|
||||
confirmPassword: ''
|
||||
}
|
||||
|
||||
const ResetPassword = () => {
|
||||
const classes = useStyles()
|
||||
const history = useHistory()
|
||||
const query = useQuery()
|
||||
const [newPasswordField, setNewPasswordField] = useState('')
|
||||
const [confirmPasswordField, setConfirmPasswordField] = useState('')
|
||||
const [invalidPassword, setInvalidPassword] = useState(false)
|
||||
const token = QueryParams().get('t')
|
||||
const [userID, setUserID] = useState(null)
|
||||
const [isLoading, setLoading] = useState(true)
|
||||
const [wasSuccessful, setSuccess] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
validateQuery()
|
||||
}, [])
|
||||
|
||||
const validateQuery = () => {
|
||||
axios({
|
||||
url: `${url}/api/resetpassword?t=${query.get('t')}`,
|
||||
method: 'GET',
|
||||
options: {
|
||||
withCredentials: true
|
||||
useQuery(VALIDATE_RESET_PASSWORD_LINK, {
|
||||
variables: { token: token },
|
||||
onCompleted: ({ validateResetPasswordLink: info }) => {
|
||||
setLoading(false)
|
||||
if (!info) {
|
||||
setSuccess(false)
|
||||
} else {
|
||||
setSuccess(true)
|
||||
setUserID(info.id)
|
||||
}
|
||||
})
|
||||
.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)
|
||||
setUserID(res.data.userID)
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
history.push('/')
|
||||
})
|
||||
}
|
||||
},
|
||||
onError: () => {
|
||||
setLoading(false)
|
||||
setSuccess(false)
|
||||
}
|
||||
})
|
||||
|
||||
const handlePasswordReset = () => {
|
||||
if (!isValidPasswordChange()) return setInvalidPassword(true)
|
||||
axios({
|
||||
url: `${url}/api/updatepassword`,
|
||||
method: 'POST',
|
||||
data: {
|
||||
userID: userID,
|
||||
newPassword: newPasswordField
|
||||
},
|
||||
withCredentials: true,
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
.then((res, err) => {
|
||||
if (err) return
|
||||
if (res && res.status === 200) {
|
||||
history.push('/')
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
history.push('/')
|
||||
})
|
||||
}
|
||||
const [resetPassword, { error }] = useMutation(RESET_PASSWORD, {
|
||||
onCompleted: ({ resetPassword: success }) => {
|
||||
if (success) history.push('/')
|
||||
}
|
||||
})
|
||||
|
||||
const isValidPasswordChange = () => {
|
||||
return newPasswordField === confirmPasswordField
|
||||
}
|
||||
|
||||
const handleNewPasswordChange = event => {
|
||||
setInvalidPassword(false)
|
||||
setNewPasswordField(event.target.value)
|
||||
}
|
||||
|
||||
const handleConfirmPasswordChange = event => {
|
||||
setInvalidPassword(false)
|
||||
setConfirmPasswordField(event.target.value)
|
||||
const getErrorMsg = (formikErrors, formikTouched) => {
|
||||
if (!formikErrors || !formikTouched) return null
|
||||
if (error) return 'Internal server error'
|
||||
if (formikErrors.password && formikTouched.password)
|
||||
return formikErrors.password
|
||||
if (formikErrors.confirmPassword && formikTouched.confirmPassword)
|
||||
return formikErrors.confirmPassword
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -104,7 +98,6 @@ const ResetPassword = () => {
|
|||
direction="column"
|
||||
alignItems="center"
|
||||
justify="center"
|
||||
style={{ minHeight: '100vh' }}
|
||||
className={classes.welcomeBackground}>
|
||||
<Grid>
|
||||
<div>
|
||||
|
|
@ -115,49 +108,51 @@ const ResetPassword = () => {
|
|||
<H2 className={classes.title}>Lamassu Admin</H2>
|
||||
</div>
|
||||
{!isLoading && wasSuccessful && (
|
||||
<>
|
||||
<Label2 className={classes.inputLabel}>
|
||||
Insert new password
|
||||
</Label2>
|
||||
<TextInput
|
||||
className={classes.input}
|
||||
error={invalidPassword}
|
||||
name="new-password"
|
||||
autoFocus
|
||||
id="new-password"
|
||||
type="password"
|
||||
size="lg"
|
||||
onChange={handleNewPasswordChange}
|
||||
value={newPasswordField}
|
||||
/>
|
||||
<Label2 className={classes.inputLabel}>
|
||||
Confirm new 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={() => {
|
||||
handlePasswordReset()
|
||||
}}
|
||||
buttonClassName={classes.loginButton}>
|
||||
Done
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
<Formik
|
||||
validationSchema={validationSchema}
|
||||
initialValues={initialValues}
|
||||
onSubmit={values => {
|
||||
resetPassword({
|
||||
variables: {
|
||||
userID: userID,
|
||||
newPassword: values.confirmPassword
|
||||
}
|
||||
})
|
||||
}}>
|
||||
{({ errors, touched }) => (
|
||||
<Form id="reset-password">
|
||||
<Field
|
||||
name="password"
|
||||
autoFocus
|
||||
size="lg"
|
||||
component={SecretInput}
|
||||
label="New password"
|
||||
fullWidth
|
||||
className={classes.input}
|
||||
/>
|
||||
<Field
|
||||
name="confirmPassword"
|
||||
size="lg"
|
||||
component={SecretInput}
|
||||
label="Confirm your password"
|
||||
fullWidth
|
||||
/>
|
||||
<div className={classes.footer}>
|
||||
{getErrorMsg(errors, touched) && (
|
||||
<P className={classes.errorMessage}>
|
||||
{getErrorMsg(errors, touched)}
|
||||
</P>
|
||||
)}
|
||||
<Button
|
||||
type="submit"
|
||||
form="reset-password"
|
||||
buttonClassName={classes.loginButton}>
|
||||
Done
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
)}
|
||||
{!isLoading && !wasSuccessful && (
|
||||
<>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue