@aarhus-university/au-lib-react-components 9.11.18 → 9.12.1

package/src/lib/validation.js

@@ -1,181 +1,219 @@
-import React from 'react';
-import { passwordLabels } from './i18n';
-
-const emailRegex = /^(?=.{6,320}$)([0-9A-Za-z]([0-9A-Za-z\x21\x23\x24\x25\x26\x27\x2a\x2b\x2f\x3d\x3f\x5e\x5f\x60\x7b\x7c\x7d\x7e\x2d\x2e]{0,62}[0-9A-Za-z])?\x40(?=.{4,255}$)(([0-9A-Za-z]([0-9A-Za-z\x2d]{0,254}[0-9A-Za-z])?\x2e)+[0-9A-Za-z]([0-9A-Za-z\x2d]{0,254}[0-9A-Za-z])?))$/;
-const studentRegistrationNumberRegex = /^[a-zA-Z0-9]{3,12}$/;
-const auIdRegex = /^au[1-9]([0-9]{0,8})$/;
-
-const renderValidation = (messages) => messages.map(
-  (message) => <span key={message} className="form-info__message">{message}</span>,
-);
-
-const validateForm = (lang, fieldValue, rulesAndMessages = []) => {
-  let valid = true;
-  const validationMessages = [];
-  rulesAndMessages.forEach((rm) => {
-    if (!rm.rule(fieldValue)) {
-      valid = false;
-      validationMessages.push(rm.message);
-    }
-  });
-
-  if (valid) {
-    validationMessages.push(passwordLabels[lang].allGood);
-  }
-
-  return [valid, validationMessages];
-};
-
-const validatePassword = (lang, newPassword, confirmPassword, blur = false, submit = false) => {
-  const length = 12;
-  const lowerLetters = /([a-z])/g;
-  const upperLetters = /([A-Z])/g;
-  const invalidLetters = /([æøåÆØÅ])/g;
-  const numbers = /([0-9])/g;
-  const special = /~|!|@|#|\$|%|\^|&|\*|_|-|\+|=|`|\||\(|\)|{|}|\[|\]|:|;|"|'|<|>|,|\.|\?|\//g;
-  const spaces = /\s/g;
-  const all = new RegExp(`${lowerLetters.source}|${upperLetters.source}|${invalidLetters.source}|${numbers.source}|${special.source}|${spaces.source}`);
-
-  let newPasswordValid = false;
-  const newPasswordMessages = [];
-  let confirmPasswordValid = false;
-  const confirmPasswordMessages = [];
-
-  const map = new Map();
-  Object.entries(passwordLabels[lang].rules).forEach((label) => {
-    map.set(label[0], label[1].replace('###LENGTH###', length));
-  });
-
-  let key = '';
-
-  if (newPassword.length > 0) {
-    if (newPassword.length >= length || blur) {
-      newPasswordValid = true;
-      if (newPassword.match(invalidLetters)) {
-        newPasswordMessages.push(map.get('invalid'));
-        newPasswordValid = false;
-      }
-
-      if (newPassword.match(spaces)) {
-        newPasswordMessages.push(map.get('spaces'));
-        newPasswordValid = false;
-      }
-
-      let invalidSpecialFound = false;
-      newPassword.split('').forEach((char) => {
-        if (!char.match(all)) {
-          invalidSpecialFound = true;
-        }
-      });
-
-      if (invalidSpecialFound) {
-        newPasswordMessages.push(map.get('specialchars'));
-        newPasswordValid = false;
-      }
-
-      let cases = 0;
-      if (!newPassword.match(lowerLetters)) {
-        key = `${key}lower`;
-        cases += 1;
-      }
-
-      if (!newPassword.match(upperLetters)) {
-        key = `${key}upper`;
-        cases += 1;
-      }
-
-      if (!newPassword.match(numbers)) {
-        key = `${key}numbers`;
-        cases += 1;
-      }
-
-      if (!newPassword.match(special)) {
-        key = `${key}special`;
-        cases += 1;
-      }
-
-      if (cases > 1) {
-        newPasswordValid = false;
-      }
-
-      if (newPassword.length < length) {
-        newPasswordMessages.push(map.get('length'));
-        newPasswordValid = false;
-      }
-    } else {
-      if (newPassword.match(invalidLetters)) {
-        newPasswordMessages.push(map.get('invalid'));
-        newPasswordValid = false;
-      }
-
-      if (newPassword.match(spaces)) {
-        newPasswordMessages.push(map.get('spaces'));
-        newPasswordValid = false;
-      }
-
-      let invalidSpecialFound = false;
-      newPassword.split('').forEach((char) => {
-        if (!char.match(all)) {
-          invalidSpecialFound = true;
-        }
-      });
-
-      if (invalidSpecialFound) {
-        newPasswordMessages.push(map.get('specialchars'));
-        newPasswordValid = false;
-      }
-
-      if (newPassword.length < length && blur) {
-        newPasswordMessages.push(map.get('length'));
-        newPasswordValid = false;
-      }
-    }
-
-    console.log(key);
-
-    const mapKey = map.get(key);
-    if (typeof mapKey !== 'undefined') {
-      newPasswordMessages.push(mapKey);
-    }
-
-    if (newPasswordValid) {
-      newPasswordMessages.push(passwordLabels[lang].allRequirements);
-    }
-
-    if (confirmPassword.length >= newPassword.length
-      || ((blur || submit) && confirmPassword.length > 0)) {
-      if (confirmPassword === newPassword) {
-        confirmPasswordMessages.push(passwordLabels[lang].passwordsEqual);
-        confirmPasswordValid = true;
-      } else {
-        confirmPasswordMessages.push(passwordLabels[lang].passwordsNotEqual);
-      }
-    }
-  }
-
-  if (submit) {
-    if (newPassword === '') {
-      newPasswordValid = false;
-      newPasswordMessages.push(passwordLabels[lang].typeNew);
-    } else if (confirmPassword === '') {
-      confirmPasswordValid = false;
-      confirmPasswordMessages.push(passwordLabels[lang].repeatNew);
-    }
-  }
-
-  return {
-    newPasswordValid,
-    newPasswordMessages,
-    confirmPasswordValid,
-    confirmPasswordMessages,
-  };
-};
-
-export {
-  emailRegex,
-  studentRegistrationNumberRegex,
-  auIdRegex,
-  renderValidation,
-  validatePassword,
-  validateForm,
-};
+import React from 'react';
+import { passwordLabels } from './i18n';
+
+const emailRegex = /^(?=.{6,320}$)([0-9A-Za-z]([0-9A-Za-z\x21\x23\x24\x25\x26\x27\x2a\x2b\x2f\x3d\x3f\x5e\x5f\x60\x7b\x7c\x7d\x7e\x2d\x2e]{0,62}[0-9A-Za-z])?\x40(?=.{4,255}$)(([0-9A-Za-z]([0-9A-Za-z\x2d]{0,254}[0-9A-Za-z])?\x2e)+[0-9A-Za-z]([0-9A-Za-z\x2d]{0,254}[0-9A-Za-z])?))$/;
+const studentRegistrationNumberRegex = /^[a-zA-Z0-9]{3,12}$/;
+const auIdRegex = /^au[1-9]([0-9]{0,8})$/;
+
+const renderValidation = (messages) => messages.map(
+  (message) => <span key={message} className="form-info__message">{message}</span>,
+);
+
+const validateForm = (lang, fieldValue, rulesAndMessages = []) => {
+  let valid = true;
+  const validationMessages = [];
+  rulesAndMessages.forEach((rm) => {
+    if (!rm.rule(fieldValue)) {
+      valid = false;
+      validationMessages.push(rm.message);
+    }
+  });
+
+  if (valid) {
+    validationMessages.push(passwordLabels[lang].allGood);
+  }
+
+  return [valid, validationMessages];
+};
+
+const validatePassword = async (
+  lang,
+  newPassword,
+  confirmPassword,
+  blur = false,
+  submit = false,
+  onSubmit = null,
+  onSubmitValidationErrorMessage = '',
+) => {
+  const length = 12;
+  const lowerLetters = /([a-z])/g;
+  const upperLetters = /([A-Z])/g;
+  const invalidLetters = /([æøåÆØÅ])/g;
+  const numbers = /([0-9])/g;
+  const special = /~|!|@|#|\$|%|\^|&|\*|_|-|\+|=|`|\||\(|\)|{|}|\[|\]|:|;|"|'|<|>|,|\.|\?|\//g;
+  const spaces = /\s/g;
+  const all = new RegExp(`${lowerLetters.source}|${upperLetters.source}|${invalidLetters.source}|${numbers.source}|${special.source}|${spaces.source}`);
+
+  let newPasswordValid = false;
+  const newPasswordMessages = [];
+  let confirmPasswordValid = false;
+  const confirmPasswordMessages = [];
+
+  const map = new Map();
+  Object.entries(passwordLabels[lang].rules).forEach((label) => {
+    map.set(label[0], label[1].replace('###LENGTH###', length));
+  });
+
+  let key = '';
+
+  if (newPassword.length > 0) {
+    if (newPassword.length >= length || blur) {
+      newPasswordValid = true;
+      if (newPassword.match(invalidLetters)) {
+        newPasswordMessages.push(map.get('invalid'));
+        newPasswordValid = false;
+      }
+
+      if (newPassword.match(spaces)) {
+        newPasswordMessages.push(map.get('spaces'));
+        newPasswordValid = false;
+      }
+
+      let invalidSpecialFound = false;
+      newPassword.split('').forEach((char) => {
+        if (!char.match(all)) {
+          invalidSpecialFound = true;
+        }
+      });
+
+      if (invalidSpecialFound) {
+        newPasswordMessages.push(map.get('specialchars'));
+        newPasswordValid = false;
+      }
+
+      let cases = 0;
+      if (!newPassword.match(lowerLetters)) {
+        key = `${key}lower`;
+        cases += 1;
+      }
+
+      if (!newPassword.match(upperLetters)) {
+        key = `${key}upper`;
+        cases += 1;
+      }
+
+      if (!newPassword.match(numbers)) {
+        key = `${key}numbers`;
+        cases += 1;
+      }
+
+      if (!newPassword.match(special)) {
+        key = `${key}special`;
+        cases += 1;
+      }
+
+      if (cases > 1) {
+        newPasswordValid = false;
+      }
+
+      if (newPassword.length < length) {
+        newPasswordMessages.push(map.get('length'));
+        newPasswordValid = false;
+      }
+    } else {
+      if (newPassword.match(invalidLetters)) {
+        newPasswordMessages.push(map.get('invalid'));
+        newPasswordValid = false;
+      }
+
+      if (newPassword.match(spaces)) {
+        newPasswordMessages.push(map.get('spaces'));
+        newPasswordValid = false;
+      }
+
+      let invalidSpecialFound = false;
+      newPassword.split('').forEach((char) => {
+        if (!char.match(all)) {
+          invalidSpecialFound = true;
+        }
+      });
+
+      if (invalidSpecialFound) {
+        newPasswordMessages.push(map.get('specialchars'));
+        newPasswordValid = false;
+      }
+
+      if (newPassword.length < length && blur) {
+        newPasswordMessages.push(map.get('length'));
+        newPasswordValid = false;
+      }
+    }
+
+    console.log(key);
+
+    const mapKey = map.get(key);
+    if (typeof mapKey !== 'undefined') {
+      newPasswordMessages.push(mapKey);
+    }
+
+    if (newPasswordValid) {
+      newPasswordMessages.push(passwordLabels[lang].allRequirements);
+    }
+
+    if (confirmPassword.length >= newPassword.length
+      || ((blur || submit) && confirmPassword.length > 0)) {
+      if (confirmPassword === newPassword) {
+        confirmPasswordMessages.push(passwordLabels[lang].passwordsEqual);
+        confirmPasswordValid = true;
+      } else {
+        confirmPasswordMessages.push(passwordLabels[lang].passwordsNotEqual);
+      }
+    }
+  }
+
+  if (submit) {
+    if (newPassword === '') {
+      newPasswordValid = false;
+      newPasswordMessages.push(passwordLabels[lang].typeNew);
+    } else if (confirmPassword === '') {
+      confirmPasswordValid = false;
+      confirmPasswordMessages.push(passwordLabels[lang].repeatNew);
+    }
+
+    if (typeof onSubmit === 'function') {
+      const result = await onSubmit({
+        oldPassword: '',
+        password: newPassword,
+      });
+      if (!result.valid) {
+        newPasswordValid = false;
+        newPasswordMessages.push(onSubmitValidationErrorMessage);
+        confirmPasswordMessages = [];
+      }
+    }
+  }
+
+  return {
+    newPasswordValid,
+    newPasswordMessages,
+    confirmPasswordValid,
+    confirmPasswordMessages,
+  };
+};
+
+const isPwned = async (data) => {
+  const url = window.isPnwedUri;
+  if (url) {
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(data),
+    });
+
+    const result = await response.json();
+    return result;
+  }
+  return false;
+};
+
+export {
+  emailRegex,
+  studentRegistrationNumberRegex,
+  auIdRegex,
+  renderValidation,
+  validatePassword,
+  validateForm,
+  isPwned,
+};

