112 lines
3.4 KiB
HTML
112 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Feature Sequences</title>
|
|
<link rel="stylesheet" href="./style.css" />
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>Sequence Diagrams</h1>
|
|
<div class="meta">Mermaid-rendered flows for the most important user journeys.</div>
|
|
</header>
|
|
<main class="grid">
|
|
<section class="card">
|
|
<h2>User Registration & Verification</h2>
|
|
<div class="diagram">
|
|
<pre class="mermaid">
|
|
sequenceDiagram
|
|
participant U as User
|
|
participant W as Web (Next.js)
|
|
participant DB as Postgres
|
|
participant Mail as SMTP
|
|
participant Admin as Admin
|
|
|
|
U->>W: Submit registration form (email, password)
|
|
W->>DB: Create pending user + verification token
|
|
W->>Mail: Send verification email with token link
|
|
U-->>Mail: Opens email
|
|
U->>W: Click verify link
|
|
W->>DB: Mark email verified (status = verified, awaiting approval)
|
|
Admin->>W: Approves user
|
|
W->>DB: Update status = approved
|
|
U->>W: Login (email/password)
|
|
W->>DB: Validate credentials, create session token
|
|
W-->>U: Set session cookie
|
|
</pre>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2>Listing Creation & Approval</h2>
|
|
<div class="diagram">
|
|
<pre class="mermaid">
|
|
sequenceDiagram
|
|
participant Host as Host (logged in)
|
|
participant W as Web/API
|
|
participant DB as Postgres
|
|
participant Mod as Moderator
|
|
participant Public as Public visitor
|
|
|
|
Host->>W: Open "New listing" and submit details (address, amenities, images)
|
|
W->>DB: Save listing (status = PENDING)
|
|
Mod->>W: Review pending listing
|
|
W->>DB: Approve (status = PUBLISHED)
|
|
Host-->>W: Listing appears in "My listings" and public browse
|
|
Public->>W: Browse latest/map and fetch listing cover image
|
|
</pre>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2>Listing Removal by Owner/Moderator</h2>
|
|
<div class="diagram">
|
|
<pre class="mermaid">
|
|
sequenceDiagram
|
|
participant Owner as Owner/Moderator
|
|
participant W as Web/API
|
|
participant DB as Postgres
|
|
participant Public as Public visitor
|
|
|
|
Owner->>W: Click "Remove" on listing
|
|
W->>Owner: Confirm removal
|
|
Owner-->>W: Confirm
|
|
W->>DB: Set removedAt timestamp, status = REMOVED
|
|
W-->>Owner: Show updated state in "My listings"
|
|
Public--xW: Listing hidden from browse/slug pages
|
|
</pre>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2>Profile Update (Name/Password)</h2>
|
|
<div class="diagram">
|
|
<pre class="mermaid">
|
|
sequenceDiagram
|
|
participant User
|
|
participant W as Web/API
|
|
participant DB as Postgres
|
|
|
|
User->>W: Open profile page (requires session cookie)
|
|
W->>DB: Fetch user record (email immutable)
|
|
User->>W: Submit updated name and/or password
|
|
W->>DB: Update fields (hash password if provided)
|
|
W-->>User: Show "Profile updated"
|
|
</pre>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2>Rendering instructions</h2>
|
|
<ul>
|
|
<li>Mermaid renders automatically in-browser via CDN; no local tooling required.</li>
|
|
<li>Edit the Mermaid blocks inline in these HTML files.</li>
|
|
</ul>
|
|
</section>
|
|
</main>
|
|
<script type="module">
|
|
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
|
|
mermaid.initialize({ startOnLoad: true, theme: 'dark' });
|
|
</script>
|
|
</body>
|
|
</html>
|