feat: added vi settings usage

Author: Andreas H. Kelch

sources/app/src/App.vue

@@ -6,15 +6,60 @@
 import { onBeforeMount } from 'vue'
 import { RouterLink, RouterView } from 'vue-router'
 import { useAppStore } from './stores/app'
+import { useColorStore } from './stores/color'
 
 const appStore = useAppStore()
+const colorStore = useColorStore()
 
 onBeforeMount(() => {
   appStore.init()
 })
+
+function getPrimaryColor(lightness) {
+  return colorStore.getPrimaryColor(lightness)
+}
+
+function getSecondaryColor(lightness) {
+  return colorStore.getSecondaryColor(lightness)
+}
+
+function getPrimaryAlphaColor(lightness,alpha) {
+  return colorStore.getAlphaColor("primaryColor", lightness, alpha)
+}
+
+
 </script>
 
 <style scoped></style>
 <style lang="postcss">
 @import 'style/style.css';
+* {
+  --sl-color-primary-50: v-bind(getPrimaryColor(83));
+  --sl-color-primary-100: v-bind(getPrimaryColor(78));
+  --sl-color-primary-200: v-bind(getPrimaryColor(68));
+  --sl-color-primary-300: v-bind(getPrimaryColor(58));
+  --sl-color-primary-400: v-bind(getPrimaryColor(48));
+  --sl-color-primary-500: v-bind(getPrimaryColor(43));
+  --sl-color-primary-600: v-bind(getPrimaryColor(38));
+  --sl-color-primary-700: v-bind(getPrimaryColor(28));
+  --sl-color-primary-800: v-bind(getPrimaryColor(18));
+  --sl-color-primary-900: v-bind(getPrimaryColor(8));
+  --sl-color-primary-950: v-bind(getPrimaryColor(3));
+
+  --sl-color-secondary-50: v-bind(getSecondaryColor(60));
+  --sl-color-secondary-100: v-bind(getSecondaryColor(55));
+  --sl-color-secondary-200: v-bind(getSecondaryColor(45));
+  --sl-color-secondary-300: v-bind(getSecondaryColor(35));
+  --sl-color-secondary-400: v-bind(getSecondaryColor(25));
+  --sl-color-secondary-500: v-bind(getSecondaryColor(20));
+  --sl-color-secondary-600: v-bind(getSecondaryColor(15));
+  --sl-color-secondary-700: v-bind(getSecondaryColor(5));
+  --sl-color-secondary-800: v-bind(getSecondaryColor(0));
+  --sl-color-secondary-900: v-bind(getSecondaryColor(0));
+  --sl-color-secondary-950: v-bind(getSecondaryColor(0));
+
+  --sl-input-border-color-focus: var(--sl-color-primary-500);
+  --sl-input-focus-ring-color: v-bind(getPrimaryAlphaColor(43, 40));
+}
 </style>
+

sources/app/src/stores/app.js

@@ -3,21 +3,47 @@ import { useRouter } from 'vue-router'
 import { defineStore } from 'pinia'
 import { Request } from '@viur/vue-utils'
 import { useUserStore } from '@viur/vue-utils/login/stores/user'
