@aarhus-university/au-lib-react-components 9.11.17 → 9.12.0

package/src/components/password/AUChangePasswordComponent.js

@@ -1,177 +1,190 @@
-/* eslint-env browser */
-/* eslint-disable max-len */
-import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
-import AUPasswordRequirementsComponent from './AUPasswordRequirementsComponent';
-import AUReceiptComponent from '../form/AUReceiptComponent';
-import CurrentPasswordComponent from './AUCurrentPasswordComponent';
-import AUNewPasswordComponent from './AUNewPasswordComponent';
-import { validatePassword } from '../../lib/validation';
-import { useAUPassword, useAUPasswordValidation } from './AUPasswordHooks';
-import { passwordLabels } from '../../lib/i18n';
-
-const AUChangePasswordComponent = ({
-  user: {
-    preferredLanguage,
-  },
-  password: {
-    saving,
-    saved,
-  },
-  dismissMessages,
-  messages,
-  onSave,
-  onSaveAction,
-  gotoLink,
-}) => {
-  const [
-    { currentPassword, setCurrentPassword },
-    { newPassword, setNewPassword },
-    { confirmPassword, setConfirmPassword },
-  ] = useAUPassword();
-
-  const [
-    { currentPasswordValidationMessages, setCurrentPasswordValidationMessages },
-    {
-      newPasswordValidated,
-      setNewPasswordValidated,
-      newPasswordValidationMessages,
-      setNewPasswordValidationMessages,
-    },
-    {
-      confirmPasswordValidated,
-      setConfirmPasswordValidated,
-      confirmPasswordValidationMessages,
-      setConfirmPasswordValidationMessages,
-    },
-  ] = useAUPasswordValidation();
-
-  useEffect(() => {
-    dismissMessages();
-  }, []);
-
-  const handleSubmit = () => {
-    if (currentPassword === '') {
-      setCurrentPasswordValidationMessages([passwordLabels[preferredLanguage].currentPassword]);
-    } else {
-      const v = validatePassword(preferredLanguage, newPassword, confirmPassword, false, true);
-      setNewPasswordValidated(v.newPasswordValid);
-      setNewPasswordValidationMessages(v.newPasswordMessages);
-      setConfirmPasswordValidated(v.confirmPasswordValid);
-      setConfirmPasswordValidationMessages(v.confirmPasswordMessages);
-      if (v.newPasswordValid && v.confirmPasswordValid) {
-        onSave({
-          oldPassword: currentPassword,
-          password: newPassword,
-        }, onSaveAction);
-      }
-    }
-  };
-
-  if (saved) {
-    return (
-      <div className="page__content__block">
-        <AUReceiptComponent
-          receiptText={passwordLabels[preferredLanguage].receipt}
-          buttons={[{
-            gotoLink,
-            gotoText: passwordLabels[preferredLanguage].goto,
-          }]}
-        />
-      </div>
-    );
-  }
-
-  return (
-    <div className="page__content__block">
-      <h1>{passwordLabels[preferredLanguage].changePassword}</h1>
-      <p>{passwordLabels[preferredLanguage].changePasswordInfo}</p>
-      <form
-        className="form"
-        noValidate="novalidate"
-        onSubmit={(e) => {
-          e.preventDefault();
-          handleSubmit();
-        }}
-      >
-        <CurrentPasswordComponent
-          lang={preferredLanguage}
-          saving={saving}
-          errorMessages={messages.filter((x) => x.type === 'LdapFailedAuthenticationException').map((x) => x.message)}
-          setErrorMessages={dismissMessages}
-          currentPassword={currentPassword}
-          setCurrentPassword={setCurrentPassword}
-          currentPasswordValidationMessages={currentPasswordValidationMessages}
-          setCurrentPasswordValidationMessages={setCurrentPasswordValidationMessages}
-        />
-        <hr />
-        <div className="row row--wrap-reverse row--equal-height-items">
-          <AUNewPasswordComponent
-            lang={preferredLanguage}
-            saving={saving}
-            errorMessages={messages.filter((x) => x.type === 'LdapPasswordUsedBeforeException').map((x) => x.message)}
-            setErrorMessages={dismissMessages}
-            newPassword={newPassword}
-            newPasswordValidated={newPasswordValidated}
-            newPasswordValidationMessages={newPasswordValidationMessages}
-            setNewPassword={setNewPassword}
-            setNewPasswordValidated={setNewPasswordValidated}
-            setNewPasswordValidationMessages={setNewPasswordValidationMessages}
-            confirmPassword={confirmPassword}
-            confirmPasswordValidated={confirmPasswordValidated}
-            confirmPasswordValidationMessages={confirmPasswordValidationMessages}
-            setConfirmPassword={setConfirmPassword}
-            setConfirmPasswordValidated={setConfirmPasswordValidated}
-            setConfirmPasswordValidationMessages={setConfirmPasswordValidationMessages}
-          />
-          <AUPasswordRequirementsComponent lang={preferredLanguage} />
-        </div>
-      </form>
-    </div>
-  );
-};
-
-AUChangePasswordComponent.displayName = 'AUChangePasswordComponent';
-
-AUChangePasswordComponent.defaultProps = {
-  onSaveAction: (data, callback) => {
-    const putData = async () => {
-      let url = `${window.profileApiUri}/ChangePassword`;
-      if (typeof window.API_AUID !== 'undefined') {
-        url = `${url}?auid=${window.API_AUID}`;
-      }
-      const response = await fetch(url, {
-        method: 'PUT',
-        credentials: 'include',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(data),
-      });
-      const json = await response.json();
-      callback(response.ok, response.status, json);
-    };
-
-    putData();
-  },
-};
-
-AUChangePasswordComponent.propTypes = {
-  password: PropTypes.shape({
-    saving: PropTypes.bool.isRequired,
-    saved: PropTypes.bool.isRequired,
-  }).isRequired,
-  user: PropTypes.shape({
-    preferredLanguage: PropTypes.string.isRequired,
-  }).isRequired,
-  onSave: PropTypes.func.isRequired,
-  onSaveAction: PropTypes.func,
-  dismissMessages: PropTypes.func.isRequired,
-  messages: PropTypes.arrayOf(PropTypes.shape({
-    type: PropTypes.string.isRequired,
-    message: PropTypes.string.isRequired,
-  })).isRequired,
-  gotoLink: PropTypes.string.isRequired,
-};
-
-export default AUChangePasswordComponent;
+/* eslint-env browser */
+/* eslint-disable max-len */
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import AUPasswordRequirementsComponent from './AUPasswordRequirementsComponent';
+import AUReceiptComponent from '../form/AUReceiptComponent';
+import CurrentPasswordComponent from './AUCurrentPasswordComponent';
+import AUNewPasswordComponent from './AUNewPasswordComponent';
+import { validatePassword } from '../../lib/validation';
+import { useAUPassword, useAUPasswordValidation } from './AUPasswordHooks';
+import { passwordLabels } from '../../lib/i18n';
+
+const AUChangePasswordComponent = ({
+  user: {
+    preferredLanguage,
+  },
+  password: {
+    saving,
+    saved,
+  },
+  dismissMessages,
+  messages,
+  onSave,
+  onSaveAction,
+  gotoLink,
+  isPwned,
+}) => {
+  const [
+    { currentPassword, setCurrentPassword },
+    { newPassword, setNewPassword },
+    { confirmPassword, setConfirmPassword },
+  ] = useAUPassword();
+
+  const [
+    { currentPasswordValidationMessages, setCurrentPasswordValidationMessages },
+    {
+      newPasswordValidated,
+      setNewPasswordValidated,
+      newPasswordValidationMessages,
+      setNewPasswordValidationMessages,
+    },
+    {
+      confirmPasswordValidated,
+      setConfirmPasswordValidated,
+      confirmPasswordValidationMessages,
+      setConfirmPasswordValidationMessages,
+    },
+  ] = useAUPasswordValidation();
+
+  useEffect(() => {
+    dismissMessages();
+  }, []);
+
+  const handleSubmit = () => {
+    if (currentPassword === '') {
+      setCurrentPasswordValidationMessages([passwordLabels[preferredLanguage].currentPassword]);
+    } else {
+      const v = validatePassword(
+        preferredLanguage, 
+        newPassword, 
+        confirmPassword, 
+        false, 
+        true,
+        isPwned,
+      );
+      setNewPasswordValidated(v.newPasswordValid);
+      setNewPasswordValidationMessages(v.newPasswordMessages);
+      setConfirmPasswordValidated(v.confirmPasswordValid);
+      setConfirmPasswordValidationMessages(v.confirmPasswordMessages);
+      if (v.newPasswordValid && v.confirmPasswordValid) {
+        onSave({
+          oldPassword: currentPassword,
+          password: newPassword,
+        }, onSaveAction);
+      }
+    }
+  };
+
+  if (saved) {
+    return (
+      <div className="page__content__block">
+        <AUReceiptComponent
+          receiptText={passwordLabels[preferredLanguage].receipt}
+          buttons={[{
+            gotoLink,
+            gotoText: passwordLabels[preferredLanguage].goto,
+          }]}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="page__content__block">
+      <h1>{passwordLabels[preferredLanguage].changePassword}</h1>
+      <p>{passwordLabels[preferredLanguage].changePasswordInfo}</p>
+      <form
+        className="form"
+        noValidate="novalidate"
+        onSubmit={(e) => {
+          e.preventDefault();
+          handleSubmit();
+        }}
+      >
+        <CurrentPasswordComponent
+          lang={preferredLanguage}
+          saving={saving}
+          errorMessages={messages.filter((x) => x.type === 'LdapFailedAuthenticationException').map((x) => x.message)}
+          setErrorMessages={dismissMessages}
+          currentPassword={currentPassword}
+          setCurrentPassword={setCurrentPassword}
+          currentPasswordValidationMessages={currentPasswordValidationMessages}
+          setCurrentPasswordValidationMessages={setCurrentPasswordValidationMessages}
+        />
+        <hr />
+        <div className="row row--wrap-reverse row--equal-height-items">
+          <AUNewPasswordComponent
+            lang={preferredLanguage}
+            saving={saving}
+            errorMessages={messages.filter((x) => x.type === 'LdapPasswordUsedBeforeException').map((x) => x.message)}
+            setErrorMessages={dismissMessages}
+            newPassword={newPassword}
+            newPasswordValidated={newPasswordValidated}
+            newPasswordValidationMessages={newPasswordValidationMessages}
+            setNewPassword={setNewPassword}
+            setNewPasswordValidated={setNewPasswordValidated}
+            setNewPasswordValidationMessages={setNewPasswordValidationMessages}
+            confirmPassword={confirmPassword}
+            confirmPasswordValidated={confirmPasswordValidated}
+            confirmPasswordValidationMessages={confirmPasswordValidationMessages}
+            setConfirmPassword={setConfirmPassword}
+            setConfirmPasswordValidated={setConfirmPasswordValidated}
+            setConfirmPasswordValidationMessages={setConfirmPasswordValidationMessages}
+          />
+          <AUPasswordRequirementsComponent lang={preferredLanguage} />
+        </div>
+      </form>
+    </div>
+  );
+};
+
+AUChangePasswordComponent.displayName = 'AUChangePasswordComponent';
+
+AUChangePasswordComponent.defaultProps = {
+  onSaveAction: (data, callback) => {
+    const putData = async () => {
+      let url = `${window.profileApiUri}/ChangePassword`;
+      if (typeof window.API_AUID !== 'undefined') {
+        url = `${url}?auid=${window.API_AUID}`;
+      }
+      const response = await fetch(url, {
+        method: 'PUT',
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(data),
+      });
+      const json = await response.json();
+      callback(response.ok, response.status, json);
+    };
+
+    putData();
+  },
+};
+
+AUChangePasswordComponent.defaultProps = {
+  isPwned: null,
+};
+
+AUChangePasswordComponent.propTypes = {
+  password: PropTypes.shape({
+    saving: PropTypes.bool.isRequired,
+    saved: PropTypes.bool.isRequired,
+  }).isRequired,
+  user: PropTypes.shape({
+    preferredLanguage: PropTypes.string.isRequired,
+  }).isRequired,
+  onSave: PropTypes.func.isRequired,
+  onSaveAction: PropTypes.func,
+  dismissMessages: PropTypes.func.isRequired,
+  messages: PropTypes.arrayOf(PropTypes.shape({
+    type: PropTypes.string.isRequired,
+    message: PropTypes.string.isRequired,
+  })).isRequired,
+  gotoLink: PropTypes.string.isRequired,
+  isPwned: PropTypes.func,
+};
+
+export default AUChangePasswordComponent;

package/src/components/password/AUCurrentPasswordComponent.js

@@ -1,72 +1,72 @@
-/* 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 } from '../../lib/validation';
-import { passwordLabels } from '../../lib/i18n';
-
-const AUCurrentPasswordComponent = ({
-  lang,
-  saving,
-  errorMessages,
-  setErrorMessages,
-  currentPassword,
-  setCurrentPassword,
-  currentPasswordValidationMessages,
-  setCurrentPasswordValidationMessages,
-}) => {
-  const [errorMessagesSet, setErrorMessagesSet] = useState(false);
-
-  useEffect(() => {
-    if (errorMessages.length > 0 && !errorMessagesSet) {
-      setCurrentPasswordValidationMessages([]);
-      setErrorMessagesSet(true);
-    } else if (errorMessages.length === 0 && errorMessagesSet) {
-      setErrorMessagesSet(false);
-    }
-  });
-
-  let currentPasswordValidationClassName = '';
-  if (errorMessages.length > 0 || currentPasswordValidationMessages.length > 0) {
-    currentPasswordValidationClassName = ' form-info--error';
-  }
-
-  return (
-    <div className={`form__field${currentPasswordValidationClassName}`}>
-      <label htmlFor="current-password">
-        {passwordLabels[lang].currentPassword}
-        {renderValidation(errorMessages)}
-      </label>
-      <input
-        type="password"
-        id="current-password"
-        value={currentPassword}
-        onChange={(e) => {
-          setCurrentPassword(e.target.value);
-          setCurrentPasswordValidationMessages([]);
-          setErrorMessages();
-        }}
-        disabled={saving}
-      />
-      {renderValidation(currentPasswordValidationMessages)}
-    </div>
-  );
-};
-
-AUCurrentPasswordComponent.defaultProps = {
-  errorMessages: [],
-  setErrorMessages: () => {},
-};
-
-AUCurrentPasswordComponent.displayName = 'AUCurrentPasswordComponent';
-AUCurrentPasswordComponent.propTypes = {
-  lang: PropTypes.string.isRequired,
-  saving: PropTypes.bool.isRequired,
-  errorMessages: PropTypes.arrayOf(PropTypes.string),
-  setErrorMessages: PropTypes.func,
-  currentPassword: PropTypes.string.isRequired,
-  setCurrentPassword: PropTypes.func.isRequired,
-  currentPasswordValidationMessages: PropTypes.arrayOf(PropTypes.string).isRequired,
-  setCurrentPasswordValidationMessages: PropTypes.func.isRequired,
-};
-export default AUCurrentPasswordComponent;
+/* 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 } from '../../lib/validation';
+import { passwordLabels } from '../../lib/i18n';
+
+const AUCurrentPasswordComponent = ({
+  lang,
+  saving,
+  errorMessages,
+  setErrorMessages,
+  currentPassword,
+  setCurrentPassword,
+  currentPasswordValidationMessages,
+  setCurrentPasswordValidationMessages,
+}) => {
+  const [errorMessagesSet, setErrorMessagesSet] = useState(false);
+
+  useEffect(() => {
+    if (errorMessages.length > 0 && !errorMessagesSet) {
+      setCurrentPasswordValidationMessages([]);
+      setErrorMessagesSet(true);
+    } else if (errorMessages.length === 0 && errorMessagesSet) {
+      setErrorMessagesSet(false);
+    }
+  });
+
+  let currentPasswordValidationClassName = '';
+  if (errorMessages.length > 0 || currentPasswordValidationMessages.length > 0) {
+    currentPasswordValidationClassName = ' form-info--error';
+  }
+
+  return (
+    <div className={`form__field${currentPasswordValidationClassName}`}>
+      <label htmlFor="current-password">
+        {passwordLabels[lang].currentPassword}
+        {renderValidation(errorMessages)}
+      </label>
+      <input
+        type="password"
+        id="current-password"
+        value={currentPassword}
+        onChange={(e) => {
+          setCurrentPassword(e.target.value);
+          setCurrentPasswordValidationMessages([]);
+          setErrorMessages();
+        }}
+        disabled={saving}
+      />
+      {renderValidation(currentPasswordValidationMessages)}
+    </div>
+  );
+};
+
+AUCurrentPasswordComponent.defaultProps = {
+  errorMessages: [],
+  setErrorMessages: () => {},
+};
+
+AUCurrentPasswordComponent.displayName = 'AUCurrentPasswordComponent';
+AUCurrentPasswordComponent.propTypes = {
+  lang: PropTypes.string.isRequired,
+  saving: PropTypes.bool.isRequired,
+  errorMessages: PropTypes.arrayOf(PropTypes.string),
+  setErrorMessages: PropTypes.func,
+  currentPassword: PropTypes.string.isRequired,
+  setCurrentPassword: PropTypes.func.isRequired,
+  currentPasswordValidationMessages: PropTypes.arrayOf(PropTypes.string).isRequired,
+  setCurrentPasswordValidationMessages: PropTypes.func.isRequired,
+};
+export default AUCurrentPasswordComponent;