andrew/personal-website
1
0
Fork 0
mirror of https://github.com/Alee14/personal-website.git synced 2025-01-22 10:51:50 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Proper error handling and css tweak for guestbooks

Browse source
This commit is contained in:
Andrew Lee 2024-02-04 20:40:26 -05:00
parent 8aeaf9ab98
commit f5efedcaf7
Signed by: andrew
SSH key fingerprint: SHA256:bbGg1DYG5CuKl2jo1DqzvUsaTeyvhM3tjCsej5lYMg4
6 changed files with 29 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
bun.lockb
View file

Binary file not shown.

3
package.json
View file

@ -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"
}
}
}

39
src/components/GuestbookForm.jsx
View file

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

3
src/layouts/Default.astro
View file

@ -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>

1
src/services/GuestbookService.js
View file

@ -5,5 +5,6 @@ export async function createMessage(data) {
return await pb.collection('guestbook').create(data);
} catch (error) {
console.error(error);
throw error;
}
}

8
src/styles/GuestbookForm.css
View file

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