generated from VLADIMIR/template_frontend
144 lines
3.9 KiB
Vue
144 lines
3.9 KiB
Vue
<script setup lang="ts">
|
||
import { computed, ref } from 'vue'
|
||
|
||
import { NCard, NTabs, NTabPane, NCheckbox, NButton, NSpace, NInput, NAutoComplete, useMessage } from 'naive-ui'
|
||
import { useAuthStore } from '@/stores/auth';
|
||
import { useRouter } from 'vue-router';
|
||
|
||
const authStore = useAuthStore();
|
||
|
||
const router = useRouter()
|
||
|
||
const message = useMessage()
|
||
|
||
const username = ref('')
|
||
const email = ref('')
|
||
const password = ref('')
|
||
const approval = ref(false)
|
||
|
||
|
||
const options = computed(() => {
|
||
return ['@mail.ru', '@yandex.ru', '@gmail.com'].map((suffix) => {
|
||
const prefix = email.value.split('@')[0]
|
||
return {
|
||
label: prefix + suffix,
|
||
value: prefix + suffix
|
||
}
|
||
})
|
||
})
|
||
|
||
async function signin() {
|
||
const res = await authStore.login(email.value, password.value)
|
||
|
||
if (!res && authStore.error != null) {
|
||
message.error(authStore.error)
|
||
return
|
||
}
|
||
|
||
router.push('/office')
|
||
}
|
||
|
||
async function signup() {
|
||
if (!approval.value) {
|
||
return
|
||
}
|
||
const res = await authStore.signup(username.value, email.value)
|
||
if (!res && authStore.error != null) {
|
||
message.error(authStore.error)
|
||
return
|
||
}
|
||
message.info("Пароль отправлен на почту")
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<n-card style="margin-bottom: 16px" class="sign-card">
|
||
<n-tabs type="line" animated>
|
||
|
||
<n-tab-pane name="signin" tab="Вход">
|
||
<n-space vertical>
|
||
<div class="form-label">Почта</div>
|
||
<n-auto-complete v-model:value="email" :input-props="{
|
||
autocomplete: 'disabled',
|
||
}" :options="options" placeholder="detective@mail.ru" clearable />
|
||
<div class="form-label">Пароль</div>
|
||
<n-input v-model:value="password" type="password" placeholder="********" />
|
||
<div class="form-button-wrapper">
|
||
<div class="form-label">
|
||
<n-button @click="signin" :disabled="email.length == 0 || password.length == 0">
|
||
<span v-if="!authStore.isLoading">
|
||
Вход
|
||
</span>
|
||
<span v-else>
|
||
Подождите...
|
||
</span>
|
||
</n-button>
|
||
</div>
|
||
</div>
|
||
</n-space>
|
||
</n-tab-pane>
|
||
|
||
<n-tab-pane name="signup" tab="Регистрация">
|
||
<n-space vertical>
|
||
<div class="form-label">Позывной</div>
|
||
<n-input v-model:value="username" type="text" placeholder="Шерлок" />
|
||
<div class="form-label">Почта</div>
|
||
<n-auto-complete v-model:value="email" :input-props="{
|
||
autocomplete: 'disabled',
|
||
}" :options="options" placeholder="detective@mail.ru" clearable />
|
||
<div class="form-label">
|
||
<n-checkbox v-model:checked="approval">
|
||
Я согласен с
|
||
<a href="/user-agreement" target="_blank" class="docs-link">пользовательским соглашением</a><br>
|
||
и
|
||
<a href="/privacy-policy" target="_blank" class="docs-link">соглашением о персональных данных</a>
|
||
</n-checkbox>
|
||
</div>
|
||
<div class="form-button-wrapper">
|
||
<div class="form-label">
|
||
<n-button @click="signup" :disabled="username.length == 0 || password.length == 0 || !approval">
|
||
<span v-if="!authStore.isLoading">
|
||
Регистрация
|
||
</span>
|
||
<span v-else>
|
||
Подождите...
|
||
</span>
|
||
</n-button>
|
||
</div>
|
||
</div>
|
||
</n-space>
|
||
</n-tab-pane>
|
||
|
||
</n-tabs>
|
||
</n-card>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.sign-card {
|
||
background-color: rgb(29, 29, 29);
|
||
}
|
||
|
||
.form-label {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.form-button-wrapper {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.docs-link {
|
||
color: #45aa89;
|
||
}
|
||
|
||
.docs-link:hover {
|
||
color: #63e2b7;
|
||
}
|
||
|
||
@media (min-width: 1024px) {
|
||
.sign-card {
|
||
width: 380px;
|
||
}
|
||
}
|
||
</style>
|