Introduce useInstanceConfig

web/src/hooks/useInstanceConfig.ts

@@ -0,0 +1,46 @@
+import { useLocation, useRouter } from '@tanstack/react-router';
+import { useEffect } from 'react';
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+type InstanceConfig = {
+    instance_url: string;
+};
+
+const useInstanceConfigStore = create<InstanceConfig>()(
+    persist(
+        (set, _get) => ({
+            instance_url: '',
+        }),
+        {
+            name: 'instance-config',
+        }
+    )
+);
+
+type UseInstanceConfigProperties = {
+    shouldRedirect?: boolean;
+};
+
+export const useInstanceConfig = ({
+    shouldRedirect = false,
+}: UseInstanceConfigProperties = {}) => {
+    const router = useRouter();
+    const location = useLocation();
+    const instanceConfig = useInstanceConfigStore();
+
+    useEffect(() => {
+        if (shouldRedirect && !instanceConfig.instance_url) {
+            const currentPath = location.href;
+
+            router.navigate({
+                to: '/configure/instance',
+                search: {
+                    to: currentPath,
+                },
+            });
+        }
+    }, [shouldRedirect, instanceConfig.instance_url, router]);
+
+    return instanceConfig;
+};

web/src/routeTree.gen.ts

@@ -15,11 +15,14 @@ import { createFileRoute } from '@tanstack/react-router'
 import { Route as rootRoute } from './routes/__root'
 import { Route as MailIndexImport } from './routes/$mail/index'
 import { Route as LoginLayoutImport } from './routes/login/_layout'
+import { Route as ConfigureLayoutImport } from './routes/configure/_layout'
 import { Route as LoginLayoutIndexImport } from './routes/login/_layout.index'
+import { Route as ConfigureInstanceIndexImport } from './routes/configure/instance/index'
 
 // Create Virtual Routes
 
 const LoginImport = createFileRoute('/login')()
+const ConfigureImport = createFileRoute('/configure')()
 const DebugLazyImport = createFileRoute('/debug')()
 const IndexLazyImport = createFileRoute('/')()
 const LoginLayoutCreateLazyImport = createFileRoute('/login/_layout/create')()
