password-less-authentication-ui-completed

frontend/src/App.jsx

@@ -12,36 +12,43 @@ import SignUp from './components/signup'
 import Home from './components/Home'
 import UpdateProfile from './components/UpdateProfile'
 import ForgotPassword from './components/ForgotPassword'
-
+import SendVerifyLink from './components/SendVerifyLink'
 // context
 import { AuthProvider } from './context/AuthContext'
 
 // Route
 import PrivateRoute from './route/PrivateRoute'
 
+
 function App() {
 
     return (
         <Router>
             <AuthProvider>
                 <Switch>
                     <Route path="/signin">
-                        <SignIn/>
+                        <SignIn />
                     </Route>
                     <Route path="/signup">
                         <SignUp />
                     </Route>
                     <Route path="/forgot-password">
                         <ForgotPassword />
                     </Route>
-                    
+
                     <PrivateRoute>
                         <Route exact path="/">
-                            <Home/>
+                            <Home />
                         </Route>
                         <Route path="/update-profile">
                             <UpdateProfile />
                         </Route>
+                        <Route path="/send-email-link">
+                            <SendVerifyLink btnName={'Send Email Link'} status={true} />
+                        </Route>
+                        <Route path="/verify-email-link">
+                            <SendVerifyLink btnName={'Verify Email Link'} status={false} />
+                        </Route>
                     </PrivateRoute>
                 </Switch>
             </AuthProvider>

frontend/src/components/Home.jsx

@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react'
+import React, { useEffect } from 'react'
 import { Link, useHistory } from "react-router-dom"
 import { useAuth } from '../context/AuthContext'
 
@@ -9,41 +9,52 @@ export default function Home() {
     const { currentUser, logout } = useAuth()
     const history = useHistory()
 
-    useEffect(()=> {
+    useEffect(() => {
         console.log('currentUser: ', currentUser);
-        if(!currentUser) {
+        if (!currentUser) {
             history.push("/signin")
         } else {
             history.push("/")
         }
-    },[currentUser])
+    }, [currentUser])
 
 
     // handle functions
-    function handleLogout (e) {
+    function handleLogout(e) {
         logout()
     }
-    function handleUpdateProfile () {
+    function handleUpdateProfile() {
         history.push('/update-profile')
     }
-
+    function handleSendEmailLink() {
+        history.push({
+            pathname: '/send-email-link',
+            state: {
+                btnName: "Send Email Link"
+            }
+        })
+    }
     return (
         <div>
             {
-                currentUser?
-                (
-                    <div>
-                        <h1>My home</h1>
-                        <Button variant="contained" color="primary" onClick={handleLogout}>
-                            Logout
+                currentUser ?
+                    (
+                        <div>
+                            <h1>My home</h1>
+                            <Button variant="contained" color="primary" onClick={handleLogout}>
+                                Logout
+                        </Button>
+                            <br />
+                            <Button variant="contained" color="secondary" onClick={handleUpdateProfile}>
+                                Update profile
                         </Button>
-                        <br/>
-                        <Button variant="contained" color="secondary" onClick={handleUpdateProfile}>
-                            Update profile
+                            <br />
+                            <Button variant="contained" color="secondary" onClick={handleSendEmailLink}>
+                                Send Email Link
                         </Button>
-                    </div>
-                ):
-                <h1>Loading...</h1>
+                        </div>
+                    ) :
+                    <h1>Loading...</h1>
             }
         </div>
     )

frontend/src/components/SendVerifyLink.jsx

@@ -0,0 +1,108 @@
+import React, { useState } from 'react';
+import Avatar from '@material-ui/core/Avatar';
+import Button from '@material-ui/core/Button';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import TextField from '@material-ui/core/TextField';
+import Link from '@material-ui/core/Link';
+import Box from '@material-ui/core/Box';
+import EmailOutlinedIcon from '@material-ui/icons/EmailOutlined';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+import Container from '@material-ui/core/Container';
+import { useHistory } from "react-router-dom";
+
+
+function Copyright() {
+    return (
+        <Typography variant="body2" color="textSecondary" align="center">
+            {'Copyright © '}
+            <Link color="inherit" href="https://material-ui.com/">
+                Your Website
+        </Link>{' '}
+            {new Date().getFullYear()}
+            {'.'}
+        </Typography>
+    );
+}
+
+const useStyles = makeStyles((theme) => ({
+    paper: {
+        marginTop: theme.spacing(8),
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+    },
+    avatar: {
+        margin: theme.spacing(1),
+        backgroundColor: theme.palette.secondary.main,
+    },
+    form: {
+        width: '100%', // Fix IE 11 issue.
+        marginTop: theme.spacing(1),
+    },
+    submit: {
+        margin: theme.spacing(3, 0, 2),
+    },
+}));
+
+export default function SendVerifyLink(props) {
+    const { btnName, status } = props;
+    const history = useHistory()
+    const classes = useStyles();
+
+    //handle function
+
+    function sendEmail() {
+        history.push({
+            pathname: '/verify-email-link'
+        })
+    };
+    function verifyEmail() {
+        history.push({
+            pathname: '/'
+        })
+    };
+
+    function handleSubmit() {
+        (status === true) ? sendEmail() : verifyEmail()
+
+    }
+    return (
+        <Container component="main" maxWidth="xs">
+            <CssBaseline />
+            <div className={classes.paper}>
+                <Avatar className={classes.avatar}>
+                    <EmailOutlinedIcon />
+                </Avatar>
+                <Typography component="h1" variant="h5">
+                    {btnName}
+                </Typography>
+                <form className={classes.form} onSubmit={handleSubmit} noValidate>
+                    <TextField
+                        variant="outlined"
+                        margin="normal"
+                        required
+                        fullWidth
+                        id="email"
+                        label="Email Address"
+                        name="email"
+                        autoComplete="email"
+                        autoFocus
+                    />
+                    <Button
+                        type="submit"
+                        fullWidth
+                        variant="contained"
+                        color="primary"
+                        className={classes.submit}
+                    >
+                        {btnName}
+                    </Button>
+                </form>
+            </div>
+            <Box mt={8}>
+                <Copyright />
+            </Box>
+        </Container>
+    );
+}