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

package/src/lib/au-news.js

@@ -1,371 +0,0 @@
-/* eslint-env browser */
-/* eslint max-classes-per-file: 0 */
-/* eslint class-methods-use-this: 0 */
-import React from 'react';
-import ReactDOM from 'react-dom';
-import NewsListComponent from '../components/news/NewsListComponent';
-import NewsPopUpComponent from '../components/news/NewsPopUpComponent';
-import NewsCollageBannerComponent from '../components/news/NewsCollageBannerComponent';
-import NewsCollageBannerRSSComponent from '../components/news/NewsCollageBannerRSSComponent';
-import { isElementInViewport } from './helpers';
-
-const AUNewsConfig = {
-  server: window.newsServer || '//news.au.dk',
-  newsUrl: `${window.location.href.replace(window.location.hash, '').replace('#', '')}#news-`,
-  useOverlay: !(typeof window.useOverlay !== 'undefined' && !window.useOverlay),
-  useSyndication: !(typeof window.useSyndication !== 'undefined' && !window.useSyndication),
-  tagStrip: new RegExp(/<(?!\/?sub|sup(?=>|\s.*>))\/?.*?>/ig),
-};
-
-class AUNewsHelpers {
-  static typeIdToText(_id) {
-    let id = _id;
-    id = parseInt(id, 10);
-    if (id === 0 || id === 2) {
-      return 'news';
-    }
-    if (id === 4 || id === 7) {
-      return 'event';
-    }
-    if (id === 9) {
-      return 'notice';
-    }
-    return '';
-  }
-
-  static getEventDates(item, lang) {
-    const fromDateSplit = item.event_from.date.split('.');
-    let fromDate;
-    if (lang === 'en') {
-      fromDate = new Date(
-        parseInt(fromDateSplit[0], 10),
-        parseInt(fromDateSplit[1], 10) - 1,
-        parseInt(fromDateSplit[2], 10),
-      );
-    } else {
-      fromDate = new Date(
-        parseInt(fromDateSplit[2], 10),
-        parseInt(fromDateSplit[1], 10) - 1,
-        parseInt(fromDateSplit[0], 10),
-      );
-    }
-
-    const toDateSplit = item.event_to.date.split('.');
-    let toDate;
-    if (lang === 'en') {
-      toDate = new Date(
-        parseInt(toDateSplit[0], 10),
-        parseInt(toDateSplit[1], 10) - 1,
-        parseInt(toDateSplit[2], 10),
-      );
-    } else {
-      toDate = new Date(
-        parseInt(toDateSplit[2], 10),
-        parseInt(toDateSplit[1], 10) - 1,
-        parseInt(toDateSplit[0], 10),
-      );
-    }
-
-    return {
-      fromDate,
-      toDate,
-      fromDateSplit,
-      toDateSplit,
-    };
-  }
-
-  static setExternal(_item) {
-    const item = _item;
-    const ttType = parseInt(item.type, 10);
-    item.external = ttType !== 0 && ttType !== 4 && ttType !== 9;
-    // "News" eller "Event" eller "Notice"
-    item.url = !item.external
-      && AUNewsConfig.useOverlay ? (AUNewsConfig.newsUrl + item.id) : item.permalink;
-    return item;
-  }
-
-  static getNewsID(search) {
-    const reNewsId = /^#?news-(.*)$/;
-    const match = search.match(reNewsId);
-    if (match !== null) {
-      return match[1];
-    }
-
-    return -1;
-  }
-
-  static isiPad() {
-    return (/iPad/i).test(navigator.userAgent);
-  }
-}
-
-class AUNews {
-  constructor(lang, feeds) {
-    this.lang = lang;
-    this.feeds = feeds || [];
-    this.item = null;
-    this.setItem = this.setItem.bind(this);
-  }
-
-  setItem(item) {
-    this.item = item;
-  }
-
-  setPopUp() {
-    const qsNewsPrint = AU.helpers.getQuerystring('newsprint');
-    const print = qsNewsPrint !== '';
-    const openPopUp = () => {
-      const newsID = AUNewsHelpers.getNewsID(window.location.hash);
-      let mountNode = document.getElementById('au_news_popup');
-      if (print) {
-        mountNode = document.querySelector('body');
-      }
-      if (parseInt(newsID, 10) > -1) {
-        if (this.item != null) {
-          const trackerLink = `/virtual/news/${AUNewsHelpers.typeIdToText(this.item.type)}/open-list/id-${this.item.id}/${this.item.permalink}`;
-          AU.tracking.trackSingle(trackerLink);
-        }
-        // Would like to use portal here, but it won't work "standalone"
-        ReactDOM.render(
-          <NewsPopUpComponent
-            id={newsID}
-            item={this.item}
-            lang={this.lang}
-            print={print}
-          />,
-          mountNode,
-        );
-      } else if (window.location.hash === '' || window.location.hash === '#') { // Thx IE!
-        ReactDOM.unmountComponentAtNode(mountNode);
-      }
-    };
-
-    openPopUp();
-
-    window.addEventListener('hashchange', () => {
-      openPopUp();
-    });
-
-    const fade = document.getElementById('fade');
-    fade.addEventListener('click', () => {
-      window.location.hash = '';
-    });
-  }
-
-  init() {
-    this.setPopUp();
-    this.feeds.forEach((f) => {
-      const list = f;
-      list.container = document.querySelector(`#au_news-list_${list.id}`);
-      list.items = [];
-      list.page = 1;
-      const elements = AUNews.getElementFormatArray(list);
-      const mountNode = list.container;
-      if (mountNode) {
-        ReactDOM.render(
-          <NewsListComponent
-            lang={this.lang}
-            list={list}
-            elements={elements}
-            setItem={this.setItem}
-          />,
-          mountNode,
-        );
-      }
-    });
-  }
-
-  static getElementFormatArray(_list) {
-    const list = _list;
-    const elements = [];
-    const rowSplit = list.format.split(',');
-    let formatCount = 0;
-    for (let r = 0; r < rowSplit.length; r += 1) {
-      const element = rowSplit[r];
-      if (element !== '|') {
-        if (element.indexOf('|') > -1) {
-          const columns = [];
-          const columnSplit = element.split('|');
-          for (let c = 0; c < columnSplit.length; c += 1) {
-            const columnElements = [];
-            const columnElementsSplit = columnSplit[c].split(';');
-            for (let e = 0; e < columnElementsSplit.length; e += 1) {
-              columnElements.push(columnElementsSplit[e]);
-              list.lastelement = columnElementsSplit[e];
-              list.lastiscolumn = true;
-              formatCount += 1;
-            }
-            columns.push(columnElements);
-          }
-          elements.push(columns);
-        } else {
-          elements.push(element);
-          list.lastiscolumn = false;
-          list.lastelement = element;
-          formatCount += 1;
-        }
-      }
-    }
-
-    if (list.page === 1) {
-      list.amount = formatCount;
-    }
-
-    return elements;
-  }
-}
-
-class AUNewsCollage {
-  constructor(lang, element) {
-    this.element = element;
-    this.loaded = false;
-    this.lang = lang;
-    window.addEventListener('scroll', () => {
-      this.init();
-      this.initRSS();
-    });
-  }
-
-  loadData(key, callback) {
-    const url = `${AUNewsConfig.server}/index.php?eID=getAuNewsFeed&mode=key&key=${key}&index=0&amount=4&noPageBrowser=1&lang=${this.lang}&callback=?`;
-    $.ajax({
-      url,
-      dataType: 'json',
-      jsonpCallback: url.hashCode(),
-      jsonp: true,
-      cache: true,
-      success: (data) => {
-        if (typeof callback === 'function') {
-          callback(data);
-        }
-      },
-    });
-  }
-
-  loadDataRSS(url, callback) {
-    fetch(url).then((response) => response.json()).then((data) => callback(data.Items));
-  }
-
-  init() {
-    if (!this.loaded && isElementInViewport(this.element) && typeof window.newsCollageRSS === 'undefined') {
-      const newsElements = [
-        document.querySelector('#news1'),
-        document.querySelector('#news2'),
-        document.querySelector('#news3'),
-        document.querySelector('#news4'),
-      ];
-
-      const eventElements = [
-        document.querySelector('#event1'),
-        document.querySelector('#event2'),
-        document.querySelector('#event3'),
-      ];
-
-      // News
-      const newsFeedKey = this.lang === 'da' ? 'b73f5e9759ac3592043449c02dcffa56' : '400bcbb4807a5a722df5e2045fa7966f';
-      this.loadData(newsFeedKey, (data) => {
-        newsElements.forEach((e, i) => {
-          if (data[i]) {
-            ReactDOM.render(
-              <NewsCollageBannerComponent
-                type="news"
-                item={AUNewsHelpers.setExternal(data[i])}
-                title={this.lang === 'da' ? 'Nyhed' : 'News'}
-                lang={this.lang}
-              />,
-              e,
-            );
-          } else {
-            e.style.display = 'none';
-          }
-        });
-      });
-      // Events
-      const eventFeedKey = this.lang === 'da' ? '003383f99d8ae70cde9110294ab39727' : '19a8aa9cc30143d2e41cfbdb4123541e';
-      this.loadData(eventFeedKey, (data) => {
-        eventElements.forEach((e, i) => {
-          if (data[i]) {
-            ReactDOM.render(
-              <NewsCollageBannerComponent
-                type="events"
-                item={AUNewsHelpers.setExternal(data[i])}
-                title={this.lang === 'da' ? 'Arrangement' : 'Event'}
-                lang={this.lang}
-              />,
-              e,
-            );
-          } else {
-            e.style.display = 'none';
-          }
-        });
-      });
-
-      this.loaded = true;
-    }
-  }
-
-  initRSS() {
-    if (!this.loaded && isElementInViewport(this.element) && typeof window.newsCollageRSS !== 'undefined' && window.newsCollageRSS) {
-      const newsElements = [
-        document.querySelector('#news1'),
-        document.querySelector('#news2'),
-        document.querySelector('#news3'),
-        document.querySelector('#news4'),
-      ];
-
-      const eventElements = [
-        document.querySelector('#event1'),
-        document.querySelector('#event2'),
-        document.querySelector('#event3'),
-      ];
-
-      // News
-      const newsFeedKey = `https://webtools.au.dk/api/news/getlist?url=${window.newsFeedRssUri}`;
-      this.loadDataRSS(newsFeedKey, (data) => {
-        newsElements.forEach((e, i) => {
-          if (data[i]) {
-            ReactDOM.render(
-              <NewsCollageBannerRSSComponent
-                type="news"
-                item={data[i]}
-                title={this.lang === 'da' ? 'Nyhed' : 'News'}
-                lang={this.lang}
-              />,
-              e,
-            );
-          } else {
-            e.style.display = 'none';
-          }
-        });
-      });
-      // Events
-      const eventFeedKey = `https://webtools.au.dk/api/news/getlist?url=${window.eventFeedRssUri}`;
-      this.loadDataRSS(eventFeedKey, (data) => {
-        eventElements.forEach((e, i) => {
-          if (data[i]) {
-            ReactDOM.render(
-              <NewsCollageBannerRSSComponent
-                type="events"
-                item={data[i]}
-                title={this.lang === 'da' ? 'Arrangement' : 'Event'}
-                lang={this.lang}
-              />,
-              e,
-            );
-          } else {
-            e.style.display = 'none';
-          }
-        });
-      });
-
-      this.loaded = true;
-    }
-  }
-}
-
-window.AUNews = AUNews;
-window.AUNewsCollage = AUNewsCollage;
-export {
-  AUNewsConfig,
-  AUNewsHelpers,
-};

