@designcrowd/fe-shared-lib 1.0.9 → 1.0.10

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

@@ -1,272 +1,272 @@
-<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">
-        <template #cta>
-          <Button
-            v-if="recommendedActionLink"
-            variant="secondary"
-            size="small"
-            label="RESET PASSWORD"
-            class="tw-hidden sm:tw-inline"
-            :url="getRedirectToRecommendedActionUrl"
-          />
-          <Button
-            v-if="recommendedActionLink"
-            variant="secondary"
-            size="medium"
-            label="RESET PASSWORD"
-            :full-width="true"
-            class="sm:tw-hidden tw-mt-2"
-            :url="getRedirectToRecommendedActionUrl"
-          />
-        </template>
-      </HelloBar>
-    </div>
-    <div class="lg:tw-flex tw-items-start tw-justify-center tw-py-8">
-      <div
-        class="lg:tw-max-w-xl tw-flex tw-items-center tw-justify-center tw-flex-col tw-text-center tw-h-auto tw-bg-white tw-border tw-border-solid tw-border-grayscale-400"
-        :class="formBackgroundClass"
-      >
-        <div class="tw-w-full tw-py-8 tw-px-4 md:tw-p-8">
-          <h2 v-if="title" class="tw-text-center tw-text-4xl tw-font-bold tw-mb-6">
-            {{ title }}
-          </h2>
-          <form id="signup" action="/identity/account/signup" method="post" @submit="validate">
-            <input name="__RequestVerificationToken" type="hidden" :value="antiForgeryToken" />
-            <label for="userName" class="tw-sr-only"> {{ emailLabel }} </label>
-            <input
-              v-model="aUserName"
-              name="userName"
-              type="email"
-              aria-required="true"
-              :aria-invalid="!!userNameError"
-              autocomplete="”email”"
-              :placeholder="emailPlaceholderLabel"
-              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"
-              :class="{ 'tw-border-error-500': !!userNameError }"
-            />
-            <p v-if="!!userNameError" class="tw-text-error-500 tw-text-sm tw-text-left tw-mb-4">
-              {{ userNameError }}
-            </p>
-            <label for="password" class="tw-sr-only"> {{ passwordPlaceholderLabel }} </label>
-            <input
-              v-model="password"
-              name="password"
-              type="password"
-              aria-required="true"
-              :aria-invalid="!!passwordError"
-              autocomplete="new-password"
-              :placeholder="passwordPlaceholderLabel"
-              class="password-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"
-              :class="{ 'tw-border-error-500': !!passwordError }"
-            />
-            <p v-if="!!passwordError" class="tw-text-error-500 tw-text-sm tw-text-left tw-mb-4">
-              {{ passwordError }}
-            </p>
-            <SubmissionButton
-              variant="primary"
-              size="medium"
-              :label="submissionButtonLabel"
-              label-size="smaller"
-              :is-loading="isLoading"
-              :disabled="isLoading"
-            >
-            </SubmissionButton>
-          </form>
-          <AuthLegal
-            :terms-of-use-url="termsOfUseUrl"
-            :privacy-policy-url="privacyPolicyUrl"
-            :theme="theme"
-            :available-themes="availableThemes"
-            :is-design-com="isDesignCom"
-            :terms-and-conditions="termsAndConditions"
-            :terms-and-conditions-content-key-path="termsAndConditionsContentKeyPath"
-          />
-          <div v-if="!!loginWithFacebookUrl || !!loginWithGoogleUrl" class="tw-text-center tw-text-grayscale-600">
-            <div class="tw-w-full tw-inline-flex tw-items-center tw-mb-4">
-              <div class="tw-grow tw-h-0 tw-border-0 tw-border-t tw-border-solid tw-border-grayscale-400 tw-px-4"></div>
-              <span class="tw-inline tw-px-4">{{ orLabel }}</span>
-              <div class="tw-grow tw-h-0 tw-border-0 tw-border-t tw-border-solid tw-border-grayscale-400 tw-px-4"></div>
-            </div>
-            <SocialSignIn
-              :login-with-google-url="loginWithGoogleUrl"
-              :login-with-facebook-url="loginWithFacebookUrl"
-              :anti-forgery-token="antiForgeryToken"
-              :login-with-google-label="loginWithGoogleLabel"
-              :login-with-facebook-label="loginWithFacebookLabel"
-            />
-          </div>
-        </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"
-        >
-          {{ alreadyHaveAnAccountLabel }}
-          <a :href="signInUrl" class="tw-text-info-500">{{ loginLabel }}</a>
-        </p>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import HelloBar from '../../../atoms/components/HelloBar/HelloBar.vue';
-import Button from '../../../atoms/components/Button/Button.vue';
-
-import SocialSignIn from './SocialSignIn.vue';
-import SubmissionButton from './SubmissionButton.vue';
-import AuthLegal from './AuthLegal.vue';
-import themeMixin from '../../mixins/themeMixin';
-
-export default {
-  components: {
-    HelloBar,
-    SocialSignIn,
-    SubmissionButton,
-    Button,
-    AuthLegal,
-  },
-  mixins: [themeMixin],
-  props: {
-    title: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    formBackgroundClass: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    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,
-    },
-    initialUserName: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    isDesignCom: {
-      type: Boolean,
-      default: false,
-    },
-    termsAndConditions: {
-      type: Object,
-      required: false,
-      default: undefined,
-    },
-    termsAndConditionsContentKeyPath: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    signUpContent: {
-      type: Object,
-      required: false,
-      default: () => {},
-    },
-  },
-  data() {
-    return {
-      isLoading: false,
-      aUserName: this.initialUserName,
-      password: null,
-      passwordError: undefined,
-      userNameError: null,
-      invalidUsernameErrorLabel: this.signUpContent.invalidUsernameErrorLabel ?? 'Please enter a valid email address',
-      missingPasswordErrorLabel: this.signUpContent.missingPasswordErrorLabel ?? 'Please enter a password',
-      submissionButtonLabel: this.signUpContent.submissionButtonLabel ?? 'Sign Up',
-      loginWithGoogleLabel: this.signUpContent.loginWithGoogleLabel,
-      loginWithFacebookLabel: this.signUpContent.loginWithFacebookLabel,
-      emailLabel: this.signUpContent.emailLabel ?? 'Email',
-      emailPlaceholderLabel: this.signUpContent.emailPlaceholderLabel ?? 'Email',
-      passwordPlaceholderLabel: this.signUpContent.passwordPlaceholderLabel ?? 'Password',
-      alreadyHaveAnAccountLabel: this.signUpContent.alreadyHaveAnAccountLabel ?? 'Already have an account?',
-      orLabel: this.signUpContent.orLabel ?? 'or',
-      loginLabel: this.signUpContent.loginLabel ?? 'Login',
-    };
-  },
-  computed: {
-    getRedirectToRecommendedActionUrl() {
-      if (typeof window === 'undefined') {
-        return null;
-      }
-
-      const url = new URL(`https://${window.location.host}${this.recommendedActionLink}`);
-      if (this.aUserName) {
-        url.searchParams.append('email', this.aUserName);
-      }
-      return url?.toString();
-    },
-  },
-  methods: {
-    validate(e) {
-      if (this.aUserName && this.password) {
-        this.isLoading = true;
-        return true;
-      }
-
-      this.isLoading = false;
-
-      this.userNameError = undefined;
-      this.passwordError = undefined;
-
-      if (!this.aUserName) {
-        this.userNameError = this.invalidUsernameErrorLabel;
-      }
-      if (!this.password) {
-        this.passwordError = this.missingPasswordErrorLabel;
-      }
-
-      e.preventDefault();
-      return false;
-    },
-  },
-};
-</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;
-}
-
-.password-input {
-  background-image: url(https://dcstatic.com/images/icons/forms/forms-password-ff538cd5e4.svg);
-  background-position: top 50% left 0.5rem;
-}
-
-.tw-pl-10-important {
-  padding-left: 2.5rem !important;
-}
-</style>
+<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">
+        <template #cta>
+          <Button
+            v-if="recommendedActionLink"
+            variant="secondary"
+            size="small"
+            label="RESET PASSWORD"
+            class="tw-hidden sm:tw-inline"
+            :url="getRedirectToRecommendedActionUrl"
+          />
+          <Button
+            v-if="recommendedActionLink"
+            variant="secondary"
+            size="medium"
+            label="RESET PASSWORD"
+            :full-width="true"
+            class="sm:tw-hidden tw-mt-2"
+            :url="getRedirectToRecommendedActionUrl"
+          />
+        </template>
+      </HelloBar>
+    </div>
+    <div class="lg:tw-flex tw-items-start tw-justify-center tw-py-8">
+      <div
+        class="lg:tw-max-w-xl tw-flex tw-items-center tw-justify-center tw-flex-col tw-text-center tw-h-auto tw-bg-white tw-border tw-border-solid tw-border-grayscale-400"
+        :class="formBackgroundClass"
+      >
+        <div class="tw-w-full tw-py-8 tw-px-4 md:tw-p-8">
+          <h2 v-if="title" class="tw-text-center tw-text-4xl tw-font-bold tw-mb-6">
+            {{ title }}
+          </h2>
+          <form id="signup" action="/identity/account/signup" method="post" @submit="validate">
+            <input name="__RequestVerificationToken" type="hidden" :value="antiForgeryToken" />
+            <label for="userName" class="tw-sr-only"> {{ emailLabel }} </label>
+            <input
+              v-model="aUserName"
+              name="userName"
+              type="email"
+              aria-required="true"
+              :aria-invalid="!!userNameError"
+              autocomplete="”email”"
+              :placeholder="emailPlaceholderLabel"
+              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"
+              :class="{ 'tw-border-error-500': !!userNameError }"
+            />
+            <p v-if="!!userNameError" class="tw-text-error-500 tw-text-sm tw-text-left tw-mb-4">
+              {{ userNameError }}
+            </p>
+            <label for="password" class="tw-sr-only"> {{ passwordPlaceholderLabel }} </label>
+            <input
+              v-model="password"
+              name="password"
+              type="password"
+              aria-required="true"
+              :aria-invalid="!!passwordError"
+              autocomplete="new-password"
+              :placeholder="passwordPlaceholderLabel"
+              class="password-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"
+              :class="{ 'tw-border-error-500': !!passwordError }"
+            />
+            <p v-if="!!passwordError" class="tw-text-error-500 tw-text-sm tw-text-left tw-mb-4">
+              {{ passwordError }}
+            </p>
+            <SubmissionButton
+              variant="primary"
+              size="medium"
+              :label="submissionButtonLabel"
+              label-size="smaller"
+              :is-loading="isLoading"
+              :disabled="isLoading"
+            >
+            </SubmissionButton>
+          </form>
+          <AuthLegal
+            :terms-of-use-url="termsOfUseUrl"
+            :privacy-policy-url="privacyPolicyUrl"
+            :theme="theme"
+            :available-themes="availableThemes"
+            :is-design-com="isDesignCom"
+            :terms-and-conditions="termsAndConditions"
+            :terms-and-conditions-content-key-path="termsAndConditionsContentKeyPath"
+          />
+          <div v-if="!!loginWithFacebookUrl || !!loginWithGoogleUrl" class="tw-text-center tw-text-grayscale-600">
+            <div class="tw-w-full tw-inline-flex tw-items-center tw-mb-4">
+              <div class="tw-grow tw-h-0 tw-border-0 tw-border-t tw-border-solid tw-border-grayscale-400 tw-px-4"></div>
+              <span class="tw-inline tw-px-4">{{ orLabel }}</span>
+              <div class="tw-grow tw-h-0 tw-border-0 tw-border-t tw-border-solid tw-border-grayscale-400 tw-px-4"></div>
+            </div>
+            <SocialSignIn
+              :login-with-google-url="loginWithGoogleUrl"
+              :login-with-facebook-url="loginWithFacebookUrl"
+              :anti-forgery-token="antiForgeryToken"
+              :login-with-google-label="loginWithGoogleLabel"
+              :login-with-facebook-label="loginWithFacebookLabel"
+            />
+          </div>
+        </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"
+        >
+          {{ alreadyHaveAnAccountLabel }}
+          <a :href="signInUrl" class="tw-text-info-500">{{ loginLabel }}</a>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import HelloBar from '../../../atoms/components/HelloBar/HelloBar.vue';
+import Button from '../../../atoms/components/Button/Button.vue';
+
+import SocialSignIn from './SocialSignIn.vue';
+import SubmissionButton from './SubmissionButton.vue';
+import AuthLegal from './AuthLegal.vue';
+import themeMixin from '../../mixins/themeMixin';
+
+export default {
+  components: {
+    HelloBar,
+    SocialSignIn,
+    SubmissionButton,
+    Button,
+    AuthLegal,
+  },
+  mixins: [themeMixin],
+  props: {
+    title: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    formBackgroundClass: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    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,
+    },
+    initialUserName: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    isDesignCom: {
+      type: Boolean,
+      default: false,
+    },
+    termsAndConditions: {
+      type: Object,
+      required: false,
+      default: undefined,
+    },
+    termsAndConditionsContentKeyPath: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    signUpContent: {
+      type: Object,
+      required: false,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      isLoading: false,
+      aUserName: this.initialUserName,
+      password: null,
+      passwordError: undefined,
+      userNameError: null,
+      invalidUsernameErrorLabel: this.signUpContent.invalidUsernameErrorLabel ?? 'Please enter a valid email address',
+      missingPasswordErrorLabel: this.signUpContent.missingPasswordErrorLabel ?? 'Please enter a password',
+      submissionButtonLabel: this.signUpContent.submissionButtonLabel ?? 'Sign Up',
+      loginWithGoogleLabel: this.signUpContent.loginWithGoogleLabel,
+      loginWithFacebookLabel: this.signUpContent.loginWithFacebookLabel,
+      emailLabel: this.signUpContent.emailLabel ?? 'Email',
+      emailPlaceholderLabel: this.signUpContent.emailPlaceholderLabel ?? 'Email',
+      passwordPlaceholderLabel: this.signUpContent.passwordPlaceholderLabel ?? 'Password',
+      alreadyHaveAnAccountLabel: this.signUpContent.alreadyHaveAnAccountLabel ?? 'Already have an account?',
+      orLabel: this.signUpContent.orLabel ?? 'or',
+      loginLabel: this.signUpContent.loginLabel ?? 'Login',
+    };
+  },
+  computed: {
+    getRedirectToRecommendedActionUrl() {
+      if (typeof window === 'undefined') {
+        return null;
+      }
+
+      const url = new URL(`https://${window.location.host}${this.recommendedActionLink}`);
+      if (this.aUserName) {
+        url.searchParams.append('email', this.aUserName);
+      }
+      return url?.toString();
+    },
+  },
+  methods: {
+    validate(e) {
+      if (this.aUserName && this.password) {
+        this.isLoading = true;
+        return true;
+      }
+
+      this.isLoading = false;
+
+      this.userNameError = undefined;
+      this.passwordError = undefined;
+
+      if (!this.aUserName) {
+        this.userNameError = this.invalidUsernameErrorLabel;
+      }
+      if (!this.password) {
+        this.passwordError = this.missingPasswordErrorLabel;
+      }
+
+      e.preventDefault();
+      return false;
+    },
+  },
+};
+</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;
+}
+
+.password-input {
+  background-image: url(https://dcstatic.com/images/icons/forms/forms-password-ff538cd5e4.svg);
+  background-position: top 50% left 0.5rem;
+}
+
+.tw-pl-10-important {
+  padding-left: 2.5rem !important;
+}
+</style>