From afdeeb686f3aa022bec19084a337e233c622b4e3 Mon Sep 17 00:00:00 2001
From: vnugent <public@vaughnnugent.com>
Date: Sun, 27 Aug 2023 22:28:34 -0400
Subject: pre backend update client performance bufs and fixes

---
 front-end/src/views/Blog/ckeditor/Editor.vue      |  4 +--
 front-end/src/views/Blog/form-helpers/channels.ts |  3 +-
 front-end/src/views/Blog/index.vue                | 16 ++++++---
 front-end/src/views/Login/components/Social.vue   | 12 +++----
 front-end/src/views/Login/index.vue               | 41 ++++++++++++-----------
 front-end/src/views/Login/pki/index.vue           | 22 +++---------
 front-end/src/views/Login/social/[type].vue       |  2 +-
 7 files changed, 48 insertions(+), 52 deletions(-)

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

diff --git a/front-end/src/views/Blog/ckeditor/Editor.vue b/front-end/src/views/Blog/ckeditor/Editor.vue
index ee16742..3cd9a8c 100644
--- a/front-end/src/views/Blog/ckeditor/Editor.vue
+++ b/front-end/src/views/Blog/ckeditor/Editor.vue
@@ -112,7 +112,7 @@ const recoverMd = () => {
     mdBuffer.value = md;
 }
 
-tryOnMounted(() =>
+tryOnMounted(() => defer(() =>
     //Load the editor once the component is mounted
    apiCall(async ({ toaster }) => {
 
@@ -142,7 +142,7 @@ tryOnMounted(() =>
         //Call initial load hook
         defer(() => emit('load', editor));
     })
-)
+))
 
 </script>
 
diff --git a/front-end/src/views/Blog/form-helpers/channels.ts b/front-end/src/views/Blog/form-helpers/channels.ts
index cd33a20..7b98d4e 100644
--- a/front-end/src/views/Blog/form-helpers/channels.ts
+++ b/front-end/src/views/Blog/form-helpers/channels.ts
@@ -16,6 +16,7 @@
 import { MaybeRef, computed, watch, Ref } from 'vue'
 import { helpers, required, maxLength, numeric } from "@vuelidate/validators"
 import { useVuelidateWrapper } from '@vnuge/vnlib.browser';
+import { defer } from 'lodash-es'
 import { BlogChannel, ChannelFeed } from '@vnuge/cmnext-admin';
 import useVuelidate from "@vuelidate/core"
 
@@ -203,7 +204,7 @@ export const getChannelForm = (editMode?: Ref<boolean>) => {
 
         watch(v$, updateExample);
 
-        updateExample();
+        defer(() => updateExample());
 
         const { validate } = useVuelidateWrapper(v$);
         return { v$, validate, reset: v$.value.$reset };
diff --git a/front-end/src/views/Blog/index.vue b/front-end/src/views/Blog/index.vue
index b5fa0d4..5d2d8cc 100644
--- a/front-end/src/views/Blog/index.vue
+++ b/front-end/src/views/Blog/index.vue
@@ -125,10 +125,12 @@ import Content from './components/Content.vue';
 usePageGuard();
 useTitle('CMNext Admin')
 
-//Load scripts
-const ckEditorTag = useScriptTag("https://cdn.ckeditor.com/ckeditor5/35.4.0/super-build/ckeditor.js")
-//Store the wait result on the window for the editor script to wait
-window.editorLoadResult = ckEditorTag.load(true);
+if(!window.CKEDITOR){
+    //Load scripts
+    const ckEditorTag = useScriptTag("https://cdn.ckeditor.com/ckeditor5/35.4.0/super-build/ckeditor.js")
+    //Store the wait result on the window for the editor script to wait
+    window.editorLoadResult = ckEditorTag.load(true);
+}
 
 const { userName, getProfile } = useUser()
 
@@ -241,7 +243,7 @@ const onTabChange = (id:number) => tabIdQ.value = id.toString(10)
                     }
                     
                     &:disabled{
-                        @apply text-rose-400 border-transparent;
+                        @apply text-rose-400;
                     }
                 }
 
