@os-team/profile 1.0.48 → 1.0.50

package/dist/cjs/components/shared/ErrorResult.js

@@ -9,20 +9,18 @@ var _icons = require("@os-design/icons");
 var _core = require("@os-design/core");
 var _reactI18next = require("react-i18next");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _getErrorMessage = _interopRequireDefault(require("../../utils/getErrorMessage"));
 var _templateObject;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var StyledResult = (0, _styled.default)(_core.Result)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: 0 1em;\n"])));
 var ErrorResult = function ErrorResult(_ref) {
-  var _source, _source$errors, _source$errors$;
   var error = _ref.error;
   var _useTranslation = (0, _reactI18next.useTranslation)(['common']),
     t = _useTranslation.t;
   return /*#__PURE__*/_react.default.createElement(StyledResult, {
-    title: t('common:errorTitle')
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ,
-    description: (_source = error.source) === null || _source === void 0 ? void 0 : (_source$errors = _source.errors) === null || _source$errors === void 0 ? void 0 : (_source$errors$ = _source$errors[0]) === null || _source$errors$ === void 0 ? void 0 : _source$errors$.message,
+    title: t('common:errorTitle'),
+    description: (0, _getErrorMessage.default)(error),
     icon: /*#__PURE__*/_react.default.createElement(_icons.CloseCircle, null)
   });
 };

package/dist/cjs/components/shared/ErrorResult.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorResult.js","names":["StyledResult","styled","Result","ErrorResult","error","useTranslation","t","source","errors","message"],"sources":["../../../../src/lib/components/shared/ErrorResult.tsx"],"sourcesContent":["import React from 'react';\nimport { CloseCircle } from '@os-design/icons';\nimport { Result } from '@os-design/core';\nimport { useTranslation } from 'react-i18next';\nimport styled from '@emotion/styled';\n\ninterface ErrorResultProps {\n  error: Error;\n}\n\nconst StyledResult = styled(Result)`\n  margin: 0 1em;\n`;\n\nconst ErrorResult: React.FC<ErrorResultProps> = ({ error }) => {\n  const { t } = useTranslation(['common']);\n\n  return (\n    <StyledResult\n      title={t('common:errorTitle')}\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      description={(error as any).source?.errors?.[0]?.message}\n      icon={<CloseCircle />}\n    />\n  );\n};\n\nexport default ErrorResult;\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AAAqC;AAAA;AAAA;AAMrC,IAAMA,YAAY,GAAG,IAAAC,eAAM,EAACC,YAAM,CAAC,yFAElC;AAED,IAAMC,WAAuC,GAAG,SAA1CA,WAAuC,OAAkB;EAAA;EAAA,IAAZC,KAAK,QAALA,KAAK;EACtD,sBAAc,IAAAC,4BAAc,EAAC,CAAC,QAAQ,CAAC,CAAC;IAAhCC,CAAC,mBAADA,CAAC;EAET,oBACE,6BAAC,YAAY;IACX,KAAK,EAAEA,CAAC,CAAC,mBAAmB;IAC5B;IAAA;IACA,WAAW,aAAGF,KAAK,CAASG,MAAM,8DAArB,QAAuBC,MAAM,sEAA7B,eAAgC,CAAC,CAAC,oDAAlC,gBAAoCC,OAAQ;IACzD,IAAI,eAAE,6BAAC,kBAAW;EAAI,EACtB;AAEN,CAAC;AAAC,eAEaN,WAAW;AAAA"}
+{"version":3,"file":"ErrorResult.js","names":["StyledResult","styled","Result","ErrorResult","error","useTranslation","t","getErrorMessage"],"sources":["../../../../src/lib/components/shared/ErrorResult.tsx"],"sourcesContent":["import React from 'react';\nimport { CloseCircle } from '@os-design/icons';\nimport { Result } from '@os-design/core';\nimport { useTranslation } from 'react-i18next';\nimport styled from '@emotion/styled';\nimport getErrorMessage from '../../utils/getErrorMessage';\n\ninterface ErrorResultProps {\n  error: Error;\n}\n\nconst StyledResult = styled(Result)`\n  margin: 0 1em;\n`;\n\nconst ErrorResult: React.FC<ErrorResultProps> = ({ error }) => {\n  const { t } = useTranslation(['common']);\n\n  return (\n    <StyledResult\n      title={t('common:errorTitle')}\n      description={getErrorMessage(error)}\n      icon={<CloseCircle />}\n    />\n  );\n};\n\nexport default ErrorResult;\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAA0D;AAAA;AAAA;AAM1D,IAAMA,YAAY,GAAG,IAAAC,eAAM,EAACC,YAAM,CAAC,yFAElC;AAED,IAAMC,WAAuC,GAAG,SAA1CA,WAAuC,OAAkB;EAAA,IAAZC,KAAK,QAALA,KAAK;EACtD,sBAAc,IAAAC,4BAAc,EAAC,CAAC,QAAQ,CAAC,CAAC;IAAhCC,CAAC,mBAADA,CAAC;EAET,oBACE,6BAAC,YAAY;IACX,KAAK,EAAEA,CAAC,CAAC,mBAAmB,CAAE;IAC9B,WAAW,EAAE,IAAAC,wBAAe,EAACH,KAAK,CAAE;IACpC,IAAI,eAAE,6BAAC,kBAAW;EAAI,EACtB;AAEN,CAAC;AAAC,eAEaD,WAAW;AAAA"}

package/dist/cjs/components/shared/FormError.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _core = require("@os-design/core");
+var _form = require("@os-design/form");
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var FormError = function FormError() {
+  var _useExistingForm = (0, _form.useExistingForm)(),
+    useError = _useExistingForm.useError;
+  var error = useError('_error');
+  return error ? /*#__PURE__*/_react.default.createElement(_core.Alert, {
+    type: "error"
+  }, error) : null;
+};
+var _default = FormError;
+exports.default = _default;
+//# sourceMappingURL=FormError.js.map

package/dist/cjs/components/shared/FormError.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormError.js","names":["FormError","useExistingForm","useError","error"],"sources":["../../../../src/lib/components/shared/FormError.tsx"],"sourcesContent":["import { Alert } from '@os-design/core';\nimport { useExistingForm } from '@os-design/form';\nimport React from 'react';\n\nconst FormError: React.FC = () => {\n  const { useError } = useExistingForm();\n  const error = useError('_error');\n  return error ? <Alert type='error'>{error}</Alert> : null;\n};\n\nexport default FormError;\n"],"mappings":";;;;;;AAAA;AACA;AACA;AAA0B;AAE1B,IAAMA,SAAmB,GAAG,SAAtBA,SAAmB,GAAS;EAChC,uBAAqB,IAAAC,qBAAe,GAAE;IAA9BC,QAAQ,oBAARA,QAAQ;EAChB,IAAMC,KAAK,GAAGD,QAAQ,CAAC,QAAQ,CAAC;EAChC,OAAOC,KAAK,gBAAG,6BAAC,WAAK;IAAC,IAAI,EAAC;EAAO,GAAEA,KAAK,CAAS,GAAG,IAAI;AAC3D,CAAC;AAAC,eAEaH,SAAS;AAAA"}

package/dist/cjs/utils/getErrorMessage.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+var isObject = function isObject(value) {
+  return _typeof(value) === 'object' && !Array.isArray(value) && value !== null;
+};
+var DEFAULT_MESSAGE = 'Error';
+var getErrorMessage = function getErrorMessage(error) {
+  if (!isObject(error)) return DEFAULT_MESSAGE;
+  var source = error.source;
+  var _error$message = error.message,
+    message = _error$message === void 0 ? DEFAULT_MESSAGE : _error$message;
+  if (!isObject(source) || !Array.isArray(source.errors) || source.errors.length === 0) {
+    return message;
+  }
+  var firstError = source.errors[0];
+  if (!isObject(firstError)) {
+    return message;
+  }
+  message = firstError.message || message;
+  if (!isObject(firstError.extensions) || !isObject(firstError.extensions.constraints)) {
+    return message;
+  }
+  var constraintKeys = Object.keys(firstError.extensions.constraints);
+  if (constraintKeys.length === 0) {
+    return message;
+  }
+  var firstKey = constraintKeys[0];
+  var firstConstraint = firstError.extensions.constraints[firstKey];
+  if (!isObject(firstConstraint) || typeof firstConstraint.message !== 'string') {
+    return message;
+  }
+  return firstConstraint.message;
+};
+var _default = getErrorMessage;
+exports.default = _default;
+//# sourceMappingURL=getErrorMessage.js.map

package/dist/cjs/utils/getErrorMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getErrorMessage.js","names":["isObject","value","Array","isArray","DEFAULT_MESSAGE","getErrorMessage","error","source","message","errors","length","firstError","extensions","constraints","constraintKeys","Object","keys","firstKey","firstConstraint"],"sources":["../../../src/lib/utils/getErrorMessage.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n\nconst isObject = (value: any) =>\n  typeof value === 'object' && !Array.isArray(value) && value !== null;\n\nconst DEFAULT_MESSAGE = 'Error';\n\nconst getErrorMessage = (error: any) => {\n  if (!isObject(error)) return DEFAULT_MESSAGE;\n\n  const { source } = error;\n  let { message = DEFAULT_MESSAGE } = error;\n  if (\n    !isObject(source) ||\n    !Array.isArray(source.errors) ||\n    source.errors.length === 0\n  ) {\n    return message;\n  }\n\n  const firstError = source.errors[0];\n  if (!isObject(firstError)) {\n    return message;\n  }\n\n  message = firstError.message || message;\n  if (\n    !isObject(firstError.extensions) ||\n    !isObject(firstError.extensions.constraints)\n  ) {\n    return message;\n  }\n\n  const constraintKeys = Object.keys(firstError.extensions.constraints);\n  if (constraintKeys.length === 0) {\n    return message;\n  }\n\n  const firstKey = constraintKeys[0];\n  const firstConstraint = firstError.extensions.constraints[firstKey];\n  if (\n    !isObject(firstConstraint) ||\n    typeof firstConstraint.message !== 'string'\n  ) {\n    return message;\n  }\n\n  return firstConstraint.message;\n};\n\nexport default getErrorMessage;\n"],"mappings":";;;;;;;AAAA;;AAEA,IAAMA,QAAQ,GAAG,SAAXA,QAAQ,CAAIC,KAAU;EAAA,OAC1B,QAAOA,KAAK,MAAK,QAAQ,IAAI,CAACC,KAAK,CAACC,OAAO,CAACF,KAAK,CAAC,IAAIA,KAAK,KAAK,IAAI;AAAA;AAEtE,IAAMG,eAAe,GAAG,OAAO;AAE/B,IAAMC,eAAe,GAAG,SAAlBA,eAAe,CAAIC,KAAU,EAAK;EACtC,IAAI,CAACN,QAAQ,CAACM,KAAK,CAAC,EAAE,OAAOF,eAAe;EAE5C,IAAQG,MAAM,GAAKD,KAAK,CAAhBC,MAAM;EACd,qBAAoCD,KAAK,CAAnCE,OAAO;IAAPA,OAAO,+BAAGJ,eAAe;EAC/B,IACE,CAACJ,QAAQ,CAACO,MAAM,CAAC,IACjB,CAACL,KAAK,CAACC,OAAO,CAACI,MAAM,CAACE,MAAM,CAAC,IAC7BF,MAAM,CAACE,MAAM,CAACC,MAAM,KAAK,CAAC,EAC1B;IACA,OAAOF,OAAO;EAChB;EAEA,IAAMG,UAAU,GAAGJ,MAAM,CAACE,MAAM,CAAC,CAAC,CAAC;EACnC,IAAI,CAACT,QAAQ,CAACW,UAAU,CAAC,EAAE;IACzB,OAAOH,OAAO;EAChB;EAEAA,OAAO,GAAGG,UAAU,CAACH,OAAO,IAAIA,OAAO;EACvC,IACE,CAACR,QAAQ,CAACW,UAAU,CAACC,UAAU,CAAC,IAChC,CAACZ,QAAQ,CAACW,UAAU,CAACC,UAAU,CAACC,WAAW,CAAC,EAC5C;IACA,OAAOL,OAAO;EAChB;EAEA,IAAMM,cAAc,GAAGC,MAAM,CAACC,IAAI,CAACL,UAAU,CAACC,UAAU,CAACC,WAAW,CAAC;EACrE,IAAIC,cAAc,CAACJ,MAAM,KAAK,CAAC,EAAE;IAC/B,OAAOF,OAAO;EAChB;EAEA,IAAMS,QAAQ,GAAGH,cAAc,CAAC,CAAC,CAAC;EAClC,IAAMI,eAAe,GAAGP,UAAU,CAACC,UAAU,CAACC,WAAW,CAACI,QAAQ,CAAC;EACnE,IACE,CAACjB,QAAQ,CAACkB,eAAe,CAAC,IAC1B,OAAOA,eAAe,CAACV,OAAO,KAAK,QAAQ,EAC3C;IACA,OAAOA,OAAO;EAChB;EAEA,OAAOU,eAAe,CAACV,OAAO;AAChC,CAAC;AAAC,eAEaH,eAAe;AAAA"}

package/dist/cjs/utils/handleFormErrors.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getErrorConstraints = exports.default = void 0;
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+var NO_CONSTRAINTS = {};
+var getErrorConstraints = function getErrorConstraints(error) {
+  var e = error;
+  if (!e.source || !Array.isArray(e.source.errors) || e.source.errors.length === 0 || !e.source.errors[0].extensions || !e.source.errors[0].extensions.code) {
+    return NO_CONSTRAINTS;
+  }
+  if (e.source.errors[0].extensions.code !== 'BAD_ARGUMENTS') {
+    return NO_CONSTRAINTS;
+  }
+  return e.source.errors[0].extensions.constraints;
+};
+exports.getErrorConstraints = getErrorConstraints;
+var handleFormErrors = function handleFormErrors(form, error) {
+  var e = error;
+  if (!e.source || !Array.isArray(e.source.errors) || e.source.errors.length === 0 || !e.source.errors[0].extensions || !e.source.errors[0].extensions.code) {
+    form.errors.set('_error', e.message);
+    return;
+  }
+  if (e.source.errors[0].extensions.code === 'BAD_ARGUMENTS') {
+    var constraints = getErrorConstraints(error);
+    Object.entries(constraints).forEach(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 2),
+        fieldName = _ref2[0],
+        message = _ref2[1].message;
+      form.errors.set(fieldName, message);
+    });
+  } else {
+    form.errors.set('_error', e.source.errors[0].message);
+  }
+};
+var _default = handleFormErrors;
+exports.default = _default;
+//# sourceMappingURL=handleFormErrors.js.map

