fixed some login and booking bugs

This commit is contained in:
tumillanino
2025-10-28 13:36:05 +11:00
parent dad3ec655f
commit 5d7f0a8eb3
11 changed files with 402 additions and 141 deletions

View File

@@ -27,10 +27,17 @@
<svg class="drawer-nav-icon"><use href="/static/icons.svg#icon-calendar"/></svg>
Book
</a>
{{if .Authenticated}}
<a href="/profile" {{if eq .ActivePage "profile"}}class="active"{{end}}>
<svg class="drawer-nav-icon"><use href="/static/icons.svg#icon-user"/></svg>
Profile
</a>
{{else}}
<a href="{{.OryLoginURL}}">
<svg class="drawer-nav-icon"><use href="/static/icons.svg#icon-user"/></svg>
Login
</a>
{{end}}
</nav>
</div>
</div>
@@ -58,7 +65,11 @@
<a href="/catalog" {{if eq .ActivePage "catalog"}}class="active"{{end}}>Catalog</a>
<a href="/gallery" {{if eq .ActivePage "gallery"}}class="active"{{end}}>Gallery</a>
<a href="/booking" {{if eq .ActivePage "booking"}}class="active"{{end}}>Book</a>
{{if .Authenticated}}
<a href="/profile" {{if eq .ActivePage "profile"}}class="active"{{end}}>Profile</a>
{{else}}
<a href="{{.OryLoginURL}}" class="btn btn-primary" style="padding: 0.5rem 1rem; text-decoration: none;">Login</a>
{{end}}
</nav>
<button id="themeToggle" class="btn btn-outline" aria-label="Toggle theme">
<svg id="sunIcon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>

View File

@@ -31,8 +31,28 @@
<div class="card">
<form id="bookingForm">
<div class="form-group">
<label class="form-label" for="service_id">Service ID</label>
<input class="form-input" type="text" id="service_id" name="service_id" placeholder="Enter service ID" required>
<label class="form-label" for="service_option">Service Option</label>
<select class="form-input" id="service_option" name="service_option" required>
<option value="">Select a service option...</option>
<option value="Small Bundle">Small Bundle</option>
<option value="Medium Bundle">Medium Bundle</option>
<option value="Large Bundle">Large Bundle</option>
<option value="Balloons Only">Balloons Only</option>
</select>
</div>
<div class="form-group">
<label class="form-label" for="event_type">Event Type</label>
<select class="form-input" id="event_type" name="event_type" required>
<option value="">Select an event type...</option>
<option value="Birthday">Birthday</option>
<option value="Wedding">Wedding</option>
<option value="Anniversary">Anniversary</option>
<option value="Baby Shower">Baby Shower</option>
<option value="Graduation">Graduation</option>
<option value="Corporate Event">Corporate Event</option>
<option value="Other">Other</option>
</select>
</div>
<div class="form-group">
@@ -41,8 +61,9 @@
</div>
<div class="form-group">
<label class="form-label" for="address">Address</label>
<input class="form-input" type="text" id="address" name="address" placeholder="Event location">
<label class="form-label" for="address">Address <span style="color: hsl(var(--destructive));">*</span></label>
<input class="form-input" type="text" id="address" name="address" placeholder="123 Main St, Sydney NSW 2000" required>
<small style="color: hsl(var(--muted-foreground)); font-size: 0.875rem;">Please include street, suburb, state, and postcode</small>
</div>
<div class="form-group">
@@ -62,18 +83,63 @@
{{template "footer"}}
{{template "theme-script"}}
<script>
function validateAustralianAddress(address) {
if (!address || address.trim().length < 10) {
return { valid: false, message: 'Address is too short. Please provide a complete address.' };
}
const australianStates = ['NSW', 'VIC', 'QLD', 'SA', 'WA', 'TAS', 'NT', 'ACT'];
const hasState = australianStates.some(state =>
address.toUpperCase().includes(state) ||
address.toUpperCase().includes(state.toLowerCase())
);
const postcodePattern = /\b\d{4}\b/;
const hasPostcode = postcodePattern.test(address);
if (!hasState && !hasPostcode) {
return {
valid: false,
message: 'Please include an Australian state (NSW, VIC, QLD, etc.) and postcode in your address.'
};
}
if (!hasState) {
return {
valid: false,
message: 'Please include an Australian state (NSW, VIC, QLD, SA, WA, TAS, NT, or ACT) in your address.'
};
}
if (!hasPostcode) {
return {
valid: false,
message: 'Please include a 4-digit postcode in your address.'
};
}
return { valid: true };
}
document.getElementById('bookingForm').addEventListener('submit', async function(e){
e.preventDefault();
const f = e.target;
const submitBtn = f.querySelector('button[type="submit"]');
const originalText = submitBtn.textContent;
const addressValidation = validateAustralianAddress(f.address.value);
if (!addressValidation.valid) {
alert(addressValidation.message);
return;
}
submitBtn.disabled = true;
submitBtn.textContent = 'Submitting...';
const body = {
user_id: "",
service_id: f.service_id.value,
service_option: f.service_option.value,
event_type: f.event_type.value,
event_date: new Date(f.event_date.value).toISOString(),
address: f.address.value,
notes: f.notes.value

View File

@@ -57,6 +57,7 @@
<main>
<div style="max-width: 1000px; margin: 0 auto;">
{{if .Authenticated}}
<div style="margin-bottom: 2rem;">
<h1 style="font-size: 2.5rem; font-weight: 700; margin-bottom: 0.5rem;">Welcome, {{.DisplayName}}</h1>
<p style="color: hsl(var(--muted-foreground)); font-size: 1.125rem;">Manage your account and bookings</p>
@@ -92,7 +93,7 @@
<div class="booking-card">
<div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 0.75rem;">
<div>
<h4 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 0.25rem;">{{.ServiceName}}</h4>
<h4 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 0.25rem;">{{.ServiceOption}}{{if .EventType}} - {{.EventType}}{{end}}</h4>
<p style="color: hsl(var(--muted-foreground)); font-size: 0.875rem;">Booked on {{.CreatedAt}}</p>
</div>
<span class="status-badge status-{{.Status}}">{{.Status}}</span>
@@ -116,13 +117,6 @@
<span style="font-size: 0.875rem;">{{.Address}}</span>
</div>
{{end}}
<div style="display: flex; gap: 0.5rem;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="12" y1="1" x2="12" y2="23"></line>
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
</svg>
<span style="font-size: 0.875rem;">Price: <strong>${{printf "%.2f" (divf .ServicePriceCents 100)}}</strong></span>
</div>
</div>
{{if .Notes}}
<div style="padding: 0.75rem; background: hsl(var(--muted) / 0.3); border-radius: 6px; font-size: 0.875rem;">
@@ -137,6 +131,17 @@
</div>
</div>
</div>
{{else}}
<div style="margin-bottom: 2rem; text-align: center; padding: 4rem 2rem;">
<svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin: 0 auto 2rem; color: hsl(var(--muted-foreground));">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
<h1 style="font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem;">Login Required</h1>
<p style="color: hsl(var(--muted-foreground)); font-size: 1.125rem; margin-bottom: 2rem;">Please log in to view your profile and manage your bookings</p>
<a href="{{.OryLoginURL}}" class="btn btn-primary" style="text-decoration: none; display: inline-block;">Login or Sign Up</a>
</div>
{{end}}
</div>
</main>