css and some nav

client/src/routes/login.tsx

@@ -6,6 +6,8 @@ const Login = ({ success }) => {
     const [mode, setMode] = useState('login')
     const [email, setEmail] = useState('')
     const [password, setPassword] = useState('');
+    // const [discogs, setDiscogs] = useState('');
+    const [confirmPassword, setConfirmPassword] = useState('');
 
     async function postLogin() {
         const user = await actions.postLogin(email, password);
@@ -17,17 +19,62 @@ const Login = ({ success }) => {
         postLogin();
     }
 
-    return (
-        <div class={'home'}>
-            <form action="" method="get" >
-                <label for="email">email: </label>
-                <input type="email" name="email" id="email" value={email} required onChange={(e) => setEmail(e.target.value)} />
-                <label for="password">password: </label>
-                <input type="password" name="password" id="password" value={password} required onChange={(e) => setPassword(e.target.value)} />
-                <input type="submit" value="Login" onClick={handleSubmit} />
+    if (mode === 'register') return (
+        <div class="login">
+            <form action="">
+                <div class="item">
+                    <label for="email">email: </label>
+                    <input type="email" name="email" id="email" value={email} required onChange={(e) => setEmail(e.target.value)} />
+                </div>
+                <div class="item">
+                    <label for="password">confirm password: </label>
+                    <input type="password" name="password" id="password" value={password} required onChange={(e) => setConfirmPassword(e.target.value)} />
+                </div>
+                <div class="item">
+                    <label for="password">confirm password: </label>
+                    <input type="password" name="password" id="password" value={password} required onChange={(e) => setConfirmPassword(e.target.value)} />
+                </div>
+                <div class="item">
+                    <input type="submit" value="register" onClick={handleSubmit} />
+                </div>
             </form>
+            <button onClick={() => setMode('login')} >Click to login</button>
+        </div>
+
+    );
+
+    return (
+        <div class="login">
+            <form action="">
+                <div class="item">
+                    <label for="email">email: </label>
+                    <input type="email" name="email" id="email" value={email} required onChange={(e) => setEmail(e.target.value)} />
+                </div>
+                <div class="item">
+                    <label for="password">password: </label>
+                    <input type="password" name="password" id="password" value={password} required onChange={(e) => setPassword(e.target.value)} />
+                </div>
+                <div class="item">
+                    <input type="submit" value="login" onClick={handleSubmit} />
+                </div>
+            </form>
+
+            <button onClick={() => setMode('register')} >Click to register</button>
         </div>
     );
 };
 
-export default Login;
+function LoginPage({ success }) {
+    return (
+        <div class="landing">
+            <Login success={success} />
+            <div class="info">
+                <p>Mates Crates is a record importing service.</p>
+                <p>We bundle orders together from thousands of online stores to reduce the cost of shipping vinyl.</p>
+                <p>Based in Preston.</p>
+            </div>
+        </div>
+    )
+}
+
+export default LoginPage;

client/src/routes/register.tsx

@@ -1,41 +0,0 @@
-import { h } from 'preact';
-import { useState } from 'preact/hooks';
-
-import actions from './../actions';
-
-const Register = ({ success }) => {
-    const [email, setEmail] = useState('')
-    const [password, setPassword] = useState('');
-
-    async function postRegister() {
-        const user = await actions.postRegister(email, password);
-        success(user);
-    }
-
-    function handleSubmit(e) {
-        e.preventDefault();
-        postRegister();
-    }
-
-    function emailChange(e) {
-        setEmail(e.target.value);
-    }
-
-    function passwordChange(e) {
-        setPassword(e.target.value);
-    }
-
-    return (
-        <div class={'home'}>
-            <form action="" method="get" >
-                <label for="email">email: </label>
-                <input type="email" name="email" id="email" value={email} required onChange={emailChange} />
-                <label for="password">password: </label>
-                <input type="password" name="password" id="password" value={password} required onChange={passwordChange} />
-                <input type="submit" value="Register" onClick={handleSubmit} />
-            </form>
-        </div>
-    );
-};
-
-export default Register;

client/src/routes/search.tsx

@@ -31,9 +31,9 @@ const User = () => {
         <div class={'home'}>
             <form action="" method="get" class="form-example">
                 <label for="artist">Artist: </label>
-                <input type="text" name="artist" id="artist" value={artist} required />
+                <input type="text" name="artist" id="artist" value={artist} onChange={e => setArtist(e.target.value) } required />
                 <label for="title">Title: </label>
-                <input type="text" name="title" id="title" value={title} required />
+                <input type="text" name="title" id="title" value={title} onChange={e => setTitle(e.target.value)} required />
                 <input type="submit" value="Search" onClick={handleSubmit} />
             </form>
             <div>