Merge pull request #2356 from dusk-network/feature-2355

web-wallet: Restrict mnemonic step input to alphabetical characters (Restore Flow)

web-wallet/CHANGELOG.md

@@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Restrict mnemonic step input to alphabetical characters (Restore Flow) [#2355]
 - Newly created Wallet does not sync from genesis [#1567]
 - Update font-display to swap for custom fonts to improve performance [#2026]
 - Update anchor colors to ensure better accessibility [#1765]
@@ -255,6 +256,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [#2014]: https://github.com/dusk-network/rusk/issues/2014
 [#2303]: https://github.com/dusk-network/rusk/issues/2303
 [#2310]: https://github.com/dusk-network/rusk/issues/2310
+[#2355]: https://github.com/dusk-network/rusk/issues/2355
 
 <!-- VERSIONS -->
 

web-wallet/src/lib/dusk/components/Mnemonic/Mnemonic.svelte

@@ -57,11 +57,25 @@
   }
 
   /**
-   * Adds word to the entered phrase if only one suggestion is available
-   * @param {{ key: string }} event
+   * Prevents non-alphabetical characters from being entered
+   * and auto-selects the first suggestion on Enter
+   * if there is only one word available
+   * @param {KeyboardEvent} event
    * @param {string} index
    */
   function handleKeyDownOnAuthenticateTextbox(event, index) {
+    const isAlphabetical = /^[a-zA-Z]+$/;
+
+    if (!isAlphabetical.test(event.key)) {
+      event.preventDefault();
+      toast(
+        "error",
+        "Only alphabetical characters are allowed",
+        mdiAlertOutline
+      );
+      return;
+    }
+
     if (event.key === "Enter" && suggestions.length === 1) {
       updateEnteredPhrase(suggestions[0], index);
     }