@designcrowd/fe-shared-lib 1.0.0 → 1.0.1-6.eng2594

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

@@ -1,419 +1,442 @@
-<template>
-  <div :class="{ 'tw-mx-2 sm:tw-mx-8': !isModal }">
-    <div v-if="helloBar" class="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"
-      :class="{ 'tw-px-2 tw-pb-8': isModal, 'tw-py-8': !isModal }"
-    >
-      <div
-        class="lg:tw-max-w-xl tw-flex tw-items-center tw-justify-center tw-flex-col tw-text-center tw-h-auto"
-        :class="[
-          formBackgroundClass,
-          {
-            'tw-border tw-border-solid tw-border-grayscale-400': !isModal,
-          },
-        ]"
-      >
-        <div
-          class="tw-w-full"
-          :class="{
-            'tw-p-4 md:tw-p-8': !isModal,
-          }"
-        >
-          <h2
-            v-if="title"
-            class="tw-text-center tw-text-4xl tw-font-bold"
-            :class="{
-              'tw-mb-6': !description,
-              'tw-mb-2': description,
-            }"
-          >
-            {{ title }}
-          </h2>
-          <p v-if="description" class="tw-text-center tw-mb-6 tw-text-grayscale-600 tw-mt-0">
-            {{ description }}
-          </p>
-          <div class="tw-flex tw-flex-col">
-            <div>
-              <form id="signin" method="post" @submit="validate">
-                <input name="__RequestVerificationToken" type="hidden" :value="antiForgeryToken" />
-                <label for="userName" class="tw-sr-only"> Email </label>
-                <input
-                  v-model="aUserName"
-                  name="userName"
-                  type="email"
-                  data-test-email-input
-                  aria-required="true"
-                  :aria-invalid="!!userNameError"
-                  autocomplete="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"
-                  :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 v-if="capturePassword" for="password" class="tw-sr-only"> Password </label>
-                <input
-                  v-if="capturePassword"
-                  v-model="password"
-                  name="password"
-                  type="password"
-                  data-test-password-input
-                  aria-required="true"
-                  :aria-invalid="!!passwordError"
-                  autocomplete="current-password"
-                  placeholder="Password"
-                  class="password-input tw-h-12 tw-mb-4 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="capturePassword && !!passwordError" class="tw-text-error-500 tw-text-sm tw-text-left tw-mb-4">
-                  {{ passwordError }}
-                </p>
-                <p v-if="capturePassword" class="tw-w-full tw-text-left tw-mb-4">
-                  <a class="tw-text-info-500 tw-cursor-pointer hover:tw-underline" @click="forgotPasswordClick()">
-                    Forgot Password?
-                  </a>
-                </p>
-                <SubmissionButton
-                  data-test-login-button
-                  variant="primary"
-                  size="medium"
-                  :label="submissionButtonLabel"
-                  :label-size="submissionButtonLabelSize"
-                  :is-loading="emailLoading"
-                  :disabled="emailLoading"
-                >
-                </SubmissionButton>
-              </form>
-              <AuthLegal
-                :terms-of-use-url="termsOfUseUrl"
-                :privacy-policy-url="privacyPolicyUrl"
-                :theme="theme"
-                :available-themes="availableThemes"
-                :is-design-com="isDesignCom"
-              />
-            </div>
-
-            <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-px-4"> or </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>
-            </div>
-            <div>
-              <SocialSignIn
-                :login-with-google-url="loginWithGoogleUrl"
-                :login-with-facebook-url="loginWithFacebookUrl"
-                :anti-forgery-token="antiForgeryToken"
-                :pre-facebook-login-hook="preFacebookLoginHook"
-                :pre-google-login-hook="preGoogleLoginHook"
-                :disabled="isLoading"
-                :facebook-loading="facebookLoading"
-                :google-loading="googleLoading"
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          v-if="isModal === false && !!signUpText && !!signUpUrl"
-          class="tw-order-last 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"
-        >
-          <p>
-            {{ getSignUpText }}
-            <a :href="getSignUpUrl" class="tw-text-info-500" :class="{ 'hover:tw-underline': isDesignCom }">Sign Up</a>
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import HelloBar from '../../../../src/atoms/components/HelloBar/HelloBar.vue';
-import Button from '../../../../src/atoms/components/Button/Button.vue';
-import SubmissionButton from './SubmissionButton.vue';
-import AuthLegal from './AuthLegal.vue';
-import themeMixin from '../../mixins/themeMixin';
-import { SIGN_IN } from '../../constants/partner-dictionary-constants';
-import isValidEmail from '../../helpers/email-validator';
-import SocialSignIn from './SocialSignIn.vue';
-
-export default {
-  components: {
-    HelloBar,
-    Button,
-    SocialSignIn,
-    SubmissionButton,
-    AuthLegal,
-  },
-  mixins: [themeMixin],
-  props: {
-    title: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    description: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    formBackgroundClass: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    signUpText: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    signUpUrl: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    forgotPasswordUrl: {
-      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,
-    },
-    isModal: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    capturePassword: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    emailLoading: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    facebookLoading: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    googleLoading: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    onForgotPassword: {
-      type: Function,
-      required: false,
-      default: undefined,
-    },
-    submissionButtonLabel: {
-      type: String,
-      required: false,
-      default: 'Continue',
-    },
-    isDesignCom: {
-      type: Boolean,
-      default: false,
-    },
-    // hooks
-    preFacebookLoginHook: {
-      type: Function,
-      required: false,
-      default: undefined,
-    },
-    preGoogleLoginHook: {
-      type: Function,
-      required: false,
-      default: undefined,
-    },
-  },
-  data() {
-    return {
-      aUserName: this.initialUserName,
-      password: undefined,
-      userNameError: undefined,
-      passwordError: undefined,
-    };
-  },
-  computed: {
-    isLoading() {
-      return this.emailLoading || this.facebookLoading || this.googleLoading;
-    },
-    submissionButtonLabelLowercase() {
-      return this.submissionButtonLabel.toLowerCase();
-    },
-    getSignUpUrl() {
-      if (typeof window === 'undefined') {
-        return null;
-      }
-
-      const url = new URL(`https://${window.location.host}${this.signUpUrl}`);
-
-      if (this.aUserName) {
-        url.searchParams.append('initialUserName', this.aUserName);
-      }
-      return url;
-    },
-    getForgotPasswordUrl() {
-      if (typeof window === 'undefined') {
-        return null;
-      }
-
-      const url = new URL(`https://${window.location.host}${this.forgotPasswordUrl}`);
-
-      if (this.aUserName) {
-        url.searchParams.append('email', this.aUserName);
-      }
-      return url;
-    },
-    getRedirectToRecommendedActionUrl() {
-      const url = new URL(`https://${window.location.host}${this.recommendedActionLink}`);
-      if (this.aUserName) {
-        url.searchParams.append('email', this.aUserName);
-      }
-      return url?.toString();
-    },
-    submissionButtonLabelSize() {
-      return this.submissionButtonLabel === 'LOGIN' ? 'smaller' : 'medium';
-    },
-    getSignUpText() {
-      if (this.isPartnerTheme) {
-        return SIGN_IN.SIGN_UP_TEXT[this.theme];
-      }
-      return this.signUpText;
-    },
-  },
-  watch: {
-    capturePassword() {
-      this.clearErrorMessages();
-    },
-    initialUserName(newValue) {
-      this.aUserName = newValue;
-    },
-  },
-  methods: {
-    validate(e) {
-      this.clearErrorMessages();
-      if (!this.aUserName || !isValidEmail(this.aUserName)) {
-        this.userNameError = 'Please enter a valid email address';
-        e.preventDefault();
-        return false;
-      }
-
-      if (this.capturePassword && !this.password) {
-        this.passwordError = 'Please enter a password';
-        e.preventDefault();
-        return false;
-      }
-
-      if (this.aUserName && this.isModal) {
-        e.preventDefault();
-
-        if (this.capturePassword && this.password) {
-          this.$emit('sign-in-request-submitted', this.aUserName, this.password);
-        } else {
-          this.$emit('sign-in-request-submitted', this.aUserName);
-        }
-
-        return true;
-      }
-
-      if (this.aUserName && this.password) {
-        return true;
-      }
-
-      e.preventDefault();
-      return false;
-    },
-    forgotPasswordClick() {
-      if (this.onForgotPassword) {
-        this.onForgotPassword(this.aUserName);
-        return;
-      }
-      window.location.href = this.getForgotPasswordUrl;
-    },
-    clearErrorMessages() {
-      this.userNameError = undefined;
-      this.passwordError = undefined;
-    },
-  },
-};
-</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': !isModal }">
+    <div v-if="helloBar" class="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"
+      :class="{ 'tw-px-2 tw-pb-8': isModal, 'tw-py-8': !isModal }"
+    >
+      <div
+        class="lg:tw-max-w-xl tw-flex tw-items-center tw-justify-center tw-flex-col tw-text-center tw-h-auto"
+        :class="[
+          formBackgroundClass,
+          {
+            'tw-border tw-border-solid tw-border-grayscale-400': !isModal,
+          },
+        ]"
+      >
+        <div
+          class="tw-w-full"
+          :class="{
+            'tw-p-4 md:tw-p-8': !isModal,
+          }"
+        >
+          <h2
+            v-if="title"
+            class="tw-text-center tw-text-4xl tw-font-bold"
+            :class="{
+              'tw-mb-6': !description,
+              'tw-mb-2': description,
+            }"
+          >
+            {{ title }}
+          </h2>
+          <p v-if="description" class="tw-text-center tw-mb-6 tw-text-grayscale-600 tw-mt-0">
+            {{ description }}
+          </p>
+          <div class="tw-flex tw-flex-col">
+            <div>
+              <form id="signin" action="/identity/account/signin" 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"
+                  data-test-email-input
+                  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 v-if="capturePassword" for="password" class="tw-sr-only"> {{ passwordPlaceholderLabel }} </label>
+                <input
+                  v-if="capturePassword"
+                  v-model="password"
+                  name="password"
+                  type="password"
+                  data-test-password-input
+                  aria-required="true"
+                  :aria-invalid="!!passwordError"
+                  autocomplete="current-password"
+                  :placeholder="passwordPlaceholderLabel"
+                  class="password-input tw-h-12 tw-mb-4 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="capturePassword && !!passwordError" class="tw-text-error-500 tw-text-sm tw-text-left tw-mb-4">
+                  {{ passwordError }}
+                </p>
+                <p v-if="capturePassword" class="tw-w-full tw-text-left tw-mb-4">
+                  <a class="tw-text-info-500 tw-cursor-pointer hover:tw-underline" @click="forgotPasswordClick()">
+                    {{ forgotPasswordLabel }}
+                  </a>
+                </p>
+                <SubmissionButton
+                  data-test-login-button
+                  variant="primary"
+                  size="medium"
+                  :label="submissionButtonLabel"
+                  :label-size="submissionButtonLabelSize"
+                  :is-loading="emailLoading"
+                  :disabled="emailLoading"
+                >
+                </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>
+
+            <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-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>
+            </div>
+            <div>
+              <SocialSignIn
+                :login-with-google-url="loginWithGoogleUrl"
+                :login-with-facebook-url="loginWithFacebookUrl"
+                :anti-forgery-token="antiForgeryToken"
+                :pre-facebook-login-hook="preFacebookLoginHook"
+                :pre-google-login-hook="preGoogleLoginHook"
+                :disabled="isLoading"
+                :facebook-loading="facebookLoading"
+                :google-loading="googleLoading"
+                :login-with-google-label="loginWithGoogleLabel"
+                :login-with-facebook-label="loginWithFacebookLabel"
+              />
+            </div>
+          </div>
+        </div>
+        <div
+          v-if="isModal === false && !!signUpText && !!signUpUrl"
+          class="tw-order-last 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"
+        >
+          <p>
+            {{ getSignUpText }}
+            <a :href="signUpUrl" class="tw-text-info-500" :class="{ 'hover:tw-underline': isDesignCom }">{{
+              signUpLabel
+            }}</a>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import HelloBar from '../../../atoms/components/HelloBar/HelloBar.vue';
+import Button from '../../../atoms/components/Button/Button.vue';
+import SubmissionButton from './SubmissionButton.vue';
+import AuthLegal from './AuthLegal.vue';
+import themeMixin from '../../mixins/themeMixin';
+import { SIGN_IN } from '../../constants/partner-dictionary-constants';
+import isValidEmail from '../../helpers/email-validator';
+import SocialSignIn from './SocialSignIn.vue';
+
+export default {
+  components: {
+    HelloBar,
+    Button,
+    SocialSignIn,
+    SubmissionButton,
+    AuthLegal,
+  },
+  mixins: [themeMixin],
+  props: {
+    title: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    description: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    formBackgroundClass: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    signUpText: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    signUpUrl: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    forgotPasswordUrl: {
+      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,
+    },
+    isModal: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    capturePassword: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    emailLoading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    facebookLoading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    googleLoading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    onForgotPassword: {
+      type: Function,
+      required: false,
+      default: undefined,
+    },
+    submissionButtonLabel: {
+      type: String,
+      required: false,
+      default: 'Continue',
+    },
+    isDesignCom: {
+      type: Boolean,
+      default: false,
+    },
+    // hooks
+    preFacebookLoginHook: {
+      type: Function,
+      required: false,
+      default: undefined,
+    },
+    preGoogleLoginHook: {
+      type: Function,
+      required: false,
+      default: undefined,
+    },
+    termsAndConditions: {
+      type: Object,
+      required: false,
+      default: undefined,
+    },
+    termsAndConditionsContentKeyPath: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    signInContent: {
+      type: Object,
+      required: false,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      aUserName: this.initialUserName,
+      password: undefined,
+      userNameError: undefined,
+      passwordError: undefined,
+      loginWithGoogleLabel: this.signInContent.loginWithGoogleLabel,
+      loginWithFacebookLabel: this.signInContent.loginWithFacebookLabel,
+      invalidUsernameErrorLabel: this.signInContent.invalidUsernameErrorLabel ?? 'Please enter a valid email address',
+      missingPasswordErrorLabel: this.signInContent.missingPasswordErrorLabel ?? 'Please enter a password',
+      emailLabel: this.signInContent.emailLabel ?? 'Email',
+      emailPlaceholderLabel: this.signInContent.emailPlaceholderLabel ?? 'Email Address',
+      passwordPlaceholderLabel: this.signInContent.passwordPlaceholderLabel ?? 'Password',
+      forgotPasswordLabel: this.signInContent.forgotPasswordLabel ?? 'Forgot Password?',
+      orLabel: this.signInContent.orLabel ?? 'or',
+      signUpLabel: this.signInContent.signUpLabel ?? 'Sign Up',
+    };
+  },
+  computed: {
+    isLoading() {
+      return this.emailLoading || this.facebookLoading || this.googleLoading;
+    },
+    submissionButtonLabelLowercase() {
+      return this.submissionButtonLabel.toLowerCase();
+    },
+    getForgotPasswordUrl() {
+      if (typeof window === 'undefined') {
+        return null;
+      }
+
+      const url = new URL(`https://${window.location.host}${this.forgotPasswordUrl}`);
+
+      if (this.aUserName) {
+        url.searchParams.append('email', this.aUserName);
+      }
+      return url;
+    },
+    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();
+    },
+    submissionButtonLabelSize() {
+      return this.submissionButtonLabel === 'LOGIN' ? 'smaller' : 'medium';
+    },
+    getSignUpText() {
+      if (this.isPartnerTheme) {
+        return SIGN_IN.SIGN_UP_TEXT[this.theme];
+      }
+      return this.signUpText;
+    },
+  },
+  watch: {
+    capturePassword() {
+      this.clearErrorMessages();
+    },
+    initialUserName(newValue) {
+      this.aUserName = newValue;
+    },
+  },
+  methods: {
+    validate(e) {
+      this.clearErrorMessages();
+      if (!this.aUserName || !isValidEmail(this.aUserName)) {
+        this.userNameError = this.invalidUsernameErrorLabel;
+        e.preventDefault();
+        return false;
+      }
+
+      if (this.capturePassword && !this.password) {
+        this.passwordError = this.missingPasswordErrorLabel;
+        e.preventDefault();
+        return false;
+      }
+
+      if (this.aUserName && this.isModal) {
+        e.preventDefault();
+
+        if (this.capturePassword && this.password) {
+          this.$emit('sign-in-request-submitted', this.aUserName, this.password);
+        } else {
+          this.$emit('sign-in-request-submitted', this.aUserName);
+        }
+
+        return true;
+      }
+
+      if (this.aUserName && this.password) {
+        return true;
+      }
+
+      e.preventDefault();
+      return false;
+    },
+    forgotPasswordClick() {
+      if (this.onForgotPassword) {
+        this.onForgotPassword(this.aUserName);
+        return;
+      }
+      window.location.href = this.getForgotPasswordUrl;
+    },
+    clearErrorMessages() {
+      this.userNameError = undefined;
+      this.passwordError = undefined;
+    },
+  },
+};
+</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>