package/dist/cjs/utils/handleFormErrors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"handleFormErrors.js","names":["NO_CONSTRAINTS","getErrorConstraints","error","e","source","Array","isArray","errors","length","extensions","code","constraints","handleFormErrors","form","set","message","Object","entries","forEach","fieldName"],"sources":["../../../src/lib/utils/handleFormErrors.ts"],"sourcesContent":["import { Form } from '@os-design/form';\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\n\ninterface Constraint {\n  name: string;\n  message: string;\n}\n\nconst NO_CONSTRAINTS = {};\n\nexport const getErrorConstraints = (\n  error: Error\n): Record<string, Constraint> => {\n  const e = error as any;\n\n  if (\n    !e.source ||\n    !Array.isArray(e.source.errors) ||\n    e.source.errors.length === 0 ||\n    !e.source.errors[0].extensions ||\n    !e.source.errors[0].extensions.code\n  ) {\n    return NO_CONSTRAINTS;\n  }\n  if (e.source.errors[0].extensions.code !== 'BAD_ARGUMENTS') {\n    return NO_CONSTRAINTS;\n  }\n\n  return e.source.errors[0].extensions.constraints;\n};\n\nconst handleFormErrors = (form: Form<any>, error: Error): void => {\n  const e = error as any;\n\n  if (\n    !e.source ||\n    !Array.isArray(e.source.errors) ||\n    e.source.errors.length === 0 ||\n    !e.source.errors[0].extensions ||\n    !e.source.errors[0].extensions.code\n  ) {\n    form.errors.set('_error', e.message);\n    return;\n  }\n\n  if (e.source.errors[0].extensions.code === 'BAD_ARGUMENTS') {\n    const constraints = getErrorConstraints(error);\n    Object.entries(constraints).forEach(([fieldName, { message }]) => {\n      form.errors.set(fieldName, message);\n    });\n  } else {\n    form.errors.set('_error', e.source.errors[0].message);\n  }\n};\n\nexport default handleFormErrors;\n"],"mappings":";;;;;;;;;;;;AAEA;;AAOA,IAAMA,cAAc,GAAG,CAAC,CAAC;AAElB,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmB,CAC9BC,KAAY,EACmB;EAC/B,IAAMC,CAAC,GAAGD,KAAY;EAEtB,IACE,CAACC,CAAC,CAACC,MAAM,IACT,CAACC,KAAK,CAACC,OAAO,CAACH,CAAC,CAACC,MAAM,CAACG,MAAM,CAAC,IAC/BJ,CAAC,CAACC,MAAM,CAACG,MAAM,CAACC,MAAM,KAAK,CAAC,IAC5B,CAACL,CAAC,CAACC,MAAM,CAACG,MAAM,CAAC,CAAC,CAAC,CAACE,UAAU,IAC9B,CAACN,CAAC,CAACC,MAAM,CAACG,MAAM,CAAC,CAAC,CAAC,CAACE,UAAU,CAACC,IAAI,EACnC;IACA,OAAOV,cAAc;EACvB;EACA,IAAIG,CAAC,CAACC,MAAM,CAACG,MAAM,CAAC,CAAC,CAAC,CAACE,UAAU,CAACC,IAAI,KAAK,eAAe,EAAE;IAC1D,OAAOV,cAAc;EACvB;EAEA,OAAOG,CAAC,CAACC,MAAM,CAACG,MAAM,CAAC,CAAC,CAAC,CAACE,UAAU,CAACE,WAAW;AAClD,CAAC;AAAC;AAEF,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,CAAIC,IAAe,EAAEX,KAAY,EAAW;EAChE,IAAMC,CAAC,GAAGD,KAAY;EAEtB,IACE,CAACC,CAAC,CAACC,MAAM,IACT,CAACC,KAAK,CAACC,OAAO,CAACH,CAAC,CAACC,MAAM,CAACG,MAAM,CAAC,IAC/BJ,CAAC,CAACC,MAAM,CAACG,MAAM,CAACC,MAAM,KAAK,CAAC,IAC5B,CAACL,CAAC,CAACC,MAAM,CAACG,MAAM,CAAC,CAAC,CAAC,CAACE,UAAU,IAC9B,CAACN,CAAC,CAACC,MAAM,CAACG,MAAM,CAAC,CAAC,CAAC,CAACE,UAAU,CAACC,IAAI,EACnC;IACAG,IAAI,CAACN,MAAM,CAACO,GAAG,CAAC,QAAQ,EAAEX,CAAC,CAACY,OAAO,CAAC;IACpC;EACF;EAEA,IAAIZ,CAAC,CAACC,MAAM,CAACG,MAAM,CAAC,CAAC,CAAC,CAACE,UAAU,CAACC,IAAI,KAAK,eAAe,EAAE;IAC1D,IAAMC,WAAW,GAAGV,mBAAmB,CAACC,KAAK,CAAC;IAC9Cc,MAAM,CAACC,OAAO,CAACN,WAAW,CAAC,CAACO,OAAO,CAAC,gBAA8B;MAAA;QAA5BC,SAAS;QAAIJ,OAAO,YAAPA,OAAO;MACxDF,IAAI,CAACN,MAAM,CAACO,GAAG,CAACK,SAAS,EAAEJ,OAAO,CAAC;IACrC,CAAC,CAAC;EACJ,CAAC,MAAM;IACLF,IAAI,CAACN,MAAM,CAACO,GAAG,CAAC,QAAQ,EAAEX,CAAC,CAACC,MAAM,CAACG,MAAM,CAAC,CAAC,CAAC,CAACQ,OAAO,CAAC;EACvD;AACF,CAAC;AAAC,eAEaH,gBAAgB;AAAA"}

