added a forgot password/reset password mechanism with django console email backend, updated README with info on these changes

Author: Emile Frey

README.md

@@ -36,6 +36,16 @@ docker-compose -f "docker-compose.yml" up -d --build
 ```
 The server should be available at `http://127.0.0.1/`. This mode will not hot reload since it's running a production build (npm build).
 
+The password reset feature is fully functional. In order to get the password reset url, you will need to open the backend django console. Enter the following in an application like PowerShell:
+
+```sh
+$id = $(docker ps -aqf "name=django-react-postgres-boilerplate_backend")
+docker logs --tail 1000 -f $id
+```
+
+Upon submitting a valid email, you should get a path like /password_reset?token=abcdefgxyz123; paste this in your browser after localhost:3000 to access the password reset form. The password reset form validates the token and allows the user to provide a new password.
+
+Check out the Django docs starting [here](https://docs.djangoproject.com/en/3.1/topics/email/#smtp-backend) in order to update the Email Backend from a console output to an actual SMTP backend.
 
 **_Suggestions/feedback in discussions tab are greatly appreciated._**
 
@@ -49,9 +59,9 @@ The server should be available at `http://127.0.0.1/`. This mode will not hot re
 - [x] show password errors
 - [x] loading icon on login
 - [x] ensure a non-existing route redirects to home 
-- [ ] email support (for password reset)
+- [x] email support (for password reset)
+- [x] forgot password functionality (email)
 - [ ] Add support for nested sub-routes off the main left-nav routes
-- [ ] forgot password functionality (email)
 - [ ] Context level modal?
 - [ ] Swagger API Explorer
 - [ ] Backend Testing

backend/mainapp/settings.py

@@ -39,6 +39,7 @@
     'django.contrib.staticfiles',
 
     'rest_framework',
+    'django_rest_passwordreset',
     'rest_framework.authtoken',
     'rest_auth',
     'corsheaders',
@@ -78,6 +79,8 @@
 
 WSGI_APPLICATION = 'mainapp.wsgi.application'
 
+EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
+
 
 # Database
 # https://docs.djangoproject.com/en/3.1/ref/settings/#databases

backend/mainapp/urls.py

@@ -20,4 +20,5 @@
     path('admin/', admin.site.urls),
     path('api/auth/', include('users.urls')),
     path('api/', include('helloyou.urls')),
+    path('api/password_reset/', include('django_rest_passwordreset.urls', namespace='password_reset')),
 ]

backend/requirements.txt

@@ -3,4 +3,5 @@ djangorestframework==3.11.1
 django-rest-auth==0.9.5
 django-cors-headers==3.5.0
 psycopg2-binary==2.8.5
-gunicorn==20.0.4
+gunicorn==20.0.4
+django-rest-passwordreset

backend/users/__init__.py

@@ -0,0 +1,2 @@
+# __init__.py
+import users.signals

backend/users/signals.py

@@ -0,0 +1,22 @@
+from django.dispatch import receiver
+from django.urls import reverse
+from django_rest_passwordreset.signals import reset_password_token_created
+from django.core.mail import send_mail
+
+@receiver(reset_password_token_created)
+def password_reset_token_created(sender, instance, reset_password_token, *args, **kwargs):
+
+    # email_plaintext_message = "{}?token={}".format(reverse('password_reset:reset-password-request'), reset_password_token.key)
+    email_plaintext_message = "{}?token={}".format('/password_reset/', reset_password_token.key)
+    print(email_plaintext_message)
+    print("!" * 50)
+    send_mail(
+        # title:
+        "Password Reset for {title}".format(title="HelloYou"),
+        # message:
+        email_plaintext_message,
+        # from:
+        "noreply@somehost.local",
+        # to:
+        [reset_password_token.user.email]
+    )

frontend/src/components/Login/ForgotPassword.tsx

@@ -0,0 +1,62 @@
+import React, { useRef, useState } from 'react'
+import { FormHelperText, Button, TextField } from '@material-ui/core';
+import axios from 'axios';
+import { useStyles } from './Login'
+import * as settings from '../../settings';
+
+export const ForgotPassword = () => {
+	const emailInput = useRef<HTMLInputElement>(null);
+	const [submitted, setSubmitted] = useState(false)
+	const [feedback, setFeedback] = useState("Please enter the email associated with your user account.")
+  const classes = useStyles();
+
+	const submitEmail = (e: React.FormEvent<HTMLFormElement>) => {
+		e.preventDefault();
+		if (emailInput.current !== null) {
+			axios.post(`${settings.API_SERVER}/api/password_reset/reset_password/`, { email: emailInput.current.value })
+				.then((response: any) => {
+					setSubmitted(true)
+					if (response.status === 200) {
+						setFeedback('Thank you! If an account is associated with the email you provided, you will receive an email with instructions to reset your password.');
+					}
+				})
+				.catch((error: any) => setFeedback('Error! Be sure to enter a valid email address.')
+				)
+		}
+	}
+
+
+	return (
+		submitted ? <div style={{color: 'black'}}>{feedback}</div> :
+			<form onSubmit={submitEmail} className={classes.form} >
+				<FormHelperText
+          id="email-helper-text"
+          className={classes.helper}
+				>
+					{feedback}
+				</FormHelperText>
+				<TextField
+					variant="outlined"
+					required
+					fullWidth
+					id="email"
+					label="Email Address"
+					name="email"
+					autoComplete="email"
+					autoFocus
+					inputRef={emailInput}
+				/>
+				<Button
+					id="password-reset-submit-button"
+					type="submit"
+					fullWidth
+					variant="contained"
+          color="primary"
+          className={classes.submit}
+				>
+					Submit
+            </Button>
+			</form>
+
+	)
+}

