Add auth flow and role-based views (admin vs stakeholder)

forgejo_admin commented

2026-03-21 17:28:17 +00:00

Owner

Type

Feature

Repo

forgejo_admin/minio-playground

Lineage

plan-minio-mobile → Phase 1 (Playground Auth Flow)

User Story

As a platform admin on my phone
I want to sign in and see all buckets with full CRUD
So that I can manage MinIO assets from mobile

As a project stakeholder on my phone
I want to sign in and see only my project's files
So that I can review assets shared with me without seeing other projects

Context

The playground v1 (PR #2) shipped with mock data and no auth flow. Now that minio-mobile is its own project with multi-tenant auth, the playground needs to prototype the signin → role-based routing UX before we build the SvelteKit app.

Follow the westside-playground pattern: signin page with Demo Account links that navigate into different role views. HTML comments document @route, @auth, @api, @interactivity, @gaps, @notes so SvelteKit promotion knows exactly what to wire up.

Key decisions:

Signin page with demo accounts — "Sign in as Admin", "Sign in as Stakeholder (Westside)", "Sign in as Stakeholder (MCD Tracker)"
Admin view — sees all buckets (assets, postgres-wal, tf-state-backups), full CRUD
Stakeholder view — sees only their project prefix (e.g., assets/westside/), read + upload, no delete
Stakeholder landing — skip bucket list, go directly to their project's file browser
One style.css, one app.js, HTML per page — no npm, no frameworks, no build step

File Targets

Files to modify:

app.js — add role state management, demo account routing, role-based mock data filtering, stakeholder prefix scoping
style.css — add signin page styles, role-specific nav styles, stakeholder header
index.html — update to be admin-only bucket list landing (redirect stakeholders to their browse view)

Files to create:

signin.html — login form (non-functional) with Demo Account links. Include @route, @auth, @api, @interactivity, @gaps, @notes HTML comments (see westside-playground/signin.html for pattern)

Files to reference (read-only):

~/westside-playground/signin.html — reference for auth flow pattern and HTML comment conventions
~/westside-playground/shared/app.css — reference for signin page styling patterns

Files NOT to touch:

assets/ directory — leave as-is

Acceptance Criteria

signin.html renders at 390px with login form and 3 demo account links
"Sign in as Admin" navigates to index.html (bucket list — all buckets visible)
"Sign in as Stakeholder (Westside)" navigates to browse.html?bucket=assets&prefix=westside/&role=stakeholder&project=Westside Basketball
"Sign in as Stakeholder (MCD Tracker)" navigates to browse.html?bucket=assets&prefix=mcd-tracker/&role=stakeholder&project=MCD Tracker
Admin nav shows: Buckets, Upload, Settings. Stakeholder nav shows: My Files, Upload
Stakeholder header shows project name ("Westside Basketball") not prefix path
Stakeholder cannot navigate to other buckets or prefixes outside their scope
Stakeholder browse view hides delete buttons
All pages still render at 390px without horizontal scroll
HTML comments on signin.html document: @route /signin, @auth none, @interactivity with Keycloak OIDC flow description
No npm, no frameworks — still served with python3 -m http.server 8080

Test Expectations

Manual: open signin.html at 390px, verify layout
Manual: click each demo account link, verify correct view loads
Manual: as stakeholder, verify no access to other buckets/prefixes
Manual: as admin, verify all buckets visible with full CRUD controls
No automated tests — visual prototype

Constraints

Must preserve existing file structure: one style.css, one app.js, HTML files per page
Role state stored in URL params or sessionStorage (not cookies)
Mock data must use real bucket names and realistic prefixes
Follow 10 layout rules from pal-e-playground/guide/index.html

Checklist

PR opened
No unrelated changes
All pages render at 390px without horizontal scroll

phase-minio-mobile-1-playground-auth — phase note
project-minio-mobile — project this advances

### Type Feature ### Repo `forgejo_admin/minio-playground` ### Lineage `plan-minio-mobile` → Phase 1 (Playground Auth Flow) ### User Story As a platform admin on my phone I want to sign in and see all buckets with full CRUD So that I can manage MinIO assets from mobile As a project stakeholder on my phone I want to sign in and see only my project's files So that I can review assets shared with me without seeing other projects ### Context The playground v1 (PR #2) shipped with mock data and no auth flow. Now that minio-mobile is its own project with multi-tenant auth, the playground needs to prototype the signin → role-based routing UX before we build the SvelteKit app. Follow the westside-playground pattern: signin page with Demo Account links that navigate into different role views. HTML comments document `@route`, `@auth`, `@api`, `@interactivity`, `@gaps`, `@notes` so SvelteKit promotion knows exactly what to wire up. Key decisions: - **Signin page with demo accounts** — "Sign in as Admin", "Sign in as Stakeholder (Westside)", "Sign in as Stakeholder (MCD Tracker)" - **Admin view** — sees all buckets (assets, postgres-wal, tf-state-backups), full CRUD - **Stakeholder view** — sees only their project prefix (e.g., `assets/westside/`), read + upload, no delete - **Stakeholder landing** — skip bucket list, go directly to their project's file browser - **One style.css, one app.js, HTML per page** — no npm, no frameworks, no build step ### File Targets Files to modify: - `app.js` — add role state management, demo account routing, role-based mock data filtering, stakeholder prefix scoping - `style.css` — add signin page styles, role-specific nav styles, stakeholder header - `index.html` — update to be admin-only bucket list landing (redirect stakeholders to their browse view) Files to create: - `signin.html` — login form (non-functional) with Demo Account links. Include `@route`, `@auth`, `@api`, `@interactivity`, `@gaps`, `@notes` HTML comments (see westside-playground/signin.html for pattern) Files to reference (read-only): - `~/westside-playground/signin.html` — reference for auth flow pattern and HTML comment conventions - `~/westside-playground/shared/app.css` — reference for signin page styling patterns Files NOT to touch: - `assets/` directory — leave as-is ### Acceptance Criteria - [ ] `signin.html` renders at 390px with login form and 3 demo account links - [ ] "Sign in as Admin" navigates to `index.html` (bucket list — all buckets visible) - [ ] "Sign in as Stakeholder (Westside)" navigates to `browse.html?bucket=assets&prefix=westside/&role=stakeholder&project=Westside Basketball` - [ ] "Sign in as Stakeholder (MCD Tracker)" navigates to `browse.html?bucket=assets&prefix=mcd-tracker/&role=stakeholder&project=MCD Tracker` - [ ] Admin nav shows: Buckets, Upload, Settings. Stakeholder nav shows: My Files, Upload - [ ] Stakeholder header shows project name ("Westside Basketball") not prefix path - [ ] Stakeholder cannot navigate to other buckets or prefixes outside their scope - [ ] Stakeholder browse view hides delete buttons - [ ] All pages still render at 390px without horizontal scroll - [ ] HTML comments on signin.html document: `@route /signin`, `@auth none`, `@interactivity` with Keycloak OIDC flow description - [ ] No npm, no frameworks — still served with `python3 -m http.server 8080` ### Test Expectations - [ ] Manual: open signin.html at 390px, verify layout - [ ] Manual: click each demo account link, verify correct view loads - [ ] Manual: as stakeholder, verify no access to other buckets/prefixes - [ ] Manual: as admin, verify all buckets visible with full CRUD controls - No automated tests — visual prototype ### Constraints - Must preserve existing file structure: one `style.css`, one `app.js`, HTML files per page - Role state stored in URL params or sessionStorage (not cookies) - Mock data must use real bucket names and realistic prefixes - Follow 10 layout rules from `pal-e-playground/guide/index.html` ### Checklist - [ ] PR opened - [ ] No unrelated changes - [ ] All pages render at 390px without horizontal scroll ### Related - `phase-minio-mobile-1-playground-auth` — phase note - `project-minio-mobile` — project this advances