ci: Stage blocking changes

24 files changed, 207 insertions, 139 deletions

diff --git a/back-end/src/Content.Publishing.Blog.Admin.csproj b/back-end/src/Content.Publishing.Blog.Admin.csproj
index 9c446af..1e55a31 100644
--- a/back-end/src/Content.Publishing.Blog.Admin.csproj
+++ b/back-end/src/Content.Publishing.Blog.Admin.csproj
@@ -33,10 +33,10 @@
   </ItemGroup>
 
   <ItemGroup>
-    <PackageReference Include="FluentFTP" Version="49.0.1" />
-    <PackageReference Include="Minio" Version="6.0.1" />
-    <PackageReference Include="VNLib.Plugins.Extensions.Loading" Version="0.1.0-ci0049" />
-    <PackageReference Include="VNLib.Plugins.Extensions.Validation" Version="0.1.0-ci0049" />
+    <PackageReference Include="FluentFTP" Version="50.0.1" />
+    <PackageReference Include="Minio" Version="6.0.2" />
+    <PackageReference Include="VNLib.Plugins.Extensions.Loading" Version="0.1.0-ci0064" />
+    <PackageReference Include="VNLib.Plugins.Extensions.Validation" Version="0.1.0-ci0064" />
   </ItemGroup>
 
   <ItemGroup>
diff --git a/ci/config/Essentials.Accounts.json b/ci/config/Essentials.Accounts.json
index b28caf4..a5756b0 100644
--- a/ci/config/Essentials.Accounts.json
+++ b/ci/config/Essentials.Accounts.json
@@ -68,6 +68,9 @@
     "otp_time_diff_sec": 30,
     "otp_key_size": 64,
     "pubkey_cookie_name": "client-id",
-    "pubkey_signing_key_size": 32
+    "pubkey_signing_key_size": 32,
+    "strict_origin": false,
+    "strict_path": true,  //Can be enabled if front-end is running on the same server
+    //"allowed_origins": [""]
   }
 }
\ No newline at end of file
diff --git a/ci/config/SessionProvider.json b/ci/config/SessionProvider.json
index a578b0d..5573a05 100644
--- a/ci/config/SessionProvider.json
+++ b/ci/config/SessionProvider.json
@@ -10,12 +10,16 @@
     //Cache system key prefix
     "cache_prefix": "websessions",
     //The session cookie name
-    "cookie_name": "VNSession",
+    "cookie_name": "cmnext-ses",
     //Size in bytes for generated session ids
     "cookie_size": 40,
     //time (in seconds) a session is valid for
     "valid_for_sec": 3600,
     //The maxium number of connections waiting for the cache server responses
-    "max_waiting_connections": 100
+    "max_waiting_connections": 100,
+    //Enforce strict cross-origin session checks
+    "strict_cors": true,
+    ///Enforces strict TLS to help prevent tls downgrades based on stored session variables (privacy note: this can be leaked through brute-forced if session id is stolen)
+    "strict_tls_protocol": true
   } 
 }
\ No newline at end of file
diff --git a/ci/config/config.json b/ci/config/config.json
index b410399..29a0665 100644
--- a/ci/config/config.json
+++ b/ci/config/config.json
@@ -37,7 +37,13 @@
   },
 
   //Path to managed compressor library
-  "compression_lib": null,
+  "compression_lib": "lib/vnlib.net.compression/VNLib.Net.Compression.dll",
+
+  //Setup the native lib
+  "vnlib.net.compression": {
+    "lib_path": "lib/vnlib_compress.dll",
+    "level": 1
+  },
 
   //Maximum ammount of time a request is allowed to be processed (includes loading or waiting for sessions) before operations will be cancelled and a 503 returned
   "max_execution_time_ms": 20000,