frontend/src/components/Login/Login.tsx

@@ -15,10 +15,11 @@ import * as actions from '../../auth/authActions';
 import { useHistory, useLocation } from "react-router-dom";
 import { AppProps } from '../../App';
 import ValidationMessages from '../../helpers/ValidationMessages'
-import { LinearProgress } from '@material-ui/core';
+import { Grid, LinearProgress, Link } from '@material-ui/core';
 import { APP_NAME } from '../../settings'
+import { ForgotPassword } from './ForgotPassword'
 
-const useStyles = makeStyles((theme) => ({
+export const useStyles = makeStyles((theme) => ({
   paper: {
     marginTop: theme.spacing(8),
     display: 'flex',
@@ -36,6 +37,9 @@ const useStyles = makeStyles((theme) => ({
   submit: {
     margin: theme.spacing(3, 0, 2),
   },
+  helper: {
+    margin: theme.spacing(1),
+  },
   title: {
     marginTop: theme.spacing(2),
     marginBottom: theme.spacing(2),
@@ -56,6 +60,7 @@ function Login(props: AppProps) {
   const classes = useStyles();
   const [username, setuserName] = useState("");
   const [password, setPassword] = useState("");
+  const [passwordReset, setPasswordReset] = useState(false);
   const [validationErrors, setValidationErrors] = useState<Record<string, string[]>>({})
   const [isLoading, setIsLoading] = useState(false)
 
@@ -96,45 +101,56 @@ function Login(props: AppProps) {
           <LockOutlinedIcon />
         </Avatar>
         <Typography component="h1" variant="h5">
-          Sign in
+          {passwordReset ? "Reset Password" : "Sign in"}
         </Typography>
-        <form className={classes.form} noValidate onSubmit={handleSubmit}>
-          <TextField
-            variant="outlined"
-            margin="normal"
-            required
-            fullWidth
-            id="username"
-            label="User Name"
-            name="username"
-            autoComplete="username"
-            autoFocus
-            onChange={handleFormFieldChange}
-          />
-          <TextField
-            variant="outlined"
-            margin="normal"
-            required
-            fullWidth
-            name="password"
-            label="Password"
-            type="password"
-            id="password"
-            autoComplete="current-password"
-            onChange={handleFormFieldChange}
-          />
-          <ValidationMessages validationErrors={validationErrors}/>
-          {isLoading && <LinearProgress color="secondary" />}
-          <Button
-            type="submit"
-            fullWidth
-            variant="contained"
-            color="primary"
-            className={classes.submit}
-          >
-            Sign In
+        {passwordReset ? <ForgotPassword /> :
+          <form className={classes.form} noValidate onSubmit={handleSubmit}>
+            <TextField
+              variant="outlined"
+              margin="normal"
+              required
+              fullWidth
+              id="username"
+              label="User Name"
+              name="username"
+              autoComplete="username"
+              autoFocus
+              onChange={handleFormFieldChange}
+            />
+            <TextField
+              variant="outlined"
+              margin="normal"
+              required
+              fullWidth
+              name="password"
+              label="Password"
+              type="password"
+              id="password"
+              autoComplete="current-password"
+              onChange={handleFormFieldChange}
+            />
+            <ValidationMessages validationErrors={validationErrors} />
+            {isLoading && <LinearProgress color="secondary" />}
+            <Button
+              type="submit"
+              fullWidth
+              variant="contained"
+              color="primary"
+              className={classes.submit}
+            >
+              Sign In
           </Button>
-        </form>
+          </form>
+        }
+        <Grid container justify="center">
+          <Grid item xs={12}>
+            <Grid container justify="center">
+              <Link onClick={() => setPasswordReset(!passwordReset)}>
+                {passwordReset ? 'Back to Login' : 'Forgot password?'}
+              </Link>
+            </Grid>
+          </Grid>
+        </Grid>
       </div>
     </Container>
   );