import React from "react";
import { useEffect, useState } from "react";
import { getCsrfToken } from './../services/getCsrfService';

function MagicLogin ()
{
  //Состояние с введенным логином
  const [userLogin, setUserLogin] = useState<string>('');

  return (
    <div id="login-container">
      <div id="login-container__magic-name">Magic</div>
      <div id="login-container__form">
        <form action="login" method="POST" autoComplete="on">
          <input 
            type="hidden" 
            name="_token" 
            value={getCsrfToken()}
          />
          <input name="_auth_login" type="text" onChange={ (e) => setUserLogin(e.target.value) } placeholder="Логин" required/>
          <input name="_auth_password" type="password" placeholder="Пароль" required/>
          <button type="submit" onClick={ () => {
            //При сабмите кладем логин в локалсторадж для того, чтобы при вызове api ендпоинтов передавать его в заголовках
            //гаврилов
            //ТОЧНО ЛИ ЭТО НУЖНО? МОЖЕТ, ЛУЧШЕ ВСЕ API ЕНДПОИНТЫ ПЕРЕПИСАТ ПОД ВЫЗОВ WEB РОУТОВ?
            localStorage.setItem('magic_auth_login', userLogin);
            } }>Вход</button>
        </form>
      </div>
    </div>
  );
}

export default MagicLogin;