Add Sign Up and Login Pages (#66) #84
There are no files selected for viewing
This file contains hidden or 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 hidden or 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,15 @@ | ||
| import React from 'react' | ||
| import Typography from '@mui/material/Typography'; | ||
| function Copyright(props: any) { | ||
| return ( | ||
| <Typography variant="body2" color="text.secondary" align="center" {...props}> | ||
| {'Copyright © '} | ||
| Pantry Node | ||
| {' '} | ||
| {new Date().getFullYear()} | ||
| {'.'} | ||
| </Typography> | ||
| ) | ||
| } | ||
|
|
||
| export default Copyright; |
This file contains hidden or 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,14 +1,102 @@ | ||
| import * as React from 'react'; | ||
| import Avatar from '@mui/material/Avatar'; | ||
| import Button from '@mui/material/Button'; | ||
| import CssBaseline from '@mui/material/CssBaseline'; | ||
| import TextField from '@mui/material/TextField'; | ||
| // import FormControlLabel from '@mui/material/FormControlLabel'; | ||
| // import Checkbox from '@mui/material/Checkbox'; | ||
| import Link from '@mui/material/Link'; | ||
| import Grid from '@mui/material/Grid'; | ||
| import Box from '@mui/material/Box'; | ||
| import { useNavigate } from "react-router-dom"; | ||
| import LockOutlinedIcon from '@mui/icons-material/LockOutlined'; | ||
| import Typography from '@mui/material/Typography'; | ||
| import Container from '@mui/material/Container'; | ||
| import Copyright from '../Components/Copyright'; | ||
|
|
||
|
|
||
|
|
||
| export default function Login() { | ||
| const navigate = useNavigate(); | ||
| const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => { | ||
| event.preventDefault(); | ||
| const data = new FormData(event.currentTarget); | ||
| console.log({ | ||
| email: data.get('email'), | ||
| password: data.get('password'), | ||
| }); | ||
| navigate("/") | ||
| }; | ||
|
|
||
| return ( | ||
|
|
||
| <Container component="main" maxWidth="xs"> | ||
| <CssBaseline /> | ||
| <Box | ||
| sx={{ | ||
| marginTop: 8, | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| alignItems: 'center', | ||
| }} | ||
| > | ||
| <Avatar sx={{ m: 1, bgcolor: '#8C2332' }}> | ||
| <LockOutlinedIcon /> | ||
| </Avatar> | ||
| <Typography component="h1" variant="h5"> | ||
| Login | ||
| </Typography> | ||
| <Box component="form" onSubmit={handleSubmit} sx={{ mt: 1 }}> | ||
| <TextField | ||
| margin="normal" | ||
| required | ||
| fullWidth | ||
| id="email" | ||
| label="Email Address" | ||
| name="email" | ||
| autoComplete="email" | ||
| autoFocus | ||
| /> | ||
| <TextField | ||
| margin="normal" | ||
| required | ||
| fullWidth | ||
| name="password" | ||
| label="Password" | ||
| type="password" | ||
| id="password" | ||
| autoComplete="current-password" | ||
| /> | ||
| {/* <FormControlLabel | ||
| control={<Checkbox value="remember" color="primary" />} | ||
| label="Remember me" | ||
| /> */} | ||
| <Button | ||
| type="submit" | ||
| fullWidth | ||
| variant="contained" | ||
| sx={{ mt: 3, mb: 2, py:2 }} | ||
| style={{ | ||
| backgroundColor: "primary" | ||
| }} | ||
| > | ||
| Login | ||
| </Button> | ||
| <Grid container> | ||
| <Grid item xs> | ||
| <Link href="#" variant="body2"> | ||
| Forgot password? | ||
| </Link> | ||
| </Grid> | ||
| <Grid item> | ||
| <Link href="/signup" variant="body2"> | ||
| {"Don't have an account? Sign Up"} | ||
| </Link> | ||
| </Grid> | ||
| </Grid> | ||
| </Box> | ||
| </Box> | ||
| <Copyright sx={{ mt: 8, mb: 4 }} /> | ||
| </Container> | ||
| ); | ||
| } | ||
This file contains hidden or 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,120 @@ | ||
| import * as React from 'react'; | ||
| import Avatar from '@mui/material/Avatar'; | ||
| import Button from '@mui/material/Button'; | ||
| import CssBaseline from '@mui/material/CssBaseline'; | ||
| import TextField from '@mui/material/TextField'; | ||
| // import FormControlLabel from '@mui/material/FormControlLabel'; | ||
| // import Checkbox from '@mui/material/Checkbox'; | ||
| import Link from '@mui/material/Link'; | ||
| import Grid from '@mui/material/Grid'; | ||
| import Box from '@mui/material/Box'; | ||
| import { useNavigate } from "react-router-dom"; | ||
| import LockOutlinedIcon from '@mui/icons-material/LockOutlined'; | ||
| import Typography from '@mui/material/Typography'; | ||
| import Container from '@mui/material/Container'; | ||
| import Copyright from '../Components/Copyright'; | ||
|
|
||
|
|
||
|
|
||
| export default function SignUp() { | ||
|
Contributor
There was a problem hiding this comment. Have you given a thought about switching between the components of 'Login', 'Signup', and 'ForgotPassowrd'? under a single page based on the user selection?
Contributor
Author
There was a problem hiding this comment. I did all of these approve this |
||
| const navigate = useNavigate(); | ||
| const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => { | ||
| event.preventDefault(); | ||
| const data = new FormData(event.currentTarget); | ||
| console.log({ | ||
| email: data.get('email'), | ||
| password: data.get('password'), | ||
| }); | ||
| console.log("trying to navigate") | ||
| navigate("/") | ||
| }; | ||
|
|
||
|
|
||
| return ( | ||
| <Container component="main" maxWidth="xs"> | ||
| <CssBaseline /> | ||
| <Box | ||
| sx={{ | ||
| marginTop: 8, | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| alignItems: 'center', | ||
| }} | ||
| > | ||
| <Avatar sx={{ m: 1, bgcolor: '#8C2332' }}> | ||
| <LockOutlinedIcon /> | ||
| </Avatar> | ||
| <Typography component="h1" variant="h5"> | ||
| Sign up | ||
| </Typography> | ||
| <Box component="form" onSubmit={handleSubmit} sx={{ mt: 3 }}> | ||
| <Grid container spacing={2}> | ||
| <Grid item xs={12} > | ||
| <TextField | ||
| autoComplete="given-name" | ||
| name="Name" | ||
| required | ||
| fullWidth | ||
| id="Name" | ||
| label="Name" | ||
| autoFocus | ||
| /> | ||
| </Grid> | ||
| <Grid item xs={12} > | ||
| <TextField | ||
| required | ||
| fullWidth | ||
| id="phoneNumber" | ||
| label="Phone Number" | ||
| name="phoneNumber" | ||
| autoComplete="phone-number" | ||
| /> | ||
| </Grid> | ||
| <Grid item xs={12}> | ||
| <TextField | ||
| required | ||
| fullWidth | ||
| id="email" | ||
| label="Email Address" | ||
| name="email" | ||
| autoComplete="email" | ||
| /> | ||
| </Grid> | ||
| <Grid item xs={12}> | ||
| <TextField | ||
| required | ||
| fullWidth | ||
| name="password" | ||
| label="Password" | ||
| type="password" | ||
| id="password" | ||
| autoComplete="new-password" | ||
| /> | ||
| </Grid> | ||
|
|
||
| </Grid> | ||
| <Button | ||
| type="submit" | ||
| fullWidth | ||
| variant="contained" | ||
| sx={{ mt: 3, mb: 2, py:2 }} | ||
|
|
||
| style={{ | ||
| backgroundColor: "primary" | ||
| }} | ||
| > | ||
| Sign Up | ||
| </Button> | ||
| <Grid container justifyContent="flex-end"> | ||
| <Grid item> | ||
| <Link href="/login" variant="body2"> | ||
| Already have an account? Sign in | ||
| </Link> | ||
| </Grid> | ||
| </Grid> | ||
| </Box> | ||
| </Box> | ||
| <Copyright sx={{ mt: 5 }} /> | ||
| </Container> | ||
| ); | ||
| } | ||
This file contains hidden or 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
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is it possible to have another link for 'forgot password?'?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
its there it is just commented out because I don't want the people to focus on how to have session with Token I want the focus being on getting the Login Workflow Correct and Talking to the backend team.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I did all of these approve this