@@ -258,6 +260,10 @@ const onTabChange = (id:number) => tabIdQ.value = id.toString(10)
             .dynamic-form.input-label{
                 @apply col-span-2 text-right m-auto mr-2;
             }
+
+            .dynamic-form.dynamic-input.input:disabled + .dynamic-form.field-description {
+                @apply hidden;
+            }
         }
     }
 
diff --git a/front-end/src/views/Login/components/Social.vue b/front-end/src/views/Login/components/Social.vue
index 6eb65e7..5824226 100644
--- a/front-end/src/views/Login/components/Social.vue
+++ b/front-end/src/views/Login/components/Social.vue
@@ -17,18 +17,18 @@
 </template>
 
 <script setup lang="ts">
-import { apiCall, useWait, useSession, useSessionUtils, WebMessage } from '@vnuge/vnlib.browser'
+import { apiCall, useWait, useSessionUtils, WebMessage, useUser } from '@vnuge/vnlib.browser'
 
 const { waiting } = useWait()
-const { browserId, publicKey } = useSession()
 const { KeyStore } = useSessionUtils()
+const { prepareLogin } = useUser()
 
 const SocalLogin = async (url:string) => {
   await apiCall(async ({ axios }) => {
-    const { data } = await axios.put<WebMessage<string>>(url, {
-      browser_id: browserId.value,
-      public_key: publicKey.value
-    })
+
+    //Prepare the login claim
+    const claim = await prepareLogin()
+    const { data } = await axios.put<WebMessage<string>>(url, claim)
    
     const encDat = data.getResultOrThrow()
     // Decrypt the result which should be a redirect url
diff --git a/front-end/src/views/Login/index.vue b/front-end/src/views/Login/index.vue
index 7c30047..fea02d4 100644
--- a/front-end/src/views/Login/index.vue
+++ b/front-end/src/views/Login/index.vue
@@ -52,7 +52,7 @@ import {
   useMfaLogin, totpMfaProcessor, IMfaFlowContinuiation, MfaMethod, apiCall, 
   useMessage, useWait, useUser, useSession, useLastPage, useTitle, debugLog 
 } from '@vnuge/vnlib.browser'
-import { useTimeoutFn } from '@vueuse/shared'
+import { useTimeoutFn } from '@vueuse/core'
 import { isNil } from 'lodash-es'
 
 useTitle('Login')
@@ -74,7 +74,13 @@ const { gotoLastPage } = useLastPage()
 useTimeoutFn(() => loggedIn.value ? gotoLastPage() : null, 500)
 
 const mfaUpgrade = ref<IMfaFlowContinuiation>();
-const mfaTimer = ref<{stop:() => void}>();
+const mfaTimeout = ref<number>(600 * 1000);
+const { start, stop } = useTimeoutFn(() => {
+   //Clear upgrade message
+  mfaUpgrade.value = undefined;
+  setMessage('Your TOTP request has expired')
+}, mfaTimeout, { immediate: false })
+
 const showTotp = computed(() => mfaUpgrade.value?.type === MfaMethod.TOTP)
 
 const submitLogout = async () => {
@@ -96,9 +102,14 @@ const submitLogin = async ({username, password} : { username: string, password:s
   // Run login in an apicall wrapper
   await apiCall(async ({ toaster }) => {
     // Attempt to login
-    const response = await login(username, password)
+    const response = await login(username, password);
 
-    debugLog('Mfa-login',response)
+    debugLog('Mfa-login', response)
+    
+    if(response.success == false){
+      setMessage(response.result)
+      return;
+    }
 
     //Try to get response as a flow continuation
     const mfa = response as IMfaFlowContinuiation
@@ -108,16 +119,9 @@ const submitLogin = async ({username, password} : { username: string, password:s
 
       //Store the upgrade message
       mfaUpgrade.value = mfa;
-
-      // Set timeout to reset the form when totp expires
-      mfaTimer.value = useTimeoutFn(() => {
-
-        //Clear upgrade message
-        mfaUpgrade.value = undefined;
-        
-        setMessage('Your TOTP request has expired')
-
-      }, mfa.expires! * 1000)
+      //Setup timeout timer
+      mfaTimeout.value = mfa.expires! * 1000;
+      start();
     }
     //If login without mfa was successful
     else if (response.success) {
@@ -126,8 +130,6 @@ const submitLogin = async ({username, password} : { username: string, password:s
           title: 'Success',
           text: 'You have been logged in',
         })
-
-        return;
       }
   })
 }
@@ -135,15 +137,16 @@ const submitLogin = async ({username, password} : { username: string, password:s
 const totpSubmit = ({ code } : {code:number}) =>{
     apiCall(async ({ toaster }) =>{
 
-        if (!mfaUpgrade.value)
+        if (!mfaUpgrade.value){
             return;
+        }
 
         //Submit totp code
         const res = await mfaUpgrade.value.submit({ code })
         res.getResultOrThrow()
 
-         //Clear timer
-        mfaTimer.value?.stop()
+        //Clear timer
+        stop();
 
         //Clear upgrade message
         mfaUpgrade.value = undefined;
diff --git a/front-end/src/views/Login/pki/index.vue b/front-end/src/views/Login/pki/index.vue
index 4e56151..cd0113e 100644
--- a/front-end/src/views/Login/pki/index.vue
+++ b/front-end/src/views/Login/pki/index.vue
@@ -33,23 +33,20 @@
 
 <script setup lang="ts">
 import { isEmpty } from 'lodash-es';
-import { apiCall, debugLog, useUser, useMessage } from '@vnuge/vnlib.browser';
-import { ITokenResponse } from '@vnuge/vnlib.browser/dist/session';
+import { apiCall, debugLog, useMessage, usePkiAuth } from '@vnuge/vnlib.browser';
 import { ref } from 'vue'
 import { decodeJwt } from 'jose'
 import { useRouter } from 'vue-router';
 
 const otp = ref('')
 
-const pkiEndpoint = import.meta.env.VITE_PKI_ENDPOINT
-
-const { prepareLogin } = useUser()
 const { setMessage } = useMessage()
 const { push } = useRouter()
+const { login } = usePkiAuth(import.meta.env.VITE_PKI_ENDPOINT)
 
 const submit = () =>{
 
-    apiCall(async ({ axios }) =>{
+    apiCall(async () =>{
         if(isEmpty(otp.value)){
             setMessage('Please enter your OTP')
             return
@@ -59,18 +56,7 @@ const submit = () =>{
         const jwt = decodeJwt(otp.value)
         debugLog(jwt)
 
-        //Prepare a login message
-        const loginMessage = prepareLogin()
-
-        //Set the 'login' field to the otp
-        loginMessage.login = otp.value
-
-        const { data }  = await axios.post<ITokenResponse>(pkiEndpoint, loginMessage)
-
-        data.getResultOrThrow()
-
-        //Finalize the login
-        await loginMessage.finalize(data);
+        await login(otp.value)
 
         //Go back to login page
         push({ name: 'Login' })
diff --git a/front-end/src/views/Login/social/[type].vue b/front-end/src/views/Login/social/[type].vue
index da1aa25..217e89c 100644
--- a/front-end/src/views/Login/social/[type].vue
+++ b/front-end/src/views/Login/social/[type].vue
@@ -80,7 +80,7 @@ const run = async () => {
 
     // If nonce is set, then we can proceed with finalization
     await apiCall(async ({ axios }) => {
-      const preppedLogin = prepareLogin()
+      const preppedLogin = await prepareLogin()
       // Send the login request
       const { data } = await axios.post<ITokenResponse>(loginUrl, { nonce: nonce.value })
 
-- 
cgit