package/dist/esm/components/profile/ProfileDrawerContent.js

@@ -10,6 +10,7 @@ import { useProfile } from './ProfileContext';
 import ProfileButton from './ProfileButton';
 import ProfileUpdateNameModal from './ProfileUpdateNameModal';
 import ProfileUpdatePasswordModal from './ProfileUpdatePasswordModal';
+import getErrorMessage from '../../utils/getErrorMessage';
 const AvatarContainer = styled.div`
   display: flex;
   flex-direction: column;
@@ -55,11 +56,7 @@ const DeleteAvatarButton = () => {
           avatar: null
         }
       },
-      onError: error => {
-        var _source, _source$errors, _source$errors$;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        message.error((_source = error.source) === null || _source === void 0 ? void 0 : (_source$errors = _source.errors) === null || _source$errors === void 0 ? void 0 : (_source$errors$ = _source$errors[0]) === null || _source$errors$ === void 0 ? void 0 : _source$errors$.message);
-      },
+      onError: error => message.error(getErrorMessage(error)),
       onCompleted: () => {
         message.success(t('profile:updated'));
       }
@@ -93,11 +90,7 @@ const UpdateAvatarButton = ({
       uploadables: {
         avatar: file
       },
-      onError: error => {
-        var _source2, _source2$errors, _source2$errors$;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        message.error((_source2 = error.source) === null || _source2 === void 0 ? void 0 : (_source2$errors = _source2.errors) === null || _source2$errors === void 0 ? void 0 : (_source2$errors$ = _source2$errors[0]) === null || _source2$errors$ === void 0 ? void 0 : _source2$errors$.message);
-      },
+      onError: error => message.error(getErrorMessage(error)),
       onCompleted: () => {
         message.success(t('profile:updated'));
       }
@@ -151,11 +144,7 @@ const SignOutButton = () => {
   const handler = useCallback(() => {
     commit({
       variables: {},
-      onError: error => {
-        var _source3, _source3$errors, _source3$errors$;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        message.error((_source3 = error.source) === null || _source3 === void 0 ? void 0 : (_source3$errors = _source3.errors) === null || _source3$errors === void 0 ? void 0 : (_source3$errors$ = _source3$errors[0]) === null || _source3$errors$ === void 0 ? void 0 : _source3$errors$.message);
-      },
+      onError: error => message.error(getErrorMessage(error)),
       onCompleted: () => {
         window.location.href = '/auth/';
       }

package/dist/esm/components/profile/ProfileDrawerContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileDrawerContent.js","names":["React","useCallback","useMemo","useRef","useState","message","ThemeSwitcher","styled","clr","useTranslation","useMutation","UserAvatar","useProfile","ProfileButton","ProfileUpdateNameModal","ProfileUpdatePasswordModal","AvatarContainer","div","UserContent","FullName","p","theme","sizes","large","Email","inputColorPlaceholder","ActionsContainer","Footer","HiddenInput","input","profileDrawerContentUpdateAvatarMutation","DeleteAvatarButton","t","commit","loading","handler","variables","avatar","onError","error","source","errors","onCompleted","success","UpdateAvatarButton","hasAvatar","fileInputRef","e","target","files","file","uploadables","current","value","click","UpdateNameButton","hasName","modalVisibility","setModalVisibility","ChangePasswordButton","SignOutButton","window","location","href","ProfileDrawerContent","actions","children","email","firstName","lastName","fullName","filter","i","join"],"sources":["../../../../src/lib/components/profile/ProfileDrawerContent.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { message, ThemeSwitcher } from '@os-design/core';\nimport styled from '@emotion/styled';\nimport { clr } from '@os-design/theming';\nimport { useTranslation } from 'react-i18next';\nimport { useMutation } from 'react-relay/hooks';\nimport { graphql } from 'babel-plugin-relay/macro';\nimport UserAvatar from './UserAvatar';\nimport { useProfile } from './ProfileContext';\nimport ProfileButton from './ProfileButton';\nimport ProfileUpdateNameModal from './ProfileUpdateNameModal';\nimport ProfileUpdatePasswordModal from './ProfileUpdatePasswordModal';\nimport { ProfileDrawerContentSignOutMutation } from './__generated__/ProfileDrawerContentSignOutMutation.graphql';\nimport { ProfileDrawerContentUpdateAvatarMutation } from './__generated__/ProfileDrawerContentUpdateAvatarMutation.graphql';\n\nexport interface ProfileDrawerContentProps {\n  /**\n   * Additional actions placed under the avatar.\n   * @default undefined\n   */\n  actions?: React.ReactNode;\n  /**\n   * The children.\n   */\n  children?: React.ReactNode;\n}\n\nconst AvatarContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n`;\n\nconst UserContent = styled.div`\n  margin-top: 1em;\n`;\n\nconst FullName = styled.div`\n  font-size: ${(p) => p.theme.sizes.large}em;\n  font-weight: 500;\n  text-align: center;\n  line-height: 1.2;\n`;\n\nconst Email = styled.div`\n  color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n  margin-top: 0.2em;\n  text-align: center;\n`;\n\nconst ActionsContainer = styled.div`\n  margin-top: 1.5em;\n`;\n\nconst Footer = styled.div`\n  display: flex;\n  justify-content: center;\n  margin-top: auto;\n  padding-top: 1.5em;\n`;\n\nconst HiddenInput = styled.input`\n  display: none;\n`;\n\nconst profileDrawerContentUpdateAvatarMutation = graphql`\n  mutation ProfileDrawerContentUpdateAvatarMutation(\n    $input: UpdateAvatarInput!\n  ) {\n    updateAvatar(input: $input) {\n      id\n      avatar\n    }\n  }\n`;\n\nconst DeleteAvatarButton: React.FC = () => {\n  const { t } = useTranslation(['profile']);\n\n  const [commit, loading] =\n    useMutation<ProfileDrawerContentUpdateAvatarMutation>(\n      profileDrawerContentUpdateAvatarMutation\n    );\n\n  const handler = useCallback(() => {\n    commit({\n      variables: {\n        input: { avatar: null },\n      },\n      onError: (error) => {\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        message.error((error as any).source?.errors?.[0]?.message);\n      },\n      onCompleted: () => {\n        message.success(t('profile:updated'));\n      },\n    });\n  }, [commit, t]);\n\n  return (\n    <ProfileButton loading={loading} onClick={handler}>\n      {t('profile:deleteAvatar')}\n    </ProfileButton>\n  );\n};\n\ninterface UpdateAvatarButtonProps {\n  hasAvatar: boolean;\n}\n\nconst UpdateAvatarButton: React.FC<UpdateAvatarButtonProps> = ({\n  hasAvatar,\n}) => {\n  const { t } = useTranslation(['profile']);\n  const fileInputRef = useRef<HTMLInputElement>(null);\n\n  const [commit, loading] =\n    useMutation<ProfileDrawerContentUpdateAvatarMutation>(\n      profileDrawerContentUpdateAvatarMutation\n    );\n\n  const handler = useCallback(\n    (e) => {\n      const target = e.target as HTMLInputElement | null;\n      if (!target) return;\n\n      const { files } = target;\n      if (!files) return;\n\n      const file = files[0];\n\n      commit({\n        variables: {\n          input: {},\n        },\n        uploadables: { avatar: file },\n        onError: (error) => {\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          message.error((error as any).source?.errors?.[0]?.message);\n        },\n        onCompleted: () => {\n          message.success(t('profile:updated'));\n        },\n      });\n    },\n    [commit, t]\n  );\n\n  return (\n    <>\n      <ProfileButton\n        loading={loading}\n        onClick={() => {\n          if (!fileInputRef.current) return;\n          fileInputRef.current.value = '';\n          fileInputRef.current.click();\n        }}\n      >\n        {t(`profile:${hasAvatar ? 'changeAvatar' : 'setAvatar'}`)}\n      </ProfileButton>\n\n      <HiddenInput\n        type='file'\n        accept='image/jpeg,image/png,image/webp'\n        onChange={handler}\n        ref={fileInputRef}\n      />\n    </>\n  );\n};\n\ninterface UpdateNameButtonProps {\n  hasName: boolean;\n}\n\nconst UpdateNameButton: React.FC<UpdateNameButtonProps> = ({ hasName }) => {\n  const { t } = useTranslation(['profile']);\n  const [modalVisibility, setModalVisibility] = useState(false);\n\n  return (\n    <>\n      <ProfileButton onClick={() => setModalVisibility(true)}>\n        {t(`profile:${hasName ? 'changeName' : 'setName'}`)}\n      </ProfileButton>\n\n      <ProfileUpdateNameModal\n        visibility={modalVisibility}\n        onClose={() => setModalVisibility(false)}\n      />\n    </>\n  );\n};\n\nconst ChangePasswordButton: React.FC = () => {\n  const { t } = useTranslation(['profile']);\n  const [modalVisibility, setModalVisibility] = useState(false);\n\n  return (\n    <>\n      <ProfileButton onClick={() => setModalVisibility(true)}>\n        {t('profile:changePassword')}\n      </ProfileButton>\n\n      <ProfileUpdatePasswordModal\n        visibility={modalVisibility}\n        onClose={() => setModalVisibility(false)}\n      />\n    </>\n  );\n};\n\nconst SignOutButton: React.FC = () => {\n  const { t } = useTranslation(['profile']);\n\n  const [commit, loading] =\n    useMutation<ProfileDrawerContentSignOutMutation>(graphql`\n      mutation ProfileDrawerContentSignOutMutation {\n        signOut {\n          ok\n        }\n      }\n    `);\n\n  const handler = useCallback(() => {\n    commit({\n      variables: {},\n      onError: (error) => {\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        message.error((error as any).source?.errors?.[0]?.message);\n      },\n      onCompleted: () => {\n        window.location.href = '/auth/';\n      },\n    });\n  }, [commit]);\n\n  return (\n    <ProfileButton danger loading={loading} onClick={handler}>\n      {t('profile:signOut')}\n    </ProfileButton>\n  );\n};\n\nconst ProfileDrawerContent: React.FC<ProfileDrawerContentProps> = ({\n  actions,\n  children,\n}) => {\n  const { email, firstName, lastName, avatar } = useProfile();\n\n  const fullName = useMemo(\n    () => [firstName, lastName].filter((i) => i).join(' '),\n    [firstName, lastName]\n  );\n\n  return (\n    <>\n      <AvatarContainer>\n        <UserAvatar size='10em' />\n        <UserContent>\n          {fullName && <FullName>{fullName}</FullName>}\n          <Email>{email}</Email>\n        </UserContent>\n      </AvatarContainer>\n\n      <ActionsContainer>\n        {avatar && <DeleteAvatarButton />}\n\n        <UpdateAvatarButton hasAvatar={!!avatar} />\n        <UpdateNameButton hasName={!!fullName} />\n        <ChangePasswordButton />\n\n        {actions}\n\n        <SignOutButton />\n\n        {children}\n      </ActionsContainer>\n\n      <Footer>\n        <ThemeSwitcher />\n      </Footer>\n    </>\n  );\n};\n\nexport default ProfileDrawerContent;\n"],"mappings":"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"}
+{"version":3,"file":"ProfileDrawerContent.js","names":["React","useCallback","useMemo","useRef","useState","message","ThemeSwitcher","styled","clr","useTranslation","useMutation","UserAvatar","useProfile","ProfileButton","ProfileUpdateNameModal","ProfileUpdatePasswordModal","getErrorMessage","AvatarContainer","div","UserContent","FullName","p","theme","sizes","large","Email","inputColorPlaceholder","ActionsContainer","Footer","HiddenInput","input","profileDrawerContentUpdateAvatarMutation","DeleteAvatarButton","t","commit","loading","handler","variables","avatar","onError","error","onCompleted","success","UpdateAvatarButton","hasAvatar","fileInputRef","e","target","files","file","uploadables","current","value","click","UpdateNameButton","hasName","modalVisibility","setModalVisibility","ChangePasswordButton","SignOutButton","window","location","href","ProfileDrawerContent","actions","children","email","firstName","lastName","fullName","filter","i","join"],"sources":["../../../../src/lib/components/profile/ProfileDrawerContent.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { message, ThemeSwitcher } from '@os-design/core';\nimport styled from '@emotion/styled';\nimport { clr } from '@os-design/theming';\nimport { useTranslation } from 'react-i18next';\nimport { useMutation } from 'react-relay/hooks';\nimport { graphql } from 'babel-plugin-relay/macro';\nimport UserAvatar from './UserAvatar';\nimport { useProfile } from './ProfileContext';\nimport ProfileButton from './ProfileButton';\nimport ProfileUpdateNameModal from './ProfileUpdateNameModal';\nimport ProfileUpdatePasswordModal from './ProfileUpdatePasswordModal';\nimport { ProfileDrawerContentSignOutMutation } from './__generated__/ProfileDrawerContentSignOutMutation.graphql';\nimport { ProfileDrawerContentUpdateAvatarMutation } from './__generated__/ProfileDrawerContentUpdateAvatarMutation.graphql';\nimport getErrorMessage from '../../utils/getErrorMessage';\n\nexport interface ProfileDrawerContentProps {\n  /**\n   * Additional actions placed under the avatar.\n   * @default undefined\n   */\n  actions?: React.ReactNode;\n  /**\n   * The children.\n   */\n  children?: React.ReactNode;\n}\n\nconst AvatarContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n`;\n\nconst UserContent = styled.div`\n  margin-top: 1em;\n`;\n\nconst FullName = styled.div`\n  font-size: ${(p) => p.theme.sizes.large}em;\n  font-weight: 500;\n  text-align: center;\n  line-height: 1.2;\n`;\n\nconst Email = styled.div`\n  color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n  margin-top: 0.2em;\n  text-align: center;\n`;\n\nconst ActionsContainer = styled.div`\n  margin-top: 1.5em;\n`;\n\nconst Footer = styled.div`\n  display: flex;\n  justify-content: center;\n  margin-top: auto;\n  padding-top: 1.5em;\n`;\n\nconst HiddenInput = styled.input`\n  display: none;\n`;\n\nconst profileDrawerContentUpdateAvatarMutation = graphql`\n  mutation ProfileDrawerContentUpdateAvatarMutation(\n    $input: UpdateAvatarInput!\n  ) {\n    updateAvatar(input: $input) {\n      id\n      avatar\n    }\n  }\n`;\n\nconst DeleteAvatarButton: React.FC = () => {\n  const { t } = useTranslation(['profile']);\n\n  const [commit, loading] =\n    useMutation<ProfileDrawerContentUpdateAvatarMutation>(\n      profileDrawerContentUpdateAvatarMutation\n    );\n\n  const handler = useCallback(() => {\n    commit({\n      variables: {\n        input: { avatar: null },\n      },\n      onError: (error) => message.error(getErrorMessage(error)),\n      onCompleted: () => {\n        message.success(t('profile:updated'));\n      },\n    });\n  }, [commit, t]);\n\n  return (\n    <ProfileButton loading={loading} onClick={handler}>\n      {t('profile:deleteAvatar')}\n    </ProfileButton>\n  );\n};\n\ninterface UpdateAvatarButtonProps {\n  hasAvatar: boolean;\n}\n\nconst UpdateAvatarButton: React.FC<UpdateAvatarButtonProps> = ({\n  hasAvatar,\n}) => {\n  const { t } = useTranslation(['profile']);\n  const fileInputRef = useRef<HTMLInputElement>(null);\n\n  const [commit, loading] =\n    useMutation<ProfileDrawerContentUpdateAvatarMutation>(\n      profileDrawerContentUpdateAvatarMutation\n    );\n\n  const handler = useCallback(\n    (e) => {\n      const target = e.target as HTMLInputElement | null;\n      if (!target) return;\n\n      const { files } = target;\n      if (!files) return;\n\n      const file = files[0];\n\n      commit({\n        variables: {\n          input: {},\n        },\n        uploadables: { avatar: file },\n        onError: (error) => message.error(getErrorMessage(error)),\n        onCompleted: () => {\n          message.success(t('profile:updated'));\n        },\n      });\n    },\n    [commit, t]\n  );\n\n  return (\n    <>\n      <ProfileButton\n        loading={loading}\n        onClick={() => {\n          if (!fileInputRef.current) return;\n          fileInputRef.current.value = '';\n          fileInputRef.current.click();\n        }}\n      >\n        {t(`profile:${hasAvatar ? 'changeAvatar' : 'setAvatar'}`)}\n      </ProfileButton>\n\n      <HiddenInput\n        type='file'\n        accept='image/jpeg,image/png,image/webp'\n        onChange={handler}\n        ref={fileInputRef}\n      />\n    </>\n  );\n};\n\ninterface UpdateNameButtonProps {\n  hasName: boolean;\n}\n\nconst UpdateNameButton: React.FC<UpdateNameButtonProps> = ({ hasName }) => {\n  const { t } = useTranslation(['profile']);\n  const [modalVisibility, setModalVisibility] = useState(false);\n\n  return (\n    <>\n      <ProfileButton onClick={() => setModalVisibility(true)}>\n        {t(`profile:${hasName ? 'changeName' : 'setName'}`)}\n      </ProfileButton>\n\n      <ProfileUpdateNameModal\n        visibility={modalVisibility}\n        onClose={() => setModalVisibility(false)}\n      />\n    </>\n  );\n};\n\nconst ChangePasswordButton: React.FC = () => {\n  const { t } = useTranslation(['profile']);\n  const [modalVisibility, setModalVisibility] = useState(false);\n\n  return (\n    <>\n      <ProfileButton onClick={() => setModalVisibility(true)}>\n        {t('profile:changePassword')}\n      </ProfileButton>\n\n      <ProfileUpdatePasswordModal\n        visibility={modalVisibility}\n        onClose={() => setModalVisibility(false)}\n      />\n    </>\n  );\n};\n\nconst SignOutButton: React.FC = () => {\n  const { t } = useTranslation(['profile']);\n\n  const [commit, loading] =\n    useMutation<ProfileDrawerContentSignOutMutation>(graphql`\n      mutation ProfileDrawerContentSignOutMutation {\n        signOut {\n          ok\n        }\n      }\n    `);\n\n  const handler = useCallback(() => {\n    commit({\n      variables: {},\n      onError: (error) => message.error(getErrorMessage(error)),\n      onCompleted: () => {\n        window.location.href = '/auth/';\n      },\n    });\n  }, [commit]);\n\n  return (\n    <ProfileButton danger loading={loading} onClick={handler}>\n      {t('profile:signOut')}\n    </ProfileButton>\n  );\n};\n\nconst ProfileDrawerContent: React.FC<ProfileDrawerContentProps> = ({\n  actions,\n  children,\n}) => {\n  const { email, firstName, lastName, avatar } = useProfile();\n\n  const fullName = useMemo(\n    () => [firstName, lastName].filter((i) => i).join(' '),\n    [firstName, lastName]\n  );\n\n  return (\n    <>\n      <AvatarContainer>\n        <UserAvatar size='10em' />\n        <UserContent>\n          {fullName && <FullName>{fullName}</FullName>}\n          <Email>{email}</Email>\n        </UserContent>\n      </AvatarContainer>\n\n      <ActionsContainer>\n        {avatar && <DeleteAvatarButton />}\n\n        <UpdateAvatarButton hasAvatar={!!avatar} />\n        <UpdateNameButton hasName={!!fullName} />\n        <ChangePasswordButton />\n\n        {actions}\n\n        <SignOutButton />\n\n        {children}\n      </ActionsContainer>\n\n      <Footer>\n        <ThemeSwitcher />\n      </Footer>\n    </>\n  );\n};\n\nexport default ProfileDrawerContent;\n"],"mappings":"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"}

