generated from ctc-uci/npo-frontend-vite-template
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'dev' into account-page-fixes
- Loading branch information
Showing
32 changed files
with
514 additions
and
348 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
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 |
|---|---|---|
| @@ -1,4 +1,3 @@ | ||
| /* eslint-disable react/jsx-props-no-spreading */ | ||
| import { | ||
| Box, | ||
| FormLabel, | ||
|
|
||
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,33 @@ | ||
| import { Box, Heading, Button, Center, Link} from '@chakra-ui/react'; | ||
|
|
||
| const AccountPendingApproval = () => { | ||
|
|
||
| return ( | ||
| <Center h="90vh"> | ||
| <Box pt={4}> | ||
| <Heading as='h1' size='lg'>Account Pending Approval</Heading> | ||
| <Center> | ||
| <Link href="/login"> | ||
| <Button | ||
| style={{ | ||
| borderRadius: '30px', | ||
| marginTop: '30px', | ||
| paddingLeft: '80px', | ||
| paddingRight: '80px', | ||
| width: '140px', | ||
| height: '38px', | ||
| }} | ||
| backgroundColor={'#243268'} | ||
| color={'#ffffff'} | ||
| _hover={{backgroundColor: '#1A2559'}} | ||
| > | ||
| Return to login | ||
| </Button> | ||
| </Link> | ||
| </Center> | ||
| </Box> | ||
| </Center> | ||
| ) | ||
| }; | ||
|
|
||
| export default AccountPendingApproval; |
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,145 @@ | ||
| import { useState } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { confirmNewPassword } from '../../utils/auth_utils'; | ||
| import { FormControl, Input, Button, Center, Link, Box, Heading, Text, Alert, AlertDescription} from '@chakra-ui/react'; | ||
|
|
||
| const CreateNewPassword = ({ code }) => { | ||
| const [password, setPassword] = useState(''); | ||
| const [checkPassword, setCheckPassword] = useState(''); | ||
| const [hasError, setHasError] = useState(false); | ||
| const [errorMessage, setErrorMessage] = useState(); | ||
|
|
||
| const handleResetPassword = async e => { | ||
| try { | ||
| e.preventDefault(); | ||
| setHasError(false); | ||
| if (password !== checkPassword) { | ||
| throw new Error("Passwords do not match."); | ||
| } | ||
| await confirmNewPassword(code, password); | ||
| setErrorMessage(''); | ||
| setPassword(''); | ||
| window.location.replace("/createNewPasswordConfirmation"); | ||
| } catch (err) { | ||
| setHasError(true); | ||
| console.log(err.message); | ||
| if (err.code === "auth/weak-password"){ | ||
| setErrorMessage("Password must be at least 6 characters."); | ||
| } else if (err.code === "auth/invalid-action-code"){ | ||
| setErrorMessage("Link has expired."); | ||
| } else { | ||
| setErrorMessage(err.message); | ||
| } | ||
| } | ||
| }; | ||
| return ( | ||
| <Box> | ||
| <Box> | ||
| { hasError && | ||
| <Alert | ||
| status='warning' | ||
| alignItems='center' | ||
| justifyContent='center' | ||
| height='80px' | ||
| position='absolute' | ||
| backgroundColor="#F69052" | ||
| color="black" | ||
| > | ||
| <AlertDescription>{ errorMessage }</AlertDescription> | ||
| </Alert> | ||
| } | ||
| </Box> | ||
|
|
||
| <Center h="90vh"> | ||
| <Box | ||
| style={{ | ||
| margin: 'auto', | ||
| textAlign: 'center', | ||
| width: '598px', | ||
| minWidth: '300px', | ||
| }} | ||
| > | ||
| <Heading as='h1' size='lg'>Enter New Password</Heading> | ||
| <Text as='h2' size='md' mt={2}>Please enter a new password.</Text> | ||
| <form onSubmit={handleResetPassword}> | ||
| <FormControl> | ||
| <Box> | ||
| <Input | ||
| style={{ width: '360px', height: '48px', marginTop: '40px' }} | ||
| id={"password"} | ||
| isRequired={true} | ||
| onChange={({ target }) => setPassword(target.value)} | ||
| placeholder="Enter new password" | ||
| borderColor={"#CBD5E0"} | ||
| borderRadius= '3px' | ||
| type="password" | ||
| /> | ||
| <Input | ||
| style={{ width: '360px', height: '48px', margin: '20px' }} | ||
| id={"checkPassword"} | ||
| isRequired={true} | ||
| onChange={({ target }) => setCheckPassword(target.value)} | ||
| placeholder="Re-enter password" | ||
| borderColor={"#CBD5E0"} | ||
| borderRadius= '3px' | ||
| type="password" | ||
| /> | ||
| </Box> | ||
| <Box | ||
| style={{ | ||
| marginTop: '25px', | ||
| marginBottom: '25px', | ||
| }} | ||
| > | ||
| <Link href='/login'> | ||
| <Button | ||
| style={{ | ||
| borderRadius: '30px', | ||
| borderColor: '#155696', | ||
| borderWidth: '1.5px', | ||
| marginRight: '16px', | ||
| paddingLeft: '80px', | ||
| paddingRight: '80px', | ||
| width: '140px', | ||
| height: '38px', | ||
| }} | ||
| backgroundColor={'#FFFFFF'} | ||
| color={'#155696'} | ||
| variant='outline' | ||
| _hover={{backgroundColor: '#E0E0E0'}} | ||
| > | ||
| Cancel | ||
| </Button> | ||
| </Link> | ||
|
|
||
| <Button | ||
| type="submit" | ||
| style={{ | ||
| borderRadius: '30px', | ||
| marginLeft: '16px', | ||
| paddingLeft: '80px', | ||
| paddingRight: '80px', | ||
| width: '140px', | ||
| height: '38px', | ||
| }} | ||
| backgroundColor={'#243268'} | ||
| color={'#ffffff'} | ||
| _hover={{backgroundColor: '#1A2559'}} | ||
| > | ||
| Reset Password | ||
| </Button> | ||
|
|
||
| </Box> | ||
| </FormControl> | ||
| </form> | ||
| </Box> | ||
| </Center> | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
| CreateNewPassword.propTypes = { | ||
| code: PropTypes.string.isRequired, | ||
| }; | ||
|
|
||
| export default CreateNewPassword; |
33 changes: 33 additions & 0 deletions
33
src/components/Authentication/CreateNewPasswordConfirmation.jsx
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,33 @@ | ||
| import { Box, Heading, Button, Center, Link} from '@chakra-ui/react'; | ||
|
|
||
| const CreateNewPasswordConfirmation = () => { | ||
|
|
||
| return ( | ||
| <Center h="90vh"> | ||
| <Box pt={4}> | ||
| <Heading as='h1' size='lg'>Password Successfully Reset</Heading> | ||
| <Center> | ||
| <Link href="/login"> | ||
| <Button | ||
| style={{ | ||
| borderRadius: '30px', | ||
| marginTop: '30px', | ||
| paddingLeft: '80px', | ||
| paddingRight: '80px', | ||
| width: '140px', | ||
| height: '38px', | ||
| }} | ||
| backgroundColor={'#243268'} | ||
| color={'#ffffff'} | ||
| _hover={{backgroundColor: '#1A2559'}} | ||
| > | ||
| Return to login | ||
| </Button> | ||
| </Link> | ||
| </Center> | ||
| </Box> | ||
| </Center> | ||
| ) | ||
| }; | ||
|
|
||
| export default CreateNewPasswordConfirmation; |
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.