@aarhus-university/au-lib-react-components 10.19.0 → 10.19.2

package/src/components/profile/AUProfileNameComponent.js

@@ -1,253 +0,0 @@
-/* eslint-env browser */
-/* eslint-disable jsx-a11y/label-has-associated-control */
-/* eslint-disable jsx-a11y/label-has-for */
-/* eslint-disable max-len */
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
-import AUSubmitButtonContainerComponent from '../form/AUSubmitButtonContainerComponent';
-import { useProfileForm } from './AUProfileHooks';
-import { scrollTo } from '../../lib/helpers';
-import { profileLabels } from '../../lib/i18n';
-import { renderValidation, validateForm } from '../../lib/validation';
-
-const AUProfileNameComponent = ({
-  lang,
-  routeProps: { history },
-  path,
-  firstNames,
-  lastName,
-  hasChosenName: pHasChosenName,
-  chosenFirstNames: pChosenFirstNames,
-  chosenLastName: pChosenLastName,
-  onSave,
-  onSaveAction,
-  saving,
-  saved,
-  dismissMessages,
-  clear,
-}) => {
-  const validationRules = [{
-    message: profileLabels[lang].validFirstName,
-    rule: (fieldValue) => fieldValue.trim().length > 0,
-  },
-  {
-    message: profileLabels[lang].validLastName,
-    rule: (fieldValue) => fieldValue.trim().length > 0,
-  }];
-
-  const [hasChosenName, setHasChosenName] = useState(pHasChosenName);
-  const [chosenFirstNames, setChosenFirstNames] = useState(pChosenFirstNames);
-  const [chosenLastName, setChosenLastName] = useState(pChosenLastName);
-  const [firstNameValidationMessages, setFirstNameValidationMessages] = useState([]);
-  const [lastNameValidationMessages, setLastNameValidationMessages] = useState([]);
-  const [isFirstNameValid, setIsFirstNameValid] = useState(!pHasChosenName || (!!pChosenFirstNames));
-  const [isLastNameValid, setIsLastNameValid] = useState(!pHasChosenName || (!!pChosenLastName));
-  const [onCancel] = useProfileForm(saved, history, lang, clear);
-
-  const validateFirstName = (value, alert = true) => {
-    const [valid, messages] = validateForm(lang, value, [validationRules[0]]);
-    setChosenFirstNames(value);
-    setFirstNameValidationMessages(alert ? messages : []);
-    setIsFirstNameValid(!hasChosenName || valid);
-  };
-
-  const validateLastName = (value, alert = true) => {
-    const [valid, messages] = validateForm(lang, value, [validationRules[1]]);
-    setChosenLastName(value);
-    setLastNameValidationMessages(alert ? messages : []);
-    setIsLastNameValid(!hasChosenName || valid);
-  };
-
-  const submit = (e) => {
-    e.preventDefault();
-    validateFirstName(chosenFirstNames, !isFirstNameValid);
-    validateLastName(chosenLastName, !isLastNameValid);
-    if (isFirstNameValid && isLastNameValid) {
-      onSave({
-        hasChosenName,
-        chosenFirstNames: chosenFirstNames.trim(),
-        chosenLastName: chosenLastName.trim(),
-      }, onSaveAction);
-    }
-  };
-
-  let firstNameValidationClassName = '';
-  if (!isFirstNameValid && firstNameValidationMessages.length) {
-    firstNameValidationClassName = ' form-info--error';
-  } else if (isFirstNameValid) {
-    firstNameValidationClassName = ' form-info--confirmed';
-  }
-
-  let lastNameValidationClassName = '';
-  if (!isLastNameValid && lastNameValidationMessages.length) {
-    lastNameValidationClassName = ' form-info--error';
-  } else if (isLastNameValid) {
-    lastNameValidationClassName = ' form-info--confirmed';
-  }
-
-  useEffect(() => {
-    dismissMessages();
-    scrollTo();
-    const firstName = document.getElementById('first-name');
-    if (firstName) {
-      firstName.focus();
-    }
-  }, []);
-
-  return [
-    <div key="header" className="list-navigator">
-      <h1 className="list-navigator__header">{profileLabels[lang].headerName}</h1>
-      <Link className="list-navigator__list-name" to={path}>{profileLabels[lang].headerContainer}</Link>
-    </div>,
-    <form key="form" className="form" noValidate="novalidate">
-      <fieldset>
-        <legend>
-          <div className="fieldset__legend-wrapper">
-            {profileLabels[lang].legendName}
-            <div className="form-info__hint">
-              {profileLabels[lang].legendNameHint}
-            </div>
-          </div>
-        </legend>
-        <div className="form__field form__field--horizontal">
-          <label htmlFor="default-display-name">
-            {`${firstNames} ${lastName}`}
-            <div className="form-info__hint">
-              {profileLabels[lang].formNameHint}
-            </div>
-          </label>
-          <input
-            type="radio"
-            id="default-display-name"
-            checked={!hasChosenName}
-            onChange={() => {
-              setHasChosenName(false);
-              setChosenFirstNames(firstNames);
-              setChosenLastName(lastName);
-              setIsFirstNameValid(true);
-              setIsLastNameValid(true);
-            }}
-            disabled={saving}
-          />
-        </div>
-        <div className="form__field form__field--horizontal">
-          <label htmlFor="custom-display-name">
-            {profileLabels[lang].formNameDisplayName}
-          </label>
-          <input
-            type="radio"
-            id="custom-display-name"
-            checked={hasChosenName}
-            onChange={() => {
-              setHasChosenName(true);
-            }}
-            disabled={saving}
-          />
-        </div>
-      </fieldset>
-      {(() => {
-        if (hasChosenName) {
-          return [
-            <div key="fn" className={`form__field${firstNameValidationClassName}`}>
-              <label htmlFor="first-name">
-                {profileLabels[lang].firstName}
-                <div className="form-info__hint">
-                  {profileLabels[lang].firstNameHint}
-                </div>
-                {renderValidation(firstNameValidationMessages)}
-              </label>
-              <input
-                type="text"
-                id="first-name"
-                value={chosenFirstNames}
-                onChange={(e) => {
-                  validateFirstName(e.target.value, firstNameValidationMessages.length);
-                }}
-                onKeyUp={(e) => {
-                  if (e.key === 'Enter') {
-                    validateFirstName(e.target.value);
-                  }
-                }}
-                disabled={saving}
-              />
-            </div>,
-            <div key="ln" className={`form__field${lastNameValidationClassName}`}>
-              <label htmlFor="last-name">
-                {profileLabels[lang].lastName}
-                {renderValidation(lastNameValidationMessages)}
-              </label>
-              <input
-                type="text"
-                id="last-name"
-                value={chosenLastName}
-                onChange={(e) => {
-                  validateLastName(e.target.value, lastNameValidationMessages.length);
-                }}
-                onKeyUp={(e) => {
-                  if (e.key === 'Enter') {
-                    validateLastName(e.target.value);
-                  }
-                }}
-                disabled={saving}
-              />
-            </div>,
-          ];
-        }
-        return null;
-      })()}
-      <AUSubmitButtonContainerComponent
-        lang={lang}
-        disabled={saving}
-        onSubmit={submit}
-        onCancel={onCancel}
-      />
-    </form>,
-  ];
-};
-
-AUProfileNameComponent.defaultProps = {
-  onSaveAction: (data, callback) => {
-    const putData = async () => {
-      let url = `${window.profileApiUri}/UpdatePersonNames`;
-      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);
-
-      // clear context cache
-      window.auAuth.setUserContext(window.API_AUID || 0, 'profile-clear-cache', true, () => {}, () => {}, true, window.authenticated);
-    };
-
-    putData();
-  },
-};
-
-AUProfileNameComponent.propTypes = {
-  lang: PropTypes.string.isRequired,
-  routeProps: PropTypes.shape({}).isRequired,
-  path: PropTypes.string.isRequired,
-  firstNames: PropTypes.string.isRequired,
-  lastName: PropTypes.string.isRequired,
-  hasChosenName: PropTypes.bool.isRequired,
-  chosenFirstNames: PropTypes.string.isRequired,
-  chosenLastName: PropTypes.string.isRequired,
-  onSave: PropTypes.func.isRequired,
-  onSaveAction: PropTypes.func,
-  saving: PropTypes.bool.isRequired,
-  saved: PropTypes.bool.isRequired,
-  dismissMessages: PropTypes.func.isRequired,
-  clear: PropTypes.func.isRequired,
-};
-
-AUProfileNameComponent.displayName = 'AUProfileNameComponent';
-export default AUProfileNameComponent;

