From c5eddde23f733ad90bf3dd2f94dad2e722a7f4d6 Mon Sep 17 00:00:00 2001
From: Sebastian Martinez <me@sebastinez.dev>
Date: Mon, 22 Aug 2022 11:18:16 +0200
Subject: [PATCH] Add a name validation for dots at registration

Signed-off-by: Sebastian Martinez <me@sebastinez.dev>
---
 src/base/registrations/Index.svelte | 37 +++++++++++++++++++++++------
 1 file changed, 30 insertions(+), 7 deletions(-)

diff --git a/src/base/registrations/Index.svelte b/src/base/registrations/Index.svelte
index af0f1feb8..f37df890c 100644
--- a/src/base/registrations/Index.svelte
+++ b/src/base/registrations/Index.svelte
@@ -11,7 +11,25 @@
   function register() {
     navigate(`/registrations/${label}/form`);
   }
+
+  function validate(input: string): string[] {
+    const errors: string[] = [];
+
+    if (input && input.includes(".")) {
+      errors.push("Please do not use dots as separators.");
+    }
+    if (input && input.length < 2) {
+      errors.push("Please enter a minimum of 2 characters.");
+    }
+    if (input && input.length > 128) {
+      errors.push("Please enter a maximum of 128 characters.");
+    }
+
+    return errors;
+  }
+
   $: label = input.trim();
+  $: errors = validate(label);
 </script>
 
 <style>
@@ -65,16 +83,21 @@
           placeholder=""
           root={config.registrar.domain}
         />
-        {#if label && label.length < 2}
-          <span class="input-info">Please enter a minimum of 2 characters.</span>
-        {:else if label && label.length > 128}
-          <span class="input-info">Please enter a maximum of 128 characters.</span>
+        {#if errors}
+          <div class="input-info">
+            {#each errors as error}
+              <div>{error}</div>
+            {/each}
+          </div>
         {/if}
       </span>
 
-      <button disabled={!label || label.length < 2 || label.length > 128} class="primary register regular" on:click={register}>
-        Check
-      </button>
+        <button
+          disabled={!label || errors.length !== 0}
+          class="primary register regular"
+          on:click={register}>
+            Check
+        </button>
     </div>
   </div>
 </main>