+import { useColorStore } from '@/stores/color.js'
+
+
 
 export const useAppStore = defineStore('app', () => {
   const userStore = useUserStore()
+  const colorStore = useColorStore()
   const router = useRouter()
 
   const state = reactive({
     init: false,
-    name: 'TODO'
+    "admin.login.background": publicAsset("login-background.jpg"),
+    "admin.login.logo": publicAsset("logo.svg"),
+    "admin.color.primary": "",
+    "admin.color.secondary": ""
   })
 
   async function init() {
     Request.get('/vi/settings')
       .then(async (resp) => {
         let data = await resp.json()
 
+        for (const key in data) {
+          if (data[key] !== undefined || data[key] !== null) {
+            if (data[key].length > 0) {
+              if ((key.endsWith(".logo") || key.endsWith(".background")) && !key.startsWith("/")) {
+                state[key] = publicAsset(data[key])
+                continue
+              }
+              state[key] = data[key]
+            }
+            if (key === "admin.color.primary") {
+              colorStore.state.primaryColor = state[key]
+            }
+            if (key === "admin.color.secondary") {
+              colorStore.state.secondaryColor = state[key]
+            }
+          }
+        }
+
+
         if (data['admin.user.google.clientID']) {
           userStore.googleInit(data['admin.user.google.clientID']).catch(() => {
             throw new Error('clientId is required since the plugin is not initialized with a Client Id')
@@ -44,8 +70,21 @@ export const useAppStore = defineStore('app', () => {
     }
   )
 
+    function publicAsset(path, prefix = "app") {
+    if (import.meta.env.DEV) {
+      if(path.startsWith("/")){
+        return `${import.meta.env.VITE_API_URL}${path}`
+      }else{
+        return `${prefix}/${path}`
+      }
+
+    }
+    return path
+}
+
   return {
     state,
-    init
+    init,
+    publicAsset
   }
 })

sources/app/src/stores/color.js

@@ -0,0 +1,57 @@
+// @ts-nocheck
+import { reactive } from "vue"
+import { defineStore } from "pinia"
+
+export const useColorStore = defineStore("colorStore", () => {
+  const state = reactive({
+    primaryColor: "#d00f1c",
+    secondaryColor: "#333333"
+  })
+
+  function getPrimaryColor(lightness = 0) {
+    const [h,s,l] = colorConvert(state.primaryColor, lightness)
+    return "hsl(" + h + "," + s + "%," + l + "%)"
+  }
+  function getSecondaryColor(lightness = 0) {
+    const [h,s,l] = colorConvert(state.secondaryColor, lightness)
+    return "hsl(" + h + "," + s + "%," + l + "%)"
+  }
+  function colorConvert(hexColor, lightness) {
+    const r = parseInt("0x" + hexColor[1] + hexColor[2]) / 255
+    const g = parseInt("0x" + hexColor[3] + hexColor[4]) / 255
+    const b = parseInt("0x" + hexColor[5] + hexColor[6]) / 255
+
+    const cmin = Math.min(r, g, b)
+    const cmax = Math.max(r, g, b)
+    const delta = cmax - cmin
+    let h
+    let s
+    let l
+
+    if (delta == 0) h = 0
+    else if (cmax == r) h = ((g - b) / delta) % 6
+    else if (cmax == g) h = (b - r) / delta + 2
+    else h = (r - g) / delta + 4
+
+    h = Math.round(h * 60)
+
+    if (h < 0) h += 360
+
+    l = (cmax + cmin) / 2
+    s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1))
+    s = +(s * 100).toFixed(1)
+    l = +(l * 100).toFixed(1)
+    if (lightness) {
+      l = lightness
+    }
+    return [h,s,l]
+
+  }
+
+  function getAlphaColor(color, lightness, alpha){
+    const [h,s,l] = colorConvert(state[color], lightness)
+    return "hsla(" + h + "," + s + "%," + l + "% , "+ alpha +"%)"
+  }
+
+  return { state, getPrimaryColor, getSecondaryColor, getAlphaColor }
+})

sources/app/src/views/LoginView.vue

@@ -1,10 +1,13 @@
 <template>
   <the-login-screen
-    logo="/app/logo.svg"
-    backgroundImage="/app/login-background.jpg"
+    :background-image="appStore.state['admin.login.background']"
+    :logo="appStore.state['admin.login.logo']"
   ></the-login-screen>
 </template>
 
 <script setup>
 import TheLoginScreen from '@viur/vue-utils/login/TheLoginScreen.vue'
+import {useAppStore} from "@/stores/app.js"
+const appStore = useAppStore()
+
 </script>