Most of the functionality implemented, some bugs to fix

Author: brandonw504

app/(api)/_datalib/auth/login.ts

@@ -1,6 +1,5 @@
 'use server';
 import { NextResponse } from 'next/server';
-import bcrypt from 'bcryptjs';
 import { signIn } from 'auth';
 
 import { HttpError, NotAuthenticatedError } from '@utils/response/Errors';
@@ -17,24 +16,13 @@ export async function Login(body: { email: string; password: string }) {
       throw new NotAuthenticatedError('Judge not found');
     }
 
-    const judge = data.body[0];
-
-    const isPasswordValid = await bcrypt.compare(
-      password as string,
-      judge.password
-    );
-
-    if (!isPasswordValid) {
-      throw new NotAuthenticatedError('Email or Password do not match');
-    }
-
     const response = await signIn('credentials', {
-      email: judge.email,
-      password: judge.password,
+      email: email,
+      password: password,
       redirect: false,
     });
 
-    if (!response?.ok) {
+    if (!response.ok) {
       throw new NotAuthenticatedError('Invalid login credentials');
     }
 

app/(api)/_datalib/auth/register.ts

@@ -33,12 +33,10 @@ export async function Register(body: JudgeInt) {
       throw new HttpError('Failed to create judge');
     }
 
-    const judge = data.body;
-
     // Sign In
     const response = await signIn('credentials', {
-      email: judge.email,
-      password: judge.password,
+      email: email,
+      password: password,
       redirect: false,
     });
 

app/(api)/_datalib/auth/resetPassword.ts

@@ -5,6 +5,7 @@ import bcrypt from 'bcryptjs';
 import { GetManyJudges } from '@datalib/judges/getJudge';
 import { UpdateJudge } from '@datalib/judges/updateJudge';
 import { HttpError } from '@utils/response/Errors';
+import { signOut } from 'auth';
 
 export async function ResetPassword(body: { email: string; password: string }) {
   try {
@@ -27,6 +28,8 @@ export async function ResetPassword(body: { email: string; password: string }) {
 
     const updateData = await updateRes.json();
 
+    await signOut();
+
     return NextResponse.json(
       { ok: true, body: updateData, error: null },
       { status: 200 }

app/(pages)/(index-page)/_components/JudgingHub/HubHero.tsx

@@ -1,16 +1,13 @@
-import JudgeInt from '@typeDefs/judges';
-import styles from './HubHero.module.scss';
+import { useSession } from 'next-auth/react';
+
 import Image from 'next/image';
 import judgeHeroes from '/public/judges/hub/judgingheroes.svg';
+import styles from './HubHero.module.scss';
+
+export default function HubHero() {
+  const { data: _, status } = useSession();
 
-export default function HubHero({
-  loading,
-}: {
-  user: JudgeInt;
-  loading: boolean;
-  members: string[];
-}) {
-  if (loading) {
+  if (status === 'loading') {
     return 'loading...';
   }
 

app/(pages)/(index-page)/_components/JudgingHub/JudgingHub.tsx

@@ -1,17 +1,13 @@
-import { useAuth } from '@hooks/useAuth';
-import styles from './JudgingHub.module.scss';
 import HubHero from './HubHero';
 import TableLocations from './TableLocations';
 import ViewProjects from './ViewProjects';
-import { useJudgeGroup } from '@hooks/useJudgeGroup';
+import styles from './JudgingHub.module.scss';
 
-export default function JudgingHub() {
-  const { user, loading } = useAuth();
-  const { members } = useJudgeGroup();
+export default async function JudgingHub() {
   return (
     <div className={styles.container}>
       <ViewProjects />
-      <HubHero user={user} loading={loading} members={members} />
+      <HubHero />
       {/* <JudgingList projects={unjudgedTeams} /> */}
       <TableLocations />
     </div>

app/(pages)/(index-page)/_components/LoginPage/LoginForm.tsx

@@ -1,14 +1,15 @@
 import { useEffect, useState, ChangeEvent } from 'react';
 import { useFormState } from 'react-dom';
-import { useAuth } from '@hooks/useAuth';
-import LoginAction from '@actions/auth/login';
+import { useRouter } from 'next/navigation';
+import Image from 'next/image';
+// import Link from 'next/link';
 
+import LoginAction from '@actions/auth/login';
 import styles from './LoginForm.module.scss';
-// import Link from 'next/link';
-import Image from 'next/image';
-import AuthTokenInt from '@typeDefs/authToken';
 
 export default function LoginForm() {
+  const router = useRouter();
+
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [isValid, setIsValid] = useState(false);
@@ -19,7 +20,6 @@ export default function LoginForm() {
     body: null,
     error: null,
   });
-  const { login } = useAuth();
 
   const handleEmailChange = (event: ChangeEvent<HTMLInputElement>) => {
     setEmail(event.target.value);
@@ -41,13 +41,13 @@ export default function LoginForm() {
 
   useEffect(() => {
     if (loginState.ok === true) {
-      const user = loginState.body as AuthTokenInt;
-      login(user);
+      setError('');
+      router.push('/');
     } else {
       const err = loginState.error as string;
       setError(err);
     }
-  }, [loginState, login]);
+  }, [loginState, router]);
 
   useEffect(() => {
     validateForm(email, password);

app/(pages)/(index-page)/_components/LogoutButton/LogoutButton.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useAuth } from '@hooks/useAuth';
+import { signOut } from 'auth';
 
 export default function LogoutButton({
   children,
@@ -9,9 +9,14 @@ export default function LogoutButton({
   children?: React.ReactNode;
   style?: object;
 }) {
-  const { logout } = useAuth();
   return (
-    <button style={style} onClick={logout}>
+    <button
+      style={style}
+      onClick={async () => {
+        'use server';
+        await signOut();
+      }}
+    >
       {children}
     </button>
   );

app/(pages)/(index-page)/_components/RegisterForm/RegisterForm.tsx

@@ -1,13 +1,11 @@
 import { useEffect, useState, ChangeEvent } from 'react';
 import { useFormState } from 'react-dom';
-import { useAuth } from '@hooks/useAuth';
-import Register from '@actions/auth/register';
-
-import styles from './RegisterForm.module.scss';
+import { useRouter } from 'next/navigation';
 import Link from 'next/link';
-import AuthTokenInt from '@typeDefs/authToken';
+
+import Register from '@actions/auth/register';
 import { useInvite } from '@hooks/useInvite';
-import { useRouter } from 'next/navigation';
+import styles from './RegisterForm.module.scss';
 
 export default function RegisterForm() {
   const router = useRouter();
@@ -26,7 +24,6 @@ export default function RegisterForm() {
     body: null,
     error: null,
   });
-  const { login } = useAuth();
 
   const handleEmailChange = (event: ChangeEvent<HTMLInputElement>) => {
     setEmail(event.target.value);
@@ -74,15 +71,13 @@ export default function RegisterForm() {
 
   useEffect(() => {
     if (registerState.ok === true) {
-      const user = registerState.body as AuthTokenInt;
       setError('');
-      login(user);
       router.push('/');
     } else {
       const err = registerState.error as string;
       setError(err);
     }
-  }, [registerState, login, router]);
+  }, [registerState, router]);
 
   useEffect(() => {
     validateForm(email, password, passwordDupe);

app/(pages)/(index-page)/_components/ResetPasswordForm/ResetPasswordForm.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useState, ChangeEvent } from 'react';
 import { useFormState } from 'react-dom';
-import { useAuth } from '@hooks/useAuth';
 import ResetPassword from '@actions/auth/resetPassword';
 import styles from './ResetPasswordForm.module.scss';
 import Link from 'next/link';
@@ -22,7 +21,6 @@ export default function ResetPasswordForm() {
     body: null,
     error: null,
   });
-  const { logout } = useAuth();
 
   const handlePasswordChange = (event: ChangeEvent<HTMLInputElement>) => {
     setPassword(event.target.value);
@@ -57,13 +55,12 @@ export default function ResetPasswordForm() {
   useEffect(() => {
     if (resetState.ok === true) {
       setError('');
-      logout();
       router.push('/judges');
     } else {
       const err = resetState.error as string;
       setError(err);
     }
-  }, [resetState, logout, router]);
+  }, [resetState, router]);
 
   useEffect(() => {
     validateForm(password, passwordDupe);

app/(pages)/(index-page)/admin/layout.tsx

@@ -1,4 +1,4 @@
-import AdminProtected from '@components/AdminProtected/AdminProtected';
+import ProtectedDisplay from '@components/ProtectedDisplay/ProtectedDisplay';
 import { Metadata } from 'next';
 
 export const metadata: Metadata = {
@@ -11,11 +11,8 @@ export default function AdminLayout({
   children: React.ReactNode;
 }) {
   return (
-    <AdminProtected
-      loadingDisplay={'loading...'}
-      failDisplay={"you aren't the admin 😡"}
-    >
+    <ProtectedDisplay allowedRoles="admin" failRedirectPath="/">
       {children}
-    </AdminProtected>
+    </ProtectedDisplay>
   );
 }

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

@@ -1,5 +1,5 @@
-import { AuthProvider } from '../_contexts/AuthContext';
 import { Metadata } from 'next';
+import { SessionProvider } from 'next-auth/react';
 
 type Props = {
   children: React.ReactNode;
@@ -10,5 +10,5 @@ export const metadata: Metadata = {
 };
 
 export default function JudgesLayout({ children }: Props) {
-  return <AuthProvider>{children}</AuthProvider>;
+  return <SessionProvider>{children}</SessionProvider>;
 }

app/(pages)/(index-page)/login/page.tsx

@@ -0,0 +1,11 @@
+'use client';
+import { Suspense } from 'react';
+import LoginPage from '../_components/LoginPage/LoginPage';
+
+export default function Login() {
+  return (
+    <Suspense>
+      <LoginPage />
+    </Suspense>
+  );
+}

app/(pages)/(index-page)/page.tsx

@@ -1,11 +1,10 @@
 'use client';
 import JudgingHub from './_components/JudgingHub/JudgingHub';
 import ProtectedDisplay from '@components/ProtectedDisplay/ProtectedDisplay';
-import LoginPage from './_components/LoginPage/LoginPage';
 
 export default function Judges() {
   return (
-    <ProtectedDisplay loadingDisplay={'loading...'} failDisplay={<LoginPage />}>
+    <ProtectedDisplay allowedRoles="admin judge" failRedirectPath="/login">
       <JudgingHub />
     </ProtectedDisplay>
   );

app/(pages)/(index-page)/projects/page.tsx

@@ -4,13 +4,12 @@ import { useState } from 'react';
 import ProjectsHeader from './_components/ProjectsHeader';
 import ProjectsList from './_components/ProjectsList';
 import ProtectedDisplay from '@components/ProtectedDisplay/ProtectedDisplay';
-import LoginPage from '../_components/LoginPage/LoginPage';
 // import SearchBar from './_components/SearchBar';
 
 export default function Judges() {
   const [activeTab, setActiveTab] = useState(0);
   return (
-    <ProtectedDisplay loadingDisplay={'loading...'} failDisplay={<LoginPage />}>
+    <ProtectedDisplay allowedRoles="admin judge" failRedirectPath="/login">
       <div>
         <ProjectsHeader activeTab={activeTab} setActiveTab={setActiveTab} />
         {/* <SearchBar /> */}

app/(pages)/(index-page)/scoring/layout.tsx

@@ -1,15 +1,14 @@
 'use client';
 
 import ProtectedDisplay from '@components/ProtectedDisplay/ProtectedDisplay';
-import LoginPage from '../_components/LoginPage/LoginPage';
 
 type Props = {
   children: React.ReactNode;
 };
 
 export default function ScoringLayout({ children }: Props) {
   return (
-    <ProtectedDisplay loadingDisplay={'loading...'} failDisplay={<LoginPage />}>
+    <ProtectedDisplay allowedRoles="admin judge" failRedirectPath="/login">
       {children}
     </ProtectedDisplay>
   );