Dựng trang tài khoản và bán hàng

assets/account-api.js
assets/account-pages.js
pages/register.html
pages/login.html
pages/profile.html
pages/products.html
pages/products/[slug].html
pages/cart.html
pages/checkout.html
pages/my-orders/index.html
pages/my-orders/[id].html
pages/my-orders/[id]/tracking.html
pages/tracking.html

{% extends "layouts/default.html" %}
{% block content %}
<h1>Đăng nhập</h1>
<form id="login-form" method="post" action="/_post/auth/login">
  <input type="hidden" name="_token" value="{{ csrf_token }}">
  <label>Email <input name="email" type="email" autocomplete="username" required></label>
  <label>Mật khẩu <input name="password" type="password"
    autocomplete="current-password" required></label>
  <button type="submit">Đăng nhập</button>
</form>
<p id="message" role="status"></p>
<script type="module" src="{{ asset('account-pages.js') }}"></script>
{% endblock %}

let csrf = document.querySelector('meta[name="csrf-token"]')?.content || "";
export async function api(path, body) {
  const post = body !== undefined;
  if (post && !csrf) throw new Error("Thiếu token. Vui lòng tải lại trang.");
  const response = await fetch("/_post" + path, {
    method: post ? "POST" : "GET",
    credentials: "same-origin",
    cache: "no-store",
    headers: post
      ? {"Content-Type": "application/json", "X-CSRF-Token": csrf}
      : {"Accept": "application/json"},
    ...(post ? {body: JSON.stringify(body)} : {})
  });
  const result = await response.json().catch(() => ({}));
  if (!response.ok) {
    const error = new Error(result.error?.message || "Không thể xử lý yêu cầu.");
    error.status = response.status;
    error.code = result.error?.code;
    error.retryAfter = response.headers.get("Retry-After");
    throw error;
  }
  if (result.csrf_token) csrf = result.csrf_token;
  return result;
}
export const session = async () => ({authenticated: document.body.dataset.authenticated === "true"}); // Snapshot SSR, backend vẫn kiểm tra mỗi request.
export async function requireAccount() {
  const current = await session();
  if (!current.authenticated) {
    location.replace("/login?next=" +
      encodeURIComponent(location.pathname + location.search));
    return false;
  }
  return true;
}
export function safeNext(value) {
  const u = new URL(value || "/profile", location.origin);
  const allowed = /^\/(profile|products(?:\/[^/?#]+)?|cart|checkout|my-orders(?:\/[a-f0-9-]+(?:\/tracking)?)?)$/;
  return u.origin === location.origin && allowed.test(u.pathname)
    ? u.pathname + u.search : "/profile";
}

import {api, session, requireAccount, safeNext} from "./account-api.js";
const message = document.querySelector("#message");
function show(text) { if (message) message.textContent = text; }
function bind(id, submit) {
  const form = document.getElementById(id);
  if (!form) return;
  let busy = false;
  form.addEventListener("submit", async event => {
    event.preventDefault();
    if (busy) return;
    busy = true;
    const button = form.querySelector('[type="submit"]');
    if (button) button.disabled = true;
    try { await submit(Object.fromEntries(new FormData(form))); }
    catch (error) {
      if (error.code === "csrf_rejected") show("Phiên bảo vệ hết hạn. Hãy tải lại trang.");
      show(error.message);
    } finally {
      busy = false;
      if (button) button.disabled = false;
    }
  });
}
bind("register-form", async fields => {
  const bytes = new TextEncoder().encode(fields.password).length;
  if (bytes < 12 || bytes > 72) throw new Error("Mật khẩu cần 12–72 bytes.");
  const result = await api("/auth/register", {
    email: fields.email, password: fields.password, display_name: fields.display_name
  });
  show(result.message); // 202 không bảo đảm đã tạo; không tự login.
});
bind("login-form", async fields => {
  await api("/auth/login", {email: fields.email, password: fields.password});
  let next = "/profile";
  try { next = safeNext(new URLSearchParams(location.search).get("next")); } catch {}
  location.replace(next);
});
document.querySelector("#logout")?.addEventListener("click", async () => {
  try {
    await api("/auth/logout", {});
    document.querySelector("#private-content")?.replaceChildren();
    location.replace("/login");
  } catch (error) { show(error.message); }
});

{% set listing = products.paginate(limit=12) %}
{% for product in listing.items %}
<a href="/products/{{ product.slug|urlencode }}">{{ product.name }}</a>
{% endfor %}

{# pages/products/[slug].html #}
{% set product = products.find(slug=slug) %}
{% if not product %}{% abort 404 %}{% endif %}
{{ product.name }}

const cart = await api("/cart/get", {}); // Guest cũng dùng được.
async function setQuantity(variantID, quantity) {
  if (!Number.isInteger(quantity) || quantity < 0 || quantity > 999)
    throw new Error("Số lượng không hợp lệ.");
  return quantity === 0
    ? api("/cart/remove", { variant_id: variantID})
    : api("/cart/update", { variant_id: variantID, quantity}); // Render lại bằng response này.
}
// Xóa: await setQuantity(variantID, 0);
// Cập nhật: await setQuantity(variantID, Number(input.value));
// Cart.Items, Cart.Subtotal — không lấy giá từ DOM để đặt hàng.

// Guest dùng được, không cần requireAccount(). Các biến giữ trong bộ nhớ của trang.
let pending = null;
let sending = false;
const cart = await api("/cart/get", {});
async function prepareOrder(address, note) {
  if (pending) throw new Error("Cần xử lý lần đặt trước trước khi tạo báo giá mới.");
  const quote = await api("/checkout/quote", { shipping_address: address});
  // Render quote.Items, phí/thuế/giảm giá/GrandTotalAmount và nút xác nhận.
  // Chỉ gọi confirmOrder sau khi người dùng xác nhận quote này.
  return {quote, address: structuredClone(address), note};
}
async function confirmOrder(review) {
  if (sending) return;
  if (!pending) {
    pending = {
      idempotency_key: Array.from(crypto.getRandomValues(new Uint8Array(16)), b => b.toString(16).padStart(2, '0')).join(''),
      quote_fingerprint: review.quote.Fingerprint,
      shipping_address: review.address,
      note: review.note
    };
  }
  sending = true;
  try {
    const receipt = await api("/checkout/place-order", pending);
    pending = null;
    location.replace("/my-orders/" + encodeURIComponent(receipt.ID));
  } catch (error) {
    // Mạng/5xx: giữ pending và địa chỉ, chỉ cho retry thủ công cùng payload.
    // 409: server đã từ chối, bỏ báo giá cũ để xem/xác nhận lại.
    if (error.status === 409 || error.status === 422) pending = null;
    if (error.code === "csrf_rejected") show("Phiên bảo vệ hết hạn. Hãy tải lại trang.");
    throw error; // Handler hiển thị lỗi; không tự bấm lại.
  } finally { sending = false; }
}