finish login

backend/src/main.rs

@@ -45,7 +45,8 @@ fn router(config: &Config) -> Router {
         }))
         .layer(
             SessionManagerLayer::new(session_store)
-                .with_expiry(tower_sessions::Expiry::OnSessionEnd),
+                .with_expiry(tower_sessions::Expiry::OnSessionEnd)
+                .with_http_only(false),
         );
 
     let user_store: InMemorySessionStore<Uuid, BobUser> = InMemorySessionStore::default();

frontend/astro.config.mjs

@@ -1,14 +1,19 @@
 import { defineConfig } from 'astro/config';
 import react from '@astrojs/react';
 import tailwind from '@astrojs/tailwind';
+// import node from '@astrojs/node';
 
 // https://astro.build/config
 export default defineConfig({
+    // output: 'server',
     integrations: [
         react({
             experimentalReactChildren: true,
         }),
         tailwind(),
     ],
+    // adapter: node({
+    //     mode: 'standalone',
+    // }),
     outDir: './frontend',
 });

frontend/package.json

@@ -24,6 +24,7 @@
         "@mui/styled-engine-sc": "^6.0.0-alpha.7",
         "@mui/system": "^5.14.19",
         "@mui/x-data-grid": "^6.16.2",
+        "@nanostores/persistent": "^0.9.1",
         "@nanostores/react": "^0.7.1",
         "@playwright/test": "^1.40.0",
         "@types/material-ui": "^0.21.12",

frontend/src/components/Context.ts

@@ -1,7 +1,7 @@
-import { atom } from 'nanostores';
+import { persistentMap } from '@nanostores/persistent';
 
-export const Context = atom({
-    refreshTime: 60,
-    switcher: false,
-    loggedIn: false,
-} as Context);
+const context: Context = {
+    refreshTime: '1',
+    enabled: false,
+};
+export const Context = persistentMap<Context>('context', context);

frontend/src/components/common.ts

@@ -1,3 +1,4 @@
+export const cookieAuthId: string = 'id';
 type Valuable<T> = { [K in keyof T as T[K] extends null | undefined ? never : K]: T[K] };
 
 export function removeEmpty<
@@ -17,3 +18,19 @@ export function removeEmpty<
         ),
     ) as V;
 }
+
+export function getCookie(field: string) {
+    const entry = document.cookie.split(';').find((e) => e.replace(' ', '').startsWith(field + '='));
+    if (entry) {
+        return entry.split('=')[1];
+    } else {
+        return '';
+    }
+}
+
+export function eraseCookie(name: string) {
+    document.cookie = name + '=; Max-Age=-99999999;';
+}
+
+export const refreshTimes = ['1', '5', '15', '30'];
+export type RefreshTime = (typeof refreshTimes)[number];

frontend/src/components/login/Login.tsx

@@ -1,23 +1,19 @@
 import { removeEmpty } from '@components/common.ts';
-import { Context } from '@components/Context.ts';
 import defaultTheme from '@layouts/DefaultTheme.ts';
 import ThemeRegistry from '@layouts/ThemeRegistry.tsx';
 import { Alert, Box, Button, Grid, Snackbar, TextField } from '@mui/material';
