Link to markdown guide; changed placeholder text; regex

3 files changed, 14 insertions, 7 deletions

diff --git a/src/components/GuestbookForm.jsx b/src/components/GuestbookForm.jsx
index 26e32b1..e2283f0 100644
--- a/src/components/GuestbookForm.jsx
+++ b/src/components/GuestbookForm.jsx
@@ -7,7 +7,6 @@ import DOMPurify from 'dompurify';
 class GuestbookForm extends Component {
     state = {
         name: '',
-        email: '',
         website: '',
         message: '',
         isMessageSent: false,
@@ -24,13 +23,22 @@ class GuestbookForm extends Component {
             return;
         }
 
+        const urlRegex = /(https?:\/\/\S+)/g;
+        const imageRegex = /!\[.*]\(.*\)/g;
+
+        if (urlRegex.test(this.state.message) || imageRegex.test(this.state.message)) {
+            this.setState({
+                errorMessage: 'Links and images are not allowed.',
+            });
+            return;
+        }
+
         try {
             const messageHtml = marked(DOMPurify.sanitize(this.state.message));
             await createMessage({ ...this.state, message: messageHtml });
 
             this.setState({
                 name: '',
-                email: '',
                 website: '',
                 message: '',
                 isMessageSent: true,
@@ -56,14 +64,11 @@ class GuestbookForm extends Component {
                     <label for="name">Name</label>
                     <input type="text" name="name" placeholder="John Doe" required value={this.state.name}
                            onChange={this.handleChange}/>
-                    <label for="email">Email Address</label>
-                    <input type="email" name="email" placeholder="hello@example.com (optional)" value={this.state.email}
-                           onChange={this.handleChange}/>
                     <label for="website">Your Website</label>
                     <input type="url" name="website" placeholder="https://example.com (optional)"
                            value={this.state.website} onChange={this.handleChange}/>
-                    <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}
+                    <label for="message">Message (Supports <a href="https://www.markdownguide.org/cheat-sheet/" target="_blank">Markdown</a>)</label>
+                    <textarea name="message" placeholder="Enter your message here." required value={this.state.message}
                               onChange={this.handleChange}></textarea>
                     <button type="submit">Send</button>
                 </form>
diff --git a/src/layouts/Default.astro b/src/layouts/Default.astro
index 72851a4..c0eb569 100644
--- a/src/layouts/Default.astro
+++ b/src/layouts/Default.astro
@@ -88,6 +88,7 @@ const date = new Date();
 	a {
 		text-decoration: none;
 		color: #d7fcc9;
+		transition: ease-in-out 0.2s;
 	}
 
 	a:hover {
diff --git a/src/styles/GuestbookForm.css b/src/styles/GuestbookForm.css
index 42a5f8f..0ad343c 100644
--- a/src/styles/GuestbookForm.css
+++ b/src/styles/GuestbookForm.css
@@ -25,6 +25,7 @@
     background-color: #609460;
     color: white;
     cursor: pointer;
+    transition: ease-in-out 0.2s;
 }
 
 .card form button:hover {