From 9f2c248e4135239a4941fb64463c6313d96d54e5 Mon Sep 17 00:00:00 2001
From: Badri Sunderarajan <badri@snipettemag.com>
Date: Fri, 5 Aug 2022 10:54:37 +0530
Subject: [PATCH] Display errors in pretty format

This is a considerable improvement over dumping them in an alert()!
---
 src/App.svelte | 27 +++++++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 2d540f3..1904312 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -8,12 +8,13 @@
   export let bio: string;
 
   let slugIsAuto = true;
+  let errors = [];
 
   function generateAuthor(e) {
     e.preventDefault()
 
     // Check the formatting
-    let errors = []
+    errors = []
 
     // First, make sure the required fields are filled
     for (let [k,v] of [
@@ -34,9 +35,7 @@
 
     // Validate slug formatting
 
-    if (errors.length) {
-      alert(`There are some errors: ${errors}`)
-    } else {
+    if (!errors.length) {
       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>
 
   <form>
+    {#if errors.length}
+    <fieldset class="errors">
+      <legend>Errors</legend>
+
+      <ul>
+        {#each errors as error}
+        <li>{error}</li>
+        {/each}
+      </ul>
+    </fieldset>
+    {/if}
     <fieldset>
 
       <legend>{name || 'Author'}</legend>
@@ -129,6 +139,15 @@
     display: inline-block;
   }
 
+  .errors {
+    color: red;
+    border-color: red;
+  }
+
+  fieldset.errors ul {
+    list-style-type: none;
+  }
+
 	@media (min-width: 640px) {
 		main {
 			max-width: 480px;