@aarhus-university/au-lib-react-components 9.18.0 → 9.18.2

package/src/components/password/AUNewPasswordComponent.js

@@ -1,151 +1,151 @@
-/* eslint-disable jsx-a11y/label-has-associated-control */
-/* eslint-disable jsx-a11y/label-has-for */
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { renderValidation, validatePassword } from '../../lib/validation';
-import { passwordLabels } from '../../lib/i18n';
-
-const AUNewPasswordComponent = ({
-  lang,
-  saving,
-  errorMessages,
-  setErrorMessages,
-  newPassword,
-  newPasswordValidated,
-  newPasswordValidationMessages,
-  setNewPassword,
-  setNewPasswordValidated,
-  setNewPasswordValidationMessages,
-  confirmPassword,
-  confirmPasswordValidated,
-  confirmPasswordValidationMessages,
-  setConfirmPassword,
-  setConfirmPasswordValidated,
-  setConfirmPasswordValidationMessages,
-}) => {
-  const [errorMessagesSet, setErrorMessagesSet] = useState(false);
-
-  useEffect(() => {
-    if (errorMessages.length > 0 && !errorMessagesSet) {
-      setNewPasswordValidationMessages([]);
-      setConfirmPasswordValidationMessages([]);
-      setErrorMessagesSet(true);
-    } else if (errorMessages.length === 0 && errorMessagesSet) {
-      setErrorMessagesSet(false);
-    }
-  });
-
-  let newPasswordValidationClassName = '';
-  if (errorMessages.length > 0
-    || (newPasswordValidationMessages.length > 0 && !newPasswordValidated)) {
-    newPasswordValidationClassName = ' form-info--error';
-  } else if (newPasswordValidated) {
-    newPasswordValidationClassName = ' form-info--confirmed';
-  }
-
-  let confirmPasswordValidationClassName = '';
-  if (errorMessages.length > 0
-    || (confirmPasswordValidationMessages.length > 0 && !confirmPasswordValidated)) {
-    confirmPasswordValidationClassName = ' form-info--error';
-  } else if (confirmPasswordValidated) {
-    confirmPasswordValidationClassName = ' form-info--confirmed';
-  }
-
-  return (
-    <div className="row__item row__item--basis-default-line-width">
-      <div className={`form__field${newPasswordValidationClassName}`}>
-        <label htmlFor="new-password">
-          {passwordLabels[lang].newPassword}
-          <span className="form-info__hint">{passwordLabels[lang].newPasswordInfo}</span>
-          {renderValidation(errorMessages)}
-        </label>
-        {renderValidation(newPasswordValidationMessages)}
-        <input
-          type="password"
-          id="new-password"
-          value={newPassword}
-          onChange={(e) => {
-            const newValue = e.target.value;
-            validatePassword(lang, newValue, confirmPassword).then((v) => {
-              setNewPassword(newValue);
-              setConfirmPassword('');
-              setNewPasswordValidated(v.newPasswordValid);
-              setNewPasswordValidationMessages(v.newPasswordMessages);
-              setConfirmPasswordValidationMessages([]);
-              setErrorMessages();
-            });
-          }}
-          onBlur={(e) => {
-            const newValue = e.target.value;
-            validatePassword(lang, newValue, confirmPassword, true).then((v) => {
-              setNewPasswordValidated(v.newPasswordValid);
-              setNewPasswordValidationMessages(v.newPasswordMessages);
-            });
-          }}
-          disabled={saving}
-        />
-      </div>
-      <div className={`form__field${confirmPasswordValidationClassName}`}>
-        <label htmlFor="repeated-password">{passwordLabels[lang].repeatPassword}</label>
-        {renderValidation(confirmPasswordValidationMessages)}
-        <input
-          type="password"
-          id="repeated-password"
-          value={confirmPassword}
-          onChange={(e) => {
-            const newValue = e.target.value;
-            validatePassword(lang, newPassword, newValue).then((v) => {
-              setConfirmPassword(newValue);
-              setConfirmPasswordValidated(v.confirmPasswordValid);
-              setConfirmPasswordValidationMessages(v.confirmPasswordMessages);
-            });
-          }}
-          onBlur={(e) => {
-            const newValue = e.target.value;
-            validatePassword(lang, newPassword, newValue, true).then((v) => {
-              setConfirmPasswordValidated(v.confirmPasswordValid);
-              setConfirmPasswordValidationMessages(v.confirmPasswordMessages);
-            });
-          }}
-          disabled={saving}
-        />
-      </div>
-      <div className="submit">
-        <div className={`${saving ? 'submit-input-wrapper--processing' : ''}`}>
-          <input
-            className="button"
-            type="submit"
-            value={passwordLabels[lang].changePassword}
-            disabled={saving}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-AUNewPasswordComponent.defaultProps = {
-  errorMessages: [],
-  setErrorMessages: () => {},
-};
-
-AUNewPasswordComponent.displayName = 'AUNewPasswordComponent';
-AUNewPasswordComponent.propTypes = {
-  lang: PropTypes.string.isRequired,
-  saving: PropTypes.bool.isRequired,
-  errorMessages: PropTypes.arrayOf(PropTypes.string),
-  setErrorMessages: PropTypes.func,
-  newPassword: PropTypes.string.isRequired,
-  newPasswordValidated: PropTypes.bool.isRequired,
-  newPasswordValidationMessages: PropTypes.arrayOf(PropTypes.string).isRequired,
-  setNewPassword: PropTypes.func.isRequired,
-  setNewPasswordValidated: PropTypes.func.isRequired,
-  setNewPasswordValidationMessages: PropTypes.func.isRequired,
-  confirmPassword: PropTypes.string.isRequired,
-  confirmPasswordValidated: PropTypes.bool.isRequired,
-  confirmPasswordValidationMessages: PropTypes.arrayOf(PropTypes.string).isRequired,
-  setConfirmPassword: PropTypes.func.isRequired,
-  setConfirmPasswordValidated: PropTypes.func.isRequired,
-  setConfirmPasswordValidationMessages: PropTypes.func.isRequired,
-};
-export default AUNewPasswordComponent;
+/* eslint-disable jsx-a11y/label-has-associated-control */
+/* eslint-disable jsx-a11y/label-has-for */
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { renderValidation, validatePassword } from '../../lib/validation';
+import { passwordLabels } from '../../lib/i18n';
+
+const AUNewPasswordComponent = ({
+  lang,
+  saving,
+  errorMessages,
+  setErrorMessages,
+  newPassword,
+  newPasswordValidated,
+  newPasswordValidationMessages,
+  setNewPassword,
+  setNewPasswordValidated,
+  setNewPasswordValidationMessages,
+  confirmPassword,
+  confirmPasswordValidated,
+  confirmPasswordValidationMessages,
+  setConfirmPassword,
+  setConfirmPasswordValidated,
+  setConfirmPasswordValidationMessages,
+}) => {
+  const [errorMessagesSet, setErrorMessagesSet] = useState(false);
+
+  useEffect(() => {
+    if (errorMessages.length > 0 && !errorMessagesSet) {
+      setNewPasswordValidationMessages([]);
+      setConfirmPasswordValidationMessages([]);
+      setErrorMessagesSet(true);
+    } else if (errorMessages.length === 0 && errorMessagesSet) {
+      setErrorMessagesSet(false);
+    }
+  });
+
+  let newPasswordValidationClassName = '';
+  if (errorMessages.length > 0
+    || (newPasswordValidationMessages.length > 0 && !newPasswordValidated)) {
+    newPasswordValidationClassName = ' form-info--error';
+  } else if (newPasswordValidated) {
+    newPasswordValidationClassName = ' form-info--confirmed';
+  }
+
+  let confirmPasswordValidationClassName = '';
+  if (errorMessages.length > 0
+    || (confirmPasswordValidationMessages.length > 0 && !confirmPasswordValidated)) {
+    confirmPasswordValidationClassName = ' form-info--error';
+  } else if (confirmPasswordValidated) {
+    confirmPasswordValidationClassName = ' form-info--confirmed';
+  }
+
+  return (
+    <div className="row__item row__item--basis-default-line-width">
+      <div className={`form__field${newPasswordValidationClassName}`}>
+        <label htmlFor="new-password">
+          {passwordLabels[lang].newPassword}
+          <span className="form-info__hint">{passwordLabels[lang].newPasswordInfo}</span>
+          {renderValidation(errorMessages)}
+        </label>
+        {renderValidation(newPasswordValidationMessages)}
+        <input
+          type="password"
+          id="new-password"
+          value={newPassword}
+          onChange={(e) => {
+            const newValue = e.target.value;
+            validatePassword(lang, newValue, confirmPassword).then((v) => {
+              setNewPassword(newValue);
+              setConfirmPassword('');
+              setNewPasswordValidated(v.newPasswordValid);
+              setNewPasswordValidationMessages(v.newPasswordMessages);
+              setConfirmPasswordValidationMessages([]);
+              setErrorMessages();
+            });
+          }}
+          onBlur={(e) => {
+            const newValue = e.target.value;
+            validatePassword(lang, newValue, confirmPassword, true).then((v) => {
+              setNewPasswordValidated(v.newPasswordValid);
+              setNewPasswordValidationMessages(v.newPasswordMessages);
+            });
+          }}
+          disabled={saving}
+        />
+      </div>
+      <div className={`form__field${confirmPasswordValidationClassName}`}>
+        <label htmlFor="repeated-password">{passwordLabels[lang].repeatPassword}</label>
+        {renderValidation(confirmPasswordValidationMessages)}
+        <input
+          type="password"
+          id="repeated-password"
+          value={confirmPassword}
+          onChange={(e) => {
+            const newValue = e.target.value;
+            validatePassword(lang, newPassword, newValue).then((v) => {
+              setConfirmPassword(newValue);
+              setConfirmPasswordValidated(v.confirmPasswordValid);
+              setConfirmPasswordValidationMessages(v.confirmPasswordMessages);
+            });
+          }}
+          onBlur={(e) => {
+            const newValue = e.target.value;
+            validatePassword(lang, newPassword, newValue, true).then((v) => {
+              setConfirmPasswordValidated(v.confirmPasswordValid);
+              setConfirmPasswordValidationMessages(v.confirmPasswordMessages);
+            });
+          }}
+          disabled={saving}
+        />
+      </div>
+      <div className="submit">
+        <div className={`${saving ? 'submit-input-wrapper--processing' : ''}`}>
+          <input
+            className="button"
+            type="submit"
+            value={passwordLabels[lang].changePassword}
+            disabled={saving}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+AUNewPasswordComponent.defaultProps = {
+  errorMessages: [],
+  setErrorMessages: () => {},
+};
+
+AUNewPasswordComponent.displayName = 'AUNewPasswordComponent';
+AUNewPasswordComponent.propTypes = {
+  lang: PropTypes.string.isRequired,
+  saving: PropTypes.bool.isRequired,
+  errorMessages: PropTypes.arrayOf(PropTypes.string),
+  setErrorMessages: PropTypes.func,
+  newPassword: PropTypes.string.isRequired,
+  newPasswordValidated: PropTypes.bool.isRequired,
+  newPasswordValidationMessages: PropTypes.arrayOf(PropTypes.string).isRequired,
+  setNewPassword: PropTypes.func.isRequired,
+  setNewPasswordValidated: PropTypes.func.isRequired,
+  setNewPasswordValidationMessages: PropTypes.func.isRequired,
+  confirmPassword: PropTypes.string.isRequired,
+  confirmPasswordValidated: PropTypes.bool.isRequired,
+  confirmPasswordValidationMessages: PropTypes.arrayOf(PropTypes.string).isRequired,
+  setConfirmPassword: PropTypes.func.isRequired,
+  setConfirmPasswordValidated: PropTypes.func.isRequired,
+  setConfirmPasswordValidationMessages: PropTypes.func.isRequired,
+};
+export default AUNewPasswordComponent;

package/src/components/password/AUPasswordActions.js

@@ -1,101 +1,101 @@
-/* eslint-disable import/prefer-default-export */
-export const PATCH_PASSWORD = 'PATCH_PASSWORD';
-export const SAVING_PASSWORD = 'SAVING_PASSWORD';
-export const DISMISS_MESSAGES = 'DISMISS_MESSAGES';
-export const SET_SAVED = 'SET_SAVED';
-export const SENDING_MAIL = 'SENDING_MAIL';
-export const SEND_MAIL = 'SEND_MAIL';
-export const GETTING_TOKEN_STATUS = 'GETTING_TOKEN_STATUS';
-export const GET_TOKEN_STATUS = 'GET_TOKEN_STATUS';
-
-export const getActionCreators = () => {
-  const actionCreators = {
-    clear: () => (dispatch) => {
-      dispatch({
-        type: SET_SAVED,
-      });
-    },
-    dismissMessages: () => (dispatch) => {
-      dispatch({
-        type: DISMISS_MESSAGES,
-      });
-    },
-    patchPassword: (data, callback, lang = 'da') => async (dispatch) => {
-      dispatch({
-        type: SAVING_PASSWORD,
-      });
-
-      callback(data, (ok, status, json) => {
-        const result = {};
-        if (ok) {
-          result.password = true;
-        } else {
-          result.error = json;
-          result.error.lang = lang;
-        }
-        result.status = status;
-        dispatch({
-          type: PATCH_PASSWORD,
-          result,
-        });
-      });
-    },
-    patchPasswordAnonymous: (endpoint, type, userToken, data, callback, lang = 'da') => async (dispatch) => {
-      dispatch({
-        type: SAVING_PASSWORD,
-      });
-
-      callback(endpoint, type, userToken, data, (ok, status, json, actionType) => {
-        const result = {};
-        if (ok) {
-          result.password = json;
-        } else {
-          result.error = json;
-          result.error.lang = lang;
-        }
-        result.status = status;
-        dispatch({
-          type: actionType,
-          result,
-        });
-      });
-    },
-    sendMail: (data, callback, lang = 'da') => async (dispatch) => {
-      dispatch({
-        type: SENDING_MAIL,
-      });
-
-      callback(data, (ok, status, json) => {
-        const result = {};
-        if (ok) {
-          result.password = true;
-        } else {
-          result.error = json;
-          result.error.lang = lang;
-        }
-        result.status = status;
-        dispatch({
-          type: SEND_MAIL,
-          result,
-        });
-      });
-    },
-    checkUserTokenIsValid: (userToken, callback) => async (dispatch) => {
-      dispatch({
-        type: GETTING_TOKEN_STATUS,
-      });
-
-      callback(userToken, (ok, status) => {
-        const result = {};
-        result.token = ok;
-        result.status = status;
-        dispatch({
-          type: GET_TOKEN_STATUS,
-          result,
-        });
-      });
-    },
-  };
-
-  return actionCreators;
-};
+/* eslint-disable import/prefer-default-export */
+export const PATCH_PASSWORD = 'PATCH_PASSWORD';
+export const SAVING_PASSWORD = 'SAVING_PASSWORD';
+export const DISMISS_MESSAGES = 'DISMISS_MESSAGES';
+export const SET_SAVED = 'SET_SAVED';
+export const SENDING_MAIL = 'SENDING_MAIL';
+export const SEND_MAIL = 'SEND_MAIL';
+export const GETTING_TOKEN_STATUS = 'GETTING_TOKEN_STATUS';
+export const GET_TOKEN_STATUS = 'GET_TOKEN_STATUS';
+
+export const getActionCreators = () => {
+  const actionCreators = {
+    clear: () => (dispatch) => {
+      dispatch({
+        type: SET_SAVED,
+      });
+    },
+    dismissMessages: () => (dispatch) => {
+      dispatch({
+        type: DISMISS_MESSAGES,
+      });
+    },
+    patchPassword: (data, callback, lang = 'da') => async (dispatch) => {
+      dispatch({
+        type: SAVING_PASSWORD,
+      });
+
+      callback(data, (ok, status, json) => {
+        const result = {};
+        if (ok) {
+          result.password = true;
+        } else {
+          result.error = json;
+          result.error.lang = lang;
+        }
+        result.status = status;
+        dispatch({
+          type: PATCH_PASSWORD,
+          result,
+        });
+      });
+    },
+    patchPasswordAnonymous: (endpoint, type, userToken, data, callback, lang = 'da') => async (dispatch) => {
+      dispatch({
+        type: SAVING_PASSWORD,
+      });
+
+      callback(endpoint, type, userToken, data, (ok, status, json, actionType) => {
+        const result = {};
+        if (ok) {
+          result.password = json;
+        } else {
+          result.error = json;
+          result.error.lang = lang;
+        }
+        result.status = status;
+        dispatch({
+          type: actionType,
+          result,
+        });
+      });
+    },
+    sendMail: (data, callback, lang = 'da') => async (dispatch) => {
+      dispatch({
+        type: SENDING_MAIL,
+      });
+
+      callback(data, (ok, status, json) => {
+        const result = {};
+        if (ok) {
+          result.password = true;
+        } else {
+          result.error = json;
+          result.error.lang = lang;
+        }
+        result.status = status;
+        dispatch({
+          type: SEND_MAIL,
+          result,
+        });
+      });
+    },
+    checkUserTokenIsValid: (userToken, callback) => async (dispatch) => {
+      dispatch({
+        type: GETTING_TOKEN_STATUS,
+      });
+
+      callback(userToken, (ok, status) => {
+        const result = {};
+        result.token = ok;
+        result.status = status;
+        dispatch({
+          type: GET_TOKEN_STATUS,
+          result,
+        });
+      });
+    },
+  };
+
+  return actionCreators;
+};

package/src/components/password/AUPasswordHooks.js

@@ -1,47 +1,47 @@
-/* eslint-env browser */
-import { useState } from 'react';
-
-const useAUPassword = () => {
-  const [currentPassword, setCurrentPassword] = useState('');
-  const [newPassword, setNewPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
-
-  return [{
-    currentPassword,
-    setCurrentPassword,
-  }, {
-    newPassword,
-    setNewPassword,
-  }, {
-    confirmPassword,
-    setConfirmPassword,
-  }];
-};
-
-const useAUPasswordValidation = () => {
-  const [currentPasswordValidationMessages, setCurrentPasswordValidationMessages] = useState([]);
-  const [newPasswordValidated, setNewPasswordValidated] = useState(false);
-  const [newPasswordValidationMessages, setNewPasswordValidationMessages] = useState([]);
-  const [confirmPasswordValidated, setConfirmPasswordValidated] = useState(false);
-  const [confirmPasswordValidationMessages, setConfirmPasswordValidationMessages] = useState([]);
-
-  return [{
-    currentPasswordValidationMessages,
-    setCurrentPasswordValidationMessages,
-  }, {
-    newPasswordValidated,
-    setNewPasswordValidated,
-    newPasswordValidationMessages,
-    setNewPasswordValidationMessages,
-  }, {
-    confirmPasswordValidated,
-    setConfirmPasswordValidated,
-    confirmPasswordValidationMessages,
-    setConfirmPasswordValidationMessages,
-  }];
-};
-
-export {
-  useAUPassword,
-  useAUPasswordValidation,
-};
+/* eslint-env browser */
+import { useState } from 'react';
+
+const useAUPassword = () => {
+  const [currentPassword, setCurrentPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+
+  return [{
+    currentPassword,
+    setCurrentPassword,
+  }, {
+    newPassword,
+    setNewPassword,
+  }, {
+    confirmPassword,
+    setConfirmPassword,
+  }];
+};
+
+const useAUPasswordValidation = () => {
+  const [currentPasswordValidationMessages, setCurrentPasswordValidationMessages] = useState([]);
+  const [newPasswordValidated, setNewPasswordValidated] = useState(false);
+  const [newPasswordValidationMessages, setNewPasswordValidationMessages] = useState([]);
+  const [confirmPasswordValidated, setConfirmPasswordValidated] = useState(false);
+  const [confirmPasswordValidationMessages, setConfirmPasswordValidationMessages] = useState([]);
+
+  return [{
+    currentPasswordValidationMessages,
+    setCurrentPasswordValidationMessages,
+  }, {
+    newPasswordValidated,
+    setNewPasswordValidated,
+    newPasswordValidationMessages,
+    setNewPasswordValidationMessages,
+  }, {
+    confirmPasswordValidated,
+    setConfirmPasswordValidated,
+    confirmPasswordValidationMessages,
+    setConfirmPasswordValidationMessages,
+  }];
+};
+
+export {
+  useAUPassword,
+  useAUPasswordValidation,
+};