@designcrowd/fe-shared-lib 1.5.6 → 1.5.7-eng-3522

package/src/experiences/components/AuthFlow/SignUpModal.vue

@@ -1,90 +1,90 @@
-<template>
-  <div
-    class="tw-fixed tw-w-full tw-h-full tw-z-50 tw-top-0 tw-left-0 tw-bg-black tw-bg-opacity-80 lg:tw-flex tw-items-start tw-justify-center lg:tw-pt-20"
-  >
-    <AuthModal :show-cancel-button="true" :form-background-class="formBackgroundClass">
-      <template #content>
-        <SignUp
-          :title="title"
-          :form-background-class="formBackgroundClass"
-          :sign-up-url="signUpUrl"
-          :sign-in-url="signInUrl"
-          :login-with-google-url="loginWithGoogleUrl"
-          :login-with-facebook-url="loginWithFacebookUrl"
-          :terms-of-use-url="termsOfUseUrl"
-          :privacy-policy-url="privacyPolicyUrl"
-          :anti-forgery-token="antiForgeryToken"
-          :hello-bar="helloBar"
-          :recommended-action-link="recommendedActionLink"
-          :is-design-com="isDesignCom"
-        />
-      </template>
-    </AuthModal>
-  </div>
-</template>
-<script>
-import AuthModal from './AuthModal.vue';
-import SignUp from './SignUp.vue';
-
-export default {
-  components: {
-    AuthModal,
-    SignUp,
-  },
-  props: {
-    title: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    formBackgroundClass: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    signUpUrl: {
-      type: String,
-      required: true,
-    },
-    signInUrl: {
-      type: String,
-      required: true,
-    },
-    loginWithGoogleUrl: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    loginWithFacebookUrl: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    termsOfUseUrl: {
-      type: String,
-      required: true,
-    },
-    privacyPolicyUrl: {
-      type: String,
-      required: true,
-    },
-    antiForgeryToken: {
-      type: String,
-      required: true,
-    },
-    helloBar: {
-      type: Object,
-      required: false,
-      default: undefined,
-    },
-    recommendedActionLink: {
-      type: String,
-      default: undefined,
-    },
-    isDesignCom: {
-      type: Boolean,
-      default: false,
-    },
-  },
-};
-</script>
+<template>
+  <div
+    class="tw-fixed tw-w-full tw-h-full tw-z-50 tw-top-0 tw-left-0 tw-bg-black tw-bg-opacity-80 lg:tw-flex tw-items-start tw-justify-center lg:tw-pt-20"
+  >
+    <AuthModal :show-cancel-button="true" :form-background-class="formBackgroundClass">
+      <template #content>
+        <SignUp
+          :title="title"
+          :form-background-class="formBackgroundClass"
+          :sign-up-url="signUpUrl"
+          :sign-in-url="signInUrl"
+          :login-with-google-url="loginWithGoogleUrl"
+          :login-with-facebook-url="loginWithFacebookUrl"
+          :terms-of-use-url="termsOfUseUrl"
+          :privacy-policy-url="privacyPolicyUrl"
+          :anti-forgery-token="antiForgeryToken"
+          :hello-bar="helloBar"
+          :recommended-action-link="recommendedActionLink"
+          :is-design-com="isDesignCom"
+        />
+      </template>
+    </AuthModal>
+  </div>
+</template>
+<script>
+import AuthModal from './AuthModal.vue';
+import SignUp from './SignUp.vue';
+
+export default {
+  components: {
+    AuthModal,
+    SignUp,
+  },
+  props: {
+    title: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    formBackgroundClass: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    signUpUrl: {
+      type: String,
+      required: true,
+    },
+    signInUrl: {
+      type: String,
+      required: true,
+    },
+    loginWithGoogleUrl: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    loginWithFacebookUrl: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    termsOfUseUrl: {
+      type: String,
+      required: true,
+    },
+    privacyPolicyUrl: {
+      type: String,
+      required: true,
+    },
+    antiForgeryToken: {
+      type: String,
+      required: true,
+    },
+    helloBar: {
+      type: Object,
+      required: false,
+      default: undefined,
+    },
+    recommendedActionLink: {
+      type: String,
+      default: undefined,
+    },
+    isDesignCom: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>

package/src/experiences/components/AuthFlow/SocialSignIn.vue

@@ -1,177 +1,177 @@
-<template>
-  <div class="tw-flex tw-flex-col tw-w-full tw-gap-2">
-    <form
-      v-if="!!formGoogleUrl"
-      ref="googleForm"
-      :action="formGoogleUrl"
-      method="post"
-      @submit="handleGoogleFormSubmit"
-    >
-      <input type="hidden" name="__RequestVerificationToken" :value="antiForgeryToken" />
-      <SocialSignInButton
-        :label="googleLoginLabel"
-        type="google"
-        :disabled="disabled"
-        :is-loading="googleLoading"
-        :url="formGoogleUrl"
-      />
-    </form>
-    <form
-      v-if="!!formFacebookUrl"
-      ref="facebookForm"
-      :action="formFacebookUrl"
-      method="post"
-      class="tw-w-full"
-      @submit="handleFacebookFormSubmit"
-    >
-      <input type="hidden" name="__RequestVerificationToken" :value="antiForgeryToken" />
-      <SocialSignInButton
-        :label="facebookLoginLabel"
-        type="facebook"
-        :disabled="disabled"
-        :is-loading="facebookLoading"
-        :url="formFacebookUrl"
-      />
-    </form>
-  </div>
-</template>
-<script>
-import SocialSignInButton from './SocialSignInButton.vue';
-
-export default {
-  components: {
-    SocialSignInButton,
-  },
-  props: {
-    loginWithGoogleUrl: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    loginWithFacebookUrl: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    antiForgeryToken: {
-      type: String,
-      required: true,
-    },
-    isLoading: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    facebookLoading: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    googleLoading: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    // hooks
-    preFacebookLoginHook: {
-      type: Function,
-      required: false,
-      default: undefined,
-    },
-    preGoogleLoginHook: {
-      type: Function,
-      required: false,
-      default: undefined,
-    },
-    loginWithGoogleLabel: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    loginWithFacebookLabel: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-  },
-  data() {
-    return {
-      formFacebookUrl: this.loginWithFacebookUrl,
-      formGoogleUrl: this.loginWithGoogleUrl,
-      formAntiForgeryToken: this.antiForgeryToken,
-      googleLoginLabel: this.loginWithGoogleLabel ?? 'Continue with Google',
-      facebookLoginLabel: this.loginWithFacebookLabel ?? 'Continue with Facebook',
-    };
-  },
-  methods: {
-    updateFormAndSubmit(type, options = {}) {
-      const { antiForgeryToken, returnUrl } = options;
-
-      if (!antiForgeryToken || !returnUrl) {
-        throw new Error('Missing antiForgeryToken or action in `updateFormAndSubmit`');
-      }
-
-      this.formAntiForgeryToken = antiForgeryToken;
-
-      switch (type) {
-        case 'FACEBOOK':
-          this.formFacebookUrl = this.appendReturnUrl(this.loginWithFacebookUrl, returnUrl);
-          setTimeout(() => this.$refs.facebookForm.submit(), 0);
-          break;
-        case 'GOOGLE':
-          this.formGoogleUrl = this.appendReturnUrl(this.loginWithGoogleUrl, returnUrl);
-          setTimeout(() => this.$refs.googleForm.submit(), 0);
-          break;
-        default:
-          throw new Error(`Function updateFormAndSubmit - Unknown type: ${type}`);
-      }
-    },
-
-    appendReturnUrl(socialLoginUrl, returnUrl) {
-      const separator = socialLoginUrl.indexOf('?') === -1 ? '?' : '&';
-      return `${socialLoginUrl}${separator}returnUrl=${encodeURIComponent(returnUrl)}`;
-    },
-
-    appendMakerTypeStringAndRegistrationSource(socialLoginUrl) {
-      const makerTypeString = window?.location?.search?.match(/[?&]makerTypeString=([^&]*)/);
-      const registrationSource = window?.location?.search?.match(/[?&]registrationSource=([^&]*)/);
-
-      const additionalQueryStrings = [];
-
-      if (makerTypeString && makerTypeString.length > 0) {
-        additionalQueryStrings.push(`makerTypeString=${makerTypeString[1]}`);
-      }
-
-      if (registrationSource && registrationSource.length > 0) {
-        additionalQueryStrings.push(`registrationSource=${registrationSource[1]}`);
-      }
-
-      const separator = socialLoginUrl.indexOf('?') === -1 ? '?' : '&';
-      return `${socialLoginUrl}${separator}${additionalQueryStrings.join('&')}`;
-    },
-
-    handleFacebookFormSubmit(e) {
-      if (this.preFacebookLoginHook) {
-        e.preventDefault();
-        this.preFacebookLoginHook(this.updateFormAndSubmit.bind(this, 'FACEBOOK'));
-        return;
-      }
-      this.formFacebookUrl = this.appendMakerTypeStringAndRegistrationSource(this.formFacebookUrl);
-    },
-
-    handleGoogleFormSubmit(e) {
-      if (this.preGoogleLoginHook) {
-        e.preventDefault();
-        this.preGoogleLoginHook(this.updateFormAndSubmit.bind(this, 'GOOGLE'));
-        return;
-      }
-      this.formGoogleUrl = this.appendMakerTypeStringAndRegistrationSource(this.formGoogleUrl);
-    },
-  },
-};
-</script>
+<template>
+  <div class="tw-flex tw-flex-col tw-w-full tw-gap-2">
+    <form
+      v-if="!!formGoogleUrl"
+      ref="googleForm"
+      :action="formGoogleUrl"
+      method="post"
+      @submit="handleGoogleFormSubmit"
+    >
+      <input type="hidden" name="__RequestVerificationToken" :value="antiForgeryToken" />
+      <SocialSignInButton
+        :label="googleLoginLabel"
+        type="google"
+        :disabled="disabled"
+        :is-loading="googleLoading"
+        :url="formGoogleUrl"
+      />
+    </form>
+    <form
+      v-if="!!formFacebookUrl"
+      ref="facebookForm"
+      :action="formFacebookUrl"
+      method="post"
+      class="tw-w-full"
+      @submit="handleFacebookFormSubmit"
+    >
+      <input type="hidden" name="__RequestVerificationToken" :value="antiForgeryToken" />
+      <SocialSignInButton
+        :label="facebookLoginLabel"
+        type="facebook"
+        :disabled="disabled"
+        :is-loading="facebookLoading"
+        :url="formFacebookUrl"
+      />
+    </form>
+  </div>
+</template>
+<script>
+import SocialSignInButton from './SocialSignInButton.vue';
+
+export default {
+  components: {
+    SocialSignInButton,
+  },
+  props: {
+    loginWithGoogleUrl: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    loginWithFacebookUrl: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    antiForgeryToken: {
+      type: String,
+      required: true,
+    },
+    isLoading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    facebookLoading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    googleLoading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    // hooks
+    preFacebookLoginHook: {
+      type: Function,
+      required: false,
+      default: undefined,
+    },
+    preGoogleLoginHook: {
+      type: Function,
+      required: false,
+      default: undefined,
+    },
+    loginWithGoogleLabel: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    loginWithFacebookLabel: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+  },
+  data() {
+    return {
+      formFacebookUrl: this.loginWithFacebookUrl,
+      formGoogleUrl: this.loginWithGoogleUrl,
+      formAntiForgeryToken: this.antiForgeryToken,
+      googleLoginLabel: this.loginWithGoogleLabel ?? 'Continue with Google',
+      facebookLoginLabel: this.loginWithFacebookLabel ?? 'Continue with Facebook',
+    };
+  },
+  methods: {
+    updateFormAndSubmit(type, options = {}) {
+      const { antiForgeryToken, returnUrl } = options;
+
+      if (!antiForgeryToken || !returnUrl) {
+        throw new Error('Missing antiForgeryToken or action in `updateFormAndSubmit`');
+      }
+
+      this.formAntiForgeryToken = antiForgeryToken;
+
+      switch (type) {
+        case 'FACEBOOK':
+          this.formFacebookUrl = this.appendReturnUrl(this.loginWithFacebookUrl, returnUrl);
+          setTimeout(() => this.$refs.facebookForm.submit(), 0);
+          break;
+        case 'GOOGLE':
+          this.formGoogleUrl = this.appendReturnUrl(this.loginWithGoogleUrl, returnUrl);
+          setTimeout(() => this.$refs.googleForm.submit(), 0);
+          break;
+        default:
+          throw new Error(`Function updateFormAndSubmit - Unknown type: ${type}`);
+      }
+    },
+
+    appendReturnUrl(socialLoginUrl, returnUrl) {
+      const separator = socialLoginUrl.indexOf('?') === -1 ? '?' : '&';
+      return `${socialLoginUrl}${separator}returnUrl=${encodeURIComponent(returnUrl)}`;
+    },
+
+    appendMakerTypeStringAndRegistrationSource(socialLoginUrl) {
+      const makerTypeString = window?.location?.search?.match(/[?&]makerTypeString=([^&]*)/);
+      const registrationSource = window?.location?.search?.match(/[?&]registrationSource=([^&]*)/);
+
+      const additionalQueryStrings = [];
+
+      if (makerTypeString && makerTypeString.length > 0) {
+        additionalQueryStrings.push(`makerTypeString=${makerTypeString[1]}`);
+      }
+
+      if (registrationSource && registrationSource.length > 0) {
+        additionalQueryStrings.push(`registrationSource=${registrationSource[1]}`);
+      }
+
+      const separator = socialLoginUrl.indexOf('?') === -1 ? '?' : '&';
+      return `${socialLoginUrl}${separator}${additionalQueryStrings.join('&')}`;
+    },
+
+    handleFacebookFormSubmit(e) {
+      if (this.preFacebookLoginHook) {
+        e.preventDefault();
+        this.preFacebookLoginHook(this.updateFormAndSubmit.bind(this, 'FACEBOOK'));
+        return;
+      }
+      this.formFacebookUrl = this.appendMakerTypeStringAndRegistrationSource(this.formFacebookUrl);
+    },
+
+    handleGoogleFormSubmit(e) {
+      if (this.preGoogleLoginHook) {
+        e.preventDefault();
+        this.preGoogleLoginHook(this.updateFormAndSubmit.bind(this, 'GOOGLE'));
+        return;
+      }
+      this.formGoogleUrl = this.appendMakerTypeStringAndRegistrationSource(this.formGoogleUrl);
+    },
+  },
+};
+</script>

package/src/experiences/components/AuthFlow/SocialSignInButton.vue

@@ -1,74 +1,74 @@
-<template>
-  <button
-    class="tw-h-full c-social-button tw-w-full tw-bg-white tw-border tw-border-solid tw-border-grayscale-500 tw-content-start tw-cursor-pointer tw-rounded tw-transition-colors tw-duration-300 tw-text-base hover:tw-bg-secondary-100"
-    :class="{
-      'tw-opacity-50': disabled,
-    }"
-    :disabled="disabled"
-  >
-    <span class="tw-flex tw-items-stretch">
-      <span class="tw-flex tw-items-center tw-z-10 tw-flex-none tw-transform -tw-translate-x-px">
-        <Icon :name="`auth-${type}`" class="tw-z-20 tw-py-3 tw-pl-3" size="md" />
-      </span>
-      <span class="tw-relative tw-w-full tw-inline-flex tw-text-grayscale-700">
-        <div
-          v-if="isLoading"
-          class="tw-absolute tw-top-1/2 tw-right-0 tw-transform tw--translate-y-1/2 tw--translate-x-3"
-        >
-          <img class="tw-animate-spin tw-align-middle" :src="loadingSrc" alt="Submitting" />
-        </div>
-        <span class="tw-grow tw-my-auto tw-text-center tw-w-full tw-font-semibold tw-text-sm">{{ label }}</span>
-      </span>
-    </span>
-  </button>
-</template>
-<script>
-import Icon from '../../../atoms/components/Icon/Icon.vue';
-
-const TYPES = {
-  FACEBOOK: 'facebook',
-  GOOGLE: 'google',
-};
-
-export default {
-  components: {
-    Icon,
-  },
-  props: {
-    label: {
-      type: String,
-      required: true,
-    },
-    url: {
-      type: String,
-      required: true,
-    },
-    type: {
-      type: String,
-      required: true,
-    },
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    isLoading: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      types: TYPES,
-      loadingSrc: null,
-    };
-  },
-  mounted() {
-    this.loadingSrc =
-      this.type === TYPES.FACEBOOK
-        ? 'https://bcassetcdn.com/images/icons/loading/loading-fb.svg'
-        : 'https://bcassetcdn.com/images/icons/loading/loading-google.svg';
-  },
-};
-</script>
+<template>
+  <button
+    class="tw-h-full c-social-button tw-w-full tw-bg-white tw-border tw-border-solid tw-border-grayscale-500 tw-content-start tw-cursor-pointer tw-rounded tw-transition-colors tw-duration-300 tw-text-base hover:tw-bg-secondary-100"
+    :class="{
+      'tw-opacity-50': disabled,
+    }"
+    :disabled="disabled"
+  >
+    <span class="tw-flex tw-items-stretch">
+      <span class="tw-flex tw-items-center tw-z-10 tw-flex-none tw-transform -tw-translate-x-px">
+        <Icon :name="`auth-${type}`" class="tw-z-20 tw-py-3 tw-pl-3" size="md" />
+      </span>
+      <span class="tw-relative tw-w-full tw-inline-flex tw-text-grayscale-700">
+        <div
+          v-if="isLoading"
+          class="tw-absolute tw-top-1/2 tw-right-0 tw-transform tw--translate-y-1/2 tw--translate-x-3"
+        >
+          <img class="tw-animate-spin tw-align-middle" :src="loadingSrc" alt="Submitting" />
+        </div>
+        <span class="tw-grow tw-my-auto tw-text-center tw-w-full tw-font-semibold tw-text-sm">{{ label }}</span>
+      </span>
+    </span>
+  </button>
+</template>
+<script>
+import Icon from '../../../atoms/components/Icon/Icon.vue';
+
+const TYPES = {
+  FACEBOOK: 'facebook',
+  GOOGLE: 'google',
+};
+
+export default {
+  components: {
+    Icon,
+  },
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    url: {
+      type: String,
+      required: true,
+    },
+    type: {
+      type: String,
+      required: true,
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isLoading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      types: TYPES,
+      loadingSrc: null,
+    };
+  },
+  mounted() {
+    this.loadingSrc =
+      this.type === TYPES.FACEBOOK
+        ? 'https://bcassetcdn.com/images/icons/loading/loading-fb.svg'
+        : 'https://bcassetcdn.com/images/icons/loading/loading-google.svg';
+  },
+};
+</script>