96 lines
4.3 KiB
Vue
96 lines
4.3 KiB
Vue
<script setup>
|
|
import { Head, useForm, usePage } from '@inertiajs/vue3';
|
|
import { computed } from 'vue';
|
|
import PortalLayout from '../../Layouts/PortalLayout.vue';
|
|
import { arrowSvg, moonMark } from '../Landing/Components/symbols';
|
|
|
|
const props = defineProps({
|
|
site: { type: Object, required: true },
|
|
auth: { type: Object, required: true },
|
|
urls: { type: Object, required: true },
|
|
flash: { type: Object, default: () => ({}) },
|
|
old: { type: Object, default: () => ({}) },
|
|
});
|
|
|
|
const page = usePage();
|
|
const sharedErrors = computed(() => page.props.errors || {});
|
|
const form = useForm({
|
|
username: props.old.username || '',
|
|
password: '',
|
|
});
|
|
|
|
function submit() {
|
|
form.post(props.urls.login_store, {
|
|
preserveScroll: true,
|
|
onError: () => form.reset('password'),
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Head>
|
|
<title>Вход в личный кабинет — {{ site.name }}</title>
|
|
<meta name="description" content="Вход в личный кабинет игрового сервера MoonWell." />
|
|
</Head>
|
|
|
|
<PortalLayout :site="site" :auth="auth" :urls="urls" :flash="flash">
|
|
<section class="portal-auth wrap">
|
|
<div class="portal-auth__intro">
|
|
<span class="eyebrow">Личный кабинет</span>
|
|
<h1 class="h-display">Вернись к своему приключению</h1>
|
|
<p class="lead">
|
|
Используй логин и пароль игрового аккаунта. Здесь тебя ждут персонажи,
|
|
баланс, настройки безопасности и лаунчер.
|
|
</p>
|
|
|
|
<div class="portal-feature-list">
|
|
<div><span>01</span><p>Все персонажи аккаунта в одной сводке</p></div>
|
|
<div><span>02</span><p>Пополнение Слёз Элуны и история операций</p></div>
|
|
<div><span>03</span><p>Смена игрового пароля без ручных команд</p></div>
|
|
</div>
|
|
</div>
|
|
|
|
<form class="portal-card portal-form-card corners" @submit.prevent="submit">
|
|
<div class="portal-form-card__mark" v-html="moonMark(48)"></div>
|
|
<span class="eyebrow">Авторизация</span>
|
|
<h2 class="h-serif">Войти в аккаунт</h2>
|
|
<p>Вход выполняется по игровым учётным данным.</p>
|
|
|
|
<label :class="['portal-field', { 'has-error': sharedErrors.username || form.errors.username }]">
|
|
<span>Логин</span>
|
|
<input
|
|
v-model="form.username"
|
|
type="text"
|
|
autocomplete="username"
|
|
maxlength="16"
|
|
placeholder="Moonwalker"
|
|
autofocus
|
|
required
|
|
/>
|
|
<small v-if="form.errors.username || sharedErrors.username">{{ form.errors.username || sharedErrors.username }}</small>
|
|
</label>
|
|
|
|
<label :class="['portal-field', { 'has-error': sharedErrors.password || form.errors.password }]">
|
|
<span>Пароль</span>
|
|
<input
|
|
v-model="form.password"
|
|
type="password"
|
|
autocomplete="current-password"
|
|
maxlength="255"
|
|
placeholder="Твой пароль"
|
|
required
|
|
/>
|
|
<small v-if="form.errors.password || sharedErrors.password">{{ form.errors.password || sharedErrors.password }}</small>
|
|
</label>
|
|
|
|
<button class="btn btn-primary portal-submit" type="submit" :disabled="form.processing">
|
|
{{ form.processing ? 'Входим…' : 'Войти в кабинет' }}
|
|
<span v-html="arrowSvg"></span>
|
|
</button>
|
|
|
|
<a class="portal-back-link" :href="urls.home">← Вернуться на главную</a>
|
|
</form>
|
|
</section>
|
|
</PortalLayout>
|
|
</template>
|