diff options
author | vnugent <public@vaughnnugent.com> | 2023-08-27 22:28:34 -0400 |
---|---|---|
committer | vnugent <public@vaughnnugent.com> | 2023-08-27 22:28:34 -0400 |
commit | afdeeb686f3aa022bec19084a337e233c622b4e3 (patch) | |
tree | f781d4b60e149244e58b58b44715a9a83c9d1fc1 /front-end/src | |
parent | 51a65e9196f35393817ba94721503afdfa76fb60 (diff) |
pre backend update client performance bufs and fixes
Diffstat (limited to 'front-end/src')
-rw-r--r-- | front-end/src/views/Blog/ckeditor/Editor.vue | 4 | ||||
-rw-r--r-- | front-end/src/views/Blog/form-helpers/channels.ts | 3 | ||||
-rw-r--r-- | front-end/src/views/Blog/index.vue | 16 | ||||
-rw-r--r-- | front-end/src/views/Login/components/Social.vue | 12 | ||||
-rw-r--r-- | front-end/src/views/Login/index.vue | 41 | ||||
-rw-r--r-- | front-end/src/views/Login/pki/index.vue | 22 | ||||
-rw-r--r-- | front-end/src/views/Login/social/[type].vue | 2 |
7 files changed, 48 insertions, 52 deletions
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 }) |