autodisol/components/LoginPage.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireWildcard(require("react"));

var _Divider = _interopRequireDefault(require("@material-ui/core/Divider"));

var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));

var _InputAdornment = _interopRequireDefault(require("@material-ui/core/InputAdornment"));

var _styles = require("@material-ui/core/styles");

var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));

var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));

var _MailOutline = _interopRequireDefault(require("@material-ui/icons/MailOutline"));

var _VisibilityOffOutlined = _interopRequireDefault(require("@material-ui/icons/VisibilityOffOutlined"));

var _VisibilityOutlined = _interopRequireDefault(require("@material-ui/icons/VisibilityOutlined"));

var _VpnKeyOutlined = _interopRequireDefault(require("@material-ui/icons/VpnKeyOutlined"));

var _Link = _interopRequireDefault(require("react-router-dom/Link"));

var _Page = _interopRequireDefault(require("sharyn/components/Page"));

var _toggle = _interopRequireDefault(require("sharyn/util/toggle"));

var _i18n = require("../i18n");

var _CustomButton = _interopRequireDefault(require("./CustomButton"));

var _propTypes = _interopRequireDefault(require("prop-types"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

var styles = function styles(theme) {
  return {
    paperContent: {
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center'
    },
    title: {
      marginBottom: 30,
      marginTop: 20
    },
    subtitle: {
      marginBottom: 20,
      marginTop: 0,
      color: theme.palette.primary.main
    },
    neutralTitle: {
      marginBottom: 0,
      fontSize: 24
    },
    neutralTitleMessage: {
      whiteSpace: 'nowrap',
      marginLeft: -15
    },
    neutralDivider: {
      marginTop: 30
    },
    neutralSubtitle: {
      marginBottom: 20,
      marginTop: 30,
      fontWeight: 600,
      color: theme.palette.secondary.main
    },
    pane: {
      width: '100%'
    },
    firstPane: {
      margin: '0 0 10px',
      maxWidth: 200
    },
    secondPane: {
      margin: 0,
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      maxWidth: 350,
      padding: '0 25px'
    },
    banner: {
      width: '100%',
      borderRadius: 5
    },
    firstInput: {
      marginBottom: 15
    },
    endAdornment: {
      height: 40,
      width: 40,
      borderRadius: 6,
      backgroundColor: theme.palette.secondary.light
    },
    loginInput: {
      fontWeight: 400,
      paddingTop: '0.687rem',
      paddingBottom: '0.687rem'
    },
    switchRoot: {
      margin: '0 10px'
    }
  };
};

var translations = {
  logIn: {
    fr: 'Connexion',
    en: 'Log In',
    es: 'Conectarse'
  },
  email: {
    fr: 'Email',
    en: 'Email',
    es: 'Email'
  },
  password: {
    fr: 'Mot de passe',
    en: 'Password',
    es: 'Contraseña'
  },
  'credentials remembered': {
    fr: 'Identifiants mémorisés',
    en: 'Credentials remembered',
    es: 'Credenciales recordadas'
  },
  'forgotten password': {
    fr: 'Mot de passe oublié ?',
    en: 'Forgotten password?',
    es: 'Contraseña olvidada?'
  }
};
var configLanguage = (0, _i18n.getLanguage)();

var LoginPageJSX = function LoginPageJSX(_ref) {
  var _storyLanguage, _imgUrl;

  var classes = _ref.classes,
      title = _ref.title,
      subtitle = _ref.subtitle,
      onSubmit = _ref.onSubmit,
      _ref$forgottenPasswor = _ref.forgottenPasswordPath,
      forgottenPasswordPath = _ref$forgottenPasswor === void 0 ? '/forgotten-password' : _ref$forgottenPasswor,
      isLoading = _ref.isLoading,
      imgUrl = _ref.imgUrl,
      storyLanguage = _ref.storyLanguage,
      style = _ref.style,
      isNeutral = _ref.isNeutral,
      message = _ref.message,
      head = _ref.head;
  var language = (_storyLanguage = storyLanguage) !== null && _storyLanguage !== void 0 ? _storyLanguage : configLanguage;

  var _useState = (0, _react.useState)('password'),
      _useState2 = _slicedToArray(_useState, 2),
      passwordType = _useState2[0],
      setPasswordType = _useState2[1];

  return _react["default"].createElement(_Page["default"], {
    noPaper: true
  }, _react["default"].createElement("div", _extends({
    className: classes.paperContent
  }, {
    style: style
  }), _react["default"].createElement("div", {
    className: "".concat(classes.firstPane, " ").concat(classes.pane)
  }, isNeutral ? _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_Typography["default"], {
    variant: "h2",
    align: "center",
    className: classes.neutralTitle
  }, title, ","), _react["default"].createElement(_Typography["default"], {
    variant: "h5",
    align: "center"
  }, subtitle), _react["default"].createElement(_Typography["default"], {
    variant: "h5",
    align: "center",
    className: classes.neutralTitleMessage
  }, message), _react["default"].createElement(_Divider["default"], {
    className: classes.neutralDivider
  }), _react["default"].createElement(_Typography["default"], {
    variant: "h1",
    align: "center",
    className: classes.neutralSubtitle
  }, head)) : _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement("img", {
    className: classes.banner,
    src: (_imgUrl = imgUrl) !== null && _imgUrl !== void 0 ? _imgUrl : '/static/img/generic-banner-optim.jpg',
    alt: ""
  }), _react["default"].createElement(_Typography["default"], {
    variant: "h5",
    align: "center",
    className: classes.title
  }, title), subtitle && _react["default"].createElement(_Typography["default"], {
    variant: "h1",
    align: "center",
    className: classes.subtitle
  }, subtitle))), _react["default"].createElement("form", {
    className: "".concat(classes.secondPane, " ").concat(classes.pane),
    "data-test": "login-form",
    onSubmit: onSubmit
  }, _react["default"].createElement(_TextField["default"], {
    className: classes.firstInput,
    name: "username",
    placeholder: (0, _i18n.getTranslation)(translations, language, 'email'),
    InputProps: {
      startAdornment: _react["default"].createElement(_InputAdornment["default"], {
        position: "start"
      }, _react["default"].createElement(_MailOutline["default"], {
        fontSize: "small"
      })),
      classes: {
        input: classes.loginInput
      }
    }
  }), _react["default"].createElement(_TextField["default"], {
    name: "password",
    type: passwordType,
    placeholder: (0, _i18n.getTranslation)(translations, language, 'password'),
    InputProps: {
      startAdornment: _react["default"].createElement(_InputAdornment["default"], {
        position: "start"
      }, _react["default"].createElement(_VpnKeyOutlined["default"], {
        fontSize: "small"
      })),
      endAdornment: _react["default"].createElement(_InputAdornment["default"], {
        position: "end"
      }, _react["default"].createElement(_IconButton["default"], {
        className: classes.endAdornment,
        onClick: function onClick() {
          setPasswordType((0, _toggle["default"])(passwordType, 'password', 'text'));
        }
      }, passwordType === 'password' ? _react["default"].createElement(_VisibilityOutlined["default"], {
        fontSize: "small"
      }) : _react["default"].createElement(_VisibilityOffOutlined["default"], {
        fontSize: "small"
      }))),
      classes: {
        input: classes.loginInput
      }
    }
  }), _react["default"].createElement(_CustomButton["default"], _extends({
    isLoading: isLoading
  }, {
    height: "short",
    variant: "contained",
    colorType: isNeutral ? 'secondary' : 'primary',
    style: {
      width: 200,
      marginTop: 50
    },
    "data-test": "login-form-submit",
    type: "submit"
  }), (0, _i18n.getTranslation)(translations, language, 'logIn'))), _react["default"].createElement("div", {
    style: {
      marginTop: 50
    }
  }, _react["default"].createElement(_Typography["default"], {
    variant: "body2",
    color: "secondary"
  }, _react["default"].createElement(_Link["default"], {
    style: {
      color: 'inherit'
    },
    to: forgottenPasswordPath
  }, (0, _i18n.getTranslation)(translations, language, 'forgotten password'))))));
};

LoginPageJSX.propTypes = {
  classes: _propTypes["default"].object.isRequired,
  title: _propTypes["default"].string.isRequired,
  subtitle: _propTypes["default"].string.isRequired,
  onSubmit: _propTypes["default"].func.isRequired,
  forgottenPasswordPath: _propTypes["default"].string,
  imgUrl: _propTypes["default"].string,
  isLoading: _propTypes["default"].bool,
  storyLanguage: _propTypes["default"].string,
  style: _propTypes["default"].object,
  isNeutral: _propTypes["default"].oneOf([false]).isRequired,
  message: _propTypes["default"].string.isRequired,
  head: _propTypes["default"].string.isRequired
};
var LoginPage = (0, _styles.withStyles)(styles)(LoginPageJSX);
var _default = LoginPage;
exports["default"] = _default;