Restructured hackers and judges to allow for better clarity and auth layout

Author: brandonw504

app/(pages)/(index)/_components/HackerHub/HackerHub.tsx renamed to app/(pages)/(hackers)/(index)/_components/HackerHub/HackerHub.tsx

@@ -0,0 +1,13 @@
+import { SessionProvider } from 'next-auth/react';
+
+import ProtectedDisplay from '@components/ProtectedDisplay/ProtectedDisplay';
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <SessionProvider>
+      <ProtectedDisplay allowedRoles="hacker admin">
+        {children}
+      </ProtectedDisplay>
+    </SessionProvider>
+  );
+}

app/(pages)/(hackers)/(index)/layout.tsx

@@ -4,14 +4,13 @@ import { useState, FormEvent } from 'react';
 import { useRouter } from 'next/navigation';
 
 import HackerHub from './_components/HackerHub/HackerHub';
-import ProtectedDisplay from '@components/ProtectedDisplay/ProtectedDisplay';
 import LogoutAction from '@actions/auth/logout';
 
 export default function Page() {
   const router = useRouter();
   const [loading, setLoading] = useState(false);
 
-  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+  const handleLogout = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
     setLoading(true);
@@ -24,13 +23,13 @@ export default function Page() {
   };
 
   return (
-    <ProtectedDisplay allowedRoles="hacker admin">
+    <>
       <HackerHub />
-      <form onSubmit={handleSubmit}>
+      <form onSubmit={handleLogout}>
         <button type="submit" disabled={loading}>
           Sign Out
         </button>
       </form>
-    </ProtectedDisplay>
+    </>
   );
 }

app/(pages)/(index)/page.tsx renamed to app/(pages)/(hackers)/(index)/page.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import { useState, useEffect, FormEvent, ChangeEvent } from 'react';
+import { useRouter } from 'next/navigation';
+
+import LoginAction from '@actions/auth/login';
+import styles from './LoginForm.module.scss';
+
+export default function LoginForm() {
+  const router = useRouter();
+
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [valid, setValid] = useState(false);
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    setLoading(true);
+    setError('');
+    const formData = new FormData(e.currentTarget);
+    const response = await LoginAction(
+      formData.get('email'),
+      formData.get('password')
+    );
+    setLoading(false);
+
+    if (response.ok) {
+      router.push('/');
+    } else {
+      setError('Invalid email or password.');
+    }
+  };
+
+  const validateForm = (email: string, password: string) => {
+    const isEmailValid = /\S+@\S+\.\S+/.test(email);
+    const isPasswordValid = password.length >= 6;
+    setValid(isEmailValid && isPasswordValid);
+  };
+
+  useEffect(() => {
+    validateForm(email, password);
+  }, [email, password]);
+
+  return (
+    <form onSubmit={handleLogin} className={styles.container}>
+      <label htmlFor="email">Email</label>
+      <input
+        name="email"
+        type="email"
+        value={email}
+        onInput={(e: ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)}
+      />
+      <label htmlFor="password">Password</label>
+      <input
+        name="password"
+        type="password"
+        value={password}
+        onInput={(e: ChangeEvent<HTMLInputElement>) =>
+          setPassword(e.target.value)
+        }
+      />
+      <p className={styles.error_msg}>{error}</p>
+      <button type="submit" disabled={loading || !valid}>
+        Log in →
+      </button>
+    </form>
+  );
+}

app/(pages)/(index)/schedule/page.tsx renamed to app/(pages)/(hackers)/(index)/schedule/page.tsx

@@ -1,6 +1,8 @@
 import { Metadata } from 'next';
 import { SessionProvider } from 'next-auth/react';
 
+import ProtectedDisplay from '@components/ProtectedDisplay/ProtectedDisplay';
+
 type Props = {
   children: React.ReactNode;
 };
@@ -10,5 +12,9 @@ export const metadata: Metadata = {
 };
 
 export default function JudgesLayout({ children }: Props) {
-  return <SessionProvider>{children}</SessionProvider>;
+  return (
+    <SessionProvider>
+      <ProtectedDisplay allowedRoles="admin judge">{children}</ProtectedDisplay>
+    </SessionProvider>
+  );
 }

app/(pages)/(index)/starter-kit/page.tsx renamed to app/(pages)/(hackers)/(index)/starter-kit/page.tsx

@@ -0,0 +1,6 @@
+'use client';
+import JudgingHub from './_components/JudgingHub/JudgingHub';
+
+export default function Judges() {
+  return <JudgingHub />;
+}

app/(pages)/(index)/login/_components/LoginForm.module.scss renamed to app/(pages)/(hackers)/login/_components/LoginForm.module.scss

