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/registerwith JSON payload. - Login: POST
/api/loginwith URL-encoded payload. - Logout: POST
/api/logout. - Fetch profile: GET
/api/profileto 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.