@designcrowd/fe-shared-lib 1.0.8-ml-82-27 → 1.0.8-ml-82-1b

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.0.8-ml-82-27",
+  "version": "1.0.8-ml-82-1b",
   "scripts": {
     "start": "npm run storybook",
     "build": "npm run build:css --production",

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

@@ -32,19 +32,19 @@
         }"
       >
         <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">
+          <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">{{ description }}</p>
+          <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"> Email </label>
+            <label for="email" class="tw-sr-only"> {{ emailLabel }} </label>
             <input
               v-model="aEmail"
               name="email"
               :class="{ 'tw-border-error-500': !!emailError }"
               type="email"
-              placeholder="Email address"
+              :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">
@@ -81,16 +81,6 @@ export default {
     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,
@@ -124,6 +114,11 @@ export default {
       required: false,
       default: undefined,
     },
+    hideTitle: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     forgotPasswordContent: {
       type: Object,
       required: false,
@@ -135,10 +130,14 @@ export default {
       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',
+      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: {
@@ -152,6 +151,10 @@ export default {
     isModalMode() {
       return this.onGoBackToSignIn !== undefined;
     },
+    showTitle()
+    {
+      return this.title && !this.hideTitle;
+    },
   },
   watch: {
     email(newValue) {