add user account page and associated functionaility to support it

backend/cmd/api/main.go

@@ -62,6 +62,7 @@ func main() {
 	emailDigestHandler := handlers.NewEmailDigestHandler(emailDigestSvc, notifConfigModel)
 	statusHandler := handlers.NewStatusHandler(checkpointModel)
 	stripeHandler := handlers.NewStripeHandler(userModel, cfg)
+	accountHandler := handlers.NewAccountHandler(userModel, cfg)
 
 	authenticate := middleware.Authenticate(userModel)
 	requireSub := middleware.RequireSubscription(userModel)
@@ -88,6 +89,12 @@ func main() {
 		authenticate(http.HandlerFunc(stripeHandler.GetSubscriptionStatus)))
 	mux.Handle("POST "+b+"/stripe/verify-checkout",
 		authenticate(http.HandlerFunc(stripeHandler.VerifyCheckoutSession)))
+	mux.Handle("POST "+b+"/stripe/create-portal-session",
+		authenticate(http.HandlerFunc(stripeHandler.CreatePortalSession)))
+
+	// Account route (auth required, NO subscription required)
+	mux.Handle("GET "+b+"/user/account",
+		authenticate(http.HandlerFunc(accountHandler.GetAccount)))
 
 	// Authenticated + subscribed routes — addresses
 	mux.Handle("POST "+b+"/addresses",

backend/internal/handlers/account.go

@@ -0,0 +1,66 @@
+package handlers
+
+import (
+	"log"
+	"net/http"
+	"time"
+
+	"github.com/kjannette/koin-ping/backend/internal/config"
+	"github.com/kjannette/koin-ping/backend/internal/middleware"
+	"github.com/kjannette/koin-ping/backend/internal/models"
+)
+
+type AccountHandler struct {
+	users *models.UserModel
+	cfg   *config.Config
+}
+
+func NewAccountHandler(users *models.UserModel, cfg *config.Config) *AccountHandler {
+	return &AccountHandler{users: users, cfg: cfg}
+}
+
+type accountResponse struct {
+	UserID             string  `json:"user_id"`
+	Email              string  `json:"email"`
+	UserName           string  `json:"user_name"`
+	SubscriptionStatus string  `json:"subscription_status"`
+	SubscriptionPlan   string  `json:"subscription_plan"`
+	MemberSince        *string `json:"member_since,omitempty"`
+	NextBillingDate    *string `json:"next_billing_date,omitempty"`
+	CancelAtPeriodEnd  bool    `json:"cancel_at_period_end"`
+	PeriodEndDate      *string `json:"period_end_date,omitempty"`
+}
+
+func (h *AccountHandler) GetAccount(w http.ResponseWriter, r *http.Request) {
+	userID := middleware.GetUserID(r.Context())
+	email := middleware.GetUserEmail(r.Context())
+
+	user, err := h.users.GetByID(r.Context(), userID)
+	if err != nil || user == nil {
+		log.Printf("Account: failed to get user %s: %v", userID, err)
+		writeError(w, http.StatusInternalServerError, "INTERNAL_ERROR", "Failed to load user")
+		return
+	}
+
+	resp := accountResponse{
+		UserID:             user.ID,
+		Email:              email,
+		UserName:           email,
+		SubscriptionStatus: user.SubscriptionStatus,
+		SubscriptionPlan:   "monthly/$1.99",
+	}
+
+	if user.SubscriptionCreatedAt != nil {
+		t := user.SubscriptionCreatedAt.Format(time.DateOnly)
+		resp.MemberSince = &t
+	}
+
+	// MOCKED: NextBillingDate, CancelAtPeriodEnd, PeriodEndDate.
+	// TODO: stripe-go v82 removed Subscription.CurrentPeriodEnd / CancelAtPeriodEnd.
+	// Research SubscriptionItem.CurrentPeriodEnd or use Stripe REST API directly.
+	resp.NextBillingDate = nil
+	resp.CancelAtPeriodEnd = false
+	resp.PeriodEndDate = nil
+
+	writeJSON(w, http.StatusOK, resp)
+}

backend/internal/handlers/stripe.go

@@ -7,6 +7,7 @@ import (
 	"net/http"
 
 	"github.com/stripe/stripe-go/v82"
+	portalsession "github.com/stripe/stripe-go/v82/billingportal/session"
 	checkoutsession "github.com/stripe/stripe-go/v82/checkout/session"
 	"github.com/stripe/stripe-go/v82/webhook"
 
@@ -139,6 +140,38 @@ func (h *StripeHandler) VerifyCheckoutSession(w http.ResponseWriter, r *http.Req
 	writeJSON(w, http.StatusOK, map[string]string{"subscription_status": "active"})
 }
 
+// CreatePortalSession creates a Stripe Billing Portal session so the user can
+// manage their subscription (cancel, update payment method, view invoices).
+func (h *StripeHandler) CreatePortalSession(w http.ResponseWriter, r *http.Request) {
+	userID := middleware.GetUserID(r.Context())
+
+	user, err := h.users.GetByID(r.Context(), userID)
+	if err != nil || user == nil {
+		log.Printf("Portal: failed to get user %s: %v", userID, err)
+		writeError(w, http.StatusInternalServerError, "INTERNAL_ERROR", "Failed to load user")
+		return
+	}
+
+	if user.StripeCustomerID == nil || *user.StripeCustomerID == "" {
+		writeError(w, http.StatusBadRequest, "NO_CUSTOMER", "No Stripe customer on file")
+		return
+	}
+
+	params := &stripe.BillingPortalSessionParams{
+		Customer:  user.StripeCustomerID,
+		ReturnURL: stripe.String(h.cfg.FrontendURL + "/account"),
+	}
+
+	s, err := portalsession.New(params)
+	if err != nil {
+		log.Printf("Portal: failed to create portal session: %v", err)
+		writeError(w, http.StatusInternalServerError, "STRIPE_ERROR", "Failed to create portal session")
+		return
+	}
+
+	writeJSON(w, http.StatusOK, map[string]string{"url": s.URL})
+}
+
 // HandleWebhook processes incoming Stripe webhook events.
 // This endpoint must NOT require authentication (Stripe calls it directly).
 func (h *StripeHandler) HandleWebhook(w http.ResponseWriter, r *http.Request) {

frontend/src/App.jsx

@@ -7,6 +7,7 @@ import Subscribe from "./pages/subscribe/subscribe";
 import Addresses from "./pages/addresses/Addresses";
 import Alerts from "./pages/alerts/Alerts";
 import AlertHistory from "./pages/alertHistory/AlertHistory";
+import Account from "./pages/user_account/Account";
 
 export default function App() {
   const { currentUser } = useAuth();
@@ -30,6 +31,7 @@ export default function App() {
         <Route path="/addresses" element={<Addresses />} />
         <Route path="/alerts" element={<Alerts />} />
         <Route path="/alertevents" element={<AlertHistory />} />
+        <Route path="/account" element={<Account />} />
         <Route path="/subscribe" element={<Subscribe />} />
         <Route path="*" element={<Navigate to="/addresses" />} />
       </Routes>

frontend/src/api/account.js

@@ -0,0 +1,25 @@
+import { getAuthHeaders } from "./authHeaders";
+import { API_BASE } from "./config";
+
+export async function getAccount() {
+    const headers = await getAuthHeaders();
+    const res = await fetch(`${API_BASE}/user/account`, { headers });
+    if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.message || "Failed to load account");
+    }
+    return res.json();
+}
+
+export async function createPortalSession() {
+    const headers = await getAuthHeaders();
+    const res = await fetch(`${API_BASE}/stripe/create-portal-session`, {
+        method: "POST",
+        headers,
+    });
+    if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.message || "Failed to create portal session");
+    }
+    return res.json();
+}

frontend/src/components/Navbar.css

@@ -43,6 +43,16 @@
   color: #777;
 }
 
+.navbar__user-link {
+  color: var(--color-primary);
+  text-decoration: none;
+  transition: color 0.15s ease;
+}
+
+.navbar__user-link:hover {
+  color: var(--color-primary-hover);
+}
+
 .navbar__logout {
   padding: 0.4rem 1rem;
   font-size: 1.275rem;

frontend/src/components/Navbar.jsx

@@ -35,7 +35,7 @@ export default function Navbar() {
       </div>
 
       <div className="flex flex--center gap-lg">
-        <span className="navbar__user">{currentUser.email}</span>
+        <Link to="/account" className="navbar__user navbar__user-link">{currentUser.email}</Link>
         <button onClick={logout} className="navbar__logout">
           Logout
         </button>

frontend/src/pages/user_account/Account.css

@@ -0,0 +1,77 @@
+.account-page h1 {
+  font-size: 2rem;
+  font-weight: 200;
+}
+
+.account__section-title {
+  font-size: 1.4rem;
+  font-weight: 400;
+  margin-bottom: 1.25rem;
+  color: var(--color-text);
+  border-bottom: 1px solid var(--color-border-light);
+  padding-bottom: 0.5rem;
+}
+
+.account__row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.6rem 0;
+  border-bottom: 1px solid var(--color-border-light);
+}
+
+.account__row--last {
+  border-bottom: none;
+}
+
+.account__label {
+  color: var(--color-text-muted);
+  font-size: 1.1rem;
+}
+
+.account__value {
+  color: var(--color-text);
+  font-size: 1.1rem;
+  text-align: right;
+}
+
+.account__uuid {
+  font-size: 0.85rem;
+  color: var(--color-text-dimmed);
+  word-break: break-all;
+  max-width: 60%;
+}
+
+.account__status {
+  font-weight: 600;
+}
+
+.account__status--active {
+  color: var(--color-success-text);
+}
+
+.account__status--canceled {
+  color: var(--color-danger);
+}
+
+.account__status--canceling {
+  color: var(--color-warning);
+}
+
+.account__status--past_due {
+  color: var(--color-error);
+}
+
+.account__portal-section {
+  margin-top: 1.25rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--color-border-light);
+}
+
+.account__portal-hint {
+  margin-top: 0.5rem;
+}
+
+.account__password-form {
+  max-width: 400px;
+}

frontend/src/pages/user_account/Account.jsx

@@ -0,0 +1,202 @@
+import { useState, useEffect } from "react";
+import { updatePassword } from "firebase/auth";
+import { auth } from "../../firebase/config";
+import { getAccount, createPortalSession } from "../../api/account";
+import "./Account.css";
+
+export default function Account() {
+  const [account, setAccount] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [passwordMsg, setPasswordMsg] = useState(null);
+  const [passwordErr, setPasswordErr] = useState(null);
+  const [changingPassword, setChangingPassword] = useState(false);
+
+  const [portalLoading, setPortalLoading] = useState(false);
+
+  useEffect(() => {
+    async function fetchAccount() {
+      try {
+        const data = await getAccount();
+        setAccount(data);
+      } catch (err) {
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchAccount();
+  }, []);
+
+  async function handlePasswordChange(e) {
+    e.preventDefault();
+    setPasswordMsg(null);
+    setPasswordErr(null);
+
+    if (newPassword.length < 6) {
+      setPasswordErr("Password must be at least 6 characters");
+      return;
+    }
+    if (newPassword !== confirmPassword) {
+      setPasswordErr("Passwords do not match");
+      return;
+    }
+
+    try {
+      setChangingPassword(true);
+      await updatePassword(auth.currentUser, newPassword);
+      setPasswordMsg("Password updated successfully");
+      setNewPassword("");
+      setConfirmPassword("");
+    } catch (err) {
+      setPasswordErr(err.message);
+    } finally {
+      setChangingPassword(false);
+    }
+  }
+
+  async function handleManageSubscription() {
+    try {
+      setPortalLoading(true);
+      const { url } = await createPortalSession();
+      window.location.href = url;
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setPortalLoading(false);
+    }
+  }
+
+  if (loading) {
+    return <div className="page">Loading...</div>;
+  }
+
+  if (error && !account) {
+    return <div className="page text-error">Error: {error}</div>;
+  }
+
+  const isCanceling = account.cancel_at_period_end;
+  const statusLabel = isCanceling
+    ? "Canceling"
+    : account.subscription_status === "active"
+      ? "Active"
+      : account.subscription_status.charAt(0).toUpperCase() +
+        account.subscription_status.slice(1);
+
+  return (
+    <div className="page account-page">
+      <h1 className="mb-lg">Account</h1>
+
+      {error && <div className="alert alert--error mb-lg">{error}</div>}
+
+      {/* ── Profile Section ──────────────────────── */}
+      <div className="section mb-lg">
+        <h2 className="account__section-title">Profile</h2>
+        <div className="account__row">
+          <span className="account__label">Email</span>
+          <span className="account__value">{account.email}</span>
+        </div>
+        <div className="account__row">
+          <span className="account__label">User Name</span>
+          <span className="account__value">{account.user_name}</span>
+        </div>
+        <div className="account__row account__row--last">
+          <span className="account__label">User ID</span>
+          <span className="account__value text-mono account__uuid">{account.user_id}</span>
+        </div>
+      </div>
+
+      {/* ── Subscription Section ─────────────────── */}
+      <div className="section mb-lg">
+        <h2 className="account__section-title">Subscription</h2>
+        <div className="account__row">
+          <span className="account__label">Plan</span>
+          <span className="account__value">{account.subscription_plan}</span>
+        </div>
+        <div className="account__row">
+          <span className="account__label">Status</span>
+          <span className={`account__value account__status account__status--${isCanceling ? "canceling" : account.subscription_status}`}>
+            {statusLabel}
+          </span>
+        </div>
+        {account.member_since && (
+          <div className="account__row">
+            <span className="account__label">Member Since</span>
+            <span className="account__value">{account.member_since}</span>
+          </div>
+        )}
+        {account.next_billing_date && !isCanceling && (
+          <div className="account__row">
+            <span className="account__label">Next Billing Date</span>
+            <span className="account__value">{account.next_billing_date}</span>
+          </div>
+        )}
+        {isCanceling && account.period_end_date && (
+          <div className="account__row">
+            <span className="account__label">Access Until</span>
+            <span className="account__value">{account.period_end_date}</span>
+          </div>
+        )}
+
+        {isCanceling && (
+          <div className="alert alert--warning mt-md">
+            Your subscription has been canceled and will not renew.
+            You have full access until {account.period_end_date}.
+          </div>
+        )}
+
+        <div className="account__portal-section">
+          <button
+            onClick={handleManageSubscription}
+            disabled={portalLoading}
+            className="btn btn--ghost"
+          >
+            {portalLoading ? "Redirecting..." : "Manage Subscription"}
+          </button>
+          <p className="text-dimmed text-sm account__portal-hint">
+            Cancel subscription, update payment method, or view invoices via Stripe.
+          </p>
+        </div>
+      </div>
+
+      {/* ── Change Password Section ──────────────── */}
+      <div className="section">
+        <h2 className="account__section-title">Change Password</h2>
+
+        {passwordMsg && <div className="alert alert--success mb-md">{passwordMsg}</div>}
+        {passwordErr && <div className="alert alert--error mb-md">{passwordErr}</div>}
+
+        <form onSubmit={handlePasswordChange} className="account__password-form">
+          <div className="form-field">
+            <label className="form-label">New Password</label>
+            <input
+              type="password"
+              className="form-control"
+              value={newPassword}
+              onChange={(e) => setNewPassword(e.target.value)}
+              disabled={changingPassword}
+              required
+            />
+          </div>
+          <div className="form-field form-field--last">
+            <label className="form-label">Confirm Password</label>
+            <input
+              type="password"
+              className="form-control"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              disabled={changingPassword}
+              required
+            />
+          </div>
+          <button type="submit" disabled={changingPassword} className="btn btn--primary">
+            {changingPassword ? "Updating..." : "Update Password"}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}