// Login screen.
const { useState: useStateLogin } = React;

function LoginScreen({ onLogin }) {
  const [email, setEmail] = useStateLogin('justin.reilly@ferris.edu');
  const [password, setPassword] = useStateLogin('••••••••');

  function submit(e) {
    e.preventDefault();
    onLogin();
  }

  return (
    <div className="login-page" data-screen-label="01 Login">
      <form className="card login-card" onSubmit={submit}>
        <div className="login-mark">
          <span className="login-mark-dot" />
          RecSports Hub
        </div>
        <div className="login-sub">Ferris State University · staff portal</div>

        <div className="login-field">
          <label className="field-label">Email</label>
          <input
            type="email"
            className="input"
            value={email}
            onChange={e => setEmail(e.target.value)}
            placeholder="name@ferris.edu"
          />
        </div>

        <div className="login-field">
          <label className="field-label">Password</label>
          <input
            type="password"
            className="input"
            value={password}
            onChange={e => setPassword(e.target.value)}
          />
        </div>

        <button type="submit" className="btn btn-primary" style={{ width: '100%', justifyContent: 'center', marginTop: 6 }}>
          Sign in
        </button>

        <div className="login-help">Contact your administrator for access.</div>
      </form>
    </div>
  );
}

window.LoginScreen = LoginScreen;