@designcrowd/fe-shared-lib 1.0.8 → 1.0.9-ast-card

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.0.8",
+  "version": "1.0.9-ast-card",
   "scripts": {
     "start": "npm run storybook",
     "build": "npm run build:css --production",
@@ -17,6 +17,7 @@
     "docker:publish": "docker build . --build-arg NPM_TOKEN=$NPM_TOKEN"
   },
   "dependencies": {
+    "@nuxtjs/i18n": "^9.2.1",
     "autoprefixer": "10.4.17",
     "axios": "1.6.7",
     "core-js": "3.35.1",

package/public/css/tailwind-brandCrowd.css

@@ -679,6 +679,9 @@ video {
 .theme-brandCrowd .tw-mb-1 {
   margin-bottom: 0.25rem;
 }
+.theme-brandCrowd .tw-mb-10 {
+  margin-bottom: 2.5rem;
+}
 .theme-brandCrowd .tw-mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -1715,6 +1718,9 @@ video {
 .theme-brandCrowd .tw-text-center {
   text-align: center;
 }
+.theme-brandCrowd .tw-align-top {
+  vertical-align: top;
+}
 .theme-brandCrowd .tw-align-middle {
   vertical-align: middle;
 }
@@ -2209,12 +2215,21 @@ video {
 .theme-brandCrowd .md\:tw-w-10 {
     width: 2.5rem;
   }
+.theme-brandCrowd .md\:tw-w-24 {
+    width: 6rem;
+  }
 .theme-brandCrowd .md\:tw-w-auto {
     width: auto;
   }
 .theme-brandCrowd .md\:tw-w-full {
     width: 100%;
   }
+.theme-brandCrowd .md\:tw-max-w-full {
+    max-width: 100%;
+  }
+.theme-brandCrowd .md\:tw-grow {
+    flex-grow: 1;
+  }
 .theme-brandCrowd .md\:tw-grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -2236,6 +2251,9 @@ video {
 .theme-brandCrowd .md\:tw-justify-start {
     justify-content: flex-start;
   }
+.theme-brandCrowd .md\:tw-justify-end {
+    justify-content: flex-end;
+  }
 .theme-brandCrowd .md\:tw-justify-center {
     justify-content: center;
   }
@@ -2278,6 +2296,9 @@ video {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
+.theme-brandCrowd .md\:tw-pl-4 {
+    padding-left: 1rem;
+  }
 .theme-brandCrowd .md\:tw-pr-2 {
     padding-right: 0.5rem;
   }

package/public/css/tailwind-brandPage.css

@@ -679,6 +679,9 @@ video {
 .theme-brandPage .tw-mb-1 {
   margin-bottom: 0.25rem;
 }
+.theme-brandPage .tw-mb-10 {
+  margin-bottom: 2.5rem;
+}
 .theme-brandPage .tw-mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -1563,6 +1566,9 @@ video {
 .theme-brandPage .tw-text-center {
   text-align: center;
 }
+.theme-brandPage .tw-align-top {
+  vertical-align: top;
+}
 .theme-brandPage .tw-align-middle {
   vertical-align: middle;
 }
@@ -1897,12 +1903,21 @@ video {
 .theme-brandPage .md\:tw-w-10 {
     width: 2.5rem;
   }
+.theme-brandPage .md\:tw-w-24 {
+    width: 6rem;
+  }
 .theme-brandPage .md\:tw-w-auto {
     width: auto;
   }
 .theme-brandPage .md\:tw-w-full {
     width: 100%;
   }
+.theme-brandPage .md\:tw-max-w-full {
+    max-width: 100%;
+  }
+.theme-brandPage .md\:tw-grow {
+    flex-grow: 1;
+  }
 .theme-brandPage .md\:tw-grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -1924,6 +1939,9 @@ video {
 .theme-brandPage .md\:tw-justify-start {
     justify-content: flex-start;
   }
+.theme-brandPage .md\:tw-justify-end {
+    justify-content: flex-end;
+  }
 .theme-brandPage .md\:tw-justify-center {
     justify-content: center;
   }
@@ -1966,6 +1984,9 @@ video {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
+.theme-brandPage .md\:tw-pl-4 {
+    padding-left: 1rem;
+  }
 .theme-brandPage .md\:tw-pr-2 {
     padding-right: 0.5rem;
   }

package/public/css/tailwind-crazyDomains.css

@@ -679,6 +679,9 @@ video {
 .theme-crazyDomains .tw-mb-1 {
   margin-bottom: 0.25rem;
 }
+.theme-crazyDomains .tw-mb-10 {
+  margin-bottom: 2.5rem;
+}
 .theme-crazyDomains .tw-mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -1715,6 +1718,9 @@ video {
 .theme-crazyDomains .tw-text-center {
   text-align: center;
 }
+.theme-crazyDomains .tw-align-top {
+  vertical-align: top;
+}
 .theme-crazyDomains .tw-align-middle {
   vertical-align: middle;
 }
@@ -2209,12 +2215,21 @@ video {
 .theme-crazyDomains .md\:tw-w-10 {
     width: 2.5rem;
   }
+.theme-crazyDomains .md\:tw-w-24 {
+    width: 6rem;
+  }
 .theme-crazyDomains .md\:tw-w-auto {
     width: auto;
   }
 .theme-crazyDomains .md\:tw-w-full {
     width: 100%;
   }
+.theme-crazyDomains .md\:tw-max-w-full {
+    max-width: 100%;
+  }
+.theme-crazyDomains .md\:tw-grow {
+    flex-grow: 1;
+  }
 .theme-crazyDomains .md\:tw-grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -2236,6 +2251,9 @@ video {
 .theme-crazyDomains .md\:tw-justify-start {
     justify-content: flex-start;
   }
+.theme-crazyDomains .md\:tw-justify-end {
+    justify-content: flex-end;
+  }
 .theme-crazyDomains .md\:tw-justify-center {
     justify-content: center;
   }
@@ -2278,6 +2296,9 @@ video {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
+.theme-crazyDomains .md\:tw-pl-4 {
+    padding-left: 1rem;
+  }
 .theme-crazyDomains .md\:tw-pr-2 {
     padding-right: 0.5rem;
   }

package/public/css/tailwind-designCom.css

@@ -679,6 +679,9 @@ video {
 .theme-designCom .tw-mb-1 {
   margin-bottom: 0.25rem;
 }
+.theme-designCom .tw-mb-10 {
+  margin-bottom: 2.5rem;
+}
 .theme-designCom .tw-mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -1715,6 +1718,9 @@ video {
 .theme-designCom .tw-text-center {
   text-align: center;
 }
+.theme-designCom .tw-align-top {
+  vertical-align: top;
+}
 .theme-designCom .tw-align-middle {
   vertical-align: middle;
 }
@@ -2209,12 +2215,21 @@ video {
 .theme-designCom .md\:tw-w-10 {
     width: 2.5rem;
   }
+.theme-designCom .md\:tw-w-24 {
+    width: 6rem;
+  }
 .theme-designCom .md\:tw-w-auto {
     width: auto;
   }
 .theme-designCom .md\:tw-w-full {
     width: 100%;
   }
+.theme-designCom .md\:tw-max-w-full {
+    max-width: 100%;
+  }
+.theme-designCom .md\:tw-grow {
+    flex-grow: 1;
+  }
 .theme-designCom .md\:tw-grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -2236,6 +2251,9 @@ video {
 .theme-designCom .md\:tw-justify-start {
     justify-content: flex-start;
   }
+.theme-designCom .md\:tw-justify-end {
+    justify-content: flex-end;
+  }
 .theme-designCom .md\:tw-justify-center {
     justify-content: center;
   }
@@ -2278,6 +2296,9 @@ video {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
+.theme-designCom .md\:tw-pl-4 {
+    padding-left: 1rem;
+  }
 .theme-designCom .md\:tw-pr-2 {
     padding-right: 0.5rem;
   }

package/public/css/tailwind-designCrowd.css

@@ -679,6 +679,9 @@ video {
 .theme-designCrowd .tw-mb-1 {
   margin-bottom: 0.25rem;
 }
+.theme-designCrowd .tw-mb-10 {
+  margin-bottom: 2.5rem;
+}
 .theme-designCrowd .tw-mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -1715,6 +1718,9 @@ video {
 .theme-designCrowd .tw-text-center {
   text-align: center;
 }
+.theme-designCrowd .tw-align-top {
+  vertical-align: top;
+}
 .theme-designCrowd .tw-align-middle {
   vertical-align: middle;
 }
@@ -2209,12 +2215,21 @@ video {
 .theme-designCrowd .md\:tw-w-10 {
     width: 2.5rem;
   }
+.theme-designCrowd .md\:tw-w-24 {
+    width: 6rem;
+  }
 .theme-designCrowd .md\:tw-w-auto {
     width: auto;
   }
 .theme-designCrowd .md\:tw-w-full {
     width: 100%;
   }
+.theme-designCrowd .md\:tw-max-w-full {
+    max-width: 100%;
+  }
+.theme-designCrowd .md\:tw-grow {
+    flex-grow: 1;
+  }
 .theme-designCrowd .md\:tw-grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -2236,6 +2251,9 @@ video {
 .theme-designCrowd .md\:tw-justify-start {
     justify-content: flex-start;
   }
+.theme-designCrowd .md\:tw-justify-end {
+    justify-content: flex-end;
+  }
 .theme-designCrowd .md\:tw-justify-center {
     justify-content: center;
   }
@@ -2278,6 +2296,9 @@ video {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
+.theme-designCrowd .md\:tw-pl-4 {
+    padding-left: 1rem;
+  }
 .theme-designCrowd .md\:tw-pr-2 {
     padding-right: 0.5rem;
   }

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

@@ -0,0 +1,30 @@
+import Card from './Card.vue';
+
+export default {
+  title: 'Components/Card',
+  component: Card,
+};
+
+const data = {
+  components: {
+    Card,
+  },
+};
+
+export const Sample = () => {
+  return {
+    ...data,
+    template: `
+      <Card 
+        :imgUrl="'https://brandcrowd-cdn.s3.amazonaws.com/public/assets/images/icons/publish/dcom-free-url.svg'"
+        title="Purchase Domain"
+        description="Find the perfect domain name for your brand"
+        is-design-com="true"
+      >
+      <template #slug>
+            test
+      </template>
+      </Card>
+    `,
+  };
+};

package/src/atoms/components/Card/Card.vue

@@ -0,0 +1,81 @@
+<template>
+    <div
+      class="tw-bg-white tw-border tw-border-grayscale-500 tw-rounded tw-p-4"
+    >
+      <div class="tw-flex tw-flex-col md:tw-flex-row tw-items-center">
+        <div
+          class="tw-flex tw-flex-col tw-mx-auto tw-max-w-1/3 tw-text-center tw-align-top tw-px-2"
+        >
+          <img
+            :src="imgUrl"
+            alt="icon"
+            class="md:tw-max-w-full"
+          />
+        </div>
+        <div class="tw-flex tw-flex-col tw-px-2 tw-w-full">
+          <div
+            class="tw-flex tw-flex-col md:tw-flex-row tw-text-center md:tw-text-left tw-items-center"
+          >
+            <div
+              class="tw-flex tw-flex-col tw-w-full md:tw-grow tw-text-center md:tw-text-left"
+            >
+              <div>
+                <h6
+                  class="tw-font-bold"
+                  :class="{ 'tw-text-grayscale-800': isDesignCom }"
+                >
+                  {{ title }}
+                </h6>
+                <p class="tw-text-grayscale-600">
+                  {{ description }}
+                </p>
+                <slot name="slug" />
+              </div>
+            </div>
+
+            <div class="tw-w-full md:tw-w-auto md:tw-justify-end md:tw-pl-4">
+              <button
+                class="tw-font-sans tw-border-2 tw-border-solid tw-font-bold tw-text-success-500 tw-uppercase tw-transition-colors tw-duration-300 tw-text-sm tw-py-3 tw-px-4 tw-w-full tw-rounded tw-cursor-pointer tw-border-success-500 tw-bg-white hover:tw-bg-success-100 tw-text-success-500 tw-w-full md:tw-w-24"
+                @click="onClick"
+              >
+                Search
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </template>
+  <script>
+  import Icon from '../Icon/Icon.vue';
+  
+  export default {
+    components: {
+      Icon,
+    },
+    props: {
+      title: {
+        type: String,
+        default: '',
+      },
+      description: {
+        type: String,
+        default: '',
+      },
+      imgUrl: {
+        type: Boolean,
+        default: true,
+      },
+      isDesignCom: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    methods: {
+      onClick() {
+        this.$emit('on-show-domain-list-modal');
+      },
+    },
+  };
+  </script>
+  

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

@@ -1,5 +1,29 @@
 <template>
-  <p class="tw-text-center tw-text-sm tw-mt-4 tw-mb-2 tw-text-grayscale-600">
+  <div v-if="showKeypathTermsAndConditions" class="tw-text-center tw-text-sm tw-mt-4 tw-mb-2 tw-text-grayscale-600">
+    <i18n-t :keypath="termsAndConditionsContentKeyPath">
+      <template #termsOfUseLabel>
+        <a
+          :href="termsAndConditionsLink"
+          target="_blank"
+          class="tw-text-info-500"
+          :class="{ 'hover:tw-underline': isDesignCom }"
+        >
+          {{ termsOfUseLabel }}
+        </a>
+      </template>
+      <template #privacyPolicyLabel>
+        <a
+          :href="privacyPolicyLink"
+          target="_blank"
+          class="tw-text-info-500"
+          :class="{ 'hover:tw-underline': isDesignCom }"
+        >
+          {{ privacyPolicyLabel }}
+        </a>
+      </template>
+    </i18n-t>
+  </div>
+  <p v-else class="tw-text-center tw-text-sm tw-mt-4 tw-mb-2 tw-text-grayscale-600">
     <span v-if="isPartnerTheme">
       {{ legal.BY_PROCEEDING_TEXT[theme] }}
       <a :href="termsAndConditionsLink" target="_blank" :class="legal.LINK_CLASSES[theme]">
@@ -19,9 +43,7 @@
     <a :href="privacyPolicyUrl" target="_blank" class="tw-text-info-500" :class="{ 'hover:tw-underline': isDesignCom }"
       >Privacy Policy</a
     >
-    <span>
-      and agree to receive future updates from {{ isDesignCom ? 'Design.com' : 'BrandCrowd' }}.</span
-    >
+    <span> and agree to receive future updates from {{ isDesignCom ? 'Design.com' : 'BrandCrowd' }}.</span>
   </p>
 </template>
 
@@ -44,10 +66,25 @@ export default {
       type: Boolean,
       default: false,
     },
+    termsAndConditions: {
+      type: Object,
+      required: false,
+      default: undefined,
+    },
+    termsAndConditionsContentKeyPath: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
   },
   data() {
     return {
       legal: LEGAL,
+      termsAndConditionsLabel:
+        this.termsAndConditions?.label ??
+        'By proceeding you accept our {termsOfUseLabel} and {privacyPolicyLabel} and agree to receive future updates from',
+      termsOfUseLabel: this.termsAndConditions?.termsOfUseLabel ?? 'Terms of Use',
+      privacyPolicyLabel: this.termsAndConditions?.privacyPolicyLabel ?? 'Privacy Policy',
     };
   },
   computed: {
@@ -63,6 +100,9 @@ export default {
       }
       return this.privacyPolicyUrl;
     },
+    showKeypathTermsAndConditions() {
+      return !this.isPartnerTheme && !!this.termsAndConditionsContentKeyPath && !!this.termsAndConditions
+    },
   },
 };
 </script>

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"
@@ -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">
@@ -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,30 @@ export default {
       required: false,
       default: undefined,
     },
+    hideTitle: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    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',
+      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: {
@@ -143,6 +151,10 @@ export default {
     isModalMode() {
       return this.onGoBackToSignIn !== undefined;
     },
+    showTitle()
+    {
+      return this.title && !this.hideTitle;
+    },
   },
   watch: {
     email(newValue) {

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>

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

@@ -57,9 +57,9 @@
           </p>
           <div class="tw-flex tw-flex-col">
             <div>
-              <form id="signin" method="post" @submit="validate">
+              <form id="signin" action="/identity/account/signin" method="post" @submit="validate">
                 <input name="__RequestVerificationToken" type="hidden" :value="antiForgeryToken" />
-                <label for="userName" class="tw-sr-only"> Email </label>
+                <label for="userName" class="tw-sr-only"> {{ emailLabel }} </label>
                 <input
                   v-model="aUserName"
                   name="userName"
@@ -68,14 +68,14 @@
                   aria-required="true"
                   :aria-invalid="!!userNameError"
                   autocomplete="email"
-                  placeholder="Email address"
+                  :placeholder="emailPlaceholderLabel"
                   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"
                   :class="{ 'tw-border-error-500': !!userNameError }"
                 />
                 <p v-if="!!userNameError" class="tw-text-error-500 tw-text-sm tw-text-left tw-mb-4">
                   {{ userNameError }}
                 </p>
-                <label v-if="capturePassword" for="password" class="tw-sr-only"> Password </label>
+                <label v-if="capturePassword" for="password" class="tw-sr-only"> {{ passwordPlaceholderLabel }} </label>
                 <input
                   v-if="capturePassword"
                   v-model="password"
@@ -85,7 +85,7 @@
                   aria-required="true"
                   :aria-invalid="!!passwordError"
                   autocomplete="current-password"
-                  placeholder="Password"
+                  :placeholder="passwordPlaceholderLabel"
                   class="password-input tw-h-12 tw-mb-4 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 }"
                 />
@@ -94,7 +94,7 @@
                 </p>
                 <p v-if="capturePassword" class="tw-w-full tw-text-left tw-mb-4">
                   <a class="tw-text-info-500 tw-cursor-pointer hover:tw-underline" @click="forgotPasswordClick()">
-                    Forgot Password?
+                    {{ forgotPasswordLabel }}
                   </a>
                 </p>
                 <SubmissionButton
@@ -114,6 +114,8 @@
                 :theme="theme"
                 :available-themes="availableThemes"
                 :is-design-com="isDesignCom"
+                :terms-and-conditions="termsAndConditions"
+                :terms-and-conditions-content-key-path="termsAndConditionsContentKeyPath"
               />
             </div>
 
@@ -122,7 +124,7 @@
                 <div
                   class="tw-grow tw-h-0 tw-border-0 tw-border-t tw-border-solid tw-border-grayscale-400 tw-px-4"
                 ></div>
-                <span class="tw-px-4"> or </span>
+                <span class="tw-px-4"> {{ orLabel }} </span>
                 <div
                   class="tw-grow tw-h-0 tw-border-0 tw-border-t tw-border-solid tw-border-grayscale-400 tw-px-4"
                 ></div>
@@ -138,6 +140,8 @@
                 :disabled="isLoading"
                 :facebook-loading="facebookLoading"
                 :google-loading="googleLoading"
+                :login-with-google-label="loginWithGoogleLabel"
+                :login-with-facebook-label="loginWithFacebookLabel"
               />
             </div>
           </div>
@@ -148,7 +152,9 @@
         >
           <p>
             {{ getSignUpText }}
-            <a :href="getSignUpUrl" class="tw-text-info-500" :class="{ 'hover:tw-underline': isDesignCom }">Sign Up</a>
+            <a :href="signUpUrl" class="tw-text-info-500" :class="{ 'hover:tw-underline': isDesignCom }">{{
+              signUpLabel
+            }}</a>
           </p>
         </div>
       </div>
@@ -156,8 +162,8 @@
   </div>
 </template>
 <script>
-import HelloBar from '../../../../src/atoms/components/HelloBar/HelloBar.vue';
-import Button from '../../../../src/atoms/components/Button/Button.vue';
+import HelloBar from '../../../atoms/components/HelloBar/HelloBar.vue';
+import Button from '../../../atoms/components/Button/Button.vue';
 import SubmissionButton from './SubmissionButton.vue';
 import AuthLegal from './AuthLegal.vue';
 import themeMixin from '../../mixins/themeMixin';
@@ -290,6 +296,21 @@ export default {
       required: false,
       default: undefined,
     },
+    termsAndConditions: {
+      type: Object,
+      required: false,
+      default: undefined,
+    },
+    termsAndConditionsContentKeyPath: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    signInContent: {
+      type: Object,
+      required: false,
+      default: () => {},
+    },
   },
   data() {
     return {
@@ -297,6 +318,16 @@ export default {
       password: undefined,
       userNameError: undefined,
       passwordError: undefined,
+      loginWithGoogleLabel: this.signInContent.loginWithGoogleLabel,
+      loginWithFacebookLabel: this.signInContent.loginWithFacebookLabel,
+      invalidUsernameErrorLabel: this.signInContent.invalidUsernameErrorLabel ?? 'Please enter a valid email address',
+      missingPasswordErrorLabel: this.signInContent.missingPasswordErrorLabel ?? 'Please enter a password',
+      emailLabel: this.signInContent.emailLabel ?? 'Email',
+      emailPlaceholderLabel: this.signInContent.emailPlaceholderLabel ?? 'Email Address',
+      passwordPlaceholderLabel: this.signInContent.passwordPlaceholderLabel ?? 'Password',
+      forgotPasswordLabel: this.signInContent.forgotPasswordLabel ?? 'Forgot Password?',
+      orLabel: this.signInContent.orLabel ?? 'or',
+      signUpLabel: this.signInContent.signUpLabel ?? 'Sign Up',
     };
   },
   computed: {
@@ -306,18 +337,6 @@ export default {
     submissionButtonLabelLowercase() {
       return this.submissionButtonLabel.toLowerCase();
     },
-    getSignUpUrl() {
-      if (typeof window === 'undefined') {
-        return null;
-      }
-
-      const url = new URL(`https://${window.location.host}${this.signUpUrl}`);
-
-      if (this.aUserName) {
-        url.searchParams.append('initialUserName', this.aUserName);
-      }
-      return url;
-    },
     getForgotPasswordUrl() {
       if (typeof window === 'undefined') {
         return null;
@@ -331,6 +350,10 @@ export default {
       return url;
     },
     getRedirectToRecommendedActionUrl() {
+      if (typeof window === 'undefined') {
+        return null;
+      }
+
       const url = new URL(`https://${window.location.host}${this.recommendedActionLink}`);
       if (this.aUserName) {
         url.searchParams.append('email', this.aUserName);
@@ -359,13 +382,13 @@ export default {
     validate(e) {
       this.clearErrorMessages();
       if (!this.aUserName || !isValidEmail(this.aUserName)) {
-        this.userNameError = 'Please enter a valid email address';
+        this.userNameError = this.invalidUsernameErrorLabel;
         e.preventDefault();
         return false;
       }
 
       if (this.capturePassword && !this.password) {
-        this.passwordError = 'Please enter a password';
+        this.passwordError = this.missingPasswordErrorLabel;
         e.preventDefault();
         return false;
       }

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

@@ -32,9 +32,9 @@
           <h2 v-if="title" class="tw-text-center tw-text-4xl tw-font-bold tw-mb-6">
             {{ title }}
           </h2>
-          <form id="signup" method="post" @submit="validate">
+          <form id="signup" action="/identity/account/signup" method="post" @submit="validate">
             <input name="__RequestVerificationToken" type="hidden" :value="antiForgeryToken" />
-            <label for="userName" class="tw-sr-only"> Email </label>
+            <label for="userName" class="tw-sr-only"> {{ emailLabel }} </label>
             <input
               v-model="aUserName"
               name="userName"
@@ -42,14 +42,14 @@
               aria-required="true"
               :aria-invalid="!!userNameError"
               autocomplete="”email”"
-              placeholder="Email address"
+              :placeholder="emailPlaceholderLabel"
               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"
               :class="{ 'tw-border-error-500': !!userNameError }"
             />
             <p v-if="!!userNameError" class="tw-text-error-500 tw-text-sm tw-text-left tw-mb-4">
               {{ userNameError }}
             </p>
-            <label for="password" class="tw-sr-only"> Password </label>
+            <label for="password" class="tw-sr-only"> {{ passwordPlaceholderLabel }} </label>
             <input
               v-model="password"
               name="password"
@@ -57,7 +57,7 @@
               aria-required="true"
               :aria-invalid="!!passwordError"
               autocomplete="new-password"
-              placeholder="Password"
+              :placeholder="passwordPlaceholderLabel"
               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 }"
             />
@@ -67,7 +67,7 @@
             <SubmissionButton
               variant="primary"
               size="medium"
-              label="SIGN UP"
+              :label="submissionButtonLabel"
               label-size="smaller"
               :is-loading="isLoading"
               :disabled="isLoading"
@@ -80,33 +80,37 @@
             :theme="theme"
             :available-themes="availableThemes"
             :is-design-com="isDesignCom"
+            :terms-and-conditions="termsAndConditions"
+            :terms-and-conditions-content-key-path="termsAndConditionsContentKeyPath"
           />
           <div v-if="!!loginWithFacebookUrl || !!loginWithGoogleUrl" class="tw-text-center tw-text-grayscale-600">
             <div class="tw-w-full tw-inline-flex tw-items-center tw-mb-4">
               <div class="tw-grow tw-h-0 tw-border-0 tw-border-t tw-border-solid tw-border-grayscale-400 tw-px-4"></div>
-              <span class="tw-inline tw-px-4">or</span>
+              <span class="tw-inline tw-px-4">{{ orLabel }}</span>
               <div class="tw-grow tw-h-0 tw-border-0 tw-border-t tw-border-solid tw-border-grayscale-400 tw-px-4"></div>
             </div>
             <SocialSignIn
               :login-with-google-url="loginWithGoogleUrl"
               :login-with-facebook-url="loginWithFacebookUrl"
               :anti-forgery-token="antiForgeryToken"
+              :login-with-google-label="loginWithGoogleLabel"
+              :login-with-facebook-label="loginWithFacebookLabel"
             />
           </div>
         </div>
         <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"
         >
-          Already have an account?
-          <a :href="getRedirectToSignInUrl" class="tw-text-info-500">Login</a>
+          {{ alreadyHaveAnAccountLabel }}
+          <a :href="signInUrl" class="tw-text-info-500">{{ loginLabel }}</a>
         </p>
       </div>
     </div>
   </div>
 </template>
 <script>
-import HelloBar from '../../../../src/atoms/components/HelloBar/HelloBar.vue';
-import Button from '../../../../src/atoms/components/Button/Button.vue';
+import HelloBar from '../../../atoms/components/HelloBar/HelloBar.vue';
+import Button from '../../../atoms/components/Button/Button.vue';
 
 import SocialSignIn from './SocialSignIn.vue';
 import SubmissionButton from './SubmissionButton.vue';
@@ -177,6 +181,21 @@ export default {
       type: Boolean,
       default: false,
     },
+    termsAndConditions: {
+      type: Object,
+      required: false,
+      default: undefined,
+    },
+    termsAndConditionsContentKeyPath: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    signUpContent: {
+      type: Object,
+      required: false,
+      default: () => {},
+    },
   },
   data() {
     return {
@@ -185,17 +204,25 @@ export default {
       password: null,
       passwordError: undefined,
       userNameError: null,
+      invalidUsernameErrorLabel: this.signUpContent.invalidUsernameErrorLabel ?? 'Please enter a valid email address',
+      missingPasswordErrorLabel: this.signUpContent.missingPasswordErrorLabel ?? 'Please enter a password',
+      submissionButtonLabel: this.signUpContent.submissionButtonLabel ?? 'Sign Up',
+      loginWithGoogleLabel: this.signUpContent.loginWithGoogleLabel,
+      loginWithFacebookLabel: this.signUpContent.loginWithFacebookLabel,
+      emailLabel: this.signUpContent.emailLabel ?? 'Email',
+      emailPlaceholderLabel: this.signUpContent.emailPlaceholderLabel ?? 'Email',
+      passwordPlaceholderLabel: this.signUpContent.passwordPlaceholderLabel ?? 'Password',
+      alreadyHaveAnAccountLabel: this.signUpContent.alreadyHaveAnAccountLabel ?? 'Already have an account?',
+      orLabel: this.signUpContent.orLabel ?? 'or',
+      loginLabel: this.signUpContent.loginLabel ?? 'Login',
     };
   },
   computed: {
-    getRedirectToSignInUrl() {
-      const url = new URL(`https://${window.location.host}${this.signInUrl}`);
-      if (this.aUserName) {
-        url.searchParams.append('initialUserName', this.aUserName);
-      }
-      return url;
-    },
     getRedirectToRecommendedActionUrl() {
+      if (typeof window === 'undefined') {
+        return null;
+      }
+
       const url = new URL(`https://${window.location.host}${this.recommendedActionLink}`);
       if (this.aUserName) {
         url.searchParams.append('email', this.aUserName);
@@ -216,10 +243,10 @@ export default {
       this.passwordError = undefined;
 
       if (!this.aUserName) {
-        this.userNameError = 'Please enter a valid email address';
+        this.userNameError = this.invalidUsernameErrorLabel;
       }
       if (!this.password) {
-        this.passwordError = 'Please enter a password';
+        this.passwordError = this.missingPasswordErrorLabel;
       }
 
       e.preventDefault();

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

@@ -9,7 +9,7 @@
     >
       <input type="hidden" name="__RequestVerificationToken" :value="antiForgeryToken" />
       <SocialSignInButton
-        label="Continue with Google"
+        :label="googleLoginLabel"
         type="google"
         :disabled="disabled"
         :is-loading="googleLoading"
@@ -26,7 +26,7 @@
     >
       <input type="hidden" name="__RequestVerificationToken" :value="antiForgeryToken" />
       <SocialSignInButton
-        label="Continue with Facebook"
+        :label="facebookLoginLabel"
         type="facebook"
         :disabled="disabled"
         :is-loading="facebookLoading"
@@ -88,12 +88,24 @@ export default {
       required: false,
       default: undefined,
     },
+    loginWithGoogleLabel: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    loginWithFacebookLabel: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
   },
   data() {
     return {
       formFacebookUrl: this.loginWithFacebookUrl,
       formGoogleUrl: this.loginWithGoogleUrl,
       formAntiForgeryToken: this.antiForgeryToken,
+      googleLoginLabel: this.loginWithGoogleLabel ?? 'Continue with Google',
+      facebookLoginLabel: this.loginWithFacebookLabel ?? 'Continue with Facebook',
     };
   },
   methods: {

package/src/experiences/components/PublishBrandPageModal/PublishBrandPageModal.vue

@@ -54,7 +54,7 @@
               :prefix-text="`${brandPageBaseUrl}/`"
               :error="!!slugValidationError"
               :disabled="isPublishing || domainTypeValue === DOMAIN_TYPES.purchased"
-              placeholder="your-brand-name"
+              :placeholder="your-brand-name"
               data-test-brand-page-slug-input
               :attrs="{ 'data-test-set-url-text-field': '' }"
               @input="onSlugChanged"