@designcrowd/fe-shared-lib 1.0.0-test-publish

package/src/experiences/components/AuthFlow/Auth.stories.js

@@ -0,0 +1,345 @@
+import SignIn from './SignIn.vue';
+import SignUp from './SignUp.vue';
+import SignUpModal from './SignUpModal.vue';
+import ForgotPassword from './ForgotPassword.vue';
+import ResetPasswordModal from './ResetPasswordModal.vue';
+import ResetPasswordSuccessModal from './ResetPasswordSuccessModal.vue';
+import AuthLegal from './AuthLegal.vue';
+
+export default {
+  title: 'Components/SignIn',
+  component: SignIn,
+};
+
+export const SignInSample = () => {
+  return {
+    components: {
+      SignIn,
+    },
+    template: `
+        <div class="tw-container tw-font-sans">
+            <SignIn
+                sign-up-text="New to BrandCrowd?"
+                sign-up-url="#"
+                login-with-google-url="#"
+                login-with-facebook-url="https://www.facebook.com"
+                terms-of-use-url=""
+                privacy-policy-url=""
+                forgot-password-url="#"
+                anti-forgery-token="#"
+            />
+        </div>
+    `,
+  };
+};
+
+export const SignInEmailLoadingSample = () => {
+  return {
+    components: {
+      SignIn,
+    },
+    template: `
+        <div class="tw-container tw-font-sans">
+            <SignIn
+                sign-up-text="New to BrandCrowd?"
+                sign-up-url="#"
+                login-with-google-url="#"
+                login-with-facebook-url="https://www.facebook.com"
+                terms-of-use-url=""
+                privacy-policy-url=""
+                forgot-password-url="#"
+                anti-forgery-token="#"
+                :email-loading="true"
+            />
+        </div>
+    `,
+  };
+};
+export const SignInFacebookLoadingSample = () => {
+  return {
+    components: {
+      SignIn,
+    },
+    template: `
+        <div class="tw-container tw-font-sans">
+            <SignIn
+                sign-up-text="New to BrandCrowd?"
+                sign-up-url="#"
+                login-with-google-url="#"
+                login-with-facebook-url="https://www.facebook.com"
+                terms-of-use-url=""
+                privacy-policy-url=""
+                forgot-password-url="#"
+                anti-forgery-token="#"
+                :facebook-loading="true"
+            />
+        </div>
+    `,
+  };
+};
+export const SignInGoogleLoadingSample = () => {
+  return {
+    components: {
+      SignIn,
+    },
+    template: `
+        <div class="tw-container tw-font-sans">
+            <SignIn
+                sign-up-text="New to BrandCrowd?"
+                sign-up-url="#"
+                login-with-google-url="#"
+                login-with-facebook-url="https://www.facebook.com"
+                terms-of-use-url=""
+                privacy-policy-url=""
+                forgot-password-url="#"
+                anti-forgery-token="#"
+                :google-loading="true"
+            />
+        </div>
+    `,
+  };
+};
+export const SignInNoPasswordSample = () => {
+  return {
+    components: {
+      SignIn,
+    },
+    methods: {
+      preFacebookLoginHook(callback = () => {}) {
+        callback({
+          antiForgeryToken: 'hellofacebook',
+          returnUrl:
+            '/identity/account/loginwithfacebook?returnUrl=/maker/logo/assignlogodraft?logoDraftToken=d99de525-757f-4514-9459-303813b052cc&returnUrl=%2Fmaker%2Flogo%2F28ce4ec5-cf54-4091-bd3f-eed82bd7115c%2Fdraft%2Fd99de525-757f-4514-9459-303813b052cc%3FsavedDraft%3DTrue&isDownload=False',
+        });
+      },
+      preGoogleLoginHook(callback = () => {}) {
+        callback({
+          antiForgeryToken: 'hellogoogle',
+          returnUrl:
+            '/identity/account/loginwithgoogle?returnUrl=/maker/logo/assignlogodraft?logoDraftToken=d99de525-757f-4514-9459-303813b052cc&returnUrl=%2Fmaker%2Flogo%2F28ce4ec5-cf54-4091-bd3f-eed82bd7115c%2Fdraft%2Fd99de525-757f-4514-9459-303813b052cc%3FsavedDraft%3DTrue&isDownload=False',
+        });
+      },
+    },
+    template: `
+        <div class="tw-container tw-w-1/2 tw-font-sans">
+            <SignIn
+                title="Sign In"
+                description="Enter your email below"
+                sign-up-text="New to BrandCrowd?"
+                sign-up-url=""
+                login-with-google-url="#"
+                login-with-facebook-url="https://www.facebook.com"
+                terms-of-use-url=""
+                privacy-policy-url=""
+                forgot-password-url="#"
+                anti-forgery-token="#"
+                :capture-password="false"
+                :pre-facebook-login-hook="preFacebookLoginHook"
+                :pre-google-login-hook="preGoogleLoginHook"
+            />
+        </div>
+    `,
+  };
+};
+
+export const SignInWithRecommendedActionLinkSample = () => {
+  return {
+    components: {
+      SignIn,
+    },
+    template: `
+        <div class="tw-container tw-w-1/2 tw-font-sans">
+            <SignIn
+                sign-up-text="New to BrandCrowd?"
+                sign-up-url=""
+                login-with-google-url="#"
+                login-with-facebook-url="https://www.facebook.com"
+                terms-of-use-url=""
+                privacy-policy-url=""
+                forgot-password-url="#"
+                anti-forgery-token="#"
+                :hello-bar="{
+                  label: 'A password has not been set on this account. Please set a new password via the Reset Password function.',
+                  variant: 'warning',
+                }"
+                recommended-action-link='/hello'
+            />
+        </div>
+    `,
+  };
+};
+
+export const SignUpSample = () => {
+  return {
+    components: {
+      SignUp,
+    },
+    template: `
+        <div class="tw-container tw-w-1/2 tw-font-sans">
+            <SignUp
+                sign-in-url=""
+                login-with-google-url="#"
+                login-with-facebook-url="#"
+                terms-of-use-url=""
+                privacy-policy-url=""
+                anti-forgery-token="#"
+            />
+        </div>
+    `,
+  };
+};
+
+export const SignUpSampleFacebookDisabled = () => {
+  return {
+    components: {
+      SignUp,
+    },
+    template: `
+        <div class="tw-container tw-w-1/2 tw-font-sans">
+            <SignUp
+                sign-in-url=""
+                login-with-google-url="#"
+                login-with-facebook-url=""
+                terms-of-use-url=""
+                privacy-policy-url=""
+                anti-forgery-token="#"
+            />
+        </div>
+    `,
+  };
+};
+
+export const SignUpSampleGoogleDisabled = () => {
+  return {
+    components: {
+      SignUp,
+    },
+    template: `
+        <div class="tw-container tw-w-1/2 tw-font-sans">
+            <SignUp
+                sign-in-url=""
+                login-with-google-url=""
+                login-with-facebook-url="#"
+                terms-of-use-url=""
+                privacy-policy-url=""
+                anti-forgery-token="#"
+            />
+        </div>
+    `,
+  };
+};
+
+export const SignUpSampleWithError = () => {
+  return {
+    components: {
+      SignUp,
+    },
+    template: `
+        <div class="tw-container tw-w-1/2 tw-font-sans">
+            <SignUp
+                sign-in-url=""
+                login-with-google-url="#"
+                login-with-facebook-url="#"
+                terms-of-use-url=""
+                privacy-policy-url=""
+                anti-forgery-token="#"
+                :hello-bar="{
+                  label: 'Uh oh! We\\'re sorry, something\\'s gone wrong, we were unable to create an account',
+                  variant: 'error',
+                }"
+            />
+        </div>
+    `,
+  };
+};
+
+export const SignUpModalSample = () => {
+  return {
+    components: {
+      SignUpModal,
+    },
+    template: `
+        <div class="tw-container tw-w-1/2 tw-font-sans">
+            <SignUpModal
+                title="Create a free account"
+                sign-in-url=""
+                sign-up-url=""
+                login-with-google-url="#"
+                login-with-facebook-url="#"
+                terms-of-use-url=""
+                privacy-policy-url=""
+                anti-forgery-token="#"
+            />
+        </div>
+    `,
+  };
+};
+
+export const ForgotPasswordSample = () => {
+  return {
+    components: {
+      ForgotPassword,
+    },
+    template: `
+        <div class="tw-container tw-w-1/2 tw-font-sans">
+            <ForgotPassword
+                title="Forgot Password?"
+                sign-in-url=""
+                forgot-password-url=""
+                anti-forgery-token="#"
+            />
+        </div>
+    `,
+  };
+};
+
+export const ResetPasswordModalSample = () => {
+  return {
+    components: {
+      ResetPasswordModal,
+    },
+    template: `
+        <div class="tw-container tw-w-1/2 tw-font-sans">
+            <ResetPasswordModal
+                title="Reset Password"
+                user-name="user@email.com"
+                reset-password-token=""
+                anti-forgery-token="#"
+            />
+        </div>
+    `,
+  };
+};
+
+export const ResetPasswordSuccessModalSample = () => {
+  return {
+    components: {
+      ResetPasswordSuccessModal,
+    },
+    template: `
+        <div class="tw-container tw-w-1/2 tw-font-sans">
+            <ResetPasswordSuccessModal
+                title="Reset Password Success!"
+                sign-in-url=""
+                forgot-password-url=""
+            />
+        </div>
+    `,
+  };
+};
+
+export const AuthLegalSample = () => {
+  return {
+    components: {
+      AuthLegal,
+    },
+    template: `
+        <div class="tw-container tw-max-w-xl tw-font-sans">
+          <AuthLegal
+            :terms-of-use-url="termsOfUseUrl"
+            :privacy-policy-url="privacyPolicyUrl"
+          />
+        </div>
+    `,
+  };
+};