package/dist/esm/components/profile/ProfileUpdateNameModal.js

@@ -1,10 +1,12 @@
 var _ProfileUpdateNameModalMutation;
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { message, Modal } from '@os-design/core';
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+import { Form, FormItem, Input, message, Modal } from '@os-design/core';
+import { FormProvider, useForm } from '@os-design/form';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { handleFormErrors, FormContext } from '@os-team/form-utils';
 import { useMutation } from 'react-relay/hooks';
-import ProfileUpdateNameForm from './ProfileUpdateNameForm';
+import handleFormErrors from '../../utils/handleFormErrors';
+import FormError from '../shared/FormError';
 import { useProfile } from './ProfileContext';
 const ProfileUpdateNameModal = ({
   visibility,
@@ -17,50 +19,32 @@ const ProfileUpdateNameModal = ({
     firstName,
     lastName
   } = useProfile();
-  const [fieldErrors, setFieldErrors] = useState({});
-  const [formError, setFormError] = useState();
-  const [data, setData] = useState({
+  const initValues = useMemo(() => ({
     firstName: firstName || '',
     lastName: lastName || ''
-  });
+  }), [firstName, lastName]);
+  const {
+    form,
+    Field
+  } = useForm(initValues);
   const [commit, loading] = useMutation(_ProfileUpdateNameModalMutation !== void 0 ? _ProfileUpdateNameModalMutation : (_ProfileUpdateNameModalMutation = require("./__generated__/ProfileUpdateNameModalMutation.graphql"), _ProfileUpdateNameModalMutation.hash && _ProfileUpdateNameModalMutation.hash !== "7264a05b6738d5417df9f1dc462486aa" && console.error("The definition of 'ProfileUpdateNameModalMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _ProfileUpdateNameModalMutation));
 
   // Reset the data if the modal is visible
   useEffect(() => {
-    if (visibility) {
-      setData({
-        firstName: firstName || '',
-        lastName: lastName || ''
-      });
-    }
-  }, [firstName, lastName, visibility]);
+    if (visibility) form.reset();
+  }, [form, visibility]);
   const onSubmit = useCallback(() => {
     commit({
       variables: {
-        input: data
-      },
-      onError: error => {
-        handleFormErrors(error, {
-          setFieldErrors,
-          setFormError
-        });
+        input: form.values.getAll()
       },
+      onError: error => handleFormErrors(form, error),
       onCompleted: () => {
-        setFieldErrors({});
-        setFormError(undefined);
         message.success(t('profile:updated'));
         onClose();
       }
     });
-  }, [commit, data, onClose, t]);
-  const formContext = useMemo(() => ({
-    data,
-    setData,
-    fieldErrors,
-    setFieldErrors,
-    formError,
-    setFormError
-  }), [data, fieldErrors, formError]);
+  }, [commit, form, onClose, t]);
   return /*#__PURE__*/React.createElement(Modal, {
     title: t('profile:updateNameModal.title'),
     visible: visibility,
@@ -68,9 +52,29 @@ const ProfileUpdateNameModal = ({
     okLoading: loading,
     onOk: onSubmit,
     onClose: onClose
-  }, /*#__PURE__*/React.createElement(FormContext.Provider, {
-    value: formContext
-  }, /*#__PURE__*/React.createElement(ProfileUpdateNameForm, null)));
+  }, /*#__PURE__*/React.createElement(FormProvider, {
+    form: form
+  }, /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(Field, {
+    name: "firstName",
+    render: (props, {
+      error
+    }) => /*#__PURE__*/React.createElement(FormItem, {
+      label: t('profile:updateNameModal.firstName.label'),
+      error: error
+    }, /*#__PURE__*/React.createElement(Input, _extends({
+      placeholder: t('profile:updateNameModal.firstName.placeholder')
+    }, props)))
+  }), /*#__PURE__*/React.createElement(Field, {
+    name: "lastName",
+    render: (props, {
+      error
+    }) => /*#__PURE__*/React.createElement(FormItem, {
+      label: t('profile:updateNameModal.lastName.label'),
+      error: error
+    }, /*#__PURE__*/React.createElement(Input, _extends({
+      placeholder: t('profile:updateNameModal.lastName.placeholder')
+    }, props)))
+  }), /*#__PURE__*/React.createElement(FormError, null))));
 };
 export default ProfileUpdateNameModal;
 //# sourceMappingURL=ProfileUpdateNameModal.js.map

