Handle error in AssigneeInput when chars outside of the bs58 charset

Also improves the UX and only shows validation errors on submit, and not
during input.

src/lib/utils.ts

@@ -18,10 +18,16 @@ export function parseNodeId(
 ): { prefix: string; pubkey: string } | undefined {
   const match = /^(did:key:)?(z[a-zA-Z0-9]+)$/.exec(nid);
   if (match) {
-    const hex = bs58.decode(match[2].substring(1));
+    let hex: Uint8Array | undefined = undefined;
+    try {
+      hex = bs58.decode(match[2].substring(1));
+    } catch (error) {
+      console.error("utils.parseNodId: Not able to decode received NID", error);
+      return undefined;
+    }
     // This checks also that the first 2 bytes are equal
     // to the ed25519 public key type used.
-    if (!(hex.byteLength === 34 && hex[0] === 0xed && hex[1] === 1)) {
+    if (hex && !(hex.byteLength === 34 && hex[0] === 0xed && hex[1] === 1)) {
       return undefined;
     }
 

src/views/projects/Cob/AssigneeInput.svelte

@@ -23,34 +23,39 @@
   let updatedAssignees: Reaction["authors"] = assignees;
   let inputValue = "";
   let validationMessage: string | undefined = undefined;
-  let valid: boolean = false;
   let assignee: string | undefined = undefined;
 
   const removeToggles: Record<string, boolean> = {};
 
+  // Clear validationMessage if inputValue changes
   $: {
-    if (inputValue !== "") {
+    inputValue;
+    validationMessage = undefined;
+  }
+
+  function validateInput(input: string): boolean {
+    if (input !== "") {
       const parsedNodeId = parseNodeId(inputValue);
       if (parsedNodeId) {
         assignee = `${parsedNodeId.prefix}${parsedNodeId.pubkey}`;
         if (updatedAssignees.find(({ id }) => id === assignee)) {
-          valid = false;
           validationMessage = "This assignee is already added";
+          return false;
         } else {
-          valid = true;
           validationMessage = undefined;
+          return true;
         }
       } else {
-        valid = false;
         validationMessage = "This assignee is not valid";
       }
     } else {
-      valid = false;
       validationMessage = "";
     }
+    return false;
   }
 
   function addAssignee() {
+    const valid = validateInput(inputValue);
     if (valid && assignee) {
       updatedAssignees = [...updatedAssignees, { id: assignee }];
       inputValue = "";
@@ -121,7 +126,6 @@
         <div
           style="width:100%; display: flex; align-items: center; gap: 0.5rem;">
           <TextInput
-            {valid}
             autofocus
             disabled={submitInProgress}
             bind:value={inputValue}
@@ -131,6 +135,7 @@
             title="discard assignee"
             on:click={() => {
               inputValue = "";
+              validationMessage = undefined;
               showInput = false;
             }}>
             <IconSmall name="cross" />
@@ -139,7 +144,7 @@
             <IconSmall name="checkmark" />
           </IconButton>
         </div>
-        {#if !valid && validationMessage}
+        {#if validationMessage}
           <div class="validation-message">
             <IconSmall name="exclamation-circle" />{validationMessage}
           </div>

tests/e2e/project/assignees.spec.ts

@@ -39,6 +39,7 @@ test("add and remove assignees", async ({ page, authenticatedPeer }) => {
   await page
     .getByPlaceholder("Add assignee")
     .fill("z6MktULudTtAsAhRegYPiZ6631RV3viv12qd4GQF8z1xB22S");
+  await page.getByRole("button", { name: "save assignee" }).click();
   await expect(page.getByText("This assignee is already added")).toBeVisible();
   await page.getByPlaceholder("Add assignee").clear();
   await expect(page.getByText("This assignee is already added")).toBeHidden();

tests/unit/utils.test.ts

@@ -135,6 +135,10 @@ describe("Parse Functions", () => {
       input: "did:key:z6Mkmz…md6fz6",
       expected: undefined,
     },
+    {
+      input: "zlatan",
+      expected: undefined,
+    },
     {
       input: "z6MkmzRwg47UWQxczLLLFfkEwpBGitjzJ1vKPE8U9ymd6fz6",
       expected: {