- Setting dark mode by default in the login window

- Providing better view of current build id and build environment for debugging - Added environment variables to set_env.sh so that they can be set during build
eu-nebulous · Aug 27, 2024 · 7a1d07c · 7a1d07c
1 parent f23390c
commit 7a1d07c
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 50 deletions.
diff --git a/gui/.env.docker b/gui/.env.docker
@@ -1,2 +1,4 @@
 VITE_API_URL=VITE_API_URL_PLACEHOLDER
-CFSB_API_URL=CFSB_API_URL_PLACEHOLDER
+VITE_CFSB_API_URL=VITE_CFSB_API_URL_PLACEHOLDER
+VITE_BUILD_ID=VITE_BUILD_ID_PLACEHOLDER
+VITE_CONTEXT=VITE_CONTEXT_PLACEHOLDER
diff --git a/gui/.env.production b/gui/.env.production
diff --git a/gui/index.html b/gui/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="dark">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />

diff --git a/gui/set_env.sh b/gui/set_env.sh
@@ -8,9 +8,15 @@ do
   echo "Setting VITE_API_URL_PLACEHOlDER environment variables ${VITE_API_URL}"
   sed -i 's|VITE_API_URL_PLACEHOLDER|'${VITE_API_URL}'|g' $file
 
-  echo "Setting CFSB_API_URL_PLACEHOLDER environment variables ${CFSB_API_URL}"
-  sed -i 's|CFSB_API_URL_PLACEHOLDER|'${CFSB_API_URL}'|g' $file
-  # Your other variables here...
+  echo "Setting VITE_CFSB_API_URL_PLACEHOLDER environment variables ${VITE_CFSB_API_URL}"
+  sed -i 's|VITE_CFSB_API_URL_PLACEHOLDER|'${VITE_CFSB_API_URL}'|g' $file
+
+  echo "Setting VITE_BUILD_ID_PLACEHOLDER environment variables ${VITE_BUILD_ID}"
+  sed -i 's|VITE_BUILD_ID_PLACEHOLDER|'${VITE_BUILD_ID}'|g' $file
+
+  echo "Setting VITE_CONTEXT_PLACEHOLDER environment variables ${VITE_CONTEXT}"
+  sed -i 's|VITE_CONTEXT_PLACEHOLDER|'${VITE_CONTEXT}'|g' $file
+
 done
 
 

diff --git a/gui/src/Master.vue b/gui/src/Master.vue
@@ -23,7 +23,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, Ref } from "vue"
+import {ref, watch, Ref, onMounted} from "vue"
 import { RouteLocationNormalizedLoaded, useRoute } from "vue-router"
 import { useUIStore } from "@/store/modules/ui.ts"
 import Header from "@/components/Header"
@@ -46,6 +46,4 @@ watch(
   },
   { deep: true }
 )
-
-
 </script>
diff --git a/gui/src/components/DebugInfo/DebugInfo.vue b/gui/src/components/DebugInfo/DebugInfo.vue
@@ -8,20 +8,18 @@
     </Menu.Button>
 
     <Menu.Items
-        class="w-56 mt-px relative bg-primary/80 before:block before:absolute before:bg-black before:inset-0 before:rounded-md before:z-[-1] text-white"
+        class="w-80 mt-px relative bg-primary/80 before:block before:absolute before:bg-black before:inset-0 before:rounded-md before:z-[-1] text-white"
     >
       <Menu.Header class="font-normal">
         <div class="font-medium">App Information</div>
       </Menu.Header>
       <Menu.Divider class="bg-white/[0.08]" />
-      <Menu.Item class="hover:bg-white/5">
-        <div class="dark:text-slate-300">
-          {{ backend }}<br/>
-          {{ environment }}<br/>
-          {{ build_id }}<br/>
-          {{ context }}<br/>
-        </div>
+      <Menu.Item>
+        <a class="block w-full bg-blend-color-dodge" :href="backend" target="_blank">Backend <Lucide class="inline-block w-4 h-4 align-text-bottom	" icon="ExternalLink"/></a>
       </Menu.Item>
+      <Menu.Item><strong>Environment</strong>: {{ environment }}</Menu.Item>
+      <Menu.Item><strong>Build</strong>: {{ build_id }}</Menu.Item>
+      <Menu.Item><strong>Context</strong>: {{ context }}</Menu.Item>
     </Menu.Items>
   </Menu>
 
@@ -30,11 +28,12 @@
 import {Menu} from "@/base-components/Headless";
 import Lucide from "@/base-components/Lucide";
 
+
 const backend = import.meta.env.VITE_API_URL
 const environment = import.meta.env.NODE_VERSION
