muken/la-huasca-ts
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add database integration, auth API, admin/user portals, and deploy-db.sh

Browse Source
This commit is contained in:
muken
2026-06-27 16:40:58 -05:00
parent 26559d4cf8
commit cc59177a74
25 changed files with 1423 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/admin/page.tsx
+59 -40
View File
@@ -2,65 +2,84 @@
import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { useAuth } from '@/hooks/useAuth';
const IMAGES_KEY = 'la-huasca-admin-images';
interface ImageRecord {
id: number;
filename: string;
data: string;
uploaded_at: string;
}
export default function AdminPage() {
const { isAdmin, hydrated } = useAuth();
const router = useRouter();
const [images, setImages] = useState<string[]>([]);
const [images, setImages] = useState<ImageRecord[]>([]);
const [count, setCount] = useState(0);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
if (!hydrated) return;
if (!isAdmin) {
router.push('/login');
return;
}
const stored = localStorage.getItem(IMAGES_KEY);
if (stored) {
try {
setImages(JSON.parse(stored));
} catch {
setImages([]);
}
}
}, [isAdmin, hydrated, router]);
useEffect(() => {
localStorage.setItem(IMAGES_KEY, JSON.stringify(images));
}, [images]);
fetch('/api/admin/images', { credentials: 'same-origin' })
.then(async (res) => {
if (!res.ok) {
if (res.status === 401) {
router.push('/login');
return;
}
throw new Error('Failed to load images');
}
const data = await res.json();
setImages(data.images || []);
setCount(data.count || 0);
})
.catch((err) => setError(err.message))
.finally(() => setLoading(false));
}, [router]);
const handleUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
const files = e.target.files;
if (!files) return;
Array.from(files).forEach((file) => {
const reader = new FileReader();
reader.onload = () => {
const result = reader.result as string;
setImages((prev) => [...prev, result]);
reader.onload = async () => {
const data = reader.result as string;
const res = await fetch('/api/admin/images', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ filename: file.name, data }),
credentials: 'same-origin',
});
if (!res.ok) {
setError('Upload failed');
return;
}
const result = await res.json();
setImages((prev) => [result.image, ...prev]);
setCount((prev) => prev + 1);
};
reader.readAsDataURL(file);
});
e.target.value = '';
};
const handleDelete = (index: number) => {
setImages((prev) => prev.filter((_, i) => i !== index));
const handleDelete = async (id: number) => {
const res = await fetch(`/api/admin/images?id=${id}`, {
method: 'DELETE',
credentials: 'same-origin',
});
if (res.ok) {
setImages((prev) => prev.filter((img) => img.id !== id));
setCount((prev) => prev - 1);
}
};
if (!hydrated || !isAdmin) {
return (
<main style={{ padding: '2rem' }}>
<p>Please log in as admin to access this page.</p>
</main>
);
}
if (loading) return <main style={{ padding: '2rem' }}><p>Loading...</p></main>;
return (
<main style={{ padding: '2rem' }}>
<h1>Admin Portal</h1>
<p>Total uploaded images: <strong>{images.length}</strong></p>
<p>Total uploaded images: <strong>{count}</strong></p>
{error && <p style={{ color: 'crimson' }}>{error}</p>}
<label
style={{
display: 'inline-block',
@@ -91,9 +110,9 @@ export default function AdminPage() {
gap: '1rem',
}}
>
{images.map((src, i) => (
{images.map((img) => (
<div
key={i}
key={img.id}
style={{
border: '1px solid #ddd',
borderRadius: '8px',
@@ -103,12 +122,12 @@ export default function AdminPage() {
}}
>
<img
src={src}
alt={`Uploaded preview ${i + 1}`}
src={img.data}
alt={img.filename}
style={{ width: '100%', height: '160px', objectFit: 'cover' }}
/>
<button
onClick={() => handleDelete(i)}
onClick={() => handleDelete(img.id)}
style={{
padding: '0.5rem',
background: 'crimson',
src/app/api/admin/images/route.ts
+63
View File
@@ -0,0 +1,63 @@
import { NextRequest, NextResponse } from 'next/server';
import { requireRole } from '@/lib/auth';
import { db } from '@/lib/db';
export async function GET() {
try {
await requireRole('admin');
const { rows } = await db.query('SELECT id, filename, uploaded_at FROM images ORDER BY uploaded_at DESC');
return NextResponse.json({ images: rows, count: rows.length });
} catch (error) {
if ((error as Error).message === 'Unauthorized') {
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
}
console.error('List images error:', error);
return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
}
}
export async function POST(request: NextRequest) {
try {
await requireRole('admin');
const body = await request.json();
const { filename, data } = body;
if (!filename || !data) {
return NextResponse.json({ error: 'Missing filename or data' }, { status: 400 });
}
const { rows } = await db.query(
'INSERT INTO images (filename, data) VALUES ($1, $2) RETURNING id, filename, uploaded_at',
[filename, data]
);
return NextResponse.json({ image: rows[0] });
} catch (error) {
if ((error as Error).message === 'Unauthorized') {
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
}
console.error('Upload image error:', error);
return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
}
}
export async function DELETE(request: NextRequest) {
try {
await requireRole('admin');
const { searchParams } = new URL(request.url);
const id = searchParams.get('id');
if (!id) {
return NextResponse.json({ error: 'Missing id' }, { status: 400 });
}
await db.query('DELETE FROM images WHERE id = $1', [id]);
return NextResponse.json({ ok: true });
} catch (error) {
if ((error as Error).message === 'Unauthorized') {
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
}
console.error('Delete image error:', error);
return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
}
}
src/app/api/auth/login/route.ts
+25
View File
@@ -0,0 +1,25 @@
import { NextRequest, NextResponse } from 'next/server';
import { authenticateUser, createSession } from '@/lib/auth';
export async function POST(request: NextRequest) {
try {
const body = await request.json();
const { username, password } = body;
if (!username || !password) {
return NextResponse.json({ error: 'Missing username or password' }, { status: 400 });
}
const user = await authenticateUser(username, password);
if (!user) {
return NextResponse.json({ error: 'Invalid credentials' }, { status: 401 });
}
await createSession(user);
return NextResponse.json({ role: user.role, username: user.username });
} catch (error) {
console.error('Login error:', error);
return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
}
}
src/app/api/auth/logout/route.ts
+7
View File
@@ -0,0 +1,7 @@
import { NextResponse } from 'next/server';
import { clearSession } from '@/lib/auth';
export async function POST() {
await clearSession();
return NextResponse.json({ ok: true });
}
src/app/api/auth/me/route.ts
+10
View File
@@ -0,0 +1,10 @@
import { NextResponse } from 'next/server';
import { getSession } from '@/lib/auth';
export async function GET() {
const session = await getSession();
if (!session) {
return NextResponse.json({ authenticated: false }, { status: 401 });
}
return NextResponse.json({ authenticated: true, role: session.role, username: session.username });
}
src/app/api/db/init/route.ts
+21
View File
@@ -0,0 +1,21 @@
import { NextResponse } from 'next/server';
import { initSchema, seed, resetDatabase } from '@/lib/schema';
export async function POST(request: Request) {
try {
const { searchParams } = new URL(request.url);
const reset = searchParams.get('reset') === 'true';
if (reset) {
await resetDatabase();
return NextResponse.json({ ok: true, reset: true });
}
await initSchema();
await seed();
return NextResponse.json({ ok: true });
} catch (error) {
console.error('DB init error:', error);
return NextResponse.json({ error: 'Database initialization failed' }, { status: 500 });
}
}
src/app/api/user/portal/route.ts
+47
View File
@@ -0,0 +1,47 @@
import { NextResponse } from 'next/server';
import { requireRole } from '@/lib/auth';
import { db } from '@/lib/db';
export async function GET() {
try {
const session = await requireRole('user');
const userId = session.id;
const { rows: reservations } = await db.query(
'SELECT id, date, time, guests, table_name FROM reservations WHERE user_id = $1 ORDER BY date, time',
[userId]
);
const { rows: coupons } = await db.query(
'SELECT id, code, discount FROM coupons WHERE user_id = $1 ORDER BY created_at',
[userId]
);
const { rows: offers } = await db.query(
'SELECT id, title, description FROM offers WHERE active = TRUE ORDER BY created_at'
);
const { rows: benefits } = await db.query(
'SELECT id, text FROM benefits ORDER BY id'
);
const { rows: configRows } = await db.query(
"SELECT value FROM config WHERE key = 'wifi_password'"
);
const wifiPassword = configRows[0]?.value || '';
return NextResponse.json({
reservations,
coupons,
offers,
benefits: benefits.map((b: { text: string }) => b.text),
wifiPassword,
});
} catch (error) {
if ((error as Error).message === 'Unauthorized') {
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
}
console.error('User portal error:', error);
return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
}
}
src/app/coffee/page.tsx
+8
View File
@@ -0,0 +1,8 @@
export default function CoffeePage() {
return (
<main style={{ padding: '2rem' }}>
<h1>Coffee</h1>
<p>Enjoy locally sourced coffee and fresh pastries.</p>
</main>
);
}
src/app/comments/page.tsx
+8
View File
@@ -0,0 +1,8 @@
export default function CommentsPage() {
return (
<main style={{ padding: '2rem' }}>
<h1>Comments</h1>
<p>Read what guests are saying about their stay.</p>
</main>
);
}
src/app/landscape/page.tsx
+8
View File
@@ -0,0 +1,8 @@
export default function LandscapePage() {
return (
<main style={{ padding: '2rem' }}>
<h1>Landscape</h1>
<p>Explore the trails, rivers, and cloud forest around La Huasca.</p>
</main>
);
}
src/app/layout.tsx
+7 -2
View File
@@ -1,6 +1,8 @@
import Navbar from '@/components/Navbar';
export const metadata = {
title: 'La Huasca',
description: 'TypeScript + Next.js scaffold with Pretext text measurement',
description: 'TypeScript + Next.js version of La Huasca',
};
export default function RootLayout({
@@ -10,7 +12,10 @@ export default function RootLayout({
}) {
return (
<html lang="en">
<body>{children}</body>
<body style={{ margin: 0, fontFamily: 'system-ui, sans-serif' }}>
<Navbar />
{children}
</body>
</html>
);
}
src/app/login/page.tsx
+16 -8
View File
@@ -2,24 +2,32 @@
import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { useAuth } from '@/hooks/useAuth';
export default function LoginPage() {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState<string | null>(null);
const { login } = useAuth();
const router = useRouter();
const handleSubmit = (e: React.FormEvent) => {
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setError(null);
const ok = login(username, password);
if (ok) {
router.push(username === 'admin' ? '/admin' : '/user');
} else {
setError('Invalid username or password.');
const res = await fetch('/api/auth/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, password }),
credentials: 'same-origin',
});
if (!res.ok) {
const data = await res.json();
setError(data.error || 'Invalid username or password.');
return;
}
const data = await res.json();
router.push(data.role === 'admin' ? '/admin' : '/user');
};
return (
src/app/page.tsx
+3 -3
View File
@@ -1,10 +1,10 @@
import MeasuredText from '@/components/MeasuredText';
export default function Home() {
export default function HomePage() {
return (
<main style={{ padding: '2rem', fontFamily: 'system-ui, sans-serif' }}>
<main style={{ padding: '2rem' }}>
<h1>La Huasca</h1>
<p>TypeScript + Next.js scaffold with Pretext text measurement.</p>
<p>Welcome to the TypeScript + Next.js version of La Huasca.</p>
<MeasuredText text="Hello, Pretext!" />
</main>
);
src/app/rooms/page.tsx
+8
View File
@@ -0,0 +1,8 @@
export default function RoomsPage() {
return (
<main style={{ padding: '2rem' }}>
<h1>Rooms</h1>
<p>Discover our comfortable rooms with stunning views.</p>
</main>
);
}
src/app/user/page.tsx
+56 -42
View File
@@ -1,48 +1,62 @@
'use client';
import { useEffect } from 'react';
import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { useAuth } from '@/hooks/useAuth';
const reservations = [
{ id: 1, date: '2026-07-12', time: '19:00', guests: 4, table: 'Terrace 3' },
{ id: 2, date: '2026-07-25', time: '20:30', guests: 2, table: 'Barrel 7' },
];
interface Reservation {
id: number;
date: string;
time: string;
guests: number;
table_name: string;
}
const coupons = [
{ code: 'WELCOME20', discount: '20% off your next stay' },
{ code: 'COFFEE5', discount: '$5 off any coffee tasting' },
];
interface Coupon {
id: number;
code: string;
discount: string;
}
const offers = [
{ title: 'Summer Wine Weekend', desc: 'Complimentary wine tasting with every two-night stay.' },
{ title: 'Sunset Dinner', desc: 'Three-course menu on the terrace every Friday.' },
];
interface Offer {
id: number;
title: string;
description: string;
}
const benefits = [
'Priority booking for peak weekends',
'Late checkout on availability',
'Free welcome cocktail',
'Member-only events and tastings',
];
interface PortalData {
reservations: Reservation[];
coupons: Coupon[];
offers: Offer[];
benefits: string[];
wifiPassword: string;
}
export default function UserPage() {
const { isUser, hydrated } = useAuth();
const router = useRouter();
const [data, setData] = useState<PortalData | null>(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
if (!hydrated) return;
if (!isUser) {
router.push('/login');
}
}, [isUser, hydrated, router]);
fetch('/api/user/portal', { credentials: 'same-origin' })
.then(async (res) => {
if (!res.ok) {
if (res.status === 401) {
router.push('/login');
return;
}
throw new Error('Failed to load portal data');
}
return res.json();
})
.then((json) => setData(json))
.catch((err) => console.error(err))
.finally(() => setLoading(false));
}, [router]);
if (!hydrated || !isUser) {
return (
<main style={{ padding: '2rem' }}>
<p>Please log in as user to access this page.</p>
</main>
);
if (loading) return <main style={{ padding: '2rem' }}><p>Loading...</p></main>;
if (!data) {
return <main style={{ padding: '2rem' }}><p>Please log in as user to access this page.</p></main>;
}
return (
@@ -51,11 +65,11 @@ export default function UserPage() {
<section style={{ marginBottom: '2rem' }}>
<h2>Future Reservations</h2>
{reservations.length === 0 ? (
{data.reservations.length === 0 ? (
<p style={{ color: 'dimgray' }}>No upcoming reservations.</p>
) : (
<ul style={{ padding: 0, listStyle: 'none' }}>
{reservations.map((r) => (
{data.reservations.map((r) => (
<li
key={r.id}
style={{
@@ -65,7 +79,7 @@ export default function UserPage() {
borderRadius: '8px',
}}
>
{r.date} at {r.time} &middot; {r.guests} guests &middot; {r.table}
{r.date} at {r.time} · {r.guests} guests · {r.table_name}
</li>
))}
</ul>
@@ -75,9 +89,9 @@ export default function UserPage() {
<section style={{ marginBottom: '2rem' }}>
<h2>Discount Coupons</h2>
<div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
{coupons.map((c) => (
{data.coupons.map((c) => (
<div
key={c.code}
key={c.id}
style={{
padding: '1rem',
border: '2px dashed #1a1a1a',
@@ -95,9 +109,9 @@ export default function UserPage() {
<section style={{ marginBottom: '2rem' }}>
<h2>Offers</h2>
<ul>
{offers.map((o) => (
<li key={o.title}>
<strong>{o.title}</strong> — {o.desc}
{data.offers.map((o) => (
<li key={o.id}>
<strong>{o.title}</strong> — {o.description}
</li>
))}
</ul>
@@ -115,14 +129,14 @@ export default function UserPage() {
fontSize: '1.25rem',
}}
>
LaHuascaGuest2026
{data.wifiPassword}
</p>
</section>
<section>
<h2>Member Benefits</h2>
<ul>
{benefits.map((b) => (
{data.benefits.map((b) => (
<li key={b}>{b}</li>
))}
</ul>