From 1cdb236a7ee35bfaa7624364c16daf5a94ed1aba Mon Sep 17 00:00:00 2001
From: Tanner Collin <git@tannercollin.com>
Date: Fri, 18 Sep 2020 05:04:00 +0000
Subject: [PATCH] Add UI for Spaceport auth

---
 webclient/public/wikilogo.png | Bin 0 -> 1090 bytes
 webclient/src/App.js          |   5 ++
 webclient/src/Auth.js         | 132 ++++++++++++++++++++++++++++++++++
 3 files changed, 137 insertions(+)
 create mode 100644 webclient/public/wikilogo.png
 create mode 100644 webclient/src/Auth.js

diff --git a/webclient/public/wikilogo.png b/webclient/public/wikilogo.png
new file mode 100644
index 0000000000000000000000000000000000000000..228f35244c652adbd5cc8d179e3a47a6f8c57bdd
GIT binary patch
literal 1090
zcmV-I1ikx-P)<h;3K|Lk000e1NJLTq005Q%006QG0{{R3m*U3o0001rP)t-s0001x
zkdSU~aIUVe+uYpN*4K}ZkI~W5M@UG!yS!&;X^4r6%FE26qNBsa#2+6ZFfcJzR#tz2
zfuf?Lva_=~J3LNKP<MBCmY0}cUtpS>n@&zoR8&=EW@mJDb-usAK|(`4KR<wgfhZ{{
zY;A4;000UM3@a-vLq$d#8ypf66H81@Gcz+IBO_+`=yd=903~!%PE!DlyH*Abdlc?G
z#F!vtDD>srj%`W)$FXqGd*#5bnlkj)r0k>zm)3y*00TlvL_t(|+U?tIbD}U1!0`ow
z5fx4W>tk!%>%x(P@Bj5~ZoHe4NY921mTUL-x;p>a1QR<WFvb{Tj4{T(G9eddQoslZ
z8D(?-FkRQ>S-qa_HeQ^3T%9;&&#PKtheAzfUa)}Mi{?8c$<#b<G6}a7?pI}j*Hvpj
zf?JW#CB9p+$^_hioY!bY-5@OV)@ZF*1u&>+rLd23vw*>fd5Jw0k9!!%Vpkx6FJK7y
z8fgv@xR*6ZRcGMZzQik3S>Y9>2X1+9&#GD;(`}GQ8A_Q1+w{0>iZ}mu<91dRc2djx
z_#{9l7Qw@l!fr0R;^vK}T)cU`czCKhU*v%+r?Tt)?<NxdMa0Lhux1Z#ge$!Cw3XLi
z7~d6mq0Yet;a|S@w^YJ=gxe)vm`ZTKtI%|p!+Rwi1DgR|RH8w>2%BN2-_W!NDzQSt
z_X*g!T*&$aM4mFMVz3olbooFd%_UsMU@te<vB`jBW<G)e^s%i_cL;$XsK`}ku{p0f
z^e1*k)fW1iG^nW;gkkABOQq18NDI_FLtnz!S@(i6`6Ft|5PFI#{TNJuA~Cj?2R-@b
zcBk1YeRm1yWl`%(2t?vu->EV5;uYGk5}=A27a#QpY<mE@7i?Q6(1TRQu;}vd*i!AG
zhq*Z{=i}Ou*RYDfg+OVmD8X7-V#_fE7sQkHEat>hT1~)>lzLvz3w%{Z;6|ixF5-E3
z6ySzf(#}QsLw^okIno}as5Z`tAvTxFNdI<d5^yCbNSCg?!dFXh=A=kpWH<Wd!5L9u
z%YpQjCk1!3NAZ#LWqJ$l+)=KAq4xQZ50zC?vWjGsS(W50i$#2xIFpvdtf6ogXLaB#
z&f+Z2`d_kk{y^qH$f^<;3G==+5}d_Ze{hx!&a%N-HaLsGahCFef#mjCZN)&=pYeA3
z7iV!6XK@y1*=9XrhY!z!*c-^EX=jb%2YSEBpQFqQIg7K-ILiiS+2AZ2oMmNPNA)-_
zHY2?Tj`h;aS)9dLh@8b)pEe6T-!xlQ?KhnHSIySga_}!b16|Ud;LiFtIXMhNwzFo|
zSrMFZ7H4r5XK@y1an{)v$r79CD-Yfwo3<=~F~%5Uj4|fSFLrsg(PHmq8UO$Q07*qo
IM6N<$g5HV)KL7v#

literal 0
HcmV?d00001

diff --git a/webclient/src/App.js b/webclient/src/App.js
index d1d036a..9a5dcc3 100644
--- a/webclient/src/App.js
+++ b/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 { Auth } from './Auth.js';
 import { PasswordReset, ConfirmReset } from './PasswordReset.js';
 import { NotFound, PleaseLogin } from './Misc.js';
 import { Footer } from './Footer.js';
@@ -216,6 +217,10 @@ function App() {
 						<Charts />
 					</Route>
 
+					<Route path='/auth'>
+						<Auth user={user} />
+					</Route>
+
 					{user && user.member.set_details ?
 						<Switch>
 							<Route path='/account'>
diff --git a/webclient/src/Auth.js b/webclient/src/Auth.js
new file mode 100644
index 0000000..dabeecc
--- /dev/null
+++ b/webclient/src/Auth.js
@@ -0,0 +1,132 @@
+import React, { useState, useEffect, useReducer } from 'react';
+import { BrowserRouter as Router, Switch, Route, Link, useParams, useLocation } from 'react-router-dom';
+import moment from 'moment-timezone';
+import './light.css';
+import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Popup, Segment, Table } from 'semantic-ui-react';
+import { statusColor, BasicTable, staticUrl, requester, isAdmin } from './utils.js';
+
+export function AuthForm(props) {
+	const { user } = props;
+	const username = user ? user.username : '';
+	const [input, setInput] = useState({ username: username });
+	const [error, setError] = useState({});
+	const [success, setSuccess] = useState(false);
+	const [loading, setLoading] = useState(false);
+
+	const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
+	const handleChange = (e) => handleValues(e, e.currentTarget);
+
+	const handleSubmit = (e) => {
+		if (input.username.includes('@')) {
+			setError({ username: 'Username, not email.' });
+		} else {
+			if (loading) return;
+			setLoading(true);
+			const data = { ...input, username: input.username.toLowerCase() };
+			requester('/spaceport-auth/login/', 'POST', '', data)
+			.then(res => {
+				setSuccess(true);
+				setError({});
+			})
+			.catch(err => {
+				setLoading(false);
+				console.log(err);
+				setError(err.data);
+			});
+		}
+	};
+
+	return (
+		success ?
+			props.children
+		:
+			<Form
+				onSubmit={handleSubmit}
+				warning={error.non_field_errors && error.non_field_errors[0] === 'Unable to log in with provided credentials.'}
+			>
+				<Header size='medium'>Log In to Spaceport</Header>
+
+				{user ?
+					<><Form.Input
+						label='Spaceport Username'
+						name='username'
+						value={user.username}
+						onChange={handleChange}
+						error={error.username}
+					/>
+					<Form.Input
+						label='Spaceport Password'
+						name='password'
+						type='password'
+						onChange={handleChange}
+						error={error.password}
+						autoFocus
+					/></>
+				:
+					<><Form.Input
+						label='Spaceport Username'
+						name='username'
+						placeholder='first.last'
+						onChange={handleChange}
+						error={error.username}
+						autoFocus
+					/>
+					<Form.Input
+						label='Spaceport Password'
+						name='password'
+						type='password'
+						onChange={handleChange}
+						error={error.password}
+					/></>
+				}
+
+				<Form.Button loading={loading} error={error.non_field_errors}>
+					Authorize
+				</Form.Button>
+
+				<Message warning>
+					<Message.Header>Forgot your password?</Message.Header>
+					<p><Link to='/password/reset/'>Click here</Link> to reset it.</p>
+				</Message>
+			</Form>
+	);
+};
+
+export function AuthWiki(props) {
+	const { user } = props;
+
+	return (
+		<Segment compact padded>
+			<Header size='medium'>
+				<Image src={'/wikilogo.png'} />
+				Protospace Wiki
+			</Header>
+
+			<p>would like to request Spaceport authentication.</p>
+
+			<p>URL: <a href='http://wiki.protospace.ca/Welcome_to_Protospace' target='_blank' rel='noopener noreferrer'>wiki.protospace.ca</a></p>
+
+			<AuthForm user={user}>
+				<Header size='small'>Success!</Header>
+				<p>You can now log into the wiki:</p>
+				<p><a href='http://wiki.protospace.ca/index.php?title=Special:UserLogin&returnto=Welcome+to+Protospace' rel='noopener noreferrer'>Protospace Wiki</a></p>
+			</AuthForm>
+		</Segment>
+	);
+}
+
+export function Auth(props) {
+	const { user } = props;
+
+	return (
+		<Container>
+			<Header size='large'>Spaceport Auth</Header>
+
+			<p>Use this page to link different applications to your Spaceport account.</p>
+
+			<Route path='/auth/wiki'>
+				<AuthWiki user={user} />
+			</Route>
+		</Container>
+	);
+}