Validate fields (and auto-update slug)

The slug is intelligently computed from the other fields, until
the user decides to manually override it.
This commit is contained in:
Badri Sunderarajan 2022-08-05 10:27:32 +05:30 committed by Badri
parent e74ea1b4cd
commit 80427068ea
3 changed files with 89 additions and 9 deletions

View file

@ -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"
}
}
}

View file

@ -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>

View file

@ -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"