feat(frontend): auth work

apiDocs/lstV2/Auth/getUserroles.bru

@@ -11,5 +11,5 @@ get {
 }
 
 auth:bearer {
-  token: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7InVzZXJfaWQiOiIyYzYzODQ3Zi1mMWVjLTRkNTAtOGFkMi05ODBkMWYzZTgwZWIiLCJ1c2VybmFtZSI6Im1hdHRoZXMwMSIsImVtYWlsIjoiYmxha2UubWF0dGhlc0BhbHBsYS5jb20iLCJyb2xlcyI6W10sInJvbGUiOiJ1c2VyIn0sImlhdCI6MTc0MDY3NTMyMiwiZXhwIjoxNzQwNjc4OTIyfQ.D4rLIBAZfo0larMGUmXF6Z2KVnZvRLvth2116JyK2z8
+  token: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7InVzZXJfaWQiOiIyYzYzODQ3Zi1mMWVjLTRkNTAtOGFkMi05ODBkMWYzZTgwZWIiLCJ1c2VybmFtZSI6Im1hdHRoZXMwMSIsImVtYWlsIjoiYmxha2UubWF0dGhlc0BhbHBsYS5jb20iLCJyb2xlcyI6W10sInJvbGUiOiJ1c2VyIn0sImlhdCI6MTc0MDg2ODMzNCwiZXhwIjoxNzQwODcxOTM0fQ.HpPh56_8API25IeO5FSfYSvAqf97_tKUT_GEBqbggO0
 }

frontend/eslint.config.js

@@ -1,28 +1,26 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
 
 export default tseslint.config(
-  { ignores: ['dist'] },
-  {
-    extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-    plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
-    },
-    rules: {
-      ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
-        { allowConstantExport: true },
-      ],
-    },
-  },
-)
+    {ignores: ["dist"]},
+    {
+        extends: [js.configs.recommended, ...tseslint.configs.recommended],
+        files: ["**/*.{ts,tsx}"],
+        languageOptions: {
+            ecmaVersion: 2020,
+            globals: globals.browser,
+        },
+        plugins: {
+            "react-hooks": reactHooks,
+            "react-refresh": reactRefresh,
+        },
+        rules: {
+            ...reactHooks.configs.recommended.rules,
+            "react-refresh/only-export-components": ["warn", {allowConstantExport: true}],
+            "no-console": ["error", {allow: ["warn", "error"]}],
+        },
+    }
+);

frontend/package-lock.json

@@ -23,6 +23,7 @@
                 "@tanstack/react-router": "^1.111.11",
                 "class-variance-authority": "^0.7.1",
                 "clsx": "^2.1.1",
+                "dotenv": "^16.4.7",
                 "hono": "^4.7.2",
                 "js-cookie": "^3.0.5",
                 "jsonwebtoken": "^9.0.2",
@@ -3552,6 +3553,18 @@
                 "node": ">=0.3.1"
             }
         },
+        "node_modules/dotenv": {
+            "version": "16.4.7",
+            "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.7.tgz",
+            "integrity": "sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==",
+            "license": "BSD-2-Clause",
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://dotenvx.com"
+            }
+        },
         "node_modules/ecdsa-sig-formatter": {
             "version": "1.0.11",
             "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",

frontend/package.json

@@ -26,6 +26,7 @@
         "@tanstack/react-router": "^1.111.11",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "dotenv": "^16.4.7",
         "hono": "^4.7.2",
         "js-cookie": "^3.0.5",
         "jsonwebtoken": "^9.0.2",

frontend/src/components/auth/LoginForm.tsx

@@ -26,7 +26,7 @@ const LoginForm = () => {
             // }
 
             const data = await response.json();
-            console.log("Response", data.data);
+            // console.log("Response", data.data);
             // Store token in localStorage
             localStorage.setItem("auth_token", data.data.token);
 
@@ -41,6 +41,7 @@ const LoginForm = () => {
             setUsername("");
             setPassword("");
         } catch (err) {
+            console.error(err);
             setError("Invalid credentials");
         }
     };

frontend/src/components/providers/Providers.tsx

@@ -1,17 +1,17 @@
 import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
 import {useModuleStore} from "../../lib/store/useModuleStore";
 import {useEffect} from "react";
-import {useGetUserRoles} from "@/lib/store/useGetRoles";
+//import {useGetUserRoles} from "@/lib/store/useGetRoles";
 
 const queryClient = new QueryClient();
 
 export const SessionProvider = ({children}: {children: React.ReactNode}) => {
     const {fetchModules} = useModuleStore();
-    const {fetchUserRoles} = useGetUserRoles();
+    //const {fetchUserRoles} = useGetUserRoles();
 
     useEffect(() => {
         fetchModules();
-        fetchUserRoles();
+        //fetchUserRoles();
     }, []);
     return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
 };

frontend/src/routes/index.tsx

@@ -1,5 +1,5 @@
 import {createFileRoute} from "@tanstack/react-router";
-import GridLayout from "react-grid-layout";
+//import GridLayout from "react-grid-layout";
 import "../../node_modules/react-grid-layout/css/styles.css";
 import "../../node_modules/react-resizable/css/styles.css";
 
@@ -32,7 +32,7 @@ function Index() {
     return (
         <>
             {/* <AddCards addCard={addCard} cards={cards} /> */}
-            <GridLayout className="layout" cols={12} rowHeight={30} width={window.innerWidth}>
+            {/* <GridLayout className="layout" cols={12} rowHeight={30} width={window.innerWidth}>
                 <div className="bg-blue-400" key="a" data-grid={{x: 0, y: 0, w: 1, h: 2, static: true}}>
                     a
                 </div>
@@ -42,7 +42,10 @@ function Index() {
                 <div className="bg-blue-400" key="c" data-grid={{x: 4, y: 0, w: 1, h: 2}}>
                     c
                 </div>
-            </GridLayout>
+            </GridLayout> */}
+            <div className="m-auto">
+                <span>Empty Space why dont you add some cards?</span>
+            </div>
         </>
     );
 }

frontend/vite.config.ts

@@ -4,6 +4,10 @@ import tailwindcss from "@tailwindcss/vite";
 import {TanStackRouterVite} from "@tanstack/router-plugin/vite";
 import path from "path";
 
+import dotenv from "dotenv";
+import {fileURLToPath} from "url";
+dotenv.config({path: path.resolve(path.dirname(fileURLToPath(import.meta.url)), "../.env")});
+
 // https://vite.dev/config/
 export default defineConfig({
     plugins: [react(), tailwindcss(), TanStackRouterVite({target: "react", autoCodeSplitting: true})],
@@ -14,7 +18,7 @@ export default defineConfig({
     },
     server: {
         proxy: {
-            "/api": {target: `http://localhost:4400`, changeOrigin: true},
+            "/api": {target: `http://localhost:${Number(process.env.VITE_SERVER_PORT || 4400)}`, changeOrigin: true},
         },
     },
 });