Added volunteer signup.
This commit is contained in:
parent
ace7f11a60
commit
8dc5d3ed01
12 changed files with 1258 additions and 49 deletions
241
frontend/src/pages/VolunteerSignup.svelte
Normal file
241
frontend/src/pages/VolunteerSignup.svelte
Normal file
|
|
@ -0,0 +1,241 @@
|
|||
<script>
|
||||
import { onMount } from 'svelte'
|
||||
import { api } from '../api.js'
|
||||
|
||||
let loading = $state(true)
|
||||
let submitting = $state(false)
|
||||
let error = $state('')
|
||||
let submitted = $state(false)
|
||||
|
||||
let config = $state(null)
|
||||
let preferredName = $state('')
|
||||
let ticketName = $state('')
|
||||
let email = $state('')
|
||||
let pronouns = $state('')
|
||||
let phone = $state('')
|
||||
let departmentId = $state('')
|
||||
let note = $state('')
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
config = await api.signup.config()
|
||||
} catch (err) {
|
||||
error = err.message
|
||||
} finally {
|
||||
loading = false
|
||||
}
|
||||
})
|
||||
|
||||
async function submit(e) {
|
||||
e.preventDefault()
|
||||
submitting = true
|
||||
error = ''
|
||||
try {
|
||||
const data = {
|
||||
preferred_name: preferredName.trim(),
|
||||
email: email.trim(),
|
||||
}
|
||||
if (ticketName.trim()) data.ticket_name = ticketName.trim()
|
||||
if (pronouns.trim()) data.pronouns = pronouns.trim()
|
||||
if (phone.trim()) data.phone = phone.trim()
|
||||
if (departmentId) data.department_id = Number(departmentId)
|
||||
if (note.trim()) data.note = note.trim()
|
||||
await api.signup.submit(data)
|
||||
submitted = true
|
||||
} catch (err) {
|
||||
error = err.message
|
||||
} finally {
|
||||
submitting = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="kiosk">
|
||||
<div class="kiosk-header">
|
||||
<div class="kiosk-brand">Turn<span>pike</span> <span class="kiosk-role">Volunteer Signup</span></div>
|
||||
</div>
|
||||
|
||||
<div class="kiosk-body">
|
||||
{#if loading}
|
||||
<div class="kiosk-center">Loading...</div>
|
||||
{:else if submitted}
|
||||
<div class="kiosk-card" style="text-align:center">
|
||||
<h2 style="font-size:1.3rem;font-weight:700;margin-bottom:0.75rem">Thank you!</h2>
|
||||
<p style="color:var(--c-muted);line-height:1.6;margin:0">
|
||||
We've sent a confirmation email to <strong style="color:var(--c-text)">{email}</strong>.
|
||||
Please check your inbox and click the link to confirm your signup.
|
||||
</p>
|
||||
</div>
|
||||
{:else}
|
||||
{#if config?.event_name && config.event_name !== 'the event'}
|
||||
<h2 class="signup-event-name">{config.event_name}</h2>
|
||||
{/if}
|
||||
|
||||
{#if error}
|
||||
<div class="kiosk-alert">{error}</div>
|
||||
{/if}
|
||||
|
||||
<form onsubmit={submit}>
|
||||
<div class="kiosk-card">
|
||||
<div class="signup-field">
|
||||
<label for="s-name">Preferred Name <span class="req">*</span></label>
|
||||
<input id="s-name" bind:value={preferredName} required placeholder="What should we call you?" />
|
||||
</div>
|
||||
|
||||
<div class="signup-field">
|
||||
<label for="s-ticket">Ticket Name</label>
|
||||
<input id="s-ticket" bind:value={ticketName} placeholder="Name on your ticket (if different)" />
|
||||
</div>
|
||||
|
||||
<div class="signup-field">
|
||||
<label for="s-email">Email <span class="req">*</span></label>
|
||||
<input id="s-email" type="email" bind:value={email} required placeholder="you@example.com" />
|
||||
</div>
|
||||
|
||||
<div class="signup-row">
|
||||
<div class="signup-field">
|
||||
<label for="s-pronouns">Pronouns</label>
|
||||
<input id="s-pronouns" bind:value={pronouns} placeholder="e.g. she/her" />
|
||||
</div>
|
||||
<div class="signup-field">
|
||||
<label for="s-phone">Phone</label>
|
||||
<input id="s-phone" type="tel" bind:value={phone} placeholder="Optional" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if config?.departments?.length > 0}
|
||||
<div class="signup-field">
|
||||
<label for="s-dept">Department Preference</label>
|
||||
<select id="s-dept" bind:value={departmentId}>
|
||||
<option value="">No preference</option>
|
||||
{#each config.departments as dept}
|
||||
<option value={dept.id}>{dept.name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="signup-field">
|
||||
<label for="s-note">
|
||||
{config?.volunteer_note_label ?? 'Additional note'}
|
||||
{#if config?.volunteer_note_required}<span class="req">*</span>{/if}
|
||||
</label>
|
||||
<textarea id="s-note" bind:value={note} rows="3"
|
||||
required={config?.volunteer_note_required}
|
||||
placeholder=""></textarea>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="kbtn kbtn-primary" style="width:100%;margin-top:0.5rem" disabled={submitting}>
|
||||
{submitting ? 'Submitting...' : 'Sign Up'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.kiosk {
|
||||
min-height: 100vh;
|
||||
background: var(--c-bg);
|
||||
color: var(--c-text);
|
||||
font-family: var(--font);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.kiosk-header {
|
||||
background: var(--c-surface);
|
||||
border-bottom: 1px solid var(--c-border);
|
||||
padding: 1rem 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.kiosk-brand {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--c-text);
|
||||
}
|
||||
.kiosk-brand span:first-of-type { color: var(--c-accent); }
|
||||
.kiosk-role {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 400;
|
||||
color: var(--c-muted);
|
||||
letter-spacing: 0;
|
||||
}
|
||||
.kiosk-body {
|
||||
max-width: 540px;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
.kiosk-center { display: flex; align-items: center; justify-content: center; }
|
||||
.kiosk-alert {
|
||||
background: rgba(239,68,68,0.1);
|
||||
border: 1px solid rgba(239,68,68,0.25);
|
||||
color: #fca5a5;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.kiosk-card {
|
||||
background: var(--c-surface);
|
||||
border: 1px solid var(--c-border);
|
||||
border-radius: 10px;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
.signup-event-name {
|
||||
font-size: 1.15rem;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--c-text);
|
||||
}
|
||||
.signup-field {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.signup-field label {
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: var(--c-muted);
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.signup-field input,
|
||||
.signup-field select,
|
||||
.signup-field textarea {
|
||||
width: 100%;
|
||||
padding: 0.55rem 0.75rem;
|
||||
border: 1px solid var(--c-border);
|
||||
border-radius: 6px;
|
||||
background: var(--c-bg);
|
||||
color: var(--c-text);
|
||||
font-family: var(--font);
|
||||
font-size: 0.875rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.signup-field input:focus,
|
||||
.signup-field select:focus,
|
||||
.signup-field textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--c-accent);
|
||||
}
|
||||
.signup-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
.req { color: var(--c-accent); }
|
||||
.kbtn {
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
padding: 0.55rem 1rem; border-radius: 6px;
|
||||
border: 1px solid transparent;
|
||||
font-size: 0.875rem; font-weight: 500; cursor: pointer;
|
||||
font-family: var(--font);
|
||||
transition: background 150ms;
|
||||
}
|
||||
.kbtn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
.kbtn-primary { background: var(--c-accent); color: #fff; }
|
||||
.kbtn-primary:hover:not(:disabled) { background: var(--c-accent-h); }
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue