full registration; roughed in (#50)

ui/src/Register.js

@@ -2,10 +2,12 @@ import { useParams } from 'react-router-dom';
 import {useEffect, useState} from "react";
 import * as identity from "./api/identity";
 
-const Proceed = (props) => {
+const RegistrationForm = (props) => {
     const [password, setPassword] = useState('');
     const [confirm, setConfirm] = useState('');
     const [message, setMessage] = useState();
+    const [authToken, setAuthToken] = useState('');
+    const [complete, setComplete] = useState(false);
 
     const passwordMismatchMessage = <h2 className={"errorMessage"}>Entered passwords do not match!</h2>
     const registerFailed = <h2 className={"errorMessage"}>Account creation failed!</h2>
@@ -21,6 +23,8 @@ const Proceed = (props) => {
                     if(!resp.error) {
                         console.log("resp", resp)
                         setMessage(undefined);
+                        setAuthToken(resp.data.token);
+                        setComplete(true);
                     } else {
                         setMessage(registerFailed);
                     }
@@ -32,6 +36,7 @@ const Proceed = (props) => {
         }
     };
 
+    if(!complete) {
         return (
             <div className={"fullscreen"}>
                 <img src={"/ziggy.svg"} width={200}/>
@@ -50,9 +55,12 @@ const Proceed = (props) => {
                 {message}
             </div>
         )
+    } else {
+        return <Success email={props.email} token={authToken}/>
+    }
 }
 
-const Failed = () => {
+const NoAccountRequest = () => {
     return (
         <div className={"fullscreen"}>
             <img src={"/ziggy.svg"} width={200}/>
@@ -61,17 +69,29 @@ const Failed = () => {
     )
 }
 
+const Success = (props) => {
+    return (
+        <div className={"fullscreen"}>
+            <img src={"/ziggy.svg"} width={200}/>
+            <h1>Welcome to zrok, {props.email}!</h1>
+            <pre>{props.token}</pre>
+        </div>
+    )
+}
+
+let step;
+
 const Register = () => {
     const { token } = useParams();
     const [email, setEmail] = useState();
-    const [failed, setFailed] = useState(false);
+    const [activeRequest, setActiveRequest] = useState(true);
 
     useEffect(() => {
         let mounted = true
         identity.verify({body: {token: token}}).then(resp => {
             if(mounted) {
                 if(resp.error) {
-                    setFailed(true);
+                    setActiveRequest(false);
                 } else {
                     setEmail(resp.data.email);
                 }
@@ -79,7 +99,7 @@ const Register = () => {
         }).catch(err => {
             console.log("err", err);
             if(mounted) {
-                setFailed(true);
+                setActiveRequest(false);
             }
         });
         return () => {
@@ -87,11 +107,13 @@ const Register = () => {
         }
     }, []);
 
-    let step;
-    if(!failed) {
-        step = <Proceed email={email} token={token}/>
+    if(activeRequest) {
+        step = <RegistrationForm
+            email={email}
+            token={token}
+        />
     } else {
-        step = <Failed />
+        step = <NoAccountRequest />
     }
 
     return (