generated from VLADIMIR/template_frontend
106 lines
3.0 KiB
Vue
106 lines
3.0 KiB
Vue
<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">Вход</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">Регистрация</n-button>
|
||
</div>
|
||
</div>
|
||
</n-space>
|
||
</n-tab-pane>
|
||
|
||
</n-tabs>
|
||
</n-card>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { computed, ref } from 'vue'
|
||
|
||
import { NCard, NTabs, NTabPane, NCheckbox, NButton, NSpace, NInput, NAutoComplete } from 'naive-ui'
|
||
|
||
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
|
||
}
|
||
})
|
||
})
|
||
|
||
function signin() {
|
||
console.log(email.value)
|
||
console.log(password.value)
|
||
}
|
||
|
||
function signup() {
|
||
console.log(username.value)
|
||
console.log(email.value)
|
||
console.log(approval.value)
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.sign-card {
|
||
width: 380px;
|
||
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;
|
||
}
|
||
</style>
|