Proper error handling and css tweak for guestbooks

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

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>
         );

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>

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;
     }
 }

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;
-}