Updating ui

ui/src/api/auth.ts

@@ -1,72 +0,0 @@
-import Cookies from 'js-cookie';
-import { getRequest, postRequest } from '.';
-import { RegisterUser, ResponseAuth } from './auth.types';
-
-export async function login(email: string, password: string): Promise<ResponseAuth | undefined> {
-  const response = await postRequest('auth/login', { email, password });
-  if (response?.status === 200) {
-    return response.json();
-  } else {
-    return undefined;
-  }
-}
-
-export async function register(user: RegisterUser): Promise<boolean> {
-  const response = await postRequest('auth/register', user);
-  if (response?.status === 201) {
-    return true;
-  } else {
-    return false;
-  }
-}
-
-export async function logout() {
-  return await postRequest('auth/logout', {});
-}
-
-export async function refresh(refresh_token_rotation?: boolean): Promise<ResponseAuth | undefined> {
-  const response = await getRequest('auth/refresh', { refresh_token_rotation });
-  if (response?.status === 200) {
-    return response.json();
-  } else {
-    return undefined;
-  }
-}
-
-export async function me(): Promise<ResponseAuth | undefined> {
-  const response = await getRequest('auth/me');
-  if (response?.status === 200) {
-    return response.json();
-  } else {
-    return undefined;
-  }
-}
-
-export async function hasSession(): Promise<boolean> {
-  const response = await getRequest('auth/session');
-  if (response?.status === 200) {
-    return response?.json();
-  } else {
-    return false;
-  }
-}
-
-/**
- * Refreshes the logged_in cookie every interval. By default, the interval is 14 minutes.
- * @param interval
- * @returns interval id
- */
-export function refreshLoggedIn(interval = 840000) {
-  let loggedIn = Cookies.get('logged_in');
-  const id = setInterval(async () => {
-    const cookie = Cookies.get('logged_in');
-    if (cookie != loggedIn) {
-      loggedIn = cookie;
-      const response = await refresh(true);
-      if (!response) {
-        Cookies.remove('logged_in');
-      }
-    }
-  }, interval);
-  return id;
-}

ui/src/app/api/auth/index.ts

@@ -0,0 +1,32 @@
+import { getRequest, postRequest } from '..';
+import { BaseResponse, RegisterUser } from './types';
+
+export async function login(email: string, password: string): Promise<BaseResponse> {
+  const response = await postRequest('auth/login', { email, password });
+  const data = await response.json();
+  return { data, status: response.status };
+}
+
+export async function register(user: RegisterUser): Promise<BaseResponse> {
+  const response = await postRequest('auth/register', user);
+  const data = await response.json();
+  return { data, status: response.status };
+}
+
+export async function logout(): Promise<BaseResponse> {
+  const response = await postRequest('auth/logout', {});
+  const data = await response.json();
+  return { data, status: response.status };
+}
+
+export async function refresh(): Promise<BaseResponse> {
+  const response = await getRequest('auth/refresh');
+  const data = await response.json();
+  return { data, status: response.status };
+}
+
+export async function me(): Promise<BaseResponse> {
+  const response = await getRequest('auth/me');
+  const data = await response.json();
+  return { data, status: response.status };
+}

ui/src/app/api/auth/types.ts

