Validate fields (and auto-update slug)

The slug is intelligently computed from the other fields, until
the user decides to manually override it.

package.json

@@ -11,6 +11,8 @@
   "devDependencies": {
     "@rollup/plugin-commonjs": "^17.0.0",
     "@rollup/plugin-node-resolve": "^11.0.0",
+    "@rollup/plugin-typescript": "^8.0.0",
+    "@tsconfig/svelte": "^2.0.0",
     "rollup": "^2.3.4",
     "rollup-plugin-css-only": "^3.1.0",
     "rollup-plugin-livereload": "^2.0.0",
@@ -19,12 +21,12 @@
     "svelte": "^3.0.0",
     "svelte-check": "^2.0.0",
     "svelte-preprocess": "^4.0.0",
-    "@rollup/plugin-typescript": "^8.0.0",
-    "typescript": "^4.0.0",
     "tslib": "^2.0.0",
-    "@tsconfig/svelte": "^2.0.0"
+    "typescript": "^4.0.0"
   },
   "dependencies": {
-    "sirv-cli": "^2.0.0"
+    "email-validator": "^2.0.4",
+    "sirv-cli": "^2.0.0",
+    "slug": "^5.3.0"
   }
-}
+}

src/App.svelte

@@ -1,12 +1,80 @@
 <script lang="ts">
+  import * as EmailValidator from 'email-validator'
+  import Slug from 'slug'
+
 	export let name: string;
   export let email: string;
   export let slug: string;
   export let bio: string;
 
+  let slugIsAuto = true;
+
   function generateAuthor(e) {
     e.preventDefault()
-    alert(`Name: ${name} email, ${email} has slug ${slug} and bio ${bio}`)
+
+    // Check the formatting
+    let errors = []
+
+    // First, make sure the required fields are filled
+    for (let [k,v] of [
+      ['name', name],
+      ['email', email],
+      ['slug', slug]])
+    {
+      console.log(`it is ${k} called ${v}`)
+      if (!v) {
+        errors.push(`${k} cannot be left blank`)
+      }
+    }
+
+    // Validate email formatting
+    if (!EmailValidator.validate(email)) {
+      errors.push(`"${email}" is not a valid email address`)
+    }
+
+    // Validate slug formatting
+
+    if (errors.length) {
+      alert(`There are some errors: ${errors}`)
+    } else {
+      alert(`Name: ${name} email, ${email} has slug ${slug} and bio ${bio}`)
+    }
+  }
+
+  function computeSlug() {
+    /*
+      Compute the slug from email or name, if it
+      isn't already computed.
+    */
+    if (!slug || slugIsAuto) {
+      if (email) {
+        slug = Slug(email.split('@')[0])
+      } else if (name) {
+        slug = Slug(name)
+      }
+    }
+
+    /*
+      Of course, if neither email nor name is
+      set, then we can't do anything about it
+    */
+  }
+
+  function updateSlug() {
+    /*
+      Marks the slug as manually set (which means
+      we should stop doing our automatic stuff)
+    */
+
+    if (slug) {
+      slugIsAuto = false
+
+      // slugify it, just in case
+      slug = Slug(slug)
+    } else {
+      slugIsAuto = true
+      computeSlug()
+    }
   }
 </script>
 
@@ -21,17 +89,17 @@
 
       <div>
         <label for="input-name">Name</label>
-        <input id="input-name" name="name" bind:value={name}/>
+        <input id="input-name" name="name" bind:value={name} on:change={computeSlug}/>
       </div>
 
       <div>
         <label for="input-email">Email</label>
-        <input id="input-email" name="email" type="email" bind:value={email}/>
+        <input id="input-email" name="email" type="email" bind:value={email} on:change={computeSlug}/>
       </div>
 
       <div>
         <label for="input-slug">Slug</label>
-        <input id="input-slug" name="slug" bind:value={slug}/>
+        <input id="input-slug" name="slug" bind:value={slug} on:change={updateSlug}/>
       </div>
 
       <div>

yarn.lock

@@ -309,6 +309,11 @@ detect-indent@^6.0.0:
   resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-6.1.0.tgz#592485ebbbf6b3b1ab2be175c8393d04ca0d57e6"
   integrity sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==
 
+email-validator@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/email-validator/-/email-validator-2.0.4.tgz#b8dfaa5d0dae28f1b03c95881d904d4e40bfe7ed"
+  integrity sha512-gYCwo7kh5S3IDyZPLZf6hSS0MnZT8QmJFqYvbqlDZSbwdZlY6QZWxJ4i/6UhITOJ4XzyI647Bm2MXKCLqnJ4nQ==
+
 es6-promise@^3.1.2:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-3.3.1.tgz#a08cdde84ccdbf34d027a1451bc91d4bcd28a613"
@@ -786,6 +791,11 @@ sirv@^2.0.0:
     mrmime "^1.0.0"
     totalist "^3.0.0"
 
+slug@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/slug/-/slug-5.3.0.tgz#d63d3a5a88d5508c1adcf2b8aeeb045c3f43760b"
+  integrity sha512-h7yD2UDVyMcQRv/WLSjq7HDH6ToO/22MB381zfx6/ebtdWUlGcyxpJNVHl6WFvKjIMHf5ZxANFp/srsy4mfT/w==
+
 sorcery@^0.10.0:
   version "0.10.0"
   resolved "https://registry.yarnpkg.com/sorcery/-/sorcery-0.10.0.tgz#8ae90ad7d7cb05fc59f1ab0c637845d5c15a52b7"