Luncher/client/src/Login.tsx

import React, { useCallback, useEffect, useRef } from 'react';
import { Button } from 'react-bootstrap';
import { useAuth } from './context/auth';
import { login } from '../../types';
import './Login.css';

/**
 * Formulář pro prvotní zadání přihlašovacího jména.
 */
export default function Login() {
  const auth = useAuth();
  const loginRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (auth && !auth.login) {
      // Vyzkoušíme přihlášení "naprázdno", pokud projde, přihlásili nás trusted headers
      login().then(response => {
        const token = response.data;
        if (token) {
          auth?.setToken(token as unknown as string); // TODO vyřešit, API definice je špatně, je to skutečně string
        }
      }).catch(error => {
        // nezajímá nás
      });
    }
  }, [auth]);

  const doLogin = useCallback(async () => {
    const length = loginRef?.current?.value.length && loginRef.current.value.replaceAll(/\s/g, '').length
    if (length) {
      const response = await login({ body: { login: loginRef.current?.value } });
      if (response.data) {
        auth?.setToken(response.data as unknown as string); // TODO vyřešit
      }
    }
  }, [auth]);

  if (!auth?.login) {
    return (
      <div className='login-page'>
        <div className='login-card'>
          <h1 className='login-logo'>Luncher</h1>
          <p className='login-subtitle'>Aplikace pro profesionální management obědů</p>
          <div className='login-form'>
            <div>
              <label htmlFor="login-input">Zobrazované jméno</label>
              <input
                id="login-input"
                ref={loginRef}
                type='text'
                placeholder="Např. Jan Novák"
                onKeyDown={event => {
                  if (event.key === 'Enter') {
                    doLogin()
                  }
                }}
              />
              <p className='hint'>
                Zadejte jméno nebo přezdívku, pod kterou vás kolegové snadno identifikují.
                Jméno je možné kdykoli změnit.
              </p>
            </div>
            <Button onClick={doLogin}>Pokračovat</Button>
          </div>
        </div>
      </div>
    );
  }
  return <div>Neplatný stav</div>
}