@@ -31,6 +34,11 @@ const LoginRoute = LoginImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
+const ConfigureRoute = ConfigureImport.update({
+  path: '/configure',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const DebugLazyRoute = DebugLazyImport.update({
   path: '/debug',
   getParentRoute: () => rootRoute,
@@ -51,11 +59,21 @@ const LoginLayoutRoute = LoginLayoutImport.update({
   getParentRoute: () => LoginRoute,
 } as any)
 
+const ConfigureLayoutRoute = ConfigureLayoutImport.update({
+  id: '/_layout',
+  getParentRoute: () => ConfigureRoute,
+} as any)
+
 const LoginLayoutIndexRoute = LoginLayoutIndexImport.update({
   path: '/',
   getParentRoute: () => LoginLayoutRoute,
 } as any)
 
+const ConfigureInstanceIndexRoute = ConfigureInstanceIndexImport.update({
+  path: '/instance/',
+  getParentRoute: () => ConfigureRoute,
+} as any)
+
 const LoginLayoutCreateLazyRoute = LoginLayoutCreateLazyImport.update({
   path: '/create',
   getParentRoute: () => LoginLayoutRoute,
@@ -81,6 +99,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof DebugLazyImport
       parentRoute: typeof rootRoute
     }
+    '/configure': {
+      id: '/configure'
+      path: '/configure'
+      fullPath: '/configure'
+      preLoaderRoute: typeof ConfigureImport
+      parentRoute: typeof rootRoute
+    }
+    '/configure/_layout': {
+      id: '/configure/_layout'
+      path: '/configure'
+      fullPath: '/configure'
+      preLoaderRoute: typeof ConfigureLayoutImport
+      parentRoute: typeof ConfigureRoute
+    }
     '/login': {
       id: '/login'
       path: '/login'
@@ -109,6 +141,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LoginLayoutCreateLazyImport
       parentRoute: typeof LoginLayoutImport
     }
+    '/configure/instance/': {
+      id: '/configure/instance/'
+      path: '/instance'
+      fullPath: '/configure/instance'
+      preLoaderRoute: typeof ConfigureInstanceIndexImport
+      parentRoute: typeof ConfigureImport
+    }
     '/login/_layout/': {
       id: '/login/_layout/'
       path: '/'
@@ -124,6 +163,7 @@ declare module '@tanstack/react-router' {
 export const routeTree = rootRoute.addChildren({
   IndexLazyRoute,
   DebugLazyRoute,
+  ConfigureRoute: ConfigureRoute.addChildren({ ConfigureInstanceIndexRoute }),
   LoginRoute: LoginRoute.addChildren({
     LoginLayoutRoute: LoginLayoutRoute.addChildren({
       LoginLayoutCreateLazyRoute,
@@ -143,6 +183,7 @@ export const routeTree = rootRoute.addChildren({
       "children": [
         "/",
         "/debug",
+        "/configure",
         "/login",
         "/$mail/"
       ]
@@ -153,6 +194,17 @@ export const routeTree = rootRoute.addChildren({
     "/debug": {
       "filePath": "debug.lazy.tsx"
     },
+    "/configure": {
+      "filePath": "configure",
+      "children": [
+        "/configure/_layout",
+        "/configure/instance/"
+      ]
+    },
+    "/configure/_layout": {
+      "filePath": "configure/_layout.tsx",
+      "parent": "/configure"
+    },
     "/login": {
       "filePath": "login",
       "children": [
@@ -174,6 +226,10 @@ export const routeTree = rootRoute.addChildren({
       "filePath": "login/_layout.create.lazy.tsx",
       "parent": "/login/_layout"
     },
+    "/configure/instance/": {
+      "filePath": "configure/instance/index.tsx",
+      "parent": "/configure"
+    },
     "/login/_layout/": {
       "filePath": "login/_layout.index.tsx",
       "parent": "/login/_layout"

web/src/routes/configure/_layout.tsx

@@ -0,0 +1,10 @@
+import { createFileRoute, Outlet } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/configure/_layout')({
+    component: () => (
+        <div className="p-2 w-full h-full">
+            <h1 className="h2">Configuration</h1>
+            <Outlet />
+        </div>
+    ),
+});

web/src/routes/configure/instance/index.tsx

@@ -0,0 +1,5 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/configure/instance/')({
+    component: () => <div>Hello /configure/instance/!</div>,
+});

web/src/routes/login/_layout.tsx

@@ -1,11 +1,17 @@
 import { createFileRoute, Outlet } from '@tanstack/react-router';
 
+import { useInstanceConfig } from '../../hooks/useInstanceConfig';
+
 export const Route = createFileRoute('/login/_layout')({
-    component: () => (
-        <div className="p-2 w-full h-full flex justify-center pt-4 md:pt-32">
-            <div className="border p-4 rounded-lg h-fit space-y-2 w-full max-w-md">
-                <Outlet />
+    component: () => {
+        const instanceConfig = useInstanceConfig({ shouldRedirect: true });
+
+        return (
+            <div className="p-2 w-full h-full flex justify-center pt-4 md:pt-32">
+                <div className="border p-4 rounded-lg h-fit space-y-2 w-full max-w-md">
+                    <Outlet />
+                </div>
             </div>
-        </div>
-    ),
+        );
+    },
 });

web/vite.config.ts

@@ -1,16 +1,16 @@
 import { TanStackRouterVite } from '@tanstack/router-plugin/vite';
 import react from '@vitejs/plugin-react';
-import { readFileSync } from 'node:fs';
+// import { readFileSync } from 'node:fs';
 import { defineConfig } from 'vite';
 
 // https://vitejs.dev/config/
 export default defineConfig({
     plugins: [TanStackRouterVite(), react()],
     server: {
-        https: {
-            key: readFileSync('./certs/tailscale.key'),
-            cert: readFileSync('./certs/tailscale.cert'),
-        },
+        // https: {
+        //     key: readFileSync('./certs/tailscale.key'),
+        //     cert: readFileSync('./certs/tailscale.cert'),
+        // },
         proxy: {
             '/api': {
                 target: 'http://localhost:3000',