package/src/components/profile/AUProfileNextOfKinComponent.js

@@ -1,216 +0,0 @@
-/* eslint-env browser */
-/* eslint-disable jsx-a11y/label-has-associated-control */
-/* eslint-disable jsx-a11y/label-has-for */
-/* eslint-disable max-len */
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
-import AUSubmitButtonContainerComponent from '../form/AUSubmitButtonContainerComponent';
-import AUMobilePrefixComponent from '../form/AUMobilePrefixComponent';
-import { useProfileForm, useMobilePrefix } from './AUProfileHooks';
-import {
-  splitPhoneNumber,
-  scrollTo,
-} from '../../lib/helpers';
-import { profileLabels } from '../../lib/i18n';
-import { renderValidation, validateForm } from '../../lib/validation';
-
-const AUProfileNextOfKinComponent = ({
-  lang,
-  routeProps: { history },
-  path,
-  countryCodes,
-  nextOfKinName: pNextOfKinName,
-  nextOfKinPhoneNumber,
-  onSave,
-  onSaveAction,
-  saving,
-  saved,
-  dismissMessages,
-  clear,
-}) => {
-  const validationRules = [{
-    message: profileLabels[lang].validName,
-    rule: (fieldValue) => fieldValue.trim().length > 0,
-  },
-  {
-    message: profileLabels[lang].validMobile,
-    rule: (fieldValue) => fieldValue.trim().match(/^\+[1-9][0-9]{5,14}$/),
-  }];
-
-  const [nextOfKinName, setNextOfKinName] = useState(pNextOfKinName);
-  const [prefix, mobile, setPrefix, setMobile] = useMobilePrefix(splitPhoneNumber, countryCodes, nextOfKinPhoneNumber);
-  const [onCancel] = useProfileForm(saved, history, lang, clear);
-  const [nokNameValidationMessages, setNokNameValidationMessages] = useState([]);
-  const [nokMobileValidationMessages, setNokMobileValidationMessages] = useState([]);
-  const [isNokNameValid, setIsNokNameValid] = useState(!!pNextOfKinName);
-  const [isNokMobileValid, setIsNokMobileValid] = useState(!!nextOfKinPhoneNumber);
-
-  const validateName = (value, alert = true) => {
-    const [valid, messages] = validateForm(lang, value, [validationRules[0]]);
-    setNextOfKinName(value);
-    setNokNameValidationMessages(alert ? messages : []);
-    setIsNokNameValid(valid);
-  };
-
-  const validateMobile = (value, alert = true) => {
-    const [valid, messages] = validateForm(lang, prefix + value, [validationRules[1]]);
-    setMobile(value);
-    setNokMobileValidationMessages(alert ? messages : []);
-    setIsNokMobileValid(valid);
-  };
-
-  const submit = (e) => {
-    e.preventDefault();
-    validateName(nextOfKinName, !isNokNameValid);
-    validateMobile(mobile, !isNokMobileValid);
-    if (isNokNameValid && isNokMobileValid) {
-      onSave({
-        nextOfKinName: nextOfKinName.trim(),
-        nextOfKinPhoneNumber: prefix + mobile,
-      }, onSaveAction);
-    }
-  };
-
-  let nokNameValidationClassName = '';
-  if (!isNokNameValid && nokNameValidationMessages.length) {
-    nokNameValidationClassName = ' form-info--error';
-  } else if (isNokNameValid) {
-    nokNameValidationClassName = ' form-info--confirmed';
-  }
-
-  let nokMobileValidationClassName = '';
-  if (!isNokMobileValid && nokMobileValidationMessages.length) {
-    nokMobileValidationClassName = ' form-info--error';
-  } else if (isNokMobileValid) {
-    nokMobileValidationClassName = ' form-info--confirmed';
-  }
-
-  useEffect(() => {
-    dismissMessages();
-    scrollTo();
-    document.getElementById('contact-name').focus();
-  }, []);
-
-  return [
-    <div key="header" className="list-navigator">
-      <h1 className="list-navigator__header">{profileLabels[lang].headerNextOfKin}</h1>
-      <Link className="list-navigator__list-name" to={path}>{profileLabels[lang].headerContainer}</Link>
-    </div>,
-    <p key="paragraph">
-      {profileLabels[lang].nextOfKinParagraph}
-    </p>,
-    <form key="form" className="form" noValidate="novalidate">
-      <div className={`form__field${nokNameValidationClassName}`}>
-        <label htmlFor="contact-name">
-          {profileLabels[lang].nextOfKinName}
-          {renderValidation(nokNameValidationMessages)}
-        </label>
-        <input
-          type="text"
-          id="contact-name"
-          value={nextOfKinName}
-          onChange={(e) => {
-            validateName(e.target.value, nokNameValidationMessages.length);
-          }}
-          onKeyUp={(e) => {
-            if (e.key === 'Enter') {
-              validateName(e.target.value);
-            }
-          }}
-          disabled={saving}
-        />
-      </div>
-      <fieldset className="fieldset--not-radio-checkbox">
-        <legend>
-          <div className="fieldset__legend-wrapper">{profileLabels[lang].nextOfKinTelephone}</div>
-        </legend>
-        <div className="form__field">
-          <label htmlFor="contact-country-code">{profileLabels[lang].countryCode}</label>
-          <select
-            id="contact-country-code"
-            value={prefix}
-            onChange={(e) => {
-              setPrefix(e.target.value);
-            }}
-          >
-            <AUMobilePrefixComponent countryCodes={countryCodes} important />
-            <optgroup label="Alle lande">
-              <AUMobilePrefixComponent countryCodes={countryCodes} />
-            </optgroup>
-          </select>
-        </div>
-        <div className={`form__field${nokMobileValidationClassName}`}>
-          <label htmlFor="contact-phone">
-            {profileLabels[lang].number}
-            {renderValidation(nokMobileValidationMessages)}
-          </label>
-          <input
-            type="tel"
-            id="contact-phone"
-            value={mobile}
-            onChange={(e) => {
-              validateMobile(e.target.value, nokMobileValidationMessages.length);
-            }}
-            onKeyUp={(e) => {
-              if (e.key === 'Enter') {
-                validateMobile(e.target.value);
-              }
-            }}
-            disabled={saving}
-          />
-        </div>
-      </fieldset>
-      <AUSubmitButtonContainerComponent
-        lang={lang}
-        disabled={saving}
-        onSubmit={submit}
-        onCancel={onCancel}
-      />
-    </form>,
-  ];
-};
-
-AUProfileNextOfKinComponent.defaultProps = {
-  onSaveAction: (data, callback) => {
-    const putData = async () => {
-      let url = `${window.profileApiUri}/UpdateNextOfKin`;
-      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);
-
-      // clear context cache
-      window.auAuth.setUserContext(window.API_AUID || 0, 'profile-clear-cache', true, () => {}, () => {}, true, window.authenticated);
-    };
-
-    putData();
-  },
-};
-
-AUProfileNextOfKinComponent.propTypes = {
-  lang: PropTypes.string.isRequired,
-  routeProps: PropTypes.shape({}).isRequired,
-  path: PropTypes.string.isRequired,
-  countryCodes: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
-  nextOfKinName: PropTypes.string.isRequired,
-  nextOfKinPhoneNumber: PropTypes.string.isRequired,
-  onSave: PropTypes.func.isRequired,
-  onSaveAction: PropTypes.func,
-  saving: PropTypes.bool.isRequired,
-  saved: PropTypes.bool.isRequired,
-  dismissMessages: PropTypes.func.isRequired,
-  clear: PropTypes.func.isRequired,
-};
-
-AUProfileNextOfKinComponent.displayName = 'AUProfileNextOfKinComponent';
-export default AUProfileNextOfKinComponent;