@@ -1,8 +1,18 @@
-export interface ResponseAuth {
-  token: string;
+import { ErrorResponse } from "..";
+
+export interface AuthResponse {
+  id: string;
   user: User;
 }
 
+// AuthResponse can be either a success or an error
+export type AuthType = AuthResponse | ErrorResponse;
+
+export interface BaseResponse {
+  data: AuthType;
+  status: number;
+}
+
 export interface RegisterUser {
   email: string;
   password: string;

ui/src/app/api/guilds/index.ts

@@ -1,5 +1,5 @@
-import { APIResponse, getRequest, postRequest } from '.';
-import { GuildChannel, GuildInfo } from './guilds.types';
+import { APIResponse, getRequest, postRequest } from '..';
+import { GuildChannel, GuildInfo } from './types';
 
 export async function getGuilds(): Promise<GuildInfo[]> {
   const response = await getRequest('guilds');

ui/src/app/api/index.ts

@@ -46,6 +46,11 @@ export interface APIResponse<T> {
   metadata: Metadata;
 }
 
+export interface ErrorResponse {
+  status: string;
+  message: string;
+}
+
 export interface Metadata {
   limit: number;
   page: number;

ui/src/app/api/spells/index.ts

@@ -1,5 +1,5 @@
-import { getRequest } from '.';
-import { GetSpellsResponse } from './spells.types';
+import { getRequest } from '..';
+import { GetSpellsResponse } from './types';
 
 interface GetSpellsParams {
   name?: string;

ui/src/app/api/spells/types.ts

@@ -1,4 +1,4 @@
-import { Metadata } from '.';
+import { Metadata } from '..';
 
 export interface Spell {
   id: string;

ui/src/app/api/users/index.ts

@@ -1,4 +1,4 @@
-import { getRequest, postRequest } from '.';
+import { getRequest, postRequest } from '..';
 
 export async function getPicture(): Promise<Blob | undefined> {
   const response = await getRequest('users/picture');

ui/src/app/layout.tsx

@@ -8,6 +8,7 @@ import { Notifications } from '@mantine/notifications';
 import 'styles/globals.css';
 import '@mantine/core/styles.css';
 import '@mantine/notifications/styles.css';
+import Loader from '@/components/Loader';
 
 export const metadata = {
   title: 'Siren',
@@ -27,8 +28,10 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           <MantineProvider>
             <Notifications />
             <ModalsProvider>
-              <Header />
-              <Box>{children}</Box>
+              <Loader>
+                <Header />
+                <Box>{children}</Box>
+              </Loader>
             </ModalsProvider>
           </MantineProvider>
         </RecoilRootWrapper>

ui/src/components/Auth.tsx

@@ -12,12 +12,10 @@ export default function Auth(Component: any, adminOnly = false) {
     const isAdmin = useRecoilValue(isAdminState);
 
     function isAuthenticated() {
-      console.log('hasUser', hasUser, 'adminOnly', adminOnly, 'isAdmin', isAdmin)
       return hasUser && (adminOnly ? isAdmin : true);
     }
 
     useEffect(() => {
-      console.log('isAuthenticated', isAuthenticated());
       if (!isAuthenticated) {
         router.push('/');
       }

ui/src/components/Header/HeaderModal.tsx

@@ -1,7 +1,8 @@
 'use client';
 
+import { ErrorResponse } from '@/api';
 import { login, register } from '@/api/auth';
-import { User } from '@/api/auth.types';
+import { AuthResponse, User } from '@/api/auth.types';
 import {
   Modal,
   Container,
@@ -22,10 +23,9 @@ interface HeaderModalProps {
   type?: string;
   toggle: any;
   setUser: (user: User) => void;
-  setRefreshId: (id: NodeJS.Timeout) => void;
 }
 
-export function HeaderModal({ type, toggle, setUser, setRefreshId }: HeaderModalProps) {
+export function HeaderModal({ type, toggle, setUser }: HeaderModalProps) {
   function passwordValidator(value: string) {
     if (value.trim().length < 10) {
       return 'Password must be at least 10 characters';
@@ -144,22 +144,24 @@ export function HeaderModal({ type, toggle, setUser, setRefreshId }: HeaderModal
                 });
                 if (registerResponse) {
                   const loginResponse = await login(values.email, values.password);
-                  if (loginResponse) {
-                    setUser(loginResponse.user);
+                  if (loginResponse.status == 200) {
+                    const user = (loginResponse.data as AuthResponse).user;
+                    setUser(user);
                     onClose();
                     notifications.update({
                       id,
                       title: `Account created`,
-                      message: `Welcome ${loginResponse.user.first_name}!`,
+                      message: `Welcome ${user.first_name}!`,
                       color: 'green',
                       autoClose: 2000,
                       loading: false
                     });
                   } else {
+                    const error = loginResponse.data as ErrorResponse;
                     notifications.update({
                       id,
                       title: `Unable to Login`,
-                      message: `Please try again.`,
+                      message: `${error.message}`,
                       color: 'red',
                       autoClose: 2000,
                       loading: false
@@ -219,13 +221,14 @@ export function HeaderModal({ type, toggle, setUser, setRefreshId }: HeaderModal
             <form
               onSubmit={loginForm.onSubmit(async (values) => {
                 const response = await login(values.email, values.password);
-                if (response) {
-                  setUser(response.user);
+                if (response.status == 200) {
+                  setUser((response.data as AuthResponse).user);
                   onClose();
                 } else {
+                  const error = response.data as ErrorResponse;
                   notifications.show({
                     title: `Unable to Login`,
-                    message: `Please try again.`,
+                    message: `${error.message}`,
                     color: 'red',
                     autoClose: 2000
                   });

ui/src/components/Header/index.tsx

@@ -6,7 +6,7 @@ import './header.css';
 import { Avatar, Button, Card, Center, FileButton, Grid, Group, Menu, Text, UnstyledButton } from '@mantine/core';
 import Cookies from 'js-cookie';
 import { useEffect, useState } from 'react';
-import { hasSession, logout, refresh, refreshLoggedIn } from '@/api/auth';
+import { logout } from '@/api/auth';
 import { useToggle } from '@mantine/hooks';
 import { HeaderModal } from './HeaderModal';
 import { HeaderItem, headerItems } from './headerItems';
@@ -21,7 +21,6 @@ export default function Header() {
   const [modalType, toggle] = useToggle([undefined, 'login', 'register', 'reset']);
   const [headers] = useState<HeaderItem[]>(headerItems);
   const [user, setUser] = useRecoilState(userState);
-  const [refreshId, setRefreshId] = useState<NodeJS.Timeout | undefined>(undefined);
   const [profilePicture, setProfilePicture] = useState<File | null>(null);
   const router = useRouter();
 
@@ -32,9 +31,6 @@ export default function Header() {
   }, [user]);
 
   function updateUser(user?: User) {
-    if (!refreshId) {
-      setRefreshId(refreshLoggedIn());
-    }
     if (user) {
       getPicture().then((response) => {
         if (response) {
@@ -161,12 +157,7 @@ export default function Header() {
                           await logout();
                           Cookies.remove('logged_in');
                           setUser(undefined);
-                          clearInterval(refreshId);
-                          setRefreshId(undefined);
                           setProfilePicture(null);
-                          if (refreshId) {
-                            clearInterval(refreshId);
-                          }
                         }}
                       >
                         Logout
@@ -203,7 +194,6 @@ export default function Header() {
           setUser(u);          
           updateUser(u);
         }}
-        setRefreshId={setRefreshId}
       />
     </>
   );

ui/src/components/Loader.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { hasSession, refresh } from "@/api/auth";
+import { refresh } from "@/api/auth";
 import { userState } from "@/state/auth";
 import { Skeleton } from "@mantine/core";
 import { useEffect, useState } from "react";
@@ -11,26 +11,20 @@ export default function Loading({ children }: { children: React.ReactNode }) {
   const [user, setUser] = useRecoilState(userState);
   
   useEffect(() => {
-    if (!user) {
-      hasSession().then((response) => {
-        if (response) {
-          refresh().then((response) => {
-            if (response) {
-              setUser(response.user);
-              setLoading(false);
-            } else {
-              setLoading(false);
-            }
-          });
-        } else {
-          setLoading(false);
-        }
-      });
-    } else {
-      setLoading(false);
-    }
+    checkUser();
   }, []);
 
+  async function checkUser() {
+    setLoading(true);
+    if (!user) {
+      const response = await refresh();
+      if (response) {
+        setUser(response.user);
+      }
+    }
+    setLoading(false);
+  }
+
   if (loading) {
     return <Skeleton height={'100%'} />;
   } else {

ui/src/middleware.ts

@@ -1,6 +1,6 @@
-'use client';
-
+import Cookies from "js-cookie";
 import { NextRequest } from "next/server";
 
 export default function middleware(request: NextRequest) {
+  console.log(Cookies.get('user_id'))
 }