179 lines
5.6 KiB
HTML
179 lines
5.6 KiB
HTML
<?php
|
||
/**
|
||
* @package Bicycle
|
||
* @description login.html — страница входа, два шага (логин/пароль → код с почты).
|
||
* Без общего layout — своя HTML-обвязка, страница входа не показывает
|
||
* навигацию сайта.
|
||
*
|
||
* @var string|null $error Сообщение об ошибке
|
||
* @var string $step 'credentials' | 'code'
|
||
*/
|
||
|
||
use System\Classes\CSRF;
|
||
|
||
?>
|
||
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Вход — Бюджет</title>
|
||
<link rel="stylesheet" href="/vendor/twbs/bootstrap-icons/font/bootstrap-icons.css">
|
||
<style>
|
||
:root {
|
||
--bg: #0b0b0f;
|
||
--surface: #17171d;
|
||
--ink: #f2f2f5;
|
||
--ink-soft: #c4c4cc;
|
||
--muted: #85858f;
|
||
--blue: #4c8dff;
|
||
}
|
||
|
||
* { box-sizing: border-box; }
|
||
|
||
body {
|
||
margin: 0;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: var(--bg);
|
||
color: var(--ink);
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||
}
|
||
|
||
.login-card {
|
||
width: 100%;
|
||
max-width: 360px;
|
||
background: var(--surface);
|
||
border-radius: 18px;
|
||
padding: 2.5rem 2rem;
|
||
box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .5);
|
||
}
|
||
|
||
.login-icon {
|
||
width: 56px;
|
||
height: 56px;
|
||
border-radius: 50%;
|
||
background: color-mix(in srgb, var(--blue) 20%, transparent);
|
||
color: var(--blue);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 auto 1rem;
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
h1 { font-size: 1.1rem; text-align: center; margin: 0 0 .5rem; }
|
||
|
||
.step-hint { font-size: .82rem; color: var(--muted); text-align: center; margin-bottom: 1.5rem; }
|
||
|
||
.field { margin-bottom: 1rem; }
|
||
|
||
label { display: block; font-size: .8rem; color: var(--ink-soft); margin-bottom: .35rem; }
|
||
|
||
input[type=text], input[type=password] {
|
||
width: 100%;
|
||
background: #0b0b0f;
|
||
border: 1px solid #2a2a33;
|
||
border-radius: 10px;
|
||
padding: .65rem .8rem;
|
||
color: var(--ink);
|
||
font-size: .95rem;
|
||
}
|
||
|
||
input:focus { outline: none; border-color: var(--blue); }
|
||
|
||
.remember { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--ink-soft); margin-bottom: 1.25rem; }
|
||
|
||
button[type=submit] {
|
||
width: 100%;
|
||
padding: .7rem;
|
||
border: none;
|
||
border-radius: 10px;
|
||
background: var(--blue);
|
||
color: #fff;
|
||
font-size: .95rem;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
}
|
||
|
||
button[type=submit]:hover { opacity: .9; }
|
||
|
||
.back-link {
|
||
display: block;
|
||
text-align: center;
|
||
margin-top: 1rem;
|
||
font-size: .82rem;
|
||
color: var(--muted);
|
||
text-decoration: none;
|
||
background: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.alert {
|
||
background: color-mix(in srgb, #f87171 20%, transparent);
|
||
color: #f87171;
|
||
border-radius: 10px;
|
||
padding: .6rem .8rem;
|
||
font-size: .85rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="login-card">
|
||
<div class="login-icon"><i class="bi bi-piggy-bank"></i></div>
|
||
<h1>Бюджет</h1>
|
||
|
||
<?php if ($error !== null): ?>
|
||
<div class="alert"><?= htmlspecialchars($error, ENT_QUOTES, 'UTF-8') ?></div>
|
||
<?php endif; ?>
|
||
|
||
<?php if ($step === 'code'): ?>
|
||
<div class="step-hint">Код отправлен на почту</div>
|
||
|
||
<form method="post" action="/login">
|
||
<?= CSRF::field() ?>
|
||
|
||
<div class="field">
|
||
<label for="code">Код из письма</label>
|
||
<input type="text" id="code" name="code" inputmode="numeric" autocomplete="one-time-code" autofocus>
|
||
</div>
|
||
|
||
<button type="submit">Подтвердить</button>
|
||
</form>
|
||
|
||
<button type="button" id="resend-code" class="back-link" disabled>Отправить код ещё раз</button>
|
||
|
||
<script src="/vendor/components/jquery/jquery.min.js"></script>
|
||
<script src="/App/media/js/login-code.js"></script>
|
||
<?php else: ?>
|
||
<div class="step-hint">Введите логин и пароль</div>
|
||
|
||
<form method="post" action="/login">
|
||
<?= CSRF::field() ?>
|
||
|
||
<div class="field">
|
||
<label for="login">Логин</label>
|
||
<input type="text" id="login" name="login" autocomplete="username" autofocus>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="password">Пароль</label>
|
||
<input type="password" id="password" name="password" autocomplete="current-password">
|
||
</div>
|
||
|
||
<label class="remember">
|
||
<input type="checkbox" name="remember" value="1">
|
||
Запомнить меня
|
||
</label>
|
||
|
||
<button type="submit">Войти</button>
|
||
</form>
|
||
<?php endif; ?>
|
||
</div>
|
||
</body>
|
||
</html>
|