@designcrowd/fe-shared-lib 1.3.4 → 1.3.5-textarea-ssr-fix

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.3.4",
+  "version": "1.3.5-textarea-ssr-fix",
   "scripts": {
     "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",

package/src/atoms/components/Textarea/Textarea.vue

@@ -96,6 +96,11 @@ export default {
       }
     },
     autoFitToContent() {
+      // Guard against server-side rendering where document is not available
+      if (typeof document === 'undefined' || typeof window === 'undefined') {
+        return;
+      }
+
       setTimeout(() => {
         const textarea = document.getElementById(`scl-input-${this.id}`);
         if (textarea) {

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

@@ -150,7 +150,7 @@ export default {
     getRedirectToSignInUrl() {
       const url = new URL(`https://${window.location.host}${this.signInUrl}`);
       if (this.aEmail) {
-        url.searchParams.append('initialUserName', this.aEmail);
+        url.searchParams.set('initialUserName', this.aEmail);
       }
       return url;
     },

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

@@ -1,13 +1,13 @@
 <template>
   <div :class="{ 'tw-mx-2 sm:tw-mx-8': !isModal }">
-    <div v-if="helloBar" class="tw-text-left tw-mt-8">
+    <div v-if="helloBar" class="tw-text-left tw-mt-2 tw-mb-2">
       <HelloBar :label="helloBar.label" :description="helloBar.description" :variant="helloBar.variant">
         <template #cta>
           <Button
             v-if="recommendedActionLink"
             variant="secondary"
             size="small"
-            label="RESET PASSWORD"
+            :label="resetPasswordButtonLabel"
             class="tw-hidden sm:tw-inline"
             :url="getRedirectToRecommendedActionUrl"
           />
@@ -15,7 +15,7 @@
             v-if="recommendedActionLink"
             variant="secondary"
             size="medium"
-            label="RESET PASSWORD"
+            :label="resetPasswordButtonLabel"
             :full-width="true"
             class="sm:tw-hidden tw-mt-2"
             :url="getRedirectToRecommendedActionUrl"
@@ -63,7 +63,7 @@
                 <input
                   v-model="aUserName"
                   name="userName"
-                  type="email"
+                  type="text"
                   data-test-email-input
                   aria-required="true"
                   :aria-invalid="!!userNameError"
@@ -327,6 +327,7 @@ export default {
       emailPlaceholderLabel: this.signInContent.emailPlaceholderLabel ?? 'Email Address',
       passwordPlaceholderLabel: this.signInContent.passwordPlaceholderLabel ?? 'Password',
       forgotPasswordLabel: this.signInContent.forgotPasswordLabel ?? 'Forgot Password?',
+      resetPasswordButtonLabel: this.signInContent.resetPasswordButtonLabel ?? 'RESET PASSWORD',
       orLabel: this.signInContent.orLabel ?? 'or',
       signUpLabel: this.signInContent.signUpLabel ?? 'Sign Up',
     };
@@ -349,7 +350,7 @@ export default {
       const url = new URL(`https://${window.location.host}${this.forgotPasswordUrl}`);
 
       if (this.aUserName) {
-        url.searchParams.append('email', this.aUserName);
+        url.searchParams.set('email', this.aUserName);
       }
       return url;
     },
@@ -360,7 +361,7 @@ export default {
 
       const url = new URL(`https://${window.location.host}${this.recommendedActionLink}`);
       if (this.aUserName) {
-        url.searchParams.append('email', this.aUserName);
+        url.searchParams.set('email', this.aUserName);
       }
       return url?.toString();
     },
@@ -395,8 +396,10 @@ export default {
       this.clearErrorMessages();
     },
     initialUserName(newValue) {
-      this.aUserName = newValue;
-    },
+      if (newValue && newValue !== this.aUserName) {
+        this.aUserName = newValue;
+      }
+    }
   },
   methods: {
     validate(e) {

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

@@ -7,7 +7,7 @@
             v-if="recommendedActionLink"
             variant="secondary"
             size="small"
-            label="RESET PASSWORD"
+            :label="resetPasswordButtonLabel"
             class="tw-hidden sm:tw-inline"
             :url="getRedirectToRecommendedActionUrl"
           />
@@ -15,7 +15,7 @@
             v-if="recommendedActionLink"
             variant="secondary"
             size="medium"
-            label="RESET PASSWORD"
+            :label="resetPasswordButtonLabel"
             :full-width="true"
             class="sm:tw-hidden tw-mt-2"
             :url="getRedirectToRecommendedActionUrl"
@@ -39,7 +39,7 @@
             <input
               v-model="aUserName"
               name="userName"
-              type="email"
+              type="text"
               aria-required="true"
               :aria-invalid="!!userNameError"
               autocomplete="”email”"
@@ -117,6 +117,7 @@ import SocialSignIn from './SocialSignIn.vue';
 import SubmissionButton from './SubmissionButton.vue';
 import AuthLegal from './AuthLegal.vue';
 import themeMixin from '../../mixins/themeMixin';
+import isValidEmail from '../../helpers/email-validator';
 import { getCurrentLocale } from '../../../useSharedLibTranslate';
 
 export default {
@@ -217,6 +218,7 @@ export default {
       alreadyHaveAnAccountLabel: this.signUpContent.alreadyHaveAnAccountLabel ?? 'Already have an account?',
       orLabel: this.signUpContent.orLabel ?? 'or',
       loginLabel: this.signUpContent.loginLabel ?? 'Login',
+      resetPasswordButtonLabel: this.signUpContent.resetPasswordButtonLabel ?? 'RESET PASSWORD',
     };
   },
   computed: {
@@ -237,25 +239,24 @@ export default {
   },
   methods: {
     validate(e) {
-      if (this.aUserName && this.password) {
-        this.isLoading = true;
-        return true;
-      }
-
       this.isLoading = false;
 
       this.userNameError = undefined;
       this.passwordError = undefined;
 
-      if (!this.aUserName) {
+      if (!this.aUserName || !isValidEmail(this.aUserName)) {
         this.userNameError = this.invalidUsernameErrorLabel;
+        e.preventDefault();
+        return false;
       }
       if (!this.password) {
         this.passwordError = this.missingPasswordErrorLabel;
+        e.preventDefault();
+        return false;
       }
 
-      e.preventDefault();
-      return false;
+      this.isLoading = true;
+      return true;
     },
   },
 };