Proper error handling and css tweak for guestbooks

6 files changed, 29 insertions, 25 deletions

diff --git a/bun.lockb b/bun.lockb
index 2b453b7..21a9670 100755
--- a/bun.lockb
+++ b/bun.lockb
diff --git a/package.json b/package.json
index caa90ca..89e4038 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,6 @@
     "@astrojs/rss": "4.0.4",
     "@astrojs/vercel": "7.1.1",
     "@iconify-json/fa6-brands": "^1.1.18",
-    "@vitejs/plugin-vue": "^5.0.3",
     "astro": "4.3.2",
     "astro-icon": "^1.0.2",
     "dompurify": "^3.0.8",
@@ -24,4 +23,4 @@
     "preact": "^10.19.3",
     "sanitize-html": "^2.11.0"
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/GuestbookForm.jsx b/src/components/GuestbookForm.jsx
index 841902d..26e32b1 100644
--- a/src/components/GuestbookForm.jsx
+++ b/src/components/GuestbookForm.jsx
@@ -24,19 +24,27 @@ class GuestbookForm extends Component {
             return;
         }
 
-        const messageHtml = marked(DOMPurify.sanitize(this.state.message));
-        await createMessage({ ...this.state, message: messageHtml });
+        try {
+            const messageHtml = marked(DOMPurify.sanitize(this.state.message));
+            await createMessage({ ...this.state, message: messageHtml });
 
-        this.setState({
-            name: '',
-            email: '',
-            website: '',
-            message: '',
-            isMessageSent: true,
-        });
+            this.setState({
+                name: '',
+                email: '',
+                website: '',
+                message: '',
+                isMessageSent: true,
+                errorMessage: '',
+            });
 
-        if (this.props.onMessageSent) {
-            this.props.onMessageSent();
+            if (this.props.onMessageSent) {
+                this.props.onMessageSent();
+            }
+        } catch (error) {
+            this.setState({
+                errorMessage: `There was an error submitting your message.<br>Details: ${error}<br>Check the console for more details.`,
+                isMessageSent: false,
+            });
         }
     }
 
@@ -45,20 +53,21 @@ class GuestbookForm extends Component {
             <div class="card">
                 <form onSubmit={this.handleSubmit}>
                     <h2>Submit Message</h2>
-                    <label>Name</label>
+                    <label for="name">Name</label>
                     <input type="text" name="name" placeholder="John Doe" required value={this.state.name}
                            onChange={this.handleChange}/>
-                    <label>Email Address</label>
+                    <label for="email">Email Address</label>
                     <input type="email" name="email" placeholder="hello@example.com (optional)" value={this.state.email}
                            onChange={this.handleChange}/>
-                    <label>Your Website</label>
+                    <label for="website">Your Website</label>
                     <input type="url" name="website" placeholder="https://example.com (optional)"
                            value={this.state.website} onChange={this.handleChange}/>
-                    <label>Message (Supports Markdown)</label>
+                    <label for="message">Message (Supports Markdown)</label>
                     <textarea name="message" placeholder="This is a **message**. I can *do* this, and __this__." required value={this.state.message}
                               onChange={this.handleChange}></textarea>
                     <button type="submit">Send</button>
                 </form>
+                {this.state.errorMessage && <p dangerouslySetInnerHTML={{ __html: this.state.errorMessage }} />}
                 {this.state.isMessageSent && <p>Sent successfully!</p>}
             </div>
         );
diff --git a/src/layouts/Default.astro b/src/layouts/Default.astro
index 4f3c87a..72851a4 100644
--- a/src/layouts/Default.astro
+++ b/src/layouts/Default.astro
@@ -43,8 +43,7 @@ const date = new Date();
 		<slot />
 		<footer>
 			<p>Made with {Astro.generator} and Hosted on Vercel</p>
-			<p>Copyright &copy; {date.getFullYear()} Andrew Lee</p>
-			<p><a href="https://github.com/Alee14/personal-website">View source code.</a></p>
+			<p>Copyright &copy; {date.getFullYear()} Andrew Lee. <a href="https://github.com/Alee14/personal-website">View source code.</a></p>
 		</footer>
 	</div>
 	</body>
diff --git a/src/services/GuestbookService.js b/src/services/GuestbookService.js
index eebb8e5..53376d7 100644
--- a/src/services/GuestbookService.js
+++ b/src/services/GuestbookService.js
@@ -5,5 +5,6 @@ export async function createMessage(data) {
         return await pb.collection('guestbook').create(data);
     } catch (error) {
         console.error(error);
+        throw error;
     }
 }
diff --git a/src/styles/GuestbookForm.css b/src/styles/GuestbookForm.css
index e540d42..42a5f8f 100644
--- a/src/styles/GuestbookForm.css
+++ b/src/styles/GuestbookForm.css
@@ -8,9 +8,9 @@
 .card form textarea {
     padding: 10px;
     border-radius: 5px;
-    background: #2c2c2c;
+    background: #253625;
     color: #FFFFFF;
-    border: 1px solid #4b4b4b;
+    border: 1px solid #253625;
 }
 
 .card form textarea[name="message"] {
@@ -35,7 +35,3 @@
 .card form button:active {
     background-color: #243824;
 }
-
-.card form label {
-    display: block;
-}