polish landing page and add create account button

bfrontend/src/Components/Auth/Create.js

@@ -0,0 +1,95 @@
+import { useState } from 'react';
+import { useHistory } from 'react-router-dom';
+
+import Notification from '../UI/Notification';
+import APIRequest from '../../API/APIRequest';
+import { getSignupMessageFromError } from '../../Util/Errors'
+
+export default function Create() {
+    const history = useHistory();
+
+    const [ usernameInput, setUsernameInput ] = useState();
+    const [ passwordInput, setPasswordInput ] = useState();
+    const [ specialCodeInput, setSpecialCodeInput ] = useState();
+
+    const [ specialCodePrompt, setSpecialCodePrompt ] = useState();
+
+    const [ info, setInfo ] = useState();
+
+    const doCreateAccount = async () => {
+        const { json, isOK } = await APIRequest('/api/v1/users/account/create', {
+            method: 'POST',
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                username: usernameInput,
+                password: passwordInput,
+                email: "user@example.com",
+                specialCode: specialCodeInput
+            })
+        });
+
+        if (!isOK && json) {
+            setInfo(getSignupMessageFromError(json));
+            return;
+        }
+        if (!isOK) {
+            setInfo('Something went wrong');
+            return;
+        }
+
+        history.push('/login');
+    };
+
+    const handleCreateContinueButton = async () => {
+        if (!usernameInput || !passwordInput) {
+            setInfo('One of more fields is not filled in.');
+            return;
+        }
+
+        const { json, isOK } = await APIRequest('/api/v1/users/account/create/info', {
+            method: 'GET',
+            headers: {
+                'Accept': 'application/json',
+            }
+        });
+
+        if (!json || !isOK) return setInfo('Something went wrong');
+
+        setSpecialCodePrompt(json.requiresSpecialCode);
+
+        if (!json.requiresSpecialCode) {
+            await doCreateAccount();
+        }
+    }
+
+    if (specialCodePrompt) return (
+        <div id="login-container" className="main-card">
+            <h1>One more thing!</h1>
+            <p>You need a special code to sign up here!</p>
+            <label htmlFor="specialcode">Special Code</label>
+            <br />
+            <input type="password" name="specialcode" className="text-input" onChange={ ({ target }) => setSpecialCodeInput(target.value) } />
+            <button id="login-submit" className="button" onClick={ doCreateAccount }>Continue</button>
+            <Notification text={ info } />
+        </div>
+    );
+
+    return (
+        <div id="login-container" className="main-card">
+            <h1>Create an account</h1>
+            <label htmlFor="username">Username</label>
+            <br />
+            <input type="text" name="username" className="text-input" onChange={ ({ target }) => setUsernameInput(target.value) } />
+            <br />
+            <label htmlFor="password">Password</label>
+            <br />
+            <input type="password" name="password" className="text-input" onChange={ ({ target }) => setPasswordInput(target.value) } />
+            <br />
+            <button id="login-submit" className="button" onClick={ handleCreateContinueButton }>Continue</button>
+            <Notification text={ info } />
+        </div>
+    );
+}

bfrontend/src/Components/Auth/Login.js

@@ -50,6 +50,7 @@ export default function Login() {
 
     return (
         <div id="login-container" className="main-card">
+            <h1>Log in</h1>
             <label htmlFor="username">Username</label>
             <br />
             <input type="text" name="username" className="text-input" onChange={ ({ target }) => setUsernameInput(target.value) } />

bfrontend/src/Components/Home/Root.js

@@ -8,8 +8,9 @@ export default function Root(props) {
     } else {
         return (
             <div id="login-message-container">
-                <h1>Welcome, - nevermind, you aren't logged in</h1>
+                <h1>Welcome back!</h1>
-                <button onClick={ () => { history.push('/login') } }>Log in</button>
+                <button className="button" onClick={ () => { history.push('/login') } }>Log in</button>
+                <button className="button" onClick={ () => { history.push('/create') } }>Create an account</button>
             </div>
         );
     }

bfrontend/src/Components/Main/App.js

@@ -1,4 +1,5 @@
 import Login from '../Auth/Login';
+import Create from '../Auth/Create';
 import Root from '../Home/Root';
 import Authenticator from '../../API/Authenticator';
 import Notification from '../UI/Notification';
@@ -34,6 +35,7 @@ function App({ user }) {
                 <BrowserRouter>
                     <Switch>
                         <Route path="/login" component={ Login } />
+                        <Route path="/create" component={ Create } />
                         <Route path="/channels/:id"
                             render={(props) => {
                                 return (