Revillage Profile Page – Alpine.js Breakdown

This page provides the user's profile view, showing current offers and completed offers that need review. It uses Alpine.js for interactivity and reactive state management.

Front Matter

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

This defines the page metadata for 11ty:

• title – the page title
• layout – base layout template
• permalink – URL path

Alpine.js Component

<div x-data="profilePage()">
  ...
</div>
<script>
function profilePage() {
  return {
    // reactive properties
  }
}
</script>

• x-data="profilePage()" – initializes the Alpine.js component.
• profilePage() returns an object containing all reactive properties and methods.

Reactive Properties

• showRegister – controls whether the registration form is visible.
• reg_username, reg_email, reg_password – bound to registration inputs.
• login_username, login_password – bound to login inputs.
• currentUser – stores the currently logged-in user object.
• offers – array of current offers posted by the user.
• completed_offers – array of completed offers awaiting review.
• message – user feedback messages.

Key Functions / Methods

init()

• Automatically called when the component is initialized.
• Calls fetchProfile() to populate user info and offers.

fetchProfile()

• Fetches /api/profile to retrieve current user data, current offers, and completed offers.
• Pre-fills form inputs if a user is logged in.
• Updates the reactive currentUser, offers, and completed_offers.

register()

• Sends a POST request to /api/register.
• Uses JSON body to submit username, email, and password.
• Provides success/failure messages.
• Hides the register form and shows login after successful registration.

login()

• Sends a POST request to /api/login.
• Uses application/x-www-form-urlencoded body format.
• On success, updates currentUser and fetches offers via fetchProfile().
• Shows logout button and hides login/register forms.

logout()

• Sends a POST request to /api/logout.
• Clears currentUser and resets forms.
• Shows login form again.

markReviewed(offerId)

• Sends a POST request to /api/offers/{id}/reviewed.
• On success, removes the offer from completed_offers array, updating the UI reactively.

Form Visibility & Interaction

• Uses x-show to toggle visibility between login, registration, and logout.
• x-cloak ensures elements are hidden until Alpine.js initializes.
• Buttons have @click listeners to toggle showRegister and call logout.

Reactive Lists

• x-for loops through offers and completed_offers to dynamically render each card.
• Cards display:
  • Title
  • Offer and request details
  • Photo (optional)
  • “Mark as Reviewed” button for completed offers

Summary

• Uses Alpine.js to make a fully interactive page without a heavy frontend framework.
• All state and UI updates are reactive, keeping the page simple and fast.
• Supports registration, login, logout, profile fetch, and managing offers—all client-side with API calls.