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

package/src/components/profile/AUProfileMailComponent.js

@@ -1,307 +0,0 @@
-/* eslint-env browser */
-/* eslint-disable max-len */
-/* 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 { Link } from 'react-router-dom';
-import AUSubmitButtonContainerComponent from '../form/AUSubmitButtonContainerComponent';
-import { useProfileForm } from './AUProfileHooks';
-import {
-  setCaretPosition,
-  scrollTo,
-} from '../../lib/helpers';
-import { profileLabels } from '../../lib/i18n';
-import { renderValidation, validateForm, emailRegex } from '../../lib/validation';
-
-const AUProfileMailComponent = ({
-  lang,
-  routeProps: { history },
-  path,
-  studentMailAddress,
-  studentChosenMailAddress: pStudentChosenMailAddress,
-  privateMailAddress: pPrivateMailAddress,
-  workMailAddress: pWorkMailAddress,
-  workMailDomain,
-  isStudentAdGroupMember,
-  onSave,
-  onSaveAction,
-  saving,
-  saved,
-  dismissMessages,
-  clear,
-}) => {
-  const [workMail, setWorkMail] = useState(!pWorkMailAddress ? '' : pWorkMailAddress);
-  const [workMailPrefix, setWorkMailPrefix] = useState(workMail.includes('@') && !workMail.includes('@uni.au.dk') ? workMail.split('@')[0] : '');
-  const workMailPostfix = `@${workMailDomain}`; // `@${workMail.includes('@') ? workMail.split('@')[1] : ''}`;
-  const [workMailValidationMessages, setWorkMailValidationMessages] = useState([]);
-  const [isWorkMailValid, setIsWorkMailValid] = useState(!!pWorkMailAddress && !workMail.includes('@uni.au.dk') || pWorkMailAddress == null);
-
-  const [studentChosenMail, setStudentChosenMail] = useState(pStudentChosenMailAddress);
-  let initialStudentChosenMailPrefix = '';
-  if (studentChosenMail.includes('@')) {
-    [initialStudentChosenMailPrefix] = studentChosenMail.split('@');
-  } else if (studentMailAddress && studentMailAddress.includes('@')) {
-    [initialStudentChosenMailPrefix] = studentMailAddress.split('@');
-  }
-  const [studentChosenMailPrefix, setStudentChosenMailPrefix] = useState(initialStudentChosenMailPrefix);
-  const studentChosenMailPostfix = '@post.au.dk';
-  const [studentChosenMailValidationMessages, setStudentChosenMailValidationMessages] = useState([]);
-  const [isStudentChosenMailValid, setIsStudentChosenMailValid] = useState(!!pStudentChosenMailAddress || !isStudentAdGroupMember);
-
-  const [privateMail, setPrivateMail] = useState(pPrivateMailAddress);
-  const [privateMailValidationMessages, setPrivateMailValidationMessages] = useState([]);
-  const [isPrivateMailValid, setIsPrivateMailValid] = useState(!!pPrivateMailAddress);
-
-  const [onCancel] = useProfileForm(saved, history, lang, clear);
-
-  useEffect(() => {
-    scrollTo();
-    dismissMessages();
-    if (pWorkMailAddress) {
-      setCaretPosition(document.getElementById('mail-work'), pWorkMailAddress.indexOf('@'));
-      document.getElementById('mail-work').focus();
-    } else if (pStudentChosenMailAddress) {
-      setCaretPosition(document.getElementById('mail-student'), pStudentChosenMailAddress.indexOf('@'));
-      document.getElementById('mail-student').focus();
-    } else if (pPrivateMailAddress) {
-      setCaretPosition(document.getElementById('mail-private'), pPrivateMailAddress.indexOf('@'));
-      document.getElementById('mail-private').focus();
-    }
-  }, []);
-
-  const validationRules = [{
-    message: profileLabels[lang].validMail,
-    rule: (fieldValue) => fieldValue.trim().match(emailRegex),
-  }];
-
-  const validationRulesPrivateMail = [{
-    message: profileLabels[lang].validMailPrivate,
-    rule: (fieldValue) => fieldValue.trim().match(emailRegex) && !fieldValue.trim().endsWith(workMailPostfix),
-  }];
-
-  const validateWorkMail = (value, alert = true) => {
-    const [valid, messages] = validateForm(lang, value, validationRules);
-    setWorkMail(value);
-    setWorkMailValidationMessages(alert ? messages : []);
-    setIsWorkMailValid(valid);
-  };
-
-  const validateStudentChosenMail = (value, alert = true) => {
-    const [valid, messages] = validateForm(lang, value, validationRules);
-    setStudentChosenMail(value); // Her skal vi lige gøre noget, hvis man har slettet sin selvvalgte og den nulstiller til 20XXXXXXX@post.au.dk
-    setStudentChosenMailValidationMessages(alert ? messages : []);
-    setIsStudentChosenMailValid(valid);
-  };
-
-  const validatePrivateMail = (value, alert = true) => {
-    const [valid, messages] = validateForm(lang, value, validationRulesPrivateMail);
-    setPrivateMail(value);
-    setPrivateMailValidationMessages(alert ? messages : []);
-    setIsPrivateMailValid(valid);
-  };
-
-  const submit = (e) => {
-    e.preventDefault();
-    validateWorkMail(workMailPrefix + workMailPostfix, !isWorkMailValid);
-    validateStudentChosenMail(studentChosenMail, !isStudentChosenMailValid);
-    let valid = true; // Vi tillader tom privatmailadresse
-    if (privateMail !== '') {
-      validatePrivateMail(privateMail, !isPrivateMailValid);
-      valid = isPrivateMailValid;
-    }
-    if (isStudentAdGroupMember) {
-      valid = valid && isStudentChosenMailValid;
-    }
-    if (pWorkMailAddress) {
-      valid = valid && isWorkMailValid;
-    }
-    if (valid) {
-      onSave({
-        workMailName: workMailPrefix,
-        studentChosenMailAddress: studentChosenMail === studentMailAddress ? '' : studentChosenMail,
-        privateMailAddress: privateMail,
-      }, onSaveAction);
-    }
-  };
-
-  let workMailValidationClassName = '';
-  if (!isWorkMailValid && workMailValidationMessages.length) {
-    workMailValidationClassName = ' form-info--error';
-  } else if (isWorkMailValid) {
-    workMailValidationClassName = ' form-info--confirmed';
-  }
-
-  let studentChosenMailValidationClassName = '';
-  if (!isStudentChosenMailValid && studentChosenMailValidationMessages.length) {
-    studentChosenMailValidationClassName = ' form-info--error';
-  } else if (isStudentChosenMailValid) {
-    studentChosenMailValidationClassName = ' form-info--confirmed';
-  }
-
-  let privateMailValidationClassName = '';
-  if (!isPrivateMailValid && privateMailValidationMessages.length) {
-    privateMailValidationClassName = ' form-info--error';
-  } else if (isPrivateMailValid) {
-    privateMailValidationClassName = ' form-info--confirmed';
-  }
-
-  return [
-    <div key="header" className="list-navigator">
-      <h1 className="list-navigator__header">{profileLabels[lang].headerMail}</h1>
-      <Link className="list-navigator__list-name" to={path}>{profileLabels[lang].headerContainer}</Link>
-    </div>,
-    <form key="form" className="form" noValidate="novalidate">
-      {
-        pWorkMailAddress && (
-          <div className={`form__field${workMailValidationClassName}`}>
-            <label key="label" htmlFor="mail-work">
-              {profileLabels[lang].workMail}
-              <span className="screenreader-only">{profileLabels[lang].workMailScreenreader.replace('###MAIL###', workMail)}</span>
-              <div className="form-info__hint">
-                {profileLabels[lang].workMailHint}
-              </div>
-              {renderValidation(workMailValidationMessages)}
-            </label>
-            <div className="form__field__shadow-input">
-              <input
-                type="text"
-                id="mail-work"
-                value={workMailPrefix}
-                onChange={(e) => {
-                  const trimmed = e.target.value.trim();
-                  setWorkMailPrefix(trimmed);
-                  validateWorkMail(trimmed + workMailPostfix, workMailValidationMessages.length);
-                }}
-                onKeyUp={(e) => {
-                  if (e.key === 'Enter') {
-                    const trimmed = e.target.value.trim();
-                    setWorkMailPrefix(trimmed);
-                    validateWorkMail(trimmed + workMailPostfix);
-                  }
-                }}
-                disabled={saving}
-              />
-              <div className="form__field__shadow-input__content" aria-hidden="true">
-                <span className="form__field__shadow-input__input">{workMailPrefix}</span>
-                <span className="form__field__shadow-input__postfix">{workMailPostfix}</span>
-              </div>
-            </div>
-          </div>
-        )
-      }
-      {
-        isStudentAdGroupMember && (
-          <div className={`form__field${studentChosenMailValidationClassName}`}>
-            <label key="label" htmlFor="mail-student">
-              {profileLabels[lang].studentMail}
-              <span className="screenreader-only">{profileLabels[lang].studentMailScreenreader.replace('###MAIL###', studentChosenMail)}</span>
-              {renderValidation(studentChosenMailValidationMessages)}
-            </label>
-            <div className="form__field__shadow-input">
-              <input
-                type="text"
-                id="mail-student"
-                value={studentChosenMailPrefix}
-                onChange={(e) => {
-                  const trimmed = e.target.value.trim();
-                  setStudentChosenMailPrefix(trimmed);
-                  validateStudentChosenMail(trimmed + studentChosenMailPostfix, studentChosenMailValidationMessages.length);
-                }}
-                onKeyUp={(e) => {
-                  if (e.key === 'Enter') {
-                    const trimmed = e.target.value.trim();
-                    setStudentChosenMailPrefix(trimmed);
-                    validateStudentChosenMail(trimmed + studentChosenMailPostfix);
-                  }
-                }}
-                disabled={saving}
-              />
-              <div className="form__field__shadow-input__content" aria-hidden="true">
-                <span className="form__field__shadow-input__input">{studentChosenMailPrefix}</span>
-                <span className="form__field__shadow-input__postfix">{studentChosenMailPostfix}</span>
-              </div>
-            </div>
-          </div>
-        )
-      }
-      <div className={`form__field${privateMailValidationClassName}`}>
-        <label key="label" htmlFor="mail-private">
-          {profileLabels[lang].privateMail}
-          <div className="form-info__hint">
-            {profileLabels[lang].privateMailHint}
-          </div>
-          {renderValidation(privateMailValidationMessages)}
-        </label>
-        <input
-          type="text"
-          id="mail-private"
-          value={privateMail || ''}
-          onChange={(e) => {
-            validatePrivateMail(e.target.value.trim(), privateMailValidationMessages.length);
-          }}
-          onKeyUp={(e) => {
-            if (e.key === 'Enter') {
-              validatePrivateMail(e.target.value.trim());
-            }
-          }}
-          disabled={saving}
-        />
-      </div>
-      <AUSubmitButtonContainerComponent
-        lang={lang}
-        disabled={saving}
-        onSubmit={submit}
-        onCancel={onCancel}
-      />
-    </form>,
-  ];
-};
-
-AUProfileMailComponent.defaultProps = {
-  onSaveAction: (data, callback) => {
-    const putData = async () => {
-      let url = `${window.profileApiUri}/UpdateMailAddresses`;
-      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
-      // Mail is a litte slow...
-      // window.auAuth.setUserContext(window.API_AUID || 0, 'profile-clear-cache', true, () => { }, () => { }, true, window.authenticated);
-    };
-
-    putData();
-  },
-};
-
-AUProfileMailComponent.propTypes = {
-  lang: PropTypes.string.isRequired,
-  routeProps: PropTypes.shape({}).isRequired,
-  path: PropTypes.string.isRequired,
-  studentMailAddress: PropTypes.string.isRequired,
-  studentChosenMailAddress: PropTypes.string.isRequired,
-  workMailAddress: PropTypes.string.isRequired,
-  workMailDomain: PropTypes.string.isRequired,
-  privateMailAddress: PropTypes.string.isRequired,
-  isStudentAdGroupMember: PropTypes.bool.isRequired,
-  onSave: PropTypes.func.isRequired,
-  onSaveAction: PropTypes.func,
-  saving: PropTypes.bool.isRequired,
-  saved: PropTypes.bool.isRequired,
-  dismissMessages: PropTypes.func.isRequired,
-  clear: PropTypes.func.isRequired,
-};
-
-AUProfileMailComponent.displayName = 'AUProfileMailComponent';
-export default AUProfileMailComponent;

package/src/components/profile/AUProfileMobileComponent.js

@@ -1,164 +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, { useEffect, useState } 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 AUProfileMobileComponent = ({
-  lang,
-  routeProps: { history },
-  path,
-  countryCodes,
-  privateMobileNumber,
-  onSave,
-  onSaveAction,
-  saving,
-  saved,
-  dismissMessages,
-  clear,
-}) => {
-  const validationRules = [{
-    message: profileLabels[lang].validMobile,
-    rule: (fieldValue) => fieldValue.trim().match(/^\+[1-9][0-9]{5,14}$/),
-  }];
-
-  const [onCancel] = useProfileForm(saved, history, lang, clear);
-  const [prefix, mobile, setPrefix, setMobile] = useMobilePrefix(splitPhoneNumber, countryCodes, privateMobileNumber);
-  const [mobileValidationMessages, setMobileValidationMessages] = useState([]);
-  const [isMobileValid, setIsMobileValid] = useState(!!privateMobileNumber);
-
-  const validate = (value, alert = true) => {
-    const [valid, messages] = validateForm(lang, prefix + value, validationRules);
-    setMobile(value);
-    setMobileValidationMessages(alert ? messages : []);
-    setIsMobileValid(valid);
-  };
-
-  const submit = (e) => {
-    e.preventDefault();
-    validate(mobile, !isMobileValid);
-    if (isMobileValid) {
-      onSave({
-        privatePhoneNumber: '',
-        privateMobileNumber: prefix + mobile,
-      }, onSaveAction);
-    }
-  };
-
-  let mobileValidationClassName = '';
-  if (!isMobileValid && mobileValidationMessages.length) {
-    mobileValidationClassName = ' form-info--error';
-  } else if (isMobileValid) {
-    mobileValidationClassName = ' form-info--confirmed';
-  }
-
-  useEffect(() => {
-    dismissMessages();
-    scrollTo();
-    document.getElementById('contact-phone').focus();
-  }, []);
-
-  return [
-    <div key="header" className="list-navigator">
-      <h1 className="list-navigator__header">{profileLabels[lang].headerMobile}</h1>
-      <Link className="list-navigator__list-name" to={path}>{profileLabels[lang].headerContainer}</Link>
-    </div>,
-    <form key="form" className="form" noValidate="novalidate">
-      <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${mobileValidationClassName}`}>
-        <label htmlFor="contact-phone">
-          {profileLabels[lang].number}
-          {renderValidation(mobileValidationMessages)}
-        </label>
-        <input
-          type="tel"
-          id="contact-phone"
-          value={mobile}
-          onChange={(e) => {
-            validate(e.target.value.trim(), mobileValidationMessages.length);
-          }}
-          onKeyUp={(e) => {
-            if (e.key === 'Enter') {
-              validate(e.target.value.trim());
-            }
-          }}
-          disabled={saving}
-        />
-      </div>
-      <AUSubmitButtonContainerComponent
-        lang={lang}
-        disabled={saving}
-        onSubmit={submit}
-        onCancel={onCancel}
-      />
-    </form>,
-  ];
-};
-
-AUProfileMobileComponent.defaultProps = {
-  onSaveAction: (data, callback) => {
-    const putData = async () => {
-      let url = `${window.profileApiUri}/UpdatePrivatePhoneNumbers`;
-      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();
-  },
-};
-
-AUProfileMobileComponent.propTypes = {
-  lang: PropTypes.string.isRequired,
-  routeProps: PropTypes.shape({}).isRequired,
-  path: PropTypes.string.isRequired,
-  countryCodes: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
-  privateMobileNumber: 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,
-};
-
-AUProfileMobileComponent.displayName = 'AUProfileMobileComponent';
-export default AUProfileMobileComponent;