import React from 'react';
import markdown from './README.mdx';
import TextInput from '../../components/TextInput';
import Button from '../../components/Button';
import Modal from '../../components/Modal';
import Link from '../../components/Link';
export default {
  title: 'Templates/Login',
  parameters: {
    componentSubtitle: 'Example',
    status: 'legacy',
    mdx: markdown,
    introText: 'Login page for legacy applications not using WFPs single sign-on',
    previewWidth: 'full'
  }
};
export var Regular = function Regular(args) {
  return /*#__PURE__*/React.createElement(Modal, {
    open: true,
    hideClose: true,
    modalHeading: "Login",
    inPortal: false,
    modalLabel: "Sample Application",
    primaryButtonText: "Login",
    secondaryButtonText: "Forgot password?",
    modalSecondaryAction: /*#__PURE__*/React.createElement(Button, {
      kind: "secondary"
    }, "Sign in with WFP SSO"),
    modalFooter: function modalFooter(_ref) {
      var primaryButtonText = _ref.primaryButtonText,
          secondaryButtonText = _ref.secondaryButtonText;
      return /*#__PURE__*/React.createElement("div", {
        className: "wfp--modal__buttons-container"
      }, /*#__PURE__*/React.createElement(Link, null, secondaryButtonText), /*#__PURE__*/React.createElement(Button, null, primaryButtonText));
    },
    backgroundImage: "https://password.go.wfp.org/images/MAU_20150202_WFP-Agron_Dragaj_0018.jpg"
  }, /*#__PURE__*/React.createElement("p", {
    className: "wfp--modal-content__text wfp--form-long"
  }, /*#__PURE__*/React.createElement(TextInput, {
    id: "emailinput",
    labelText: "Your email adress",
    placeholder: "yourname@wfp.org",
    helperText: "Enter the email adress you've used when you've registred"
  }), /*#__PURE__*/React.createElement(TextInput, {
    id: "passportinput",
    labelText: "Your password",
    type: "password",
    placeholder: "",
    helperText: ""
  })));
};
Regular.decorators = [function (Story) {
  return /*#__PURE__*/React.createElement("div", {
    style: {
      position: 'relative',
      height: '700px'
    }
  }, /*#__PURE__*/React.createElement(Story, null));
}];
Regular.args = {};