From 6cd9fb7c8964f8f1b3cc8137bbda45a633e62587 Mon Sep 17 00:00:00 2001
From: Andrew Lee <alee14498@protonmail.com>
Date: Sun, 4 Feb 2024 16:48:49 -0500
Subject: Update AstroJS; sanitize HTML and markdown support in Guestbook form

---
 src/components/GuestbookForm.jsx | 75 +++++++++++++++++++++++-----------------
 1 file changed, 44 insertions(+), 31 deletions(-)

(limited to 'src/components/GuestbookForm.jsx')

diff --git a/src/components/GuestbookForm.jsx b/src/components/GuestbookForm.jsx
index aae5e10..b8fc1c2 100644
--- a/src/components/GuestbookForm.jsx
+++ b/src/components/GuestbookForm.jsx
@@ -1,12 +1,16 @@
 import { h, Component } from 'preact';
 import { createMessage } from '../services/GuestbookService';
+import '../styles/GuestbookForm.css';
+import { marked } from "marked";
+import DOMPurify from 'dompurify';
 
 class GuestbookForm extends Component {
     state = {
         name: '',
         email: '',
         website: '',
-        message: ''
+        message: '',
+        isMessageSent: false,
     };
 
     handleChange = (e) => {
@@ -15,40 +19,49 @@ class GuestbookForm extends Component {
 
     handleSubmit = async (e) => {
         e.preventDefault();
-        await createMessage(this.state);
-        this.setState({
-            name: '',
-            email: '',
-            website: '',
-            message: ''
-        });
+
+        if (this.state.isMessageSent) {
+            return;
+        }
+
+        const messageHtml = marked(DOMPurify.sanitize(this.state.message));
+        try {
+            await createMessage({ ...this.state, message: messageHtml });
+
+            this.setState({
+                name: '',
+                email: '',
+                website: '',
+                message: '',
+                isMessageSent: true,
+                errorMessage: ''
+            });
+        } catch (error) {
+            this.setState({ errorMessage: error.message });
+        }
     }
 
     render() {
         return (
-            <form class="card" onSubmit={this.handleSubmit}>
-                <h2>Submit Message</h2>
-                <label>
-                    Name<br />
-                    <input type="text" name="name" placeholder="Name" required value={this.state.name} onChange={this.handleChange} />
-                </label>
-                <br />
-                <label>
-                    Email Address<br />
-                    <input type="email" name="email" placeholder="Email Address (optional)" value={this.state.email} onChange={this.handleChange} />
-                </label>
-                <br />
-                <label>
-                    Your Website<br />
-                    <input type="url" name="website" placeholder="https://example.com (optional)" value={this.state.website} onChange={this.handleChange} />
-                </label>
-                <br />
-                <label>
-                    Message<br />
-                    <textarea name="message" placeholder="Message (Up to 1000 characters)" required value={this.state.message} onChange={this.handleChange}></textarea>
-                </label>
-                <button type="submit">Send</button>
-            </form>
+            <div class="card">
+                <form onSubmit={this.handleSubmit}>
+                    <h2>Submit Message</h2>
+                    <label>Name</label>
+                    <input type="text" name="name" placeholder="Name" required value={this.state.name}
+                           onChange={this.handleChange}/>
+                    <label>Email Address</label>
+                    <input type="email" name="email" placeholder="hello@example.com (optional)" value={this.state.email}
+                           onChange={this.handleChange}/>
+                    <label>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>
+                    <textarea name="message" placeholder="Message" required value={this.state.message}
+                              onChange={this.handleChange}></textarea>
+                    <button type="submit">Send</button>
+                </form>
+                {this.state.isMessageSent && <p>Sent successfully!</p>}
+            </div>
         );
     }
 }
-- 
cgit v1.2.3