Password reset page

3 files changed, 105 insertions, 20 deletions

diff --git a/modern/src/components/registration/LoginForm.js b/modern/src/components/registration/LoginForm.js
index e5e5b30b..8775a98e 100644
--- a/modern/src/components/registration/LoginForm.js
+++ b/modern/src/components/registration/LoginForm.js
@@ -35,7 +35,7 @@ const LoginForm = () => {
   const registrationEnabled = useSelector((state) => (state.session.server ? state.session.server.registration : false));
   const emailEnabled = useSelector((state) => (state.session.server ? state.session.server.emailEnabled : false));
 
-  const handleLogin = async (event) => {
+  const handleSubmit = async (event) => {
     event.preventDefault();
     const response = await fetch('/api/session', {
       method: 'POST',
@@ -53,7 +53,7 @@ const LoginForm = () => {
 
   const handleSpecialKey = (e) => {
     if (e.keyCode === 13 && email && password) {
-      handleLogin(e);
+      handleSubmit(e);
     }
   };
 
@@ -101,7 +101,7 @@ const LoginForm = () => {
         </Grid>
         <Grid item>
           <Button
-            onClick={handleLogin}
+            onClick={handleSubmit}
             onKeyUp={handleSpecialKey}
             variant="contained"
             color="secondary"
diff --git a/modern/src/components/registration/RegisterForm.js b/modern/src/components/registration/RegisterForm.js
index 2da33a28..d515b641 100644
--- a/modern/src/components/registration/RegisterForm.js
+++ b/modern/src/components/registration/RegisterForm.js
@@ -8,7 +8,7 @@ import StartPage from '../../StartPage';
 import { useTranslation } from '../../LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
-  register: {
+  title: {
     fontSize: theme.spacing(3),
     fontWeight: 500,
     marginLeft: theme.spacing(2),
@@ -32,15 +32,12 @@ const RegisterForm = () => {
   const [password, setPassword] = useState('');
   const [snackbarOpen, setSnackbarOpen] = useState(false);
 
-  const submitDisabled = () => !name || !/(.+)@(.+)\.(.{2,})/.test(email) || !password;
-
-  const handleRegister = async () => {
+  const handleSubmit = async () => {
     const response = await fetch('/api/users', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ name, email, password }),
     });
-
     if (response.ok) {
       setSnackbarOpen(true);
     }
@@ -65,7 +62,7 @@ const RegisterForm = () => {
             </Typography>
           </Grid>
           <Grid item xs>
-            <Typography className={classes.register} color="primary">
+            <Typography className={classes.title} color="primary">
               {t('loginRegister')}
             </Typography>
           </Grid>
@@ -76,7 +73,7 @@ const RegisterForm = () => {
             fullWidth
             label={t('sharedName')}
             name="name"
-            value={name || ''}
+            value={name}
             autoComplete="name"
             autoFocus
             onChange={(event) => setName(event.target.value)}
@@ -90,7 +87,7 @@ const RegisterForm = () => {
             type="email"
             label={t('userEmail')}
             name="email"
-            value={email || ''}
+            value={email}
             autoComplete="email"
             onChange={(event) => setEmail(event.target.value)}
             variant="filled"
@@ -102,7 +99,7 @@ const RegisterForm = () => {
             fullWidth
             label={t('userPassword')}
             name="password"
-            value={password || ''}
+            value={password}
             type="password"
             autoComplete="current-password"
             onChange={(event) => setPassword(event.target.value)}
@@ -113,8 +110,8 @@ const RegisterForm = () => {
           <Button
             variant="contained"
             color="secondary"
-            onClick={handleRegister}
-            disabled={submitDisabled()}
+            onClick={handleSubmit}
+            disabled={!name || !/(.+)@(.+)\.(.{2,})/.test(email) || !password}
             fullWidth
           >
             {t('loginRegister')}
diff --git a/modern/src/components/registration/ResetPasswordForm.js b/modern/src/components/registration/ResetPasswordForm.js
index f4dd2e4d..c581b5e5 100644
--- a/modern/src/components/registration/ResetPasswordForm.js
+++ b/modern/src/components/registration/ResetPasswordForm.js
@@ -1,9 +1,97 @@
-import React from 'react';
+import React, { useState } from 'react';
+import {
+  Grid, Button, TextField, Typography, Link, makeStyles, Snackbar,
+} from '@material-ui/core';
+import { useHistory } from 'react-router-dom';
+import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+import StartPage from '../../StartPage';
+import { useTranslation } from '../../LocalizationProvider';
 
-const ResetPasswordForm = () => (
-  <>
-    <div>Reset Password Comming Soon!!!</div>
-  </>
-);
+const useStyles = makeStyles((theme) => ({
+  title: {
+    fontSize: theme.spacing(3),
+    fontWeight: 500,
+    marginLeft: theme.spacing(2),
+    textTransform: 'uppercase',
+  },
+  link: {
+    fontSize: theme.spacing(3),
+    fontWeight: 500,
+    marginTop: theme.spacing(0.5),
+    cursor: 'pointer',
+  },
+}));
+
+const ResetPasswordForm = () => {
+  const classes = useStyles();
+  const history = useHistory();
+  const t = useTranslation();
+
+  const [email, setEmail] = useState('');
+  const [snackbarOpen, setSnackbarOpen] = useState(false);
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    const response = await fetch('/api/password/reset', {
+      method: 'POST',
+      body: new URLSearchParams(`email=${encodeURIComponent(email)}`),
+    });
+    if (response.ok) {
+      setSnackbarOpen(true);
+    }
+  };
+
+  return (
+    <StartPage>
+      <Snackbar
+        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+        open={snackbarOpen}
+        onClose={() => history.push('/login')}
+        autoHideDuration={6000}
+        message={t('loginResetSuccess')}
+      />
+      <Grid container direction="column" spacing={2}>
+        <Grid container item>
+          <Grid item>
+            <Typography className={classes.link} color="primary">
+              <Link onClick={() => history.push('/login')}>
+                <ArrowBackIcon />
+              </Link>
+            </Typography>
+          </Grid>
+          <Grid item xs>
+            <Typography className={classes.title} color="primary">
+              {t('loginReset')}
+            </Typography>
+          </Grid>
+        </Grid>
+        <Grid item>
+          <TextField
+            required
+            fullWidth
+            type="email"
+            label={t('userEmail')}
+            name="email"
+            value={email}
+            autoComplete="email"
+            onChange={(event) => setEmail(event.target.value)}
+            variant="filled"
+          />
+        </Grid>
+        <Grid item>
+          <Button
+            variant="contained"
+            color="secondary"
+            onClick={handleSubmit}
+            disabled={!/(.+)@(.+)\.(.{2,})/.test(email)}
+            fullWidth
+          >
+            {t('loginReset')}
+          </Button>
+        </Grid>
+      </Grid>
+    </StartPage>
+  );
+};
 
 export default ResetPasswordForm;