Added documentation page

Reviewed-on: #52

ui/src/App.vue

@@ -22,18 +22,20 @@ const environment = import.meta.env.VITE_ENVIRONMENT;
 
 <template>
   <div class="flex flex-col min-h-screen">
-    <Navbar class="flex"></Navbar>
+    <div class="sticky top-0 bg-background z-50">
-    <Alert v-if="environment == 'dev'" class="m-2 mx-auto w-5xl" variant="info">
+      <Navbar class="flex"></Navbar>
-      <AlertDescription class="flex flex-row items-center text-nowrap gap-5 mx-auto">
+      <Alert v-if="environment == 'dev'" class="m-2 mx-auto w-5xl" variant="info">
-        <p>This is a development build of the application. Some features will be unavailable or unstable.</p>
+        <AlertDescription class="flex flex-row items-center text-nowrap gap-5 mx-auto">
-      </AlertDescription>
+          <p>This is a development build of the application. Some features will be unavailable or unstable.</p>
-    </Alert>
+        </AlertDescription>
-    <Alert v-if="userStore.user?.loa?.[0]" class="m-2 mx-auto w-5xl" variant="info">
+      </Alert>
-      <AlertDescription class="flex flex-row items-center text-nowrap gap-5 mx-auto">
+      <Alert v-if="userStore.user?.loa?.[0]" class="m-2 mx-auto w-5xl" variant="info">
-        <p>You are on LOA until <strong>{{ formatDate(userStore.user?.loa?.[0].end_date) }}</strong></p>
+        <AlertDescription class="flex flex-row items-center text-nowrap gap-5 mx-auto">
-        <Button variant="secondary">End LOA</Button>
+          <p>You are on LOA until <strong>{{ formatDate(userStore.user?.loa?.[0].end_date) }}</strong></p>
-      </AlertDescription>
+          <Button variant="secondary">End LOA</Button>
-    </Alert>
+        </AlertDescription>
+      </Alert>
+    </div>
 
     <RouterView class="flex-1 min-h-0"></RouterView>
   </div>

ui/src/components/Navigation/Navbar.vue

@@ -61,7 +61,7 @@ function blurAfter() {
                             <!-- Members -->
                             <NavigationMenuItem>
                                 <NavigationMenuLink as-child :class="navigationMenuTriggerStyle()">
-                                    <RouterLink to="/" @click="blurAfter">Documents</RouterLink>
+                                    <RouterLink to="/documents" @click="blurAfter">Documents</RouterLink>
                                 </NavigationMenuLink>
                             </NavigationMenuItem>
 

ui/src/components/application/ApplicationForm.vue

@@ -82,7 +82,7 @@ onMounted(() => {
         <FormControl>
           <DateInput :model-value="(value as string) ?? ''" :disabled="readOnly" @update:model-value="handleChange" />
         </FormControl>
-        <FormMessage />
+        <FormMessage class="text-destructive"/>
       </FormItem>
     </FormField>
 

ui/src/pages/Documentation.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+
+</script>
+
+<template>
+    <div>
+        Alo
+        <iframe src="https://docs.iceberg-gaming.com/" ></iframe>
+    </div>
+</template>

ui/src/pages/Join.vue

@@ -116,7 +116,7 @@ const finalPanel = ref<'app' | 'message'>('message');
         </div>
 
         <!-- Content -->
-        <div class="mt-12 mb-20 flex w-full justify-center">
+        <div class="mt-12 mb-20 flex w-full max-w-6xl justify-center">
             <div v-if="currentStep === 1" class="w-full max-w-2xl p-8">
                 <h1 class="text-3xl sm:text-4xl font-bold mb-4 text-left">
                     Create your account
@@ -133,7 +133,7 @@ const finalPanel = ref<'app' | 'message'>('message');
             </div>
             <Application v-else-if="currentStep === 2" @submit="userStore.loadUser()" :mode="'create'"></Application>
             <Application v-else-if="currentStep === 3" :mode="'view-self'"></Application>
-            <div v-if="currentStep === 5" class="w-full max-w-4xl p-8 pt-0">
+            <div v-if="currentStep === 5" class="w-full p-8 pt-0">
                 <div class="mb-5">
                     <div class="flex w-min *:px-10 pt-2 border-b *:w-full *:text-center *:pb-1 *:cursor-pointer">
                         <label :class="finalPanel === 'message' ? 'border-b-3 border-foreground' : 'mb-[2px]'"

ui/src/pages/Unauthorized.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="min-h-screen flex flex-col items-center justify-center text-center px-6">
+    <div class="flex flex-col items-center justify-center text-center px-6">
         <h1 class="text-5xl font-bold mb-4">Unauthorized</h1>
         <p class="text-lg text-muted-foreground max-w-md mb-6">
             You don't have permission to access this page.

ui/src/router/index.js

@@ -19,6 +19,8 @@ const router = createRouter({
     { path: '/calendar', component: () => import('@/pages/Calendar.vue'), meta: { requiresAuth: true, memberOnly: true }, },
     { path: '/calendar/event/:id', component: () => import('@/pages/Calendar.vue'), meta: { requiresAuth: true, memberOnly: true }, },
 
+    { path: '/documents', component: () => import('@/pages/Documentation.vue'), meta: { requiresAuth: true, memberOnly: true }, },
+    
     { path: '/trainingReport', component: () => import('@/pages/TrainingReport.vue'), meta: { requiresAuth: true, memberOnly: true } },
     { path: '/trainingReport/new', component: () => import('@/pages/TrainingReport.vue'), meta: { requiresAuth: true, memberOnly: true } },
     { path: '/trainingReport/:id', component: () => import('@/pages/TrainingReport.vue'), meta: { requiresAuth: true, memberOnly: true } },