create-exam-project/templates/base/client/src/pages/Login.jsx

Create exam projects with React + Express + PostgreSQL in seconds

import { useState } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { useForm } from 'react-hook-form'
import { useAuth } from '../contexts/AuthContext'
import { useConfig } from '../contexts/ConfigContext'
import toast from 'react-hot-toast'

export default function Login() {
  const { login } = useAuth()
  const { config } = useConfig()
  const navigate = useNavigate()
  const [isLoading, setIsLoading] = useState(false)
  const { register, handleSubmit, formState: { errors } } = useForm()

  const onSubmit = async (data) => {
    setIsLoading(true)
    console.log('Login attempt:', data)
    const result = await login(data)
    console.log('Login result:', result)
    setIsLoading(false)
    
    if (result.success) {
      console.log('User role:', result.user?.role)
      // Проверяем роль пользователя, а не логин
      if (result.user?.role === 'admin') {
        console.log('Redirecting to admin dashboard')
        navigate('/admin/dashboard')
      } else {
        console.log('Redirecting to user dashboard')
        navigate('/dashboard')
      }
    }
  }

  return (
    <div className="min-h-screen flex flex-col items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-md w-full space-y-8">
        <div className="text-center">
          <span className="text-5xl">{config.theme.logo}</span>
          <h2 className="mt-6 text-3xl font-extrabold text-gray-900">
            {config.title}
          </h2>
          <p className="mt-2 text-sm text-gray-600">
            Войдите в свою учетную запись
          </p>
        </div>
        
        <form className="mt-8 space-y-6 card" onSubmit={handleSubmit(onSubmit)}>
          <div className="space-y-4">
            <div>
              <label htmlFor="login" className="label">
                Логин
              </label>
              <input
                {...register('login', { required: 'Введите логин' })}
                type="text"
                className={`input ${errors.login ? 'input-error' : ''}`}
                placeholder="Введите логин"
              />
              {errors.login && (
                <p className="mt-1 text-sm text-red-600">{errors.login.message}</p>
              )}
            </div>

            <div>
              <label htmlFor="password" className="label">
                Пароль
              </label>
              <input
                {...register('password', { required: 'Введите пароль' })}
                type="password"
                className={`input ${errors.password ? 'input-error' : ''}`}
                placeholder="Введите пароль"
              />
              {errors.password && (
                <p className="mt-1 text-sm text-red-600">{errors.password.message}</p>
              )}
            </div>
          </div>

          <div>
            <button
              type="submit"
              disabled={isLoading}
              className="w-full btn-primary"
            >
              {isLoading ? 'Вход...' : 'Войти'}
            </button>
          </div>

          <div className="text-center">
            <span className="text-sm text-gray-600">
              Нет аккаунта?{' '}
              <Link to="/register" className="font-medium text-primary-600 hover:text-primary-500">
                Зарегистрироваться
              </Link>
            </span>
          </div>

          {/* Подсказка для админа */}
          <div className="mt-4 p-4 bg-blue-50 rounded-md">
            <p className="text-sm text-blue-700">
              <strong>Для администратора:</strong><br />
              Логин: {config.admin.login}<br />
              Пароль: {config.admin.password}
            </p>
          </div>
        </form>
      </div>
    </div>
  )
}