From 4b8ae76132d2342f40cec703b3d5145ea075c451 Mon Sep 17 00:00:00 2001
From: vnugent <public@vaughnnugent.com>
Date: Wed, 13 Dec 2023 17:58:51 -0500
Subject: log time coming ui and lib updates

---
 .../views/Account/components/profile/Profile.vue   | 55 +++++++---------------
 .../src/views/Account/components/settings/Fido.vue |  4 +-
 .../Account/components/settings/PasswordReset.vue  | 16 +++----
 .../src/views/Account/components/settings/Pki.vue  | 46 ++++++++----------
 .../views/Account/components/settings/Security.vue | 31 ++++++------
 .../views/Account/components/settings/Settings.vue |  2 +-
 .../Account/components/settings/TotpSettings.vue   | 40 +++++++---------
 7 files changed, 81 insertions(+), 113 deletions(-)

(limited to 'front-end/src/views/Account/components')

diff --git a/front-end/src/views/Account/components/profile/Profile.vue b/front-end/src/views/Account/components/profile/Profile.vue
index 0b0a6dd..0db7192 100644
--- a/front-end/src/views/Account/components/profile/Profile.vue
+++ b/front-end/src/views/Account/components/profile/Profile.vue
@@ -2,10 +2,10 @@
   <div id="account-profile" class="acnt-content-container panel-container">
     <div class="acnt-content profile-container panel-content">
 
-      <div id="profile-control-container" class="flex flex-row" :modified="modified">
+      <div id="profile-control-container" class="flex flex-row" :modified="store.userProfile.modified">
         <div class="m-0">
           <div class="flex rounded-full w-14 h-14 bg-primary-500 dark:bg-primary-600">
-            <div class="m-auto text-white dark:text-dark-400">
+            <div class="m-auto text-white dark:text-dark-500">
               <fa-icon :icon="['fas', 'user']" size="2xl" />
             </div>
           </div>
@@ -28,7 +28,7 @@
 
       <div>
         
-        <p class="profile-text">
+        <p class="profile-text text-color-background">
           You may set or change your profile information here. All fields are optional,
           but some features may not work without some information.
         </p>
@@ -36,7 +36,7 @@
         <div class="locked-info">
           <div class="mx-auto my-1 sm:mx-0 sm:my-2">
             <span class="pr-2">Email:</span>
-            <span class="">{{ data.email }}</span>
+            <span class="">{{ store.userProfile.data.email }}</span>
           </div>
           <div class="mx-auto my-1 sm:mx-0 sm:my-2">
             <span class="pr-2">Created:</span>
@@ -62,43 +62,28 @@ import { defaultTo } from 'lodash-es'
 import useVuelidate  from '@vuelidate/core'
 import { ref, computed, watch } from 'vue'
 import { Rules, FormSchema } from './profile-schema.ts'
-import { apiCall, useMessage, useWait, useDataBuffer, useUser, useVuelidateWrapper, IUserProfile } from '@vnuge/vnlib.browser'
-
-const ACCOUNT_URL = '/account/profile'
-
-interface UserProfile extends IUserProfile{
-  created : string | Date
-}
+import { apiCall, useMessage, useWait, useVuelidateWrapper, WebMessage } from '@vnuge/vnlib.browser'
+import { useStore } from '../../../../store'
 
 const { waiting } = useWait()
-const { getProfile } = useUser()
 const { onInput, clearMessage } = useMessage()
-const { data, buffer, apply, revert, modified } = useDataBuffer<UserProfile>({} as UserProfile)
+
+const store = useStore()
 
 const editMode = ref(false)
 
 // Create validator based on the profile buffer as a data model
-const v$ = useVuelidate(Rules, buffer, { $lazy:true, $autoDirty:false })
+const v$ = useVuelidate(Rules, store.userProfile.buffer, { $lazy:true })
 
 // Setup the validator wrapper
 const { validate } = useVuelidateWrapper(v$);
 
 //const modified = computed(() => profile.value.Modified)
