pipu-music/apps/web/src/pages/LoginPage.tsx

import { useQuery } from '@tanstack/react-query';
import { useState, type FormEvent } from 'react';
import { useTranslation } from 'react-i18next';

import { useSession } from '../app/session';
import { useErrorText } from '../shared/lib/errors';
import { Button, Field, FormError } from '../shared/ui/ui';
import { AuthLayout } from './AuthLayout';
import s from './auth.module.css';

export function LoginPage() {
  const { t } = useTranslation(['auth', 'common']);
  const session = useSession();
  const errorText = useErrorText();
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<unknown>(null);

  const info = useQuery({
    queryKey: ['server-info'],
    queryFn: async () => (await session.client.GET('/api/v1/server-info')).data ?? null,
  });

  const submit = async (e: FormEvent) => {
    e.preventDefault();
    setBusy(true);
    setError(null);
    try {
      // Переход выполнит роутер: смена состояния сессии пересчитывает guards.
      await session.login(username.trim(), password);
    } catch (err) {
      setError(err);
      setPassword('');
      setBusy(false);
    }
  };

  return (
    <AuthLayout footer={info.data ? `pipu ${info.data.version}` : undefined}>
      <h1>{t('login.title')}</h1>
      <p className={s.lead}>{t('login.subtitle')}</p>
      {info.data?.bootstrap_required && <div className={s.hint}>{t('login.bootstrap_hint')}</div>}
      <form onSubmit={(e) => void submit(e)} noValidate>
        <Field
          label={t('login.username')}
          value={username}
          onChange={setUsername}
          autoComplete="username"
          autoCapitalize="none"
          spellCheck={false}
          required
        />
        <Field
          label={t('login.password')}
          type="password"
          value={password}
          onChange={setPassword}
          autoComplete="current-password"
          required
        />
        <FormError>{error ? errorText(error) : null}</FormError>
        <Button
          type="submit"
          variant="primary"
          className={s.submit}
          busy={busy}
          disabled={!username.trim() || !password}
        >
          {t('login.submit')}
        </Button>
      </form>
    </AuthLayout>
  );
}