feat: Added user registration workflow for FE

app/page.tsx

@@ -1,15 +1,33 @@
 'use client'
-import Image from 'next/image'
-import GoogleButton from 'react-google-button'
-import { signIn } from "next-auth/react"
+import { useState } from 'react'
+import LoginCard from '../components/login-card'
+import SignUpCard from '../components/sign-up-card'
+import Alert from '@mui/material/Alert';
+import { redirect } from 'next/navigation';
 
 export default function Home() {
+  const [signUp, setSignUp] = useState(false)
+  const [error, setError] = useState(false)
+
+  const renderRegistrationCards = () => {
+    if (signUp) {
+      return <SignUpCard
+        setError={setError}
+        setSignUp={setSignUp}
+      />
+    } else {
+      return <LoginCard
+        setSignUp={setSignUp}
+      />
+    }
+  }
+
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
-        <h1>Blood for Life Home Page </h1>
-        <GoogleButton onClick={() => signIn('google')}></GoogleButton>
-      </div>
-    </main>
+    <main className="flex flex-col self-center items-center">
+      {error && <Alert variant="filled" severity="error" style={{ marginBottom: '1rem', marginTop: '1rem' }}> Registration failed! Please try again! </Alert>}
+      <h1 className='text-white'>Blood for Life Home Page </h1>
+      {/* <SignUpCard setError={setError} /> */}
+      {renderRegistrationCards()}
+    </main >
   )
 }

app/styles/login-card.css

