Add pages for password reset to GUI

webclient/src/App.js

@@ -19,6 +19,7 @@ import { Courses, CourseDetail } from './Courses.js';
 import { Classes, ClassDetail } from './Classes.js';
 import { Members, MemberDetail } from './Members.js';
 import { Charts } from './Charts.js';
+import { PasswordReset, ConfirmReset } from './PasswordReset.js';
 import { NotFound, PleaseLogin } from './Misc.js';
 import { Footer } from './Footer.js';
 
@@ -193,6 +194,13 @@ function App() {
 
 			<div className='topPadding'>
 				<Switch>
+					<Route path='/password-reset/confirm/:uid/:token'>
+						<ConfirmReset />
+					</Route>
+					<Route path='/password-reset'>
+						<PasswordReset />
+					</Route>
+
 					<Route path='/paste'>
 						<Paste token={token} />
 					</Route>

webclient/src/LoginSignup.js

@@ -62,6 +62,11 @@ export function LoginForm(props) {
 			<Form.Button loading={loading} error={error.non_field_errors}>
 				Log In
 			</Form.Button>
+
+			<Message basic warning>
+				<Message.Header>Forgot your password?</Message.Header>
+				<p><Link to='/password-reset/'>Click here</Link> to reset it.</p>
+			</Message>
 		</Form>
 	);
 };

webclient/src/PasswordReset.js

@@ -0,0 +1,148 @@
+import React, { useState, useEffect, useReducer, useContext } from 'react';
+import { BrowserRouter as Router, Switch, Route, Link, useParams, useHistory } from 'react-router-dom';
+import { Button, Container, Checkbox, Dimmer, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
+import { apiUrl, statusColor, BasicTable, staticUrl, requester } from './utils.js';
+import { NotFound } from './Misc.js';
+
+function ResetForm() {
+	const [input, setInput] = useState({});
+	const [error, setError] = useState({});
+	const [loading, setLoading] = useState(false);
+	const [success, setSuccess] = useState(false);
+
+	const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
+	const handleChange = (e) => handleValues(e, e.currentTarget);
+
+	const handleSubmit = (e) => {
+		if (loading) return;
+		setLoading(true);
+		requester('/password/reset/', 'POST', '', input)
+		.then(res => {
+			setLoading(false);
+			setSuccess(true);
+			setError({});
+		})
+		.catch(err => {
+			setLoading(false);
+			console.log(err);
+			setError(err.data);
+		});
+	};
+
+	const makeProps = (name) => ({
+		name: name,
+		onChange: handleChange,
+		value: input[name] || '',
+		error: error[name],
+	});
+
+	return (
+		<Form onSubmit={handleSubmit}>
+			<Form.Input
+				label='Email'
+				name='email'
+				onChange={handleChange}
+				error={error.email}
+			/>
+
+			<Form.Button loading={loading} error={error.non_field_errors}>
+				Submit
+			</Form.Button>
+			{success && <div>Success!</div>}
+		</Form>
+	);
+};
+
+function ConfirmForm() {
+	const { uid, token } = useParams();
+	const [input, setInput] = useState({ uid: uid, token: token });
+	const [error, setError] = useState({});
+	const [loading, setLoading] = useState(false);
+	const [success, setSuccess] = useState(false);
+	const history = useHistory();
+
+	const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
+	const handleChange = (e) => handleValues(e, e.currentTarget);
+
+	const handleSubmit = (e) => {
+		if (loading) return;
+		setLoading(true);
+		requester('/rest-auth/password/reset/confirm/', 'POST', '', input)
+		.then(res => {
+			setLoading(false);
+			setSuccess(true);
+			setError({});
+			history.push('/');
+			window.scrollTo(0, 0);
+		})
+		.catch(err => {
+			setLoading(false);
+			console.log(err);
+			setError(err.data);
+		});
+	};
+
+	const makeProps = (name) => ({
+		name: name,
+		onChange: handleChange,
+		value: input[name] || '',
+		error: error[name],
+	});
+
+	return (
+		<Form onSubmit={handleSubmit}>
+			<Form.Input
+				label='New Password'
+				type='password'
+				{...makeProps('new_password1')}
+			/>
+			<Form.Input
+				label='Confirm Password'
+				type='password'
+				{...makeProps('new_password2')}
+			/>
+
+			{(error.token || error.uid) && <p>Error: Invalid password reset URL! Try doing another reset.</p>}
+
+			<Form.Button loading={loading} error={error.non_field_errors}>
+				Submit
+			</Form.Button>
+			{success && <div>Success!</div>}
+		</Form>
+	);
+};
+
+
+export function PasswordReset() {
+	return (
+		<Container>
+			<Header size='large'>Password Reset</Header>
+			<Grid stackable columns={2}>
+				<Grid.Column>
+					<p>
+						Enter your email and we will send you a password reset link.
+					</p>
+
+					<ResetForm />
+				</Grid.Column>
+			</Grid>
+		</Container>
+	);
+};
+
+export function ConfirmReset() {
+	return (
+		<Container>
+			<Header size='large'>Password Reset</Header>
+			<Grid stackable columns={2}>
+				<Grid.Column>
+					<p>
+						Choose a new password.
+					</p>
+
+					<ConfirmForm />
+				</Grid.Column>
+			</Grid>
+		</Container>
+	);
+};