From 3ae2329570332ecf1685c496f9da38202c474791 Mon Sep 17 00:00:00 2001
From: Hein Dauven <heindauven@gmail.com>
Date: Mon, 23 Dec 2024 15:05:20 +0100
Subject: [PATCH] web-wallet: Change password setting as enabled by default

---
 web-wallet/CHANGELOG.md                       |  2 +
 .../(welcome)/setup/PasswordSetup.svelte      | 10 +--
 .../(welcome)/setup/create/+page.svelte       |  2 +-
 .../__tests__/__snapshots__/page.spec.js.snap | 90 +++++++++----------
 .../setup/create/__tests__/page.spec.js       |  9 +-
 .../(welcome)/setup/restore/+page.svelte      |  2 +-
 .../setup/restore/__tests__/page.spec.js      |  4 +-
 .../routes/components-showcase/Banners.svelte |  8 +-
 8 files changed, 65 insertions(+), 62 deletions(-)

diff --git a/web-wallet/CHANGELOG.md b/web-wallet/CHANGELOG.md
index 0cb74e7b88..536be25a46 100644
--- a/web-wallet/CHANGELOG.md
+++ b/web-wallet/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Update Transactions list design [#1922]
+- Change password setting as enabled by default [#3287]
 
 ### Removed
 
@@ -501,6 +502,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [#3265]: https://github.com/dusk-network/rusk/issues/3265
 [#3267]: https://github.com/dusk-network/rusk/issues/3267
 [#3270]: https://github.com/dusk-network/rusk/issues/3270
+[#3287]: https://github.com/dusk-network/rusk/issues/3287
 
 <!-- VERSIONS -->
 
diff --git a/web-wallet/src/routes/(welcome)/setup/PasswordSetup.svelte b/web-wallet/src/routes/(welcome)/setup/PasswordSetup.svelte
index 26160fad4d..0a2b0d1a76 100644
--- a/web-wallet/src/routes/(welcome)/setup/PasswordSetup.svelte
+++ b/web-wallet/src/routes/(welcome)/setup/PasswordSetup.svelte
@@ -11,7 +11,7 @@
   export let isValid = false;
 
   /** @type {boolean} */
-  export let isToggled = false;
+  export let isToggled = true;
 
   /** @type {string} */
   let confirmPassword = "";
@@ -59,13 +59,13 @@
 </ToggleableCard>
 
 <Banner
-  title="Setting a password for your web wallet is optional."
+  title="Setting a password for your web wallet is recommended."
   variant="info"
 >
   <p>
-    Doing so allows you the convenience of accessing your wallet using a
-    password, but it weakens the overall security. Not using a password requires
-    you to input the full mnemonic to open your wallet.
+    Without a password, you will need to input your full mnemonic each time to
+    access your wallet. This could expose your mnemonic to potential threats.
+    Setting a password is highly recommended for better wallet security.
   </p>
 </Banner>
 
diff --git a/web-wallet/src/routes/(welcome)/setup/create/+page.svelte b/web-wallet/src/routes/(welcome)/setup/create/+page.svelte
index 7884a0d996..903e82d364 100644
--- a/web-wallet/src/routes/(welcome)/setup/create/+page.svelte
+++ b/web-wallet/src/routes/(welcome)/setup/create/+page.svelte
@@ -33,7 +33,7 @@
   let isValidPassword = false;
 
   /** @type {boolean} */
-  let showPasswordSetup = false;
+  let showPasswordSetup = true;
 
   /** @type {boolean} */
   let agreementAccepted = false;
diff --git a/web-wallet/src/routes/(welcome)/setup/create/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(welcome)/setup/create/__tests__/__snapshots__/page.spec.js.snap
index 742791db0a..96a72e77c4 100644
--- a/web-wallet/src/routes/(welcome)/setup/create/__tests__/__snapshots__/page.spec.js.snap
+++ b/web-wallet/src/routes/(welcome)/setup/create/__tests__/__snapshots__/page.spec.js.snap
@@ -2020,7 +2020,7 @@ exports[`Create > ensures the Password step renders as expected 1`] = `
           class="dusk-card__header-controls-wrapper"
         >
           <div
-            aria-checked="false"
+            aria-checked="true"
             aria-disabled="false"
             class="dusk-switch dusk-switch--on-surface"
             role="switch"
@@ -2041,6 +2041,40 @@ exports[`Create > ensures the Password step renders as expected 1`] = `
       </header>
     </div>
      
+    <div
+      class="dusk-card__body-container"
+    >
+      <p>
+        Please store your password safely.
+      </p>
+       
+      <input
+        autocomplete="new-password"
+        class="dusk-textbox dusk-textbox-password password-input"
+        placeholder="Set Password"
+        type="password"
+      />
+      
+       
+      <div
+        class="confirm-password"
+      >
+        <input
+          autocomplete="new-password"
+          class="dusk-textbox dusk-textbox-password password-input"
+          placeholder="Confirm Password"
+          type="password"
+        />
+        
+         
+        <span
+          class="confirm-password--meta svelte-ww95yl"
+        >
+          Password must be at least 8 characters
+        </span>
+      </div>
+      
+    </div>
      
   </div>
   
@@ -2063,13 +2097,13 @@ exports[`Create > ensures the Password step renders as expected 1`] = `
       <strong
         class="banner__title"
       >
-        Setting a password for your web wallet is optional.
+        Setting a password for your web wallet is recommended.
       </strong>
        
       <p>
-        Doing so allows you the convenience of accessing your wallet using a
-    password, but it weakens the overall security. Not using a password requires
-    you to input the full mnemonic to open your wallet.
+        Without a password, you will need to input your full mnemonic each time to
+    access your wallet. This could expose your mnemonic to potential threats.
+    Setting a password is highly recommended for better wallet security.
       </p>
     </div>
   </div>
@@ -2103,6 +2137,7 @@ exports[`Create > ensures the Password step renders as expected 1`] = `
      
     <button
       class="dusk-button dusk-button--type--button dusk-button--variant--tertiary dusk-button--size--default dusk-icon-button--labeled"
+      disabled=""
       type="button"
     >
       <span
@@ -2228,7 +2263,7 @@ exports[`Create > ensures the Password step renders as expected 2`] = `
           class="dusk-card__header-controls-wrapper"
         >
           <div
-            aria-checked="true"
+            aria-checked="false"
             aria-disabled="false"
             class="dusk-switch dusk-switch--on-surface"
             role="switch"
@@ -2249,40 +2284,6 @@ exports[`Create > ensures the Password step renders as expected 2`] = `
       </header>
     </div>
      
-    <div
-      class="dusk-card__body-container"
-    >
-      <p>
-        Please store your password safely.
-      </p>
-       
-      <input
-        autocomplete="new-password"
-        class="dusk-textbox dusk-textbox-password password-input"
-        placeholder="Set Password"
-        type="password"
-      />
-      
-       
-      <div
-        class="confirm-password"
-      >
-        <input
-          autocomplete="new-password"
-          class="dusk-textbox dusk-textbox-password password-input"
-          placeholder="Confirm Password"
-          type="password"
-        />
-        
-         
-        <span
-          class="confirm-password--meta svelte-ww95yl"
-        >
-          Password must be at least 8 characters
-        </span>
-      </div>
-      
-    </div>
      
   </div>
   
@@ -2305,13 +2306,13 @@ exports[`Create > ensures the Password step renders as expected 2`] = `
       <strong
         class="banner__title"
       >
-        Setting a password for your web wallet is optional.
+        Setting a password for your web wallet is recommended.
       </strong>
        
       <p>
-        Doing so allows you the convenience of accessing your wallet using a
-    password, but it weakens the overall security. Not using a password requires
-    you to input the full mnemonic to open your wallet.
+        Without a password, you will need to input your full mnemonic each time to
+    access your wallet. This could expose your mnemonic to potential threats.
+    Setting a password is highly recommended for better wallet security.
       </p>
     </div>
   </div>
@@ -2345,7 +2346,6 @@ exports[`Create > ensures the Password step renders as expected 2`] = `
      
     <button
       class="dusk-button dusk-button--type--button dusk-button--variant--tertiary dusk-button--size--default dusk-icon-button--labeled"
-      disabled=""
       type="button"
     >
       <span
diff --git a/web-wallet/src/routes/(welcome)/setup/create/__tests__/page.spec.js b/web-wallet/src/routes/(welcome)/setup/create/__tests__/page.spec.js
index 350a7139e4..9712a27bd7 100644
--- a/web-wallet/src/routes/(welcome)/setup/create/__tests__/page.spec.js
+++ b/web-wallet/src/routes/(welcome)/setup/create/__tests__/page.spec.js
@@ -273,12 +273,12 @@ describe("Create", async () => {
 
     await fireEvent.click(getByRole("button", { name: "Next" }));
 
-    // Password disabled
+    // Password enabled
     expect(container.firstChild).toMatchSnapshot();
 
     await fireEvent.click(getByRole("switch"));
 
-    // Password enabled
+    // Password disabled
     expect(container.firstChild).toMatchSnapshot();
   });
 
@@ -405,7 +405,10 @@ describe("Create", async () => {
     await fireEvent.click(getByRole("button", { name: "Next" }));
 
     // Set Password step
+    await fireEvent.click(getByRole("switch"));
+
     await fireEvent.click(getByRole("button", { name: "Next" }));
+
     expect(loginInfoStorage.get()).toBeNull();
 
     // Swap ERC20 to Native Dusk step
@@ -472,8 +475,6 @@ describe("Create", async () => {
     // Set Password step
     expect(loginInfoStorage.get()).toBeNull();
 
-    await fireEvent.click(getByRole("switch"));
-
     await fireInput(asInput(getByPlaceholderText("Set Password")), pwd);
     await fireInput(asInput(getByPlaceholderText("Confirm Password")), pwd);
 
diff --git a/web-wallet/src/routes/(welcome)/setup/restore/+page.svelte b/web-wallet/src/routes/(welcome)/setup/restore/+page.svelte
index 4b9a07025e..723304ce63 100644
--- a/web-wallet/src/routes/(welcome)/setup/restore/+page.svelte
+++ b/web-wallet/src/routes/(welcome)/setup/restore/+page.svelte
@@ -37,7 +37,7 @@
   let isSyncCompleted = false;
 
   /** @type {boolean} */
-  let showPasswordSetup = false;
+  let showPasswordSetup = true;
 
   /** @type {boolean} */
   let isValidMnemonic = false;
diff --git a/web-wallet/src/routes/(welcome)/setup/restore/__tests__/page.spec.js b/web-wallet/src/routes/(welcome)/setup/restore/__tests__/page.spec.js
index 9312f84c32..8bd6ca7f97 100644
--- a/web-wallet/src/routes/(welcome)/setup/restore/__tests__/page.spec.js
+++ b/web-wallet/src/routes/(welcome)/setup/restore/__tests__/page.spec.js
@@ -155,6 +155,8 @@ describe("Restore", async () => {
     await fireEvent.click(nextButton);
 
     // Set Password step
+    await fireEvent.click(getByRole("switch"));
+
     await fireEvent.click(getByRole("button", { name: "Next" }));
     expect(loginInfoStorage.get()).toBeNull();
 
@@ -202,8 +204,6 @@ describe("Restore", async () => {
     // Set Password step
     expect(loginInfoStorage.get()).toBeNull();
 
-    await fireEvent.click(getByRole("switch"));
-
     await fireInput(asInput(getByPlaceholderText("Set Password")), pwd);
     await fireInput(asInput(getByPlaceholderText("Confirm Password")), pwd);
 
diff --git a/web-wallet/src/routes/components-showcase/Banners.svelte b/web-wallet/src/routes/components-showcase/Banners.svelte
index f03a7b26ac..9f252c1ee7 100644
--- a/web-wallet/src/routes/components-showcase/Banners.svelte
+++ b/web-wallet/src/routes/components-showcase/Banners.svelte
@@ -19,13 +19,13 @@
   </Banner>
   <h3>Long Content</h3>
   <Banner
-    title="Setting a password for your web wallet is optional."
+    title="Setting a password for your web wallet is recommended."
     variant="info"
   >
     <p>
-      Doing so allows you the convenience of opening your wallet file using a
-      password, but it weakens the overall security. Not using a password
-      requires you to input the full mnemonic to open your wallet.
+      Without a password, you will need to input your full mnemonic each time to
+      access your wallet. This could expose your mnemonic to potential threats.
+      Setting a password is highly recommended for better wallet security.
     </p>
   </Banner>
 </section>