autodisol/components/NewPasswordPage.js

"use strict";

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

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

var _CircularProgress = _interopRequireDefault(require("@material-ui/core/CircularProgress"));

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

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

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

var _formData2 = _interopRequireDefault(require("sharyn/client/form-data"));

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

var _cond = _interopRequireDefault(require("sharyn/util/cond"));

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 _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; }

function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }

function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }

var translations = {
  password: {
    fr: 'Mot de passe',
    en: 'Password',
    es: 'Contraseña'
  },
  'password confirmation': {
    fr: 'Confirmation du mot de passe',
    en: 'Password confirmation',
    es: 'Confirmación de contraseña'
  },
  'new password': {
    fr: 'Nouveau mot de passe',
    en: 'New password',
    es: 'Nueva contraseña'
  },
  validate: {
    fr: 'Valider',
    en: 'Validate',
    es: 'Validar'
  },
  'new password set': {
    fr: 'Votre nouveau mot de passe a été enregistré.',
    en: 'Your new password has been set.',
    es: 'Su nueva contraseña ha sido guardada.'
  },
  'log in': {
    fr: 'Connexion',
    en: 'Log In',
    es: 'Conectarse'
  },
  'password mismatch message': {
    fr: 'Les champs mot de passe sont différents.',
    en: 'The password fields do not match.',
    es: 'Los campos de contraseña son diferentes.'
  },
  'call error message': {
    fr: "Cela n'a pas fonctionné. Merci de réessayer plus tard.",
    en: 'Something went wrong, please try again later.',
    es: 'No funcionó, por favor intente de nuevo más tarde.'
  },
  'expired token message': {
    fr: 'Votre lien semble expiré.',
    en: 'Your link seems expired.',
    es: 'El enlace parece expirado.'
  },
  'password too short message': {
    fr: 'Le mot de passe doit faire au moins 6 caractères.',
    en: 'Your password must be at least 6 characters.',
    es: 'Su contraseña debe tener al menos 6 caracteres.'
  }
};

var validateAndSubmit = function validateAndSubmit(_ref) {
  var setErrorMessage = _ref.setErrorMessage,
      setPasswordCall = _ref.setPasswordCall,
      setIsFinished = _ref.setIsFinished,
      setIsLoading = _ref.setIsLoading,
      lang = _ref.lang,
      token = _ref.token;
  return (
    /*#__PURE__*/
    function () {
      var _ref2 = _asyncToGenerator(
      /*#__PURE__*/
      regeneratorRuntime.mark(function _callee(e) {
        var _formData, password, passwordConfirmation, success;

        return regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                e.preventDefault();
                _formData = (0, _formData2["default"])(e), password = _formData.password, passwordConfirmation = _formData['password-confirmation'];

                if (!(password !== passwordConfirmation)) {
                  _context.next = 6;
                  break;
                }

                setErrorMessage((0, _i18n.getTranslation)(translations, lang, 'password mismatch message'));
                _context.next = 16;
                break;

              case 6:
                if (!(password.length < 6)) {
                  _context.next = 10;
                  break;
                }

                setErrorMessage((0, _i18n.getTranslation)(translations, lang, 'password too short message'));
                _context.next = 16;
                break;

              case 10:
                setIsLoading(true);
                _context.next = 13;
                return setPasswordCall(password, token);

              case 13:
                success = _context.sent;
                setIsLoading(false);

                if (success) {
                  setIsFinished(true);
                } else {
                  setErrorMessage((0, _i18n.getTranslation)(translations, lang, 'call error message'));
                }

              case 16:
              case "end":
                return _context.stop();
            }
          }
        }, _callee);
      }));

      return function (_x) {
        return _ref2.apply(this, arguments);
      };
    }()
  );
};

var defaultValidateTokenCall = function defaultValidateTokenCall(expiration) {
  return new Date().getTime() < new Date(expiration).getTime();
};

var validateTokenEffect = function validateTokenEffect(_ref3) {
  var expiration = _ref3.expiration,
      setIsTokenValid = _ref3.setIsTokenValid,
      validateTokenCall = _ref3.validateTokenCall;
  return setIsTokenValid(validateTokenCall(expiration));
};

var configLanguage = (0, _i18n.getLanguage)();