package/src/experiences/components/AuthFlow/AuthCrazyDomains.stories.js

@@ -0,0 +1,60 @@
+import SignIn from './SignIn.vue';
+import AuthLegal from './AuthLegal.vue';
+import themes from './Auth.fixtures';
+
+export default {
+  title: 'Components/SignIn/Crazy Domains',
+  component: SignIn,
+};
+
+export const SignInSample = () => {
+  return {
+    components: {
+      SignIn,
+    },
+    data() {
+      return {
+        themes,
+      };
+    },
+    template: `
+        <div class="tw-container tw-w-1/2 tw-font-sans">
+            <SignIn
+                sign-up-text="New to BrandCrowd?"
+                sign-up-url="#"
+                login-with-google-url="#"
+                login-with-facebook-url="https://www.facebook.com"
+                terms-of-use-url=""
+                privacy-policy-url=""
+                forgot-password-url="#"
+                anti-forgery-token="#"
+                :theme="themes.CRAZY_DOMAINS"
+                :available-themes="themes"
+            />
+        </div>
+    `,
+  };
+};
+
+export const AuthLegalCrazyDomainsSample = () => {
+  return {
+    components: {
+      AuthLegal,
+    },
+    data() {
+      return {
+        themes,
+      };
+    },
+    template: `
+        <div class="tw-container tw-max-w-xl tw-font-sans">
+          <AuthLegal
+            :terms-of-use-url="termsOfUseUrl"
+            :privacy-policy-url="privacyPolicyUrl"
+            theme="crazyDomains"
+            :available-themes="themes"
+          />
+        </div>
+    `,
+  };
+};

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

