Revillage Profile Page (Alpine.js version)

Front Matter

• title: Revillage Profile
• layout: base
• permalink: /profile/

Container

• White, rounded, shadowed box.
• Centered, max width 400px.
• Contains header, forms, buttons, and message area.

Alpine.js x-data

• mode: which form is active ('login' or 'register').
• currentUser: holds the logged-in user's info.
• message: displays feedback messages.
• reg: registration form state.
• loginData: login form state.

Reactive Behavior

• x-show: dynamically shows/hides login/register/logout sections.
• @click: toggles form modes or triggers logout.
• @submit.prevent: prevents page reload and calls register/login functions.

AJAX Form Handling

• Register: POST /api/register with JSON payload.
• Login: POST /api/login with URL-encoded payload.
• Logout: POST /api/logout.
• Fetch profile: GET /api/profile to prefill forms if user is logged in.

Advantages

• Less imperative JS (no manual DOM selection or listeners).
• Reactive UI with minimal boilerplate.
• Compatible with static site setups like 11ty.
• Easy to extend to more features (e.g., forgot password, profile updates).

Summary

This page now fully leverages Alpine.js for reactive form behavior, toggling, and session-aware rendering. The front-end communicates with the Rust backend via /api endpoints.