82 lines
2.1 KiB
Vue
82 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import cardView from '@/components/basics/cardView.vue';
|
|
import outlinedButton from '@/components/basics/outlinedButton.vue';
|
|
import { useAccountStore } from '@/stores/account.store';
|
|
import { getEmailRules, getPasswordRules, getStringRules } from '@/scripts/validationRules';
|
|
import { useRouter } from 'vue-router';
|
|
|
|
const showRegisterCard = defineModel("showRegisterCard", { type: Boolean, default: false })
|
|
const accountStore = useAccountStore()
|
|
const router = useRouter()
|
|
|
|
async function registerAccount() {
|
|
accountStore.registerAccount()
|
|
.then(result => {
|
|
if (result) {
|
|
router.push("/account/home")
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<card-view
|
|
:title="$t('account.register')"
|
|
icon="mdi-account-plus"
|
|
>
|
|
<v-row>
|
|
<v-col>
|
|
<v-text-field
|
|
:label="$t('account.username')"
|
|
prepend-icon="mdi-account"
|
|
v-model="accountStore.registerData.username"
|
|
clearable
|
|
:rules="getStringRules()"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-row>
|
|
<v-col>
|
|
<v-text-field
|
|
:label="$t('account.password')"
|
|
prepend-icon="mdi-key"
|
|
type="password"
|
|
v-model="accountStore.registerData.password"
|
|
clearable
|
|
:rules="getPasswordRules()"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-row>
|
|
<v-col>
|
|
<v-text-field
|
|
:label="$t('account.email')"
|
|
prepend-icon="mdi-mail"
|
|
v-model="accountStore.registerData.email"
|
|
:rules="getEmailRules()"
|
|
clearable
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<template #actions>
|
|
<outlined-button
|
|
prepend-icon="mdi-arrow-left"
|
|
@click="showRegisterCard = false"
|
|
:disabled="accountStore.fetchInProgress"
|
|
>
|
|
{{ $t('account.backToLogin') }}
|
|
</outlined-button>
|
|
|
|
<outlined-button
|
|
prepend-icon="mdi-account-plus"
|
|
@click="registerAccount"
|
|
:loading="accountStore.fetchInProgress"
|
|
>
|
|
{{ $t('account.register') }}
|
|
</outlined-button>
|
|
</template>
|
|
</card-view>
|
|
</template> |