stitch-ui/src/auth/components/EmailPassword.js

// TODO proptypes
/* eslint-disable react/prop-types */
/* eslint-disable react/no-array-index-key */
import React from "react";
import { AlertContainer } from "../../alert";
import {
  Banner,
  FormRow,
  FormRowInputGroup,
  FormRowLabelGroup,
  Button
} from "../../core";

function EmailPassword(props) {
  const {
    alertKey,
    save,
    setEmailConfirmationURL,
    setResetPasswordURL,
    setEmailConfirmationSubject,
    setResetPasswordSubject,
    providerInput
  } = props;

  return (
    <div>
      <div className="view-modal-body">
        <Banner message={providerInput && providerInput.get("error")} error />
        <FormRow>
          <FormRowLabelGroup>
            <label htmlFor="emailConfirmationURL" className="form-row-label">
              Email Confirmation URL
            </label>
          </FormRowLabelGroup>
          <FormRowInputGroup>
            <input
              type="text"
              name="emailConfirmationURL"
              className="text-input form-row-text-input"
              placeholder="Email Confirmation URL"
              value={
                providerInput
                  ? providerInput.get("emailConfirmationUrl") || ""
                  : ""
              }
              onChange={e => setEmailConfirmationURL(e.target.value)}
            />
          </FormRowInputGroup>
        </FormRow>
        <FormRow>
          <FormRowLabelGroup>
            <label htmlFor="resetPasswordURL" className="form-row-label">
              Password Reset URL
            </label>
          </FormRowLabelGroup>
          <FormRowInputGroup>
            <input
              type="text"
              name="resetPasswordURL"
              className="text-input form-row-text-input"
              placeholder="Password Reset URL"
              value={
                providerInput ? providerInput.get("resetPasswordUrl") || "" : ""
              }
              onChange={e => setResetPasswordURL(e.target.value)}
            />
          </FormRowInputGroup>
        </FormRow>
        <FormRow>
          <FormRowLabelGroup>
            <label htmlFor="setResetPasswordSubject" className="form-row-label">
              Reset Password Email Subject
            </label>
          </FormRowLabelGroup>
          <FormRowInputGroup>
            <input
              type="text"
              name="resetPasswordSubject"
              className="text-input form-row-text-input"
              placeholder="Here's a link to reset your password."
              value={
                providerInput
                  ? providerInput.get("resetPasswordSubject") || ""
                  : ""
              }
              onChange={e => setResetPasswordSubject(e.target.value)}
            />
          </FormRowInputGroup>
        </FormRow>
        <FormRow>
          <FormRowLabelGroup>
            <label
              htmlFor="setEmailConfirmationSubject"
              className="form-row-label"
            >
              E-mail Confirmation Subject
            </label>
          </FormRowLabelGroup>
          <FormRowInputGroup>
            <input
              type="text"
              name="emailConfirmationSubject"
              className="text-input form-row-text-input"
              placeholder="Confirm your e-mail address"
              value={
                providerInput
                  ? providerInput.get("emailConfirmationSubject") || ""
                  : ""
              }
              onChange={e => setEmailConfirmationSubject(e.target.value)}
            />
          </FormRowInputGroup>
        </FormRow>
      </div>
      <footer className="view-modal-footer">
        <div className="view-modal-actions">
          {providerInput &&
            providerInput.get("dirty") &&
            <span>You have unsaved changes</span>}
          <AlertContainer alertKey={alertKey} />
          <Button primary footer onClick={save}>
            Save
          </Button>
        </div>
      </footer>
    </div>
  );
}
export default EmailPassword;