Repository: dusk-network/rusk (language: rust)

Issue:
web-wallet: Make setting the password the default
#### Summary
Currently the default is not setting a password, which can be a large security risk for users for multiple reasons. By default, we should at least recommend sane defaults to users where the security advantages are high, but the UX does not suffer. Making the setting of a password the default is one of these.

#### Possible solution design or implementation
Make the password view the default.


Discussion / hints:

Fix patch:
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/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/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>


Test patch:
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/__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);