Login Form with Icon

This tailwind example is contributed by Akai, on 28-Sep-2025. Component is made with Tailwind v3.4. similar terms for this example are Register, Sign in

Form Input Login Form

Author Akai

Tailwind v3.4 592 3

Fork Fullscreen

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .red-bg {
            background-color: #fef2f2 !important;
        }
        .red-bg-inner {
            background-color: #fef2f2 !important;
        }
        .error-message {
            display: none;
            color: #dc2626;
            font-size: 14px;
            margin-top: 5px;
        }
        .error-border {
            border-color: #dc2626 !important;
        }

.circle-img {
            border-radius: 50%;
            width: 100px;
            height: 100px;
            object-fit: cover;
        }

/* Принудительно добавляем красные стили */
        .bg-soft-red {
            background-color: #fef2f2; /* мягкий красный */
        }

.bg-red-button {
            background-color: #ef4444; /* стандартный красный */
        }

.bg-red-button:hover {
            background-color: #dc2626; /* темнее при наведении */
        }
    </style>
</head>
<body>
    <div class="flex h-screen red-bg">
        <div class="w-full max-w-xs m-auto rounded p-5 red-bg-inner">   
            <header>
                <img class="w-20 mx-auto mb-5 circle-img" src="https://i.postimg.cc/tJk6qR10/132343.png" />
            </header>   
            
            <form id="loginForm" novalidate>
                
                <input type="hidden" id="csrfToken" name="csrfToken" value="">

<div>
                    <label class="block mb-2 text-red-600" for="username">Логин</label>
                    <input class="w-full p-2 mb-2 text-red-700 border-b-2 border-red-500 outline-none red-bg-inner" 
                           type="text" 
                           id="username" 
                           name="username"
                           minlength="3"
                           required>
                    <div id="usernameError" class="error-message">Неверный логин</div>
                </div>
                <div>
                    <label class="block mb-2 text-red-600" for="password">Пароль</label>
                    <input class="w-full p-2 mb-2 text-red-700 border-b-2 border-red-500 outline-none red-bg-inner" 
                           type="password" 
                           id="password" 
                           name="password"
                           minlength="6"
                           required>
                    <div id="passwordError" class="error-message">Неверный пароль</div>
                </div>
                <div id="generalError" class="error-message mb-4 text-center"></div>
                <div>          
                    <button id="submitBtn" class="w-full bg-red-600 hover:bg-red-500 text-white font-bold py-2 px-4 mb-6 rounded bg-red-button" 
                            type="submit">
                        Войти
                    </button>
                </div>       
            </form>  
            <footer>
            </footer>   
        </div>
    </div>

function hideError(elementId) {
            const errorElement = document.getElementById(elementId);
            if (errorElement) errorElement.style.display = 'none';
        }

function addErrorBorder(elementId) {
            const inputElement = document.getElementById(elementId);
            if (inputElement) {
                inputElement.classList.add('error-border');
                inputElement.classList.remove('border-red-500');
            }
        }

function removeErrorBorder(elementId) {
            const inputElement = document.getElementById(elementId);
            if (inputElement) {
                inputElement.classList.remove('error-border');
                inputElement.classList.add('border-red-500');
            }
        }

// Генерация простого CSRF токена (локально)
        function generateToken(length = 32) {
            const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
            let token = '';
            const cryptoObj = window.crypto || window.msCrypto;
            if (cryptoObj && cryptoObj.getRandomValues) {
                const values = new Uint32Array(length);
                cryptoObj.getRandomValues(values);
                for (let i = 0; i < length; i++) {
                    token += chars[values[i] % chars.length];
                }
            } else {
                for (let i = 0; i < length; i++) {
                    token += chars[Math.floor(Math.random() * chars.length)];
                }
            }
            return token;
        }

// Инициализация CSRF token (если нет — создаём и сохраняем в localStorage)
        (function initCsrf() {
            try {
                const key = 'app_csrf_token_v1';
                let token = localStorage.getItem(key);
                if (!token) {
                    token = generateToken(48);
                    localStorage.setItem(key, token);
                }
                document.getElementById('csrfToken').value = token;
            } catch (e) {
                // в приватном режиме localStorage может быть недоступен — всё ок
                document.getElementById('csrfToken').value = generateToken(48);
            }
        })();