-const createdTime = computed(() => defaultTo(data.created?.toLocaleString(), ''))
-
-const loadProfileData = async () => {
-  await apiCall(async () => {
-    // Get the user's profile
-    const profile = await getProfile<UserProfile>()
-    profile.created = new Date(profile.created)
-    //Apply the profile to the buffer
-    apply(profile)
-  })
-}
+const createdTime = computed(() => defaultTo(store.userProfile.data.created?.toLocaleString(), ''))
 
 const revertProfile = () => {
   //Revert the buffer
-  revert()
+  store.userProfile.revert()
   clearMessage()
   editMode.value = false
 }
@@ -112,32 +97,24 @@ const onSubmit = async () => {
     return
   }
   // Init the api call
-  await apiCall(async ({ axios, toaster }) => {
-    // Apply the buffer to the profile
-    const response = await axios.post(ACCOUNT_URL, buffer)
-
-    if(!response.data.success){
-      throw { response }
-    }
+  await apiCall(async ({ toaster }) => {
+    const res = await store.userProfile.update();
 
+    const successm = (res as WebMessage<string>).getResultOrThrow();
+  
     //No longer in edit mode
     editMode.value = false
 
     //Show success message
     toaster.general.success({
       title: 'Update successful',
-      text: response.data.result,
+      text: successm,
     })
-
-    //reload the profile data
-    loadProfileData()
   })
 }
 
 watch(editMode, () => v$.value.$reset())
 
-//Inital profile data load, dont await
-loadProfileData()
 
 </script>
 
diff --git a/front-end/src/views/Account/components/settings/Fido.vue b/front-end/src/views/Account/components/settings/Fido.vue
index f319cd3..d453378 100644
--- a/front-end/src/views/Account/components/settings/Fido.vue
+++ b/front-end/src/views/Account/components/settings/Fido.vue
@@ -18,13 +18,13 @@
           </button>
         </div>
         <div v-else>
-          <button class="btn primary xs" @click.prevent="Setup">
+          <button class="btn primary xs" disabled="true" @click.prevent="Setup">
             <fa-icon icon="plus" />
             <span class="pl-2">Setup</span>
           </button>
         </div>
       </div>
-      <p class="p-1 pt-3 text-sm text-gray-600">
+      <p class="p-1 pt-3 text-sm text-color-background">
         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 f90bce8..24dced6 100644
--- a/front-end/src/views/Account/components/settings/PasswordReset.vue
+++ b/front-end/src/views/Account/components/settings/PasswordReset.vue
@@ -2,24 +2,22 @@
   <div id="pwreset-settings" class="container">
     <div class="panel-content">
 
-      <h5>Password Reset</h5>
-
-      <div v-if="!pwResetShow" class="py-2">
+      <div v-if="!pwResetShow" class="">
         <div class="flex flex-wrap items-center justify-between">
-
-          <div class="my-auto">
-            Click to reset
+          
+          <div class="">
+             <h5>Password Reset</h5>
           </div>
 
           <div class="flex justify-end">
-            <button class="btn red xs" @click="showForm">
+            <button class="btn xs" @click="showForm">
               <fa-icon icon="sync" />
               <span class="pl-2">Reset Password</span>
             </button>
           </div>
         </div>
 
-        <p class="mt-3 text-sm">
+        <p class="mt-3 text-sm text-color-background">
           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>
@@ -61,7 +59,7 @@
 
 <script setup lang="ts">
 import { isEmpty, toSafeInteger } from 'lodash-es';
-import useVuelidate from '@vuelidate/core'
+import { useVuelidate } from '@vuelidate/core'
 import { required, maxLength, minLength, helpers } from '@vuelidate/validators'
 import { useUser, apiCall, useMessage, useWait, useConfirm, useVuelidateWrapper } from '@vnuge/vnlib.browser'
 import { computed, reactive, ref, toRefs, watch } from 'vue'
diff --git a/front-end/src/views/Account/components/settings/Pki.vue b/front-end/src/views/Account/components/settings/Pki.vue
index 1b169e2..afe606f 100644
--- a/front-end/src/views/Account/components/settings/Pki.vue
+++ b/front-end/src/views/Account/components/settings/Pki.vue
@@ -1,12 +1,12 @@
 <template>
-    <div id="pki-settings" v-show="pkiEnabled" class="container">
+    <div id="pki-settings" class="container">
         <div class="panel-content">
            
             <div class="flex flex-row flex-wrap justify-between">
                 <h5>PKI Authentication</h5>
                 <div class="">
-                    <div v-if="enabled" class="button-group">
-                        <button class="btn yellow xs" @click.prevent="setIsOpen(true)">
+                    <div v-if="pkiEnabled" class="button-group">
+                        <button class="btn xs" @click.prevent="setIsOpen(true)">
                             <fa-icon icon="plus" />
                             <span class="pl-2">Add Key</span>
                         </button>
@@ -23,7 +23,7 @@
                     </div>
                 </div>
 
-                <div v-if="pubKeys && pubKeys.length > 0" class="w-full mt-4">
+                <div v-if="store.pkiPublicKeys && store.pkiPublicKeys.length > 0" class="w-full mt-4">
                     <table class="min-w-full text-sm divide-y-2 divide-gray-200 dark:divide-dark-500">
                         <thead class="text-left">
                             <tr>
@@ -41,7 +41,7 @@
                         </thead>
 
                         <tbody class="divide-y divide-gray-200 dark:divide-dark-500">
-                            <tr v-for="key in pubKeys">
+                            <tr v-for="key in store.pkiPublicKeys">
                                 <td class="p-2 t font-medium truncate max-w-[8rem] whitespace-nowrap dark:text-white">
                                     {{ key.kid }}
                                 </td>
@@ -62,11 +62,10 @@
                     </table>
                 </div>
                 
-                <p v-else class="p-1 pt-3 text-sm text-gray-600">
+                <p v-else class="p-1 pt-3 text-sm text-color-background">
                   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.
-                
                 </p>
             </div>
         </div>
@@ -75,7 +74,7 @@
         <div class="fixed inset-0 bg-black/30" aria-hidden="true" />
 
         <div class="fixed inset-0 flex justify-center">
-          <DialogPanel class="w-full max-w-lg p-4 m-auto mt-24 bg-white rounded dark:bg-dark-600 dark:text-gray-300">
+          <DialogPanel class="w-full max-w-lg p-4 m-auto mt-24 bg-white rounded dark:bg-dark-700 dark:text-gray-300">
             <h4>Configure your authentication key</h4>
             <p class="mt-2 text-sm">
                 Please paste your authenticator's public key as a Json Web Key (JWK) object. Your JWK must include a kid (key id) and a kty (key type) field.
@@ -85,7 +84,7 @@
             </div>
             <div class="flex justify-end gap-2 mt-4">
                 <button class="rounded btn sm primary" @click.prevent="onSubmitKeys">Submit</button>
-                <button class="rounded btn sm red" @click.prevent="setIsOpen(false)">Cancel</button>
+                <button class="rounded btn sm" @click.prevent="setIsOpen(false)">Cancel</button>
             </div>
           </DialogPanel>
         </div>
@@ -93,24 +92,19 @@
 </template>
 
 <script setup lang="ts">
-import { isEmpty, isNil } from 'lodash-es'
-import { apiCall, useConfirm, useSession, debugLog, useFormToaster, PkiApi, PkiPublicKey } from '@vnuge/vnlib.browser'
+import { includes, isEmpty } from 'lodash-es'
+import { apiCall, useConfirm, useSession, debugLog, useFormToaster, PkiPublicKey } from '@vnuge/vnlib.browser'
 import { computed, ref, watch } from 'vue'
-import { asyncComputed } from '@vueuse/core'
 import { Dialog, DialogPanel } from '@headlessui/vue'
+import { useStore } from '../../../../store'
+import { } from 'pinia'
 
-const props = defineProps<{
-    pkaiApi: PkiApi
-}>()
-
+const store = useStore()
 const { reveal } = useConfirm()
 const { isLocalAccount } = useSession()
 const { error } = useFormToaster()
 
-const pkiEnabled = computed(() => isLocalAccount.value && !isNil(import.meta.env.VITE_PKI_ENDPOINT) && window.crypto.subtle)
-const { enabled, refresh } = props.pkaiApi
-
-const pubKeys = asyncComputed(() => pkiEnabled.value ? apiCall(props.pkaiApi.getAllKeys) : [], [])
+const pkiEnabled = computed(() => isLocalAccount.value && includes(store.mfaEndabledMethods, "pki") && window.crypto.subtle)
 
 const isOpen = ref(false)
 const keyData = ref('')
@@ -122,7 +116,7 @@ watch(isOpen, () =>{
     pemFormat.value = false
     explicitCurve.value = ""
     //Reload status
-    refresh()
+    store.mfaRefreshMethods()
 })
 
 const setIsOpen = (value : boolean) => isOpen.value = value
@@ -140,7 +134,7 @@ const onRemoveKey = async (single: PkiPublicKey) =>{
     await apiCall(async ({ toaster }) => {
        
         //TODO: require password or some upgrade to disable
-        const { success } = await props.pkaiApi.removeKey(single.kid);
+        const { success } = await store.pkiConfig.removeKey(single.kid);
 
         if (success) {
             toaster.general.success({
@@ -156,7 +150,7 @@ const onRemoveKey = async (single: PkiPublicKey) =>{
         }
 
         //Refresh the status
-        props.pkaiApi.refresh();
+       store.mfaRefreshMethods()
     });
 }
 
@@ -174,7 +168,7 @@ const onDisable = async () => {
 
         //Disable pki
         //TODO: require password or some upgrade to disable
-        const { success } = await props.pkaiApi.disable();
+        const { success } = await store.pkiConfig.disable();
         
         if(success){
             toaster.general.success({
@@ -190,7 +184,7 @@ const onDisable = async () => {
         }
 
         //Refresh the status
-        props.pkaiApi.refresh();
+        store.mfaRefreshMethods()
     });
 }
 
@@ -232,7 +226,7 @@ const onSubmitKeys = async () =>{
 
         //init/update the key
         //TODO: require password or some upgrade to disable
-        const { getResultOrThrow } = await props.pkaiApi.addOrUpdate(jwk);
+        const { getResultOrThrow } = await store.pkiConfig.addOrUpdate(jwk);
 
         const result = getResultOrThrow();
 
diff --git a/front-end/src/views/Account/components/settings/Security.vue b/front-end/src/views/Account/components/settings/Security.vue
index 1f2d06d..e6075f9 100644
--- a/front-end/src/views/Account/components/settings/Security.vue
+++ b/front-end/src/views/Account/components/settings/Security.vue
@@ -12,38 +12,38 @@
 
       <div id="account-mfa-settings" class="panel-content">
         <h5>Multi Factor Authentication</h5>
-        <div class="py-2 border-b-2 border-gray-200 dark:border-dark-400">
-          <TotpSettings :mfa="mfaApi" />
+        <div class="py-2 border-b-2 border-gray-200 dark:border-dark-500">
+          <TotpSettings />
         </div>
         <div class="py-2">
           <Fido :fido-enabled="fidoEnabled"/>
         </div>
       </div>
 
-      <Pki :pkai-api="pkiApi" />
+      <Pki />
 
       <div id="browser-poll-settings" class="panel-content" >
         <div class="flex justify-between">
           <h5>Keep me logged in</h5>
           <div class="pl-1">
               <Switch
-                v-model="enabled"
-                :class="enabled ? 'bg-primary-500 dark:bg-primary-600' : 'bg-gray-200 dark:bg-dark-400'"
+                v-model="autoHeartbeat"
+                :class="autoHeartbeat ? 'bg-primary-500 dark:bg-primary-600' : 'bg-gray-200 dark:bg-dark-500'"
                 class="relative inline-flex items-center h-6 rounded-full w-11"
               >
                 <span class="sr-only">Enable auto heartbeat</span>
                 <span
-                  :class="enabled ? 'translate-x-6' : 'translate-x-1'"
+                  :class="autoHeartbeat ? 'translate-x-6' : 'translate-x-1'"
                   class="inline-block w-4 h-4 transition transform bg-white rounded-full"
                 />
               </Switch>
           </div>
         </div>
 
-        <p class="p-1 text-sm">
+        <p class="p-1 text-sm text-color-background">
           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 disabled <span class="text-yellow-500">Disabled</span>
+          It is recommneded that you leave this <strong>off</strong>.
         </p>
         
       </div>
@@ -52,22 +52,25 @@
 </template>
 
 <script setup lang="ts">
-import { useAutoHeartbeat, useMfaConfig, MfaMethod, usePkiConfig } from '@vnuge/vnlib.browser'
+import { MfaMethod } from '@vnuge/vnlib.browser'
 import { computed } from 'vue'
 import { Switch } from '@headlessui/vue'
 import { includes } from 'lodash-es'
+import { storeToRefs } from 'pinia'
+import { useStore } from '../../../../store'
 import Fido from './Fido.vue'
 import Pki from './Pki.vue'
 import TotpSettings from './TotpSettings.vue'
 import PasswordReset from './PasswordReset.vue'
 
-const { enabled } = useAutoHeartbeat()
+const store = useStore();
+const { autoHeartbeat } = storeToRefs(store);
 
-const mfaApi = useMfaConfig('/account/mfa')
-const pkiApi = usePkiConfig(import.meta.env.VITE_PKI_ENDPOINT, mfaApi)
+//Load mfa methods
+store.mfaRefreshMethods();
 
-const fidoEnabled = computed(() => includes(mfaApi.enabledMethods.value, 'fido' as MfaMethod))
-const totpEnabled = computed(() => includes(mfaApi.enabledMethods.value, MfaMethod.TOTP))
+const fidoEnabled = computed(() => includes(store.mfaEndabledMethods, 'fido' as MfaMethod))
+const totpEnabled = computed(() => includes(store.mfaEndabledMethods, MfaMethod.TOTP))
 
 </script>
 
diff --git a/front-end/src/views/Account/components/settings/Settings.vue b/front-end/src/views/Account/components/settings/Settings.vue
index cd2ab48..fb86951 100644
--- a/front-end/src/views/Account/components/settings/Settings.vue
+++ b/front-end/src/views/Account/components/settings/Settings.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script setup lang="ts">
-import Security from './security.vue'
+import Security from './Security.vue'
 
 </script>
 
diff --git a/front-end/src/views/Account/components/settings/TotpSettings.vue b/front-end/src/views/Account/components/settings/TotpSettings.vue
index 9760806..0fcfe31 100644
--- a/front-end/src/views/Account/components/settings/TotpSettings.vue
+++ b/front-end/src/views/Account/components/settings/TotpSettings.vue
@@ -24,13 +24,13 @@
         Your secret, if your application requires it.
       </p>
 
-      <p class="flex flex-row flex-wrap justify-center p-2 bg-gray-200 border border-gray-300 dark:bg-dark-800 dark:border-dark-300">
+      <p class="flex flex-row flex-wrap justify-center p-2 bg-gray-200 border border-gray-300 dark:bg-dark-800 dark:border-dark-500">
         <span v-for="code in secretSegments" :key="code" class="px-2 font-mono tracking-wider" >
           {{ code }}
         </span>
       </p>
 
-      <p class="py-2">
+      <p class="py-2 text-color-background">
         Please enter your code from your authenticator app to continue.
       </p>
 
@@ -58,7 +58,7 @@
       <h6>TOTP Authenticator App</h6>
 
       <div v-if="totpEnabled" class="button-group">
-        <button class="btn yellow xs" @click.prevent="regenTotp">
+        <button class="btn xs" @click.prevent="regenTotp">
           <fa-icon icon="sync" />
           <span class="pl-2">Regenerate</span>
         </button>
@@ -74,7 +74,7 @@
           <span class="pl-2">Setup</span>
         </button>
       </div>
-      <p class="p-1 pt-3 text-sm text-gray-600">
+      <p class="p-1 pt-3 text-sm text-color-background">
         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
@@ -91,21 +91,21 @@
 <script setup lang="ts">
 import { isNil, chunk, defaultTo, includes, map, join } from 'lodash-es'
 import { TOTP } from 'otpauth'
+import { computed, ref, defineAsyncComponent } from 'vue'
 import base32Encode from 'base32-encode'
-import VueQrcode from '@chenfengyuan/vue-qrcode'
-import VOtpInput from "vue3-otp-input";
-import { computed, ref } from 'vue'
 import { 
-  useSessionUtils,
   useSession,
-  useUser,
   useMessage,
   useConfirm,
   usePassConfirm,
   useFormToaster,
-  MfaApi,
   MfaMethod
 } from '@vnuge/vnlib.browser'
+import { useStore } from '../../../../store';
+import { storeToRefs } from 'pinia';
+
+const VueQrcode = defineAsyncComponent(() => import('@chenfengyuan/vue-qrcode'))
+const VOtpInput = defineAsyncComponent(() => import('vue3-otp-input'));
 
 interface TotpConfig{
     secret: string;
@@ -115,19 +115,15 @@ interface TotpConfig{
     readonly period?: number;
 }
 
-const props = defineProps<{
-  mfa: MfaApi
-}>()
+const store = useStore();
+const { userName, isLocalAccount, mfaEndabledMethods } = storeToRefs(store);
 
-const { isLocalAccount } = useSession()
-const { KeyStore } = useSessionUtils()
-const { userName } = useUser()
+const { KeyStore } = useSession()
 const { reveal } = useConfirm()
 const { elevatedApiCall } = usePassConfirm()
 const { onInput, setMessage } = useMessage()
 
-const { enabledMethods, disableMethod, initOrUpdateMethod, refreshMethods }  = props.mfa;
-const totpEnabled = computed(() => includes(enabledMethods.value, MfaMethod.TOTP))
+const totpEnabled = computed(() => includes(mfaEndabledMethods.value, MfaMethod.TOTP))
 
 const totpMessage = ref<TotpConfig>()
 const showSubmitButton = ref(false)
@@ -164,7 +160,7 @@ const ProcessAddOrUpdate = async () => {
   await elevatedApiCall(async ({ password }) => {
 
     // Init or update the totp method and get the encrypted totp message
-    const res =  await initOrUpdateMethod<TotpConfig>(MfaMethod.TOTP, password);
+    const res =  await store.mfaConfig.initOrUpdateMethod<TotpConfig>(MfaMethod.TOTP, password);
 
     //Get the encrypted totp message
     const totp = res.getResultOrThrow()
@@ -220,10 +216,10 @@ const disable = async () => {
   await elevatedApiCall(async ({ password }) => {
 
     // Disable the totp method
-    const res = await disableMethod(MfaMethod.TOTP, password)
+    const res = await store.mfaConfig.disableMethod(MfaMethod.TOTP, password)
     res.getResultOrThrow()
     
-    refreshMethods()
+    store.mfaRefreshMethods()
   })
 }
 
@@ -250,7 +246,7 @@ const CloseQrWindow = () => {
   totpMessage.value = undefined
   
   //Fresh methods
-  refreshMethods()
+  store.mfaRefreshMethods()
 }
 
 </script>
-- 
cgit