@designcrowd/fe-shared-lib 1.2.5 → 1.2.6-ml-291-1

package/src/atoms/components/Icon/Icon.vue

@@ -19,9 +19,10 @@
       role="graphics-symbol"
       aria-labelledby="title"
       aria-describedby="desc"
+      :data-id="`${name}-${id}-title`"
     >
-      <title :id="`${name}-${id}-title`" lang="en">{{ title }}</title>
-      <desc :id="`${name}-${id}-desc`" lang="en">{{ description }}</desc>
+      <title v-if="title" :id="`${name}-${id}-title`" lang="en">{{ title }}</title>
+      <desc v-if="description" :id="`${name}-${id}-desc`" lang="en">{{ description }}</desc>
       <component :is="`icon-${iconName}`"></component>
     </svg>
   </div>
@@ -799,7 +800,7 @@ export default {
       return css || null;
     },
     title() {
-      return this.altText || `${this.titleCase(this.name)}`;
+      return this.altText;
     },
     description() {
       return `${this.title} Icon`;

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

@@ -38,6 +38,7 @@
           <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" />
+            <input type="hidden" name="locale" :value="currentLocale" />
             <label for="email" class="tw-sr-only"> {{ emailLabel }} </label>
             <input
               v-model="aEmail"
@@ -72,6 +73,7 @@
   </div>
 </template>
 <script>
+import i18next from 'i18next';
 import HelloBar from '../../../../src/atoms/components/HelloBar/HelloBar.vue';
 import SubmissionButton from './SubmissionButton.vue';
 
@@ -141,6 +143,9 @@ export default {
     };
   },
   computed: {
+    currentLocale() {
+      return i18next.language || 'en-US';
+    },
     getRedirectToSignInUrl() {
       const url = new URL(`https://${window.location.host}${this.signInUrl}`);
       if (this.aEmail) {

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

@@ -13,10 +13,11 @@
             {{ title }}
           </h2>
           <p class="tw-mb-8 tw-text-grayscale-600">{{ description }}</p>
-          <form id="resetPassword" method="post" @submit="validate">
+          <form id="resetPassword" ref="resetPasswordForm" method="post" @submit="validate">
             <input name="__RequestVerificationToken" type="hidden" :value="antiForgeryToken" />
             <input name="userName" type="hidden" :value="userName" />
             <input name="resetPasswordToken" type="hidden" :value="resetPasswordToken" />
+            <input name="locale" type="hidden" :value="currentLocale" />
             <label for="password" class="tw-sr-only">New Password</label>
             <input
               v-model="password"
@@ -25,14 +26,14 @@
               aria-required="true"
               :aria-invalid="!!passwordError"
               autocomplete="new-password"
-              placeholder="New password"
+              :placeholder="newPasswordPlaceholder"
               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>
-            <label for="confirmPassword" class="tw-sr-only"> Confirm Password </label>
+            <label for="confirmPassword" class="tw-sr-only">{{ confirmPasswordLabel }}</label>
             <input
               v-model="confirmPassword"
               name="confirmPassword"
@@ -40,7 +41,7 @@
               aria-required="true"
               :aria-invalid="!!confirmPasswordError"
               autocomplete="off"
-              placeholder="Confirm new password"
+              :placeholder="confirmPasswordPlaceholder"
               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': !!confirmPasswordError }"
             />
@@ -50,7 +51,7 @@
             <SubmissionButton
               variant="primary"
               size="medium"
-              label="UPDATE PASSWORD"
+              :label="updatePasswordLabel"
               label-size="larger"
               :is-loading="isLoading"
               :disabled="isLoading"
@@ -63,6 +64,7 @@
   </div>
 </template>
 <script>
+import i18next from 'i18next';
 import HelloBar from '../../../../src/atoms/components/HelloBar/HelloBar.vue';
 import SubmissionButton from './SubmissionButton.vue';
 
@@ -80,7 +82,7 @@ export default {
     description: {
       type: String,
       required: false,
-      default: 'Enter and confirm your new password',
+      default: undefined,
     },
     userName: {
       type: String,
@@ -104,6 +106,16 @@ export default {
       required: false,
       default: undefined,
     },
+    submitAction: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    resetPasswordContent: {
+      type: Object,
+      required: false,
+      default: () => {},
+    },
   },
   data() {
     return {
@@ -112,10 +124,28 @@ export default {
       confirmPassword: undefined,
       passwordError: undefined,
       confirmPasswordError: undefined,
+
+      title: this.resetPasswordContent?.title,
+      newPasswordLabel: this.resetPasswordContent?.newPasswordLabel ?? 'New Password',
+      newPasswordPlaceholder: this.resetPasswordContent?.newPasswordPlaceholder ?? 'New password',
+      confirmPasswordLabel: this.resetPasswordContent?.confirmPasswordLabel ?? 'Confirm Password',
+      confirmPasswordPlaceholder: this.resetPasswordContent?.confirmPasswordPlaceholder ?? 'Confirm new password',
+      updatePasswordLabel: this.resetPasswordContent?.updatePasswordLabel ?? 'UPDATE PASSWORD',
+      passwordRequiredError: this.resetPasswordContent?.passwordRequiredError ?? 'Please enter a password',
+      passwordsDoNotMatchError: this.resetPasswordContent?.passwordsDoNotMatchError ?? 'Passwords do not match',
+      description: this.resetPasswordContent?.description ?? 'Enter and confirm your new password',
     };
   },
+  computed: {
+    currentLocale() {
+      return i18next.language || 'en-US';
+    },
+  },
   methods: {
     validate(e) {
+      if (this.submitAction) {
+        this.$refs.resetPasswordForm.action = this.submitAction;
+      }
       if (this.password && this.password === this.confirmPassword) {
         this.isLoading = true;
         return true;
@@ -127,9 +157,9 @@ export default {
       this.confirmPasswordError = undefined;
 
       if (!this.password) {
-        this.passwordError = 'Please enter a password';
+        this.passwordError = this.passwordRequiredError;
       } else if (!this.confirmPassword || this.password !== this.confirmPassword) {
-        this.confirmPasswordError = 'Passwords do not match';
+        this.confirmPasswordError = this.passwordsDoNotMatchError;
       }
 
       e.preventDefault();

package/src/useSharedLibTranslate.js

@@ -11,8 +11,8 @@ const relativePathsToTranslationFiles = {
   'pt-PT': () => import('./bundles/bundled-translations.pt-PT.json'),
 };
 
-const setLocaleAsync = async (locale = 'en-US') => {
-  const localeToUse = locale;
+const setSharedLibLocaleAsync = async (locale = 'en-US') => {
+  const localeToUse = locale || 'en-US';
 
   if (!i18next.isInitialized) {
     await i18next.init({
@@ -35,4 +35,4 @@ const tr = (key, valuesToInterpolate = {}) => {
   return translated;
 };
 
-export { setLocaleAsync, tr };
+export { setSharedLibLocaleAsync, tr };