@designcrowd/fe-shared-lib 1.0.8-ml-82-26 → 1.0.8-ml-82-1a

package/package.json

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

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

@@ -5,14 +5,14 @@
       <Button
         variant="secondary"
         size="small"
-        label="RESEND EMAIL"
+        :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="RESEND EMAIL"
+        :label="resendPasswordEmailLabel"
         :full-width="true"
         class="sm:tw-hidden tw-mt-2"
         @on-click="submitForgotPasswordForm"
@@ -38,13 +38,13 @@
           <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>
+            <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">
@@ -53,7 +53,7 @@
             <SubmissionButton
               variant="primary"
               size="medium"
-              label="RESET PASSWORD"
+              :label="resetPasswordLabel"
               label-size="larger"
               :is-loading="isLoading"
               :disabled="isLoading"
@@ -64,8 +64,8 @@
         <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>
+          {{ rememberedPasswordLabel }}
+          <button class="tw-text-info-500 tw-cursor-pointer" @click="goBackToLoginClick()">{{ goBackToLoginLabel }}</button>
         </p>
       </div>
     </div>
@@ -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,12 +114,25 @@ export default {
       required: false,
       default: undefined,
     },
+    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',
+      description: 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: {

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

@@ -10,6 +10,7 @@
           :form-background-class="formBackgroundClass"
           :anti-forgery-token="antiForgeryToken"
           :hello-bar="helloBar"
+          :forgot-password-content="forgotPasswordContent"
         />
       </template>
     </AuthModal>
@@ -57,6 +58,11 @@ export default {
       required: false,
       default: undefined,
     },
+    forgotPasswordContent: {
+      type: Object,
+      required: false,
+      default: () => {},
+    },
   },
 };
 </script>