a much better registration/failure model (#50)

ui/src/Register.js

@@ -3,17 +3,37 @@ import {useEffect, useState} from "react";
 import * as identity from "./api/identity";
 
 const Proceed = (props) => {
+    const [password, setPassword] = useState('');
+    const [confirm, setConfirm] = useState('');
+
+    const handleSubmit = async e => {
+        e.preventDefault();
+        console.log("submit", password, confirm)
+    }
+
     return (
-        <div>
-            <h1>Register a new zrok account!</h1>
-            <h3>{props.email}</h3>
+        <div className={"login"}>
+            <img src={"/ziggy.svg"} width={200}/>
+            <h1>A new zrok user!</h1>
+            <h2>{props.email}</h2>
+            <form onSubmit={handleSubmit}>
+                <fieldset>
+                    <legend>Set A Password</legend>
+                    <p><label htmlFor={"password"}>password: </label><input type={"password"} value={password} placeholder={"Password"} onChange={({target}) => setPassword(target.value)}/></p>
+                    <p>
+                        <label htmlFor={"confirm"}>confirm: </label><input type={"password"} value={confirm} placeholder={"Confirm Password"} onChange={({target}) => setConfirm(target.value)}/>
+                        <button type={"submit"}>Register</button>
+                    </p>
+                </fieldset>
+            </form>
         </div>
     )
 }
 
 const Failed = () => {
     return (
-        <div>
+        <div className={"login"}>
+            <img src={"/ziggy.svg"} width={200}/>
             <h1>No such account request!</h1>
         </div>
     )
@@ -27,7 +47,6 @@ const Register = () => {
     useEffect(() => {
         let mounted = true
         identity.verify({body: {token: token}}).then(resp => {
-            console.log("resp", resp)
             if(mounted) {
                 if(resp.error) {
                     setFailed(true);
@@ -54,17 +73,7 @@ const Register = () => {
     }
 
     return (
-        <div className={"zrok"}>
-            <div className={"container"}>
-                <div className={"header"}>
-                    <img alt={"ziggy goes to space"} src="/ziggy.svg" width={"65px"} />
-                    <p className={"header-title"}>zrok</p>
-                </div>
-                <div className={"main"}>
-                    {step}
-                </div>
-            </div>
-        </div>
+        <div>{step}</div>
     )
 }