2018-09-06 17:46:38 +00:00
|
|
|
<template>
|
2018-11-01 21:34:29 +00:00
|
|
|
<div>
|
2021-12-11 21:08:26 +00:00
|
|
|
<message variant="danger" v-if="errorMessage !== ''" class="mb-4">
|
2021-12-12 16:40:13 +00:00
|
|
|
{{ errorMessage }}
|
|
|
|
</message>
|
|
|
|
<form @submit.prevent="submit" id="registerform">
|
|
|
|
<div class="field">
|
|
|
|
<label class="label" for="username">{{ $t('user.auth.username') }}</label>
|
|
|
|
<div class="control">
|
|
|
|
<input
|
|
|
|
class="input"
|
|
|
|
id="username"
|
|
|
|
name="username"
|
|
|
|
:placeholder="$t('user.auth.usernamePlaceholder')"
|
|
|
|
required
|
|
|
|
type="text"
|
|
|
|
autocomplete="username"
|
|
|
|
v-focus
|
|
|
|
v-model="credentials.username"
|
|
|
|
@keyup.enter="submit"
|
2021-11-28 15:33:03 +00:00
|
|
|
@focusout="validateUsername"
|
2021-12-12 16:40:13 +00:00
|
|
|
/>
|
2018-11-01 21:34:29 +00:00
|
|
|
</div>
|
2021-11-28 15:33:03 +00:00
|
|
|
<p class="help is-danger" v-if="!usernameValid">
|
|
|
|
{{ $t('user.auth.usernameRequired') }}
|
|
|
|
</p>
|
2021-12-12 16:40:13 +00:00
|
|
|
</div>
|
|
|
|
<div class="field">
|
|
|
|
<label class="label" for="email">{{ $t('user.auth.email') }}</label>
|
|
|
|
<div class="control">
|
|
|
|
<input
|
|
|
|
class="input"
|
|
|
|
id="email"
|
|
|
|
name="email"
|
|
|
|
:placeholder="$t('user.auth.emailPlaceholder')"
|
|
|
|
required
|
|
|
|
type="email"
|
|
|
|
v-model="credentials.email"
|
|
|
|
@keyup.enter="submit"
|
2021-11-28 15:33:03 +00:00
|
|
|
@focusout="validateEmail"
|
2021-12-12 16:40:13 +00:00
|
|
|
/>
|
2018-11-01 21:34:29 +00:00
|
|
|
</div>
|
2021-11-28 15:33:03 +00:00
|
|
|
<p class="help is-danger" v-if="!emailValid">
|
|
|
|
{{ $t('user.auth.emailInvalid') }}
|
|
|
|
</p>
|
2021-12-12 16:40:13 +00:00
|
|
|
</div>
|
|
|
|
<div class="field">
|
|
|
|
<label class="label" for="password">{{ $t('user.auth.password') }}</label>
|
2021-12-26 12:37:33 +00:00
|
|
|
<password @submit="submit" @update:modelValue="v => credentials.password = v" :validate-initially="validatePasswordInitially"/>
|
2021-12-12 16:40:13 +00:00
|
|
|
</div>
|
2018-09-06 18:15:49 +00:00
|
|
|
|
2021-12-11 21:15:43 +00:00
|
|
|
<x-button
|
2022-09-24 13:20:40 +00:00
|
|
|
:loading="isLoading"
|
2021-12-11 21:15:43 +00:00
|
|
|
id="register-submit"
|
|
|
|
@click="submit"
|
|
|
|
class="mr-2"
|
|
|
|
:disabled="!everythingValid"
|
|
|
|
>
|
|
|
|
{{ $t('user.auth.createAccount') }}
|
|
|
|
</x-button>
|
|
|
|
<p class="mt-2">
|
|
|
|
{{ $t('user.auth.alreadyHaveAnAccount') }}
|
|
|
|
<router-link :to="{ name: 'user.login' }">
|
|
|
|
{{ $t('user.auth.login') }}
|
|
|
|
</router-link>
|
|
|
|
</p>
|
2021-12-12 16:40:13 +00:00
|
|
|
</form>
|
2018-09-06 17:46:38 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
2022-02-15 12:07:34 +00:00
|
|
|
<script setup lang="ts">
|
2021-11-28 15:33:03 +00:00
|
|
|
import {useDebounceFn} from '@vueuse/core'
|
2021-12-26 12:42:21 +00:00
|
|
|
import {ref, reactive, toRaw, computed, onBeforeMount} from 'vue'
|
2018-09-06 17:46:38 +00:00
|
|
|
|
2021-11-14 20:57:36 +00:00
|
|
|
import router from '@/router'
|
2022-06-23 01:08:35 +00:00
|
|
|
import Message from '@/components/misc/message.vue'
|
2021-11-28 15:33:03 +00:00
|
|
|
import {isEmail} from '@/helpers/isEmail'
|
2022-06-23 01:08:35 +00:00
|
|
|
import Password from '@/components/input/password.vue'
|
2022-09-24 13:20:40 +00:00
|
|
|
|
2022-09-21 01:37:39 +00:00
|
|
|
import {useAuthStore} from '@/stores/auth'
|
|
|
|
|
|
|
|
const authStore = useAuthStore()
|
2018-09-06 17:46:38 +00:00
|
|
|
|
2021-11-14 20:57:36 +00:00
|
|
|
// FIXME: use the `beforeEnter` hook of vue-router
|
|
|
|
// Check if the user is already logged in, if so, redirect them to the homepage
|
|
|
|
onBeforeMount(() => {
|
2022-09-21 01:37:39 +00:00
|
|
|
if (authStore.authenticated) {
|
2021-11-14 20:57:36 +00:00
|
|
|
router.push({name: 'home'})
|
|
|
|
}
|
|
|
|
})
|
2020-09-05 20:35:52 +00:00
|
|
|
|
2021-11-14 20:57:36 +00:00
|
|
|
const credentials = reactive({
|
|
|
|
username: '',
|
|
|
|
email: '',
|
|
|
|
password: '',
|
|
|
|
})
|
|
|
|
|
2022-09-30 10:52:21 +00:00
|
|
|
const isLoading = computed(() => authStore.isLoading)
|
2021-11-14 20:57:36 +00:00
|
|
|
const errorMessage = ref('')
|
2021-12-26 12:37:33 +00:00
|
|
|
const validatePasswordInitially = ref(false)
|
2021-11-14 20:57:36 +00:00
|
|
|
|
2021-11-28 15:33:03 +00:00
|
|
|
const DEBOUNCE_TIME = 100
|
|
|
|
|
|
|
|
// debouncing to prevent error messages when clicking on the log in button
|
|
|
|
const emailValid = ref(true)
|
|
|
|
const validateEmail = useDebounceFn(() => {
|
|
|
|
emailValid.value = isEmail(credentials.email)
|
|
|
|
}, DEBOUNCE_TIME)
|
|
|
|
|
|
|
|
const usernameValid = ref(true)
|
|
|
|
const validateUsername = useDebounceFn(() => {
|
|
|
|
usernameValid.value = credentials.username !== ''
|
|
|
|
}, DEBOUNCE_TIME)
|
|
|
|
|
|
|
|
const everythingValid = computed(() => {
|
|
|
|
return credentials.username !== '' &&
|
|
|
|
credentials.email !== '' &&
|
|
|
|
credentials.password !== '' &&
|
|
|
|
emailValid.value &&
|
2021-12-26 12:37:33 +00:00
|
|
|
usernameValid.value
|
2021-11-28 15:33:03 +00:00
|
|
|
})
|
|
|
|
|
2021-11-14 20:57:36 +00:00
|
|
|
async function submit() {
|
|
|
|
errorMessage.value = ''
|
2021-12-26 12:37:33 +00:00
|
|
|
validatePasswordInitially.value = true
|
2021-11-14 20:57:36 +00:00
|
|
|
|
2021-11-28 15:33:03 +00:00
|
|
|
if (!everythingValid.value) {
|
2021-11-14 20:57:36 +00:00
|
|
|
return
|
|
|
|
}
|
|
|
|
|
|
|
|
try {
|
2022-09-21 01:37:39 +00:00
|
|
|
await authStore.register(toRaw(credentials))
|
2022-10-17 11:14:07 +00:00
|
|
|
} catch (e: any) {
|
|
|
|
errorMessage.value = e?.message
|
2021-11-14 20:57:36 +00:00
|
|
|
}
|
2020-09-05 20:35:52 +00:00
|
|
|
}
|
2018-09-06 17:46:38 +00:00
|
|
|
</script>
|