➡️ merge pull request #51 from devsoc-unsw/feature/createEventComponent

🔑 fix borked login redirection
devsoc-unsw · Dec 14, 2024 · 0cad749 · 0cad749
2 parents 2c16b00 + 4e2c0a6
commit 0cad749
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 9 deletions.
diff --git a/backend/src/index.ts b/backend/src/index.ts
@@ -333,12 +333,24 @@ app.post('/auth/login', async (req: TypedRequest<LoginBody>, res: Response) => {
     req.session.userId = user.id;
     req.session.cookie.expires = dayjs().add(1, 'week').toDate();
     req.session.save(); // Explicitly save session to Redis
-    return res.status(200).json({ message: 'ok' });
+    return res.status(200).json({
+      id: user.id,
+      username: user.username,
+      email: user.email,
+      dateJoined: user.dateJoined,
+      profilePicture: user.profilePicture,
+    } as SanitisedUser);
   } catch (error) {
     return res.status(500).json({ error: 'Error logging in' });
   }
 });
 
+app.post('/auth/logout', async (req: Request, res: Response) => {
+  req.session.destroy(() => {
+    return res.status(200).json({ message: 'ok' });
+  });
+});
+
 app.post(
   '/discord/login',
   async (req: TypedRequest<DiscordLoginBody>, res: Response) => {

diff --git a/frontend/src/Login/Login.tsx b/frontend/src/Login/Login.tsx
@@ -4,7 +4,7 @@ import { TextInput, TextOptions } from '../TextInput/TextInput';
 import { UserCircleIcon } from '@heroicons/react/24/outline';
 import { LockClosedIcon } from '@heroicons/react/24/outline';
 import { useState, FormEvent, useContext } from 'react';
-import { Link, useNavigate } from 'react-router';
+import { Link } from 'react-router';
 import { errorHandler, AuthError } from '../errorHandler';
 import { UserContext, User } from '../UserContext/UserContext';
 
@@ -13,7 +13,6 @@ export default function LoginPage() {
   const [password, setPassword] = useState('');
   const [error, setError] = useState<AuthError | undefined>(undefined);
   const [success, setSuccess] = useState<string | undefined>(undefined);
-  const navigate = useNavigate();
   const { setUser } = useContext(UserContext);
 
   async function handleSubmit(event: FormEvent<HTMLFormElement>) {
@@ -35,10 +34,9 @@ export default function LoginPage() {
       setError(errorHandler(json.error));
     } else if (setUser) {
       setError(undefined);
-      setUser(json as User);
       setSuccess('Logged in successfully! Redirecting...');
       setTimeout(() => {
-        navigate('/timeline');
+        setUser(json as User);
       }, 1000);
     } else {
       setError(errorHandler("Couldn't update user object."));

diff --git a/frontend/src/Settings/SettingsNavbar/SettingsNavbar.tsx b/frontend/src/Settings/SettingsNavbar/SettingsNavbar.tsx
@@ -7,12 +7,14 @@ import {
 } from '@heroicons/react/24/outline';
 import classes from './SettingsNavbar.module.css';
 import { NavLink, useLocation } from 'react-router';
+import { useContext } from 'react';
+import { User, UserContext } from '../../UserContext/UserContext';
 
 interface Row {
   icon: React.ReactNode;
   name: string;
   to?: string;
-  onClick?: () => void;
+  onClick?: (() => void) | ((state: any) => void);
 }
 
 const rows: Row[][] = [
@@ -46,15 +48,26 @@ const rows: Row[][] = [
     {
       icon: <KeyIcon />,
       name: 'Log out',
-      onClick: () => {
-        alert('hello');
+      onClick: async (state: {
+        setUser: React.Dispatch<React.SetStateAction<User | null>>;
+      }) => {
+        const logout = await fetch('http://localhost:5180/auth/logout', {
+          method: 'POST',
+          credentials: 'include',
+        });
+        if (logout.ok) {
+          state.setUser(null);
+        } else {
+          alert('Failed to logout.');
+        }
       },
     },
   ],
 ];
 
 export function SettingsNavbar() {
   const { pathname } = useLocation();
+  const { setUser } = useContext(UserContext);
 
   return (
     <nav className={classes.container}>
@@ -68,7 +81,13 @@ export function SettingsNavbar() {
                   ? `${classes.row} ${classes.interactable}`
                   : classes.row
               }
-              {...(row.onClick && { onClick: row.onClick })}
+              {...{
+                onClick: (_) =>
+                  row.onClick &&
+                  row.onClick({
+                    setUser,
+                  }),
+              }}
             >
               <div className={classes.icon}>{row.icon}</div>
               {row.to ? (