web-wallet: Enhance Error Handling on Wallet Access Page

web-wallet/CHANGELOG.md

@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Update Transactions list design [#1922]
 - Update `Stake` to use `Stepper` [#2436]
 - Update Mnemonic (Authenticate) Enter key behavior [#2879]
+- Enhance Error Handling on Wallet Access Page [#2932]
 
 ### Removed
 
@@ -335,6 +336,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [#2880]: https://github.com/dusk-network/rusk/issues/2880
 [#2888]: https://github.com/dusk-network/rusk/issues/2888
 [#2920]: https://github.com/dusk-network/rusk/issues/2920
+[#2932]: https://github.com/dusk-network/rusk/issues/2932
 
 <!-- VERSIONS -->
 

web-wallet/src/routes/(welcome)/login/+page.svelte

@@ -5,7 +5,7 @@
   import { validateMnemonic } from "bip39";
 
   import { Button, Textbox } from "$lib/dusk/components";
-  import { AppAnchorButton } from "$lib/components";
+  import { AppAnchor, AppAnchorButton, Banner } from "$lib/components";
   import { IconHeadingCard } from "$lib/containers/Cards";
   import { goto } from "$lib/navigation";
   import {
@@ -57,8 +57,8 @@
   /** @type {string} */
   let secretText = "";
 
-  /** @type {string} */
-  let errorMessage = "";
+  /** @type {null|"invalid-password"|"invalid-mnemonic"} */
+  let error = null;
 
   /** @type {import("svelte/elements").FormEventHandler<HTMLFormElement>} */
   function handleUnlockWalletSubmit() {
@@ -78,7 +78,10 @@
           goto("/setup/restore");
           return;
         }
-        errorMessage = err.message;
+        error =
+          err.message === "Wrong password"
+            ? "invalid-password"
+            : "invalid-mnemonic";
         fldSecret.focus();
         fldSecret.select();
       });
@@ -110,8 +113,22 @@
           type="password"
           autocomplete="current-password"
         />
-        {#if errorMessage}
-          <span class="login__error">{errorMessage}</span>
+        {#if error === "invalid-mnemonic"}
+          <Banner title="Invalid mnemonic phrase" variant="error">
+            <p>
+              Please ensure you have entered your 12-word mnemonic phrase, with
+              a space separating each word.
+            </p>
+          </Banner>
+        {/if}
+        {#if error === "invalid-password"}
+          <Banner title="Invalid password" variant="error">
+            <p>
+              Please ensure the password entered matches the one you have set up
+              while setting up the wallet. If you have forgotten your password,
+              you can <AppAnchor href="/setup/restore">restore</AppAnchor> your wallet.
+            </p>
+          </Banner>
         {/if}
         <Button text="Unlock Wallet" type="submit" />
         {#if modeLabel === "Password"}
@@ -150,10 +167,6 @@
     &__form {
       gap: var(--default-gap);
     }
-
-    &__error {
-      color: var(--error);
-    }
   }
 
   .login-footer {

web-wallet/src/routes/(welcome)/login/__tests__/__snapshots__/page.spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`Login > Mnemonic phrase workflow > should render the login page and show the field to enter the mnemonic phrase, if there is no login info stored 1`] = `
 <section
-  class="login svelte-1h8yo9z"
+  class="login svelte-1e8gc2s"
 >
   <h2
     class="h1"
@@ -20,7 +20,7 @@ exports[`Login > Mnemonic phrase workflow > should render the login page and sho
   </h2>
 
   <div
-    class="login svelte-1h8yo9z"
+    class="login svelte-1e8gc2s"
   >
     <article
       class="dusk-card dusk-card--gap-medium"
@@ -64,7 +64,7 @@ exports[`Login > Mnemonic phrase workflow > should render the login page and sho
         class="dusk-card__body-container"
       >
         <form
-          class="login__form svelte-1h8yo9z"
+          class="login__form svelte-1e8gc2s"
         >
           <input
             autocomplete="current-password"
@@ -77,6 +77,7 @@ exports[`Login > Mnemonic phrase workflow > should render the login page and sho
 
 
 
+
           <button
             class="dusk-button dusk-button--type--submit dusk-button--variant--primary dusk-button--size--default"
             type="submit"
@@ -96,7 +97,7 @@ exports[`Login > Mnemonic phrase workflow > should render the login page and sho
   </div>
 
   <footer
-    class="login-footer svelte-1h8yo9z"
+    class="login-footer svelte-1e8gc2s"
   >
     <a
       aria-disabled="false"
@@ -128,7 +129,7 @@ exports[`Login > Mnemonic phrase workflow > should render the login page and sho
 
 exports[`Login > Password workflow > should show the password field and the link to restore the wallet if there is login info stored 1`] = `
 <section
-  class="login svelte-1h8yo9z"
+  class="login svelte-1e8gc2s"
 >
   <h2
     class="h1"
@@ -146,7 +147,7 @@ exports[`Login > Password workflow > should show the password field and the link
   </h2>
 
   <div
-    class="login svelte-1h8yo9z"
+    class="login svelte-1e8gc2s"
   >
     <article
       class="dusk-card dusk-card--gap-medium"
@@ -190,7 +191,7 @@ exports[`Login > Password workflow > should show the password field and the link
         class="dusk-card__body-container"
       >
         <form
-          class="login__form svelte-1h8yo9z"
+          class="login__form svelte-1e8gc2s"
         >
           <input
             autocomplete="current-password"
@@ -203,6 +204,7 @@ exports[`Login > Password workflow > should show the password field and the link
 
 
 
+
           <button
             class="dusk-button dusk-button--type--submit dusk-button--variant--primary dusk-button--size--default"
             type="submit"
@@ -234,7 +236,7 @@ exports[`Login > Password workflow > should show the password field and the link
   </div>
 
   <footer
-    class="login-footer svelte-1h8yo9z"
+    class="login-footer svelte-1e8gc2s"
   >
     <a
       aria-disabled="false"

web-wallet/src/routes/(welcome)/login/__tests__/page.spec.js

@@ -43,7 +43,7 @@ describe("Login", async () => {
     .default.then(getKey("address"))
     .then(String);
 
-  const getErrorElement = () => document.querySelector(".login__error");
+  const getErrorElement = () => document.querySelector(".banner--error");
   const gotoSpy = vi.spyOn(navigation, "goto");
 
   /**
@@ -93,7 +93,7 @@ describe("Login", async () => {
       );
 
       expect(initSpy).not.toHaveBeenCalled();
-      expect(errorElement?.textContent).toMatch(/mnemonic/i);
+      expect(errorElement?.textContent).toMatch("Invalid mnemonic phrase");
       expect(textInput).toHaveFocus();
       expect(selectedText).toBe(textInput.value);
     });
@@ -198,7 +198,7 @@ describe("Login", async () => {
       );
 
       expect(initSpy).not.toHaveBeenCalled();
-      expect(errorElement?.textContent).toMatch(/password/i);
+      expect(errorElement?.textContent).toMatch("Invalid password");
       expect(textInput).toHaveFocus();
       expect(selectedText).toBe(textInput.value);
     });