-import { useStore } from '@nanostores/react';
 import BobLogo from 'public/logo.svg';
 import React, { type FormEvent, useState } from 'react';
 
 import style from './login.module.css';
 
 const LoginPage = ({ redirectTo }: { redirectTo: string }) => {
-    const context = useStore(Context);
     const [address, setAddress] = useState('');
     const [port, setPort] = useState('');
     const [username, setUsername] = useState('');
     const [password, setPassword] = useState('');
     const [openSnackbar, setOpenSnackbar] = useState(false);
     const [snackbarMessage, setSnackbarMessage] = useState('');
-    const setLoggedIn = useState(context.loggedIn)[1];
 
     const snackbarStyle = {
         top: '20%',
@@ -43,7 +39,6 @@ const LoginPage = ({ redirectTo }: { redirectTo: string }) => {
             ),
         });
         if (response.ok) {
-            setLoggedIn(true);
             location.assign(redirectTo);
         } else {
             setSnackbarMessage('Wrong data');

frontend/src/components/navbar/Navbar.tsx

@@ -1,3 +1,4 @@
+import { cookieAuthId, eraseCookie, getCookie, refreshTimes } from '@components/common.ts';
 import { Context } from '@components/Context.ts';
 import defaultTheme from '@layouts/DefaultTheme.ts';
 import { ExitToApp } from '@mui/icons-material';
@@ -18,16 +19,15 @@ import {
 } from '@mui/material';
 import { ThemeProvider } from '@mui/material/styles';
 import { useStore } from '@nanostores/react';
-// import { Image } from 'astro:assets';
 import BrandMark from 'public/brandmark.svg';
 import React, { useEffect, useState } from 'react';
+// import type { RefreshTimes } from '../../env.d.ts';
 
 const Navbar = ({ logoutRedirectTo }: { logoutRedirectTo: string }) => {
     const context = useStore(Context);
     const [value, setValue] = useState(0);
     const [refresh, setRefresh] = useState(context.refreshTime);
-    const [switchButton, setSwitchButton] = useState(context.switcher);
-    const [loggedIn, setLoggedIn] = useState(context.loggedIn);
+    const [switchButton, setSwitchButton] = useState(context.enabled);
 
     useEffect(() => {
         const path = window.location.pathname;
@@ -43,19 +43,24 @@ const Navbar = ({ logoutRedirectTo }: { logoutRedirectTo: string }) => {
     const updateContext = () => {
         Context.set({
             refreshTime: refresh,
-            switcher: switchButton,
-            loggedIn: loggedIn,
+            enabled: switchButton,
         });
     };
 
     const pathname = window.location.pathname.replace(/\/$/, '');
+    if (getCookie('id') === '' && pathname !== '/login') {
+        location.assign(logoutRedirectTo);
+    }
+
     if (pathname === '/login') {
         return <div></div>;
     }
 
     async function handleLogout() {
-        await fetch('/api/v1/logout');
-        setLoggedIn(false);
+        await fetch('/api/v1/logout', {
+            method: 'POST',
+        });
+        eraseCookie(cookieAuthId);
         location.assign(logoutRedirectTo);
     }
 
@@ -153,15 +158,15 @@ const Navbar = ({ logoutRedirectTo }: { logoutRedirectTo: string }) => {
                                 label="min"
                                 value={refresh}
                                 onChange={(e) => {
-                                    setRefresh(e.target.value as number);
+                                    setRefresh(e.target.value);
                                     updateContext();
                                 }}
                             >
-                                {/* NOTE: time in minutes */}
-                                <MenuItem value={1}>1</MenuItem>
-                                <MenuItem value={5}>5</MenuItem>
-                                <MenuItem value={15}>15</MenuItem>
-                                <MenuItem value={30}>30</MenuItem>
+                                {refreshTimes.map((val: string) => (
+                                    <MenuItem key={val} value={val}>
+                                        {val}
+                                    </MenuItem>
+                                ))}
                             </Select>
                         </FormControl>
                         <Box

frontend/src/env.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="astro/client" />
+/** Global App Context */
 type Context = {
-    refreshTime: number;
-    switcher: bool;
-    loggedIn: bool;
+    /** Refresh Time in minutes */
+    refreshTime: RefreshTime;
+    /** Is server must fetch data */
+    enabled: bool;
 };

frontend/src/layouts/Layout.astro

@@ -6,7 +6,6 @@ import ThemeRegistry from './ThemeRegistry.tsx';
 interface Props {
     title: string;
 }
-
 const { title } = Astro.props;
 ---
 

frontend/src/pages/index.astro

@@ -1,9 +1,6 @@
 ---
 import { Context } from '@components/Context.ts';
 import Layout from '../layouts/Layout.astro';
-if (!Context.value.loggedIn) {
-    return Astro.redirect('/login');
-}
 ---
 
 <Layout title="Welcome to Bob." />

frontend/yarn.lock

@@ -937,6 +937,11 @@
     prop-types "^15.8.1"
     reselect "^4.1.8"
 
+"@nanostores/persistent@^0.9.1":
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/@nanostores/persistent/-/persistent-0.9.1.tgz#e668c64431dee2c9d7a1b8f7ffc1e9c0806ac227"
+  integrity sha512-ow57Hxm5VMaI5GHET/cVk8hX/iKMmbhcGrB9owfN8p8OHiiJgUlYxe1giacwlAALJXAh2t8bxXh42hHb64BCEA==
+
 "@nanostores/react@^0.7.1":
   version "0.7.1"
   resolved "https://registry.yarnpkg.com/@nanostores/react/-/react-0.7.1.tgz#e0446f5cacc9fa53448c454f5d00ddb0f906a37a"