-const build_id = import.meta.env.BUILD_ID
-const context = import.meta.env.CONTEXT
-
+const build_id = import.meta.env.VITE_BUILD_ID
+const context = import.meta.env.VITE_CONTEXT
 
+console.log(import.meta);
 
 </script>
diff --git a/gui/src/components/Header/Header.vue b/gui/src/components/Header/Header.vue
@@ -33,12 +33,7 @@
         <Breadcrumb.Link to="/">Application</Breadcrumb.Link>
         <Breadcrumb.Link to="/" :active="true"> Dashboard </Breadcrumb.Link>
       </Breadcrumb>
-      <!-- END: Breadcrumb -->
-      <!-- BEGIN: DARK -->
       <DebugInfo class="mr-4" />
-      <DarkModeSwitcher class="mr-4" />
-      <!-- END: DARK -->
-      <!-- BEGIN: Account Menu -->
       <Menu>
         <Menu.Button
           class="flex items-center justify-center bg-blue-400 w-8 h-8 overflow-hidden rounded-full shadow-lg image-fit zoom-in intro-x uppercase"
@@ -68,19 +63,15 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ComputedRef, ref } from "vue"
-import { useRouter } from "vue-router"
-import { useUserStore } from "@/store/modules/user.ts"
-import { TransitionRoot } from "@headlessui/vue"
-import _ from "lodash"
-import fakerData from "@/utils/faker.ts"
-import { IUser } from "@/interfaces/user.interface.ts"
+import {computed, ComputedRef, ref} from "vue"
+import {useRouter} from "vue-router"
+import {useUserStore} from "@/store/modules/user.ts"
+import {IUser} from "@/interfaces/user.interface.ts"
 import Lucide from "@/base-components/Lucide"
 import DarkModeSwitcher from "@/components/DarkModeSwitcher"
 import Breadcrumb from "@/base-components/Breadcrumb"
 import Logo from "@/base-components/Logo"
-import { FormInput } from "@/base-components/Form"
-import { Menu } from "@/base-components/Headless"
+import {Menu} from "@/base-components/Headless"
 import DebugInfo from "@/components/DebugInfo/DebugInfo.vue";
 
 const router = useRouter()

diff --git a/gui/src/containers/Login/index.vue b/gui/src/containers/Login/index.vue
@@ -21,14 +21,10 @@
       <div v-if="v$.password.$error" class="text-sm text-danger">{{ v$.password.$errors[0].$message }}</div>
     </div>
     <Button variant="primary" type="submit" class="w-full"> Login</Button>
-    <!-- <p class="text-right">
-        <a class="text-blue-600 text-sm font-light hover:underline"> Forgot Password? </a>
-      </p> -->
-
-    <div class="text-slate-200 dark:text-slate-800 text-center">
+    <div class="text-slate-200 dark:text-darkmode-500 text-center">
       {{ environment }} | {{ build_id }} | {{ context }}
     </div>
-    <div class="text-white dark:text-slate-800 text-center">
+    <div class="text-white dark:text-darkmode-500 text-center">
       {{ backend }}
     </div>
 
@@ -50,8 +46,11 @@ import { ICredentials } from "@/interfaces/user.interface.ts"
 const userStore = useUserStore()
 const backend = import.meta.env.VITE_API_URL
 const environment = import.meta.env.NODE_VERSION
-const build_id = import.meta.env.BUILD_ID
-const context = import.meta.env.CONTEXT
+const build_id = import.meta.env.VITE_CONTEXT
+const context = import.meta.env.VITE_BUILD_ID
+
+console.log(import.meta)
+
 const form = reactive<ICredentials>({
   username: "",
   password: ""

diff --git a/gui/src/store/modules/dark-mode.ts b/gui/src/store/modules/dark-mode.ts
@@ -10,17 +10,18 @@ export const useDarkModeStore = defineStore("darkMode", {
   }),
   getters: {
     darkMode(state) {
-      /* if (localStorage.getItem("darkMode") === null) {
-        localStorage.setItem("darkMode", "false")
-      }*/
+      console.log("State", state);
+      if (localStorage.getItem("darkMode") === null) {
+        localStorage.setItem("darkMode", "true")
+      }
 
-      return state.darkModeValue
+      return true
     }
   },
   actions: {
     setDarkMode(darkMode: boolean) {
-      // localStorage.setItem("darkMode", darkMode.toString())
-      this.darkModeValue = darkMode
+      console.log("State", darkMode);
+      localStorage.setItem("darkMode", darkMode.toString())
     }
   }
 })