Display errors in pretty format

This is a considerable improvement over dumping them in an alert()!
This commit is contained in:
Badri Sunderarajan 2022-08-05 10:54:37 +05:30 committed by Badri
parent 192ba69ae3
commit 9f2c248e41

View file

@ -8,12 +8,13 @@
export let bio: string; export let bio: string;
let slugIsAuto = true; let slugIsAuto = true;
let errors = [];
function generateAuthor(e) { function generateAuthor(e) {
e.preventDefault() e.preventDefault()
// Check the formatting // Check the formatting
let errors = [] errors = []
// First, make sure the required fields are filled // First, make sure the required fields are filled
for (let [k,v] of [ for (let [k,v] of [
@ -34,9 +35,7 @@
// Validate slug formatting // Validate slug formatting
if (errors.length) { if (!errors.length) {
alert(`There are some errors: ${errors}`)
} else {
alert(`Name: ${name} email, ${email} has slug ${slug} and bio ${bio}`) alert(`Name: ${name} email, ${email} has slug ${slug} and bio ${bio}`)
} }
} }
@ -87,6 +86,17 @@
<p>Enter your new author details below. Once done, click on the "Generate" button to receive a special file that you can import to Ghost to add the author details to the "staff". This will let you select them as the author when publishing a post.</p> <p>Enter your new author details below. Once done, click on the "Generate" button to receive a special file that you can import to Ghost to add the author details to the "staff". This will let you select them as the author when publishing a post.</p>
<form> <form>
{#if errors.length}
<fieldset class="errors">
<legend>Errors</legend>
<ul>
{#each errors as error}
<li>{error}</li>
{/each}
</ul>
</fieldset>
{/if}
<fieldset> <fieldset>
<legend>{name || 'Author'}</legend> <legend>{name || 'Author'}</legend>
@ -129,6 +139,15 @@
display: inline-block; display: inline-block;
} }
.errors {
color: red;
border-color: red;
}
fieldset.errors ul {
list-style-type: none;
}
@media (min-width: 640px) { @media (min-width: 640px) {
main { main {
max-width: 480px; max-width: 480px;