@@ -45,6 +51,9 @@
   //Collection of objects to define hosts+interfaces to build server listeners from
   "virtual_hosts": [
     {
+      //Enable nginx-style connection tracing for this endpoint
+      "trace": false,
+
       //The interface to bind to, you may not mix TLS and non-TLS connections on the same interface
       "interface": {
         "address": "0.0.0.0",
@@ -78,6 +87,7 @@
         "X-Content-Type-Options": "nosniff",
         "X-Xss-Protection": "1; mode=block",
         "X-Frame-Options": "DENY",
+        "Server": "VNLib.Webserver",
         "Content-Security-Policy": "default-src 'self' https://cdn.ckeditor.com 'unsafe-inline'; img-src 'self' blob: data:; frame-src 'none'; object-src 'none'; referrer no-referrer-when-downgrade; upgrade-insecure-requests; block-all-mixed-content;"
       },
 
@@ -88,30 +98,23 @@
       //"cors_allowed_authority": [ "localhost:8080" ],
 
       //Define a TLS certificate (enables TLS on the interface)
-      "disabled ssl": {
+      "ssl": {
 
         //Cert may be pem or pfx (include private key in pfx, or include private key in a pem file)
-        "cert": "/path/to/cert.pfx|pem",
+        "cert": "ssl/cert.pem",
 
         //A pem encoded private key, REQUIRED if using a PEM certificate, may be encrypted with a password
-        "privkey": "/path/to/private_key.pem",
+        "privkey": "ssl/key.pem",
 
         //An optional password for the ssl private key
-        "password": "plain-text-password",
+        //"password": "plain-text-password",
 
         //requires that any client connecting to this host present a valid certificate
         "client_cert_required": false
       },
 
       //A list of error file objects, files are loaded into memory (and watched for changes) and returned when the specified error code occurs
-      "error_files": [
-        /*
-        {
-          "code": 404,
-          "path": "404.html"
-        },
-        */
-      ],
+      "error_files": [],
 
       //The default 
       "cache_default_sec": 864000
@@ -125,59 +128,55 @@
     "hot_reload": false,
     "reload_delay_sec": 2,
     "path": "plugins",
-    "config_dir": "config"
+    "config_dir": "config",
+    "assets": "plugins/assets/"
   },
 
-  "disabled sys_log": {
-    //"path": "path/to/syslog/file",
+  "sys_log": {
+   "path": "data/logs/syslog.txt",
     //"template": "serilog template for writing to file",
-    //"flush_sec": 5,
-    //"retained_files": 31,
-    //"file_size_limit": 10485760,
-    //"interval": "infinite"
+    "flush_sec": 5,
+    "retained_files": 10,
+    "file_size_limit": 10485760,
+    "interval": "infinite"
   },
 
   "disabled app_log": {
-    //"path": "path/to/applog/file",
+    "path": "data/logs/applog.txt",
     //"template": "serilog template for writing to file",
-    //"flush_sec": 5,
-    //"retained_files": 31,
-    //"file_size_limit": 10485760,
-    //"interval": "infinite"
+    "flush_sec": 5,
+    "retained_files": 10,
+    "file_size_limit": 10485760,
+    "interval": "infinite"
   },
 
   //Sql for the users database
   "sql": {
-    "db_type": "sqlite", //mysql, mssql(default), sqlite
-    "source": "cmnext.db" //For sqlite only
-
-    //"hostname": "example.com",
-    //"username": "cmnext",
-    //"catalog": "cmnext",
-    //"min_pool_size": 5,
-    //"ms_security": false
+    "debug": false,
+    "provider": "VNLib.Plugins.Extensions.Sql.SQLite.dll",
+    "source": "data/cmnext.db" //For sqlite only 
   },
 
   //caching should be setup globally after VNCache #78a47dd
-  "cache":{
+  "cache": {
     //Load the vncache dll
     "assembly_name": "VNLib.Data.Caching.Providers.VNCache.dll",
     //Defaulting to memory only for now
     "memory_only": true,
     //enable memory cache
     "memory_cache": {
-        "buckets": 20,
-        "bucket_size": 5000,
-        "max_age_sec": 600,
-        "refresh_interval_sec": 60,
-        "zero_all": false,
-        "max_object_size": 8128
+      "buckets": 20,
+      "bucket_size": 5000,
+      "max_age_sec": 600,
+      "refresh_interval_sec": 60,
+      "zero_all": false,
+      "max_object_size": 8128
     }
   },
 
   //Global secrets object, used by the host and pluings for a specialized secrets
   "secrets": {
     //"db_password": ""
-    "passwords": "yourbase64passwordsecret"
+    "passwords": "file://secrets/password-pepper.json"
   }
 }
diff --git a/ci/config/routes.xml b/ci/config/routes.xml
index 49d9553..85f9830 100644
--- a/ci/config/routes.xml
+++ b/ci/config/routes.xml
@@ -26,19 +26,21 @@
     <path>/assets/*</path>
   </route>
 
-  <!--Overwrite all other requests to the index file (catch all) using the ServeOther routine (4)-->
+  <!--Show the index file when navigating to /-->
   <route routine="4" privilege="0">
-
-    <!--Wildcard hostname-->
     <hostname>*</hostname>
+    <path>/</path>
+    <alternate>index.html</alternate>
+  </route>
 
-    <!--Declares that all files after / will be matched by this rule-->
+  <!--Redirect all other pages back to the app (homepage)-->
+  <route routine="2" privilege="0">
+    <hostname>*</hostname>
     <path>/*</path>
-
-    <!--Return to the root path, lets the file processor handle extension searching-->
     <alternate>/</alternate>
   </route>
 
+
   <!--All routes that do not match will be allowed, this is only / since it does not have a matching rule-->
 
 </routes>
\ No newline at end of file
diff --git a/ci/install.ps1 b/ci/install.ps1
index 4c42c18..7a5c455 100644
--- a/ci/install.ps1
+++ b/ci/install.ps1
@@ -1,15 +1,12 @@
-param([String] $BaseUrl, [String] $ModuleName, [String] $ProjectName, [String]$FileName)
+param([String] $BaseUrl, [String] $ModuleName, [String] $ProjectName, [String]$FileName, [String]$Version)
 
-#get the latest file
-Invoke-WebRequest "$BaseUrl/$ModuleName/@latest" -OutFile latest.txt
-#read the file into a variable
-$latest = Get-Content latest.txt
+$_src = "$BaseUrl/$ModuleName/$Version/$ProjectName/$FileName"
 
 #download the latest version
-Invoke-WebRequest "$BaseUrl/$ModuleName/$latest/$ProjectName/$FileName" -OutFile $FileName
+Invoke-WebRequest "$_src" -OutFile $FileName
 
 #download latest sha256
-Invoke-WebRequest "$BaseUrl/$ModuleName/$latest/$ProjectName/$FileName.sha256" -OutFile "$FileName.sha256"
+Invoke-WebRequest "$_src.sha256" -OutFile "$FileName.sha256"
 
 #verify the file
 $hash = (Get-FileHash $FileName -Algorithm SHA256).Hash
diff --git a/front-end/src/App.vue b/front-end/src/App.vue
index 2f29fde..ecd9d73 100644
--- a/front-end/src/App.vue
+++ b/front-end/src/App.vue
@@ -3,7 +3,7 @@
     <title>{{ metaTile }}</title>
   </head>
   <!-- Import environment component top level as the entrypoint -->
-  <Environment @logout="logout">
+  <Environment @logout="logout()">
     <template #main>
       <router-view />
     </template>
@@ -14,8 +14,8 @@
 import { computed } from 'vue';
 import { useStore } from './store';
 import { storeToRefs } from 'pinia';
-import Environment from './bootstrap/Environment.vue';
 import { apiCall } from '@vnuge/vnlib.browser';
+import Environment from './bootstrap/Environment.vue';
 
 const store = useStore()
 const { siteTitle, pageTitle } = storeToRefs(store)
diff --git a/front-end/src/assets/main.scss b/front-end/src/assets/main.scss
index 168a034..d4a86e7 100644
--- a/front-end/src/assets/main.scss
+++ b/front-end/src/assets/main.scss
@@ -1,4 +1,4 @@
-#footer-content .footer-lower{
+#footer-content .footer-lower {
     @apply hidden;
 }
 
@@ -15,4 +15,8 @@
     background: -moz-linear-gradient(bottom right, #98E4C8, #2C6BC3);
     background: linear-gradient(to top left, #98E4C8, #2C6BC3);
     @apply text-gray-700;
+}
+
+.text-bg{
+    @apply text-gray-700 dark:text-gray-400;
 }
\ No newline at end of file
diff --git a/front-end/src/bootstrap/components/Header.vue b/front-end/src/bootstrap/components/Header.vue
index 6093fdc..25c857e 100644
--- a/front-end/src/bootstrap/components/Header.vue
+++ b/front-end/src/bootstrap/components/Header.vue
@@ -2,7 +2,7 @@
 <script setup lang="ts">
 
 import { debounce, find } from 'lodash-es'
-import { useElementSize, onClickOutside, useElementHover } from '@vueuse/core'
+import { useElementSize, onClickOutside, useElementHover, get } from '@vueuse/core'
 import { computed, ref, toRefs } from 'vue'
 import { useEnvSize } from '@vnuge/vnlib.browser'
 import { RouteLocation, useRouter } from 'vue-router';
@@ -35,6 +35,10 @@ const userMenuHovered = useElementHover(userMenu)
 
 const uname = computed(() => (store as any).userName || 'Visitor')
 const sideMenuStyle = computed(() => {
+
+  const { width } = sideMenuSize;
+  if(get(width) === 0) return { left: '-100vw' }
+
   // Side menu should be the exact height of the page and under the header,
   // So menu height is the height of the page minus the height of the header
   return {
diff --git a/front-end/src/bootstrap/style/footer.scss b/front-end/src/bootstrap/style/footer.scss
index 4d05928..86b6e6b 100644
--- a/front-end/src/bootstrap/style/footer.scss
+++ b/front-end/src/bootstrap/style/footer.scss
@@ -1,5 +1,5 @@
 footer{
-    @apply text-center shadow-md bg-white dark:bg-dark-800 dark:text-gray-500;
+    @apply text-center shadow-md bg-white dark:bg-dark-800 dark:text-gray-400;
 
     .footer-content{
         @apply mx-auto max-w-7xl p-4;
diff --git a/front-end/src/router/index.ts b/front-end/src/router/index.ts
index 538c132..2060965 100644
--- a/front-end/src/router/index.ts
+++ b/front-end/src/router/index.ts
@@ -1,5 +1,69 @@
+import { watch } from 'vue';
+import { useSession } from '@vnuge/vnlib.browser';
+import { useSessionStorage, get, set } from '@vueuse/core';
+import { includes, map, toLower } from 'lodash-es';
+import { type Router } from 'vue-router';
+
 import { createRouter, createWebHistory } from 'vue-router/auto'
 
 export default createRouter({
   history: createWebHistory(import.meta.env.BASE_URL)
-})
\ No newline at end of file
+})
+
+/**
+ * Enables page guards for protected routes and configures a 
+ * last page store.
+ */
+export const guardRoutes = (router: Router, protectedRoutes: string[]) => {
+  const { loggedIn } = useSession()
+
+  const lastPageStore = useSessionStorage('lastPageStore', undefined)
+
+  const { beforeEach, currentRoute, afterEach, push } = router
+
+  //Convert routes to lowercase
+  protectedRoutes = map(protectedRoutes, toLower);
+
+  //Setup nav guards
+  beforeEach((to, from) => {
+    if (!to.name) {
+      return true;
+    }
+
+    if (!get(loggedIn)) {
+      if (includes(protectedRoutes, toLower(to.name as string))) {
+
+        //Set last page as from page
+        set(lastPageStore, from.fullPath)
+
+        return { name: 'Login' }
+      }
+    }
+    else {
+      /**
+       * If the user is going back to the login page, are logged in,
+       * and have a previous page to go back to, redirect to the last page
+       * instead of the login page
+       */
+      const lastPath = get(lastPageStore);
+
+      if (to.name === 'Login' && lastPath) {
+        set(lastPageStore, undefined)   //Clear the last page
+        return lastPath ? { path: lastPath } : true;
+      }
+    }
+
+    //Allow
+    return true;
+  })
+
+  //scroll window back to top
+  afterEach(() => window.scrollTo(0, 0))
+
+  watch(loggedIn, (li) => {
+    //If the user gets logged out, redirect to login
+    if (li === false && currentRoute.value.name !== 'Login') {
+      push({ name: 'Login' })
+    }
+  })
+}
\ No newline at end of file
diff --git a/front-end/src/store/globalState.ts b/front-end/src/store/globalState.ts
index 9e700eb..26001c7 100644
--- a/front-end/src/store/globalState.ts
+++ b/front-end/src/store/globalState.ts
@@ -1,5 +1,4 @@
 import 'pinia'
-import { shallowRef } from 'vue';
 import { useAutoHeartbeat } from '@vnuge/vnlib.browser';
 import { toRefs, useLocalStorage } from '@vueuse/core';
 import { PiniaPluginContext, PiniaPlugin } from 'pinia'
@@ -22,7 +21,7 @@ export const globalStatePlugin: PiniaPlugin = ({ store }: PiniaPluginContext) =>
     const { ahEnabled } = toRefs(mainState)
 
     //Setup heartbeat for 5 minutes
-    useAutoHeartbeat(shallowRef(5 * 60 * 1000), ahEnabled)
+    useAutoHeartbeat(5 * 60 * 1000, ahEnabled)
     
     return{
         autoHeartbeat: ahEnabled,
diff --git a/front-end/src/store/socialMfaPlugin.ts b/front-end/src/store/socialMfaPlugin.ts
index 2f78f3a..79cb088 100644
--- a/front-end/src/store/socialMfaPlugin.ts
+++ b/front-end/src/store/socialMfaPlugin.ts
@@ -1,11 +1,10 @@
-
 import 'pinia'
 import { MaybeRef } from 'vue';
 import {
     useUser,
     useOauthLogin,
-    useSocialDefaultLogout, 
-    fetchSocialPortals, 
+    useSocialDefaultLogout,
+    fetchSocialPortals,
     fromSocialPortals,
     fromSocialConnections,
 } from '@vnuge/vnlib.browser'
@@ -41,25 +40,22 @@ export const socialMfaPlugin = (portalEndpoint?: MaybeRef<string>): PiniaPlugin
             }
 
             /*
-            Try to load social methods from server, if it fails, then we will 
-            fall back to default
+                Try to load social methods from server, if it fails, then we will 
+                fall back to default
              */
 
             defer(async () => {
 
                 try {
-                    
+
                     const portals = await fetchSocialPortals(get(portalEndpoint)!);
                     const social = fromSocialPortals(portals);
                     const methods = fromSocialConnections(social);
 
                     //Create social login from available portals
                     const login = useOauthLogin(methods);
-                    
-                    const socialOauth = useSocialDefaultLogout(login, logout);
-
-                    console.log(login.methods)
 
+                    const socialOauth = useSocialDefaultLogout(login, logout);
                     resolve(socialOauth)
 
                 } catch (error) {
diff --git a/front-end/src/views/Account/[comp].vue b/front-end/src/views/Account/[comp].vue
index 713a6fe..6c1fb7c 100644
--- a/front-end/src/views/Account/[comp].vue
+++ b/front-end/src/views/Account/[comp].vue
@@ -119,10 +119,6 @@ const onTabChange = (tabid: number) => {
     @apply dark:text-white text-black;
   }
 
-  .text-color-background{
-    @apply text-gray-500;
-  }
-
   .panel-container .panel-header{
     @apply flex flex-row px-2;
   }
diff --git a/front-end/src/views/Account/components/oauth/Oauth.vue b/front-end/src/views/Account/components/oauth/Oauth.vue
index d269689..2c49786 100644
--- a/front-end/src/views/Account/components/oauth/Oauth.vue
+++ b/front-end/src/views/Account/components/oauth/Oauth.vue
@@ -51,7 +51,7 @@ store.oauth2.refresh();
       </div>
     </div>
     <div class="px-2 my-10">
-      <div class="m-auto text-sm">
+      <div class="m-auto text-sm text-bg">
         OAuth2 applications allow you grant api access to OAuth2 clients using the Client Credentials grant type.
         <a class="link" href="https://oauth.net" target="_blank">
           Learn more
diff --git a/front-end/src/views/Account/components/oauth/SingleApplication.vue b/front-end/src/views/Account/components/oauth/SingleApplication.vue
index 60bad68..e2cf34c 100644
--- a/front-end/src/views/Account/components/oauth/SingleApplication.vue
+++ b/front-end/src/views/Account/components/oauth/SingleApplication.vue
@@ -126,7 +126,7 @@ const closeNewSecret = () => set(newSecret, null);
         <button class="btn no-border xs" @click="toggleEdit(true)">Edit</button>
       </div>
     </div>
-    <div class="px-3 py-1 text-color-background">
+    <div class="px-3 py-1 text-bg">
       <div class="my-1">
         <span> Client ID: </span>
         <span class="font-mono text-color-foreground">{{ clientId }}</span>
diff --git a/front-end/src/views/Account/components/profile/Profile.vue b/front-end/src/views/Account/components/profile/Profile.vue
index 106c8b9..c3af26a 100644
--- a/front-end/src/views/Account/components/profile/Profile.vue
+++ b/front-end/src/views/Account/components/profile/Profile.vue
@@ -87,7 +87,7 @@ watch(editMode, () => v$.value.$reset())
 
       <div>
         
-        <p class="profile-text text-color-background">
+        <p class="profile-text text-bg">
           You may set or change your profile information here. All fields are optional,
           but some features may not work without some information.
         </p>
diff --git a/front-end/src/views/Account/components/settings/Fido.vue b/front-end/src/views/Account/components/settings/Fido.vue
index 9303541..350764d 100644
--- a/front-end/src/views/Account/components/settings/Fido.vue
+++ b/front-end/src/views/Account/components/settings/Fido.vue
@@ -40,7 +40,7 @@ const Setup = () => { }
           </button>
         </div>
       </div>
-      <p class="p-1 pt-3 text-sm text-color-background">
+      <p class="p-1 pt-3 text-sm text-bg">
         WebAuthN/FIDO is not yet supported, due to complexity and browser support. 
       </p>
     </div>
diff --git a/front-end/src/views/Account/components/settings/PasswordReset.vue b/front-end/src/views/Account/components/settings/PasswordReset.vue
index 61fda7d..896e9f6 100644
--- a/front-end/src/views/Account/components/settings/PasswordReset.vue
+++ b/front-end/src/views/Account/components/settings/PasswordReset.vue
@@ -2,8 +2,9 @@
 import { isEmpty, toSafeInteger } from 'lodash-es';
 import { useVuelidate } from '@vuelidate/core'
 import { required, maxLength, minLength, helpers } from '@vuelidate/validators'
-import { useUser, apiCall, useMessage, useWait, useConfirm, useVuelidateWrapper, VuelidateInstance } from '@vnuge/vnlib.browser'
+import { useUser, apiCall, useMessage, useWait, useVuelidateWrapper, VuelidateInstance } from '@vnuge/vnlib.browser'
 import { MaybeRef, computed, reactive, ref, toRefs, watch } from 'vue'
+import { set } from '@vueuse/core';
 
 const props = defineProps<{
   totpEnabled: boolean,
@@ -37,7 +38,6 @@ const formSchema = ref({
 
 const { waiting } = useWait()
 const { onInput } = useMessage()
-const { reveal } = useConfirm()
 const { resetPassword } = useUser()
 
 const pwResetShow = ref(false)
@@ -93,13 +93,7 @@ watch(showTotpCode, (val) => {
   }
 })
 
-const showForm = async function () {
-  const { isCanceled } = await reveal({
-    title: 'Reset Password',
-    text: 'Are you sure you want to reset your password? This cannot be reversed.'
-  })
-  pwResetShow.value = !isCanceled
-}
+const showForm = () => set(pwResetShow, true)
 
 const onSubmit = async () => {
 
@@ -168,7 +162,7 @@ const resetForm = () => {
           </div>
         </div>
 
-        <p class="mt-3 text-sm text-color-background">
+        <p class="mt-3 text-sm text-bg">
           You may only reset your password if you have an internal user account. If you exclusivly use an external
           authentication provider (like GitHub or Discord), you will need to reset your password externally.
         </p>
diff --git a/front-end/src/views/Account/components/settings/Pki.vue b/front-end/src/views/Account/components/settings/Pki.vue
index 957a188..0c49cf7 100644
--- a/front-end/src/views/Account/components/settings/Pki.vue
+++ b/front-end/src/views/Account/components/settings/Pki.vue
@@ -211,7 +211,7 @@ const onSubmitKeys = async () => {
                     </table>
                 </div>
                 
-                <p v-else class="p-1 pt-3 text-sm text-color-background">
+                <p v-else class="p-1 pt-3 text-sm bg">
                   PKI authentication is a method of authenticating your user account with signed messages and a shared public key. This method implementation 
                   uses client signed Json Web Tokens to authenticate user generated outside this website as a One Time Password (OTP). This allows for you to
                   use your favorite hardware or software tools, to generate said OTPs to authenticate your user.
diff --git a/front-end/src/views/Account/components/settings/Security.vue b/front-end/src/views/Account/components/settings/Security.vue
index ae0d143..cbc07b6 100644
--- a/front-end/src/views/Account/components/settings/Security.vue
+++ b/front-end/src/views/Account/components/settings/Security.vue
@@ -62,7 +62,7 @@ const pkiEnabled = computed(() => !isNil(store.pki))
           </div>
         </div>
 
-        <p class="p-1 text-sm text-color-background">
+        <p class="p-1 text-sm text-bg">
           When enabled, continuously regenerates your login credentials to keep you logged in. The longer you are logged in,
           the easier session fixation attacks become. If disabled, you will need to log when your credentials have expired.
           It is recommneded that you leave this <strong>off</strong>.
diff --git a/front-end/src/views/Account/components/settings/TotpSettings.vue b/front-end/src/views/Account/components/settings/TotpSettings.vue
index 04a261b..7a93456 100644
--- a/front-end/src/views/Account/components/settings/TotpSettings.vue
+++ b/front-end/src/views/Account/components/settings/TotpSettings.vue
@@ -191,7 +191,7 @@ const CloseQrWindow = () => {
         </span>
       </p>
 
-      <p class="py-2 text-color-background">
+      <p class="py-2 text-bg">
         Please enter your code from your authenticator app to continue.
       </p>
 
@@ -236,7 +236,7 @@ const CloseQrWindow = () => {
           <span class="pl-2">Setup</span>
         </button>
       </div>
-      <p class="p-1 pt-3 text-sm text-color-background">
+      <p class="p-1 pt-3 text-sm text-bg">
         TOTP is a time based one time password. You can use it as a form of Multi Factor Authentication when
         using another device such as a smart phone or TOTP hardware device. You can use TOTP with your smart
         phone
diff --git a/front-end/src/views/Login/components/Social.vue b/front-end/src/views/Login/components/Social.vue
index 3c93d0e..2087524 100644
--- a/front-end/src/views/Login/components/Social.vue
+++ b/front-end/src/views/Login/components/Social.vue
@@ -1,13 +1,29 @@
 <script setup lang="ts">
-import { shallowRef } from 'vue'
 import { apiCall, useWait, type OAuthMethod } from '@vnuge/vnlib.browser'
-import { capitalize } from 'lodash-es';
+import { capitalize, map } from 'lodash-es';
 import { useStore } from '../../../store';
+import { useAsyncState } from '@vueuse/core';
+import { shallowRef } from 'vue';
+import { Mutable } from '@vueuse/core';
 
 const { waiting } = useWait()
 const store = useStore()
+const buttonCont = shallowRef<HTMLDivElement | null>(null)
+
+const filterSvgIcon = (oauth: OAuthMethod[]) => {
+    return map(oauth, (method: Mutable<OAuthMethod>) => {
+        //parse the base64 icon as an svg
+        if (method.icon) {
+            return{
+                ...method,
+                icon: atob(method.icon).replace(/(width|height)="[^"]*"/g, '')
+            }
+        }
+        return method;
+    })
+}
 
-const methods = shallowRef<OAuthMethod[]>([])
+const { state: methods, isReady } = useAsyncState(store.socialOauth().then(p => filterSvgIcon(p.methods)), []);
 
 //Invoke login wrapped in api call
 const submitLogin = (method: OAuthMethod) => apiCall(async () => {
@@ -15,34 +31,24 @@ const submitLogin = (method: OAuthMethod) => apiCall(async () => {
     await beginLoginFlow(method)
 })
 
-const getIcon = (method: OAuthMethod): string[] => {
-    switch (method.id) {
-        case 'auth0':
-            return ['fa', 'certificate']
-        default:
-            return ['fab', method.id]
-    }
-}
-
-//Load methods once the fetch completes
-store.socialOauth().then(m => methods.value = m.methods);
-
 </script>
 
 <template>
 
-    <div class="flex flex-col gap-3">
+    <div ref="buttonCont" v-if="isReady" class="flex flex-col gap-3">
         <div v-for="method in methods" :key="method.id" class="">
-            <button 
-            type="submit" 
-            class="btn social-button" 
-            :disabled="waiting" 
-            @click.prevent="submitLogin(method)"
-            >
-                <fa-icon :icon="getIcon(method)" size="xl" />
+            <button type="submit" class="btn social-button" :disabled="waiting" @click.prevent="submitLogin(method)">
+
+                <div v-html="method.icon" class="w-6 h-6" >
+                </div>
+
                 Login with {{ capitalize(method.id) }}
             </button>
         </div>
     </div>
 
+    <div v-else class="my-8">
+        <fa-icon icon="spinner" size="2xl" spin />
+    </div>
+
 </template>
diff --git a/front-end/src/views/Login/index.vue b/front-end/src/views/Login/index.vue
index 476ebf4..8532390 100644
--- a/front-end/src/views/Login/index.vue
+++ b/front-end/src/views/Login/index.vue
@@ -38,7 +38,7 @@ const submitLogout = async () => {
     <div class="login-container">
 
       <div v-if="!loggedIn">
-        <UserPass/>
+        <UserPass />
       </div>
 
       <div v-else>
@@ -46,13 +46,13 @@ const submitLogout = async () => {
         <p class="mt-3 mb-5 text-lg">
           You are currently logged-in.
         </p>
-         <div class="">
-            <button form="user-pass-submit-form" class="btn primary" @click="submitLogout" :disabled="waiting">
-                <!-- Display spinner if waiting, otherwise the sign-in icon -->
-                <fa-icon :class="{'animate-spin':waiting}" :icon="waiting ? 'spinner' : 'sign-in-alt'"/>
-                Log-out
-            </button>
-         </div>
+        <div class="">
+          <button form="user-pass-submit-form" class="btn primary" @click="submitLogout" :disabled="waiting">
+            <!-- Display spinner if waiting, otherwise the sign-in icon -->
+            <fa-icon :class="{'animate-spin':waiting}" :icon="waiting ? 'spinner' : 'sign-in-alt'" />
+            Log-out
+          </button>
+        </div>
       </div>
 
       <div v-if="!loggedIn" class="w-full mt-6">
@@ -62,9 +62,13 @@ const submitLogout = async () => {
         <!-- pki button, forward to the pki route -->
         <div v-if="pkiEnabled" class="mt-4">
           <router-link to="/login/pki">
-            <button type="submit" class="btn red social-button" :disabled="waiting">
-              <fa-icon :icon="['fa','certificate']" size="xl" />
-              Login with PKI Credential
+            <button type="submit" class="btn social-button" :disabled="waiting">
+              <span>
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 256 256">
+                  <path fill="currentColor" d="M248 128a56 56 0 1 0-96 39.14V224a8 8 0 0 0 11.58 7.16L192 216.94l28.42 14.22A8 8 0 0 0 232 224v-56.86A55.81 55.81 0 0 0 248 128Zm-56-40a40 40 0 1 1-40 40a40 40 0 0 1 40-40Zm3.58 112.84a8 8 0 0 0-7.16 0L168 211.06v-32.47a55.94 55.94 0 0 0 48 0v32.47ZM136 192a8 8 0 0 1-8 8H40a16 16 0 0 1-16-16V56a16 16 0 0 1 16-16h176a16 16 0 0 1 16 16a8 8 0 0 1-16 0H40v128h88a8 8 0 0 1 8 8Zm-16-56a8 8 0 0 1-8 8H72a8 8 0 0 1 0-16h40a8 8 0 0 1 8 8Zm0-32a8 8 0 0 1-8 8H72a8 8 0 0 1 0-16h40a8 8 0 0 1 8 8Z" />
+                </svg>
+              </span>
+              Login with OTP
             </button>
           </router-link>
         </div>
@@ -90,9 +94,5 @@ const submitLogout = async () => {
     @apply flex flex-row justify-center gap-3 items-center;
   }
 
-  a {
-    @apply ease-in-out duration-100;
-    @apply hover:text-primary-600 dark:hover:text-primary-500;
-  }
 }
 </style>