import React from 'react';
import authorization from '../../../services/authorization';
import './SignInForm.css';

function SignInForm() {
  const executeLogin = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const username = ((event.target as unknown) as Array<HTMLFormElement>)[0].value as string;
    const password = ((event.target as unknown) as Array<HTMLFormElement>)[1].value as string;

    authorization.login(username, password);
  };
  return (
    <form className='form-signin text-center' onSubmit={executeLogin}>
      <img className='mb-4' src='../../../static/AliorLogo.png' alt='' width='50%' height='50%' />
      <h1 className='h3 mb-3 font-weight-normal'>Please sign in</h1>
      <label htmlFor='username' className='sr-only'>
        Username
      </label>
      <input type='text' id='inputEmail' className='form-control' placeholder='Username' required />
      <label htmlFor='inputPassword' className='sr-only'>
        Password
      </label>
      <input type='password' id='inputPassword' className='form-control' placeholder='Password' required />
      <button className='mt-4 btn btn-lg btn-primary btn-block' type='submit'>
        Sign in
      </button>
      <p className='mt-3 text-muted'>Register</p>
    </form>
  );
}

export default SignInForm;