Redesigns the MFA method cards and supporting sections for better visual hierarchy and professional styling: Method cards (organizer): - Vertical layout with large icon (VAvatar 44px) at top - Description text explaining each method - Status chip with check icon when configured - VCardActions with primary chip/button + "Opnieuw instellen" - Primary method card highlighted with 2px primary border - Proper h-100 for equal height side-by-side Backup codes: - Separate outlined VCard with key icon, progress bar, refresh button - Cleaner spacing and visual grouping Disable MFA: - Replaced heavy danger-zone card with subtle text button (tabler-shield-off icon, error color) — less visual weight for a rarely-used destructive action Portal: - Per-method rows with VAvatar icons and stacked status chips - Matching text-button style for disable action Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Crewli — Organizer SPA
Main product UI for organisation and event staff (Vue 3 + Vuexy + Vuetify). Lives in this repo; only re-copy from Vuexy when upgrading the template.
Setup
- Install dependencies:
pnpm install
- Create
.env.local:
VITE_API_URL=http://localhost:8000/api/v1
VITE_APP_NAME="Crewli Organizer"
- Dev server uses port 5174 (see
vite.config.tsor run from repo root:make app).
pnpm dev --port 5174
Port
Runs on http://localhost:5174
Production: e.g. VITE_API_URL=https://api.crewli.app/api/v1 and host the SPA at https://crewli.app (see api/.env.example for FRONTEND_APP_URL and SANCTUM_STATEFUL_DOMAINS).