-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added reset password, which required a lot of changes and refactors
This was a very messy merge... This is 95% done, but checking in so that we don't diverge so much again. We diverged a bit with admin rights for sessions. I left all the new stuff in parallel with the old stuff (server and client) and I'll migrate over to the new way represented as captureAccessRightsData on the client side. Still need to change over the MUI styles in the ResetYourPassword.jsx from MUI templates to our styles (they look different, and the difference does not add value). Navigating to /Tasks currently leaves the HeaderBar menu confused, will fix this. Spurious "Please sign in" after resetting password, will fix this. More testing needed -- the steps are pretty complex, with the need for immediate `useRef()` variables in some places to avoid (always losing) race conditions.
- Loading branch information
1 parent
3d9688d
commit e598d5a
Showing
18 changed files
with
1,888 additions
and
1,613 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,179 @@ | ||
| import { Modal } from '@mui/material'; | ||
| import Button from '@mui/material/Button'; | ||
| import Dialog from '@mui/material/Dialog'; | ||
| import DialogContent from '@mui/material/DialogContent'; | ||
| import DialogContentText from '@mui/material/DialogContentText'; | ||
| import DialogTitle from '@mui/material/DialogTitle'; | ||
| import TextField from '@mui/material/TextField'; | ||
| import PropTypes from 'prop-types'; | ||
| import * as React from 'react'; | ||
| import { useEffect, useRef, useState } from 'react'; | ||
| import validator from 'validator'; | ||
| import { renderLog } from '../../common/utils/logging'; | ||
| import { useConnectAppContext } from '../../contexts/ConnectAppContext'; | ||
| import makeRequestParams from '../../react-query/makeRequestParams'; | ||
| import { useLogoutMutation, usePersonRetrieveByEmailMutation, usePersonSaveForAuthMutation } from '../../react-query/mutations'; | ||
| import weConnectQueryFn, { METHOD } from '../../react-query/WeConnectQuery'; | ||
| import { ErrorMessage } from '../Style/sharedStyles'; | ||
| import VerifySecretCodeModal from '../VerifySecretCodeModal'; | ||
|
|
||
| const ResetYourPassword = ({ openDialog, closeDialog }) => { | ||
| renderLog('ResetYourPassword'); | ||
| const { mutate: mutateRetrievePersonByEmail } = usePersonRetrieveByEmailMutation(); | ||
| const { mutate: mutatePersonSaveForAuth } = usePersonSaveForAuthMutation(); | ||
| const { mutate: mutateLogout } = useLogoutMutation(); | ||
| const { getAppContextValue, setAppContextValue } = useConnectAppContext(); | ||
|
|
||
| const [open, setOpen] = React.useState(openDialog); | ||
| const [displayEmailAddress, setDisplayEmailAddress] = useState(true); | ||
| const [warningLine, setWarningLine] = useState(''); | ||
| const [errorMessage, setErrorMessage] = useState(''); | ||
|
|
||
| const emailRef = useRef(''); | ||
| const password1Ref = useRef(''); | ||
| const password2Ref = useRef(''); | ||
| const authPerson = useRef(undefined); | ||
|
|
||
| useEffect(() => { | ||
| setOpen(openDialog); | ||
| }, [openDialog]); | ||
|
|
||
| const secretCodeVerified = getAppContextValue('secretCodeVerifiedForReset') || false; | ||
| useEffect(() => { | ||
| if (secretCodeVerified === true) { | ||
| console.log('received new secretCodeVerifiedForReset', secretCodeVerified); | ||
| setDisplayEmailAddress(false); | ||
| emailRef.current = ''; | ||
| password1Ref.current = ''; | ||
| password2Ref.current = ''; | ||
| } | ||
| }, [secretCodeVerified]); | ||
|
|
||
| const auth = getAppContextValue('authenticatedPerson'); | ||
| useEffect(() => { | ||
| const authP = getAppContextValue('authenticatedPerson'); | ||
| if (authP && open) { | ||
| console.log('received new authP', authP); | ||
| authPerson.current = authP; | ||
| console.log('authPerson.personId in Login useEffect [auth] id: ', authP.personId); | ||
| console.log('authPerson.personId in Login useEffect [auth] open: ', open); | ||
| weConnectQueryFn('send-email-code', { personId: authP.personId }, METHOD.POST) | ||
| .then(setAppContextValue('openVerifySecretCodeModalDialog', true)); | ||
| } | ||
| // eslint would have us add getAppContextValue and setAppContextValue, which causes and endless loop | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, [auth]); | ||
|
|
||
| const sendEmail = async () => { | ||
| const email = emailRef.current.value; | ||
| setAppContextValue('resetEmail', email); | ||
| console.log('email in sendEmail: ', emailRef.current.value); | ||
| if (!validator.isEmail(email)) { | ||
| setWarningLine('Please enter a valid email address.'); | ||
| return; | ||
| } | ||
| setWarningLine(''); | ||
| setAppContextValue('openVerifySecretCodeModalDialog', true); | ||
| // Logout so that the current sessionID will not be reused when resetting password for a potentially differnt staff member | ||
| await mutateLogout(); | ||
| // This retrieve will set the 'authenticatedPerson' app context value, and bring back a new sessionID (without touching the cookie) | ||
| await mutateRetrievePersonByEmail({ emailPersonal: email }); | ||
| }; | ||
|
|
||
| const handleClose = () => { | ||
| setOpen(false); | ||
| closeDialog(false); | ||
| }; | ||
|
|
||
| const changePassword = async () => { | ||
| const pass1 = password1Ref.current.value; | ||
| const pass2 = password2Ref.current.value; | ||
| const person = authPerson.current; | ||
|
|
||
| console.log('password in changePassword: ', pass1, pass2); | ||
| if (pass1 !== pass2) { | ||
| setErrorMessage('Your password entries do not match.'); | ||
| } else { | ||
| setErrorMessage(''); | ||
| // const person = getAppContextValue('authenticatedPerson'); | ||
| await mutatePersonSaveForAuth(makeRequestParams({ id: person.id }, { password: pass1 })); | ||
| setAppContextValue('isAuthenticated', true); | ||
| console.log('ResetYourPassword changePassword pass1, pass2: ', pass1, pass2); | ||
| setAppContextValue('resetPassword', pass1); | ||
| handleClose(); | ||
| } | ||
| }; | ||
|
|
||
| console.log('ResetYourPassword incoming authPerson: ', authPerson); | ||
| return ( | ||
| <> | ||
| <Modal | ||
| open={open} | ||
| // onClose={handleClose} | ||
| aria-labelledby="parent-modal-title" | ||
| aria-describedby="parent-modal-description" | ||
| > | ||
| <Dialog open={open} onClose={handleClose}> | ||
| <DialogTitle sx={{ width: '400px' }}>Reset your Password</DialogTitle> | ||
| <div id="warningLine" style={{ color: 'red', padding: '10px 0 0 30px', paddingBottom: '20px' }}>{warningLine}</div> | ||
| <DialogContent> | ||
| <DialogContentText sx={{ marginBottom: '15px' }}> | ||
| {displayEmailAddress ? 'Please enter your email address.' : 'Please enter your new password.'} | ||
| </DialogContentText> | ||
| <ErrorMessage>{errorMessage}</ErrorMessage> | ||
| { displayEmailAddress ? ( | ||
| <TextField | ||
| autoFocus | ||
| fullWidth | ||
| id="email" | ||
| inputRef={emailRef} | ||
| label="Email Address" | ||
| margin="dense" | ||
| name="email" | ||
| required | ||
| type="email" | ||
| variant="standard" | ||
| /> | ||
| ) : ( | ||
| <form> | ||
| <TextField | ||
| autoFocus | ||
| fullWidth | ||
| id="field1" | ||
| inputRef={password1Ref} | ||
| label="Password" | ||
| margin="dense" | ||
| name="password1" | ||
| required | ||
| type="password" | ||
| variant="standard" | ||
| /> | ||
| <TextField | ||
| fullWidth | ||
| id="field2" | ||
| inputRef={password2Ref} | ||
| label="Verify Password" | ||
| margin="dense" | ||
| name="password2" | ||
| required | ||
| type="password" | ||
| variant="standard" | ||
| /> | ||
| </form> | ||
| )} | ||
| <Button sx={{ float: 'right' }} onClick={displayEmailAddress ? sendEmail : changePassword}> | ||
| {displayEmailAddress ? 'Send reset email' : 'Save your new password'} | ||
| </Button> | ||
| </DialogContent> | ||
| </Dialog> | ||
| </Modal> | ||
| <VerifySecretCodeModal person={authPerson.current} /> | ||
| </> | ||
| ); | ||
| }; | ||
| ResetYourPassword.propTypes = { | ||
| openDialog: PropTypes.func, | ||
| closeDialog: PropTypes.func, | ||
| }; | ||
|
|
||
| export default ResetYourPassword; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.