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

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

@@ -1,198 +1,210 @@
-<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>
+<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="resendPasswordEmailLabel"
+        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="resendPasswordEmailLabel"
+        :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="showTitle" class="tw-text-center tw-text-4xl tw-font-bold tw-mb-10">
+            {{ title }}
+          </h2>
+          <p class="tw-mb-8 tw-text-grayscale-600">{{ modalDescription }}</p>
+          <form id="forgotPassword" ref="forgotPasswordForm" method="post" @submit="validate">
+            <input type="hidden" name="__RequestVerificationToken" :value="antiForgeryToken" />
+            <label for="email" class="tw-sr-only"> {{ emailLabel }} </label>
+            <input
+              v-model="aEmail"
+              name="email"
+              :class="{ 'tw-border-error-500': !!emailError }"
+              type="email"
+              :placeholder="emailAddressPlaceholderLabel"
+              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="resetPasswordLabel"
+              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"
+        >
+          {{ rememberedPasswordLabel }}
+          <button class="tw-text-info-500 tw-cursor-pointer" @click="goBackToLoginClick()">{{ goBackToLoginLabel }}</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: {
+    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,
+    },
+    hideTitle: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    forgotPasswordContent: {
+      type: Object,
+      required: false,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      isLoading: false,
+      aEmail: this.email,
+      emailError: undefined,
+      resendPasswordEmailLabel: this.forgotPasswordContent?.resendPasswordEmailLabel ?? 'RESEND EMAIL',
+      resetPasswordLabel: this.forgotPasswordContent?.resetPasswordLabel ?? 'RESET PASSWORD',
+      rememberedPasswordLabel: this.forgotPasswordContent?.rememberedPasswordLabel ?? 'It\'s ok, I remembered my password',
+      goBackToLoginLabel: this.forgotPasswordContent?.goBackToLoginLabel ?? 'Go back to login',
+      emailAddressPlaceholderLabel: this.forgotPasswordContent?.emailAddressPlaceholderLabel ?? 'Email address',
+      emailLabel: this.forgotPasswordContent?.emailLabel ?? 'Email',
+      modalDescription: this.forgotPasswordContent?.description ?? 'Enter your email below. We will then send a reset-password link to your email address.',
+      title: this.forgotPasswordContent?.title ?? 'Forgot your password?',
+    };
+  },
+  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;
+    },
+    showTitle()
+    {
+      return this.title && !this.hideTitle;
+    },
+  },
+  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>

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

@@ -1,62 +1,68 @@
-<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">
-      <template #content>
-        <ForgotPassword
-          :title="title"
-          :sign-in-url="signInUrl"
-          :form-background-class="formBackgroundClass"
-          :anti-forgery-token="antiForgeryToken"
-          :hello-bar="helloBar"
-        />
-      </template>
-    </AuthModal>
-  </div>
-</template>
-<script>
-import AuthModal from './AuthModal.vue';
-import ForgotPassword from './ForgotPassword.vue';
-
-export default {
-  components: {
-    AuthModal,
-    ForgotPassword,
-  },
-  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.',
-    },
-    formBackgroundClass: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    signInUrl: {
-      type: String,
-      required: true,
-    },
-    forgotPasswordUrl: {
-      type: String,
-      required: true,
-    },
-    antiForgeryToken: {
-      type: String,
-      required: true,
-    },
-    helloBar: {
-      type: Object,
-      required: false,
-      default: undefined,
-    },
-  },
-};
-</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">
+      <template #content>
+        <ForgotPassword
+          :title="title"
+          :sign-in-url="signInUrl"
+          :form-background-class="formBackgroundClass"
+          :anti-forgery-token="antiForgeryToken"
+          :hello-bar="helloBar"
+          :forgot-password-content="forgotPasswordContent"
+        />
+      </template>
+    </AuthModal>
+  </div>
+</template>
+<script>
+import AuthModal from './AuthModal.vue';
+import ForgotPassword from './ForgotPassword.vue';
+
+export default {
+  components: {
+    AuthModal,
+    ForgotPassword,
+  },
+  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.',
+    },
+    formBackgroundClass: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    signInUrl: {
+      type: String,
+      required: true,
+    },
+    forgotPasswordUrl: {
+      type: String,
+      required: true,
+    },
+    antiForgeryToken: {
+      type: String,
+      required: true,
+    },
+    helloBar: {
+      type: Object,
+      required: false,
+      default: undefined,
+    },
+    forgotPasswordContent: {
+      type: Object,
+      required: false,
+      default: () => {},
+    },
+  },
+};
+</script>