add to reset form

webrecorder · Oct 11, 2023 · a72d6ae · a72d6ae
1 parent d7b67b8
commit a72d6ae
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 25 deletions.
diff --git a/frontend/src/components/sign-up-form.ts b/frontend/src/components/sign-up-form.ts
@@ -105,7 +105,7 @@ export class SignUpForm extends LiteElement {
           </btrix-input>
           <p class="mt-2 text-gray-500">
             ${msg(
-              "Your full name, or another name that org collaborators will see."
+              "Your full name, nickname, or another name that org collaborators can see."
             )}
           </p>
         </div>
@@ -124,7 +124,7 @@ export class SignUpForm extends LiteElement {
           </btrix-input>
           <p class="mt-2 text-gray-500">
             ${msg(
-              str`Choose a strong password between ${PASSWORD_MINLENGTH} and ${PASSWORD_MAXLENGTH} characters.`
+              str`Choose a strong password between ${PASSWORD_MINLENGTH}-${PASSWORD_MAXLENGTH} characters.`
             )}
           </p>
           ${when(this.pwStrengthResults, this.renderPasswordStrength)}
@@ -145,17 +145,15 @@ export class SignUpForm extends LiteElement {
     `;
   }
 
-  private renderPasswordStrength = () => {
-    return html`
-      <div class="my-3">
-        <btrix-pw-strength-alert
-          .result=${this.pwStrengthResults}
-          min=${PASSWORD_MIN_SCORE}
-        >
-        </btrix-pw-strength-alert>
-      </div>
-    `;
-  };
+  private renderPasswordStrength = () => html`
+    <div class="my-3">
+      <btrix-pw-strength-alert
+        .result=${this.pwStrengthResults}
+        min=${PASSWORD_MIN_SCORE}
+      >
+      </btrix-pw-strength-alert>
+    </div>
+  `;
 
   private onPasswordInput = debounce(150)(async (e: InputEvent) => {
     const { value } = e.target as BtrixInput;

diff --git a/frontend/src/pages/join.ts b/frontend/src/pages/join.ts
@@ -67,7 +67,7 @@ export class Join extends LiteElement {
           </div>
           <p class="text-xl md:text-2xl font-semibold mb-5">
             ${msg(
-              html`You've been invited to join
+              html`You’ve been invited to join
                 <span class="text-primary break-words"
                   >${hasInviteInfo
                     ? this.inviteInfo.orgName || msg("Browsertrix Cloud")
@@ -78,7 +78,7 @@ export class Join extends LiteElement {
         </div>
 
         <main
-          class="max-w-md md:bg-white md:border md:shadow-lg md:rounded-lg md:px-12 md:py-12"
+          class="max-w-md md:bg-white md:border md:shadow-lg md:rounded-lg md:p-10"
         >
           <btrix-sign-up-form
             email=${this.email!}

diff --git a/frontend/src/pages/log-in.ts b/frontend/src/pages/log-in.ts
@@ -216,10 +216,10 @@ export class LogInPage extends LiteElement {
     }
 
     return html`
-      <article class="w-full max-w-sm grid gap-5">
+      <article class="w-full max-w-md grid gap-5">
         ${successMessage}
 
-        <main class="md:bg-white md:shadow-xl md:rounded-lg p-12">
+        <main class="md:bg-white md:border md:shadow-lg md:rounded-lg p-10">
           <div>${form}</div>
         </main>
         <footer class="text-center">${link}</footer>
@@ -284,7 +284,7 @@ export class LogInPage extends LiteElement {
           ?loading=${this.formState.value === "signingIn"}
           ?disabled=${this.formState.value === "backendInitializing"}
           type="submit"
-          >${msg("Log in")}</sl-button
+          >${msg("Log In")}</sl-button
         >
         ${this.formState.value === "backendInitializing"
           ? html` <div class="mt-3">

diff --git a/frontend/src/pages/reset-password.ts b/frontend/src/pages/reset-password.ts
@@ -1,20 +1,36 @@
 import { state, property } from "lit/decorators.js";
-import { msg, localized } from "@lit/localize";
+import { str, msg, localized } from "@lit/localize";
+import debounce from "lodash/fp/debounce";
+import { when } from "lit/directives/when.js";
+import type { ZxcvbnResult } from "@zxcvbn-ts/core";
 
 import type { ViewState } from "../utils/APIRouter";
 import LiteElement, { html } from "../utils/LiteElement";
+import PasswordService from "../utils/PasswordService";
+import type { Input as BtrixInput } from "../components/input/input";
+
+const PASSWORD_MINLENGTH = 8;
+const PASSWORD_MAXLENGTH = 64;
+const PASSWORD_MIN_SCORE = 3;
 
 @localized()
 export class ResetPassword extends LiteElement {
   @property({ type: Object })
   viewState!: ViewState;
 
+  @state()
+  private pwStrengthResults: null | ZxcvbnResult = null;
+
   @state()
   private serverError?: string;
 
   @state()
   private isSubmitting: boolean = false;
 
+  protected firstUpdated() {
+    PasswordService.setOptions();
+  }
+
   render() {
     let formError;
 
@@ -29,22 +45,29 @@ export class ResetPassword extends LiteElement {
     }
 
     return html`
-      <div class="w-full max-w-sm grid gap-5">
-        <div class="md:bg-white md:shadow-xl md:rounded-lg md:px-12 md:py-12">
+      <div class="w-full max-w-md grid gap-5">
+        <div class="md:bg-white md:border md:shadow-lg md:rounded-lg md:p-10">
           <form @submit=${this.onSubmit} aria-describedby="formError">
             <div class="mb-5">
               <btrix-input
                 id="password"
                 name="password"
                 type="password"
-                label="${msg("New password")}"
+                label="${msg("Enter new password")}"
                 help-text=${msg("Must be between 8-64 characters")}
                 minlength="8"
                 autocomplete="new-password"
                 passwordToggle
                 required
+                @input=${this.onPasswordInput}
               >
               </btrix-input>
+              <p class="mt-2 text-gray-500">
+                ${msg(
+                  str`Choose a strong password between ${PASSWORD_MINLENGTH}-${PASSWORD_MAXLENGTH} characters.`
+                )}
+              </p>
+              ${when(this.pwStrengthResults, this.renderPasswordStrength)}
             </div>
 
             ${formError}
@@ -53,8 +76,10 @@ export class ResetPassword extends LiteElement {
               class="w-full"
               variant="primary"
               ?loading=${this.isSubmitting}
+              ?disabled=${!this.pwStrengthResults ||
+              this.pwStrengthResults.score < PASSWORD_MIN_SCORE}
               type="submit"
-              >${msg("Change password")}</sl-button
+              >${msg("Change Password")}</sl-button
             >
           </form>
         </div>
@@ -71,6 +96,25 @@ export class ResetPassword extends LiteElement {
     `;
   }
 
+  private renderPasswordStrength = () => html`
+    <div class="my-3">
+      <btrix-pw-strength-alert
+        .result=${this.pwStrengthResults}
+        min=${PASSWORD_MIN_SCORE}
+      >
+      </btrix-pw-strength-alert>
+    </div>
+  `;
+
+  private onPasswordInput = debounce(150)(async (e: InputEvent) => {
+    const { value } = e.target as BtrixInput;
+    if (!value || value.length < 4) {
+      this.pwStrengthResults = null;
+      return;
+    }
+    this.pwStrengthResults = await PasswordService.checkStrength(value);
+  }) as any;
+
   async onSubmit(event: SubmitEvent) {
     event.preventDefault();
     this.isSubmitting = true;

diff --git a/frontend/src/pages/sign-up.ts b/frontend/src/pages/sign-up.ts
@@ -15,8 +15,8 @@ export class SignUp extends LiteElement {
 
   render() {
     return html`
-      <article class="w-full max-w-sm grid gap-5">
-        <main class="md:bg-white md:shadow-xl md:rounded-lg p-12">
+      <article class="w-full max-w-md grid gap-5">
+        <main class="md:bg-white md:border md:shadow-lg md:rounded-lg p-10">
           ${this.isSignedUpWithoutAuth
             ? html`
                 <div