feat/moderation #58
+148
-92
@@ -32,107 +32,114 @@ const errorMsg = errorParam ? (errorMessages[errorParam] ?? decodeURIComponent(e
|
|||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- Submission form -->
|
<!-- Submission form -->
|
||||||
<section class="card form-section" aria-labelledby="form-heading">
|
<section class="card form-section" aria-label="Leave a message">
|
||||||
<h2 id="form-heading">Leave a message</h2>
|
<details class="compose" open={submitted || Boolean(errorMsg)}>
|
||||||
<p class="form-note">
|
<summary class="compose-toggle">
|
||||||
Messages are reviewed before being published. Please don't include personal or
|
<span class="compose-toggle-text">Leave a message</span>
|
||||||
sensitive information — this is a public guestbook.
|
</summary>
|
||||||
</p>
|
|
||||||
|
|
||||||
{submitted && (
|
<div class="compose-body">
|
||||||
<div class="alert alert-success" role="alert">
|
<p class="form-note">
|
||||||
Thank you for your message! It will appear here once reviewed.
|
Messages are reviewed before being published. Please don't include personal or
|
||||||
</div>
|
sensitive information — this is a public guestbook.
|
||||||
)}
|
</p>
|
||||||
|
|
||||||
{errorMsg && (
|
{submitted && (
|
||||||
<div class="alert alert-error" role="alert">
|
<div class="alert alert-success" role="alert">
|
||||||
{errorMsg}
|
Thank you for your message! It will appear here once reviewed.
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<form
|
{errorMsg && (
|
||||||
method="post"
|
<div class="alert alert-error" role="alert">
|
||||||
action="/api/guestbook/submit"
|
{errorMsg}
|
||||||
class="guestbook-form"
|
</div>
|
||||||
novalidate
|
)}
|
||||||
>
|
|
||||||
<!-- Honeypot field: hidden from real users, filled by bots -->
|
|
||||||
<div class="hp-field" aria-hidden="true">
|
|
||||||
<label for="address">Address</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="address"
|
|
||||||
name="address"
|
|
||||||
tabindex="-1"
|
|
||||||
autocomplete="off"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field">
|
<form
|
||||||
<label for="display_name">
|
method="post"
|
||||||
Name or nickname <span class="required" aria-label="required">*</span>
|
action="/api/guestbook/submit"
|
||||||
</label>
|
class="guestbook-form"
|
||||||
<input
|
novalidate
|
||||||
type="text"
|
>
|
||||||
id="display_name"
|
<!-- Honeypot field: hidden from real users, filled by bots -->
|
||||||
name="display_name"
|
<div class="hp-field" aria-hidden="true">
|
||||||
maxlength="60"
|
<label for="address">Address</label>
|
||||||
required
|
<input
|
||||||
autocomplete="nickname"
|
type="text"
|
||||||
placeholder="your name or alias"
|
id="address"
|
||||||
/>
|
name="address"
|
||||||
</div>
|
tabindex="-1"
|
||||||
|
autocomplete="off"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<label for="message">
|
<label for="display_name">
|
||||||
Message <span class="required" aria-label="required">*</span>
|
Name or nickname <span class="required" aria-label="required">*</span>
|
||||||
</label>
|
</label>
|
||||||
<textarea
|
<input
|
||||||
id="message"
|
type="text"
|
||||||
name="message"
|
id="display_name"
|
||||||
maxlength="1000"
|
name="display_name"
|
||||||
required
|
maxlength="60"
|
||||||
rows="4"
|
required
|
||||||
placeholder="say hello, share a thought, leave a trail..."
|
autocomplete="nickname"
|
||||||
></textarea>
|
placeholder="your name or alias"
|
||||||
<span class="field-hint">Plain text only. Max 1000 characters.</span>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<label for="website">
|
<label for="message">
|
||||||
Website <span class="optional">(optional)</span>
|
Message <span class="required" aria-label="required">*</span>
|
||||||
</label>
|
</label>
|
||||||
<input
|
<textarea
|
||||||
type="url"
|
id="message"
|
||||||
id="website"
|
name="message"
|
||||||
name="website"
|
maxlength="1000"
|
||||||
maxlength="200"
|
required
|
||||||
autocomplete="url"
|
rows="4"
|
||||||
placeholder="https://your-site.example"
|
placeholder="say hello, share a thought, leave a trail..."
|
||||||
/>
|
></textarea>
|
||||||
<span class="field-hint">Only https:// links. Leave blank if you don't have one.</span>
|
<span class="field-hint">Plain text only. Max 1000 characters.</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="field consent-field">
|
<div class="field">
|
||||||
<label class="consent-label">
|
<label for="website">
|
||||||
<input
|
Website <span class="optional">(optional)</span>
|
||||||
type="checkbox"
|
</label>
|
||||||
name="consent"
|
<input
|
||||||
value="yes"
|
type="url"
|
||||||
required
|
id="website"
|
||||||
/>
|
name="website"
|
||||||
<span>
|
maxlength="200"
|
||||||
I understand this message may be published publicly on this guestbook.
|
autocomplete="url"
|
||||||
<span class="required" aria-label="required">*</span>
|
placeholder="https://your-site.example"
|
||||||
</span>
|
/>
|
||||||
</label>
|
<span class="field-hint">Only https:// links. Leave blank if you don't have one.</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-actions">
|
<div class="field consent-field">
|
||||||
<button type="submit" class="btn-submit">send message</button>
|
<label class="consent-label">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
name="consent"
|
||||||
|
value="yes"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<span>
|
||||||
|
I understand this message may be published publicly on this guestbook.
|
||||||
|
<span class="required" aria-label="required">*</span>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-actions">
|
||||||
|
<button type="submit" class="btn-submit">send message</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</details>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Approved entries -->
|
<!-- Approved entries -->
|
||||||
@@ -245,6 +252,55 @@ const errorMsg = errorParam ? (errorMessages[errorParam] ?? decodeURIComponent(e
|
|||||||
margin-bottom: var(--space-md);
|
margin-bottom: var(--space-md);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.compose {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compose-toggle {
|
||||||
|
list-style: none;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
color: var(--color-accent-bright);
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: var(--space-sm);
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compose-toggle::-webkit-details-marker {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compose-toggle:focus-visible {
|
||||||
|
outline: 2px solid var(--color-accent);
|
||||||
|
outline-offset: 2px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compose-toggle::before {
|
||||||
|
content: '+';
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 1.2em;
|
||||||
|
height: 1.2em;
|
||||||
|
border: 1px solid var(--color-accent);
|
||||||
|
border-radius: 4px;
|
||||||
|
color: var(--color-accent);
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compose[open] .compose-toggle::before {
|
||||||
|
content: '−';
|
||||||
|
}
|
||||||
|
|
||||||
|
.compose-body {
|
||||||
|
margin-top: var(--space-sm);
|
||||||
|
}
|
||||||
|
|
||||||
.guestbook-form {
|
.guestbook-form {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
Reference in New Issue
Block a user