@@ -8,8 +8,6 @@ type Props = {
 
 export default function ScoringLayout({ children }: Props) {
   return (
-    <ProtectedDisplay allowedRoles="admin judge" failRedirectPath="/login">
-      {children}
-    </ProtectedDisplay>
+    <ProtectedDisplay allowedRoles="admin judge">{children}</ProtectedDisplay>
   );
 }

app/(pages)/(hackers)/login/_components/LoginForm.tsx

@@ -51,7 +51,7 @@
         border: none;
         border-radius: var(--b-radius);
         background-color: var(--background-secondary);
-        cursor: not-allowed;
+        cursor: pointer;
         width: 100%;
 
     }
@@ -63,11 +63,11 @@
         flex-direction: column;
     }
 
-    .valid {
+    .not_valid {
         background-color: var(--background-secondary-light);
         opacity: 0.7;
         color: var(--text-light);
-        cursor: pointer;
+        cursor: not-allowed;
     }
 
     .froggie_container {

app/(pages)/(index)/login/page.tsx renamed to app/(pages)/(hackers)/login/page.tsx

@@ -1,5 +1,4 @@
-import { useEffect, useState, ChangeEvent } from 'react';
-import { useFormState } from 'react-dom';
+import { useEffect, useState, FormEvent, ChangeEvent } from 'react';
 import { useRouter } from 'next/navigation';
 import Image from 'next/image';
 // import Link from 'next/link';
@@ -12,58 +11,51 @@ export default function LoginForm() {
 
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
-  const [isValid, setIsValid] = useState(false);
+  const [valid, setValid] = useState(false);
   const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
 
-  const [loginState, Login] = useFormState(LoginAction, {
-    ok: false,
-    body: null,
-    error: null,
-  });
+  const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
 
-  const handleEmailChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setEmail(event.target.value);
-  };
+    setLoading(true);
+    setError('');
+    const formData = new FormData(e.currentTarget);
+    const response = await LoginAction(
+      formData.get('email'),
+      formData.get('password')
+    );
+    setLoading(false);
 
-  const handlePasswordChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setPassword(event.target.value);
+    if (response.ok) {
+      router.push('/judges');
+    } else {
+      setError('Invalid email or password.');
+    }
   };
 
   const validateForm = (email: string, password: string) => {
-    // Simple email validation
     const isEmailValid = /\S+@\S+\.\S+/.test(email);
-    // Password validation (example: minimum length of 6 characters)
     const isPasswordValid = password.length >= 6;
-
-    // Set isValid state based on email and password validity
-    setIsValid(isEmailValid && isPasswordValid);
+    setValid(isEmailValid && isPasswordValid);
   };
 
-  useEffect(() => {
-    if (loginState.ok === true) {
-      setError('');
-      router.push('/');
-    } else {
-      const err = loginState.error as string;
-      setError(err);
-    }
-  }, [loginState, router]);
-
   useEffect(() => {
     validateForm(email, password);
   }, [email, password]);
 
   return (
-    <form action={Login} className={styles.container}>
+    <form onSubmit={handleLogin} className={styles.container}>
       <div className={styles.fields}>
         <div className={styles.input_container}>
           <label htmlFor="email">Username</label>
           <input
             name="email"
             type="email"
-            // placeholder="Username"
             value={email}
-            onChange={handleEmailChange}
+            onInput={(e: ChangeEvent<HTMLInputElement>) =>
+              setEmail(e.target.value)
+            }
             className={`${error ? styles.error : null}`}
           />
         </div>
@@ -72,9 +64,10 @@ export default function LoginForm() {
           <input
             name="password"
             type="password"
-            // placeholder="Password"
             value={password}
-            onChange={handlePasswordChange}
+            onInput={(e: ChangeEvent<HTMLInputElement>) =>
+              setPassword(e.target.value)
+            }
             className={`${error ? styles.error : null}`}
           />
         </div>
@@ -98,9 +91,11 @@ export default function LoginForm() {
           />
         </div>
         <button
-          className={`${styles.login_button} ${isValid ? styles.valid : null}`}
+          className={`${styles.login_button} ${
+            valid ? null : styles.not_valid
+          }`}
           type="submit"
-          disabled={!isValid}
+          disabled={loading || !valid}
         >
           Log in →
         </button>

app/(pages)/(index)/layout.tsx

@@ -1,6 +1,8 @@
-import LoginForm from './LoginForm';
+'use client';
+
+import LoginForm from './_components/LoginForm';
 import Image from 'next/image';
-import styles from './LoginPage.module.scss';
+import styles from './page.module.scss';
 
 export default function LoginPage() {
   return (
@@ -15,7 +17,7 @@ export default function LoginPage() {
         <p>Enter your username and password.</p>
       </div>
       <div className={styles.section}>
-        <LoginForm></LoginForm>
+        <LoginForm />
       </div>
     </div>
   );

app/(pages)/(index)/login/_components/LoginForm.tsx

@@ -1,5 +1,5 @@
 {
-  "name": "hackdavis-judging-app",
+  "name": "hackdavis-hacker-hub",
   "version": "0.1.0",
   "private": true,
   "scripts": {