Device Alias form has validation factors: (#813)

* Device Alias form validation has validation factors:

- Max length of 30 characters
- Name can not start with a space
- Name should not contain special characters (only alphanumeric characters, underscore character, and hyphen or space in the middle are allowed)

* Lint Formatting

* Regex pattern explained.
Better formatting and js logic

src/frontend/src/flows/addDevice/manage/addDevicePickAlias.ts

@@ -1,5 +1,10 @@
 import { html, render } from "lit-html";
 import { initLogout, logoutSection } from "../../../components/logout";
+import { validateAlias } from "../validateAlias";
+// Regex Pattern for input: All characters, must be alphabet or number
+// Can have hyphen(s), space(s) or underscore(s) in the middle.
+// Good examples: "2019_macbook", "2019-Macbook", "2019 Macbook"
+// Bad examples: "2019 macbook!", "2010 macbook_", "space trails at end "
 
 const pageContent = () => html`
   <div class="container">
@@ -13,6 +18,9 @@ const pageContent = () => html`
         placeholder="Device alias"
         type="text"
         required
+        maxlength="30"
+        pattern="^[A-Za-z0-9]+((-|\\s|_)*[A-Za-z0-9])*$"
+        spellcheck="false"
       />
       <button type="submit" id="deviceAliasContinue" class="primary">
         Add Device
@@ -51,4 +59,16 @@ const init = (): Promise<string | null> =>
       event.preventDefault();
       resolve(deviceAlias.value);
     };
+    const deviceInput = document.getElementById(
+      "deviceAlias"
+    ) as HTMLInputElement;
+
+    deviceInput.addEventListener("invalid", () => {
+      const message = validateAlias(deviceInput.validity, deviceInput.value);
+      deviceInput.setCustomValidity(message);
+    });
+    deviceInput.addEventListener("input", () => {
+      deviceInput.setCustomValidity("");
+      deviceInput.reportValidity();
+    });
   });

src/frontend/src/flows/addDevice/validateAlias.ts

@@ -0,0 +1,25 @@
+export const validateAlias = (
+  {
+    valueMissing,
+    patternMismatch,
+  }: { valueMissing: boolean; patternMismatch: boolean },
+  value: string
+): string => {
+  let message = "";
+  if (valueMissing) {
+    message = "Please fill out this field.";
+  } else if (patternMismatch) {
+    if (value.startsWith(" ")) {
+      message = "Name can't start with a space.";
+    } else if (
+      value.endsWith(" ") ||
+      value.endsWith("-") ||
+      value.endsWith("_")
+    ) {
+      message = "Name can't end with a space, hyphen or underscore.";
+    } else {
+      message = "Name can't contain special characters.";
+    }
+  }
+  return message;
+};

src/frontend/src/flows/register.ts

@@ -14,13 +14,23 @@ import {
 } from "./login/flowResult";
 import { nextTick } from "process";
 import { icLogo } from "../components/icons";
+import { validateAlias } from "./addDevice/validateAlias";
 
 const pageContent = html`
   <div class="container">
     <h1>Create a new Internet Identity Anchor</h1>
     <form id="registerForm">
       <p>Please provide a name for your device.</p>
-      <input id="registerAlias" placeholder="Device name" />
+      <input
+        id="registerAlias"
+        placeholder="Device name"
+        aria-label="device name"
+        type="text"
+        required
+        maxlength="30"
+        pattern="^[A-Za-z0-9]+((-|\\s|_)*[A-Za-z0-9])*$"
+        spellcheck="false"
+      />
       <button type="submit" class="primary">Create</button>
       <button id="registerCancel" type="button">Cancel</button>
     </form>
@@ -101,6 +111,23 @@ const init = (connection: Connection): Promise<LoginFlowResult | null> =>
         reject(err);
       }
     };
+
+    const registerAlias = document.getElementById(
+      "registerAlias"
+    ) as HTMLInputElement;
+
+    registerAlias.addEventListener("invalid", () => {
+      const message = validateAlias(
+        registerAlias.validity,
+        registerAlias.value
+      );
+      registerAlias.setCustomValidity(message);
+    });
+
+    registerAlias.addEventListener("input", () => {
+      registerAlias.setCustomValidity("");
+      registerAlias.reportValidity();
+    });
   });
 
 const tick = (): Promise<void> => new Promise((resolve) => nextTick(resolve));