@designcrowd/fe-shared-lib 1.2.8 → 1.2.9-ali-disabled-2

package/src/atoms/components/ButtonGroup/ButtonGroup.stories.js

@@ -21,6 +21,7 @@ export const Sample = () => {
         {
           label: 'Medium',
           value: 'medium',
+          disabled: true,
         },
         {
           label: 'Large',

package/src/atoms/components/ButtonGroup/ButtonGroup.vue

@@ -10,11 +10,14 @@
       <button
         class="button-group-item tw-text-xs tw-shadow-inner tw-w-full tw-py-2"
         :class="{
-          '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected,
-          '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200 hover:!tw-shadow-info-500': !option.isSelected,
+          '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected && !option.disabled,
+          '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': !option.isSelected && !option.disabled,
+          'hover:!tw-shadow-info-500': !option.isSelected && !option.disabled,
+          'tw-opacity-50 !tw-cursor-not-allowed !tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': option.disabled,
         }"
+        :disabled="option.disabled"
         v-bind="option.dataAttribute ? { [option.dataAttribute]: '' } : {}"
-        @click="$emit('on-select', option)"
+        @click="!option.disabled && $emit('on-select', option)"
       >
         <slot name="content" :option="option"></slot>
       </button>
@@ -35,8 +38,10 @@
       <button
         v-if="variant === 'icon'"
         :class="{
-          '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected,
-          '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200 hover:!tw-shadow-info-500': !option.isSelected,
+          '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected && !option.disabled,
+          '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': !option.isSelected && !option.disabled,
+          'hover:!tw-shadow-info-500': !option.isSelected && !option.disabled,
+          'tw-opacity-50 !tw-cursor-not-allowed !tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': option.disabled,
           'tw-px-2': !option.iconViewBox,
           'tw-px-px':
             option.iconViewBox && !option.isSelected && !option.iconName.includes('display-style') && btnStyleVariant, // TODO - move style logic to computed prop
@@ -45,9 +50,10 @@
           'tw-px-0 tw-py-0': option.iconName.includes('display-style') || btnStyleVariant === 'compressed',
         }"
         :style="option.iconName.includes('display-style') ? { lineHeight: 0 } : {}"
+        :disabled="option.disabled"
         class="tw-text-xs button-group-icon-button tw-shadow-inner"
         v-bind="option.dataAttribute ? { [option.dataAttribute]: '' } : {}"
-        @click="$emit('on-select', option)"
+        @click="!option.disabled && $emit('on-select', option)"
       >
         <div
           :class="{
@@ -67,12 +73,15 @@
       <button
         v-else
         :class="{
-          '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected,
-          '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200 hover:!tw-shadow-info-500': !option.isSelected,
+          '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected && !option.disabled,
+          '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': !option.isSelected && !option.disabled,
+          'hover:!tw-shadow-info-500': !option.isSelected && !option.disabled,
+          'tw-opacity-50 !tw-cursor-not-allowed !tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': option.disabled,
         }"
+        :disabled="option.disabled"
         class="tw-text-xs button-group-image-button tw-shadow-inner"
         v-bind="option.dataAttribute ? { [option.dataAttribute]: '' } : {}"
-        @click="$emit('on-select', option)"
+        @click="!option.disabled && $emit('on-select', option)"
       >
         <img :src="option.src" :alt="option.alt" class="tw-w-full tw-h-full" />
       </button>
@@ -90,11 +99,14 @@
       :key="`button-${option.value}`"
       :class="{
         'tw-ml-2': idx > 0 && !columns,
-        '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected,
-        '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200 hover:!tw-shadow-info-500': !option.isSelected,
+        '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected && !option.disabled,
+        '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': !option.isSelected && !option.disabled,
+        'hover:!tw-shadow-info-500': !option.isSelected && !option.disabled,
+        'tw-opacity-50 !tw-cursor-not-allowed !tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': option.disabled,
       }"
+      :disabled="option.disabled"
       class="tw-text-xs button-group-button tw-shadow-inner"
-      @click="$emit('on-select', option)"
+      @click="!option.disabled && $emit('on-select', option)"
     >
       {{ option.label }}
     </button>

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

@@ -36,10 +36,11 @@
             {{ title }}
           </h2>
           <p class="tw-mb-8 tw-text-grayscale-600">{{ modalDescription }}</p>
-          <form id="forgotPassword" ref="forgotPasswordForm" method="post" @submit="validate">
+          <form id="forgotPassword" ref="forgotPasswordForm" method="post" novalidate @submit="validate">
             <input type="hidden" name="__RequestVerificationToken" :value="antiForgeryToken" />
             <label for="email" class="tw-sr-only"> {{ emailLabel }} </label>
             <input
