Feat: Added button to validate user's token, added better logout system

eslint.config.mjs

@@ -185,7 +185,7 @@ export default [...fixupConfigRules(compat.extends(
         "no-constant-binary-expression": 0,
         "no-constant-condition": 2,
 
-        "no-console": [2, {
+        "no-console": [0, {
             allow: ["info", "trace"],
         }],
 

src/Router.tsx

@@ -9,6 +9,7 @@ const Router: React.FC = () => {
     <Routes location={location} key={location.pathname}>
       <Route path="/" element={<Components.Home />} />
       <Route path="/login" element={<Components.Login />} />
+      <Route path="/logout" element={<Components.Logout />} />
       <Route path="/register" element={<Components.Register />} />
       <Route path="*" element={<Components.FourOhFour />} />
     </Routes>

src/components/generic/views/Home.tsx

@@ -1,19 +1,32 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { HomeBody, HomeRow } from '../styled';
 import { Button } from '../../customs/buttons';
-import { sendToLoginPage, sendToRegisterPage, sendToLogoutPage } from '../../../controllers';
+import { sendToLoginPage, sendToRegisterPage, sendToLogoutPage, getUserinfo } from '../../../controllers';
 
 const Home: React.FC = () => {
-  return (
+    const [userinfo, setUserinfo] = useState<string | null>(null)
+
+    const handleGetUserInfo = () => {
+            getUserinfo().then((login) => {
+            setUserinfo(login)
+        }).catch(err => {
+            console.log("Got err while fetching user data", err)
+            setUserinfo((err as Error).message)
+        })
+    }
+
+    return (
     <HomeBody>
       <header>
         This is super simple frontend client created for testing purposes of my authorizations service. This is intended
-        to be modified and only used as a template
+        to be modified and only used as a template.
       </header>
+        {userinfo ? `Logged in as ${userinfo}` : null}
       <HomeRow>
         <Button onClick={() => sendToRegisterPage()}>Register</Button>
         <Button onClick={() => sendToLoginPage()}>Log in</Button>
         <Button onClick={() => sendToLogoutPage()}>Log out</Button>
+        <Button onClick={() => handleGetUserInfo()}>Check if logged in</Button>
       </HomeRow>
     </HomeBody>
   );

src/components/index.tsx

@@ -2,5 +2,6 @@ import FourOhFour from './generic/views/FourOhFour.tsx';
 import Home from './generic/views/Home';
 import Login from './login/views/Login.tsx';
 import Register from './register/views/Register.tsx';
+import Logout from './logout/views/Logout.tsx'
 
-export { FourOhFour, Home, Login, Register };
+export { FourOhFour, Home, Login, Register, Logout };

src/controllers/index.ts

@@ -30,3 +30,24 @@ export const sendToLogoutPage = (): void => {
 
   window.location.href = `${server}/user/logout/start?${queryParams}`;
 };
+
+export const getUserinfo = async (): Promise<string> => {
+  const server = import.meta.env.VITE_API_BACKEND as string;
+  const homeUrl = import.meta.env.VITE_API_HOME as string;
+
+  const res = await fetch(`${server}/user/validate`, {
+    method: 'GET',
+    credentials: 'include',
+    headers: {
+      'Content-Type': 'application/json',
+      'Access-Control-Allow-Origin': homeUrl,
+    },
+  });
+
+  if (res.ok) {
+    return ((await res.json()) as { data: { login: string } }).data.login;
+  }
+
+  console.log('Got error', await res.json());
+  return 'None. User is not logged in, or something is wrong';
+};