diff options
author | vnugent <public@vaughnnugent.com> | 2024-01-30 15:23:06 -0500 |
---|---|---|
committer | vnugent <public@vaughnnugent.com> | 2024-01-30 15:23:06 -0500 |
commit | 5abc489b9954111d66d1385aa62a3ea962fa0a55 (patch) | |
tree | b1715e5c5e6316f33e3e33fb55397d93200ab518 /front-end/src/views/Account/components/profile | |
parent | e4dc63ded324c6e9678603296953bb1f7dea7569 (diff) |
merge upstream. Add dynamic client-side support for optional oauth2 and social login methods
Diffstat (limited to 'front-end/src/views/Account/components/profile')
-rw-r--r-- | front-end/src/views/Account/components/profile/Profile.vue | 119 |
1 files changed, 59 insertions, 60 deletions
diff --git a/front-end/src/views/Account/components/profile/Profile.vue b/front-end/src/views/Account/components/profile/Profile.vue index 0db7192..106c8b9 100644 --- a/front-end/src/views/Account/components/profile/Profile.vue +++ b/front-end/src/views/Account/components/profile/Profile.vue @@ -1,3 +1,62 @@ + +<script setup lang="ts"> +import { defaultTo } from 'lodash-es' +import { useVuelidate } from '@vuelidate/core' +import { ref, computed, watch, type Ref } from 'vue' +import { Rules, FormSchema } from './profile-schema.ts' +import { apiCall, useMessage, useWait, useVuelidateWrapper, type VuelidateInstance } from '@vnuge/vnlib.browser' +import { useStore } from '../../../../store' + +const { waiting } = useWait() +const { onInput, clearMessage } = useMessage() + +const store = useStore() +const editMode = ref(false) + +// Create validator based on the profile buffer as a data model +const v$ = useVuelidate(Rules, store.userProfile.buffer as any, { $lazy: true }) + +// Setup the validator wrapper +const { validate } = useVuelidateWrapper(v$ as Ref<VuelidateInstance>); + +//const modified = computed(() => profile.value.Modified) +const createdTime = computed(() => defaultTo(store.userProfile.data.created?.toLocaleString(), '')) + +const revertProfile = () => { + //Revert the buffer + store.userProfile.revert() + clearMessage() + editMode.value = false +} + +const onSubmit = async () => { + if (waiting.value) { + return; + } + // Validate the form + if (!await validate()) { + return + } + // Init the api call + await apiCall(async ({ toaster }) => { + const res = await store.userProfile.update(); + + const successm = res.getResultOrThrow(); + + //No longer in edit mode + editMode.value = false + + //Show success message + toaster.general.success({ + title: 'Update successful', + text: successm, + }) + }) +} + +watch(editMode, () => v$.value.$reset()) + +</script> <template> <div id="account-profile" class="acnt-content-container panel-container"> <div class="acnt-content profile-container panel-content"> @@ -57,66 +116,6 @@ </div> </template> -<script setup lang="ts"> -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, useVuelidateWrapper, WebMessage } from '@vnuge/vnlib.browser' -import { useStore } from '../../../../store' - -const { waiting } = useWait() -const { onInput, clearMessage } = useMessage() - -const store = useStore() - -const editMode = ref(false) - -// Create validator based on the profile buffer as a data model -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(store.userProfile.data.created?.toLocaleString(), '')) - -const revertProfile = () => { - //Revert the buffer - store.userProfile.revert() - clearMessage() - editMode.value = false -} - -const onSubmit = async () => { - if(waiting.value){ - return; - } - // Validate the form - if (!await validate()) { - return - } - // Init the api call - 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: successm, - }) - }) -} - -watch(editMode, () => v$.value.$reset()) - - -</script> <style lang="scss"> |