+              ref="emailInput"
               v-model="aEmail"
               name="email"
               :class="{ 'tw-border-error-500': !!emailError }"
@@ -72,6 +73,7 @@
   </div>
 </template>
 <script>
+import { getCurrentLocale } from '../../../useSharedLibTranslate';
 import HelloBar from '../../../../src/atoms/components/HelloBar/HelloBar.vue';
 import SubmissionButton from './SubmissionButton.vue';
 
@@ -136,11 +138,15 @@ export default {
       goBackToLoginLabel: this.forgotPasswordContent?.goBackToLoginLabel ?? 'Go back to login',
       emailAddressPlaceholderLabel: this.forgotPasswordContent?.emailAddressPlaceholderLabel ?? 'Email address',
       emailLabel: this.forgotPasswordContent?.emailLabel ?? 'Email',
+      emailErrorMessage: this.forgotPasswordContent?.emailErrorMessage ?? 'Please enter a valid email address',
       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: {
+    currentLocale() {
+      return getCurrentLocale();
+    },
     getRedirectToSignInUrl() {
       const url = new URL(`https://${window.location.host}${this.signInUrl}`);
       if (this.aEmail) {
@@ -170,21 +176,27 @@ export default {
     },
     validate(e) {
       if (this.submitAction) {
-        this.$refs.forgotPasswordForm.action = this.submitAction;
-      }
-      if (this.aEmail) {
-        this.isLoading = true;
-        return true;
+        const url = new URL(this.submitAction, window.location.origin);
+        url.searchParams.set('locale', this.currentLocale);
+        this.$refs.forgotPasswordForm.action = url.toString();
       }
 
-      this.isLoading = false;
-
       this.emailError = undefined;
 
       if (!this.aEmail) {
-        this.emailError = 'Please enter a valid email address';
+        this.isLoading = false;
+        this.emailError = this.emailErrorMessage;
+        e.preventDefault();
+        return false;
+      }
+
+      if (this.$refs.emailInput.checkValidity()) {
+        this.isLoading = true;
+        return true;
       }
 
+      this.isLoading = false;
+      this.emailError = this.emailErrorMessage;
       e.preventDefault();
       return false;
     },

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

@@ -13,7 +13,7 @@
             {{ 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" />
@@ -25,14 +25,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 +40,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 +50,7 @@
             <SubmissionButton
               variant="primary"
               size="medium"
-              label="UPDATE PASSWORD"
+              :label="updatePasswordLabel"
               label-size="larger"
               :is-loading="isLoading"
               :disabled="isLoading"
@@ -63,6 +63,7 @@
   </div>
 </template>
 <script>
+import { getCurrentLocale } from '../../../useSharedLibTranslate';
 import HelloBar from '../../../../src/atoms/components/HelloBar/HelloBar.vue';
 import SubmissionButton from './SubmissionButton.vue';
 
@@ -80,7 +81,7 @@ export default {
     description: {
       type: String,
       required: false,
-      default: 'Enter and confirm your new password',
+      default: undefined,
     },
     userName: {
       type: String,
@@ -104,6 +105,16 @@ export default {
       required: false,
       default: undefined,
     },
+    submitAction: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    resetPasswordContent: {
+      type: Object,
+      required: false,
+      default: () => {},
+    },
   },
   data() {
     return {
@@ -112,10 +123,28 @@ export default {
       confirmPassword: undefined,
       passwordError: undefined,
       confirmPasswordError: undefined,
+
+      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',
     };
   },
+  computed: {
+    currentLocale() {
+      return getCurrentLocale();
+    },
+  },
   methods: {
     validate(e) {
+      if (this.submitAction) {
+        const url = new URL(this.submitAction, window.location.origin);
+        url.searchParams.set('locale', this.currentLocale);
+        this.$refs.resetPasswordForm.action = url.toString();
+      }
       if (this.password && this.password === this.confirmPassword) {
         this.isLoading = true;
         return true;
@@ -127,9 +156,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

@@ -55,8 +55,13 @@ const sellDomainNameListModalTr = (key, valuesToInterpolate = {}) =>
 
 const sellDomainNameListTr = (key, valuesToInterpolate = {}) => tr(`sellDomainNameList.${key}`, valuesToInterpolate);
 
+const getCurrentLocale = () => {
+  return i18next.language || 'en-US';
+};
+
 export {
   setSharedLibLocaleAsync,
+  getCurrentLocale,
   tr,
   publishBrandPageModalTr,
   sellDomainNameWidgetTr,
@@ -66,3 +71,4 @@ export {
   sellDomainNameListModalTr,
   sellDomainNameListTr,
 };
+