Update AstroJS; sanitize HTML and markdown support in Guestbook form

2 files changed, 60 insertions, 40 deletions

diff --git a/src/components/Guestbook.jsx b/src/components/Guestbook.jsx
index 91e2a0f..498bbbe 100644
--- a/src/components/Guestbook.jsx
+++ b/src/components/Guestbook.jsx
@@ -1,6 +1,7 @@
 import { h, Component } from 'preact';
 import { pb } from '../services/pocketbase';
 import { formatDate } from "../util";
+import sanitizeHtml from 'sanitize-html';
 
 class Guestbook extends Component {
     state = {
@@ -8,7 +9,7 @@ class Guestbook extends Component {
         error: null
     };
 
-    async componentDidMount() {
+    fetchMessages = async () => {
         try {
             const message = await pb.collection('guestbook').getFullList({
                 sort: '-created',
@@ -20,6 +21,10 @@ class Guestbook extends Component {
         }
     }
 
+    async componentDidMount() {
+        await this.fetchMessages();
+    }
+
     render() {
         const { message, error } = this.state;
 
@@ -33,14 +38,16 @@ class Guestbook extends Component {
 
         return (
             <div>
-                {message.map((g) => (
-                    <article class="card">
-                        <h1>Message from: {g.name}</h1>
-                        <small>{formatDate(g.created)}</small>
-                        <p>{g.message}</p>
-                        {g.website && <a href={g.website}>Website</a>}
-                    </article>
-                ))}
+                <div class="grid">
+                    {message.map((g) => (
+                        <article class="card">
+                            <h1>Message from: {g.name}</h1>
+                            <small>{formatDate(g.created)}</small>
+                            <div dangerouslySetInnerHTML={{__html: sanitizeHtml(g.message)}}/>
+                            {g.website && <a href={g.website}>Website</a>}
+                        </article>
+                    ))}
+                </div>
             </div>
         );
     }
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>
         );
     }
 }