LibraryAPI/library_service/templates/auth.html

{% extends "base.html" %} {% block title %}LiB - Авторизация{% endblock %} {%
block content %}
<div class="flex flex-1 items-center justify-center p-4">
    <div class="w-full max-w-md">
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="flex border-b border-gray-200">
                <button
                    type="button"
                    id="login-tab"
                    class="flex-1 py-4 text-center font-medium transition duration-200 text-gray-700 bg-gray-50 border-b-2 border-gray-500"
                >
                    Вход
                </button>
                <button
                    type="button"
                    id="register-tab"
                    class="flex-1 py-4 text-center font-medium transition duration-200 text-gray-400 hover:text-gray-600"
                >
                    Регистрация
                </button>
            </div>

            <form id="login-form" class="p-6">
                <div class="mb-4">
                    <label
                        for="login-username"
                        class="block text-sm font-medium text-gray-700 mb-2"
                        >Имя пользователя</label
                    >
                    <input
                        type="text"
                        id="login-username"
                        name="username"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-500 focus:border-transparent outline-none transition duration-200"
                        placeholder="Введите имя пользователя"
                        required
                    />
                </div>
                <div class="mb-4">
                    <label
                        for="login-password"
                        class="block text-sm font-medium text-gray-700 mb-2"
                        >Пароль</label
                    >
                    <div class="relative">
                        <input
                            type="password"
                            id="login-password"
                            name="password"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-500 focus:border-transparent outline-none transition duration-200"
                            placeholder="Введите пароль"
                            required
                        />
                        <button
                            type="button"
                            class="toggle-password absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
                            onclick="togglePassword(this)"
                        >
                            <svg
                                class="eye-open w-5 h-5"
                                fill="none"
                                stroke="currentColor"
                                viewBox="0 0 24 24"
                            >
                                <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                                ></path>
                                <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
                                ></path>
                            </svg>
                            <svg
                                class="eye-closed w-5 h-5 hidden"
                                fill="none"
                                stroke="currentColor"
                                viewBox="0 0 24 24"
                            >
                                <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
                                ></path>
                            </svg>
                        </button>
                    </div>
                </div>
                <div class="flex items-center justify-between mb-6">
                    <label
                        class="custom-checkbox flex items-center text-sm text-gray-600"
                    >
                        <input type="checkbox" id="remember-me" />
                        <span class="checkmark"></span>Запомнить меня
                    </label>
                    <a
                        href="#"
                        class="text-sm text-gray-500 hover:text-gray-700 transition"
                        >Забыли пароль?</a
                    >
                </div>
                <div
                    id="login-error"
                    class="hidden mb-4 p-3 bg-red-100 border border-red-300 text-red-700 rounded-lg text-sm"
                ></div>
                <button
                    type="submit"
                    id="login-submit"
                    class="w-full bg-gray-500 text-white py-3 px-4 rounded-lg hover:bg-gray-600 transition duration-200 font-medium"
                >
                    Войти
                </button>
            </form>
            <form
                id="register-form"
                class="p-6 hidden"
                onsubmit="return handleRegister(event);"
            >
                <div class="mb-4">
                    <label
                        for="register-username"
                        class="block text-sm font-medium text-gray-700 mb-2"
                        >Имя пользователя</label
                    >
                    <input
                        type="text"
                        id="register-username"
                        name="username"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-500 focus:border-transparent outline-none transition duration-200"
                        placeholder="Придумайте имя пользователя (мин. 3 символа)"
                        required
                        minlength="3"
                        maxlength="50"
                    />
                </div>
                <div class="mb-4">
                    <label
                        for="register-email"
                        class="block text-sm font-medium text-gray-700 mb-2"
                        >Email</label
                    >
                    <input
                        type="email"
                        id="register-email"
                        name="email"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-500 focus:border-transparent outline-none transition duration-200"
                        placeholder="example@mail.com"
                        required
                    />
                </div>
                <div class="mb-4">
                    <label
                        for="register-fullname"
                        class="block text-sm font-medium text-gray-700 mb-2"
                        >Полное имя
                        <span class="text-gray-400"
                            >(необязательно)</span
                        ></label
                    >
                    <input
                        type="text"
                        id="register-fullname"
                        name="full_name"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-500 focus:border-transparent outline-none transition duration-200"
                        placeholder="Иван Иванов"
                        maxlength="100"
                    />
                </div>
                <div class="mb-4">
                    <label
                        for="register-password"
                        class="block text-sm font-medium text-gray-700 mb-2"
                        >Пароль</label
                    >
                    <div class="relative">
                        <input
                            type="password"
                            id="register-password"
                            name="password"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-500 focus:border-transparent outline-none transition duration-200"
                            placeholder="Минимум 8 символов, A-Z, a-z, 0-9"
                            required
                            minlength="8"
                            maxlength="100"
                        />
                        <button
                            type="button"
                            class="toggle-password absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
                            onclick="togglePassword(this)"
                        >
                            <svg
                                class="eye-open w-5 h-5"
                                fill="none"
                                stroke="currentColor"
                                viewBox="0 0 24 24"
                            >
                                <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                                ></path>
                                <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
                                ></path>
                            </svg>
                            <svg
                                class="eye-closed w-5 h-5 hidden"
                                fill="none"
                                stroke="currentColor"
                                viewBox="0 0 24 24"
                            >
                                <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
                                ></path>
                            </svg>
                        </button>
                    </div>
                    <div class="mt-2">
                        <div
                            class="h-1 w-full bg-gray-200 rounded-full overflow-hidden"
                        >
                            <div
                                id="password-strength-bar"
                                class="h-full w-0 transition-all duration-300"
                            ></div>
                        </div>
                        <p
                            id="password-strength-text"
                            class="text-xs mt-1 text-gray-500"
                        ></p>
                    </div>
                </div>
                <div class="mb-4">
                    <label
                        for="register-password-confirm"
                        class="block text-sm font-medium text-gray-700 mb-2"
                        >Подтвердите пароль</label
                    >
                    <div class="relative">
                        <input
                            type="password"
                            id="register-password-confirm"
                            name="password_confirm"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-500 focus:border-transparent outline-none transition duration-200"
                            placeholder="Повторите пароль"
                            required
                        />
                        <button
                            type="button"
                            class="toggle-password absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
                            onclick="togglePassword(this)"
                        >
                            <svg
                                class="eye-open w-5 h-5"
                                fill="none"
                                stroke="currentColor"
                                viewBox="0 0 24 24"
                            >
                                <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                                ></path>
                                <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
                                ></path>
                            </svg>
                            <svg
                                class="eye-closed w-5 h-5 hidden"
                                fill="none"
                                stroke="currentColor"
                                viewBox="0 0 24 24"
                            >
                                <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
                                ></path>
                            </svg>
                        </button>
                    </div>
                    <p
                        id="password-match-error"
                        class="text-xs mt-1 text-red-500 hidden"
                    >
                        Пароли не совпадают
                    </p>
                </div>
                <div
                    id="register-error"
                    class="hidden mb-4 p-3 bg-red-100 border border-red-300 text-red-700 rounded-lg text-sm"
                ></div>
                <div
                    id="register-success"
                    class="hidden mb-4 p-3 bg-green-100 border border-green-300 text-green-700 rounded-lg text-sm"
                ></div>
                <button
                    type="submit"
                    id="register-submit"
                    class="w-full bg-gray-500 text-white py-3 px-4 rounded-lg hover:bg-gray-600 transition duration-200 font-medium disabled:bg-gray-300 disabled:cursor-not-allowed"
                >
                    Зарегистрироваться
                </button>
            </form>
        </div>
    </div>
</div>
{% endblock %} {% block scripts %}
<script type="text/javascript" src="/static/auth.js"></script>
{% endblock %}