package/src/lib/wrapping.js

@@ -1,16 +1,16 @@
-/* eslint-env browser */
-const getSourceForFrame = (serviceUrl, path, referrer, callback) => {
-  const getSource = async () => {
-    const url = `${serviceUrl}?path=${path}&referrer=${referrer}`;
-    const response = await fetch(url, {
-      credentials: 'include',
-    });
-
-    const json = await response.json();
-    callback(json);
-  };
-
-  getSource();
-};
-
-export default getSourceForFrame;
+/* eslint-env browser */
+const getSourceForFrame = (serviceUrl, path, referrer, callback) => {
+  const getSource = async () => {
+    const url = `${serviceUrl}?path=${path}&referrer=${referrer}`;
+    const response = await fetch(url, {
+      credentials: 'include',
+    });
+
+    const json = await response.json();
+    callback(json);
+  };
+
+  getSource();
+};
+
+export default getSourceForFrame;

package/src/styles/_settings.scss

@@ -1,11 +1,11 @@
-$font-passata-regular: "AUPassataRegular";
-$font-passata-bold: "AUPassataBold";
-$gray-color:#e4e4e4;
-$gray-secondary-color:darken($gray-color, 50%);
-$alert-confirm-color: #8bad3f;
-$alert-cancel-color: #687989;
-$student-color:#8bad3f;
-$student-secondary-color:#2a4a0f;
-$staff-color: #379fcb;
-$staff-secondary-color:#003e5c;
+$font-passata-regular: "AUPassataRegular";
+$font-passata-bold: "AUPassataBold";
+$gray-color:#e4e4e4;
+$gray-secondary-color:darken($gray-color, 50%);
+$alert-confirm-color: #8bad3f;
+$alert-cancel-color: #687989;
+$student-color:#8bad3f;
+$student-secondary-color:#2a4a0f;
+$staff-color: #379fcb;
+$staff-secondary-color:#003e5c;
 $findicon: 'https://cdn.au.dk/2016/assets/img/databox/find.png';

