@designcrowd/fe-shared-lib 1.5.7-eng-3522-1 → 1.5.7

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

@@ -1,179 +1,179 @@
-<template>
-  <div class="tw-mx-2 sm:tw-mx-8">
-    <div v-if="helloBar" class="tw-text-left tw-mt-8">
-      <HelloBar :label="helloBar.label" :description="helloBar.description" :variant="helloBar.variant" />
-    </div>
-    <div class="lg:tw-flex tw-items-start tw-justify-center tw-py-8">
-      <div
-        class="tw-flex tw-items-center tw-justify-center tw-flex-col tw-text-center tw-h-auto tw-bg-white tw-border tw-border-solid tw-border-grayscale-400"
-        :class="formBackgroundClass"
-      >
-        <div class="tw-w-full tw-p-4 md:tw-p-8">
-          <h2 class="tw-text-center tw-text-4xl tw-font-bold tw-mb-2">
-            {{ title }}
-          </h2>
-          <p class="tw-mb-8 tw-text-grayscale-600">{{ description }}</p>
-          <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" />
-            <label for="password" class="tw-sr-only">New Password</label>
-            <input
-              v-model="password"
-              name="password"
-              type="password"
-              aria-required="true"
-              :aria-invalid="!!passwordError"
-              autocomplete="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">{{ confirmPasswordLabel }}</label>
-            <input
-              v-model="confirmPassword"
-              name="confirmPassword"
-              type="password"
-              aria-required="true"
-              :aria-invalid="!!confirmPasswordError"
-              autocomplete="off"
-              :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 }"
-            />
-            <p v-if="!!confirmPasswordError" class="tw-text-error-500 tw-text-sm tw-text-left tw-mb-4">
-              {{ confirmPasswordError }}
-            </p>
-            <SubmissionButton
-              variant="primary"
-              size="medium"
-              :label="updatePasswordLabel"
-              label-size="larger"
-              :is-loading="isLoading"
-              :disabled="isLoading"
-            >
-            </SubmissionButton>
-          </form>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import { getCurrentLocale } from '../../../useSharedLibTranslate';
-import HelloBar from '../../../atoms/components/HelloBar/HelloBar.vue';
-import SubmissionButton from './SubmissionButton.vue';
-
-export default {
-  components: {
-    HelloBar,
-    SubmissionButton,
-  },
-  props: {
-    title: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    description: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    userName: {
-      type: String,
-      required: true,
-    },
-    resetPasswordToken: {
-      type: String,
-      required: true,
-    },
-    formBackgroundClass: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    antiForgeryToken: {
-      type: String,
-      required: true,
-    },
-    helloBar: {
-      type: Object,
-      required: false,
-      default: undefined,
-    },
-    submitAction: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    resetPasswordContent: {
-      type: Object,
-      required: false,
-      default: () => {},
-    },
-  },
-  data() {
-    return {
-      isLoading: false,
-      password: undefined,
-      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;
-      }
-
-      this.isLoading = false;
-
-      this.passwordError = undefined;
-      this.confirmPasswordError = undefined;
-
-      if (!this.password) {
-        this.passwordError = this.passwordRequiredError;
-      } else if (!this.confirmPassword || this.password !== this.confirmPassword) {
-        this.confirmPasswordError = this.passwordsDoNotMatchError;
-      }
-
-      e.preventDefault();
-      return false;
-    },
-  },
-};
-</script>
-<style scoped>
-.password-input {
-  background-image: url(https://dcstatic.com/images/icons/forms/forms-password-ff538cd5e4.svg);
-  background-position: top 50% left 0.5rem;
-}
-
-.tw-pl-10-important {
-  padding-left: 2.5rem !important;
-}
-</style>
+<template>
+  <div class="tw-mx-2 sm:tw-mx-8">
+    <div v-if="helloBar" class="tw-text-left tw-mt-8">
+      <HelloBar :label="helloBar.label" :description="helloBar.description" :variant="helloBar.variant" />
+    </div>
+    <div class="lg:tw-flex tw-items-start tw-justify-center tw-py-8">
+      <div
+        class="tw-flex tw-items-center tw-justify-center tw-flex-col tw-text-center tw-h-auto tw-bg-white tw-border tw-border-solid tw-border-grayscale-400"
+        :class="formBackgroundClass"
+      >
+        <div class="tw-w-full tw-p-4 md:tw-p-8">
+          <h2 class="tw-text-center tw-text-4xl tw-font-bold tw-mb-2">
+            {{ title }}
+          </h2>
+          <p class="tw-mb-8 tw-text-grayscale-600">{{ description }}</p>
+          <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" />
+            <label for="password" class="tw-sr-only">New Password</label>
+            <input
+              v-model="password"
+              name="password"
+              type="password"
+              aria-required="true"
+              :aria-invalid="!!passwordError"
+              autocomplete="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">{{ confirmPasswordLabel }}</label>
+            <input
+              v-model="confirmPassword"
+              name="confirmPassword"
+              type="password"
+              aria-required="true"
+              :aria-invalid="!!confirmPasswordError"
+              autocomplete="off"
+              :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 }"
+            />
+            <p v-if="!!confirmPasswordError" class="tw-text-error-500 tw-text-sm tw-text-left tw-mb-4">
+              {{ confirmPasswordError }}
+            </p>
+            <SubmissionButton
+              variant="primary"
+              size="medium"
+              :label="updatePasswordLabel"
+              label-size="larger"
+              :is-loading="isLoading"
+              :disabled="isLoading"
+            >
+            </SubmissionButton>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { getCurrentLocale } from '../../../useSharedLibTranslate';
+import HelloBar from '../../../atoms/components/HelloBar/HelloBar.vue';
+import SubmissionButton from './SubmissionButton.vue';
+
+export default {
+  components: {
+    HelloBar,
+    SubmissionButton,
+  },
+  props: {
+    title: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    description: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    userName: {
+      type: String,
+      required: true,
+    },
+    resetPasswordToken: {
+      type: String,
+      required: true,
+    },
+    formBackgroundClass: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    antiForgeryToken: {
+      type: String,
+      required: true,
+    },
+    helloBar: {
+      type: Object,
+      required: false,
+      default: undefined,
+    },
+    submitAction: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    resetPasswordContent: {
+      type: Object,
+      required: false,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      isLoading: false,
+      password: undefined,
+      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;
+      }
+
+      this.isLoading = false;
+
+      this.passwordError = undefined;
+      this.confirmPasswordError = undefined;
+
+      if (!this.password) {
+        this.passwordError = this.passwordRequiredError;
+      } else if (!this.confirmPassword || this.password !== this.confirmPassword) {
+        this.confirmPasswordError = this.passwordsDoNotMatchError;
+      }
+
+      e.preventDefault();
+      return false;
+    },
+  },
+};
+</script>
+<style scoped>
+.password-input {
+  background-image: url(https://dcstatic.com/images/icons/forms/forms-password-ff538cd5e4.svg);
+  background-position: top 50% left 0.5rem;
+}
+
+.tw-pl-10-important {
+  padding-left: 2.5rem !important;
+}
+</style>

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

@@ -1,64 +1,64 @@
-<template>
-  <div
-    class="tw-fixed tw-w-full tw-h-full tw-z-50 tw-top-0 tw-left-0 tw-bg-black tw-bg-opacity-80 lg:tw-flex tw-items-start tw-justify-center lg:tw-pt-20"
-  >
-    <AuthModal :show-cancel-button="true">
-      <template #content>
-        <ResetPassword
-          :title="title"
-          :description="description"
-          :user-name="userName"
-          :reset-password-token="resetPasswordToken"
-          :form-background-class="formBackgroundClass"
-          :anti-forgery-token="antiForgeryToken"
-          :hello-bar="helloBar"
-        />
-      </template>
-    </AuthModal>
-  </div>
-</template>
-<script>
-import AuthModal from './AuthModal.vue';
-import ResetPassword from './ResetPassword.vue';
-
-export default {
-  components: {
-    AuthModal,
-    ResetPassword,
-  },
-  props: {
-    title: {
-      type: String,
-      required: false,
-      default: 'Reset password',
-    },
-    description: {
-      type: String,
-      required: false,
-      default: 'Enter and confirm your new password',
-    },
-    userName: {
-      type: String,
-      required: true,
-    },
-    resetPasswordToken: {
-      type: String,
-      required: true,
-    },
-    formBackgroundClass: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    antiForgeryToken: {
-      type: String,
-      required: true,
-    },
-    helloBar: {
-      type: Object,
-      required: false,
-      default: undefined,
-    },
-  },
-};
-</script>
+<template>
+  <div
+    class="tw-fixed tw-w-full tw-h-full tw-z-50 tw-top-0 tw-left-0 tw-bg-black tw-bg-opacity-80 lg:tw-flex tw-items-start tw-justify-center lg:tw-pt-20"
+  >
+    <AuthModal :show-cancel-button="true">
+      <template #content>
+        <ResetPassword
+          :title="title"
+          :description="description"
+          :user-name="userName"
+          :reset-password-token="resetPasswordToken"
+          :form-background-class="formBackgroundClass"
+          :anti-forgery-token="antiForgeryToken"
+          :hello-bar="helloBar"
+        />
+      </template>
+    </AuthModal>
+  </div>
+</template>
+<script>
+import AuthModal from './AuthModal.vue';
+import ResetPassword from './ResetPassword.vue';
+
+export default {
+  components: {
+    AuthModal,
+    ResetPassword,
+  },
+  props: {
+    title: {
+      type: String,
+      required: false,
+      default: 'Reset password',
+    },
+    description: {
+      type: String,
+      required: false,
+      default: 'Enter and confirm your new password',
+    },
+    userName: {
+      type: String,
+      required: true,
+    },
+    resetPasswordToken: {
+      type: String,
+      required: true,
+    },
+    formBackgroundClass: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    antiForgeryToken: {
+      type: String,
+      required: true,
+    },
+    helloBar: {
+      type: Object,
+      required: false,
+      default: undefined,
+    },
+  },
+};
+</script>

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

@@ -1,56 +1,56 @@
-<template>
-  <div
-    class="tw-fixed tw-w-full tw-h-full tw-z-50 tw-top-0 tw-left-0 tw-bg-black tw-bg-opacity-80 lg:tw-flex tw-items-start tw-justify-center lg:tw-pt-20"
-  >
-    <AuthModal :show-cancel-button="true">
-      <template #content>
-        <div class="tw-w-full tw-p-4 md:tw-p-8">
-          <h2 class="tw-text-center tw-text-4xl tw-font-bold tw-mb-4">
-            {{ title }}
-          </h2>
-          <p class="tw-mb-8 tw-text-grayscale-600">{{ description }}</p>
-          <Button variant="primary" size="large" label="RESEND EMAIL" :full-width="true" :url="forgotPasswordUrl" />
-        </div>
-        <p class="tw-w-full tw-border-0 tw-border-t tw-border-solid tw-border-grayscale-400 tw-text-center tw-py-4">
-          <a :href="signInUrl" class="tw-text-info-500"> Go back to login </a>
-        </p>
-      </template>
-    </AuthModal>
-  </div>
-</template>
-<script>
-import Button from '../../../atoms/components/Button/Button.vue';
-
-import AuthModal from './AuthModal.vue';
-
-export default {
-  components: {
-    Button,
-    AuthModal,
-  },
-  props: {
-    title: {
-      type: String,
-      required: true,
-    },
-    description: {
-      type: String,
-      required: false,
-      default: `An email was sent to you containing the password reset information. If you haven't received the email yet, send it again.`,
-    },
-    formBackgroundClass: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    signInUrl: {
-      type: String,
-      required: true,
-    },
-    forgotPasswordUrl: {
-      type: String,
-      required: true,
-    },
-  },
-};
-</script>
+<template>
+  <div
+    class="tw-fixed tw-w-full tw-h-full tw-z-50 tw-top-0 tw-left-0 tw-bg-black tw-bg-opacity-80 lg:tw-flex tw-items-start tw-justify-center lg:tw-pt-20"
+  >
+    <AuthModal :show-cancel-button="true">
+      <template #content>
+        <div class="tw-w-full tw-p-4 md:tw-p-8">
+          <h2 class="tw-text-center tw-text-4xl tw-font-bold tw-mb-4">
+            {{ title }}
+          </h2>
+          <p class="tw-mb-8 tw-text-grayscale-600">{{ description }}</p>
+          <Button variant="primary" size="large" label="RESEND EMAIL" :full-width="true" :url="forgotPasswordUrl" />
+        </div>
+        <p class="tw-w-full tw-border-0 tw-border-t tw-border-solid tw-border-grayscale-400 tw-text-center tw-py-4">
+          <a :href="signInUrl" class="tw-text-info-500"> Go back to login </a>
+        </p>
+      </template>
+    </AuthModal>
+  </div>
+</template>
+<script>
+import Button from '../../../atoms/components/Button/Button.vue';
+
+import AuthModal from './AuthModal.vue';
+
+export default {
+  components: {
+    Button,
+    AuthModal,
+  },
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    description: {
+      type: String,
+      required: false,
+      default: `An email was sent to you containing the password reset information. If you haven't received the email yet, send it again.`,
+    },
+    formBackgroundClass: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    signInUrl: {
+      type: String,
+      required: true,
+    },
+    forgotPasswordUrl: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>