var NewPasswordPage = function NewPasswordPage(_ref4) {
  var _storyLanguage;

  var setPasswordCall = _ref4.setPasswordCall,
      _ref4$validateTokenCa = _ref4.validateTokenCall,
      validateTokenCall = _ref4$validateTokenCa === void 0 ? defaultValidateTokenCall : _ref4$validateTokenCa,
      _ref4$loginPath = _ref4.loginPath,
      loginPath = _ref4$loginPath === void 0 ? '/' : _ref4$loginPath,
      token = _ref4.token,
      expiration = _ref4.expiration,
      storyLanguage = _ref4.storyLanguage,
      isNeutral = _ref4.isNeutral;
  var lang = (_storyLanguage = storyLanguage) !== null && _storyLanguage !== void 0 ? _storyLanguage : configLanguage;

  var _useState = (0, _react.useState)(null),
      _useState2 = _slicedToArray(_useState, 2),
      errorMessage = _useState2[0],
      setErrorMessage = _useState2[1];

  var _useState3 = (0, _react.useState)(false),
      _useState4 = _slicedToArray(_useState3, 2),
      isFinished = _useState4[0],
      setIsFinished = _useState4[1];

  var _useState5 = (0, _react.useState)(false),
      _useState6 = _slicedToArray(_useState5, 2),
      isLoading = _useState6[0],
      setIsLoading = _useState6[1];

  var _useState7 = (0, _react.useState)(undefined),
      _useState8 = _slicedToArray(_useState7, 2),
      isTokenValid = _useState8[0],
      setIsTokenValid = _useState8[1];

  (0, _react.useEffect)(function () {
    validateTokenEffect({
      expiration: expiration,
      validateTokenCall: validateTokenCall,
      setIsTokenValid: setIsTokenValid
    });
  });
  return _react["default"].createElement(_Page["default"], {
    middle: true
  }, _react["default"].createElement("div", {
    style: {
      textAlign: 'center'
    }
  }, (0, _cond["default"])([[isFinished, function () {
    return _react["default"].createElement("div", null, (0, _i18n.getTranslation)(translations, lang, 'new password set'), _react["default"].createElement("br", null), _react["default"].createElement(_CustomButton["default"], {
      component: _Link["default"],
      to: loginPath,
      variant: "contained",
      color: !isNeutral ? 'primary' : 'secondary',
      style: {
        marginTop: 20
      }
    }, (0, _i18n.getTranslation)(translations, lang, 'log in')));
  }], [isTokenValid === false, function () {
    return _react["default"].createElement("div", null, (0, _i18n.getTranslation)(translations, lang, 'expired token message'));
  }], [isLoading || isTokenValid === undefined, function () {
    return _react["default"].createElement(_CircularProgress["default"], null);
  }]], function () {
    return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_Typography["default"], {
      variant: "h6",
      style: {
        marginBottom: 24
      }
    }, (0, _i18n.getTranslation)(translations, lang, 'new password')), errorMessage && _react["default"].createElement(_Typography["default"], {
      color: "error",
      style: {
        margin: '20px 0'
      }
    }, errorMessage), _react["default"].createElement("form", {
      onSubmit: validateAndSubmit({
        lang: lang,
        setPasswordCall: setPasswordCall,
        setErrorMessage: setErrorMessage,
        setIsFinished: setIsFinished,
        setIsLoading: setIsLoading,
        token: token
      })
    }, _react["default"].createElement(_TextField["default"], {
      label: (0, _i18n.getTranslation)(translations, lang, 'password'),
      name: "password",
      style: {
        marginBottom: 20,
        minWidth: 250
      },
      type: "password",
      required: true
    }), _react["default"].createElement("br", null), _react["default"].createElement(_TextField["default"], {
      label: (0, _i18n.getTranslation)(translations, lang, 'password confirmation'),
      name: "password-confirmation",
      style: {
        marginBottom: 20,
        minWidth: 250
      },
      type: "password",
      required: true
    }), _react["default"].createElement("br", null), _react["default"].createElement(_CustomButton["default"], {
      variant: "contained",
      colorType: !isNeutral ? 'primary' : 'secondary',
      type: "submit"
    }, (0, _i18n.getTranslation)(translations, lang, 'validate'))));
  })));
};

NewPasswordPage.propTypes = {
  setPasswordCall: _propTypes["default"].func.isRequired,
  validateTokenCall: _propTypes["default"].func,
  token: _propTypes["default"].string.isRequired,
  expiration: _propTypes["default"].string.isRequired,
  loginPath: _propTypes["default"].string,
  storyLanguage: _propTypes["default"].string,
  isNeutral: _propTypes["default"].string.isRequired
};
var _default = NewPasswordPage;
exports["default"] = _default;