login/logout scaffolding (#17)

ui/src/App.js

@@ -1,16 +1,30 @@
+import Login from './Login';
+import Logout from './Logout';
 import Version from './Version';
 import * as gateway from "./api/gateway";
+import {useState} from "react";
 
 gateway.init({
    url: '/api/v1'
 });
 
 const App = () => {
+    const [user, setUser] = useState();
+
+    if (!user) {
+        return (
+            <Login
+                loginSuccess={setUser}
+            />
+        );
+    }
+
     return (
         <div className="zrok">
             <header className="zrok-header">
                 <h1>zrok</h1>
                 <Version/>
+                <Logout user={user} logout={() => { setUser(null); }}/>
             </header>
         </div>
     );

ui/src/Login.js

@@ -0,0 +1,27 @@
+import {useState} from "react";
+
+const Login = (props) => {
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+
+    const handleSubmit = async e => {
+        e.preventDefault()
+        props.loginSuccess({
+            email: email,
+        })
+    };
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <label htmlFor="email">email: </label>
+            <input type="text" value={email} placeholder="enter an email" onChange={({ target }) => setEmail(target.value)}/>
+            <div>
+                <label htmlFor="password">password: </label>
+                <input type="password" value={password} placeholder="enter a password" onChange={({ target}) => setPassword(target.value)}/>
+            </div>
+            <button type="submit">Log In</button>
+        </form>
+    );
+}
+
+export default Login;

ui/src/Logout.js

@@ -0,0 +1,11 @@
+const Logout = (props) => {
+    const onClick = () => {
+        props.logout()
+    }
+
+    return (
+        <button onClick={onClick}>Log Out {props.user.email}</button>
+    );
+}
+
+export default Logout;