package/src/styles/alert.scss

@@ -1,39 +1,39 @@
-/* alert */
-.au-alert {
-  position: fixed;
-  z-index: 100;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: 300px;
-  background-color: #fff;
-  padding: 1.3636364rem;
-
-  button {
-    margin-top: 1rem;
-    margin-bottom: 0;
-    padding: .65rem 2rem;
-
-    &.confirm {
-      background-color: $alert-confirm-color;
-    }
-
-    &.cancel {
-      background-color: $alert-cancel-color;
-    }
-
-    &:first-of-type {
-      margin-right: 1rem;
-    }
-  }
-}
-
-.au-alert-overlay, .au-modal-overlay {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background-color: rgba(0, 0, 0, .6);
-  z-index: 99;
-}
+/* alert */
+.au-alert {
+  position: fixed;
+  z-index: 100;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 300px;
+  background-color: #fff;
+  padding: 1.3636364rem;
+
+  button {
+    margin-top: 1rem;
+    margin-bottom: 0;
+    padding: .65rem 2rem;
+
+    &.confirm {
+      background-color: $alert-confirm-color;
+    }
+
+    &.cancel {
+      background-color: $alert-cancel-color;
+    }
+
+    &:first-of-type {
+      margin-right: 1rem;
+    }
+  }
+}
+
+.au-alert-overlay, .au-modal-overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .6);
+  z-index: 99;
+}