glitchy registration form, writes to db

client/src/App.scss

@@ -18,6 +18,10 @@ $darkblue-1: rgb(51, 53, 66);
   background-color: $midblue-1;
 }
 
+.light-page {
+  background-color: $lightblue-1;
+}
+
 button {
   background-color: $midblue-1;
   color: white;
@@ -102,4 +106,9 @@ nav {
     justify-content: space-around;
     background-color: $darkblue-1
   }
+}
+
+// Login page styles
+.login {
+  display: flex;
 }

client/src/components/User/LoginForm.tsx

@@ -1,9 +1,58 @@
+import { useState } from "react";
 import Page from "../../util/Page";
 
 function LoginForm() {
+    enum PassVisible {
+        hide = 'password',
+        show = 'text'
+    }
+
+    const [username, setUsername] = useState<string>();
+    const [password, setPassword] = useState<string>();
+    const [showPass, setShowPass] = useState<PassVisible>(PassVisible.hide);
+
     return (
-        <Page>
-            <h1>Log in here!</h1>
+        <Page classes="login light-page">
+            <h1>Welcome back to my store!</h1>
+
+            <section className="login-form-section">
+                <div className="oauth-section">
+                    <p>Log in with a third party provider:</p>
+                </div>
+
+                <h2>Have a log in? Use the form below:</h2>
+
+                <form>
+                    <div>
+                        <label htmlFor="username-login">Username:</label>
+                        <input
+                            type="text"
+                            id="username-login"
+                            onChange={(e) => setUsername(e.target.value)}
+                        />
+                    </div>
+                    <div>
+                        <label htmlFor="password-login">Password:</label>
+                        <input
+                            type={showPass}
+                            id="password-login"
+                            onChange={(e) => setPassword(e.target.value)}
+                        />
+                        <button type="button"
+                            onClick={() => setShowPass((showPass === PassVisible.hide) ? PassVisible.show : PassVisible.hide)}
+                        >Show password</button>
+                    </div>
+
+                    <p>Username is: {username}</p>
+                    <p>Password is: {password}</p>
+                </form>
+
+
+            </section>
+
+            <section className="link-to-register">
+                <p>New here? <a href="/register">Click here</a> to register!</p>
+            </section>
         </Page>
     )
 }

client/src/components/User/Register.tsx

@@ -1,11 +1,105 @@
+import { useEffect, useState } from "react";
+import { userInfo } from '../../types/main';
+import { registerNewUser } from "../../util/apiUtils";
 import Page from "../../util/Page";
 
 function Register() {
+    const [name, setName] = useState<string>('');
+    const [email, setEmail] = useState<string>('');
+    const [password, setPassword] = useState<string>('');
+    const [verify, setVerify] = useState<string>('');
+    const [warningText, setWarningText] = useState<string>('initial');
+
+    const [userData, setUserData] = useState<userInfo>({email: '', name: '', password: ''});
+
+    const conditions = [name, email, password, verify];
+
+    // checks password complexity
+    useEffect(() => {
+        if (!password) return;
+
+        switch (true) {
+            case (!verify):
+                setWarningText('Verify your password below.');
+                break;
+            case (verify !== password):
+                setWarningText('Passwords do not match.');
+                break;
+            case (verify && !verify.includes('!')):
+                setWarningText('Password does not meet safety criteria.');
+                break;
+            case (verify === password):
+                setWarningText('');
+                break;
+            default:
+                throw new Error("Password switch case is faulty");
+        }
+    }, [password, verify]);
+
+    // checks that all conditions for registration have been met
+    useEffect(() => {
+        let evaluating = true;
+
+        if (!(conditions.includes('')) && warningText === '') {
+            evaluating = false;
+        }
+
+        if (!evaluating) {
+            const userEntry: userInfo = {
+                name: name,
+                email: email,
+                password: password
+            }
+    
+            console.log(userEntry);
+            setUserData(userEntry);
+
+            setWarningText('Conditions met!');
+        }
+    }, [conditions, warningText, userData, name, email]);
+
+    const handleRegistration = async () => {
+        userData && await registerNewUser(userData);
+
+        setName('');
+        setEmail('');
+        setPassword('');
+        setVerify('');
+    }
+
     return (
-        <Page>
-            <h1>Enter your information to register:</h1>
+        <Page classes="register light-page">
+            <h1>Thanks for your interest! Enter the info below to register:</h1>
+
+            <form>
+                <div className="form-row">
+                    <label htmlFor="name-register">Name:</label>
+                    <input type="text" id="name-register" value={name} onChange={(e) => setName(e.target.value)}/>
+                </div>
+                <div className="form-row">
+                    <label htmlFor="email-register">Email address:</label>
+                    <input type="email" id="email-register" value={email} onChange={(e) => setEmail(e.target.value)}/>
+                </div>
+
+                <p style={(warningText === 'initial') ? {display: 'none'} : {display: 'block'}}>{warningText}</p>
+
+                <div className="form-row">
+                    <label htmlFor="password-register" style={(warningText && warningText !== 'Conditions met!') ? {color: 'red'} : {color: 'green'}}>
+                        Password:
+                    </label>
+                    <input type="password" id="password-register" value={password} onChange={(e) => setPassword(e.target.value)}/>
+                </div>
+                <div className="form-row">
+                    <label htmlFor="password-verify" style={(warningText && warningText !== 'Conditions met!') ? {color: 'red'} : {color: 'green'}}>
+                        Re-enter password:
+                    </label>
+                    <input type="password" id="password-verify" value={verify} onChange={(e) => setVerify(e.target.value)}/>
+                </div>
+            </form>
+
+            <button disabled={!userData} onClick={handleRegistration}>Create my account</button>
         </Page>
     );
 }
 
-export default Register;
+export default Register;