From 5e86fa9e5f9e810d602aa32dd394ec83ea89c4b5 Mon Sep 17 00:00:00 2001
From: Erland A Syafiq <syafiqeas@gmail.com>
Date: Wed, 5 Jun 2024 17:02:20 -0400
Subject: [PATCH] Fixed login page

---
 site/app/login/LoginForm.jsx | 109 +++++++++++++++++++++++++++++++++++
 site/app/login/page.jsx      | 106 ++--------------------------------
 2 files changed, 113 insertions(+), 102 deletions(-)
 create mode 100644 site/app/login/LoginForm.jsx

diff --git a/site/app/login/LoginForm.jsx b/site/app/login/LoginForm.jsx
new file mode 100644
index 0000000..eb2a530
--- /dev/null
+++ b/site/app/login/LoginForm.jsx
@@ -0,0 +1,109 @@
+"use client"
+
+
+import { isValidEmail } from '../utils/validation';
+
+import React, { useState } from 'react';
+
+export default function LoginForm() {
+    const [formData, setFormData] = useState({ email: '', password: '' });
+    const [rememberMe, setRememberMe] = useState(false);
+    const [errors, setErrors] = useState([]);
+
+    const handleInputChange = (e) => {
+        const { name, value } = e.target;
+        setFormData({ ...formData, [name]: value });
+    };
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+
+        if (!validateForm()) return;
+
+        try {
+            // Attempt login
+        }
+        catch(e) {
+            console.error("There was an error submitting the form!", e);
+        }
+        
+    };
+
+    function validateForm() {
+        const newErrors = {};
+
+        if (!formData.advisorEmail) newErrors.email = "Email is required";
+        if (!isValidEmail(formData.advisorEmail)) newErrors.email = "Email is invalid";
+        if (!formData.password) newErrors.password = "Password is required";
+
+        setErrors(newErrors);
+        return Object.keys(newErrors).length === 0;
+    }
+
+    return (
+        <form id="account" method="post" onSubmit={handleSubmit}>
+            <h4>Log In for staff</h4>
+            <hr />
+            <div className="form-floating">
+                <label>Email</label>
+                <input
+                    type="email"
+                    name="email"
+                    className="form-control"
+                    autoComplete="username"
+                    aria-required="true"
+                    value={formData.email}
+                    onChange={handleInputChange}
+                    placeholder="Email"
+                />
+                <span className="text-danger">{errors.email}</span>
+            </div>
+            <div className="form-floating">
+                <label>Password</label>
+                <input
+                    type="password"
+                    name="password"
+                    className="form-control"
+                    autoComplete="current-password"
+                    aria-required="true"
+                    value={formData.password}
+                    onChange={handleInputChange}
+                    placeholder="Password"
+                />
+                <span className="text-danger">{errors.password}</span>
+            </div>
+            <div className="form-group custom-control custom-checkbox">
+                <input
+                    type="checkbox"
+                    className="custom-control-input"
+                    id="rememberMe"
+                    checked={rememberMe}
+                    onChange={(e) => setRememberMe(e.target.checked)}
+                />
+                <label className="custom-control-label" htmlFor="rememberMe">
+                    Remember me?
+                </label>
+            </div>
+            <div>
+                <button id="login-submit" type="submit" className="w-100 btn btn-lg btn-primary">
+                    Log in
+                </button>
+            </div>
+            <div>
+                <p>
+                    <a id="forgot-password" href="/forgot-password">
+                        Forgot your password?
+                    </a>{' '}
+                    |{' '}
+                    <a href="/staff-register">
+                        Register as a new user
+                    </a>{' '}
+                    |{' '}
+                    <a id="resend-confirmation" href="/resend-email-confirmation">
+                        Resend email confirmation
+                    </a>
+                </p>
+            </div>
+        </form>
+    )
+}
\ No newline at end of file
diff --git a/site/app/login/page.jsx b/site/app/login/page.jsx
index 0512fad..e19f20c 100644
--- a/site/app/login/page.jsx
+++ b/site/app/login/page.jsx
@@ -1,8 +1,6 @@
-"use client"
-
-import React, { useState } from 'react';
+import React from "react";
 import './LoginPage.css';
-import { isValidEmail } from '../utils/validation';
+import LoginForm from "./LoginForm";
 
 export const metadata = {
     title: "Staff login",
@@ -10,110 +8,14 @@ export const metadata = {
     noindex: true
 }
 
-export default function Login () {
-    const [formData, setFormData] = useState({ email: '', password: '' });
-    const [rememberMe, setRememberMe] = useState(false);
-    const [errors, setErrors] = useState([]);
-
-    const handleInputChange = (e) => {
-        const { name, value } = e.target;
-        setFormData({ ...formData, [name]: value });
-    };
-
-    const handleSubmit = (e) => {
-        e.preventDefault();
-
-        if (!validateForm()) return;
-
-        try {
-            // Attempt login
-        }
-        catch(e) {
-            console.error("There was an error submitting the form!", e);
-        }
-        
-    };
-
-    function validateForm() {
-        const newErrors = {};
-
-        if (!formData.advisorEmail) newErrors.email = "Email is required";
-        if (!isValidEmail(formData.advisorEmail)) newErrors.email = "Email is invalid";
-        if (!formData.password) newErrors.password = "Password is required";
-
-        setErrors(newErrors);
-        return Object.keys(newErrors).length === 0;
-    }
+export default function LoginPage () {
 
     return (
         <section className="container login d-flex justify-content-center align-items-center">
             <div className="row">
                 <div className="loginBox">
                     <h1>Staff Sign In</h1>
-                    <form id="account" method="post" onSubmit={handleSubmit}>
-                        <h4>Log In for staff</h4>
-                        <hr />
-                        <div className="form-floating">
-                            <label>Email</label>
-                            <input
-                                type="email"
-                                name="email"
-                                className="form-control"
-                                autoComplete="username"
-                                aria-required="true"
-                                value={formData.email}
-                                onChange={handleInputChange}
-                                placeholder="Email"
-                            />
-                            <span className="text-danger">{errors.email}</span>
-                        </div>
-                        <div className="form-floating">
-                            <label>Password</label>
-                            <input
-                                type="password"
-                                name="password"
-                                className="form-control"
-                                autoComplete="current-password"
-                                aria-required="true"
-                                value={formData.password}
-                                onChange={handleInputChange}
-                                placeholder="Password"
-                            />
-                            <span className="text-danger">{errors.password}</span>
-                        </div>
-                        <div className="form-group custom-control custom-checkbox">
-                            <input
-                                type="checkbox"
-                                className="custom-control-input"
-                                id="rememberMe"
-                                checked={rememberMe}
-                                onChange={(e) => setRememberMe(e.target.checked)}
-                            />
-                            <label className="custom-control-label" htmlFor="rememberMe">
-                                Remember me?
-                            </label>
-                        </div>
-                        <div>
-                            <button id="login-submit" type="submit" className="w-100 btn btn-lg btn-primary">
-                                Log in
-                            </button>
-                        </div>
-                        <div>
-                            <p>
-                                <a id="forgot-password" href="/forgot-password">
-                                    Forgot your password?
-                                </a>{' '}
-                                |{' '}
-                                <a href="/staff-register">
-                                    Register as a new user
-                                </a>{' '}
-                                |{' '}
-                                <a id="resend-confirmation" href="/resend-email-confirmation">
-                                    Resend email confirmation
-                                </a>
-                            </p>
-                        </div>
-                    </form>
+                    <LoginForm />
                     <h5>For any issues, contact erland@vt.edu</h5>
                 </div>
             </div>