integration-web-core--socle 1.4.2

package/cdp-due--authentication-module-master/src/main/resources/static/javascript/authentication-module.src.js

@@ -0,0 +1,733 @@
+import {Formulaire} from '@mozaic-ds/freemarker/js/modules/_forms.js';
+import 'whatwg-fetch';
+import 'es6-promise';
+import 'formdata-polyfill';
+import 'classlist-polyfill';
+import * as es6promise from 'es6-promise';
+import GenericalLoader from 'integration-web-core--socle/js/assets/modules/_genericalLoader.class';
+import * as tools from '@mozaic-ds/freemarker/js/utilities/_tools.js';
+import config from '@mozaic-ds/freemarker/js/tokens/field.json';
+import { hitEventTms } from 'integration-web-core--socle/js/assets/commons/_tms.js';
+import { cdlEvent, loginEmailFormDisplayEvent, loginByProviderEvent, submitEmailEvent, loginPasswordFormDisplayEvent, formSubmitEvent, forgotPasswordEvent } from './trackingEvents'
+
+// WORKAROUND remove customer from context when entering login form
+sessionStorage &&
+sessionStorage.removeItem &&
+sessionStorage.removeItem('customerSpaceAdminCustomerNumber');
+
+if (window.NodeList && !NodeList.prototype.forEach) {
+  NodeList.prototype.forEach = function (callback, thisArg) {
+    thisArg = thisArg || window;
+    for (let i = 0; i < this.length; i++) {
+      callback.call(thisArg, this[i], i, this);
+    }
+  };
+}
+
+function cleanNotifications(){
+  const notifications = document.querySelectorAll('.js-notification');
+
+  for (const notification of notifications) {
+    notification.classList.add('kl-hidden');
+  }
+}
+
+function debounce(func, timeout = 1000) {
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      func.apply(this, args);
+    }, timeout);
+  };
+}
+
+function testRegex() {
+  const prmField = document.querySelector('.js-email-field input');
+  const regex = new RegExp(prmField.getAttribute('pattern'));
+
+  if (!regex.test(prmField.value)) {
+    document.querySelector('.js-button-continue').disabled = true;
+  } else {
+    document.querySelector('.js-button-continue').disabled = false;
+  }
+}
+
+const processChange = debounce(() => testRegex());
+
+function _turnInvalid(prmField, message) {
+  prmField.classList.remove('is-valid');
+  prmField.classList.add('is-invalid');
+  _manageErrorMsg(prmField, message);
+}
+
+function _manageErrorMsg(prmField, message) {
+  const fieldContainer = tools.getClosest(prmField, `.${config.class}`);
+  const errorMsg = fieldContainer.querySelector('.js-form-error');
+  if (errorMsg) {
+    prmField.removeAttribute('aria-describedby');
+    fieldContainer.removeChild(errorMsg);
+  }
+
+  prmField.insertAdjacentHTML('afterend', _makeError(prmField, message));
+}
+
+function _makeError(prmField, message) {
+  const cssClass = `${
+    prmField.dataset['errorWrapper'] ? prmField.dataset['errorWrapper'] : ''
+  } js-form-error`;
+  prmField.setAttribute('aria-describedby', `${prmField.id}-error`);
+  const tpl = `<span class="${config.class}${config.error} ${cssClass}" id="{{=it.id}}-error">{{=it.msg}}</span>`;
+  return tools.template(tpl, {msg: message, id: prmField.id});
+}
+
+function accountEmail(type, email) {
+
+  let url;
+
+  if (type === 'without-webaccount') {
+    url = 'presignup';
+  } else if (type === 'account-precreate') {
+    url = 'sendActivationEmail';
+  }
+
+  lm.fetch({
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    url: `/services/account/${url}`,
+    body: JSON.stringify({"email": email}),
+    success: (data) => {
+      cleanNotifications();
+
+      if(type  === 'account-precreate'){
+        document
+            .querySelector('.js-account-precreate-confirm-message')
+            .classList.remove('kl-hidden');
+      } else if (type === 'without-webaccount') {
+        document
+            .querySelector('.js-without-webaccount-confirm-message')
+            .classList.remove('kl-hidden');
+      }
+    },
+    error: () => {
+      cleanNotifications();
+
+      document
+          .querySelector('.js-api-error')
+          .classList.remove('kl-hidden');
+    },
+  });
+}
+
+class PasswordInput {
+  constructor(domField, domPasswordForm) {
+
+    const buttonClass = 'password-input-show-button';
+    const buttonActiveClass = `${buttonClass}--active`;
+
+    this.active = false;
+    const input = domField.querySelector('input');
+
+    let timer;
+    let forceBlur = false;
+
+    // Workaround: do not display field error message on blur if forgot password link is clicked
+    const domForgotPassword = domPasswordForm.querySelector('.js-forgot-password');
+
+    domField.addEventListener(
+      'blur',
+      function (e) {
+        if (!forceBlur) {
+          clearTimeout(timer);
+          e.stopImmediatePropagation();
+
+          timer = setTimeout(() => {
+            forceBlur = true;
+            input.dispatchEvent(e);
+          }, 100);
+        }
+
+        forceBlur = false;
+      },
+      true
+    );
+
+    document.addEventListener(
+      'click',
+      function (e) {
+        if (e.target === domForgotPassword) {
+          hitEventTms(
+            domForgotPassword,
+            cdlEvent,
+            JSON.stringify(forgotPasswordEvent)
+          );
+          clearTimeout(timer);
+        }
+      },
+      true
+    );
+
+    const domIcon = domPasswordForm.querySelector('.js-password-input-show');
+    domIcon.classList.add(buttonClass);
+
+    domField.appendChild(domIcon);
+    domField.classList.add('password-input-show-container');
+
+
+    domIcon.addEventListener('click', (e) => {
+      e.preventDefault();
+      this.active = !this.active;
+      domIcon.classList[this.active ? 'add' : 'remove'](buttonActiveClass);
+      input.type = this.active ? 'text' : 'password';
+      input.focus();
+    });
+  }
+}
+
+class Loader {
+  constructor(selector, timeout = 5000) {
+    this.timeout = timeout;
+    this.loader = document.querySelector(selector);
+    const loaderObj = new GenericalLoader();
+    loaderObj.append(this.loader);
+  }
+
+  show() {
+    clearTimeout(this.timer);
+    this.timer = setTimeout(() => {
+      this.hide();
+    }, this.timeout);
+    this.loader.classList.add('open');
+  }
+
+  hide(fn) {
+    clearTimeout(this.timer);
+    this.loader.classList.remove('open');
+    if (fn) {
+      fn();
+    }
+  }
+}
+
+const toQueryString = (params) => {
+  const queryString = Object.keys(params)
+    .map(
+      (key) => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`
+    )
+    .join('&');
+  return queryString;
+};
+
+const signInPath = '/identity/v1/password/login';
+const callbackPath = '/identity/v1/password/callback';
+
+es6promise.polyfill();
+
+const values = require('object.values');
+if (!Object.values) {
+  values.shim();
+}
+
+const AUTH_TYPE = {
+  CLIENT: "CLIENT",
+  COLLAB: "COLLAB",
+  CLIENT_COLLAB: "CLIENT_COLLAB",
+  NONE: "NONE",
+  NO_CUSTOMER_NUMBER: "NO_CUSTOMER_NUMBER",
+  INACTIVE: "INACTIVE",
+  CUSTOMER_WITHOUT_WEBACCOUNT: "CUSTOMER_WITHOUT_WEBACCOUNT",
+  MULTIPLE_ACCOUNTS: "MULTIPLE_ACCOUNTS",
+  WEB_ACCOUNT_EXISTS: "WEB_ACCOUNT_EXISTS"
+};
+
+class EmailForm {
+  constructor(domEmailForm, onEmailChange, signUp, loader, loginOrigin) {
+    this.domEmailForm = domEmailForm;
+    this.form = new Formulaire(domEmailForm);
+    this.domEmailInput = this.domEmailForm.querySelector(
+      '.js-email-field input'
+    );
+
+      if(this.domEmailInput) {
+        hitEventTms(
+          this.domEmailForm,
+          cdlEvent,
+          JSON.stringify(loginEmailFormDisplayEvent(loginOrigin === 'tempo'))
+        );
+      }
+
+    this.domEmailInput.onkeyup = function (e) {
+      processChange(e);
+    };
+
+    this.domEmailInput.onblur = function (e) {
+      if (
+        e.srcElement.classList.contains('is-valid') &&
+        !e.srcElement.classList.contains('is-invalid')
+      ) {
+        document.querySelector('.js-button-continue').disabled = false;
+      } else {
+        document.querySelector('.js-button-continue').disabled = true;
+      }
+    };
+
+    const linksEmail = document.querySelectorAll('.js-email')
+    linksEmail.forEach((link) => {
+      link.addEventListener("click", (e) => {
+        e.preventDefault();
+        const type = e.target.dataset.type
+        const emailValue = this.domEmailInput.value
+        accountEmail(type, emailValue)
+      });
+    });
+
+    this.domGoogleButton =  document.getElementById('js-google-provider');
+    this.domFacebookButton =  document.getElementById('js-facebook-provider');
+    this.domAppleButton =  document.getElementById('js-apple-provider');
+
+    if(this.domGoogleButton != null){
+      const domGoogleButton = this.domGoogleButton;
+      const providerName = this.capitalizeFirstLetter(SocialLoginProvider.GOOGLE);
+      this.domGoogleButton.addEventListener('click',function (event) {
+        event.preventDefault();
+        hitEventTms(
+          domGoogleButton,
+          cdlEvent,
+          JSON.stringify(loginByProviderEvent(providerName))
+        );
+        callSocialLoginBack(SocialLoginProvider.GOOGLE, domEmailForm, loader)
+      });
+    }
+
+    if(this.domFacebookButton != null){
+      const domFacebookButton = this.domFacebookButton;
+      const providerName = this.capitalizeFirstLetter(SocialLoginProvider.FACEBOOK);
+      this.domFacebookButton.addEventListener('click', function (event) {
+        event.preventDefault();
+        hitEventTms(
+          domFacebookButton,
+          cdlEvent,
+          JSON.stringify(loginByProviderEvent(providerName))
+        );
+        callSocialLoginBack(SocialLoginProvider.FACEBOOK, domEmailForm, loader)
+      });
+    }
+
+    if(this.domAppleButton != null){
+      const domAppleButton = this.domAppleButton;
+      const providerName = this.capitalizeFirstLetter(SocialLoginProvider.APPLE);
+      this.domAppleButton.addEventListener('click', function (event) {
+        event.preventDefault();
+        hitEventTms(
+          domAppleButton,
+          cdlEvent,
+          JSON.stringify(loginByProviderEvent(providerName))
+        );
+        callSocialLoginBack(SocialLoginProvider.APPLE, domEmailForm, loader)
+      });
+    }
+
+    domEmailForm.addEventListener("submit", (e) => {
+      e.preventDefault();
+
+      const formData = new FormData(domEmailForm);
+      const email = formData.get('email');
+      const {process} = domEmailForm.dataset;
+
+      loader.show();
+      /*
+      const sendData = new FormData();
+      sendData.append('email', email);
+      sendData.append('X-CSRF-TOKEN', '[CSRF]');
+      */
+
+      lm.fetch({
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        url: '/services/account/check',
+        body: JSON.stringify({email}),
+        success: (data) => {
+
+          hitEventTms(
+            this.domEmailForm.querySelector('[type="submit"]'),
+            cdlEvent,
+            JSON.stringify(submitEmailEvent (loginOrigin === 'tempo'))
+          );
+          cleanNotifications();
+          loader.hide();
+          const result = JSON.parse(data);
+          if (
+            result.accountActivated === false &&
+            result.authType === 'CLIENT'
+          ) {
+            document
+              .querySelector('.js-account-precreate')
+              .classList.remove('kl-hidden');
+            this.domEmailInput.classList.remove('is-valid');
+            this.domEmailInput.classList.add('is-invalid');
+          } else if (process === 'lmpartner' && result.authType === AUTH_TYPE.CLIENT_COLLAB) {
+            onEmailChange(email);
+
+          } else if (process === 'lmpartner' && result.authType === AUTH_TYPE.COLLAB) {
+            signUp(domEmailForm, email);
+
+          } else {
+            switch (result.authType) {
+              case AUTH_TYPE.CLIENT: {
+                onEmailChange(email);
+                break;
+              }
+              case AUTH_TYPE.CLIENT_COLLAB: {
+                onEmailChange(email, true);
+                break;
+              }
+              case AUTH_TYPE.COLLAB: {
+                const {collab_login_url} = domEmailForm.dataset;
+                document.location.replace(collab_login_url);
+                break;
+              }
+              case AUTH_TYPE.NONE: {
+                signUp(domEmailForm, email);
+                break;
+              }
+              case AUTH_TYPE.NO_CUSTOMER_NUMBER: {
+                onEmailChange(email);
+                break;
+              }
+              case AUTH_TYPE.INACTIVE: {
+                document
+                  .querySelector(".js-no-customer-number")
+                  .classList.remove("kl-hidden");
+                this.domEmailInput.classList.remove("is-valid");
+                this.domEmailInput.classList.add("is-invalid");
+                break;
+              }
+              case AUTH_TYPE.CUSTOMER_WITHOUT_WEBACCOUNT: {
+                document
+                  .querySelector(".js-without-webaccount")
+                  .classList.remove("kl-hidden");
+                this.domEmailInput.classList.remove("is-valid");
+                this.domEmailInput.classList.add("is-invalid");
+                break;
+              }
+              case AUTH_TYPE.MULTIPLE_ACCOUNTS: {
+                document
+                  .querySelector(".js-multiple-accounts")
+                  .classList.remove("kl-hidden");
+                this.domEmailInput.classList.remove("is-valid");
+                this.domEmailInput.classList.add("is-invalid");
+                break;
+              }
+              case AUTH_TYPE.WEB_ACCOUNT_EXISTS: {
+                document
+                  .querySelector(".js-multiple-accounts")
+                  .classList.remove("kl-hidden");
+                this.domEmailInput.classList.remove("is-valid");
+                this.domEmailInput.classList.add("is-invalid");
+                break;
+              }
+            }
+          }
+        },
+        error: () => {
+          loader.hide();
+        },
+      });
+
+      return false;
+    });
+  }
+  capitalizeFirstLetter(string) {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+  }
+}
+
+export class PasswordForm {
+  constructor(domPasswordForm, onEmailEdit, loader, loginOrigin) {
+    this.domPasswordForm = domPasswordForm;
+    this.form = new Formulaire(domPasswordForm);
+    this.domEmailEdit = domPasswordForm.querySelector('.js-email-edit');
+    this.domCurrentEmail = domPasswordForm.querySelector('.js-current-email');
+    this.domPasswordField =
+      this.domPasswordForm.querySelector('.js-password-field');
+    this.domPasswordFieldInput = this.domPasswordField.querySelector('input');
+
+    this.passwordErrorText = domPasswordForm.querySelector(
+      '.js-form-password-error-text'
+    ).innerHTML;
+
+    new PasswordInput(
+      this.domPasswordField,
+      this.domPasswordForm
+    );
+
+    this.setEmail = this.setEmail.bind(this);
+
+    const editEmail = () => {
+      this.setEmail();
+      onEmailEdit();
+    }
+
+    this.domEmailEdit.addEventListener('click', (event) => {
+      editEmail()
+    });
+
+    this.domEmailEdit.addEventListener('keypress', (event) => {
+      if(event.key === "Enter") {
+        editEmail()
+      }
+    });
+
+    domPasswordForm.addEventListener('submit', (e) => {
+      e.preventDefault();
+
+      loader.show();
+
+      const {client_id, scope, state, redirect_uri, nonce, r5_base_url} =
+        domPasswordForm.dataset;
+      const formData = new FormData(domPasswordForm);
+
+      const value = {
+        client_id,
+        scope,
+        email: this.email,
+        password: formData.get('password'),
+      };
+
+      if (nonce) {
+        value.nonce = nonce;
+      }
+
+      lm.fetch({
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        url: r5_base_url + signInPath,
+        body: JSON.stringify(value),
+        success: (successString) => {
+          hitEventTms(
+            this.domPasswordForm.querySelector('[type="submit"]'),
+            cdlEvent,
+            JSON.stringify(formSubmitEvent(loginOrigin === 'tempo'))
+          );
+          const result = JSON.parse(successString);
+
+          const callbackParams = {
+            client_id,
+            response_type: 'code',
+            scope,
+            state,
+            redirect_uri,
+            tkn: result.tkn,
+          };
+
+          if (nonce) {
+            callbackParams.nonce = nonce;
+          }
+
+          const callbackUrl = `${r5_base_url + callbackPath}?${toQueryString(
+            callbackParams
+          )}`;
+          window.location.replace(callbackUrl);
+        },
+        error: () => {
+          loader.hide();
+          this.domPasswordFieldInput.value = '';
+          _turnInvalid(this.domPasswordFieldInput, this.passwordErrorText);
+        },
+      });
+
+      return false;
+    });
+  }
+
+  setEmail(email) {
+    if(email){
+      this.email = email;
+    }
+    this.domCurrentEmail.innerHTML = this.email || '';
+    let url = this.domPasswordForm.querySelector('.js-forgot-password').href;
+    let urlObj = new URL(url);
+    urlObj.searchParams.set('email', this.email);
+    this.domPasswordForm.querySelector('.js-forgot-password').href = urlObj.toString();
+  }
+}
+
+const selectButtonClass = 'm-login-form__context-button--selected';
+
+class ContextForm {
+  constructor(domContextForm, onContextChange) {
+    this.domContextForm = domContextForm;
+
+    const domSubmitButton = domContextForm.querySelector(
+      '.js-login-context-submit'
+    );
+    const domContextButtons = domContextForm.querySelectorAll(
+      '.js-login-context-button'
+    );
+
+    domSubmitButton.disabled = true;
+
+    domContextButtons.forEach((button) => {
+      button.addEventListener('click', (e) => {
+        domContextButtons.forEach((item) => {
+          item.classList.remove(selectButtonClass);
+        });
+        e.target.classList.add(selectButtonClass);
+
+        this.context = e.target.dataset.value;
+
+        domSubmitButton.disabled = false;
+      });
+    });
+
+    domContextForm.addEventListener('submit', (e) => {
+      e.preventDefault();
+      onContextChange(this.context);
+    });
+  }
+}
+
+class LoginForm extends lm.Composant {
+  constructor() {
+    super();
+    const loginLoader = new Loader('.js-login-form-loading');
+    this.domContainer = document.querySelector('.js-login-form-container');
+    this.onEmailEdit = this.onEmailEdit.bind(this);
+    this.showPassword = this.showPassword.bind(this);
+    const { login } = this.domContainer.dataset;
+
+    this.passwordForm = new PasswordForm(
+      document.querySelector('form#js-password-form'),
+      this.onEmailEdit,
+      loginLoader,
+      login
+    );
+
+    this.contextForm = new ContextForm(
+      document.querySelector('form#js-context-form'),
+      (context) => {
+        if (context === 'collaborator') {
+          const {collab_login_url} = this.domContainer.dataset;
+          document.location.replace(collab_login_url);
+        } else {
+          this.showPassword(login);
+        }
+      }
+    );
+
+    const onEmailChange = (email, isCollaborator) => {
+      this.passwordForm.setEmail(email);
+      if (isCollaborator) {
+        this.passwordForm.domPasswordForm.classList.add('kl-hidden');
+        this.contextForm.domContextForm.classList.remove('kl-hidden');
+        this.emailForm.domEmailForm.classList.add('kl-hidden');
+      } else {
+        this.showPassword(login);
+      }
+    };
+
+    const signUp = (domEmailForm, emailNotEncoded) => {
+      const {signup_url, process, redirect, state, nonce} = domEmailForm.dataset;
+      const email = encodeURIComponent(emailNotEncoded);
+      const params = {process, redirect, email, state, nonce};
+      const urlParams = Object.keys(params)
+        .filter((key) => !!params[key])
+        .map((key) => `${key}=${params[key]}`)
+        .join('&');
+      const signUpLink = signup_url + (urlParams.length ? `?${urlParams}` : '');
+      document.location.href = signUpLink;
+    };
+
+    this.emailForm = new EmailForm(
+      document.querySelector('form#js-email-form'),
+      onEmailChange,
+      signUp,
+      loginLoader,
+      login
+    );
+  }
+
+  showPassword(loginOrigin) {
+    hitEventTms(
+      window,
+      cdlEvent,
+      JSON.stringify(loginPasswordFormDisplayEvent(loginOrigin === 'tempo'))
+    );
+    this.passwordForm.domPasswordForm.classList.remove('kl-hidden');
+    this.contextForm.domContextForm.classList.add('kl-hidden');
+    this.emailForm.domEmailForm.classList.add('kl-hidden');
+
+    const choucrouteALaSaucisseVegan = document.querySelector('script.dataCommandersAct');
+    choucrouteALaSaucisseVegan.innerHTML = this.getAllTcVarsForShowPasswordFromSelectors(choucrouteALaSaucisseVegan);
+
+    const eventRefresh = new CustomEvent("refreshTcVars", {detail: {}});
+    document.dispatchEvent(eventRefresh);
+  }
+
+  getAllTcVarsForShowPasswordFromSelectors(allTcVars) {
+    const jsonContent = JSON.parse(allTcVars.innerHTML);
+
+    const jsonContentUpdated = jsonContent.map(function (element) {
+      if (element.name !== "cdl_page_name") {
+        return element;
+      } else {
+        return {name: "cdl_page_name", value: "enter password"};
+      }
+    });
+
+    return JSON.stringify(jsonContentUpdated);
+  }
+
+  onEmailEdit() {
+    this.passwordForm.domPasswordForm.classList.add('kl-hidden');
+    this.contextForm.domContextForm.classList.add('kl-hidden');
+    this.emailForm.domEmailForm.classList.remove('kl-hidden');
+  }
+}
+
+class SocialLoginProvider {
+  static get GOOGLE() {
+    return 'google';
+  }
+
+  static get FACEBOOK() {
+    return 'facebook';
+  }
+
+  static get APPLE() {
+    return 'apple';
+  }
+}
+
+function callSocialLoginBack(provider, dom, loader){
+  const {state} = dom.dataset
+  loader.show();
+  lm.fetch({
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    url: '/services/socialLogin/login?state='+state,
+    body: JSON.stringify({provider}),
+    success: (redirectUrl) => {
+      window.location.replace(redirectUrl);
+      loader.hide();
+    },
+    error: (err) => {
+      console.error(err);
+      loader.hide();
+    },
+  });
+
+  return false;
+}
+
+lm.DOMReady(function () {
+  new LoginForm();
+});