Apply aqua daisyUI theme and refactor login primitives
This commit is contained in:
Ruslan Bakiev
@@ -31,10 +31,6 @@ const requestCodeMutation = useMutation(RequestLoginCodeDocument);
|
||||
const verifyCodeMutation = useMutation(VerifyLoginCodeDocument);
|
||||
const consumeLoginTokenMutation = useMutation(ConsumeLoginTokenDocument);
|
||||
|
||||
const channelHint = computed(() => {
|
||||
return 'Email адрес';
|
||||
});
|
||||
|
||||
const telegramBotUrl = computed(() => config.public.telegramBotUrl || '');
|
||||
const maxBotUrl = computed(() => config.public.maxBotUrl || '');
|
||||
const selectedBotUrl = computed(() =>
|
||||
@@ -137,131 +133,126 @@ onMounted(async () => {
|
||||
|
||||
<template>
|
||||
<section class="mx-auto flex min-h-[calc(100vh-4rem)] w-full max-w-3xl items-center py-8">
|
||||
<div class="surface-card w-full rounded-[34px] p-5 md:p-8">
|
||||
<div class="mb-5 text-center">
|
||||
<h1 class="text-3xl font-extrabold text-[#0f2f20]">Вход в личный кабинет</h1>
|
||||
<p class="mt-1 text-sm text-[#28543f]/80">
|
||||
<div class="card w-full border border-base-300 bg-base-100 shadow-xl">
|
||||
<div class="card-body p-5 md:p-8">
|
||||
<div class="mb-4 text-center">
|
||||
<h1 class="text-3xl font-extrabold">Вход в личный кабинет</h1>
|
||||
<p class="mt-1 text-sm text-base-content/70">
|
||||
Email вход по коду. Telegram/Max вход через бота и временный токен.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mx-auto mb-5 flex w-full max-w-xl flex-wrap items-center justify-center gap-2">
|
||||
<button
|
||||
class="glass-capsule rounded-full px-4 py-2 text-sm font-semibold text-[#123824] transition hover:scale-[1.01]"
|
||||
:class="{ 'bg-[#139957] text-white': channel === 'EMAIL' }"
|
||||
@click="channel = 'EMAIL'"
|
||||
>
|
||||
Email
|
||||
</button>
|
||||
<button
|
||||
class="glass-capsule rounded-full px-4 py-2 text-sm font-semibold text-[#123824] transition hover:scale-[1.01]"
|
||||
:class="{ 'bg-[#139957] text-white': channel === 'TELEGRAM' }"
|
||||
@click="channel = 'TELEGRAM'"
|
||||
>
|
||||
Telegram
|
||||
</button>
|
||||
<button
|
||||
class="glass-capsule rounded-full px-4 py-2 text-sm font-semibold text-[#123824] transition hover:scale-[1.01]"
|
||||
:class="{ 'bg-[#139957] text-white': channel === 'MAX' }"
|
||||
@click="channel = 'MAX'"
|
||||
>
|
||||
Max
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="channel === 'EMAIL' && step === 'request'" class="space-y-3">
|
||||
<label class="form-control">
|
||||
<span class="label-text font-semibold text-[#194631]">{{ channelHint }}</span>
|
||||
<input
|
||||
v-model="destination"
|
||||
type="text"
|
||||
class="input input-bordered border-[#d0e8d8] bg-white/80"
|
||||
:placeholder="channelHint"
|
||||
>
|
||||
</label>
|
||||
|
||||
<button
|
||||
class="btn w-full border-0 bg-[#139957] text-white hover:bg-[#0d854a]"
|
||||
:disabled="requestCodeMutation.loading.value"
|
||||
@click="requestCode"
|
||||
>
|
||||
{{ requestCodeMutation.loading.value ? 'Отправляем…' : 'Получить код' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-else-if="channel === 'EMAIL'" class="space-y-3">
|
||||
<div class="rounded-xl border border-[#d6ebde] bg-white/75 p-3 text-sm text-[#214735]">
|
||||
Код отправлен на <span class="font-bold">{{ maskedDestination }}</span>.
|
||||
Действителен до: <span class="font-bold">{{ expiresAt }}</span>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<label class="form-control">
|
||||
<span class="label-text font-semibold text-[#194631]">Код подтверждения</span>
|
||||
<input
|
||||
v-model="code"
|
||||
type="text"
|
||||
maxlength="6"
|
||||
class="input input-bordered border-[#d0e8d8] bg-white/80"
|
||||
placeholder="123456"
|
||||
>
|
||||
</label>
|
||||
|
||||
<button
|
||||
class="btn w-full border-0 bg-[#139957] text-white hover:bg-[#0d854a]"
|
||||
:disabled="verifyCodeMutation.loading.value"
|
||||
@click="verifyCode"
|
||||
>
|
||||
{{ verifyCodeMutation.loading.value ? 'Проверяем…' : 'Войти' }}
|
||||
</button>
|
||||
|
||||
<button class="btn btn-ghost w-full" @click="step = 'request'">
|
||||
Выбрать другой канал
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-else class="space-y-4">
|
||||
<div class="rounded-xl border border-[#d6ebde] bg-white/75 p-3 text-sm text-[#214735]">
|
||||
Откройте {{ channel === 'TELEGRAM' ? 'Telegram' : 'Max' }}-бота, отправьте команду
|
||||
<span class="font-bold">{{ startCommand }}</span>, затем передайте боту свой <code>user_id</code>.
|
||||
Бот пришлёт кнопку входа в кабинет с временным токеном.
|
||||
<div class="mb-5 flex justify-center">
|
||||
<div class="join">
|
||||
<button class="btn join-item" :class="{ 'btn-primary': channel === 'EMAIL' }" @click="channel = 'EMAIL'">
|
||||
Email
|
||||
</button>
|
||||
<button class="btn join-item" :class="{ 'btn-primary': channel === 'TELEGRAM' }" @click="channel = 'TELEGRAM'">
|
||||
Telegram
|
||||
</button>
|
||||
<button class="btn join-item" :class="{ 'btn-primary': channel === 'MAX' }" @click="channel = 'MAX'">
|
||||
Max
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label class="form-control">
|
||||
<span class="label-text font-semibold text-[#194631]">Ваш user_id (для команды /start)</span>
|
||||
<input
|
||||
v-model="userIdForBot"
|
||||
type="text"
|
||||
class="input input-bordered border-[#d0e8d8] bg-white/80"
|
||||
placeholder="например: cm5abc123xyz"
|
||||
>
|
||||
</label>
|
||||
<div v-if="channel === 'EMAIL' && step === 'request'" class="space-y-4">
|
||||
<fieldset class="fieldset rounded-box border border-base-300 bg-base-200/40 p-4">
|
||||
<legend class="fieldset-legend text-sm font-semibold">Email адрес</legend>
|
||||
<label class="label pb-1">На этот адрес отправим код</label>
|
||||
<input
|
||||
v-model="destination"
|
||||
type="email"
|
||||
class="input input-bordered w-full"
|
||||
placeholder="name@company.com"
|
||||
>
|
||||
</fieldset>
|
||||
|
||||
<div class="grid gap-2 sm:grid-cols-2">
|
||||
<button class="btn btn-outline border-[#139957] text-[#0d854a]" @click="copyStartCommand">
|
||||
Скопировать команду
|
||||
<button
|
||||
class="btn btn-primary w-full"
|
||||
:disabled="requestCodeMutation.loading.value"
|
||||
@click="requestCode"
|
||||
>
|
||||
{{ requestCodeMutation.loading.value ? 'Отправляем…' : 'Получить код' }}
|
||||
</button>
|
||||
<a
|
||||
:href="selectedBotUrl || undefined"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="btn border-0 bg-[#139957] text-white hover:bg-[#0d854a]"
|
||||
:class="{ 'btn-disabled pointer-events-none': !selectedBotUrl }"
|
||||
>
|
||||
Открыть бота
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<p v-if="!selectedBotUrl" class="text-xs text-[#b42318]">
|
||||
Ссылка на {{ channel === 'TELEGRAM' ? 'Telegram' : 'Max' }}-бота не настроена в env.
|
||||
</p>
|
||||
</div>
|
||||
<div v-else-if="channel === 'EMAIL'" class="space-y-4">
|
||||
<div class="alert alert-info">
|
||||
Код отправлен на <span class="font-bold">{{ maskedDestination }}</span>.
|
||||
Действителен до: <span class="font-bold">{{ expiresAt }}</span>.
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="feedback"
|
||||
class="alert mt-4"
|
||||
:class="feedbackTone === 'success' ? 'alert-success' : 'alert-error'"
|
||||
>
|
||||
{{ feedback }}
|
||||
<fieldset class="fieldset rounded-box border border-base-300 bg-base-200/40 p-4">
|
||||
<legend class="fieldset-legend text-sm font-semibold">Код подтверждения</legend>
|
||||
<label class="label pb-1">Введите 6-значный код</label>
|
||||
<input
|
||||
v-model="code"
|
||||
type="text"
|
||||
maxlength="6"
|
||||
class="input input-bordered w-full"
|
||||
placeholder="123456"
|
||||
>
|
||||
</fieldset>
|
||||
|
||||
<button
|
||||
class="btn btn-primary w-full"
|
||||
:disabled="verifyCodeMutation.loading.value"
|
||||
@click="verifyCode"
|
||||
>
|
||||
{{ verifyCodeMutation.loading.value ? 'Проверяем…' : 'Войти' }}
|
||||
</button>
|
||||
|
||||
<button class="btn btn-ghost w-full" @click="step = 'request'">
|
||||
Выбрать другой канал
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-else class="space-y-4">
|
||||
<div class="alert alert-info">
|
||||
Откройте {{ channel === 'TELEGRAM' ? 'Telegram' : 'Max' }}-бота, отправьте команду
|
||||
<span class="font-bold">{{ startCommand }}</span>, затем передайте боту свой <code>user_id</code>.
|
||||
Бот пришлёт кнопку входа в кабинет с временным токеном.
|
||||
</div>
|
||||
|
||||
<fieldset class="fieldset rounded-box border border-base-300 bg-base-200/40 p-4">
|
||||
<legend class="fieldset-legend text-sm font-semibold">Ваш user_id</legend>
|
||||
<label class="label pb-1">Для команды /start в боте</label>
|
||||
<input
|
||||
v-model="userIdForBot"
|
||||
type="text"
|
||||
class="input input-bordered w-full"
|
||||
placeholder="например: cm5abc123xyz"
|
||||
>
|
||||
</fieldset>
|
||||
|
||||
<div class="grid gap-2 sm:grid-cols-2">
|
||||
<button class="btn btn-outline" @click="copyStartCommand">
|
||||
Скопировать команду
|
||||
</button>
|
||||
<a
|
||||
:href="selectedBotUrl || undefined"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="btn btn-primary"
|
||||
:class="{ 'btn-disabled pointer-events-none': !selectedBotUrl }"
|
||||
>
|
||||
Открыть бота
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<p v-if="!selectedBotUrl" class="text-xs text-error">
|
||||
Ссылка на {{ channel === 'TELEGRAM' ? 'Telegram' : 'Max' }}-бота не настроена в env.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="feedback"
|
||||
class="alert mt-2"
|
||||
:class="feedbackTone === 'success' ? 'alert-success' : 'alert-error'"
|
||||
>
|
||||
{{ feedback }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user