@@ -0,0 +1,85 @@
+.login-card {
+    background-color: #ffffff;
+    border-radius: 25px;
+    opacity: 85%;
+    width: 22rem;
+    height: 30rem;
+    padding: 2rem 2rem 2rem 2rem;
+    /* top, right, left, bottom */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.login-card-title {
+    margin-bottom: 1rem;
+    width: 100%;
+    text-align: center;
+    color: black;
+    font-weight: bold;
+    font-size: 3rem;
+}
+
+.login-submit-button {
+    background-color: #2fc1a3;
+    border: none;
+    color: white;
+    height: 3rem;
+    width: 100%;
+    display: block;
+    cursor: pointer;
+}
+
+.login-submit-button:hover {
+    background-color: #77cdc4;
+    border: none;
+    color: white;
+    height: 3rem;
+    width: 100%;
+    display: block;
+    cursor: pointer;
+}
+
+.sign-up-line {
+    margin-top: 1.5rem;
+    color: black;
+}
+
+.login-form-divider {
+    width: 15rem;
+    margin-bottom: 1rem;
+    border-width: 1px;
+    border-color: #f7f7f7;
+}
+
+.sign-up-link {
+    font-weight: bold;
+    color: grey
+}
+
+.sign-up-link:hover {
+    font-weight: bold;
+    color: rgb(184, 176, 176)
+}
+
+.login-form {
+    width: 15rem;
+    margin-top: 1rem;
+    margin-bottom: .75rem;
+    display: flex;
+    flex-direction: column;
+}
+
+.login-input {
+    width: 100%;
+    height: 3rem;
+    color: black;
+    align-self: center;
+}
+
+.login-input:hover {
+    width: 100%;
+    height: 3rem;
+    background-color: #f7f7f7;
+    align-self: stretch;
+}

app/styles/sign-up-card.css

@@ -0,0 +1,107 @@
+.sign-up-card {
+    background-color: #ffffff;
+    border-radius: 25px;
+    opacity: 85%;
+    width: 55rem;
+    height: 35rem;
+    padding: 5rem 3rem 5rem 3rem;
+    /* top, right, left, bottom */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.sign-up-h1 {
+    width: 100%;
+    text-align: center;
+    color: black;
+    font-weight: bold;
+    font-size: 3rem;
+}
+
+.sign-up-back-button {
+    margin-top: 1rem;
+    margin-left: .5rem;
+    margin-right: .5rem;
+    height: 3rem;
+    width: 100%;
+    background-color: #2fc1a3;
+    border: none;
+    color: white;
+    width: 100%;
+    display: block;
+    cursor: pointer;
+}
+
+.sign-up-back-button:hover {
+    margin-top: 1rem;
+    margin-left: .5rem;
+    margin-right: .5rem;
+    height: 3rem;
+    width: 100%;
+    background-color: #77cdc4;
+    border: none;
+    color: white;
+    width: 100%;
+    display: block;
+    cursor: pointer;
+}
+
+.sign-up-submit-button {
+    margin-top: 1rem;
+    margin-left: .5rem;
+    margin-right: .5rem;
+    height: 3rem;
+    width: 100%;
+    background-color: #2fc1a3;
+    border: none;
+    color: white;
+    width: 100%;
+    display: block;
+    cursor: pointer;
+}
+
+.sign-up-submit-button:hover {
+    margin-top: 1rem;
+    margin-left: .5rem;
+    margin-right: .5rem;
+    height: 3rem;
+    width: 100%;
+    background-color: #77cdc4;
+    border: none;
+    color: white;
+    width: 100%;
+    display: block;
+    cursor: pointer;
+}
+
+.sign-up-form {
+    margin: 1rem 1rem 1rem 1rem;
+    width: 50rem;
+    display: flex;
+    flex-direction: column;
+}
+
+.sign-up-input {
+    width: 100%;
+    margin: .5rem;
+    height: 3rem;
+    padding: .8rem .8rem .8rem .8rem;
+    color: black;
+    align-self: stretch;
+}
+
+.sign-up-input:hover {
+    width: 100%;
+    margin: .5rem;
+    padding: .8rem .8rem .8rem .8rem;
+    background-color: #f7f7f7;
+    align-self: stretch;
+}
+
+.sign-up-div {
+    display: flex;
+    flex-direction: row;
+    align-self: stretch;
+    border: none;
+}

components/login-card.tsx

@@ -0,0 +1,26 @@
+import GoogleButton from 'react-google-button'
+import { signIn } from "next-auth/react"
+import "../app/styles/login-card.css"
+import { Dispatch, SetStateAction } from 'react'
+
+interface LoginProps {
+    setSignUp: Dispatch<SetStateAction<boolean>>
+}
+
+const LoginCard: React.FC<LoginProps> = ({ setSignUp }) => {
+    return (
+        <section className='login-card'>
+            <h1 className='login-card-title'> Login </h1>
+            <form className='login-form'>
+                <input required className='login-input' type="email" id="email-field" placeholder="Email" maxLength={128} autoFocus />
+                <input required className='login-input' type="password" id="password-field" placeholder="Password" maxLength={128} autoFocus />
+                <input className='login-submit-button' type="submit" value="Login" />
+            </form>
+            <hr className='login-form-divider' />
+            <GoogleButton onClick={() => signIn('google')}></GoogleButton>
+            <p className='sign-up-line'> Don't have an account? <a href="#" className='sign-up-link' onClick={() => setSignUp(true)}>Sign Up</a></p>
+        </section >
+    )
+}
+
+export default LoginCard

components/sign-up-card.tsx

@@ -0,0 +1,50 @@
+import { FormEvent, useState, Dispatch, SetStateAction } from "react"
+import "../app/styles/sign-up-card.css"
+
+interface SignUpProps {
+    setError: Dispatch<SetStateAction<boolean>>
+    setSignUp: Dispatch<SetStateAction<boolean>>
+}
+
+const SignUpCard: React.FC<SignUpProps> = ({ setError, setSignUp }) => {
+    // TODO Connect to backend API (DNE yet ATTOW) for user verification
+    async function handleSubmit(event: FormEvent) {
+        event.preventDefault()
+        // Redirect to user's dashboard if true. Otherwise, stay on this page and display an error banner
+        if (true) {
+            console.log('Clicking')
+            window.location.href = "/dashboard";
+            setError(false)    // disables banner if active
+        } else {
+            setError(true)
+        }
+    }
+
+    return (
+        <section className="sign-up-card">
+            <h1 className="sign-up-h1"> Sign Up </h1>
+            <form className="sign-up-form" onSubmit={handleSubmit}>
+                <div className="sign-up-div">
+                    <input className="sign-up-input" required type="text" maxLength={128} id="first-name-field" placeholder="First Name" pattern="([A-Z]|[a-z])+" title="Please enter only letters for first name (A-Z or a-z)" />
+                    <input className="sign-up-input" required type="text" maxLength={128} id="last-name-field" placeholder="Last Name" pattern="([A-Z]|[a-z])+" title="Please enter only letters for last name (A-Z or a-z)" />
+                </div>
+
+                <div className="sign-up-div">
+                    <input className="sign-up-input" required type="email" maxLength={128} id="email-field" placeholder="Email" />
+                    <input className="sign-up-input" required type="password" id="password-field" placeholder="Password" minLength={8} maxLength={128} />
+                </div>
+
+                <div className="sign-up-div">
+                    <input className="sign-up-input" required type="text" id="student-number-field" placeholder="Student Number" minLength={8} maxLength={8} pattern="\d+" title="Please enter digits for student number (0-9)" />
+                </div>
+
+                <div className="sign-up-div">
+                    <button className="sign-up-back-button" onClick={() => setSignUp(false)}> Back </button>
+                    <input type="submit" className="sign-up-submit-button" value="Submit" />
+                </div>
+            </form>
+        </section>
+    )
+}
+
+export default SignUpCard