export default function Login()

in source/app/pages/index.js [31:156]
118 lines of code
11 McCabe index (conditional complexity)

export default function Login() {
  const [credentials, setCredentials] = useState({
    username: "",
    password: "",
    passwordChangeRequired: false,
    newPassword: "",
    userInit: undefined
  });
  const [error, setError] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const {
    username,
    password,
    passwordChangeRequired,
    newPassword,
    userInit
  } = credentials;

  let userInputForm;

  const handleLoginSubmit = useCallback(
    async e => {
      e.preventDefault();
      setIsLoading(true);
      try {
        const userInit = await Auth.signIn(username, password);
        if (userInit && userInit.challengeName === "NEW_PASSWORD_REQUIRED") {
          setCredentials({
            passwordChangeRequired: true,
            userInit: userInit
          });
          setIsLoading(false);
        } else {
          userInit.signInUserSession && Router.push("/home");
        }
      } catch ({ message }) {
        setError(message);
        setIsLoading(false);
      }
    },
    [username, password, passwordChangeRequired, userInit]
  );

  const handlePasswordResetSubmit = useCallback(
    async e => {
      e.preventDefault();
      setIsLoading(true);
      try {
        const user = await Auth.completeNewPassword(userInit, newPassword);
        user.signInUserSession && Router.push("/home");
      } catch ({ message }) {
        setError(message);
        setIsLoading(false);
      }
    },
    [userInit, newPassword]
  );

  const handleFormChange = useCallback(
    e => {
      const { name, value } = e.target;
      setCredentials(credentials => ({ ...credentials, [name]: value }));
    },
    [username, password, passwordChangeRequired, newPassword, userInit]
  );

  const loginForm = () => {
    return (
      <form onSubmit={handleLoginSubmit}>
        <p>
          <FormInput
            autoComplete="username"
            type="text"
            name="username"
            label="Username"
            value={username}
            onChange={handleFormChange}
          />
        </p>
        <p>
          <FormInput
            autoComplete="current-password"
            type="password"
            name="password"
            label="Password"
            value={password}
            onChange={handleFormChange}
          />
        </p>
        <Button disabled={isLoading}>Login</Button>
        {error && <p className={css.error}>{error}</p>}
      </form>
    );
  };

  const passwordResetForm = () => {
    return (
      <form onSubmit={handlePasswordResetSubmit}>
        <p>
          <FormInput
            autoComplete="new-password"
            type="password"
            name="newPassword"
            label="New Password"
            value={newPassword}
            onChange={handleFormChange}
          />
        </p>
        <Button disabled={isLoading}>Login</Button>
        {error && <p className={css.error}>{error}</p>}
      </form>
    );
  };

  userInputForm = passwordChangeRequired ? passwordResetForm() : loginForm();

  return (
    <article>
      <div className={css.form}>
        <h2>Login</h2>
        {userInputForm}
        {isLoading && <Loading />}
      </div>
    </article>
  );
}