@kiwicom/smart-faq/src/staging/LoginModal.js

Smart FAQ

// @flow

import * as React from 'react';
import Button from '@kiwicom/orbit-components/lib/Button';
import Stack from '@kiwicom/orbit-components/lib/Stack';
import Modal from '@kiwicom/orbit-components/lib/Modal';
import InputField from '@kiwicom/orbit-components/lib/InputField';
import ModalSection from '@kiwicom/orbit-components/lib/Modal/ModalSection';

type Props = {|
  onSubmit: (string, string) => Promise<void>,
  onClose: () => void,
|};

type State = {|
  email: string,
  password: string,
|};

class LoginModal extends React.Component<Props, State> {
  state = {
    email: '',
    password: '',
  };

  handleSubmit = (e: SyntheticEvent<HTMLFormElement>) => {
    e.preventDefault();
    const { email, password } = this.state;

    this.props.onSubmit(email, password);
  };

  handleEmailChange = (e: SyntheticInputEvent<HTMLInputElement>) => {
    this.setState({ email: e.target.value });
  };

  handlePassword = (e: SyntheticInputEvent<HTMLInputElement>) => {
    this.setState({ password: e.target.value });
  };

  handleTestUser = () => {
    const email = process.env.TEST_USER_EMAIL || '';
    const password = process.env.TEST_USER_PASSWORD || '';
    this.props.onSubmit(email, password);
  };

  render() {
    const { onClose } = this.props;
    const { email, password } = this.state;

    return (
      <Modal onClose={onClose} dataTest="LoginModalStaging">
        <ModalSection>
          <form onSubmit={this.handleSubmit}>
            <Stack>
              <InputField
                label="E-mail"
                placeholder="Your email"
                dataTest="Email"
                value={email}
                onChange={this.handleEmailChange}
              />
              <InputField
                label="Password"
                placeholder="Your email"
                type="password"
                dataTest="Password"
                value={password}
                onChange={this.handlePassword}
              />
              <Button submit type="primary" dataTest="Submit">
                Login
              </Button>
              <Button
                type="secondary"
                onClick={this.handleTestUser}
                dataTest="MockedAccount"
              >
                Login with SmartFAQ test user
              </Button>
            </Stack>
          </form>
        </ModalSection>
      </Modal>
    );
  }
}

export default LoginModal;