@@ -0,0 +1,68 @@
+<template>
+  <p class="tw-text-center tw-text-sm tw-mt-4 tw-mb-2 tw-text-grayscale-600">
+    <span v-if="isPartnerTheme">
+      {{ legal.BY_PROCEEDING_TEXT[theme] }}
+      <a :href="termsAndConditionsLink" target="_blank" :class="legal.LINK_CLASSES[theme]">
+        {{ legal.TERMS_AND_CONDITIONS_TEXT[theme] }}
+      </a>
+      and
+      <a :href="privacyPolicyLink" target="_blank" :class="legal.LINK_CLASSES[theme]">
+        {{ legal.PRIVACY_POLICY_TEXT[theme] }}
+      </a>
+    </span>
+    <span v-if="isPartnerTheme"> and BrandCrowd's </span>
+    <span v-else>By proceeding you accept our </span>
+    <a :href="termsOfUseUrl" target="_blank" class="tw-text-info-500" :class="{ 'hover:tw-underline': isDesignCom }"
+      >Terms of Use</a
+    >
+    and
+    <a :href="privacyPolicyUrl" target="_blank" class="tw-text-info-500" :class="{ 'hover:tw-underline': isDesignCom }"
+      >Privacy Policy</a
+    >
+    <span>
+      and agree to receive future updates from {{ isDesignCom ? 'Design.com' : 'BrandCrowd' }}.</span
+    >
+  </p>
+</template>
+
+<script>
+import themeMixin from '../../mixins/themeMixin';
+import { LEGAL } from '../../constants/partner-dictionary-constants';
+
+export default {
+  mixins: [themeMixin],
+  props: {
+    termsOfUseUrl: {
+      type: String,
+      required: true,
+    },
+    privacyPolicyUrl: {
+      type: String,
+      required: true,
+    },
+    isDesignCom: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      legal: LEGAL,
+    };
+  },
+  computed: {
+    termsAndConditionsLink() {
+      if (this.isPartnerTheme) {
+        return LEGAL.TERMS_AND_CONDITIONS_LINK[this.theme];
+      }
+      return this.termsOfUseUrl;
+    },
+    privacyPolicyLink() {
+      if (this.isPartnerTheme) {
+        return LEGAL.PRIVACY_POLICY_LINK[this.theme];
+      }
+      return this.privacyPolicyUrl;
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,39 @@
+<template>
+  <div
+    class="tw-relative tw-h-auto tw-bg-white lg:tw-rounded tw-shadow-md tw-w-full lg:tw-max-w-xl tw-flex-col tw-pt-12"
+  >
+    <button
+      v-if="showCancelButton"
+      class="tw-absolute tw-top-0 tw-right-0 tw-pt-6 tw-pr-6 tw-cursor-pointer"
+      @click="cancel"
+    >
+      <Icon name="close" size="sm" />
+    </button>
+    <div class="tw-flex tw-items-center tw-justify-center tw-flex-col tw-text-center tw-h-auto">
+      <div class="lg:tw-flex tw-items-start tw-justify-center tw-flex-col">
+        <slot name="content" />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import Icon from '../../../../src/atoms/components/Icon/Icon.vue';
+
+export default {
+  components: {
+    Icon,
+  },
+  props: {
+    showCancelButton: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+  methods: {
+    cancel() {
+      this.$emit('on-cancel');
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,198 @@
+<template>
+  <div class="tw-mx-2 sm:tw-mx-8">
+    <div v-if="helloBar" class="tw-relative tw-text-left tw-mt-8">
+      <HelloBar :label="helloBar.label" :description="helloBar.description" :variant="helloBar.variant" />
+      <Button
+        variant="secondary"
+        size="small"
+        label="RESEND EMAIL"
+        class="tw-hidden sm:tw-inline tw-absolute tw-right-2 md:tw-right-6 tw-top-1/2 tw-transform tw--translate-y-1/2"
+        @on-click="submitForgotPasswordForm"
+      />
+      <Button
+        variant="secondary"
+        size="medium"
+        label="RESEND EMAIL"
+        :full-width="true"
+        class="sm:tw-hidden tw-mt-2"
+        @on-click="submitForgotPasswordForm"
+      />
+    </div>
+    <div
+      class="lg:tw-flex tw-items-start tw-justify-center"
+      :class="{
+        'tw-py-8': !isModalMode,
+      }"
+    >
+      <div
+        class="tw-flex tw-items-center tw-justify-center tw-flex-col tw-text-center tw-h-auto"
+        :class="{
+          'tw-bg-white tw-border tw-border-solid tw-border-grayscale-400': !isModalMode,
+          formBackgroundClass,
+        }"
+      >
+        <div class="tw-w-full tw-p-4 md:tw-p-8">
+          <h2 v-if="title" class="tw-text-center tw-text-4xl tw-font-bold tw-mb-2">
+            {{ title }}
+          </h2>
+          <p class="tw-mb-8 tw-text-grayscale-600">{{ description }}</p>
+          <form id="forgotPassword" ref="forgotPasswordForm" method="post" @submit="validate">
+            <input type="hidden" name="__RequestVerificationToken" :value="antiForgeryToken" />
+            <label for="email" class="tw-sr-only"> Email </label>
+            <input
+              v-model="aEmail"
+              name="email"
+              :class="{ 'tw-border-error-500': !!emailError }"
+              type="email"
+              placeholder="Email address"
+              class="email-input tw-mb-3 tw-h-12 tw-bg-no-repeat tw-w-full tw-rounded tw-shadow-inner tw-outline-none tw-py-4 tw-pl-10-important tw-pr-2 tw-text-grayscale-600 tw-border tw-border-grayscale-500 focus:tw-border-grayscale-700"
+            />
+            <p v-if="!!emailError" class="tw-text-error-500 tw-text-sm tw-text-left">
+              {{ emailError }}
+            </p>
+            <SubmissionButton
+              variant="primary"
+              size="medium"
+              label="RESET PASSWORD"
+              label-size="larger"
+              :is-loading="isLoading"
+              :disabled="isLoading"
+            >
+            </SubmissionButton>
+          </form>
+        </div>
+        <p
+          class="tw-w-full tw-border-0 tw-border-t tw-border-solid tw-border-grayscale-400 tw-text-center tw-pt-6 tw-pb-8 tw-text-grayscale-600"
+        >
+          It's ok, I remembered my password
+          <button class="tw-text-info-500 tw-cursor-pointer" @click="goBackToLoginClick()">Go back to login</button>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import HelloBar from '../../../../src/atoms/components/HelloBar/HelloBar.vue';
+import SubmissionButton from './SubmissionButton.vue';
+
+export default {
+  components: {
+    HelloBar,
+    SubmissionButton,
+  },
+  props: {
+    title: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    description: {
+      type: String,
+      required: false,
+      default: 'Enter your email below. We will then send a reset-password link to your email address.',
+    },
+    email: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    formBackgroundClass: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    signInUrl: {
+      type: String,
+      required: true,
+    },
+    antiForgeryToken: {
+      type: String,
+      required: true,
+    },
+    helloBar: {
+      type: Object,
+      required: false,
+      default: undefined,
+    },
+    onGoBackToSignIn: {
+      type: Function,
+      required: false,
+      default: undefined,
+    },
+    submitAction: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+  },
+  data() {
+    return {
+      isLoading: false,
+      aEmail: this.email,
+      emailError: undefined,
+    };
+  },
+  computed: {
+    getRedirectToSignInUrl() {
+      const url = new URL(`https://${window.location.host}${this.signInUrl}`);
+      if (this.aEmail) {
+        url.searchParams.append('initialUserName', this.aEmail);
+      }
+      return url;
+    },
+    isModalMode() {
+      return this.onGoBackToSignIn !== undefined;
+    },
+  },
+  watch: {
+    email(newValue) {
+      this.aEmail = newValue;
+    },
+  },
+  mounted() {
+    this.aEmail = this.email;
+  },
+  methods: {
+    submitForgotPasswordForm() {
+      this.$refs.forgotPasswordForm.submit();
+    },
+    validate(e) {
+      if (this.submitAction) {
+        this.$refs.forgotPasswordForm.action = this.submitAction;
+      }
+      if (this.aEmail) {
+        this.isLoading = true;
+        return true;
+      }
+
+      this.isLoading = false;
+
+      this.emailError = undefined;
+
+      if (!this.aEmail) {
+        this.emailError = 'Please enter a valid email address';
+      }
+
+      e.preventDefault();
+      return false;
+    },
+    async goBackToLoginClick() {
+      if (this.onGoBackToSignIn) {
+        await this.onGoBackToSignIn();
+        return;
+      }
+      window.location.href = this.getRedirectToSignInUrl;
+    },
+  },
+};
+</script>
+<style scoped>
+.email-input {
+  background-image: url(https://dcstatic.com/images/icons/forms/forms-email-58207f9a5c.svg);
+  background-position: top 50% left 0.5rem;
+}
+
+.tw-pl-10-important {
+  padding-left: 2.5rem !important;
+}
+</style>