Class LoginForm

final/client/src/components/login-form.tsx:22–51

}

export default class LoginForm extends Component<LoginFormProps, LoginFormState> {
  state = { email: '' };

  onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const email = (event.target as HTMLInputElement).value;
    this.setState((s) => ({ email }));
  };

  onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    this.props.login({ variables: { email: this.state.email } });
  };

  render() {
    return (
      <Container>
        <Header>
          <StyledCurve />
          <StyledLogo />
        </Header>
        <StyledRocket />
        <Heading>Space Explorer</Heading>
        <StyledForm onSubmit={(e) => this.onSubmit(e)}>
          <StyledInput required type="email" name="email" placeholder="Email" data-testid="login-input" onChange={(e) => this.onChange(e)} />
          <Button type="submit">Log in</Button>
        </StyledForm>
      </Container>
    );
  }
}

/**
 * STYLED COMPONENTS USED IN THIS FILE ARE BELOW HERE