package/src/lib/menu.js

@@ -1,10 +0,0 @@
-import axios from 'axios';
-
-const getSubPages = (url) => {
-  axios.get(url).then((promise) => {
-    const { subPages } = promise.data;
-    return subPages;
-  });
-};
-
-export default getSubPages;

package/src/lib/urlHandler.js

@@ -1,63 +0,0 @@
-/* eslint-env browser */
-/* eslint no-restricted-syntax: 0 */
-/* eslint no-prototype-builtins: 0 */
-class AUUrlHandler {
-  constructor(onPopState, useHistory = true) {
-    this.useHistory = useHistory;
-
-    if (typeof onPopState === 'function') {
-      window.onpopstate = (event) => {
-        onPopState(event);
-      };
-    }
-  }
-
-  static getQuery(index = 1) {
-    return window.location.search.substring(index); // 1 = without ?
-  }
-
-  static parse() {
-    const query = AUUrlHandler.getQuery();
-    if (query === '') {
-      return null;
-    }
-    const objString = `{"${query.replace(/&/g, '","').replace(/=/g, '":"')}"}`;
-    return JSON.parse(objString, (key, value) => (key === '' ? value : decodeURIComponent(value)));
-  }
-
-  static serialize(obj) {
-    const str = [];
-    for (const p in obj) {
-      if (obj.hasOwnProperty(p) && obj[p] !== '') {
-        str.push(`${encodeURIComponent(p)}=${encodeURIComponent(obj[p])}`);
-      }
-    }
-    return str.join('&');
-  }
-
-  set(query, append = true, title = '') {
-    const { key, value } = query;
-
-    const current = AUUrlHandler.parse() || {};
-    current[key] = value;
-
-    const { location: { protocol, host, pathname } } = window;
-    let next = `?${AUUrlHandler.serialize(current)}`;
-    if (next === '?') {
-      next = `${protocol}//${host}${pathname}`;
-    } else {
-      next = `${pathname}${next}`;
-    }
-    if (this.useHistory) {
-      if (append) {
-        window.history.pushState('', title, next);
-      } else {
-        window.history.replaceState('', title, next);
-      }
-    } else {
-      window.location.search = next;
-    }
-  }
-}
-
-export default AUUrlHandler;

package/src/lib/validation.js

@@ -1,181 +0,0 @@
-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,
-};

package/src/styles/alert.scss

@@ -1,39 +0,0 @@
-/* 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;
-}