136 lines
4.5 KiB
Vue
136 lines
4.5 KiB
Vue
<script setup lang="ts">
|
|
import type { User } from "~/types";
|
|
|
|
const { login, user, refreshMe } = useAuth();
|
|
const { claimAnonymousPushSubscriptions, consumePendingPushRoute } = usePush();
|
|
const route = useRoute();
|
|
const email = ref("");
|
|
const password = ref("");
|
|
const confirmPassword = ref("");
|
|
const showPassword = ref(false);
|
|
const showConfirmPassword = ref(false);
|
|
const error = ref("");
|
|
const redirectTarget = computed(() =>
|
|
typeof route.query.redirect === "string" ? route.query.redirect : "/"
|
|
);
|
|
|
|
watch(
|
|
user,
|
|
(currentUser) => {
|
|
if (currentUser) {
|
|
void navigateTo(redirectTarget.value);
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
|
|
const handleSubmit = async () => {
|
|
error.value = "";
|
|
|
|
if (!password.value || password.value.length < 6) {
|
|
error.value = "Пароль должен быть не короче 6 символов";
|
|
return;
|
|
}
|
|
|
|
if (password.value !== confirmPassword.value) {
|
|
error.value = "Пароли не совпадают";
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const result = await useApi<{ token?: string; user: User }>("/auth/register", {
|
|
method: "POST",
|
|
body: { email: email.value, password: password.value }
|
|
});
|
|
|
|
await login(result.token ?? null, result.user);
|
|
await refreshMe();
|
|
await claimAnonymousPushSubscriptions();
|
|
const redirectedFromPush = await consumePendingPushRoute();
|
|
if (!redirectedFromPush) {
|
|
await navigateTo(redirectTarget.value);
|
|
}
|
|
} catch (submitError) {
|
|
error.value = submitError instanceof Error ? submitError.message : "Ошибка регистрации";
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<section class="mx-auto grid min-h-[calc(100vh-12rem)] w-full items-center gap-8 md:max-w-6xl md:grid-cols-[minmax(0,1.1fr)_minmax(22rem,28rem)] md:[min-height:calc(100vh-10rem)]">
|
|
<div class="grid max-w-lg gap-3">
|
|
<p class="m-0 text-xs font-semibold uppercase tracking-[0.18em] text-(--muted)">Alpinbet</p>
|
|
<h1 class="m-0 text-4xl font-semibold leading-tight">Создание аккаунта</h1>
|
|
<p class="m-0 text-base leading-7 text-(--muted)">
|
|
После регистрации администратор сможет выдать доступы к нужным ботам и сигналам.
|
|
</p>
|
|
</div>
|
|
|
|
<form
|
|
class="grid w-full max-w-md gap-4 rounded-[28px] border p-4"
|
|
:style="{ borderColor: 'var(--border)', backgroundColor: 'var(--surface-strong)' }"
|
|
@submit.prevent="handleSubmit"
|
|
>
|
|
<p class="m-0 text-xs font-semibold uppercase tracking-[0.18em] text-(--muted)">Новый аккаунт</p>
|
|
|
|
<label class="grid gap-1">
|
|
<span>Email</span>
|
|
<input v-model="email" type="email" autocomplete="email" />
|
|
</label>
|
|
|
|
<label class="grid gap-1">
|
|
<span>Пароль</span>
|
|
<div class="password-field">
|
|
<input
|
|
v-model="password"
|
|
:type="showPassword ? 'text' : 'password'"
|
|
autocomplete="new-password"
|
|
/>
|
|
<button
|
|
type="button"
|
|
class="password-field__toggle"
|
|
:aria-label="showPassword ? 'Скрыть пароль' : 'Показать пароль'"
|
|
@click="showPassword = !showPassword"
|
|
>
|
|
<i class="pi" :class="showPassword ? 'pi-eye-slash' : 'pi-eye'" aria-hidden="true" />
|
|
</button>
|
|
</div>
|
|
</label>
|
|
|
|
<label class="grid gap-1">
|
|
<span>Повторите пароль</span>
|
|
<div class="password-field">
|
|
<input
|
|
v-model="confirmPassword"
|
|
:type="showConfirmPassword ? 'text' : 'password'"
|
|
autocomplete="new-password"
|
|
/>
|
|
<button
|
|
type="button"
|
|
class="password-field__toggle"
|
|
:aria-label="showConfirmPassword ? 'Скрыть пароль' : 'Показать пароль'"
|
|
@click="showConfirmPassword = !showConfirmPassword"
|
|
>
|
|
<i class="pi" :class="showConfirmPassword ? 'pi-eye-slash' : 'pi-eye'" aria-hidden="true" />
|
|
</button>
|
|
</div>
|
|
</label>
|
|
|
|
<p
|
|
v-if="error"
|
|
class="rounded-2xl p-4 text-sm whitespace-pre-line"
|
|
:style="{ backgroundColor: 'var(--danger-bg)', color: 'var(--danger-text)' }"
|
|
>
|
|
{{ error }}
|
|
</p>
|
|
|
|
<button type="submit">Создать аккаунт</button>
|
|
|
|
<p class="m-0 text-(--muted)">
|
|
Уже есть аккаунт?
|
|
<NuxtLink class="text-(--accent-strong)" to="/login">Войти</NuxtLink>
|
|
</p>
|
|
</form>
|
|
</section>
|
|
</template>
|