From fd83d171e99b47cfdd1433ac39c76ec34a793291 Mon Sep 17 00:00:00 2001
From: Tanner Collin <git@tannercollin.com>
Date: Wed, 8 Dec 2021 22:02:30 +0000
Subject: [PATCH] Add dedicated Sign page

---
 webclient/src/App.js  |  5 ++++
 webclient/src/Home.js | 48 +-------------------------------
 webclient/src/Sign.js | 64 +++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 70 insertions(+), 47 deletions(-)
 create mode 100644 webclient/src/Sign.js

diff --git a/webclient/src/App.js b/webclient/src/App.js
index 35d865c..c850192 100644
--- a/webclient/src/App.js
+++ b/webclient/src/App.js
@@ -16,6 +16,7 @@ import { Training } from './Training.js';
 import { AdminTransactions } from './AdminTransactions.js';
 import { Admin } from './Admin.js';
 import { Paste } from './Paste.js';
+import { Sign } from './Sign.js';
 import { Courses, CourseDetail } from './Courses.js';
 import { Classes, ClassDetail } from './Classes.js';
 import { Members, MemberDetail } from './Members.js';
@@ -219,6 +220,10 @@ function App() {
 						<Paste token={token} />
 					</Route>
 
+					<Route path='/sign'>
+						<Sign token={token} />
+					</Route>
+
 					<Route path='/charts'>
 						<Charts />
 					</Route>
diff --git a/webclient/src/Home.js b/webclient/src/Home.js
index 063b514..427595b 100644
--- a/webclient/src/Home.js
+++ b/webclient/src/Home.js
@@ -7,6 +7,7 @@ import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Me
 import { statusColor, BasicTable, siteUrl, staticUrl, requester, isAdmin } from './utils.js';
 import { LoginForm, SignupForm } from './LoginSignup.js';
 import { AccountForm } from './Account.js';
+import { SignForm } from './Sign.js';
 import { PayPalSubscribeDeal } from './PayPal.js';
 
 function MemberInfo(props) {
@@ -138,53 +139,6 @@ function MemberInfo(props) {
 	);
 };
 
-function SignForm(props) {
-	const { token } = props;
-	const [error, setError] = useState({});
-	const [sign, setSign] = useState('');
-	const [loading, setLoading] = useState(false);
-	const [success, setSuccess] = useState(false);
-
-	const handleValues = (e, v) => setSign(v.value);
-	const handleChange = (e) => handleValues(e, e.currentTarget);
-
-	const handleSubmit = (e) => {
-		if (loading) return;
-		setLoading(true);
-		const data = {sign: sign};
-		requester('/stats/sign/', 'POST', token, data)
-		.then(res => {
-			setLoading(false);
-			setSuccess(true);
-			setError({});
-			setSign('');
-		})
-		.catch(err => {
-			setLoading(false);
-			console.log(err);
-			setError(err.data);
-		});
-	};
-
-	return (
-		<Form onSubmit={handleSubmit}>
-			<p>Send a message to the sign:</p>
-
-			<Form.Input
-				name='sign'
-				onChange={handleChange}
-				value={sign}
-				error={error.sign}
-			/>
-
-			<Form.Button loading={loading} error={error.non_field_errors}>
-				Submit
-			</Form.Button>
-			{success && <div>Success!</div>}
-		</Form>
-	);
-};
-
 export function Home(props) {
 	const { user, token } = props;
 	const [stats, setStats] = useState(JSON.parse(localStorage.getItem('stats', 'false')));
diff --git a/webclient/src/Sign.js b/webclient/src/Sign.js
new file mode 100644
index 0000000..f4f51f5
--- /dev/null
+++ b/webclient/src/Sign.js
@@ -0,0 +1,64 @@
+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';
+
+export function SignForm(props) {
+	const { token } = props;
+	const [error, setError] = useState({});
+	const [sign, setSign] = useState('');
+	const [loading, setLoading] = useState(false);
+	const [success, setSuccess] = useState(false);
+
+	const handleValues = (e, v) => setSign(v.value);
+	const handleChange = (e) => handleValues(e, e.currentTarget);
+
+	const handleSubmit = (e) => {
+		if (loading) return;
+		setLoading(true);
+		const data = {sign: sign};
+		requester('/stats/sign/', 'POST', token, data)
+		.then(res => {
+			setLoading(false);
+			setSuccess(true);
+			setError({});
+			setSign('');
+		})
+		.catch(err => {
+			setLoading(false);
+			console.log(err);
+			setError(err.data);
+		});
+	};
+
+	return (
+		<Form onSubmit={handleSubmit}>
+			<p>Send a message to the sign:</p>
+
+			<Form.Input
+				name='sign'
+				onChange={handleChange}
+				value={sign}
+				error={error.sign}
+			/>
+
+			<Form.Button loading={loading} error={error.non_field_errors}>
+				Submit
+			</Form.Button>
+			{success && <div>Success!</div>}
+		</Form>
+	);
+};
+
+export function Sign(props) {
+	const { token } = props;
+
+	return (
+		<Container>
+			<Header size='large'>Protospace Sign</Header>
+
+			<SignForm token={token} />
+		</Container>
+	);
+};