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

package/src/components/news/NewsSocialComponent.js

@@ -1,104 +0,0 @@
-/* eslint-env browser */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { newsLabels as labels } from '../../lib/i18n';
-
-class NewsSocialComponent extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      mailOpen: false,
-    };
-  }
-
-  render() {
-    const { item, lang } = this.props;
-    const { mailOpen } = this.state;
-
-    return (
-      <div className="au_news_socialbar" id={`au_news_socialbar-${item.id}`}>
-        <ul className="resetlist au_social_sharing horizontal icons services-4">
-          <li className="facebook">
-            <a
-              href={item.permalink}
-              onClick={(e) => {
-                e.preventDefault();
-                window.open(`https://www.facebook.com/sharer/sharer.php?u=${item.permalink}`, '', 'width=600,height=450');
-              }}
-            >
-              {labels[lang].share.facebook}
-            </a>
-          </li>
-          <li className="twitter">
-            <a
-              href={item.permalink}
-              onClick={(e) => {
-                e.preventDefault();
-                const url = encodeURI(item.permalink);
-                const title = encodeURI(item.header);
-                window.open(`https://twitter.com/intent/tweet?text=${title}&url=${url}`, '', 'width=550,height=450');
-              }}
-            >
-              {labels[lang].share.twitter}
-            </a>
-          </li>
-          <li className="linkedin">
-            <a
-              href={item.permalink}
-              onClick={(e) => {
-                e.preventDefault();
-                const url = encodeURI(item.permalink);
-                window.open(`https://www.linkedin.com/shareArticle?mini=true&url=${url}`, '', 'width=850,height=550');
-              }}
-            >
-              {labels[lang].share.linkedin}
-            </a>
-          </li>
-          <li className="email">
-            <a
-              href={item.permalink}
-              data-title={item.header}
-              data-url={item.permalink}
-              className={mailOpen ? 'active' : null}
-              onClick={(e) => {
-                e.preventDefault();
-                this.setState((prevState) => ({
-                  mailOpen: !prevState.mailOpen,
-                }));
-              }}
-            >
-              {labels[lang].share.mail}
-            </a>
-            <ul className="resetlist" style={{ display: mailOpen ? 'block' : 'none' }}>
-              <li className="outlook">
-                <a title={labels[lang].share.mailLabelLong} href={`mailto:?subject=${item.header}&body=${item.permalink}`}>{labels[lang].share.mailLabelShort}</a>
-              </li>
-              <li className="gmail">
-                <a title={labels[lang].share.gmailLabelLong} target="_blank" rel="noopener noreferrer" href={`http://www.addtoany.com/add_to/google_gmail?linkurl=${item.permalink}`}>{labels[lang].share.gmailLabelShort}</a>
-              </li>
-              <li className="yahoo">
-                <a title={labels[lang].share.yahooLabelLong} target="_blank" rel="noopener noreferrer" href={`http://www.addtoany.com/add_to/yahoo_mail?linkurl=${item.permalink}`}>{labels[lang].share.yahooLabelShort}</a>
-              </li>
-              <li className="outlookcom">
-                <a title={labels[lang].share.outlookLabelLong} target="_blank" rel="noopener noreferrer" href={`http://www.addtoany.com/add_to/outlook_com?linkurl=${item.permalink}`}>{labels[lang].share.outlookLabelShort}</a>
-              </li>
-            </ul>
-          </li>
-        </ul>
-      </div>
-    );
-  }
-}
-
-NewsSocialComponent.propTypes = {
-  item: PropTypes.shape({
-    id: PropTypes.number.isRequired,
-    header: PropTypes.string.isRequired,
-    permalink: PropTypes.string.isRequired,
-  }).isRequired,
-  lang: PropTypes.string.isRequired,
-};
-
-NewsSocialComponent.displayName = 'NewsSocialComponent';
-export default NewsSocialComponent;

package/src/components/news/NewsSubHeaderComponent.js

@@ -1,19 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const NewsSubHeaderComponent = (props) => {
-  const { subheader, trim } = props;
-  if (subheader.length > trim) {
-    return <p dangerouslySetInnerHTML={{ __html: `${subheader.substring(0, props.trim).trim()}&hellip;` }} />;
-  }
-
-  return <p dangerouslySetInnerHTML={{ __html: subheader }} />;
-};
-
-NewsSubHeaderComponent.propTypes = {
-  subheader: PropTypes.string.isRequired,
-  trim: PropTypes.number.isRequired,
-};
-
-NewsSubHeaderComponent.displayName = 'NewsSubHeaderComponent';
-export default NewsSubHeaderComponent;

package/src/components/password/AUChangePasswordComponent.js

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

package/src/components/password/AUCurrentPasswordComponent.js

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

package/src/components/password/AUNewPasswordComponent.js

@@ -1,143 +0,0 @@
-/* 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 v = validatePassword(lang, e.target.value, confirmPassword);
-            setNewPassword(e.target.value);
-            setConfirmPassword('');
-            setNewPasswordValidated(v.newPasswordValid);
-            setNewPasswordValidationMessages(v.newPasswordMessages);
-            setConfirmPasswordValidationMessages([]);
-            setErrorMessages();
-          }}
-          onBlur={(e) => {
-            const v = validatePassword(lang, e.target.value, confirmPassword, true);
-            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 v = validatePassword(lang, newPassword, e.target.value);
-            setConfirmPassword(e.target.value);
-            setConfirmPasswordValidated(v.confirmPasswordValid);
-            setConfirmPasswordValidationMessages(v.confirmPasswordMessages);
-          }}
-          onBlur={(e) => {
-            const v = validatePassword(lang, newPassword, e.target.value, true);
-            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 +0,0 @@
-/* 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 +0,0 @@
-/* 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,
-};