// Обработчики очистки ошибок при вводе
        document.getElementById('username').addEventListener('input', function() {
            hideError('usernameError');
            removeErrorBorder('username');
            hideError('generalError');
        });

document.getElementById('password').addEventListener('input', function() {
            hideError('passwordError');
            removeErrorBorder('password');
            hideError('generalError');
        });

// Отправка формы
        document.getElementById('loginForm').addEventListener('submit', function(e) {
            e.preventDefault();
            resetErrors();

const usernameEl = document.getElementById('username');
            const passwordEl = document.getElementById('password');
            const csrfEl = document.getElementById('csrfToken');
            const submitBtn = document.getElementById('submitBtn');

const username = usernameEl.value.trim();
            const password = passwordEl.value; // пароль оставляем как есть
            const csrfToken = csrfEl.value;

let hasError = false;

// Клиентская минимальная валидация (чтобы не отправлять очевидно неверные данные)
            if (username.length < 3) {
                showError('usernameError', 'Логин должен содержать не менее 3 символов');
                addErrorBorder('username');
                hasError = true;
            }

if (password.length < 6) {
                showError('passwordError', 'Пароль должен содержать не менее 6 символов');
                addErrorBorder('password');
                hasError = true;
            }

if (hasError) return;

// Блокируем кнопку, чтобы избежать дублей
            submitBtn.disabled = true;
            submitBtn.textContent = 'Отправка...';

// Отправляем POST запрос на сервер; видимых credentials в коде нет
            // Ожидаемый endpoint: POST /login
            // Заголовок X-CSRF-Token — добавлен
            fetch('/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-Token': csrfToken
                },
                body: JSON.stringify({ username: username, password: password }),
                credentials: 'same-origin' // при необходимости, можно менять
            })
            .then(async (response) => {
                // Разблокируем кнопку сразу после получения ответа
                submitBtn.disabled = false;
                submitBtn.textContent = 'Войти';

if (response.ok) {
                    // Успех — ожидается, что сервер вернёт JSON с { redirect: '/some' } или { success: true }
                    try {
                        const data = await response.json();
                        if (data && data.redirect) {
                            window.location.href = data.redirect;
                        } else {
                            // Без редиректа — чистое сообщение и редирект на корень
                            window.location.href = '/';
                        }
                    } catch (err) {
                        // Если тело ответа не JSON — просто редирект
                        window.location.href = '/';
                    }
                } else if (response.status === 401 || response.status === 403) {
                    // Неверные данные — нейтральное сообщение
                    showError('generalError', 'Ошибка входа. Проверьте данные и попробуйте снова.');
                } else if (response.status >= 400 && response.status < 500) {
                    // Другие клиентские ошибки
                    showError('generalError', 'Ошибка запроса. Попробуйте ещё раз.');
                } else {
                    // Серверные ошибки и прочее
                    showError('generalError', 'Сервер временно недоступен. Попробуйте позже.');
                }
            })
            .catch((err) => {
                // Сеть/timeout/отказ соединения
                submitBtn.disabled = false;
                submitBtn.textContent = 'Войти';
                showError('generalError', 'Не удалось соединиться с сервером. Попробуйте позднее.');
                console.warn('Login request failed:', err);
            });
        });
    </script>
</body>
</html>

Related Examples

Profile Form
Profile form for taking user inputs

TailwindFlex

4 years ago

15.4k
Tailwind CSS Radio Button Cards

Prashant

4 years ago

13.1k
Login Form with Icon

Prashant

4 years ago

18.9k
Login page with tailwind (SB admin 2)
This component features a split-screen design with a background image on one side and a registration form on the other.

Akshay

4 years ago

24.8k
Large File upload input

Akshay

4 years ago

15.3k
Login form

Gopi Yadav

3 years ago

12k
Sign in / Login Form

Bunny

4 years ago

14.6k
Simple Login Form
Very basic responsive login form. The form is centered within a white card with a shadow, featuring input fields for username and password. The design is clean and user-friendly.

Bunny

4 years ago

50.6k
Login Form

Amit Pachange

4 years ago

13.7k
Upload file input field

Gopi Yadav

3 years ago

15.8k
Sign In form

Amit Pachange

3 years ago

12.7k
Login form

Leon Bachmann

3 years ago

16k