package/src/components/profile/AUProfileReducer.js

@@ -1,230 +0,0 @@
-import { profileLabels } from '../../lib/i18n';
-import {
-  GET_BASIC_USER,
-  SAVING_USER,
-  PATCH_NAME,
-  PATCH_MAIL,
-  PATCH_MOBILE,
-  PATCH_LANGUAGE,
-  PATCH_NEXTOFKIN,
-  DISMISS_MESSAGES,
-  SET_SAVED,
-  GET_WORKMAIL_DOMAIN,
-} from './AUProfileActions';
-
-export const initialState = {
-  user: {
-    auId: 0,
-    firstNames: '',
-    lastName: '',
-    hasChosenName: false,
-    chosenFirstNames: '',
-    chosenLastName: '',
-    name: '',
-    privateMailAddress: '',
-    privatePhoneNumber: '',
-    privateMobileNumber: '',
-    nextOfKinName: '',
-    nextOfKinPhoneNumber: '',
-    preferredLanguage: 'da',
-    studentNumber: null,
-    educations: [],
-    isStudentImpersonator: false,
-    timelineAllowed: false,
-    isActiveStudent: false,
-    suCandidate: false,
-    studentMailAddress: null,
-    studentChosenMailAddress: null,
-    workMailAddress: '',
-    workMailDomain: '',
-    saving: false,
-    saved: false,
-    loaded: false,
-  },
-  messages: [],
-};
-
-export const reducer = (state, action) => {
-  const nextState = { ...state };
-
-  switch (action.type) {
-    case GET_BASIC_USER: { // Tror ikke det her i brug...
-      const { result } = action;
-      if (result.user) {
-        const prevUser = { ...nextState.user };
-        const newUser = Object.assign(prevUser, result.user);
-        nextState.user = newUser;
-      } else if (result.error) {
-        nextState.messages = [{
-          type: 'warning',
-          message: result.error.Message,
-        }];
-      }
-      return nextState;
-    }
-    case GET_WORKMAIL_DOMAIN: {
-      const { result } = action;
-      if (result.user) {
-        const prevUser = { ...nextState.user };
-        const newUser = Object.assign(prevUser, result.user);
-        nextState.user = newUser;
-      } else if (result.error) {
-        nextState.messages = [{
-          type: 'warning',
-          message: nextState.user.preferredLanguage === 'da' ? result.error.errorMessageDa : result.error.errorMessageEn,
-          // Skal bruges i de andre profilePatch også?
-        }];
-      }
-      return nextState;
-    }
-    case DISMISS_MESSAGES: {
-      nextState.messages = [];
-      return nextState;
-    }
-    case SET_SAVED: {
-      const prevUser = { ...nextState.user };
-      nextState.user = Object.assign(prevUser, {
-        saved: false,
-      });
-      return nextState;
-    }
-    case SAVING_USER: {
-      const prevUser = { ...nextState.user };
-      nextState.user = Object.assign(prevUser, { saving: true, saved: false });
-      return nextState;
-    }
-    case PATCH_NAME: {
-      const { result } = action;
-      const prevUser = { ...nextState.user };
-      if (result.user) {
-        const { user: { hasChosenName, chosenFirstNames, chosenLastName } } = result;
-        nextState.user = Object.assign(prevUser, {
-          hasChosenName,
-          chosenFirstNames,
-          chosenLastName,
-          saving: false,
-          saved: true,
-        });
-        nextState.messages = [{
-          type: 'confirm',
-          message: profileLabels[nextState.user.preferredLanguage].saved,
-        }];
-      } else if (result.error) {
-        nextState.messages = [{
-          type: 'warning',
-          message: result.error.Message,
-        }];
-        nextState.user = Object.assign(prevUser, { saving: false });
-      }
-      return nextState;
-    }
-    case PATCH_MAIL: {
-      const { result } = action;
-      const prevUser = { ...nextState.user };
-      if (result.user) {
-        const { user: { privateMailAddress, workMailAddress, studentChosenMailAddress } } = result;
-        nextState.user = Object.assign(prevUser, {
-          workMailAddress,
-          studentChosenMailAddress,
-          privateMailAddress,
-          saving: false,
-          saved: true,
-        });
-        nextState.messages = [{
-          type: 'confirm',
-          message: `${profileLabels[nextState.user.preferredLanguage].saved} ${profileLabels[nextState.user.preferredLanguage].mailNotice}`,
-        }];
-      } else if (result.error) {
-        nextState.messages = [{
-          type: 'warning',
-          message: nextState.user.preferredLanguage === 'da' ? result.error.errorMessageDa : result.error.errorMessageEn,
-          // Skal bruges i de andre profilePatch også?
-        }];
-        nextState.user = Object.assign(prevUser, { saving: false });
-      }
-      return nextState;
-    }
-    case PATCH_MOBILE: {
-      const { result } = action;
-      const prevUser = { ...nextState.user };
-      if (result.user) {
-        const { user: { privatePhoneNumber, privateMobileNumber } } = result;
-        nextState.user = Object.assign(prevUser, {
-          privatePhoneNumber,
-          privateMobileNumber,
-          saving: false,
-          saved: true,
-        });
-        nextState.messages = [{
-          type: 'confirm',
-          message: profileLabels[nextState.user.preferredLanguage].saved,
-        }];
-      } else if (result.error) {
-        if (result.error.Message) {
-          nextState.messages = [{
-            type: 'warning',
-            message: result.error.Message,
-          }];
-        } else {
-          nextState.messages = result.error.map((e) => ({
-            type: 'warning',
-            message: e.errorMessage,
-          }));
-        }
-
-        nextState.user = Object.assign(prevUser, { saving: false });
-      }
-      return nextState;
-    }
-    case PATCH_LANGUAGE: {
-      const { result } = action;
-      const prevUser = { ...nextState.user };
-      if (result.user) {
-        const { user: { preferredLanguage } } = result;
-        nextState.user = Object.assign(prevUser, {
-          preferredLanguage,
-          saving: false,
-          saved: true,
-        });
-        nextState.messages = [{
-          type: 'confirm',
-          message: profileLabels[nextState.user.preferredLanguage].saved,
-        }];
-      } else if (result.error) {
-        nextState.messages = [{
-          type: 'warning',
-          message: result.error.Message,
-        }];
-        nextState.user = Object.assign(prevUser, { saving: false });
-      }
-      return nextState;
-    }
-    case PATCH_NEXTOFKIN: {
-      const { result } = action;
-      const prevUser = { ...nextState.user };
-      if (result.user) {
-        const { user: { nextOfKinName, nextOfKinPhoneNumber } } = result;
-        nextState.user = Object.assign(prevUser, {
-          nextOfKinName,
-          nextOfKinPhoneNumber,
-          saving: false,
-          saved: true,
-        });
-        nextState.messages = [{
-          type: 'confirm',
-          message: profileLabels[nextState.user.preferredLanguage].saved,
-        }];
-      } else if (result.error) {
-        nextState.messages = [{
-          type: 'warning',
-          message: result.error.Message,
-        }];
-        nextState.user = Object.assign(prevUser, { saving: false });
-      }
-      return nextState;
-    }
-    default: {
-      return null;
-    }
-  }
-};