package/dist/esm/components/profile/ProfileUpdateNameModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileUpdateNameModal.js","names":["React","useCallback","useEffect","useMemo","useState","message","Modal","useTranslation","handleFormErrors","FormContext","useMutation","ProfileUpdateNameForm","useProfile","ProfileUpdateNameModal","visibility","onClose","t","firstName","lastName","fieldErrors","setFieldErrors","formError","setFormError","data","setData","commit","loading","onSubmit","variables","input","onError","error","onCompleted","undefined","success","formContext"],"sources":["../../../../src/lib/components/profile/ProfileUpdateNameModal.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { message, Modal } from '@os-design/core';\nimport { useTranslation } from 'react-i18next';\nimport { Constraint, handleFormErrors, FormContext } from '@os-team/form-utils';\nimport { graphql } from 'babel-plugin-relay/macro';\nimport { useMutation } from 'react-relay/hooks';\nimport ProfileUpdateNameForm, {\n  ProfileUpdateNameFormData,\n} from './ProfileUpdateNameForm';\nimport { useProfile } from './ProfileContext';\nimport { ProfileUpdateNameModalMutation } from './__generated__/ProfileUpdateNameModalMutation.graphql';\n\ninterface ProfileUpdateNameModalProps {\n  visibility: boolean;\n  onClose: () => void;\n}\n\nconst ProfileUpdateNameModal: React.FC<ProfileUpdateNameModalProps> = ({\n  visibility,\n  onClose,\n}) => {\n  const { t } = useTranslation(['profile']);\n  const { firstName, lastName } = useProfile();\n\n  const [fieldErrors, setFieldErrors] = useState<Record<string, Constraint>>(\n    {}\n  );\n  const [formError, setFormError] = useState<string | undefined>();\n  const [data, setData] = useState<ProfileUpdateNameFormData>({\n    firstName: firstName || '',\n    lastName: lastName || '',\n  });\n\n  const [commit, loading] = useMutation<ProfileUpdateNameModalMutation>(graphql`\n    mutation ProfileUpdateNameModalMutation($input: UpdateProfileInput!) {\n      updateProfile(input: $input) {\n        firstName\n        lastName\n      }\n    }\n  `);\n\n  // Reset the data if the modal is visible\n  useEffect(() => {\n    if (visibility) {\n      setData({\n        firstName: firstName || '',\n        lastName: lastName || '',\n      });\n    }\n  }, [firstName, lastName, visibility]);\n\n  const onSubmit = useCallback(() => {\n    commit({\n      variables: {\n        input: data,\n      },\n      onError: (error) => {\n        handleFormErrors(error, { setFieldErrors, setFormError });\n      },\n      onCompleted: () => {\n        setFieldErrors({});\n        setFormError(undefined);\n        message.success(t('profile:updated'));\n        onClose();\n      },\n    });\n  }, [commit, data, onClose, t]);\n\n  const formContext = useMemo(\n    () => ({\n      data,\n      setData,\n      fieldErrors,\n      setFieldErrors,\n      formError,\n      setFormError,\n    }),\n    [data, fieldErrors, formError]\n  );\n\n  return (\n    <Modal\n      title={t('profile:updateNameModal.title')}\n      visible={visibility}\n      okText={t('profile:update')}\n      okLoading={loading}\n      onOk={onSubmit}\n      onClose={onClose}\n    >\n      <FormContext.Provider value={formContext}>\n        <ProfileUpdateNameForm />\n      </FormContext.Provider>\n    </Modal>\n  );\n};\n\nexport default ProfileUpdateNameModal;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AACxE,SAASC,OAAO,EAAEC,KAAK,QAAQ,iBAAiB;AAChD,SAASC,cAAc,QAAQ,eAAe;AAC9C,SAAqBC,gBAAgB,EAAEC,WAAW,QAAQ,qBAAqB;AAE/E,SAASC,WAAW,QAAQ,mBAAmB;AAC/C,OAAOC,qBAAqB,MAErB,yBAAyB;AAChC,SAASC,UAAU,QAAQ,kBAAkB;AAQ7C,MAAMC,sBAA6D,GAAG,CAAC;EACrEC,UAAU;EACVC;AACF,CAAC,KAAK;EACJ,MAAM;IAAEC;EAAE,CAAC,GAAGT,cAAc,CAAC,CAAC,SAAS,CAAC,CAAC;EACzC,MAAM;IAAEU,SAAS;IAAEC;EAAS,CAAC,GAAGN,UAAU,EAAE;EAE5C,MAAM,CAACO,WAAW,EAAEC,cAAc,CAAC,GAAGhB,QAAQ,CAC5C,CAAC,CAAC,CACH;EACD,MAAM,CAACiB,SAAS,EAAEC,YAAY,CAAC,GAAGlB,QAAQ,EAAsB;EAChE,MAAM,CAACmB,IAAI,EAAEC,OAAO,CAAC,GAAGpB,QAAQ,CAA4B;IAC1Da,SAAS,EAAEA,SAAS,IAAI,EAAE;IAC1BC,QAAQ,EAAEA,QAAQ,IAAI;EACxB,CAAC,CAAC;EAEF,MAAM,CAACO,MAAM,EAAEC,OAAO,CAAC,GAAGhB,WAAW,6fAOnC;;EAEF;EACAR,SAAS,CAAC,MAAM;IACd,IAAIY,UAAU,EAAE;MACdU,OAAO,CAAC;QACNP,SAAS,EAAEA,SAAS,IAAI,EAAE;QAC1BC,QAAQ,EAAEA,QAAQ,IAAI;MACxB,CAAC,CAAC;IACJ;EACF,CAAC,EAAE,CAACD,SAAS,EAAEC,QAAQ,EAAEJ,UAAU,CAAC,CAAC;EAErC,MAAMa,QAAQ,GAAG1B,WAAW,CAAC,MAAM;IACjCwB,MAAM,CAAC;MACLG,SAAS,EAAE;QACTC,KAAK,EAAEN;MACT,CAAC;MACDO,OAAO,EAAGC,KAAK,IAAK;QAClBvB,gBAAgB,CAACuB,KAAK,EAAE;UAAEX,cAAc;UAAEE;QAAa,CAAC,CAAC;MAC3D,CAAC;MACDU,WAAW,EAAE,MAAM;QACjBZ,cAAc,CAAC,CAAC,CAAC,CAAC;QAClBE,YAAY,CAACW,SAAS,CAAC;QACvB5B,OAAO,CAAC6B,OAAO,CAAClB,CAAC,CAAC,iBAAiB,CAAC,CAAC;QACrCD,OAAO,EAAE;MACX;IACF,CAAC,CAAC;EACJ,CAAC,EAAE,CAACU,MAAM,EAAEF,IAAI,EAAER,OAAO,EAAEC,CAAC,CAAC,CAAC;EAE9B,MAAMmB,WAAW,GAAGhC,OAAO,CACzB,OAAO;IACLoB,IAAI;IACJC,OAAO;IACPL,WAAW;IACXC,cAAc;IACdC,SAAS;IACTC;EACF,CAAC,CAAC,EACF,CAACC,IAAI,EAAEJ,WAAW,EAAEE,SAAS,CAAC,CAC/B;EAED,oBACE,oBAAC,KAAK;IACJ,KAAK,EAAEL,CAAC,CAAC,+BAA+B,CAAE;IAC1C,OAAO,EAAEF,UAAW;IACpB,MAAM,EAAEE,CAAC,CAAC,gBAAgB,CAAE;IAC5B,SAAS,EAAEU,OAAQ;IACnB,IAAI,EAAEC,QAAS;IACf,OAAO,EAAEZ;EAAQ,gBAEjB,oBAAC,WAAW,CAAC,QAAQ;IAAC,KAAK,EAAEoB;EAAY,gBACvC,oBAAC,qBAAqB,OAAG,CACJ,CACjB;AAEZ,CAAC;AAED,eAAetB,sBAAsB"}
+{"version":3,"file":"ProfileUpdateNameModal.js","names":["Form","FormItem","Input","message","Modal","FormProvider","useForm","React","useCallback","useEffect","useMemo","useTranslation","useMutation","handleFormErrors","FormError","useProfile","ProfileUpdateNameModal","visibility","onClose","t","firstName","lastName","initValues","form","Field","commit","loading","reset","onSubmit","variables","input","values","getAll","onError","error","onCompleted","success","props"],"sources":["../../../../src/lib/components/profile/ProfileUpdateNameModal.tsx"],"sourcesContent":["import { Form, FormItem, Input, message, Modal } from '@os-design/core';\nimport { FormProvider, useForm } from '@os-design/form';\nimport { graphql } from 'babel-plugin-relay/macro';\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useMutation } from 'react-relay/hooks';\nimport handleFormErrors from '../../utils/handleFormErrors';\nimport FormError from '../shared/FormError';\nimport { useProfile } from './ProfileContext';\nimport { ProfileUpdateNameModalMutation } from './__generated__/ProfileUpdateNameModalMutation.graphql';\n\ninterface ProfileUpdateNameFormData {\n  firstName: string;\n  lastName: string;\n}\n\ninterface ProfileUpdateNameModalProps {\n  visibility: boolean;\n  onClose: () => void;\n}\n\nconst ProfileUpdateNameModal: React.FC<ProfileUpdateNameModalProps> = ({\n  visibility,\n  onClose,\n}) => {\n  const { t } = useTranslation(['profile']);\n  const { firstName, lastName } = useProfile();\n\n  const initValues = useMemo(\n    () => ({ firstName: firstName || '', lastName: lastName || '' }),\n    [firstName, lastName]\n  );\n\n  const { form, Field } = useForm<ProfileUpdateNameFormData>(initValues);\n\n  const [commit, loading] = useMutation<ProfileUpdateNameModalMutation>(graphql`\n    mutation ProfileUpdateNameModalMutation($input: UpdateProfileInput!) {\n      updateProfile(input: $input) {\n        firstName\n        lastName\n      }\n    }\n  `);\n\n  // Reset the data if the modal is visible\n  useEffect(() => {\n    if (visibility) form.reset();\n  }, [form, visibility]);\n\n  const onSubmit = useCallback(() => {\n    commit({\n      variables: {\n        input: form.values.getAll(),\n      },\n      onError: (error) => handleFormErrors(form, error),\n      onCompleted: () => {\n        message.success(t('profile:updated'));\n        onClose();\n      },\n    });\n  }, [commit, form, onClose, t]);\n\n  return (\n    <Modal\n      title={t('profile:updateNameModal.title')}\n      visible={visibility}\n      okText={t('profile:update')}\n      okLoading={loading}\n      onOk={onSubmit}\n      onClose={onClose}\n    >\n      <FormProvider form={form}>\n        <Form>\n          <Field\n            name='firstName'\n            render={(props, { error }) => (\n              <FormItem\n                label={t('profile:updateNameModal.firstName.label')}\n                error={error}\n              >\n                <Input\n                  placeholder={t(\n                    'profile:updateNameModal.firstName.placeholder'\n                  )}\n                  {...props}\n                />\n              </FormItem>\n            )}\n          />\n\n          <Field\n            name='lastName'\n            render={(props, { error }) => (\n              <FormItem\n                label={t('profile:updateNameModal.lastName.label')}\n                error={error}\n              >\n                <Input\n                  placeholder={t(\n                    'profile:updateNameModal.lastName.placeholder'\n                  )}\n                  {...props}\n                />\n              </FormItem>\n            )}\n          />\n\n          <FormError />\n        </Form>\n      </FormProvider>\n    </Modal>\n  );\n};\n\nexport default ProfileUpdateNameModal;\n"],"mappings":"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"}

package/dist/esm/components/profile/ProfileUpdatePasswordModal.js

@@ -1,10 +1,12 @@
 var _ProfileUpdatePasswordModalMutation;
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { message, Modal } from '@os-design/core';
-import { useMutation } from 'react-relay/hooks';
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+import { Form, FormItem, InputPassword, message, Modal } from '@os-design/core';
+import { FormProvider, useForm } from '@os-design/form';
+import React, { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { handleFormErrors, FormContext } from '@os-team/form-utils';
-import ProfileUpdatePasswordForm from './ProfileUpdatePasswordForm';
+import { useMutation } from 'react-relay/hooks';
+import handleFormErrors from '../../utils/handleFormErrors';
+import FormError from '../shared/FormError';
 const ProfileUpdatePasswordModal = ({
   visibility,
   onClose
@@ -12,9 +14,10 @@ const ProfileUpdatePasswordModal = ({
   const {
     t
   } = useTranslation(['profile']);
-  const [fieldErrors, setFieldErrors] = useState({});
-  const [formError, setFormError] = useState();
-  const [data, setData] = useState({
+  const {
+    form,
+    Field
+  } = useForm({
     currentPassword: '',
     password: ''
   });
@@ -22,40 +25,20 @@ const ProfileUpdatePasswordModal = ({
 
   // Reset the data if the modal is visible
   useEffect(() => {
-    if (visibility) {
-      setData({
-        currentPassword: '',
-        password: ''
-      });
-    }
-  }, [visibility]);
+    if (visibility) form.reset();
+  }, [form, visibility]);
   const onSubmit = useCallback(() => {
     commit({
       variables: {
-        input: data
-      },
-      onError: error => {
-        handleFormErrors(error, {
-          setFieldErrors,
-          setFormError
-        });
+        input: form.values.getAll()
       },
+      onError: error => handleFormErrors(form, error),
       onCompleted: () => {
-        setFieldErrors({});
-        setFormError(undefined);
         message.success(t('profile:updatePasswordModal.success'));
         onClose();
       }
     });
-  }, [commit, data, onClose, t]);
-  const formContext = useMemo(() => ({
-    data,
-    setData,
-    fieldErrors,
-    setFieldErrors,
-    formError,
-    setFormError
-  }), [data, fieldErrors, formError]);
+  }, [commit, form, onClose, t]);
   return /*#__PURE__*/React.createElement(Modal, {
     title: t('profile:updatePasswordModal.title'),
     visible: visibility,
@@ -63,9 +46,33 @@ const ProfileUpdatePasswordModal = ({
     okLoading: loading,
     onOk: onSubmit,
     onClose: onClose
-  }, /*#__PURE__*/React.createElement(FormContext.Provider, {
-    value: formContext
-  }, /*#__PURE__*/React.createElement(ProfileUpdatePasswordForm, null)));
+  }, /*#__PURE__*/React.createElement(FormProvider, {
+    form: form
+  }, /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(Field, {
+    name: "currentPassword",
+    render: (props, {
+      error
+    }) => /*#__PURE__*/React.createElement(FormItem, {
+      label: t('profile:updatePasswordModal.currentPassword.label'),
+      error: error
+    }, /*#__PURE__*/React.createElement(InputPassword, _extends({
+      placeholder: t('profile:updatePasswordModal.currentPassword.placeholder')
+    }, props)))
+  }), /*#__PURE__*/React.createElement(Field, {
+    name: "password",
+    render: (props, {
+      error
+    }) => /*#__PURE__*/React.createElement(FormItem, {
+      label: t('profile:updatePasswordModal.newPassword.label'),
+      error: error
+    }, /*#__PURE__*/React.createElement(InputPassword, _extends({
+      placeholder: t('profile:updatePasswordModal.newPassword.placeholder'),
+      showStrengthMeter: true,
+      strengthNames: t('profile:updatePasswordModal.passwordStrengthNames', {
+        returnObjects: true
+      })
+    }, props)))
+  }), /*#__PURE__*/React.createElement(FormError, null))));
 };
 export default ProfileUpdatePasswordModal;
 //# sourceMappingURL=ProfileUpdatePasswordModal.js.map

package/dist/esm/components/profile/ProfileUpdatePasswordModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileUpdatePasswordModal.js","names":["React","useCallback","useEffect","useMemo","useState","message","Modal","useMutation","useTranslation","handleFormErrors","FormContext","ProfileUpdatePasswordForm","ProfileUpdatePasswordModal","visibility","onClose","t","fieldErrors","setFieldErrors","formError","setFormError","data","setData","currentPassword","password","commit","loading","onSubmit","variables","input","onError","error","onCompleted","undefined","success","formContext"],"sources":["../../../../src/lib/components/profile/ProfileUpdatePasswordModal.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { message, Modal } from '@os-design/core';\nimport { graphql } from 'babel-plugin-relay/macro';\nimport { useMutation } from 'react-relay/hooks';\nimport { useTranslation } from 'react-i18next';\nimport { Constraint, handleFormErrors, FormContext } from '@os-team/form-utils';\nimport ProfileUpdatePasswordForm, {\n  ProfileUpdatePasswordFormData,\n} from './ProfileUpdatePasswordForm';\nimport { ProfileUpdatePasswordModalMutation } from './__generated__/ProfileUpdatePasswordModalMutation.graphql';\n\ninterface ProfileUpdatePasswordModalProps {\n  visibility: boolean;\n  onClose: () => void;\n}\n\nconst ProfileUpdatePasswordModal: React.FC<ProfileUpdatePasswordModalProps> = ({\n  visibility,\n  onClose,\n}) => {\n  const { t } = useTranslation(['profile']);\n\n  const [fieldErrors, setFieldErrors] = useState<Record<string, Constraint>>(\n    {}\n  );\n  const [formError, setFormError] = useState<string | undefined>();\n  const [data, setData] = useState<ProfileUpdatePasswordFormData>({\n    currentPassword: '',\n    password: '',\n  });\n\n  const [commit, loading] =\n    useMutation<ProfileUpdatePasswordModalMutation>(graphql`\n      mutation ProfileUpdatePasswordModalMutation(\n        $input: UpdatePasswordInput!\n      ) {\n        updatePassword(input: $input) {\n          id\n        }\n      }\n    `);\n\n  // Reset the data if the modal is visible\n  useEffect(() => {\n    if (visibility) {\n      setData({\n        currentPassword: '',\n        password: '',\n      });\n    }\n  }, [visibility]);\n\n  const onSubmit = useCallback(() => {\n    commit({\n      variables: {\n        input: data,\n      },\n      onError: (error) => {\n        handleFormErrors(error, { setFieldErrors, setFormError });\n      },\n      onCompleted: () => {\n        setFieldErrors({});\n        setFormError(undefined);\n        message.success(t('profile:updatePasswordModal.success'));\n        onClose();\n      },\n    });\n  }, [commit, data, onClose, t]);\n\n  const formContext = useMemo(\n    () => ({\n      data,\n      setData,\n      fieldErrors,\n      setFieldErrors,\n      formError,\n      setFormError,\n    }),\n    [data, fieldErrors, formError]\n  );\n\n  return (\n    <Modal\n      title={t('profile:updatePasswordModal.title')}\n      visible={visibility}\n      okText={t('profile:updatePasswordModal.button')}\n      okLoading={loading}\n      onOk={onSubmit}\n      onClose={onClose}\n    >\n      <FormContext.Provider value={formContext}>\n        <ProfileUpdatePasswordForm />\n      </FormContext.Provider>\n    </Modal>\n  );\n};\n\nexport default ProfileUpdatePasswordModal;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AACxE,SAASC,OAAO,EAAEC,KAAK,QAAQ,iBAAiB;AAEhD,SAASC,WAAW,QAAQ,mBAAmB;AAC/C,SAASC,cAAc,QAAQ,eAAe;AAC9C,SAAqBC,gBAAgB,EAAEC,WAAW,QAAQ,qBAAqB;AAC/E,OAAOC,yBAAyB,MAEzB,6BAA6B;AAQpC,MAAMC,0BAAqE,GAAG,CAAC;EAC7EC,UAAU;EACVC;AACF,CAAC,KAAK;EACJ,MAAM;IAAEC;EAAE,CAAC,GAAGP,cAAc,CAAC,CAAC,SAAS,CAAC,CAAC;EAEzC,MAAM,CAACQ,WAAW,EAAEC,cAAc,CAAC,GAAGb,QAAQ,CAC5C,CAAC,CAAC,CACH;EACD,MAAM,CAACc,SAAS,EAAEC,YAAY,CAAC,GAAGf,QAAQ,EAAsB;EAChE,MAAM,CAACgB,IAAI,EAAEC,OAAO,CAAC,GAAGjB,QAAQ,CAAgC;IAC9DkB,eAAe,EAAE,EAAE;IACnBC,QAAQ,EAAE;EACZ,CAAC,CAAC;EAEF,MAAM,CAACC,MAAM,EAAEC,OAAO,CAAC,GACrBlB,WAAW,6hBAQT;;EAEJ;EACAL,SAAS,CAAC,MAAM;IACd,IAAIW,UAAU,EAAE;MACdQ,OAAO,CAAC;QACNC,eAAe,EAAE,EAAE;QACnBC,QAAQ,EAAE;MACZ,CAAC,CAAC;IACJ;EACF,CAAC,EAAE,CAACV,UAAU,CAAC,CAAC;EAEhB,MAAMa,QAAQ,GAAGzB,WAAW,CAAC,MAAM;IACjCuB,MAAM,CAAC;MACLG,SAAS,EAAE;QACTC,KAAK,EAAER;MACT,CAAC;MACDS,OAAO,EAAGC,KAAK,IAAK;QAClBrB,gBAAgB,CAACqB,KAAK,EAAE;UAAEb,cAAc;UAAEE;QAAa,CAAC,CAAC;MAC3D,CAAC;MACDY,WAAW,EAAE,MAAM;QACjBd,cAAc,CAAC,CAAC,CAAC,CAAC;QAClBE,YAAY,CAACa,SAAS,CAAC;QACvB3B,OAAO,CAAC4B,OAAO,CAAClB,CAAC,CAAC,qCAAqC,CAAC,CAAC;QACzDD,OAAO,EAAE;MACX;IACF,CAAC,CAAC;EACJ,CAAC,EAAE,CAACU,MAAM,EAAEJ,IAAI,EAAEN,OAAO,EAAEC,CAAC,CAAC,CAAC;EAE9B,MAAMmB,WAAW,GAAG/B,OAAO,CACzB,OAAO;IACLiB,IAAI;IACJC,OAAO;IACPL,WAAW;IACXC,cAAc;IACdC,SAAS;IACTC;EACF,CAAC,CAAC,EACF,CAACC,IAAI,EAAEJ,WAAW,EAAEE,SAAS,CAAC,CAC/B;EAED,oBACE,oBAAC,KAAK;IACJ,KAAK,EAAEH,CAAC,CAAC,mCAAmC,CAAE;IAC9C,OAAO,EAAEF,UAAW;IACpB,MAAM,EAAEE,CAAC,CAAC,oCAAoC,CAAE;IAChD,SAAS,EAAEU,OAAQ;IACnB,IAAI,EAAEC,QAAS;IACf,OAAO,EAAEZ;EAAQ,gBAEjB,oBAAC,WAAW,CAAC,QAAQ;IAAC,KAAK,EAAEoB;EAAY,gBACvC,oBAAC,yBAAyB,OAAG,CACR,CACjB;AAEZ,CAAC;AAED,eAAetB,0BAA0B"}
+{"version":3,"file":"ProfileUpdatePasswordModal.js","names":["Form","FormItem","InputPassword","message","Modal","FormProvider","useForm","React","useCallback","useEffect","useTranslation","useMutation","handleFormErrors","FormError","ProfileUpdatePasswordModal","visibility","onClose","t","form","Field","currentPassword","password","commit","loading","reset","onSubmit","variables","input","values","getAll","onError","error","onCompleted","success","props","returnObjects"],"sources":["../../../../src/lib/components/profile/ProfileUpdatePasswordModal.tsx"],"sourcesContent":["import { Form, FormItem, InputPassword, message, Modal } from '@os-design/core';\nimport { FormProvider, useForm } from '@os-design/form';\nimport { graphql } from 'babel-plugin-relay/macro';\nimport React, { useCallback, useEffect } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useMutation } from 'react-relay/hooks';\nimport handleFormErrors from '../../utils/handleFormErrors';\nimport FormError from '../shared/FormError';\nimport { ProfileUpdatePasswordModalMutation } from './__generated__/ProfileUpdatePasswordModalMutation.graphql';\n\ninterface ProfileUpdatePasswordFormData {\n  currentPassword: string;\n  password: string;\n}\n\ninterface ProfileUpdatePasswordModalProps {\n  visibility: boolean;\n  onClose: () => void;\n}\n\nconst ProfileUpdatePasswordModal: React.FC<ProfileUpdatePasswordModalProps> = ({\n  visibility,\n  onClose,\n}) => {\n  const { t } = useTranslation(['profile']);\n\n  const { form, Field } = useForm<ProfileUpdatePasswordFormData>({\n    currentPassword: '',\n    password: '',\n  });\n\n  const [commit, loading] =\n    useMutation<ProfileUpdatePasswordModalMutation>(graphql`\n      mutation ProfileUpdatePasswordModalMutation(\n        $input: UpdatePasswordInput!\n      ) {\n        updatePassword(input: $input) {\n          id\n        }\n      }\n    `);\n\n  // Reset the data if the modal is visible\n  useEffect(() => {\n    if (visibility) form.reset();\n  }, [form, visibility]);\n\n  const onSubmit = useCallback(() => {\n    commit({\n      variables: {\n        input: form.values.getAll(),\n      },\n      onError: (error) => handleFormErrors(form, error),\n      onCompleted: () => {\n        message.success(t('profile:updatePasswordModal.success'));\n        onClose();\n      },\n    });\n  }, [commit, form, onClose, t]);\n\n  return (\n    <Modal\n      title={t('profile:updatePasswordModal.title')}\n      visible={visibility}\n      okText={t('profile:updatePasswordModal.button')}\n      okLoading={loading}\n      onOk={onSubmit}\n      onClose={onClose}\n    >\n      <FormProvider form={form}>\n        <Form>\n          <Field\n            name='currentPassword'\n            render={(props, { error }) => (\n              <FormItem\n                label={t('profile:updatePasswordModal.currentPassword.label')}\n                error={error}\n              >\n                <InputPassword\n                  placeholder={t(\n                    'profile:updatePasswordModal.currentPassword.placeholder'\n                  )}\n                  {...props}\n                />\n              </FormItem>\n            )}\n          />\n\n          <Field\n            name='password'\n            render={(props, { error }) => (\n              <FormItem\n                label={t('profile:updatePasswordModal.newPassword.label')}\n                error={error}\n              >\n                <InputPassword\n                  placeholder={t(\n                    'profile:updatePasswordModal.newPassword.placeholder'\n                  )}\n                  showStrengthMeter\n                  strengthNames={t(\n                    'profile:updatePasswordModal.passwordStrengthNames',\n                    { returnObjects: true }\n                  )}\n                  {...props}\n                />\n              </FormItem>\n            )}\n          />\n\n          <FormError />\n        </Form>\n      </FormProvider>\n    </Modal>\n  );\n};\n\nexport default ProfileUpdatePasswordModal;\n"],"mappings":";;AAAA,SAASA,IAAI,EAAEC,QAAQ,EAAEC,aAAa,EAAEC,OAAO,EAAEC,KAAK,QAAQ,iBAAiB;AAC/E,SAASC,YAAY,EAAEC,OAAO,QAAQ,iBAAiB;AAEvD,OAAOC,KAAK,IAAIC,WAAW,EAAEC,SAAS,QAAQ,OAAO;AACrD,SAASC,cAAc,QAAQ,eAAe;AAC9C,SAASC,WAAW,QAAQ,mBAAmB;AAC/C,OAAOC,gBAAgB,MAAM,8BAA8B;AAC3D,OAAOC,SAAS,MAAM,qBAAqB;AAa3C,MAAMC,0BAAqE,GAAG,CAAC;EAC7EC,UAAU;EACVC;AACF,CAAC,KAAK;EACJ,MAAM;IAAEC;EAAE,CAAC,GAAGP,cAAc,CAAC,CAAC,SAAS,CAAC,CAAC;EAEzC,MAAM;IAAEQ,IAAI;IAAEC;EAAM,CAAC,GAAGb,OAAO,CAAgC;IAC7Dc,eAAe,EAAE,EAAE;IACnBC,QAAQ,EAAE;EACZ,CAAC,CAAC;EAEF,MAAM,CAACC,MAAM,EAAEC,OAAO,CAAC,GACrBZ,WAAW,6hBAQT;;EAEJ;EACAF,SAAS,CAAC,MAAM;IACd,IAAIM,UAAU,EAAEG,IAAI,CAACM,KAAK,EAAE;EAC9B,CAAC,EAAE,CAACN,IAAI,EAAEH,UAAU,CAAC,CAAC;EAEtB,MAAMU,QAAQ,GAAGjB,WAAW,CAAC,MAAM;IACjCc,MAAM,CAAC;MACLI,SAAS,EAAE;QACTC,KAAK,EAAET,IAAI,CAACU,MAAM,CAACC,MAAM;MAC3B,CAAC;MACDC,OAAO,EAAGC,KAAK,IAAKnB,gBAAgB,CAACM,IAAI,EAAEa,KAAK,CAAC;MACjDC,WAAW,EAAE,MAAM;QACjB7B,OAAO,CAAC8B,OAAO,CAAChB,CAAC,CAAC,qCAAqC,CAAC,CAAC;QACzDD,OAAO,EAAE;MACX;IACF,CAAC,CAAC;EACJ,CAAC,EAAE,CAACM,MAAM,EAAEJ,IAAI,EAAEF,OAAO,EAAEC,CAAC,CAAC,CAAC;EAE9B,oBACE,oBAAC,KAAK;IACJ,KAAK,EAAEA,CAAC,CAAC,mCAAmC,CAAE;IAC9C,OAAO,EAAEF,UAAW;IACpB,MAAM,EAAEE,CAAC,CAAC,oCAAoC,CAAE;IAChD,SAAS,EAAEM,OAAQ;IACnB,IAAI,EAAEE,QAAS;IACf,OAAO,EAAET;EAAQ,gBAEjB,oBAAC,YAAY;IAAC,IAAI,EAAEE;EAAK,gBACvB,oBAAC,IAAI,qBACH,oBAAC,KAAK;IACJ,IAAI,EAAC,iBAAiB;IACtB,MAAM,EAAE,CAACgB,KAAK,EAAE;MAAEH;IAAM,CAAC,kBACvB,oBAAC,QAAQ;MACP,KAAK,EAAEd,CAAC,CAAC,mDAAmD,CAAE;MAC9D,KAAK,EAAEc;IAAM,gBAEb,oBAAC,aAAa;MACZ,WAAW,EAAEd,CAAC,CACZ,yDAAyD;IACzD,GACEiB,KAAK,EACT;EAEJ,EACF,eAEF,oBAAC,KAAK;IACJ,IAAI,EAAC,UAAU;IACf,MAAM,EAAE,CAACA,KAAK,EAAE;MAAEH;IAAM,CAAC,kBACvB,oBAAC,QAAQ;MACP,KAAK,EAAEd,CAAC,CAAC,+CAA+C,CAAE;MAC1D,KAAK,EAAEc;IAAM,gBAEb,oBAAC,aAAa;MACZ,WAAW,EAAEd,CAAC,CACZ,qDAAqD,CACrD;MACF,iBAAiB;MACjB,aAAa,EAAEA,CAAC,CACd,mDAAmD,EACnD;QAAEkB,aAAa,EAAE;MAAK,CAAC;IACvB,GACED,KAAK,EACT;EAEJ,EACF,eAEF,oBAAC,SAAS,OAAG,CACR,CACM,CACT;AAEZ,CAAC;AAED,eAAepB,0BAA0B"}

package/dist/esm/components/session/SessionList.js

@@ -6,7 +6,7 @@ import styled from '@emotion/styled';
 import { useTranslation } from 'react-i18next';
 import { clr } from '@os-design/theming';
 import SessionListItem from './SessionListItem';
-const sessionListFragment = _SessionList_sessions !== void 0 ? _SessionList_sessions : (_SessionList_sessions = require("./__generated__/SessionList_sessions.graphql"), _SessionList_sessions.hash && _SessionList_sessions.hash !== "1b21c937c7ba795f09bfcb5ada7d2510" && console.error("The definition of 'SessionList_sessions' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _SessionList_sessions);
+const sessionsFragment = _SessionList_sessions !== void 0 ? _SessionList_sessions : (_SessionList_sessions = require("./__generated__/SessionList_sessions.graphql"), _SessionList_sessions.hash && _SessionList_sessions.hash !== "1b21c937c7ba795f09bfcb5ada7d2510" && console.error("The definition of 'SessionList_sessions' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _SessionList_sessions);
 export const Title = styled.div`
   font-weight: 500;
   margin: 1em 1em 0.5em;
@@ -30,7 +30,7 @@ const SessionList = ({
 }) => {
   const {
     sessions
-  } = useFragment(sessionListFragment, sessionsKey);
+  } = useFragment(sessionsFragment, sessionsKey);
   const {
     t
   } = useTranslation(['profile']);