diff options
Diffstat (limited to 'front-end/src')
| -rw-r--r-- | front-end/src/assets/main.scss | 3 | ||||
| -rw-r--r-- | front-end/src/bootstrap/components/Footer.vue | 5 | ||||
| -rw-r--r-- | front-end/src/views/Blog/ckeditor/Editor.vue | 4 | ||||
| -rw-r--r-- | front-end/src/views/Register/components/CompleteReg.vue | 116 | ||||
| -rw-r--r-- | front-end/src/views/Register/index.vue | 161 |
5 files changed, 7 insertions, 282 deletions
diff --git a/front-end/src/assets/main.scss b/front-end/src/assets/main.scss index e69de29..bbe9e5b 100644 --- a/front-end/src/assets/main.scss +++ b/front-end/src/assets/main.scss @@ -0,0 +1,3 @@ +#footer-content .footer-lower{ + @apply hidden; +}
\ No newline at end of file diff --git a/front-end/src/bootstrap/components/Footer.vue b/front-end/src/bootstrap/components/Footer.vue index 98f6f55..5d05a6c 100644 --- a/front-end/src/bootstrap/components/Footer.vue +++ b/front-end/src/bootstrap/components/Footer.vue @@ -3,9 +3,8 @@ <div id="footer-content" class="footer-content" > <div class="footer-main-container"> <div class="col-span-4 sm:col-span-6 lg:col-span-3"> - <p class="my-4 text-xs leading-normal"> - No tracking, no external dependencies, no ads. You shouldn't trust anyone with your data, - and I am no exception. + <p class="my-4 text-sm leading-normal"> + CMNext ia a AGPL3 licensed free and open source content management system </p> </div> <nav> diff --git a/front-end/src/views/Blog/ckeditor/Editor.vue b/front-end/src/views/Blog/ckeditor/Editor.vue index 87c0595..41e0ec0 100644 --- a/front-end/src/views/Blog/ckeditor/Editor.vue +++ b/front-end/src/views/Blog/ckeditor/Editor.vue @@ -55,7 +55,7 @@ </template> <script setup lang="ts"> -import { debounce } from 'lodash'; +import { debounce, defer } from 'lodash'; import { ref } from 'vue'; import { useSessionStorage } from '@vueuse/core'; import { tryOnMounted } from '@vueuse/shared'; @@ -140,7 +140,7 @@ tryOnMounted(() => editor.model.document.on('change:data', debounce(() => onChange(editor.getData())), 500) //Call initial load hook - emit('load', editor); + defer(() => emit('load', editor)); }) ) diff --git a/front-end/src/views/Register/components/CompleteReg.vue b/front-end/src/views/Register/components/CompleteReg.vue deleted file mode 100644 index b8f8ef0..0000000 --- a/front-end/src/views/Register/components/CompleteReg.vue +++ /dev/null @@ -1,116 +0,0 @@ -<template> - <div id="reg-submit-template"> - <form - id="complete-registration" - method="POST" - action="#" - :disabled="waiting" - @submit.prevent="onSubmit" - > - <fieldset class="input-group"> - <div class="input-container"> - <label for="reg-password" class="pl-1"> - Password - </label> - <input - id="reg-password" - v-model="v$.password.$model" - type="password" - class="input-field primary input" - @input="onInput" - > - </div> - <div class="input-container"> - <label for="reg-repeat-pass" class="pl-1"> - Repeat Password - </label> - <input - id="reg-repeat-pass" - v-model="v$.repeatPass.$model" - type="password" - class="input-field primary input" - @input="onInput" - > - </div> - <div class="flex flex-row justify-end gap-4 pt-4"> - <button form="complete-registration" type="submit" class="btn primary"> - Submit - </button> - <button class="text-red-500 cursor-pointer" @click.prevent="cancel"> - Cancel - </button> - </div> - </fieldset> - </form> - </div> -</template> - -<script setup lang="ts"> - -import { isEqual } from 'lodash' -import useVuelidate from '@vuelidate/core' -import { required, minLength, maxLength, helpers } from '@vuelidate/validators' -import { apiCall, useMessage, useWait, useVuelidateWrapper, WebMessage } from '@vnuge/vnlib.browser' -import { computed, reactive, toRefs } from 'vue' - -const emit = defineEmits(['complete', 'cancel']) - -const props = defineProps<{ - token: string - regPath: string -}>() - -const { token, regPath } = toRefs(props) -const { onInput } = useMessage() -const { waiting } = useWait() - -const vState = reactive({ password: '', repeatPass: ''}) - -const rules = computed(() => { - return { - password: { - required: helpers.withMessage('Password cannot be empty', required), - minLength: helpers.withMessage('Password must be at least 8 characters', minLength(8)), - maxLength: helpers.withMessage(' must have less than 128 characters', maxLength(128)) - }, - repeatPass: { - sameAs: helpers.withMessage('Your passwords do not match', (value : string) => isEqual(value, v$.value.password.$model)), - required: helpers.withMessage('Repeat password cannot be empty', required), - minLength: helpers.withMessage('Repeat password must be at least 8 characters', minLength(8)), - maxLength: helpers.withMessage('Repeat password must have less than 128 characters', maxLength(128)) - }, - } -}) - -const v$ = useVuelidate(rules, vState, { $lazy: true }) - -const { validate } = useVuelidateWrapper(v$) - -const onSubmit = async function () { - - if (!await validate()) { - return - } - - await apiCall(async ({ axios }) => { - // finalize by passing the token and the new password - const { data } = await axios.post<WebMessage>(regPath.value, { - token: token.value, - password: v$.value.password.$model - }) - - //Throw if not successful - data.getResultOrThrow() - v$.value.$reset() - emit('complete') - - }) -} - -const cancel = () => emit('cancel') - -</script> - -<style> - -</style> diff --git a/front-end/src/views/Register/index.vue b/front-end/src/views/Register/index.vue deleted file mode 100644 index 92a5992..0000000 --- a/front-end/src/views/Register/index.vue +++ /dev/null @@ -1,161 +0,0 @@ -<template> - <div id="reg-template" class="app-component-entry"> - <div class="container flex flex-col m-auto my-2 duration-150 ease-linear lg:mt-16"> - <div class="text-center"> - <h2>Sign Up</h2> - </div> - <div class="mt-4 content-container"> - <form v-if="formState === 0" @submit.prevent="OnSubmit" :disabled="waiting"> - <fieldset class="input-group"> - <div class="input-container"> - <label for="reg-email" class="pl-1 text-sm">Email Address</label> - <input - id="reg-email" - v-model="v$.emailAddress.$model" - type="email" - placeholder="user@example.com" - required - class="input-field primary" - @input="onInput" - > - </div> - </fieldset> - <fieldset class="flex flex-row justify-between mt-6"> - <div> - <label class="checkbox primary"> - <input v-model="acceptedTerms" type="checkbox"> - <span class="check" /> - <span class="mx-2 text-sm"> - I agree to the - <a class="link" href="#">Terms of Service</a> - </span> - </label> - </div> - <div> - <button type="submit" :disabled="!acceptedTerms || waiting" class="btn primary"> - Submit - </button> - </div> - </fieldset> - </form> - <complete-reg - v-else-if="formState === 1" - :reg-path="regPath" - :token="token" - @cancel="formState = 0" - @complete="formState = 2" - /> - <div v-else> - <div class="text-center"> - <h3>Success</h3> - <fa-icon - :icon="['fa','check-circle']" - class="text-primary-500 dark:text-primary-600" - size="3x" - /> - <p class="mt-4"> - You may log in now. - </p> - </div> - </div> - </div> - </div> - </div> -</template> - -<script setup lang="ts"> -import { isNil } from 'lodash'; -import useVuelidate from '@vuelidate/core' -import { required, maxLength, email, helpers } from '@vuelidate/validators' -import { ref, reactive, watch } from 'vue' -import { useSession, apiCall, useMessage, useWait, useTitle, useVuelidateWrapper } from '@vnuge/vnlib.browser' -import CompleteReg from './components/CompleteReg.vue' -import { useRouter } from 'vue-router'; -import { useRouteQuery } from '@vueuse/router'; - -const regPath = "/account/registration" - -useTitle('Registration') - -const { setMessage, onInput } = useMessage() -const { waiting } = useWait() -const { browserId } = useSession() -const router = useRouter(); - -//Token is the t query argument -const token = useRouteQuery('t', null) - -const acceptedTerms = ref(false) -const formState = ref(isNil(token.value) ? 0 : 1) - -const vState = reactive({ - emailAddress: '' -}) - -const rules = { - emailAddress: { - required: helpers.withMessage('Email cannot be empty', required), - email: helpers.withMessage('Your email address is not valid', email), - maxLength: helpers.withMessage('Email address must be less than 50 characters', maxLength(50)) - } -} -const v$ = useVuelidate(rules, vState, { $lazy: true }) -const { validate } = useVuelidateWrapper(v$) - -const OnSubmit = async function () { - if (!acceptedTerms.value) { - setMessage('You must accept the terms of service to continue.') - return - } - if (!await validate()) { - return - } - await apiCall(async ({ axios, toaster }) => { - const response = await axios.put(regPath, { - username: v$.value.emailAddress.$model, - clientid: browserId.value, - localtime: new Date().toISOString() - }) - if (response.data.success) { - toaster.form.success({ - id: 'logout-success', - title: 'Success', - text: response.data.result, - duration: 5000 - } - ) - - acceptedTerms.value = false - v$.value.emailAddress.$model = ''; - //Clear form - v$.value.$reset() - } else { - setMessage(response.data.result) - } - }) -} - -watch(formState, () => { - //Clear token if formState is not 1 - v$.value.$reset() - acceptedTerms.value = false - v$.value.emailAddress.$model = ''; - router.push({ query: {} }) -}) - -</script> - -<style> -#reg-template .content-container{ - @apply mx-auto p-4 bg-white dark:bg-dark-700 border border-gray-200 dark:border-dark-500; - @apply sm:p-6 sm:rounded-md sm:shadow-sm w-full max-w-sm; -} - -#reg-template input.input-field { - @apply block w-full p-2 border-b-2 my-2; -} - -.content-container fieldset.input-group { - @apply mx-auto; -} -</style> |