export function LoginPage()

in public/apps/login/login-page.tsx [50:150]
90 lines of code
9 McCabe index (conditional complexity)

export function LoginPage(props: LoginPageDeps) {
  const [username, setUsername] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [loginFailed, setloginFailed] = useState(false);
  const [usernameValidationFailed, setUsernameValidationFailed] = useState(false);
  const [passwordValidationFailed, setPasswordValidationFailed] = useState(false);

  let errorLabel = null;
  if (loginFailed) {
    errorLabel = (
      <EuiText id="error" color="danger" textAlign="center">
        <b>Invalid username or password, please try again</b>
      </EuiText>
    );
  }

  // @ts-ignore : Parameter 'e' implicitly has an 'any' type.
  const handleSubmit = async (e) => {
    e.preventDefault();

    // Clear errors
    setloginFailed(false);
    setUsernameValidationFailed(false);
    setPasswordValidationFailed(false);

    // Form validation
    if (username === '') {
      setUsernameValidationFailed(true);
      return;
    }

    if (password === '') {
      setPasswordValidationFailed(true);
      return;
    }

    try {
      await validateCurrentPassword(props.http, username, password);
      redirect(props.http.basePath.serverBasePath);
    } catch (error) {
      console.log(error);
      setloginFailed(true);
      return;
    }
  };

  // TODO: Get brand image from server config
  return (
    <EuiListGroup className="login-wrapper">
      {props.config.showbrandimage && (
        <EuiImage size="fullWidth" alt="" url={props.config.brandimage || defaultBrandImage} />
      )}
      <EuiSpacer size="s" />
      <EuiText size="m" textAlign="center">
        {props.config.title || 'Please login to OpenSearch Dashboards'}
      </EuiText>
      <EuiSpacer size="s" />
      <EuiText size="s" textAlign="center">
        {props.config.subtitle ||
          'If you have forgotten your username or password, please ask your system administrator'}
      </EuiText>
      <EuiSpacer size="s" />
      <EuiForm component="form">
        <EuiFormRow>
          <EuiFieldText
            data-test-subj="user-name"
            placeholder="Username"
            prepend={<EuiIcon type="user" />}
            onChange={(e) => setUsername(e.target.value)}
            value={username}
            isInvalid={usernameValidationFailed}
          />
        </EuiFormRow>
        <EuiFormRow isInvalid={passwordValidationFailed}>
          <EuiFieldText
            data-test-subj="password"
            placeholder="Password"
            prepend={<EuiIcon type="lock" />}
            type="password"
            onChange={(e) => setPassword(e.target.value)}
            value={password}
            isInvalid={usernameValidationFailed}
          />
        </EuiFormRow>
        <EuiFormRow>
          <EuiButton
            data-test-subj="submit"
            fill
            size="s"
            type="submit"
            className={props.config.buttonstyle || 'btn-login'}
            onClick={handleSubmit}
          >
            Log In
          </EuiButton>
        </EuiFormRow>
        {errorLabel}
      </EuiForm>
    </EuiListGroup>
  );
}