From 97012dd4330012f8a6e535dd3c7fef2f038d5ef7 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Tue, 13 May 2025 16:02:41 +0200 Subject: [PATCH 001/171] Update background colors for dark mode to match Figma design --- .../shared-webapp/ui/tailwind-preset.ts | 6 +- application/shared-webapp/ui/tailwind.css | 57 ++++++++++++------- 2 files changed, 41 insertions(+), 22 deletions(-) diff --git a/application/shared-webapp/ui/tailwind-preset.ts b/application/shared-webapp/ui/tailwind-preset.ts index 07b79d0e3..2bdaed737 100644 --- a/application/shared-webapp/ui/tailwind-preset.ts +++ b/application/shared-webapp/ui/tailwind-preset.ts @@ -72,7 +72,11 @@ export default { info: { DEFAULT: "hsl(var(--info))", foreground: "hsl(var(--info-foreground))" - } + }, + // Dark theme specific colors + sidebar: "hsl(var(--sidebar))", + "hover-background": "hsl(var(--hover-background))", + "active-background": "hsl(var(--active-background))" }, borderRadius: { lg: "var(--radius)", diff --git a/application/shared-webapp/ui/tailwind.css b/application/shared-webapp/ui/tailwind.css index fcd9ff4df..bfb40ce9b 100644 --- a/application/shared-webapp/ui/tailwind.css +++ b/application/shared-webapp/ui/tailwind.css @@ -29,7 +29,7 @@ --secondary-foreground: 222.2 47.4% 11.2%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; - --destructive: 0 84.2% 60.2%; + --destructive: 0 100% 50%; --destructive-foreground: 210 40% 98%; --danger: 0 70% 35%; @@ -59,33 +59,37 @@ } .dark { - --background: 222.2 84% 4.9%; + --background: 222 29% 12%; /* #161B26 - Updated background color */ --foreground: 210 40% 98%; - --muted: 217.2 32.6% 17.5%; - --muted-foreground: 215 20.2% 65.1%; - --accent: 217.2 32.6% 17.5%; - --accent-foreground: 210 40% 98%; - --popover: 222.2 84% 4.9%; + --muted: 223 15% 18%; /* #222530 - Slightly lighter than background for muted areas */ + --muted-foreground: 217.9 10.6% 64.9%; + --popover: 222 29% 12%; /* Same as background */ --popover-foreground: 210 40% 98%; - --border: 217.2 32.6% 17.5%; - --input: 217.2 32.6% 17.5%; - --card: 222.2 84% 4.9%; + --border: 217 19% 27%; /* #303644 - Border color from Figma */ + --input: 217 19% 27%; /* #303644 - Same as border */ + --card: 222 29% 12%; /* Same as background */ --card-foreground: 210 40% 98%; --primary: 210 40% 98%; --primary-foreground: 222.2 47.4% 11.2%; - --secondary: 217.2 32.6% 17.5%; + --secondary: 217 19% 27%; /* #303644 - Secondary background elements */ --secondary-foreground: 210 40% 98%; - --destructive: 0 62.8% 30.6%; + --accent: 219 15% 34%; /* #404759 - Accent background elements */ + --accent-foreground: 210 40% 98%; + --destructive: 0 80% 58%; /* More vibrant red for destructive actions */ --destructive-foreground: 210 40% 98%; + --ring: 217 19% 27%; /* Same as border */ + --sidebar: 222 29% 12%; /* #161B26 - Same as background */ + --hover-background: 223 24% 16%; /* #1F2535 - For hover states, slightly lighter */ + --active-background: 222 22% 20%; /* #262E41 - For active/selected states, even lighter */ - --danger: 0 63% 31%; - --danger-foreground: 210 40% 98%; - --warning: 41 96% 40%; - --warning-foreground: 210 40% 98%; - --success: 144 61% 20%; - --success-foreground: 210 40% 98%; - --info: 224 64% 33%; - --info-foreground: 210 40% 98%; + --danger: 0 84% 60%; + --danger-foreground: 0 0% 100%; + --success: 142 76% 36%; + --success-foreground: 0 0% 100%; + --warning: 38 92% 50%; + --warning-foreground: 0 0% 100%; + --info: 217 91% 60%; + --info-foreground: 0 0% 100%; --ring: 216 34% 17%; --panel-opacity: 0.5; @@ -111,9 +115,20 @@ } body { @apply bg-background text-foreground; + font-feature-settings: "rlig" 1, "calt" 1; } html { - font-family: "Inter", sans-serif; + -webkit-text-size-adjust: 100%; + font-variation-settings: normal; + font-variant: normal; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-synthesis: none; + height: 100%; + overflow-x: hidden; + overflow-y: scroll; + scroll-behavior: smooth; + touch-action: manipulation; } } From 45a59d4a9772a677c31bd0aa03349f4e7358bf38 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Tue, 13 May 2025 21:35:08 +0200 Subject: [PATCH 002/171] Update background colors for input fields in dark mode to match Figma design --- .../account-management/WebApp/routes/admin/index.tsx | 6 +++--- application/shared-webapp/ui/components/Button.tsx | 3 ++- application/shared-webapp/ui/components/Checkbox.tsx | 2 +- application/shared-webapp/ui/components/ComboBox.tsx | 2 +- application/shared-webapp/ui/components/DatePicker.tsx | 4 ++-- application/shared-webapp/ui/components/Digit.tsx | 2 +- application/shared-webapp/ui/components/Dropdown.tsx | 4 ++-- application/shared-webapp/ui/components/Field.tsx | 2 +- application/shared-webapp/ui/components/Input.tsx | 2 +- application/shared-webapp/ui/components/ListBox.tsx | 4 ++-- application/shared-webapp/ui/components/Menu.tsx | 2 +- application/shared-webapp/ui/components/Popover.tsx | 2 +- application/shared-webapp/ui/components/SearchField.tsx | 6 +++++- application/shared-webapp/ui/components/Select.tsx | 6 +++--- application/shared-webapp/ui/components/TextArea.tsx | 2 +- application/shared-webapp/ui/tailwind-preset.ts | 3 ++- application/shared-webapp/ui/tailwind.css | 9 +++++++-- 17 files changed, 36 insertions(+), 25 deletions(-) diff --git a/application/account-management/WebApp/routes/admin/index.tsx b/application/account-management/WebApp/routes/admin/index.tsx index 8dee33087..04d1dbbca 100644 --- a/application/account-management/WebApp/routes/admin/index.tsx +++ b/application/account-management/WebApp/routes/admin/index.tsx @@ -31,7 +31,7 @@ export default function Home() {
@@ -51,7 +51,7 @@ export default function Home() { startDate: getDateDaysAgo(30), endDate: getTodayIsoDate() }} - className="mx-6 w-1/3 rounded-xl bg-muted/50 p-6 transition-all hover:bg-accent" + className="mx-6 w-1/3 rounded-xl bg-input-background p-6 transition-all hover:bg-hover-background" aria-label={t`View active users`} >
@@ -67,7 +67,7 @@ export default function Home() {
diff --git a/application/shared-webapp/ui/components/Button.tsx b/application/shared-webapp/ui/components/Button.tsx index c0c010098..9fa0333cd 100644 --- a/application/shared-webapp/ui/components/Button.tsx +++ b/application/shared-webapp/ui/components/Button.tsx @@ -30,7 +30,8 @@ const button = tv({ destructive: "bg-destructive pressed:bg-destructive/80 text-destructive-foreground hover:bg-destructive/90", outline: "border border-input pressed:bg-accent/80 text-accent-foreground hover:bg-accent hover:text-accent-foreground/90", - ghost: "pressed:bg-accent/80 text-accent-foreground hover:bg-accent hover:text-accent-foreground/90", + ghost: + "pressed:bg-active-background text-accent-foreground hover:bg-hover-background hover:text-accent-foreground/90", link: "pressed:text-primary/80 text-primary underline-offset-4 hover:underline" }, size: { diff --git a/application/shared-webapp/ui/components/Checkbox.tsx b/application/shared-webapp/ui/components/Checkbox.tsx index a28a2a576..c61420d7b 100644 --- a/application/shared-webapp/ui/components/Checkbox.tsx +++ b/application/shared-webapp/ui/components/Checkbox.tsx @@ -52,7 +52,7 @@ const boxStyles = tv({ base: "flex h-full w-full flex-shrink-0 items-center justify-center rounded border transition", variants: { isSelected: { - false: "border-[--color] bg-background [--color:theme(colors.foreground)] group-pressed:opacity-90", + false: "border-[--color] bg-input-background [--color:theme(colors.foreground)] group-pressed:opacity-90", true: "border-[--color] bg-[--color] text-primary-foreground [--color:theme(colors.primary.DEFAULT)] group-pressed:group-pressed:opacity-90" }, isInvalid: { diff --git a/application/shared-webapp/ui/components/ComboBox.tsx b/application/shared-webapp/ui/components/ComboBox.tsx index 17e185e5e..407dd36c1 100644 --- a/application/shared-webapp/ui/components/ComboBox.tsx +++ b/application/shared-webapp/ui/components/ComboBox.tsx @@ -50,7 +50,7 @@ export function ComboBox({ {description && {description}} {errorMessage} - + ({ return ( {label && } - + diff --git a/application/shared-webapp/ui/components/Select.tsx b/application/shared-webapp/ui/components/Select.tsx index 2d24ad94a..c5d114952 100644 --- a/application/shared-webapp/ui/components/Select.tsx +++ b/application/shared-webapp/ui/components/Select.tsx @@ -29,14 +29,14 @@ const buttonStyles = tv({ extend: focusRing, base: [ "flex h-10 w-full min-w-[150px] cursor-default items-center gap-4 py-2 pr-2 pl-3 text-start transition", - "rounded-md border border-border text-foreground" + "rounded-md border border-border bg-input-background text-foreground" ], variants: { isInvalid: { true: "border-destructive group-invalid:border-destructive forced-colors:group-invalid:border-[Mark]" }, isDisabled: { - false: "pressed:bg-accent pressed:text-accent-foreground hover:bg-accent/90", + false: "pressed:bg-active-background pressed:text-accent-foreground hover:bg-hover-background", true: "opacity-50 forced-colors:border-[GrayText] forced-colors:text-[GrayText]" } } @@ -75,7 +75,7 @@ export function Select({ {description && {description}} {errorMessage} - + Date: Tue, 13 May 2025 22:38:14 +0200 Subject: [PATCH 003/171] Table hover dark mode - light mode broken --- .../shared-webapp/ui/components/Button.tsx | 5 ++-- .../shared-webapp/ui/components/Dropdown.tsx | 3 +++ .../shared-webapp/ui/components/ListBox.tsx | 2 +- .../ui/components/SearchField.tsx | 2 +- .../shared-webapp/ui/components/Table.tsx | 6 ++--- .../shared-webapp/ui/tailwind-preset.ts | 1 + application/shared-webapp/ui/tailwind.css | 23 ++++++++----------- 7 files changed, 20 insertions(+), 22 deletions(-) diff --git a/application/shared-webapp/ui/components/Button.tsx b/application/shared-webapp/ui/components/Button.tsx index 9fa0333cd..af9e3af73 100644 --- a/application/shared-webapp/ui/components/Button.tsx +++ b/application/shared-webapp/ui/components/Button.tsx @@ -29,9 +29,8 @@ const button = tv({ secondary: "bg-secondary pressed:bg-secondary/70 text-secondary-foreground hover:bg-secondary/80", destructive: "bg-destructive pressed:bg-destructive/80 text-destructive-foreground hover:bg-destructive/90", outline: - "border border-input pressed:bg-accent/80 text-accent-foreground hover:bg-accent hover:text-accent-foreground/90", - ghost: - "pressed:bg-active-background text-accent-foreground hover:bg-hover-background hover:text-accent-foreground/90", + "border border-input pressed:bg-accent/80 text-accent-foreground hover:bg-hover-background hover:text-accent-foreground/90", + ghost: "pressed:bg-accent/80 text-accent-foreground hover:bg-hover-background hover:text-accent-foreground/90", link: "pressed:text-primary/80 text-primary underline-offset-4 hover:underline" }, size: { diff --git a/application/shared-webapp/ui/components/Dropdown.tsx b/application/shared-webapp/ui/components/Dropdown.tsx index 67249620c..b89fa3b51 100644 --- a/application/shared-webapp/ui/components/Dropdown.tsx +++ b/application/shared-webapp/ui/components/Dropdown.tsx @@ -22,6 +22,9 @@ export const dropdownItemStyles = tv({ }, isFocused: { true: "bg-hover-background text-accent-foreground forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]" + }, + isSelected: { + true: "bg-active-background hover:bg-selected-hover-background" } }, compoundVariants: [ diff --git a/application/shared-webapp/ui/components/ListBox.tsx b/application/shared-webapp/ui/components/ListBox.tsx index 40e7260b0..03602ed96 100644 --- a/application/shared-webapp/ui/components/ListBox.tsx +++ b/application/shared-webapp/ui/components/ListBox.tsx @@ -31,7 +31,7 @@ export const itemStyles = tv({ variants: { isSelected: { false: "bg-background pressed:bg-active-background hover:bg-hover-background", - true: "bg-active-background pressed:bg-active-background hover:bg-hover-background forced-colors:bg-[Highlight] forced-colors:text-[HighlightText] forced-colors:outline-[HighlightText]" + true: "bg-active-background pressed:bg-active-background hover:bg-selected-hover-background forced-colors:bg-[Highlight] forced-colors:text-[HighlightText] forced-colors:outline-[HighlightText]" }, isDisabled: { true: "text-muted-foreground/50 forced-colors:text-[GrayText]" diff --git a/application/shared-webapp/ui/components/SearchField.tsx b/application/shared-webapp/ui/components/SearchField.tsx index 7ab272937..7224c1d0a 100644 --- a/application/shared-webapp/ui/components/SearchField.tsx +++ b/application/shared-webapp/ui/components/SearchField.tsx @@ -32,7 +32,7 @@ export function SearchField({ label, description, errorMessage, placeholder, ... td:first-child]:pl-4 [&>td:last-child]:pr-4", variants: { isDisabled: { - false: "text-muted-foreground hover:bg-muted/80", + false: "text-muted-foreground hover:bg-hover-background", true: "text-muted-foreground/90" }, isSelected: { - true: "bg-muted" + true: "bg-active-background hover:bg-selected-hover-background" } } }); @@ -161,7 +161,7 @@ export function Row({ id, columns, children, ...rowProps }: Re const cellStyles = tv({ extend: focusRing, - base: "-outline-offset-2 truncate border-b border-b-border p-2 group-first/row:border-y group-first/row:border-t-border group-last/row:border-b-0 group-selected/row:border-ring [:has(+[data-selected])_&]:border-ring" + base: "-outline-offset-2 truncate border-b border-b-border p-2 group-first/row:border-y group-first/row:border-t-border group-last/row:border-b-0 group-selected/row:border-accent [:has(+[data-selected])_&]:border-accent" }); type CellProps = { diff --git a/application/shared-webapp/ui/tailwind-preset.ts b/application/shared-webapp/ui/tailwind-preset.ts index a23dd02c9..8967173b5 100644 --- a/application/shared-webapp/ui/tailwind-preset.ts +++ b/application/shared-webapp/ui/tailwind-preset.ts @@ -77,6 +77,7 @@ export default { sidebar: "hsl(var(--sidebar))", "hover-background": "hsl(var(--hover-background))", "active-background": "hsl(var(--active-background))", + "selected-hover-background": "hsl(var(--selected-hover-background))", "input-background": "hsl(var(--input-background))" }, borderRadius: { diff --git a/application/shared-webapp/ui/tailwind.css b/application/shared-webapp/ui/tailwind.css index 28e6f48fa..7211233bf 100644 --- a/application/shared-webapp/ui/tailwind.css +++ b/application/shared-webapp/ui/tailwind.css @@ -27,7 +27,7 @@ --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; - --accent: 210 40% 90%; + --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 100% 50%; --destructive-foreground: 210 40% 98%; @@ -54,10 +54,6 @@ --ring: 215 20.2% 65.1%; --panel-opacity: 0.5; --radius: 0.5rem; - --input-background: 0 0% 100%; /* Same as background for light mode */ - --hover-background: 210 40% 96.1%; /* Light gray for hover states */ - --active-background: 210 40% 94%; /* Slightly darker for active/selected states */ - --selected-hover-background: 210 40% 92%; /* Even darker for selected hover states */ --accordion-content-height: 36px; } @@ -81,22 +77,21 @@ --accent-foreground: 210 40% 98%; --destructive: 0 80% 58%; /* More vibrant red for destructive actions */ --destructive-foreground: 210 40% 98%; - --ring: 217 19% 27%; /* Same as border */ - --sidebar: 222 29% 12%; /* #161B26 - Same as background */ - --hover-background: 218 35% 15%; /* #1F242F - For hover states, updated to match design */ - --active-background: 222 22% 20%; /* #262E41 - For active/selected states, even lighter */ - --input-background: 222 45% 8%; /* #0C111D - Darker background for input fields */ + --ring: 0 0% 100%; + --sidebar: 222 29% 12%; /* Same as background */ + --hover-background: 219 31% 15%; + --active-background: 222 45% 8%; /* Same as input-background */ + --selected-hover-background: 219 31% 15%; /* Same as hover-background */ + --input-background: 222 45% 8%; - --danger: 0 84% 60%; + --danger: 2 66% 51%; --danger-foreground: 0 0% 100%; - --success: 142 76% 36%; + --success: 143 64% 24%; --success-foreground: 0 0% 100%; --warning: 38 92% 50%; --warning-foreground: 0 0% 100%; --info: 217 91% 60%; --info-foreground: 0 0% 100%; - - --ring: 216 34% 17%; --panel-opacity: 0.5; --radius: 0.5rem; } From 6a76b44591d030f74b075b247ffe392b136cb410 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Thu, 22 May 2025 11:10:03 +0200 Subject: [PATCH 004/171] Fix bug preventing dark mode activation when OS is in light mode --- application/shared-webapp/ui/tailwind-preset.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/application/shared-webapp/ui/tailwind-preset.ts b/application/shared-webapp/ui/tailwind-preset.ts index 8967173b5..3129c36d9 100644 --- a/application/shared-webapp/ui/tailwind-preset.ts +++ b/application/shared-webapp/ui/tailwind-preset.ts @@ -9,6 +9,7 @@ export default { path.join(path.dirname(require.resolve("@repo/ui")), "components", "*.js"), path.join(path.dirname(require.resolve("@repo/ui")), "components", "**/*.js") ], + safelist: [".dark", ".light"], darkMode: ["class"], theme: { container: { From 6a9fb6e0c1fda16d0e9b9b4cb9cb66d27905c191 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Thu, 22 May 2025 11:17:04 +0200 Subject: [PATCH 005/171] Change name of local storage variable for "preferred-theme" to kebab-case to align with conventions --- application/shared-webapp/ui/theme/mode/useStorageThemeMode.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/application/shared-webapp/ui/theme/mode/useStorageThemeMode.ts b/application/shared-webapp/ui/theme/mode/useStorageThemeMode.ts index c5fff3345..2f623f33c 100644 --- a/application/shared-webapp/ui/theme/mode/useStorageThemeMode.ts +++ b/application/shared-webapp/ui/theme/mode/useStorageThemeMode.ts @@ -1,7 +1,7 @@ import { useCallback, useEffect, useState } from "react"; import { type ThemeMode, sanitizeThemeMode } from "./utils"; -const STORAGE_KEY = "themeMode"; +const STORAGE_KEY = "preferred-theme"; export function getStorageThemeMode(): ThemeMode { return sanitizeThemeMode(localStorage.getItem(STORAGE_KEY)); From b4642e7b665ae1405d56f9558289f410bb6097f6 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Thu, 22 May 2025 11:46:10 +0200 Subject: [PATCH 006/171] Introduce 3-state theme button switching between system, dark, and light theme --- .../ui/theme/ThemeModeSelector.tsx | 16 ++++++---------- .../shared-webapp/ui/theme/mode/ThemeMode.tsx | 17 +++++++++++------ 2 files changed, 17 insertions(+), 16 deletions(-) diff --git a/application/shared-webapp/ui/theme/ThemeModeSelector.tsx b/application/shared-webapp/ui/theme/ThemeModeSelector.tsx index f5120999e..f57e16ab4 100644 --- a/application/shared-webapp/ui/theme/ThemeModeSelector.tsx +++ b/application/shared-webapp/ui/theme/ThemeModeSelector.tsx @@ -3,10 +3,11 @@ import { MoonIcon, MoonStarIcon, SunIcon, SunMoonIcon } from "lucide-react"; import { toggleThemeMode, useThemeMode } from "./mode/ThemeMode"; /** - * A button that toggles the theme mode between light and dark. + * A button that toggles the theme mode between system, light and dark. */ export function ThemeModeSelector({ "aria-label": ariaLabel }: { "aria-label": string }) { const { setThemeMode } = useThemeMode(); + return ( + + + {tooltipText} + ); } -function ThemeModeIcon() { - const { themeMode, resolvedThemeMode } = useThemeMode(); +function getTooltipText(themeMode: ThemeMode, resolvedThemeMode: SystemThemeMode): string { + if (resolvedThemeMode === SystemThemeMode.Dark) { + return themeMode === ThemeMode.System ? "System mode (dark)" : "Dark mode"; + } + return themeMode === ThemeMode.System ? "System mode (light)" : "Light mode"; +} - if (resolvedThemeMode === "dark") { - return themeMode === "system" ? : ; +function ThemeModeIcon({ themeMode, resolvedThemeMode }: { themeMode: ThemeMode; resolvedThemeMode: SystemThemeMode }) { + if (resolvedThemeMode === SystemThemeMode.Dark) { + return themeMode === ThemeMode.System ? : ; } - return themeMode === "system" ? : ; + return themeMode === ThemeMode.System ? : ; } diff --git a/application/shared-webapp/ui/theme/mode/ThemeMode.tsx b/application/shared-webapp/ui/theme/mode/ThemeMode.tsx index 41cfd821e..2c8dd18a2 100644 --- a/application/shared-webapp/ui/theme/mode/ThemeMode.tsx +++ b/application/shared-webapp/ui/theme/mode/ThemeMode.tsx @@ -2,7 +2,7 @@ import type React from "react"; import { createContext, useContext, useEffect, useMemo } from "react"; import { getStorageThemeMode, useStorageThemeMode } from "./useStorageThemeMode"; import { getSystemThemeMode, useSystemThemeMode } from "./useSystemThemeMode"; -import { type SystemThemeMode, type ThemeMode, resolveThemeMode, setClassNameThemeMode } from "./utils"; +import { SystemThemeMode, ThemeMode, resolveThemeMode, setClassNameThemeMode } from "./utils"; type ThemeModeSetter = (mode: ThemeMode) => ThemeMode; @@ -13,15 +13,26 @@ export type ThemeModeContextType = { }; export const ThemeModeContext = createContext({ - themeMode: "system", - resolvedThemeMode: "light", + themeMode: ThemeMode.System, + resolvedThemeMode: SystemThemeMode.Light, setThemeMode: () => {} }); -const getInitialThemeMode = () => resolveThemeMode(getStorageThemeMode(), getSystemThemeMode()); +// Helper to convert SystemThemeMode to ThemeMode +const systemToThemeMode = (mode: SystemThemeMode): ThemeMode => { + return mode === SystemThemeMode.Dark ? ThemeMode.Dark : ThemeMode.Light; +}; + +// Get initial theme mode +const initialStorageMode = getStorageThemeMode(); +const initialSystemMode = getSystemThemeMode(); +const resolvedSystemMode = resolveThemeMode(initialStorageMode, systemToThemeMode(initialSystemMode)); + +// Convert SystemThemeMode to ThemeMode for setClassNameThemeMode +const resolvedInitialMode = resolvedSystemMode === SystemThemeMode.Dark ? ThemeMode.Dark : ThemeMode.Light; // Set the initial theme mode on the document element as soon as possible -setClassNameThemeMode(getInitialThemeMode()); +setClassNameThemeMode(resolvedInitialMode); type ThemeModeProviderProps = { children: React.ReactNode; @@ -32,11 +43,15 @@ export function ThemeModeProvider({ children }: Readonly const [storageThemeMode, setStorageThemeMode] = useStorageThemeMode(); const resolvedThemeMode = useMemo( - () => resolveThemeMode(storageThemeMode, systemThemeMode), + () => resolveThemeMode(storageThemeMode, systemToThemeMode(systemThemeMode)), [storageThemeMode, systemThemeMode] ); - useEffect(() => setClassNameThemeMode(resolvedThemeMode), [resolvedThemeMode]); + // Convert SystemThemeMode to ThemeMode for setClassNameThemeMode + useEffect(() => { + const themeMode = resolvedThemeMode === SystemThemeMode.Dark ? ThemeMode.Dark : ThemeMode.Light; + setClassNameThemeMode(themeMode); + }, [resolvedThemeMode]); const value = useMemo( () => ({ @@ -62,15 +77,18 @@ export function toggleThemeMode(mode: ThemeMode): ThemeMode { const systemMode = getSystemThemeMode(); // First click should go to opposite of system - if (mode === "system") { - return systemMode === "dark" ? "light" : "dark"; + if (mode === ThemeMode.System) { + return systemMode === SystemThemeMode.Dark ? ThemeMode.Light : ThemeMode.Dark; } // Second click should force the same mode as system - if (mode !== systemMode) { - return mode === "dark" ? "light" : "dark"; + if ( + (mode === ThemeMode.Light && systemMode === SystemThemeMode.Dark) || + (mode === ThemeMode.Dark && systemMode === SystemThemeMode.Light) + ) { + return mode === ThemeMode.Dark ? ThemeMode.Light : ThemeMode.Dark; } // Third click should go back to system - return "system"; + return ThemeMode.System; } diff --git a/application/shared-webapp/ui/theme/mode/useSystemThemeMode.ts b/application/shared-webapp/ui/theme/mode/useSystemThemeMode.ts index 9c0a896b8..d4dc5d115 100644 --- a/application/shared-webapp/ui/theme/mode/useSystemThemeMode.ts +++ b/application/shared-webapp/ui/theme/mode/useSystemThemeMode.ts @@ -1,10 +1,10 @@ import { useEffect, useState } from "react"; -import type { SystemThemeMode } from "./utils"; +import { SystemThemeMode } from "./utils"; const mq = window.matchMedia("(prefers-color-scheme: dark)"); export function getSystemThemeMode(): SystemThemeMode { - return mq.matches ? "dark" : "light"; + return mq.matches ? SystemThemeMode.Dark : SystemThemeMode.Light; } /** diff --git a/application/shared-webapp/ui/theme/mode/utils.ts b/application/shared-webapp/ui/theme/mode/utils.ts index 62b42e77c..6f7d9a710 100644 --- a/application/shared-webapp/ui/theme/mode/utils.ts +++ b/application/shared-webapp/ui/theme/mode/utils.ts @@ -1,23 +1,34 @@ -export type SystemThemeMode = "light" | "dark"; -export type ThemeMode = SystemThemeMode | "system"; +export enum SystemThemeMode { + Light = "light", + Dark = "dark" +} + +export enum ThemeMode { + System = "system", + Light = "light", + Dark = "dark" +} export function sanitizeThemeMode(themeMode: string | null): ThemeMode { - return themeMode === "light" || themeMode === "dark" ? themeMode : "system"; + return themeMode === ThemeMode.Light || themeMode === ThemeMode.Dark ? (themeMode as ThemeMode) : ThemeMode.System; } -export function resolveThemeMode(...modes: ThemeMode[]): SystemThemeMode { +export function resolveThemeMode(...modes: (ThemeMode | SystemThemeMode)[]): SystemThemeMode { for (const mode of modes) { - if (mode === "light" || mode === "dark") { - return mode; + if (mode === ThemeMode.Light) { + return SystemThemeMode.Light; + } + if (mode === ThemeMode.Dark) { + return SystemThemeMode.Dark; } } - return "light"; + return SystemThemeMode.Light; } export const setClassNameThemeMode = (mode: ThemeMode) => { - document.documentElement.classList.remove("light", "dark"); - if (mode === "dark" || mode === "light") { + document.documentElement.classList.remove(SystemThemeMode.Light, SystemThemeMode.Dark); + if (mode === ThemeMode.Dark || mode === ThemeMode.Light) { document.documentElement.classList.add(mode); document.documentElement.style.colorScheme = mode; } else { @@ -25,12 +36,12 @@ export const setClassNameThemeMode = (mode: ThemeMode) => { } }; -export function getClassNameThemeMode() { - if (document.documentElement.classList.contains("light")) { - return "light"; +export function getClassNameThemeMode(): ThemeMode { + if (document.documentElement.classList.contains(SystemThemeMode.Light)) { + return ThemeMode.Light; } - if (document.documentElement.classList.contains("dark")) { - return "dark"; + if (document.documentElement.classList.contains(SystemThemeMode.Dark)) { + return ThemeMode.Dark; } - return "system"; + return ThemeMode.System; } From 3df28183e0bdf92caf00daae35de1105c3d0eda2 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Thu, 19 Jun 2025 10:59:43 +0200 Subject: [PATCH 008/171] Adjust styling of colors in dark mode for delete and toasts messages --- application/shared-webapp/ui/tailwind.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/application/shared-webapp/ui/tailwind.css b/application/shared-webapp/ui/tailwind.css index 7211233bf..9a95fba3f 100644 --- a/application/shared-webapp/ui/tailwind.css +++ b/application/shared-webapp/ui/tailwind.css @@ -29,10 +29,10 @@ --secondary-foreground: 222.2 47.4% 11.2%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; - --destructive: 0 100% 50%; + --destructive: 2 66% 51%; --destructive-foreground: 210 40% 98%; - --danger: 0 70% 35%; + --danger: 2 66% 51%; --danger-foreground: 210 40% 98%; --warning: 38 92% 50%; --warning-foreground: 210 40% 98%; @@ -73,9 +73,9 @@ --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217 19% 27%; /* #303644 - Secondary background elements */ --secondary-foreground: 210 40% 98%; - --accent: 219 15% 34%; /* #404759 - Accent background elements */ + --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; - --destructive: 0 80% 58%; /* More vibrant red for destructive actions */ + --destructive: 2 66% 51%; --destructive-foreground: 210 40% 98%; --ring: 0 0% 100%; --sidebar: 222 29% 12%; /* Same as background */ From 5b6f6c3c24bc46ce04536e43763432023fad3e1a Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Thu, 19 Jun 2025 23:30:17 +0200 Subject: [PATCH 009/171] Remove transition form badges on home page dashboard --- .../WebApp/routes/admin/index.tsx | 6 +++--- application/shared-webapp/ui/tailwind.css | 15 +++++++++++++++ 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/application/account-management/WebApp/routes/admin/index.tsx b/application/account-management/WebApp/routes/admin/index.tsx index 04d1dbbca..71d5e746c 100644 --- a/application/account-management/WebApp/routes/admin/index.tsx +++ b/application/account-management/WebApp/routes/admin/index.tsx @@ -31,7 +31,7 @@ export default function Home() {
@@ -51,7 +51,7 @@ export default function Home() { startDate: getDateDaysAgo(30), endDate: getTodayIsoDate() }} - className="mx-6 w-1/3 rounded-xl bg-input-background p-6 transition-all hover:bg-hover-background" + className="mx-6 w-1/3 rounded-xl bg-muted/50 p-6 hover:bg-hover-background focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring" aria-label={t`View active users`} >
@@ -67,7 +67,7 @@ export default function Home() {
diff --git a/application/shared-webapp/ui/tailwind.css b/application/shared-webapp/ui/tailwind.css index 9a95fba3f..0105dfdc6 100644 --- a/application/shared-webapp/ui/tailwind.css +++ b/application/shared-webapp/ui/tailwind.css @@ -52,6 +52,21 @@ --chart-9: 211 100% 19%; --ring: 215 20.2% 65.1%; + --sidebar: 210 14% 98%; /* Same as background */ + --hover-background: 207 35% 94%; + --active-background: 0 0% 100%; /* Same as input-background */ + --selected-hover-background: 207 35% 94%; /* Same as hover-background */ + --input-background: 0 0% 100%; + + --danger: 2 66% 51%; + --danger-foreground: 210 40% 98%; + --success: 143 64% 24%; + --success-foreground: 210 40% 98%; + --warning: 38 92% 50%; + --warning-foreground: 210 40% 98%; + --info: 226 71% 40%; + --info-foreground: 210 40% 98%; + --panel-opacity: 0.5; --radius: 0.5rem; From c061ce6d5ce9d183cf287410f53ad05a5cbe3864 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Tue, 24 Jun 2025 09:27:08 +0200 Subject: [PATCH 010/171] Fix colors on landing page --- .../WebApp/routes/(index)/-components/CtaSection.tsx | 2 +- .../WebApp/routes/(index)/-components/CtaSection3.tsx | 4 ++-- .../WebApp/routes/(index)/-components/FeatureSection3.tsx | 2 +- .../WebApp/routes/(index)/-components/FeatureSection4.tsx | 2 +- .../WebApp/routes/(index)/-components/FooterSection.tsx | 2 +- .../WebApp/routes/(index)/-components/HeroSection.tsx | 2 +- .../WebApp/routes/(index)/-components/TechnologySection2.tsx | 2 +- .../WebApp/shared/layouts/HorizontalHeroLayout.tsx | 4 ++-- 8 files changed, 10 insertions(+), 10 deletions(-) diff --git a/application/account-management/WebApp/routes/(index)/-components/CtaSection.tsx b/application/account-management/WebApp/routes/(index)/-components/CtaSection.tsx index 33b0d1b72..4bcbadb36 100644 --- a/application/account-management/WebApp/routes/(index)/-components/CtaSection.tsx +++ b/application/account-management/WebApp/routes/(index)/-components/CtaSection.tsx @@ -3,7 +3,7 @@ import { Button } from "@repo/ui/components/Button"; // CtaSection: A functional component that displays a call to action export function CtaSection() { return ( -
+

A single solution for you to build on

diff --git a/application/account-management/WebApp/routes/(index)/-components/CtaSection3.tsx b/application/account-management/WebApp/routes/(index)/-components/CtaSection3.tsx index 5bb3a0192..2665f76b0 100644 --- a/application/account-management/WebApp/routes/(index)/-components/CtaSection3.tsx +++ b/application/account-management/WebApp/routes/(index)/-components/CtaSection3.tsx @@ -3,8 +3,8 @@ import { SignUpButton } from "@repo/infrastructure/auth/SignUpButton"; // CtaSection3: A functional component that displays a call to action export function CtaSection3() { return ( -

-
+
+

Start scaling your business today

diff --git a/application/account-management/WebApp/routes/(index)/-components/FeatureSection3.tsx b/application/account-management/WebApp/routes/(index)/-components/FeatureSection3.tsx index b2354c893..282af285b 100644 --- a/application/account-management/WebApp/routes/(index)/-components/FeatureSection3.tsx +++ b/application/account-management/WebApp/routes/(index)/-components/FeatureSection3.tsx @@ -5,7 +5,7 @@ import { createAccountUrl } from "./cdnImages"; // FeatureSection3: A functional component that displays the third feature section export function FeatureSection3() { return ( -

+
diff --git a/application/account-management/WebApp/routes/(index)/-components/FeatureSection4.tsx b/application/account-management/WebApp/routes/(index)/-components/FeatureSection4.tsx index 83802481a..f8f3cd765 100644 --- a/application/account-management/WebApp/routes/(index)/-components/FeatureSection4.tsx +++ b/application/account-management/WebApp/routes/(index)/-components/FeatureSection4.tsx @@ -1,7 +1,7 @@ // FeatureSection4: A functional component that displays a section with features export function FeatureSection4() { return ( -
+

FEATURES

Built by Founders, Engineers and Designers diff --git a/application/account-management/WebApp/routes/(index)/-components/FooterSection.tsx b/application/account-management/WebApp/routes/(index)/-components/FooterSection.tsx index a9a9d9d76..9540528a4 100644 --- a/application/account-management/WebApp/routes/(index)/-components/FooterSection.tsx +++ b/application/account-management/WebApp/routes/(index)/-components/FooterSection.tsx @@ -6,7 +6,7 @@ import { githubLogo, linkedinLogo, logoWrap, slackLogo, twitterLogo, youtubeLogo export function FooterSection() { return ( <> -
+
Join our newsletter
Technology that has your back.
diff --git a/application/account-management/WebApp/routes/(index)/-components/HeroSection.tsx b/application/account-management/WebApp/routes/(index)/-components/HeroSection.tsx index 72f35939f..57c5f6c64 100644 --- a/application/account-management/WebApp/routes/(index)/-components/HeroSection.tsx +++ b/application/account-management/WebApp/routes/(index)/-components/HeroSection.tsx @@ -16,7 +16,7 @@ import { heroDesktopUrl, heroMobileUrl, logoWrap } from "./cdnImages"; // HeroSection: A functional component that displays the hero section export function HeroSection() { return ( -
+
logo diff --git a/application/account-management/WebApp/routes/(index)/-components/TechnologySection2.tsx b/application/account-management/WebApp/routes/(index)/-components/TechnologySection2.tsx index e72f2e027..9d6a6291b 100644 --- a/application/account-management/WebApp/routes/(index)/-components/TechnologySection2.tsx +++ b/application/account-management/WebApp/routes/(index)/-components/TechnologySection2.tsx @@ -3,7 +3,7 @@ import { infrastructure } from "./cdnImages"; // TechnologySection2: A functional component that displays the technology section export function TechnologySection2() { return ( -
+
{/* Display the section title */} diff --git a/application/account-management/WebApp/shared/layouts/HorizontalHeroLayout.tsx b/application/account-management/WebApp/shared/layouts/HorizontalHeroLayout.tsx index c8d616f1f..d3797f4aa 100644 --- a/application/account-management/WebApp/shared/layouts/HorizontalHeroLayout.tsx +++ b/application/account-management/WebApp/shared/layouts/HorizontalHeroLayout.tsx @@ -21,8 +21,8 @@ export function HorizontalHeroLayout({ children }: Readonly
-
{children}
-
+
{children}
+
From b6ebfcf492d65fb1f0381c67b2b3201bb5543bb7 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Fri, 20 Jun 2025 12:18:18 +0200 Subject: [PATCH 011/171] Update styling for light mode to match Figma design --- application/shared-webapp/ui/tailwind.css | 53 +++++++---------------- 1 file changed, 16 insertions(+), 37 deletions(-) diff --git a/application/shared-webapp/ui/tailwind.css b/application/shared-webapp/ui/tailwind.css index 0105dfdc6..65247540e 100644 --- a/application/shared-webapp/ui/tailwind.css +++ b/application/shared-webapp/ui/tailwind.css @@ -13,44 +13,24 @@ @layer base { :root, .light { - --background: 0 0% 100%; - --foreground: 222.2 84% 4.9%; + --background: 210 14% 98%; + --foreground: 219 42% 11%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; - --popover: 0 0% 100%; - --popover-foreground: 222.2 84% 4.9%; + --popover: 210 14% 98%; /* Same as background */ + --popover-foreground: 219 42% 11%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; - --card: 0 0% 100%; - --card-foreground: 222.2 84% 4.9%; + --card: 210 14% 98%; /* Same as background */ + --card-foreground: 219 42% 11%; --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%; - --secondary: 210 40% 96.1%; - --secondary-foreground: 222.2 47.4% 11.2%; - --accent: 210 40% 96.1%; - --accent-foreground: 222.2 47.4% 11.2%; + --secondary: 220 17% 93%; + --secondary-foreground: 219 42% 11%; + --accent: 210 40% 90%; + --accent-foreground: 219 42% 11%; --destructive: 2 66% 51%; --destructive-foreground: 210 40% 98%; - - --danger: 2 66% 51%; - --danger-foreground: 210 40% 98%; - --warning: 38 92% 50%; - --warning-foreground: 210 40% 98%; - --success: 143 64% 24%; - --success-foreground: 210 40% 98%; - --info: 226 71% 40%; - --info-foreground: 210 40% 98%; - - --chart-1: 60 100% 50%; - --chart-2: 71 100% 48%; - --chart-3: 84 100% 45%; - --chart-4: 102 100% 42%; - --chart-5: 124 100% 37%; - --chart-6: 155 100% 30%; - --chart-7: 181 100% 25%; - --chart-8: 195 100% 22%; - --chart-9: 211 100% 19%; - --ring: 215 20.2% 65.1%; --sidebar: 210 14% 98%; /* Same as background */ --hover-background: 207 35% 94%; @@ -69,24 +49,22 @@ --panel-opacity: 0.5; --radius: 0.5rem; - - --accordion-content-height: 36px; } .dark { - --background: 222 29% 12%; /* #161B26 - Updated background color */ + --background: 222 29% 12%; --foreground: 210 40% 98%; - --muted: 223 15% 18%; /* #222530 - Slightly lighter than background for muted areas */ + --muted: 223 15% 18%; --muted-foreground: 217.9 10.6% 64.9%; --popover: 222 29% 12%; /* Same as background */ --popover-foreground: 210 40% 98%; - --border: 217 19% 27%; /* #303644 - Border color from Figma */ - --input: 217 19% 27%; /* #303644 - Same as border */ + --border: 217 19% 27%; + --input: 217 19% 27%; /* Same as border */ --card: 222 29% 12%; /* Same as background */ --card-foreground: 210 40% 98%; --primary: 210 40% 98%; --primary-foreground: 222.2 47.4% 11.2%; - --secondary: 217 19% 27%; /* #303644 - Secondary background elements */ + --secondary: 217 19% 27%; --secondary-foreground: 210 40% 98%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; @@ -107,6 +85,7 @@ --warning-foreground: 0 0% 100%; --info: 217 91% 60%; --info-foreground: 0 0% 100%; + --panel-opacity: 0.5; --radius: 0.5rem; } From 89dc70584c835381ed14340e05950f7e53a3b711 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Sun, 22 Jun 2025 17:45:00 +0200 Subject: [PATCH 012/171] Create Tailwind styles for H1 and subheadings --- .../WebApp/shared/components/AvatarButton.tsx | 31 ++++++++++++++++--- application/shared-webapp/ui/tailwind.css | 24 ++++++++++++++ 2 files changed, 50 insertions(+), 5 deletions(-) diff --git a/application/account-management/WebApp/shared/components/AvatarButton.tsx b/application/account-management/WebApp/shared/components/AvatarButton.tsx index 0c23fc196..c519670f6 100644 --- a/application/account-management/WebApp/shared/components/AvatarButton.tsx +++ b/application/account-management/WebApp/shared/components/AvatarButton.tsx @@ -7,20 +7,41 @@ import { createLoginUrlWithReturnPath } from "@repo/infrastructure/auth/util"; import { Avatar } from "@repo/ui/components/Avatar"; import { Button } from "@repo/ui/components/Button"; import { Menu, MenuHeader, MenuItem, MenuSeparator, MenuTrigger } from "@repo/ui/components/Menu"; +import { useQueryClient } from "@tanstack/react-query"; import { LogOutIcon, UserIcon } from "lucide-react"; import { useEffect, useState } from "react"; export default function AvatarButton({ "aria-label": ariaLabel }: Readonly<{ "aria-label": string }>) { const [isProfileModalOpen, setIsProfileModalOpen] = useState(false); + const [hasAutoOpenedModal, setHasAutoOpenedModal] = useState(false); const userInfo = useUserInfo(); + const queryClient = useQueryClient(); useEffect(() => { - if (userInfo?.isAuthenticated && (!userInfo.firstName || !userInfo.lastName)) { + // Only auto-open the modal once per session if user lacks firstName or lastName + if ( + userInfo?.isAuthenticated && + (!userInfo.firstName || !userInfo.lastName) && + !hasAutoOpenedModal && + !isProfileModalOpen + ) { setIsProfileModalOpen(true); + setHasAutoOpenedModal(true); } - }, [userInfo]); + }, [userInfo, hasAutoOpenedModal, isProfileModalOpen]); + + const handleProfileModalClose = (isOpen: boolean) => { + setIsProfileModalOpen(isOpen); + // No need to check userInfo state here - once modal is closed by user, don't auto-open again + }; const logoutMutation = api.useMutation("post", "/api/account-management/authentication/logout", { + onMutate: async () => { + // Cancel all ongoing queries and remove them from cache to prevent 401 errors + await queryClient.cancelQueries(); + queryClient.clear(); + setHasAutoOpenedModal(false); // Reset for clean state + }, onSuccess: () => { window.location.href = createLoginUrlWithReturnPath(loginPath); }, @@ -44,8 +65,8 @@ export default function AvatarButton({ "aria-label": ariaLabel }: Readonly<{ "ar
-

{userInfo.fullName}

-

{userInfo.title ?? userInfo.email}

+

{userInfo.fullName}

+

{userInfo.title || userInfo.email}

@@ -61,7 +82,7 @@ export default function AvatarButton({ "aria-label": ariaLabel }: Readonly<{ "ar - + ); } diff --git a/application/shared-webapp/ui/tailwind.css b/application/shared-webapp/ui/tailwind.css index 65247540e..047f8876d 100644 --- a/application/shared-webapp/ui/tailwind.css +++ b/application/shared-webapp/ui/tailwind.css @@ -124,6 +124,30 @@ scroll-behavior: smooth; touch-action: manipulation; } + h1 { + @apply mb-2 font-semibold text-3xl text-foreground; + } + h2 { + @apply mt-6 mb-1 font-semibold text-xl text-foreground; + } + h3 { + @apply mb-2 font-semibold text-lg text-foreground; + } + h4 { + @apply mb-0 font-semibold text-sm text-foreground; + } + /* Page description paragraph - applies to paragraphs immediately following h1 */ + h1 + p { + @apply mb-6 font-normal text-muted-foreground text-sm; + } + /* Subtitle styling for secondary text */ + .subtitle { + @apply font-normal text-muted-foreground text-sm; + } + /* General paragraph styling for content areas */ + p { + @apply text-sm text-foreground; + } } html, From 057c3b092bc45228cc2ecca74621ff3b7245e06b Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Fri, 27 Jun 2025 18:12:18 +0200 Subject: [PATCH 013/171] Hide cursor and highlight active OTP cell with border --- application/shared-webapp/ui/components/Digit.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/application/shared-webapp/ui/components/Digit.tsx b/application/shared-webapp/ui/components/Digit.tsx index b6f095e38..d7566fba5 100644 --- a/application/shared-webapp/ui/components/Digit.tsx +++ b/application/shared-webapp/ui/components/Digit.tsx @@ -5,7 +5,12 @@ import { focusRing } from "./focusRing"; const digitStyles = tv({ extend: focusRing, - base: "h-14 w-10 rounded-md border border-input bg-input-background text-center text-input-foreground" + base: "h-14 w-10 rounded-md border border-input bg-input-background text-center text-input-foreground caret-transparent", + variants: { + isFocused: { + true: "border-primary" + } + } }); export enum DigitPattern { @@ -70,7 +75,7 @@ export function Digit({ } }} autoComplete={autoComplete} - className={digitStyles({ className, isFocusVisible })} + className={digitStyles({ className, isFocused: isFocusVisible })} // biome-ignore lint/a11y/noAutofocus: The autofocus attribute is used to focus the first digit input autoFocus={autoFocus} disabled={disabled} From 5d5571f59707f19026425506873887dc01af5cdf Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Fri, 27 Jun 2025 21:50:18 +0200 Subject: [PATCH 014/171] Fix size of icon for theme toggle --- application/shared-webapp/ui/theme/ThemeModeSelector.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/application/shared-webapp/ui/theme/ThemeModeSelector.tsx b/application/shared-webapp/ui/theme/ThemeModeSelector.tsx index d78ccfbca..dc39eda1c 100644 --- a/application/shared-webapp/ui/theme/ThemeModeSelector.tsx +++ b/application/shared-webapp/ui/theme/ThemeModeSelector.tsx @@ -31,7 +31,7 @@ function getTooltipText(themeMode: ThemeMode, resolvedThemeMode: SystemThemeMode function ThemeModeIcon({ themeMode, resolvedThemeMode }: { themeMode: ThemeMode; resolvedThemeMode: SystemThemeMode }) { if (resolvedThemeMode === SystemThemeMode.Dark) { - return themeMode === ThemeMode.System ? : ; + return themeMode === ThemeMode.System ? : ; } - return themeMode === ThemeMode.System ? : ; + return themeMode === ThemeMode.System ? : ; } From d2e81debdf924c710e2c0e9ad5deb24284451d90 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Sat, 28 Jun 2025 19:11:39 +0200 Subject: [PATCH 015/171] Darken danger color slightly --- application/shared-webapp/ui/tailwind.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/application/shared-webapp/ui/tailwind.css b/application/shared-webapp/ui/tailwind.css index 047f8876d..219957e27 100644 --- a/application/shared-webapp/ui/tailwind.css +++ b/application/shared-webapp/ui/tailwind.css @@ -29,7 +29,7 @@ --secondary-foreground: 219 42% 11%; --accent: 210 40% 90%; --accent-foreground: 219 42% 11%; - --destructive: 2 66% 51%; + --destructive: 1 75% 55.6%; --destructive-foreground: 210 40% 98%; --ring: 215 20.2% 65.1%; --sidebar: 210 14% 98%; /* Same as background */ @@ -38,7 +38,7 @@ --selected-hover-background: 207 35% 94%; /* Same as hover-background */ --input-background: 0 0% 100%; - --danger: 2 66% 51%; + --danger: 1 75% 55.6%; --danger-foreground: 210 40% 98%; --success: 143 64% 24%; --success-foreground: 210 40% 98%; @@ -68,7 +68,7 @@ --secondary-foreground: 210 40% 98%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; - --destructive: 2 66% 51%; + --destructive: 1 75% 55.6%; --destructive-foreground: 210 40% 98%; --ring: 0 0% 100%; --sidebar: 222 29% 12%; /* Same as background */ @@ -77,7 +77,7 @@ --selected-hover-background: 219 31% 15%; /* Same as hover-background */ --input-background: 222 45% 8%; - --danger: 2 66% 51%; + --danger: 1 75% 55.6%; --danger-foreground: 0 0% 100%; --success: 143 64% 24%; --success-foreground: 0 0% 100%; From d592afc99dc9e0c19bc0e605137839100ebd00b6 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Sat, 28 Jun 2025 22:38:01 +0200 Subject: [PATCH 016/171] Make close icons white in light mode --- application/shared-webapp/ui/components/Toast.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/application/shared-webapp/ui/components/Toast.tsx b/application/shared-webapp/ui/components/Toast.tsx index 9543bb6c2..5bbd3f855 100644 --- a/application/shared-webapp/ui/components/Toast.tsx +++ b/application/shared-webapp/ui/components/Toast.tsx @@ -105,8 +105,8 @@ const toastStyle = tv({ const closeButtonStyle = tv({ extend: focusRing, base: [ - "absolute top-2 right-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity", - "hover:text-foreground group-hover:opacity-100" + "absolute top-2 right-2 rounded-md p-1 text-white/50 opacity-0 transition-opacity", + "hover:text-white group-hover:opacity-100" ] }); From 95a13ccb0efdcdae8b2ff9c46c63f66b3c74d492 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Sun, 29 Jun 2025 00:46:29 +0200 Subject: [PATCH 017/171] Add logic for mobile menu to display correct theme icon for system, dark, and light modes --- .../shared/components/SharedSideMenu.tsx | 227 +++++++++++++++++- .../shared/translations/locale/da-DK.po | 21 ++ .../shared/translations/locale/en-US.po | 21 ++ .../shared/translations/locale/nl-NL.po | 21 ++ 4 files changed, 288 insertions(+), 2 deletions(-) diff --git a/application/account-management/WebApp/shared/components/SharedSideMenu.tsx b/application/account-management/WebApp/shared/components/SharedSideMenu.tsx index b17b04d97..7a121b746 100644 --- a/application/account-management/WebApp/shared/components/SharedSideMenu.tsx +++ b/application/account-management/WebApp/shared/components/SharedSideMenu.tsx @@ -1,7 +1,32 @@ import { t } from "@lingui/core/macro"; import { Trans } from "@lingui/react/macro"; +import { useLingui } from "@lingui/react/macro"; +import { use, useContext, useState } from "react"; +import { api } from "../lib/api/client"; +import { loginPath } from "@repo/infrastructure/auth/constants"; +import { useUserInfo } from "@repo/infrastructure/auth/hooks"; +import { createLoginUrlWithReturnPath } from "@repo/infrastructure/auth/util"; +import { type Locale, translationContext } from "@repo/infrastructure/translations/TranslationContext"; +import { Avatar } from "@repo/ui/components/Avatar"; +import { Button } from "@repo/ui/components/Button"; +import { Menu, MenuItem, MenuTrigger } from "@repo/ui/components/Menu"; import { MenuButton, SideMenu, SideMenuSeparator } from "@repo/ui/components/SideMenu"; -import { CircleUserIcon, HomeIcon, UsersIcon } from "lucide-react"; +import { useThemeMode } from "@repo/ui/theme/mode/ThemeMode"; +import { SystemThemeMode, ThemeMode } from "@repo/ui/theme/mode/utils"; +import { useQueryClient } from "@tanstack/react-query"; +import { + CheckIcon, + CircleUserIcon, + GlobeIcon, + HomeIcon, + LogOutIcon, + MoonIcon, + MoonStarIcon, + SunIcon, + SunMoonIcon, + UserIcon, + UsersIcon +} from "lucide-react"; import type React from "react"; type SharedSideMenuProps = { @@ -10,6 +35,204 @@ type SharedSideMenuProps = { }; export function SharedSideMenu({ children, ariaLabel }: Readonly) { + const userInfo = useUserInfo(); + const { i18n } = useLingui(); + const { getLocaleInfo, locales, setLocale } = use(translationContext); + const [isProfileModalOpen, setIsProfileModalOpen] = useState(false); + const queryClient = useQueryClient(); + const { themeMode, resolvedThemeMode, setThemeMode } = useThemeMode(); + + // Note: overlayContext functionality not available in current codebase + + const currentLocale = i18n.locale as Locale; + const currentLocaleLabel = getLocaleInfo(currentLocale).label; + + const getThemeName = (mode: ThemeMode) => { + switch (mode) { + case ThemeMode.System: + return t`System`; + case ThemeMode.Light: + return t`Light`; + case ThemeMode.Dark: + return t`Dark`; + default: + return t`System`; + } + }; + + const getThemeIcon = (themeMode: ThemeMode, resolvedThemeMode: SystemThemeMode) => { + if (resolvedThemeMode === SystemThemeMode.Dark) { + return themeMode === ThemeMode.System ? ( + + ) : ( + + ); + } + return themeMode === ThemeMode.System ? ( + + ) : ( + + ); + }; + + const logoutMutation = api.useMutation("post", "/api/account-management/authentication/logout", { + onMutate: async () => { + await queryClient.cancelQueries(); + queryClient.clear(); + }, + onSuccess: () => { + window.location.href = createLoginUrlWithReturnPath(loginPath); + }, + meta: { + skipQueryInvalidation: true + } + }); + + const topMenuContent = ( +
+ {/* User Profile Section */} +
+ {/* User Profile */} + {userInfo && ( +
+ +
+
{userInfo.fullName}
+
{userInfo.title || userInfo.email}
+
+
+ +
+
+ )} + + {/* Logout */} +
+ +
+ + {/* Theme Section - button that cycles themes */} +
+ +
+ + {/* Language Section - styled like menu item */} +
+ + + { + const locale = key.toString() as Locale; + if (locale !== currentLocale) { + setLocale(locale); + } + }} + placement="bottom end" + > + {locales.map((locale) => ( + +
+ {getLocaleInfo(locale).label} + {locale === currentLocale && } +
+ + ))} + + +
+
+ + {/* Divider */} +
+ + {/* Navigation Section for Mobile */} +
+ + Navigation + + + + Organization + + + + {children} +
+ + {/* Spacer to push content up */} +
+
+ ); + return ( @@ -21,4 +244,4 @@ export function SharedSideMenu({ children, ariaLabel }: Readonly ); -} +} \ No newline at end of file diff --git a/application/account-management/WebApp/shared/translations/locale/da-DK.po b/application/account-management/WebApp/shared/translations/locale/da-DK.po index 70d809955..fc78e9066 100644 --- a/application/account-management/WebApp/shared/translations/locale/da-DK.po +++ b/application/account-management/WebApp/shared/translations/locale/da-DK.po @@ -94,6 +94,9 @@ msgstr "Oprettet" msgid "Danger zone" msgstr "Farezone" +msgid "Dark" +msgstr "" + msgid "Delete" msgstr "Slet" @@ -131,6 +134,9 @@ msgstr "F.eks., Softwareingeniør" msgid "E.g., Taylor" msgstr "F.eks. Taylor" +msgid "Edit" +msgstr "" + msgid "Edit profile" msgstr "Rediger profil" @@ -188,9 +194,15 @@ msgstr "Inviter brugere og tildel dem roller. De vil blive vist, når de logger msgid "Invited users" msgstr "Inviterede brugere" +msgid "Language" +msgstr "" + msgid "Last name" msgstr "Efternavn" +msgid "Light" +msgstr "" + msgid "Log in" msgstr "Log ind" @@ -224,6 +236,9 @@ msgstr "Ændret dato" msgid "Name" msgstr "Navn" +msgid "Navigation" +msgstr "" + msgid "Next" msgstr "Næste" @@ -309,6 +324,9 @@ msgstr "Tilmeld dig på få sekunder for at begynde at bygge på PlatformPlatfor msgid "Signup verification code" msgstr "Tilmeldingsbekræftelseskode" +msgid "System" +msgstr "" + msgid "Terms of use" msgstr "Brugsvilkår" @@ -318,6 +336,9 @@ msgstr "Bekræftelseskoden, du forsøger at bruge, er udløbet for e-mailbekræf msgid "The verification code you are trying to use has expired for Login ID: {loginId}" msgstr "Bekræftelseskoden, du forsøger at bruge, er udløbet for login-ID: {loginId}" +msgid "Theme" +msgstr "" + msgid "This is the region where your data is stored" msgstr "Dette er den region, hvor dine data er lagret" diff --git a/application/account-management/WebApp/shared/translations/locale/en-US.po b/application/account-management/WebApp/shared/translations/locale/en-US.po index 1b4e2c3f0..a2611f6a5 100644 --- a/application/account-management/WebApp/shared/translations/locale/en-US.po +++ b/application/account-management/WebApp/shared/translations/locale/en-US.po @@ -94,6 +94,9 @@ msgstr "Created" msgid "Danger zone" msgstr "Danger zone" +msgid "Dark" +msgstr "Dark" + msgid "Delete" msgstr "Delete" @@ -131,6 +134,9 @@ msgstr "E.g., Software engineer" msgid "E.g., Taylor" msgstr "E.g., Taylor" +msgid "Edit" +msgstr "Edit" + msgid "Edit profile" msgstr "Edit profile" @@ -188,9 +194,15 @@ msgstr "Invite users and assign them roles. They will appear once they log in." msgid "Invited users" msgstr "Invited users" +msgid "Language" +msgstr "Language" + msgid "Last name" msgstr "Last name" +msgid "Light" +msgstr "Light" + msgid "Log in" msgstr "Log in" @@ -224,6 +236,9 @@ msgstr "Modified date" msgid "Name" msgstr "Name" +msgid "Navigation" +msgstr "Navigation" + msgid "Next" msgstr "Next" @@ -309,6 +324,9 @@ msgstr "Sign up in seconds to start building on PlatformPlatform – just like t msgid "Signup verification code" msgstr "Signup verification code" +msgid "System" +msgstr "System" + msgid "Terms of use" msgstr "Terms of use" @@ -318,6 +336,9 @@ msgstr "The verification code you are trying to use has expired for Email Confir msgid "The verification code you are trying to use has expired for Login ID: {loginId}" msgstr "The verification code you are trying to use has expired for Login ID: {loginId}" +msgid "Theme" +msgstr "Theme" + msgid "This is the region where your data is stored" msgstr "This is the region where your data is stored" diff --git a/application/account-management/WebApp/shared/translations/locale/nl-NL.po b/application/account-management/WebApp/shared/translations/locale/nl-NL.po index c127aa714..6144bdaee 100644 --- a/application/account-management/WebApp/shared/translations/locale/nl-NL.po +++ b/application/account-management/WebApp/shared/translations/locale/nl-NL.po @@ -94,6 +94,9 @@ msgstr "Aangemaakt" msgid "Danger zone" msgstr "Gevaarzone" +msgid "Dark" +msgstr "" + msgid "Delete" msgstr "Verwijderen" @@ -131,6 +134,9 @@ msgstr "Bijv., Software engineer" msgid "E.g., Taylor" msgstr "Bijv., Taylor" +msgid "Edit" +msgstr "" + msgid "Edit profile" msgstr "Profiel bewerken" @@ -188,9 +194,15 @@ msgstr "Nodig gebruikers uit en wijs hen rollen toe. Ze verschijnen zodra ze inl msgid "Invited users" msgstr "Uitgenodigde gebruikers" +msgid "Language" +msgstr "" + msgid "Last name" msgstr "Achternaam" +msgid "Light" +msgstr "" + msgid "Log in" msgstr "Inloggen" @@ -224,6 +236,9 @@ msgstr "Gewijzigde datum" msgid "Name" msgstr "Naam" +msgid "Navigation" +msgstr "" + msgid "Next" msgstr "Volgende" @@ -309,6 +324,9 @@ msgstr "Meld je in enkele seconden aan om te beginnen met bouwen op PlatformPlat msgid "Signup verification code" msgstr "Verificatiecode voor aanmelding" +msgid "System" +msgstr "" + msgid "Terms of use" msgstr "Gebruiksvoorwaarden" @@ -318,6 +336,9 @@ msgstr "De verificatiecode die je probeert te gebruiken is verlopen voor E-mailb msgid "The verification code you are trying to use has expired for Login ID: {loginId}" msgstr "De verificatiecode die je probeert te gebruiken is verlopen voor Login ID: {loginId}" +msgid "Theme" +msgstr "" + msgid "This is the region where your data is stored" msgstr "Dit is de regio waar je gegevens zijn opgeslagen" From 55f8228fafada36d1b04cc72345f9863855bc8cf Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Sat, 14 Jun 2025 16:10:59 +0200 Subject: [PATCH 018/171] Format dialogs --- .../admin/users/-components/InviteUserDialog.tsx | 7 ++++++- .../WebApp/shared/components/SharedSideMenu.tsx | 10 +++++----- .../shared/components/userModals/UserProfileModal.tsx | 7 ++++++- 3 files changed, 17 insertions(+), 7 deletions(-) diff --git a/application/account-management/WebApp/routes/admin/users/-components/InviteUserDialog.tsx b/application/account-management/WebApp/routes/admin/users/-components/InviteUserDialog.tsx index 762a80e44..9d7425bba 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/InviteUserDialog.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/InviteUserDialog.tsx @@ -53,7 +53,12 @@ export default function InviteUserDialog({ isOpen, onOpenChange }: Readonly
- - {isCollapsed && {label}} + + + menuButtonStyles({ + ...renderProps, + className, + isCollapsed + }) + )} + onPress={onPress} + isDisabled={isDisabled} + > +
+ +
+
{label}
+ + {isCollapsed && ( + + {label} + + )} ); } const sideMenuStyles = tv({ - base: "relative hidden shrink-0 grow-0 flex-col items-start py-4 pr-2 transition-all duration-300 sm:flex", + base: "group fixed top-0 left-0 z-50 flex h-screen flex-col bg-background transition-all duration-200", variants: { isCollapsed: { - true: "w-[72px] gap-2 pl-2 ease-out", - false: "w-72 gap-4 pl-8 ease-in" + true: "w-[72px] ease-out", + false: "w-72 ease-in" + }, + overlayMode: { + true: "", + false: "" + }, + isOverlayOpen: { + true: "shadow-2xl", + false: "" + }, + isHidden: { + true: "hidden", + false: "flex" } } }); const chevronStyles = tv({ - base: "h-4 w-4 transition-all duration-300", + base: "h-4 w-4", variants: { isCollapsed: { true: "rotate-180 transform ease-out", @@ -100,78 +139,211 @@ const chevronStyles = tv({ } }); -const logoWrapStyles = tv({ - base: "self-start transition-all duration-300", - variants: { - isCollapsed: { - true: "h-8 opacity-0 ease-out", - false: "h-8 opacity-100 ease-in" - } - } -}); - -const logoMarkStyles = tv({ - base: "self-start transition-all duration-300", - variants: { - isCollapsed: { - true: "h-8 opacity-100 ease-in", - false: "h-8 opacity-0 ease-out" - } - } -}); - type SideMenuProps = { children: React.ReactNode; ariaLabel: string; }; export function SideMenu({ children, ariaLabel }: Readonly) { - const [isCollapsed, setIsCollapsed] = useLocalStorage( - !window.matchMedia("(min-width: 1024px)").matches, - "side-menu-collapsed" - ); + const { className, forceCollapsed, overlayMode, isHidden } = useResponsiveMenu(); + const sideMenuRef = useRef(null); + const [showControls, setShowControls] = useState(false); + const [isOverlayOpen, setIsOverlayOpen] = useState(false); + + // Initialize collapsed state with synchronous check to prevent flicker + const [isCollapsed, setIsCollapsed] = useState(() => { + if (typeof window === "undefined") { + return true; + } + + // Force collapsed on medium screens + if (forceCollapsed) { + return true; + } - const toggleCollapse = () => { - setIsCollapsed((v: boolean) => !v); + // Check localStorage for large screens + try { + return localStorage.getItem("side-menu-collapsed") === "true"; + } catch { + return false; + } + }); + + // Update collapsed state when screen size changes + useEffect(() => { + if (forceCollapsed) { + setIsCollapsed(true); + } + }, [forceCollapsed]); + + // The actual visual collapsed state + const actualIsCollapsed = overlayMode ? !isOverlayOpen : forceCollapsed || isCollapsed; + + const toggleMenu = () => { + if (overlayMode) { + setIsOverlayOpen(!isOverlayOpen); + // Dispatch event for layout hook + window.dispatchEvent( + new CustomEvent("side-menu-overlay-toggle", { + detail: { isExpanded: !isOverlayOpen } + }) + ); + } else if (!forceCollapsed) { + const newCollapsed = !isCollapsed; + setIsCollapsed(newCollapsed); + try { + localStorage.setItem("side-menu-collapsed", newCollapsed.toString()); + } catch {} + // Dispatch event for layout hook + window.dispatchEvent( + new CustomEvent("side-menu-toggle", { + detail: { isCollapsed: newCollapsed } + }) + ); + } }; + const closeOverlay = useCallback(() => { + if (overlayMode && isOverlayOpen) { + setIsOverlayOpen(false); + window.dispatchEvent( + new CustomEvent("side-menu-overlay-toggle", { + detail: { isExpanded: false } + }) + ); + } + }, [overlayMode, isOverlayOpen]); + + // Handle mouse enter/leave for controls visibility + const handleMouseEnter = () => { + setShowControls(true); + }; + + const handleMouseLeave = () => { + setShowControls(false); + }; + + // Handle click outside for overlay + useEffect(() => { + if (!overlayMode || !isOverlayOpen) { + return; + } + + const handleClickOutside = (event: MouseEvent) => { + if (sideMenuRef.current && !sideMenuRef.current.contains(event.target as Node)) { + closeOverlay(); + } + }; + + const handleEscape = (event: KeyboardEvent) => { + if (event.key === "Escape") { + closeOverlay(); + } + }; + + document.addEventListener("mousedown", handleClickOutside); + document.addEventListener("keydown", handleEscape); + + return () => { + document.removeEventListener("mousedown", handleClickOutside); + document.removeEventListener("keydown", handleEscape); + }; + }, [overlayMode, isOverlayOpen, closeOverlay]); + return ( <> - -
-
- -
- Logo Wrap + {/* Backdrop for overlay mode */} + {overlayMode && isOverlayOpen && ( +
e.key === "Enter" && closeOverlay()} + role="button" + tabIndex={0} + aria-label="Close menu" + /> + )} + + + +
+ {/* Vertical divider line */} +
+ + {/* Fixed header section with logo */} +
+ {/* Logo container - fixed position */} +
+ {actualIsCollapsed ? ( + Logo + ) : ( + Logo + )} +
+ + {/* Toggle button centered on divider, midway between logo and first menu item */} + + +
-
- Logo + + {/* Scrollable menu content */} +
+
{children}
- {children} -
+ + + {/* Mobile floating button */}
- - - -
- Logo Wrap -
- {children} - + +
+ +
+
+ Logo +
+
+
{children}
+
+
+ +
@@ -181,11 +353,11 @@ export function SideMenu({ children, ariaLabel }: Readonly) { } const sideMenuSeparatorStyles = tv({ - base: "border-b-0 font-semibold text-muted-foreground uppercase leading-4 transition-all duration-300", + base: "border-b-0 font-semibold text-muted-foreground uppercase leading-4", variants: { isCollapsed: { - true: "h-0 w-6 self-center border-border/100 border-b-4 pt-0 text-[0px] text-muted-foreground/0 ease-out", - false: "h-8 w-full border-border/0 pt-4 text-xs ease-in" + true: "-mt-2 mb-2 flex h-8 w-full justify-center", + false: "h-8 w-full border-border/0 pt-4 pl-4 text-xs ease-in" } } }); @@ -197,8 +369,8 @@ type SideMenuSeparatorProps = { export function SideMenuSeparator({ children }: Readonly) { const isCollapsed = useContext(collapsedContext); return ( -
-
{children}
+
+ {isCollapsed ?
: children}
); } diff --git a/application/shared-webapp/ui/hooks/useResponsiveMenu.ts b/application/shared-webapp/ui/hooks/useResponsiveMenu.ts new file mode 100644 index 000000000..824794cc1 --- /dev/null +++ b/application/shared-webapp/ui/hooks/useResponsiveMenu.ts @@ -0,0 +1,40 @@ +import { useEffect, useState } from "react"; +import { MEDIA_QUERIES } from "../utils/responsive"; + +/** + * Hook to determine responsive menu behavior based on screen size + * @returns Configuration object for responsive menu behavior + */ +export function useResponsiveMenu() { + const [isSmallScreen, setIsSmallScreen] = useState(false); + const [isLargeScreen, setIsLargeScreen] = useState(false); + + useEffect(() => { + // Check initial values + const smQuery = window.matchMedia(MEDIA_QUERIES.sm); + const xlQuery = window.matchMedia(MEDIA_QUERIES.xl); + + setIsSmallScreen(smQuery.matches); + setIsLargeScreen(xlQuery.matches); + + // Set up listeners + const handleSmChange = (e: MediaQueryListEvent) => setIsSmallScreen(e.matches); + const handleXlChange = (e: MediaQueryListEvent) => setIsLargeScreen(e.matches); + + smQuery.addEventListener("change", handleSmChange); + xlQuery.addEventListener("change", handleXlChange); + + return () => { + smQuery.removeEventListener("change", handleSmChange); + xlQuery.removeEventListener("change", handleXlChange); + }; + }, []); + + // Determine menu behavior based on screen size + const isHidden = !isSmallScreen; // < 640px: hidden + const forceCollapsed = isSmallScreen && !isLargeScreen; // 640px - 1279px: force collapsed + const overlayMode = isSmallScreen && !isLargeScreen; // 640px - 1279px: overlay mode + const className = isHidden ? "hidden" : "flex"; + + return { className, forceCollapsed, overlayMode, isHidden }; +} diff --git a/application/shared-webapp/ui/hooks/useSideMenuLayout.ts b/application/shared-webapp/ui/hooks/useSideMenuLayout.ts new file mode 100644 index 000000000..aa49fab32 --- /dev/null +++ b/application/shared-webapp/ui/hooks/useSideMenuLayout.ts @@ -0,0 +1,103 @@ +import type React from "react"; +import { useEffect, useMemo, useState } from "react"; +import { MEDIA_QUERIES, SIDE_MENU_COLLAPSED_WIDTH, SIDE_MENU_EXPANDED_WIDTH } from "../utils/responsive"; + +/** + * Hook to provide proper layout styles for content when using a fixed side menu. + * Listens to side menu toggle events and screen size changes to calculate + * the correct margin and width to prevent content from being hidden behind the menu. + */ +export function useSideMenuLayout(): { className: string; style: React.CSSProperties; isOverlayOpen: boolean } { + // Track screen sizes + const [isSmallScreen, setIsSmallScreen] = useState(() => + typeof window !== "undefined" ? window.matchMedia(MEDIA_QUERIES.sm).matches : false + ); + const [isLargeScreen, setIsLargeScreen] = useState(() => + typeof window !== "undefined" ? window.matchMedia(MEDIA_QUERIES.xl).matches : false + ); + + // Track menu state + const [isCollapsed, setIsCollapsed] = useState(() => { + // Synchronous check to prevent flicker + if (typeof window === "undefined") { + return true; + } + + const isSmallScreenSync = window.matchMedia(MEDIA_QUERIES.sm).matches; + const isLargeScreenSync = window.matchMedia(MEDIA_QUERIES.xl).matches; + + // Force collapsed on medium screens + if (isSmallScreenSync && !isLargeScreenSync) { + return true; + } + + // Check localStorage for large screens + const stored = localStorage.getItem("side-menu-collapsed"); + return stored === "true"; + }); + + const [isOverlayExpanded, setIsOverlayExpanded] = useState(false); + + // Listen for screen size changes + useEffect(() => { + const smQuery = window.matchMedia(MEDIA_QUERIES.sm); + const xlQuery = window.matchMedia(MEDIA_QUERIES.xl); + + const handleSmChange = (e: MediaQueryListEvent) => setIsSmallScreen(e.matches); + const handleXlChange = (e: MediaQueryListEvent) => setIsLargeScreen(e.matches); + + smQuery.addEventListener("change", handleSmChange); + xlQuery.addEventListener("change", handleXlChange); + + return () => { + smQuery.removeEventListener("change", handleSmChange); + xlQuery.removeEventListener("change", handleXlChange); + }; + }, []); + + // Listen for menu state changes via custom events + useEffect(() => { + const handleMenuToggle = (event: CustomEvent) => { + setIsCollapsed(event.detail.isCollapsed); + }; + + const handleOverlayToggle = (event: CustomEvent) => { + setIsOverlayExpanded(event.detail.isExpanded); + }; + + window.addEventListener("side-menu-toggle", handleMenuToggle as EventListener); + window.addEventListener("side-menu-overlay-toggle", handleOverlayToggle as EventListener); + + return () => { + window.removeEventListener("side-menu-toggle", handleMenuToggle as EventListener); + window.removeEventListener("side-menu-overlay-toggle", handleOverlayToggle as EventListener); + }; + }, []); + + // Calculate layout styles + const className = "flex flex-col flex-1 min-h-0"; + + const style = useMemo((): React.CSSProperties => { + // Mobile: full width + if (!isSmallScreen) { + return {}; + } + + // Medium screens (overlay mode): always use collapsed width + if (isSmallScreen && !isLargeScreen) { + return { + marginLeft: SIDE_MENU_COLLAPSED_WIDTH + }; + } + + // Large screens: adjust based on menu state + return { + marginLeft: isCollapsed ? SIDE_MENU_COLLAPSED_WIDTH : SIDE_MENU_EXPANDED_WIDTH + }; + }, [isSmallScreen, isLargeScreen, isCollapsed]); + + // Determine if in overlay mode + const isOverlayMode = isSmallScreen && !isLargeScreen; + + return { className, style, isOverlayOpen: isOverlayMode && isOverlayExpanded }; +} diff --git a/application/shared-webapp/ui/utils/responsive.ts b/application/shared-webapp/ui/utils/responsive.ts new file mode 100644 index 000000000..e59beb5b5 --- /dev/null +++ b/application/shared-webapp/ui/utils/responsive.ts @@ -0,0 +1,18 @@ +/** + * Centralized responsive breakpoint utilities + * Uses Tailwind's default breakpoint values + */ +export const BREAKPOINTS = { + sm: "sm", // 640px + xl: "xl" // 1280px +} as const; + +// Media query strings matching Tailwind breakpoints +export const MEDIA_QUERIES = { + sm: "(min-width: 640px)", + xl: "(min-width: 1280px)" +} as const; + +// Side menu width constants +export const SIDE_MENU_COLLAPSED_WIDTH = "72px"; +export const SIDE_MENU_EXPANDED_WIDTH = "288px"; // w-72 in Tailwind From 6b94f77a7e7a9acf569820ad506c0f500f58afca Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Wed, 18 Jun 2025 19:48:14 +0200 Subject: [PATCH 020/171] Fix a lot of issue with the overlay and new side menu --- .../admin/users/-components/UserTable.tsx | 2 +- .../shared-webapp/ui/components/AppLayout.tsx | 40 ++- .../shared-webapp/ui/components/SideMenu.tsx | 234 +++++++++++++----- .../ui/hooks/useSideMenuLayout.ts | 16 +- 4 files changed, 223 insertions(+), 69 deletions(-) diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx index e73fe87dd..f87e04aaf 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx @@ -122,7 +122,7 @@ export function UserTable({ selectedUsers, onSelectedUsersChange }: Readonly !isOpen && setUserToDelete(null)} /> -
+
) { - const { className, style, isOverlayOpen } = useSideMenuLayout(); + const { className, style, isOverlayOpen, isMobileMenuOpen } = useSideMenuLayout(); + + // Prevent body scroll when overlay is open + useEffect(() => { + if (isOverlayOpen) { + document.body.style.overflow = "hidden"; + } else { + document.body.style.overflow = ""; + } + + return () => { + document.body.style.overflow = ""; + }; + }, [isOverlayOpen]); return (
))} > - {/* Fixed TopMenu */} -
+ {/* Fixed TopMenu with blur effect */} +
{topMenu}
+ {/* Soft gradient fade below TopMenu */} +
- {/* Scrollable content area */} -
{children}
+ {/* Scrollable content area with bounce */} +
{children}
); } diff --git a/application/shared-webapp/ui/components/SideMenu.tsx b/application/shared-webapp/ui/components/SideMenu.tsx index d5825672d..460155241 100644 --- a/application/shared-webapp/ui/components/SideMenu.tsx +++ b/application/shared-webapp/ui/components/SideMenu.tsx @@ -1,6 +1,6 @@ import type { Href } from "@react-types/shared"; import { useRouter } from "@tanstack/react-router"; -import { ChevronsLeftIcon, type LucideIcon } from "lucide-react"; +import { ChevronsLeftIcon, type LucideIcon, X } from "lucide-react"; import type React from "react"; import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react"; import { ToggleButton, composeRenderProps } from "react-aria-components"; @@ -8,6 +8,7 @@ import { tv } from "tailwind-variants"; import { useResponsiveMenu } from "../hooks/useResponsiveMenu"; import logoMarkUrl from "../images/logo-mark.svg"; import logoWrapUrl from "../images/logo-wrap.svg"; +import { MEDIA_QUERIES } from "../utils/responsive"; import { Button } from "./Button"; import { Dialog, DialogTrigger } from "./Dialog"; import { Modal } from "./Modal"; @@ -19,7 +20,7 @@ const overlayContext = createContext<{ isOpen: boolean; close: () => void } | nu const menuButtonStyles = tv({ extend: focusRing, - base: "menu-item flex h-11 w-full justify-start gap-0 rounded-md py-2 pr-4 pl-4 font-normal text-base text-foreground hover:bg-accent/50 hover:text-foreground/80", + base: "menu-item flex h-11 w-full justify-start gap-0 rounded-md py-2 pr-4 pl-4 font-normal text-base text-foreground transition-all duration-100 hover:bg-accent/50 hover:text-foreground/80", variants: { isCollapsed: { true: "ease-out", @@ -29,11 +30,11 @@ const menuButtonStyles = tv({ }); const menuTextStyles = tv({ - base: "overflow-hidden whitespace-nowrap text-start text-foreground", + base: "overflow-hidden whitespace-nowrap text-start text-foreground transition-all duration-100", variants: { isCollapsed: { - true: "w-0 text-xs opacity-0 ease-out", - false: "flex-1 text-base opacity-100 ease-in" + true: "max-w-0 opacity-0 ease-out", + false: "max-w-[200px] opacity-100 ease-in" } } }); @@ -108,7 +109,7 @@ export function MenuButton({ } const sideMenuStyles = tv({ - base: "group fixed top-0 left-0 z-50 flex h-screen flex-col bg-background transition-all duration-200", + base: "group fixed top-0 left-0 z-50 flex h-screen flex-col bg-background", variants: { isCollapsed: { true: "w-[72px] ease-out", @@ -147,7 +148,6 @@ type SideMenuProps = { export function SideMenu({ children, ariaLabel }: Readonly) { const { className, forceCollapsed, overlayMode, isHidden } = useResponsiveMenu(); const sideMenuRef = useRef(null); - const [showControls, setShowControls] = useState(false); const [isOverlayOpen, setIsOverlayOpen] = useState(false); // Initialize collapsed state with synchronous check to prevent flicker @@ -169,12 +169,25 @@ export function SideMenu({ children, ariaLabel }: Readonly) { } }); + // Save the user's preference before being forced collapsed + const [userPreference, setUserPreference] = useState(() => { + try { + return localStorage.getItem("side-menu-collapsed") === "true"; + } catch { + return false; + } + }); + // Update collapsed state when screen size changes useEffect(() => { if (forceCollapsed) { + // Going to medium screen - force collapse but remember user preference setIsCollapsed(true); + } else { + // Going back to large screen - restore user preference + setIsCollapsed(userPreference); } - }, [forceCollapsed]); + }, [forceCollapsed, userPreference]); // The actual visual collapsed state const actualIsCollapsed = overlayMode ? !isOverlayOpen : forceCollapsed || isCollapsed; @@ -191,6 +204,7 @@ export function SideMenu({ children, ariaLabel }: Readonly) { } else if (!forceCollapsed) { const newCollapsed = !isCollapsed; setIsCollapsed(newCollapsed); + setUserPreference(newCollapsed); try { localStorage.setItem("side-menu-collapsed", newCollapsed.toString()); } catch {} @@ -214,15 +228,6 @@ export function SideMenu({ children, ariaLabel }: Readonly) { } }, [overlayMode, isOverlayOpen]); - // Handle mouse enter/leave for controls visibility - const handleMouseEnter = () => { - setShowControls(true); - }; - - const handleMouseLeave = () => { - setShowControls(false); - }; - // Handle click outside for overlay useEffect(() => { if (!overlayMode || !isOverlayOpen) { @@ -250,12 +255,58 @@ export function SideMenu({ children, ariaLabel }: Readonly) { }; }, [overlayMode, isOverlayOpen, closeOverlay]); + // Close mobile menu on resize + useEffect(() => { + const handleResize = () => { + const isNowMedium = window.matchMedia(MEDIA_QUERIES.sm).matches; + if (isNowMedium && isOverlayOpen) { + closeOverlay(); + } + }; + + window.addEventListener("resize", handleResize); + return () => window.removeEventListener("resize", handleResize); + }, [isOverlayOpen, closeOverlay]); + + // Focus trap for overlay + useEffect(() => { + if (!isOverlayOpen || !overlayMode) { + return; + } + + const handleKeyDown = (e: KeyboardEvent) => { + if (e.key === "Tab") { + const focusableElements = sideMenuRef.current?.querySelectorAll( + 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])' + ); + + if (!focusableElements || focusableElements.length === 0) { + return; + } + + const firstElement = focusableElements[0] as HTMLElement; + const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement; + + if (e.shiftKey && document.activeElement === firstElement) { + e.preventDefault(); + lastElement.focus(); + } else if (!e.shiftKey && document.activeElement === lastElement) { + e.preventDefault(); + firstElement.focus(); + } + } + }; + + document.addEventListener("keydown", handleKeyDown); + return () => document.removeEventListener("keydown", handleKeyDown); + }, [isOverlayOpen, overlayMode]); + return ( <> {/* Backdrop for overlay mode */} {overlayMode && isOverlayOpen && (
e.key === "Enter" && closeOverlay()} role="button" @@ -275,22 +326,14 @@ export function SideMenu({ children, ariaLabel }: Readonly) { isHidden: isHidden && !overlayMode, className })} - onMouseEnter={handleMouseEnter} - onMouseLeave={handleMouseLeave} > {/* Vertical divider line */} -
+
{/* Fixed header section with logo */} -
+
{/* Logo container - fixed position */} -
+
{actualIsCollapsed ? ( Logo ) : ( @@ -301,10 +344,8 @@ export function SideMenu({ children, ariaLabel }: Readonly) { {/* Toggle button centered on divider, midway between logo and first menu item */} ) {
{/* Scrollable menu content */} -
-
{children}
+
+
{children}
@@ -323,30 +364,7 @@ export function SideMenu({ children, ariaLabel }: Readonly) { {/* Mobile floating button */} -
- - - -
- -
-
- Logo -
-
-
{children}
-
-
- -
- - -
+ {children} ); @@ -378,3 +396,101 @@ export function SideMenuSeparator({ children }: Readonly export function SideMenuSpacer() { return
; } + +// Mobile Menu Component +function MobileMenu({ children, ariaLabel }: { children: React.ReactNode; ariaLabel: string }) { + const [isOpen, setIsOpen] = useState(false); + const dialogRef = useRef(null); + + // Close on resize + useEffect(() => { + if (!isOpen) { + return; + } + + const handleResize = () => { + const isNowMedium = window.matchMedia(MEDIA_QUERIES.sm).matches; + if (isNowMedium) { + setIsOpen(false); + } + }; + + window.addEventListener("resize", handleResize); + return () => window.removeEventListener("resize", handleResize); + }, [isOpen]); + + // Focus trap + useEffect(() => { + if (!isOpen) { + return; + } + + const handleKeyDown = (e: KeyboardEvent) => { + if (e.key === "Tab") { + const focusableElements = dialogRef.current?.querySelectorAll( + 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])' + ); + + if (!focusableElements || focusableElements.length === 0) { + return; + } + + const firstElement = focusableElements[0] as HTMLElement; + const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement; + + if (e.shiftKey && document.activeElement === firstElement) { + e.preventDefault(); + lastElement.focus(); + } else if (!e.shiftKey && document.activeElement === lastElement) { + e.preventDefault(); + firstElement.focus(); + } + } + }; + + document.addEventListener("keydown", handleKeyDown); + return () => document.removeEventListener("keydown", handleKeyDown); + }, [isOpen]); + + return ( +
+ + + { + setIsOpen(open); + // Dispatch event for layout hook + window.dispatchEvent( + new CustomEvent("mobile-menu-toggle", { + detail: { isOpen: open } + }) + ); + }} + blur={false} + > + +
+
+ Logo + +
+
+
{children}
+
+
+ + + +
+ ); +} diff --git a/application/shared-webapp/ui/hooks/useSideMenuLayout.ts b/application/shared-webapp/ui/hooks/useSideMenuLayout.ts index aa49fab32..b2dd3ea1e 100644 --- a/application/shared-webapp/ui/hooks/useSideMenuLayout.ts +++ b/application/shared-webapp/ui/hooks/useSideMenuLayout.ts @@ -7,7 +7,12 @@ import { MEDIA_QUERIES, SIDE_MENU_COLLAPSED_WIDTH, SIDE_MENU_EXPANDED_WIDTH } fr * Listens to side menu toggle events and screen size changes to calculate * the correct margin and width to prevent content from being hidden behind the menu. */ -export function useSideMenuLayout(): { className: string; style: React.CSSProperties; isOverlayOpen: boolean } { +export function useSideMenuLayout(): { + className: string; + style: React.CSSProperties; + isOverlayOpen: boolean; + isMobileMenuOpen: boolean; +} { // Track screen sizes const [isSmallScreen, setIsSmallScreen] = useState(() => typeof window !== "undefined" ? window.matchMedia(MEDIA_QUERIES.sm).matches : false @@ -37,6 +42,7 @@ export function useSideMenuLayout(): { className: string; style: React.CSSProper }); const [isOverlayExpanded, setIsOverlayExpanded] = useState(false); + const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); // Listen for screen size changes useEffect(() => { @@ -65,12 +71,18 @@ export function useSideMenuLayout(): { className: string; style: React.CSSProper setIsOverlayExpanded(event.detail.isExpanded); }; + const handleMobileMenuToggle = (event: CustomEvent) => { + setIsMobileMenuOpen(event.detail.isOpen); + }; + window.addEventListener("side-menu-toggle", handleMenuToggle as EventListener); window.addEventListener("side-menu-overlay-toggle", handleOverlayToggle as EventListener); + window.addEventListener("mobile-menu-toggle", handleMobileMenuToggle as EventListener); return () => { window.removeEventListener("side-menu-toggle", handleMenuToggle as EventListener); window.removeEventListener("side-menu-overlay-toggle", handleOverlayToggle as EventListener); + window.removeEventListener("mobile-menu-toggle", handleMobileMenuToggle as EventListener); }; }, []); @@ -99,5 +111,5 @@ export function useSideMenuLayout(): { className: string; style: React.CSSProper // Determine if in overlay mode const isOverlayMode = isSmallScreen && !isLargeScreen; - return { className, style, isOverlayOpen: isOverlayMode && isOverlayExpanded }; + return { className, style, isOverlayOpen: isOverlayMode && isOverlayExpanded, isMobileMenuOpen }; } From 3917212f695a0da7ad92a107ca3400fa484e9f1a Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Wed, 18 Jun 2025 21:25:06 +0200 Subject: [PATCH 021/171] Fix mobile menu --- application/shared-webapp/ui/components/Modal.tsx | 2 +- application/shared-webapp/ui/components/SideMenu.tsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/application/shared-webapp/ui/components/Modal.tsx b/application/shared-webapp/ui/components/Modal.tsx index fe252797c..ea6ebd541 100644 --- a/application/shared-webapp/ui/components/Modal.tsx +++ b/application/shared-webapp/ui/components/Modal.tsx @@ -6,7 +6,7 @@ import { Modal as AriaModal, ModalOverlay, type ModalOverlayProps } from "react- import { tv } from "tailwind-variants"; const overlayStyles = tv({ - base: "fixed top-0 left-0 isolate z-20 flex h-[--visual-viewport-height] w-full bg-black/[15%] text-center", + base: "fixed top-0 left-0 isolate z-[100] flex h-[--visual-viewport-height] w-full bg-black/[15%] text-center", variants: { isEntering: { true: "fade-in animate-in duration-200 ease-out" diff --git a/application/shared-webapp/ui/components/SideMenu.tsx b/application/shared-webapp/ui/components/SideMenu.tsx index 460155241..b5411444c 100644 --- a/application/shared-webapp/ui/components/SideMenu.tsx +++ b/application/shared-webapp/ui/components/SideMenu.tsx @@ -475,8 +475,9 @@ function MobileMenu({ children, ariaLabel }: { children: React.ReactNode; ariaLa ); }} blur={false} + fullSize={true} > - +
Logo From 12878f0773f2ddc2f3b170c3713b257b547f1517 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Fri, 20 Jun 2025 11:29:03 +0200 Subject: [PATCH 022/171] Change icon for local switcher and add tooltip to top menu --- .../WebApp/shared/components/topMenu/index.tsx | 15 +++++++++++---- .../WebApp/shared/translations/locale/da-DK.po | 6 ++++++ .../WebApp/shared/translations/locale/en-US.po | 6 ++++++ .../WebApp/shared/translations/locale/nl-NL.po | 6 ++++++ .../translations/LocaleSwitcher.tsx | 4 ++-- 5 files changed, 31 insertions(+), 6 deletions(-) diff --git a/application/account-management/WebApp/shared/components/topMenu/index.tsx b/application/account-management/WebApp/shared/components/topMenu/index.tsx index dfbb9df26..ad0ce1732 100644 --- a/application/account-management/WebApp/shared/components/topMenu/index.tsx +++ b/application/account-management/WebApp/shared/components/topMenu/index.tsx @@ -3,6 +3,7 @@ import { Trans } from "@lingui/react/macro"; import { LocaleSwitcher } from "@repo/infrastructure/translations/LocaleSwitcher"; import { Breadcrumb, Breadcrumbs } from "@repo/ui/components/Breadcrumbs"; import { Button } from "@repo/ui/components/Button"; +import { Tooltip, TooltipTrigger } from "@repo/ui/components/Tooltip"; import { ThemeModeSelector } from "@repo/ui/theme/ThemeModeSelector"; import { LifeBuoyIcon } from "lucide-react"; import type { ReactNode } from "react"; @@ -24,10 +25,16 @@ export function TopMenu({ children }: Readonly) {
- - + + + {t`Support`} + + + + {t`Change language`} +
diff --git a/application/account-management/WebApp/shared/translations/locale/da-DK.po b/application/account-management/WebApp/shared/translations/locale/da-DK.po index fc78e9066..d65a34b76 100644 --- a/application/account-management/WebApp/shared/translations/locale/da-DK.po +++ b/application/account-management/WebApp/shared/translations/locale/da-DK.po @@ -73,6 +73,9 @@ msgstr "Kan du ikke finde din kode? Tjek din spammappe." msgid "Cancel" msgstr "Annuller" +msgid "Change language" +msgstr "Skift sprog" + msgid "Change profile picture" msgstr "Skift profilbillede" @@ -324,6 +327,9 @@ msgstr "Tilmeld dig på få sekunder for at begynde at bygge på PlatformPlatfor msgid "Signup verification code" msgstr "Tilmeldingsbekræftelseskode" +msgid "Support" +msgstr "Support" + msgid "System" msgstr "" diff --git a/application/account-management/WebApp/shared/translations/locale/en-US.po b/application/account-management/WebApp/shared/translations/locale/en-US.po index a2611f6a5..5d5906d5f 100644 --- a/application/account-management/WebApp/shared/translations/locale/en-US.po +++ b/application/account-management/WebApp/shared/translations/locale/en-US.po @@ -73,6 +73,9 @@ msgstr "Can't find your code? Check your spam folder." msgid "Cancel" msgstr "Cancel" +msgid "Change language" +msgstr "Change language" + msgid "Change profile picture" msgstr "Change profile picture" @@ -324,6 +327,9 @@ msgstr "Sign up in seconds to start building on PlatformPlatform – just like t msgid "Signup verification code" msgstr "Signup verification code" +msgid "Support" +msgstr "Support" + msgid "System" msgstr "System" diff --git a/application/account-management/WebApp/shared/translations/locale/nl-NL.po b/application/account-management/WebApp/shared/translations/locale/nl-NL.po index 6144bdaee..317032439 100644 --- a/application/account-management/WebApp/shared/translations/locale/nl-NL.po +++ b/application/account-management/WebApp/shared/translations/locale/nl-NL.po @@ -73,6 +73,9 @@ msgstr "Kun je je code niet vinden? Controleer je spammap." msgid "Cancel" msgstr "Annuleren" +msgid "Change language" +msgstr "Taal wijzigen" + msgid "Change profile picture" msgstr "Profielfoto wijzigen" @@ -324,6 +327,9 @@ msgstr "Meld je in enkele seconden aan om te beginnen met bouwen op PlatformPlat msgid "Signup verification code" msgstr "Verificatiecode voor aanmelding" +msgid "Support" +msgstr "Ondersteuning" + msgid "System" msgstr "" diff --git a/application/shared-webapp/infrastructure/translations/LocaleSwitcher.tsx b/application/shared-webapp/infrastructure/translations/LocaleSwitcher.tsx index add273031..e13e354a7 100644 --- a/application/shared-webapp/infrastructure/translations/LocaleSwitcher.tsx +++ b/application/shared-webapp/infrastructure/translations/LocaleSwitcher.tsx @@ -4,7 +4,7 @@ import { AuthenticationContext } from "@repo/infrastructure/auth/AuthenticationP import { enhancedFetch } from "@repo/infrastructure/http/httpClient"; import { Button } from "@repo/ui/components/Button"; import { Menu, MenuItem, MenuTrigger } from "@repo/ui/components/Menu"; -import { CheckIcon, LanguagesIcon } from "lucide-react"; +import { CheckIcon, GlobeIcon } from "lucide-react"; import { use, useContext, useMemo } from "react"; import { type Locale, translationContext } from "./TranslationContext"; import { preferredLocaleKey } from "./constants"; @@ -48,7 +48,7 @@ export function LocaleSwitcher({ "aria-label": ariaLabel }: { "aria-label": stri return ( {items.map((item) => ( From f8986a31a2c6fbf835d27ac042f96d3e9dee8aca Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Fri, 20 Jun 2025 14:55:52 +0200 Subject: [PATCH 023/171] Make modal dialogs scrollable when content exceeds viewport height --- application/shared-webapp/ui/components/Dialog.tsx | 5 +---- application/shared-webapp/ui/components/Modal.tsx | 2 +- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/application/shared-webapp/ui/components/Dialog.tsx b/application/shared-webapp/ui/components/Dialog.tsx index 0c682d899..288f6163d 100644 --- a/application/shared-webapp/ui/components/Dialog.tsx +++ b/application/shared-webapp/ui/components/Dialog.tsx @@ -1,6 +1,3 @@ -/** - * ref: https://react-spectrum.adobe.com/react-aria-tailwind-starter/?path=/docs/alertdialog--docs - */ import { Dialog as AriaDialog, type DialogProps } from "react-aria-components"; import { twMerge } from "tailwind-merge"; @@ -11,7 +8,7 @@ export function Dialog(props: Readonly) { &]:p-4", + "relative max-h-full min-h-0 overflow-y-auto overscroll-contain p-11 outline outline-0 [[data-placement]>&]:p-4", props.className )} /> diff --git a/application/shared-webapp/ui/components/Modal.tsx b/application/shared-webapp/ui/components/Modal.tsx index ea6ebd541..61b0602de 100644 --- a/application/shared-webapp/ui/components/Modal.tsx +++ b/application/shared-webapp/ui/components/Modal.tsx @@ -38,7 +38,7 @@ const overlayStyles = tv({ }); const modalStyles = tv({ - base: "w-full rounded-lg border border-border bg-popover bg-clip-padding text-left align-middle text-foreground shadow-2xl sm:w-fit dark:backdrop-blur-2xl dark:backdrop-saturate-200 forced-colors:bg-[Canvas]", + base: "flex max-h-[calc(100vh-2rem)] w-full flex-col overflow-hidden rounded-lg border border-border bg-popover bg-clip-padding text-left align-middle text-foreground shadow-2xl sm:w-fit dark:backdrop-blur-2xl dark:backdrop-saturate-200 forced-colors:bg-[Canvas]", variants: { isEntering: { true: "zoom-in-105 animate-in duration-200 ease-out" From dbb305fc9d92e5fdb8e27b3c9888214f80d46c3c Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Fri, 20 Jun 2025 16:04:12 +0200 Subject: [PATCH 024/171] Add responsive ContentLayout with centered content that adapts to SideMenu state --- .../ui/components/ContentLayout.tsx | 98 +++++++++++++++++++ 1 file changed, 98 insertions(+) create mode 100644 application/shared-webapp/ui/components/ContentLayout.tsx diff --git a/application/shared-webapp/ui/components/ContentLayout.tsx b/application/shared-webapp/ui/components/ContentLayout.tsx new file mode 100644 index 000000000..caa91c8a6 --- /dev/null +++ b/application/shared-webapp/ui/components/ContentLayout.tsx @@ -0,0 +1,98 @@ +import type React from "react"; +import { useEffect, useState } from "react"; +import { cn } from "../cn"; +import { MEDIA_QUERIES } from "../utils/responsive"; + +type ContentLayoutVariant = "full" | "center"; + +type ContentLayoutProps = { + children: React.ReactNode; + variant?: ContentLayoutVariant; + maxWidth?: string; + className?: string; +}; + +/** + * ContentLayout provides consistent content width management for application pages. + * + * Variants: + * - full: Content takes full width with standard padding + * - center: Content is always centered with configurable max width (default: 640px). When SideMenu is expanded on large screens, content is shifted 50px left for better visual balance. + */ +export function ContentLayout({ + children, + variant = "full", + maxWidth = "640px", + className +}: Readonly) { + const [isLargeScreen, setIsLargeScreen] = useState(() => + typeof window !== "undefined" ? window.matchMedia(MEDIA_QUERIES.xl).matches : false + ); + const [isSideMenuCollapsed, setIsSideMenuCollapsed] = useState(() => { + if (typeof window === "undefined") { + return true; + } + // Check if we're on large screen + const isLarge = window.matchMedia(MEDIA_QUERIES.xl).matches; + if (!isLarge) { + return true; // Always collapsed on smaller screens + } + + const stored = localStorage.getItem("side-menu-collapsed"); + return stored === "true"; + }); + + // Listen for screen size changes + useEffect(() => { + const xlQuery = window.matchMedia(MEDIA_QUERIES.xl); + const handleXlChange = (e: MediaQueryListEvent) => setIsLargeScreen(e.matches); + + xlQuery.addEventListener("change", handleXlChange); + return () => xlQuery.removeEventListener("change", handleXlChange); + }, []); + + // Listen for side menu toggle events + useEffect(() => { + const handleMenuToggle = (event: CustomEvent) => { + if (isLargeScreen) { + setIsSideMenuCollapsed(event.detail.isCollapsed); + } + }; + + window.addEventListener("side-menu-toggle", handleMenuToggle as EventListener); + return () => window.removeEventListener("side-menu-toggle", handleMenuToggle as EventListener); + }, [isLargeScreen]); + + // Update side menu state when screen size changes + useEffect(() => { + if (!isLargeScreen) { + setIsSideMenuCollapsed(true); + } else { + const stored = localStorage.getItem("side-menu-collapsed"); + setIsSideMenuCollapsed(stored === "true"); + } + }, [isLargeScreen]); + + const baseClasses = "flex w-full flex-col gap-4 px-4 py-3"; + + if (variant === "center") { + // Shift left when on large screen and side menu is expanded (not collapsed) + const shouldShiftLeft = isLargeScreen && !isSideMenuCollapsed; + + return ( +
+
+ {children} +
+
+ ); + } + + return
{children}
; +} From 24520e3db39395bc665349d59b33921ee4170b78 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Sat, 21 Jun 2025 14:39:39 +0200 Subject: [PATCH 025/171] Show custom placeholder text in date range picker when no dates are selected --- .../admin/users/-components/UserQuerying.tsx | 1 + .../shared/translations/locale/da-DK.po | 3 + .../shared/translations/locale/en-US.po | 3 + .../shared/translations/locale/nl-NL.po | 3 + .../ui/components/DateRangePicker.tsx | 95 +++++++++++++++---- .../shared-webapp/ui/utils/responsive.ts | 10 +- 6 files changed, 96 insertions(+), 19 deletions(-) diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx index 3a534901d..59388d392 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx @@ -131,6 +131,7 @@ export function UserQuerying() { }); }} label={t`Modified date`} + placeholder={t`Select dates`} /> )} diff --git a/application/account-management/WebApp/shared/translations/locale/da-DK.po b/application/account-management/WebApp/shared/translations/locale/da-DK.po index d65a34b76..6706bb186 100644 --- a/application/account-management/WebApp/shared/translations/locale/da-DK.po +++ b/application/account-management/WebApp/shared/translations/locale/da-DK.po @@ -309,6 +309,9 @@ msgstr "Søg" msgid "Select a new role for <0>{0}" msgstr "Vælg en ny rolle for <0>{0}" +msgid "Select dates" +msgstr "Vælg datoer" + msgid "Select language" msgstr "Vælg sprog" diff --git a/application/account-management/WebApp/shared/translations/locale/en-US.po b/application/account-management/WebApp/shared/translations/locale/en-US.po index 5d5906d5f..4929bd74c 100644 --- a/application/account-management/WebApp/shared/translations/locale/en-US.po +++ b/application/account-management/WebApp/shared/translations/locale/en-US.po @@ -309,6 +309,9 @@ msgstr "Search" msgid "Select a new role for <0>{0}" msgstr "Select a new role for <0>{0}" +msgid "Select dates" +msgstr "Select dates" + msgid "Select language" msgstr "Select language" diff --git a/application/account-management/WebApp/shared/translations/locale/nl-NL.po b/application/account-management/WebApp/shared/translations/locale/nl-NL.po index 317032439..16c784dc2 100644 --- a/application/account-management/WebApp/shared/translations/locale/nl-NL.po +++ b/application/account-management/WebApp/shared/translations/locale/nl-NL.po @@ -309,6 +309,9 @@ msgstr "Zoeken" msgid "Select a new role for <0>{0}" msgstr "Selecteer een nieuwe rol voor <0>{0}" +msgid "Select dates" +msgstr "Selecteer datums" + msgid "Select language" msgstr "Selecteer taal" diff --git a/application/shared-webapp/ui/components/DateRangePicker.tsx b/application/shared-webapp/ui/components/DateRangePicker.tsx index 4be18c119..7987fc8f5 100644 --- a/application/shared-webapp/ui/components/DateRangePicker.tsx +++ b/application/shared-webapp/ui/components/DateRangePicker.tsx @@ -2,6 +2,7 @@ * ref: https://react-spectrum.adobe.com/react-aria-tailwind-starter/index.html?path=/docs/daterangepicker--docs */ import { CalendarIcon, XIcon } from "lucide-react"; +import { useEffect, useState } from "react"; import { DateRangePicker as AriaDateRangePicker, @@ -24,6 +25,7 @@ export interface DateRangePickerProps extends AriaDateRange label?: string; description?: string; errorMessage?: string | ((validation: ValidationResult) => string); + placeholder?: string; } export function DateRangePicker({ @@ -32,34 +34,93 @@ export function DateRangePicker({ errorMessage, value, onChange, + placeholder = "Select dates", ...props }: Readonly>) { + const [isExpanded, setIsExpanded] = useState(false); + const hasValue = value !== null && value !== undefined; + + // Automatically expand when there's a value + useEffect(() => { + if (hasValue) { + setIsExpanded(true); + } + }, [hasValue]); + + // Format date range for compact display + const formatDateRange = () => { + if (!value) { + return ""; + } + + const formatDate = (date: DateValue) => { + return date.toString().split("T")[0]; + }; + + return `${formatDate(value.start)} - ${formatDate(value.end)}`; + }; + + // Clear the date range + const clearDateRange = (e?: React.MouseEvent) => { + if (e) { + e.stopPropagation(); + } + onChange?.(null); + setIsExpanded(false); + }; + return ( { + onChange?.(newValue); + // Keep expanded if a value is selected + if (!newValue) { + setIsExpanded(false); + } + }} className={composeTailwindRenderProps(props.className, "group flex flex-col gap-1")} > {label && } - - - - - {value && ( - + )} + - )} - - + )} + {description && {description}} {errorMessage} diff --git a/application/shared-webapp/ui/utils/responsive.ts b/application/shared-webapp/ui/utils/responsive.ts index e59beb5b5..9bd2ba1c8 100644 --- a/application/shared-webapp/ui/utils/responsive.ts +++ b/application/shared-webapp/ui/utils/responsive.ts @@ -4,13 +4,19 @@ */ export const BREAKPOINTS = { sm: "sm", // 640px - xl: "xl" // 1280px + md: "md", // 768px + lg: "lg", // 1024px + xl: "xl", // 1280px + "2xl": "2xl" // 1536px } as const; // Media query strings matching Tailwind breakpoints export const MEDIA_QUERIES = { sm: "(min-width: 640px)", - xl: "(min-width: 1280px)" + md: "(min-width: 768px)", + lg: "(min-width: 1024px)", + xl: "(min-width: 1280px)", + "2xl": "(min-width: 1536px)" } as const; // Side menu width constants From 99f5ae1a96f333c4c46f82f89fc98d1f7762befc Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Fri, 20 Jun 2025 16:16:18 +0200 Subject: [PATCH 026/171] Update Account page to use ContentLayout for centering on large screens and revise copy for new layout --- .../WebApp/routes/admin/account/index.tsx | 30 ++++++++----------- .../shared/translations/locale/da-DK.po | 4 +-- .../shared/translations/locale/en-US.po | 4 +-- .../shared/translations/locale/nl-NL.po | 4 +-- 4 files changed, 19 insertions(+), 23 deletions(-) diff --git a/application/account-management/WebApp/routes/admin/account/index.tsx b/application/account-management/WebApp/routes/admin/account/index.tsx index 03e66ceba..d909887d4 100644 --- a/application/account-management/WebApp/routes/admin/account/index.tsx +++ b/application/account-management/WebApp/routes/admin/account/index.tsx @@ -7,6 +7,7 @@ import { Trans } from "@lingui/react/macro"; import { AppLayout } from "@repo/ui/components/AppLayout"; import { Breadcrumb } from "@repo/ui/components/Breadcrumbs"; import { Button } from "@repo/ui/components/Button"; +import { ContentLayout } from "@repo/ui/components/ContentLayout"; import { Form } from "@repo/ui/components/Form"; import { FormErrorMessage } from "@repo/ui/components/FormErrorMessage"; import { TextField } from "@repo/ui/components/TextField"; @@ -45,7 +46,7 @@ export function AccountSettings() { } > -
+

@@ -68,17 +69,15 @@ export function AccountSettings() { {t`Logo`} -
- -
+

-
+ diff --git a/application/account-management/WebApp/shared/translations/locale/da-DK.po b/application/account-management/WebApp/shared/translations/locale/da-DK.po index 6706bb186..30cf40101 100644 --- a/application/account-management/WebApp/shared/translations/locale/da-DK.po +++ b/application/account-management/WebApp/shared/translations/locale/da-DK.po @@ -116,8 +116,8 @@ msgstr "Slet bruger" msgid "Delete users" msgstr "Slet brugere" -msgid "Deleting the account and all associated data. This action cannot be undone, so please proceed with caution." -msgstr "Sletning af kontoen og alle tilknyttede data. Denne handling kan ikke fortrydes, så fortsæt med forsigtighed." +msgid "Delete your account and all data. This action is irreversible—proceed with caution." +msgstr "Slet din konto og alle data. Denne handling kan ikke fortrydes—fortsæt med forsigtighed." msgid "Didn't receive the code? Resend" msgstr "Modtog du ikke koden? Send igen" diff --git a/application/account-management/WebApp/shared/translations/locale/en-US.po b/application/account-management/WebApp/shared/translations/locale/en-US.po index 4929bd74c..a443f52d9 100644 --- a/application/account-management/WebApp/shared/translations/locale/en-US.po +++ b/application/account-management/WebApp/shared/translations/locale/en-US.po @@ -116,8 +116,8 @@ msgstr "Delete user" msgid "Delete users" msgstr "Delete users" -msgid "Deleting the account and all associated data. This action cannot be undone, so please proceed with caution." -msgstr "Deleting the account and all associated data. This action cannot be undone, so please proceed with caution." +msgid "Delete your account and all data. This action is irreversible—proceed with caution." +msgstr "Delete your account and all data. This action is irreversible—proceed with caution." msgid "Didn't receive the code? Resend" msgstr "Didn't receive the code? Resend" diff --git a/application/account-management/WebApp/shared/translations/locale/nl-NL.po b/application/account-management/WebApp/shared/translations/locale/nl-NL.po index 16c784dc2..01ec665ff 100644 --- a/application/account-management/WebApp/shared/translations/locale/nl-NL.po +++ b/application/account-management/WebApp/shared/translations/locale/nl-NL.po @@ -116,8 +116,8 @@ msgstr "Gebruiker verwijderen" msgid "Delete users" msgstr "Gebruikers verwijderen" -msgid "Deleting the account and all associated data. This action cannot be undone, so please proceed with caution." -msgstr "Het account en alle bijbehorende gegevens worden verwijderd. Deze actie kan niet ongedaan worden gemaakt, dus ga voorzichtig te werk." +msgid "Delete your account and all data. This action is irreversible—proceed with caution." +msgstr "Verwijder je account en alle gegevens. Deze actie is onomkeerbaar—ga zorgvuldig te werk." msgid "Didn't receive the code? Resend" msgstr "Code niet ontvangen? Verstuur opnieuw" From 007f7ef85209dc92501bdd779087020fafdd08dd Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Sun, 22 Jun 2025 17:46:46 +0200 Subject: [PATCH 027/171] Delete ContentLayout and update AppLayout to allow centered content --- .../WebApp/routes/admin/account/index.tsx | 102 +++++++++--------- .../WebApp/routes/admin/index.tsx | 18 ++-- .../WebApp/routes/admin/users/index.tsx | 22 ++-- .../shared/translations/locale/da-DK.po | 3 + .../shared/translations/locale/en-US.po | 3 + .../shared/translations/locale/nl-NL.po | 3 + .../WebApp/routes/back-office/index.tsx | 24 ++--- .../shared-webapp/ui/components/AppLayout.tsx | 83 +++++++++++++- .../ui/components/ContentLayout.tsx | 98 ----------------- 9 files changed, 159 insertions(+), 197 deletions(-) delete mode 100644 application/shared-webapp/ui/components/ContentLayout.tsx diff --git a/application/account-management/WebApp/routes/admin/account/index.tsx b/application/account-management/WebApp/routes/admin/account/index.tsx index d909887d4..72f661269 100644 --- a/application/account-management/WebApp/routes/admin/account/index.tsx +++ b/application/account-management/WebApp/routes/admin/account/index.tsx @@ -7,7 +7,6 @@ import { Trans } from "@lingui/react/macro"; import { AppLayout } from "@repo/ui/components/AppLayout"; import { Breadcrumb } from "@repo/ui/components/Breadcrumbs"; import { Button } from "@repo/ui/components/Button"; -import { ContentLayout } from "@repo/ui/components/ContentLayout"; import { Form } from "@repo/ui/components/Form"; import { FormErrorMessage } from "@repo/ui/components/FormErrorMessage"; import { TextField } from "@repo/ui/components/TextField"; @@ -15,7 +14,7 @@ import { mutationSubmitter } from "@repo/ui/forms/mutationSubmitter"; import { createFileRoute } from "@tanstack/react-router"; import { Trash2 } from "lucide-react"; import { useState } from "react"; -import { Label, Separator } from "react-aria-components"; +import { Separator } from "react-aria-components"; import DeleteAccountConfirmation from "./-components/DeleteAccountConfirmation"; export const Route = createFileRoute("/admin/account/")({ @@ -35,6 +34,7 @@ export function AccountSettings() { <> @@ -46,64 +46,58 @@ export function AccountSettings() { } > - -
-
-

- Account settings -

-

- Manage your account here. -

-
-
+

+ Account settings +

+

+ Manage your account here. +

-
- - {t`Logo`} + +

+ Account information +

+ - + Logo - - - + {t`Logo`} + + + + -
-

- Danger zone -

- -
-

- Delete your account and all data. This action is irreversible—proceed with caution. -

+
+

+ Danger zone +

+ +
+

+ Delete your account and all data. This action is irreversible—proceed with caution. +

- -
+
- - - +
diff --git a/application/account-management/WebApp/routes/admin/index.tsx b/application/account-management/WebApp/routes/admin/index.tsx index 0ae5ce2de..6954f72a2 100644 --- a/application/account-management/WebApp/routes/admin/index.tsx +++ b/application/account-management/WebApp/routes/admin/index.tsx @@ -18,17 +18,13 @@ export default function Home() { <> }> -
-
-
-

- Welcome home -

-

- Here's your overview of what's happening. -

-
-
+

+ Welcome home +

+

+ Here's your overview of what's happening. +

+
} > -
-
-
-

- Users -

-

- Manage your users and permissions here. -

-
-
+

+ Users +

+

+ Manage your users and permissions here. +

- - -
+ + ); diff --git a/application/account-management/WebApp/shared/translations/locale/da-DK.po b/application/account-management/WebApp/shared/translations/locale/da-DK.po index 30cf40101..961fbba64 100644 --- a/application/account-management/WebApp/shared/translations/locale/da-DK.po +++ b/application/account-management/WebApp/shared/translations/locale/da-DK.po @@ -16,6 +16,9 @@ msgstr "" msgid "Account" msgstr "Konto" +msgid "Account information" +msgstr "Kontoinformation" + msgid "Account name" msgstr "Kontonavn" diff --git a/application/account-management/WebApp/shared/translations/locale/en-US.po b/application/account-management/WebApp/shared/translations/locale/en-US.po index a443f52d9..e8398a31c 100644 --- a/application/account-management/WebApp/shared/translations/locale/en-US.po +++ b/application/account-management/WebApp/shared/translations/locale/en-US.po @@ -16,6 +16,9 @@ msgstr "" msgid "Account" msgstr "Account" +msgid "Account information" +msgstr "Account information" + msgid "Account name" msgstr "Account name" diff --git a/application/account-management/WebApp/shared/translations/locale/nl-NL.po b/application/account-management/WebApp/shared/translations/locale/nl-NL.po index 01ec665ff..96610c146 100644 --- a/application/account-management/WebApp/shared/translations/locale/nl-NL.po +++ b/application/account-management/WebApp/shared/translations/locale/nl-NL.po @@ -16,6 +16,9 @@ msgstr "" msgid "Account" msgstr "Account" +msgid "Account information" +msgstr "Accountinformatie" + msgid "Account name" msgstr "Accountnaam" diff --git a/application/back-office/WebApp/routes/back-office/index.tsx b/application/back-office/WebApp/routes/back-office/index.tsx index affda2018..897b58977 100644 --- a/application/back-office/WebApp/routes/back-office/index.tsx +++ b/application/back-office/WebApp/routes/back-office/index.tsx @@ -14,21 +14,15 @@ export default function Home() { <> }> -
-
-
-

- Welcome to the Back Office -

-

- - Manage tenants, view system data, see exceptions, and perform various tasks for operational and - support teams. - -

-
-
-
+

+ Welcome to the Back Office +

+

+ + Manage tenants, view system data, see exceptions, and perform various tasks for operational and support + teams. + +

); diff --git a/application/shared-webapp/ui/components/AppLayout.tsx b/application/shared-webapp/ui/components/AppLayout.tsx index d6828b69e..2cea8006c 100644 --- a/application/shared-webapp/ui/components/AppLayout.tsx +++ b/application/shared-webapp/ui/components/AppLayout.tsx @@ -1,10 +1,15 @@ import type React from "react"; -import { useEffect } from "react"; +import { useEffect, useState } from "react"; import { useSideMenuLayout } from "../hooks/useSideMenuLayout"; +import { MEDIA_QUERIES } from "../utils/responsive"; + +type AppLayoutVariant = "full" | "center"; type AppLayoutProps = { children: React.ReactNode; topMenu: React.ReactNode; + variant?: AppLayoutVariant; + maxWidth?: string; }; /** @@ -12,10 +17,62 @@ type AppLayoutProps = { * - Fixed TopMenu that doesn't scroll with content * - Scrollable content area that respects the side menu width * - Proper margin adjustments based on side menu state + * + * Variants: + * - full: Content takes full width with standard padding + * - center: Content is always centered with configurable max width (default: 640px). When SideMenu is expanded on large screens, content is shifted 50px left for better visual balance. */ -export function AppLayout({ children, topMenu }: Readonly) { +export function AppLayout({ children, topMenu, variant = "full", maxWidth = "640px" }: Readonly) { const { className, style, isOverlayOpen, isMobileMenuOpen } = useSideMenuLayout(); + const [isLargeScreen, setIsLargeScreen] = useState(() => + typeof window !== "undefined" ? window.matchMedia(MEDIA_QUERIES.xl).matches : false + ); + const [isSideMenuCollapsed, setIsSideMenuCollapsed] = useState(() => { + if (typeof window === "undefined") { + return true; + } + // Check if we're on large screen + const isLarge = window.matchMedia(MEDIA_QUERIES.xl).matches; + if (!isLarge) { + return true; // Always collapsed on smaller screens + } + + const stored = localStorage.getItem("side-menu-collapsed"); + return stored === "true"; + }); + + // Listen for screen size changes + useEffect(() => { + const xlQuery = window.matchMedia(MEDIA_QUERIES.xl); + const handleXlChange = (e: MediaQueryListEvent) => setIsLargeScreen(e.matches); + + xlQuery.addEventListener("change", handleXlChange); + return () => xlQuery.removeEventListener("change", handleXlChange); + }, []); + + // Listen for side menu toggle events + useEffect(() => { + const handleMenuToggle = (event: CustomEvent) => { + if (isLargeScreen) { + setIsSideMenuCollapsed(event.detail.isCollapsed); + } + }; + + window.addEventListener("side-menu-toggle", handleMenuToggle as EventListener); + return () => window.removeEventListener("side-menu-toggle", handleMenuToggle as EventListener); + }, [isLargeScreen]); + + // Update side menu state when screen size changes + useEffect(() => { + if (!isLargeScreen) { + setIsSideMenuCollapsed(true); + } else { + const stored = localStorage.getItem("side-menu-collapsed"); + setIsSideMenuCollapsed(stored === "true"); + } + }, [isLargeScreen]); + // Prevent body scroll when overlay is open useEffect(() => { if (isOverlayOpen) { @@ -31,14 +88,14 @@ export function AppLayout({ children, topMenu }: Readonly) { return (
))} > {/* Fixed TopMenu with blur effect */}
) { /> {/* Scrollable content area with bounce */} -
{children}
+
+ {variant === "center" ? ( +
+
+ {children} +
+
+ ) : ( + children + )} +
); } diff --git a/application/shared-webapp/ui/components/ContentLayout.tsx b/application/shared-webapp/ui/components/ContentLayout.tsx deleted file mode 100644 index caa91c8a6..000000000 --- a/application/shared-webapp/ui/components/ContentLayout.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import type React from "react"; -import { useEffect, useState } from "react"; -import { cn } from "../cn"; -import { MEDIA_QUERIES } from "../utils/responsive"; - -type ContentLayoutVariant = "full" | "center"; - -type ContentLayoutProps = { - children: React.ReactNode; - variant?: ContentLayoutVariant; - maxWidth?: string; - className?: string; -}; - -/** - * ContentLayout provides consistent content width management for application pages. - * - * Variants: - * - full: Content takes full width with standard padding - * - center: Content is always centered with configurable max width (default: 640px). When SideMenu is expanded on large screens, content is shifted 50px left for better visual balance. - */ -export function ContentLayout({ - children, - variant = "full", - maxWidth = "640px", - className -}: Readonly) { - const [isLargeScreen, setIsLargeScreen] = useState(() => - typeof window !== "undefined" ? window.matchMedia(MEDIA_QUERIES.xl).matches : false - ); - const [isSideMenuCollapsed, setIsSideMenuCollapsed] = useState(() => { - if (typeof window === "undefined") { - return true; - } - // Check if we're on large screen - const isLarge = window.matchMedia(MEDIA_QUERIES.xl).matches; - if (!isLarge) { - return true; // Always collapsed on smaller screens - } - - const stored = localStorage.getItem("side-menu-collapsed"); - return stored === "true"; - }); - - // Listen for screen size changes - useEffect(() => { - const xlQuery = window.matchMedia(MEDIA_QUERIES.xl); - const handleXlChange = (e: MediaQueryListEvent) => setIsLargeScreen(e.matches); - - xlQuery.addEventListener("change", handleXlChange); - return () => xlQuery.removeEventListener("change", handleXlChange); - }, []); - - // Listen for side menu toggle events - useEffect(() => { - const handleMenuToggle = (event: CustomEvent) => { - if (isLargeScreen) { - setIsSideMenuCollapsed(event.detail.isCollapsed); - } - }; - - window.addEventListener("side-menu-toggle", handleMenuToggle as EventListener); - return () => window.removeEventListener("side-menu-toggle", handleMenuToggle as EventListener); - }, [isLargeScreen]); - - // Update side menu state when screen size changes - useEffect(() => { - if (!isLargeScreen) { - setIsSideMenuCollapsed(true); - } else { - const stored = localStorage.getItem("side-menu-collapsed"); - setIsSideMenuCollapsed(stored === "true"); - } - }, [isLargeScreen]); - - const baseClasses = "flex w-full flex-col gap-4 px-4 py-3"; - - if (variant === "center") { - // Shift left when on large screen and side menu is expanded (not collapsed) - const shouldShiftLeft = isLargeScreen && !isSideMenuCollapsed; - - return ( -
-
- {children} -
-
- ); - } - - return
{children}
; -} From 24ecd3af68fc62fb9152aeb074e36ccfbc6f0c27 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Sun, 22 Jun 2025 18:42:19 +0200 Subject: [PATCH 028/171] Move togglebar and home icon slightly up after changing AppLayout --- application/shared-webapp/ui/components/SideMenu.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/application/shared-webapp/ui/components/SideMenu.tsx b/application/shared-webapp/ui/components/SideMenu.tsx index b5411444c..69f6d2cdc 100644 --- a/application/shared-webapp/ui/components/SideMenu.tsx +++ b/application/shared-webapp/ui/components/SideMenu.tsx @@ -344,7 +344,7 @@ export function SideMenu({ children, ariaLabel }: Readonly) { {/* Toggle button centered on divider, midway between logo and first menu item */} ) {
{/* Scrollable menu content */} -
+
{children}
From bc47fbb6c8272a31132991b9e673aee978acb350 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Sun, 22 Jun 2025 15:24:07 +0200 Subject: [PATCH 029/171] Show user filters in dialog on small screens --- .../admin/users/-components/UserQuerying.tsx | 164 ++++++++++++++++-- .../shared/translations/locale/da-DK.po | 15 +- .../shared/translations/locale/en-US.po | 15 +- .../shared/translations/locale/nl-NL.po | 15 +- 4 files changed, 183 insertions(+), 26 deletions(-) diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx index 59388d392..76afea85c 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx @@ -6,10 +6,14 @@ import { t } from "@lingui/core/macro"; import { Trans } from "@lingui/react/macro"; import { Button } from "@repo/ui/components/Button"; import { DateRangePicker } from "@repo/ui/components/DateRangePicker"; +import { Dialog } from "@repo/ui/components/Dialog"; +import { Heading } from "@repo/ui/components/Heading"; +import { Modal } from "@repo/ui/components/Modal"; import { SearchField } from "@repo/ui/components/SearchField"; import { Select, SelectItem } from "@repo/ui/components/Select"; +import { MEDIA_QUERIES } from "@repo/ui/utils/responsive"; import { useLocation, useNavigate } from "@tanstack/react-router"; -import { FilterIcon, FilterXIcon } from "lucide-react"; +import { FilterIcon, FilterXIcon, XIcon } from "lucide-react"; import { useCallback, useEffect, useState } from "react"; // SearchParams interface defines the structure of URL query parameters @@ -37,6 +41,7 @@ export function UserQuerying() { const [showAllFilters, setShowAllFilters] = useState( Boolean(searchParams.userRole ?? searchParams.userStatus ?? searchParams.startDate ?? searchParams.endDate) ); + const [isFilterPanelOpen, setIsFilterPanelOpen] = useState(false); // Convert URL date strings to DateRange if they exist const dateRange = @@ -71,16 +76,52 @@ export function UserQuerying() { return () => clearTimeout(timeoutId); }, [search, updateFilter]); + // Count active filters for badge + const getActiveFilterCount = () => { + let count = 0; + if (searchParams.userRole) { + count++; + } + if (searchParams.userStatus) { + count++; + } + if (searchParams.startDate && searchParams.endDate) { + count++; + } + return count; + }; + + const activeFilterCount = getActiveFilterCount(); + + // Handle screen size changes to show/hide filters appropriately + useEffect(() => { + const handleResize = () => { + const isLargeScreen = window.matchMedia(MEDIA_QUERIES.lg).matches; + if (isLargeScreen && activeFilterCount > 0 && !showAllFilters) { + // On large screens, show inline filters if there are active filters + setShowAllFilters(true); + } else if (!isLargeScreen && showAllFilters) { + // On small/medium screens, hide inline filters + setShowAllFilters(false); + } + }; + + // Check on mount + handleResize(); + + window.addEventListener("resize", handleResize); + return () => window.removeEventListener("resize", handleResize); + }, [activeFilterCount, showAllFilters]); + + const clearAllFilters = () => { + updateFilter({ userRole: undefined, userStatus: undefined, startDate: undefined, endDate: undefined }); + setShowAllFilters(false); + setIsFilterPanelOpen(false); + }; + return (
- + {showAllFilters && ( <> @@ -91,7 +132,6 @@ export function UserQuerying() { }} label={t`User role`} placeholder={t`Any role`} - className="w-[150px]" > Any role @@ -110,7 +150,6 @@ export function UserQuerying() { }} label={t`User status`} placeholder={t`Any status`} - className="w-[150px]" > Any status @@ -136,23 +175,114 @@ export function UserQuerying() { )} + {/* Filter button with responsive behavior */} + + {/* Filter dialog for small/medium screens */} + + + setIsFilterPanelOpen(false)} + className="absolute top-2 right-2 h-10 w-10 p-2 hover:bg-muted" + /> + + Filters + + +
+ + + + + { + updateFilter({ + startDate: range?.start.toString() ?? undefined, + endDate: range?.end.toString() ?? undefined + }); + }} + label={t`Modified date`} + placeholder={t`Select dates`} + className="w-full" + /> +
+ +
+ + +
+ +
); } diff --git a/application/account-management/WebApp/shared/translations/locale/da-DK.po b/application/account-management/WebApp/shared/translations/locale/da-DK.po index 961fbba64..1e30eda83 100644 --- a/application/account-management/WebApp/shared/translations/locale/da-DK.po +++ b/application/account-management/WebApp/shared/translations/locale/da-DK.po @@ -88,6 +88,12 @@ msgstr "Skift rolle" msgid "Change user role" msgstr "Skift brugerrolle" +msgid "Clear" +msgstr "Ryd" + +msgid "Clear filters" +msgstr "" + msgid "Continue" msgstr "Fortsæt" @@ -167,6 +173,9 @@ msgstr "Europa" msgid "Fetching data..." msgstr "Henter data..." +msgid "Filters" +msgstr "Filtre" + msgid "First name" msgstr "Fornavn" @@ -179,9 +188,6 @@ msgstr "Her er din oversigt over, hvad der sker." msgid "Hi! Welcome back" msgstr "Hej! Velkommen tilbage" -msgid "Hide filters" -msgstr "Skjul filtre" - msgid "Home" msgstr "Hjem" @@ -254,6 +260,9 @@ msgstr "Ingen aktiv login." msgid "No active signup session." msgstr "Ingen aktiv tilmeldingssession." +msgid "OK" +msgstr "" + msgid "Organization" msgstr "Organisation" diff --git a/application/account-management/WebApp/shared/translations/locale/en-US.po b/application/account-management/WebApp/shared/translations/locale/en-US.po index e8398a31c..3a4624b77 100644 --- a/application/account-management/WebApp/shared/translations/locale/en-US.po +++ b/application/account-management/WebApp/shared/translations/locale/en-US.po @@ -88,6 +88,12 @@ msgstr "Change role" msgid "Change user role" msgstr "Change user role" +msgid "Clear" +msgstr "Clear" + +msgid "Clear filters" +msgstr "Clear filters" + msgid "Continue" msgstr "Continue" @@ -167,6 +173,9 @@ msgstr "Europe" msgid "Fetching data..." msgstr "Fetching data..." +msgid "Filters" +msgstr "Filters" + msgid "First name" msgstr "First name" @@ -179,9 +188,6 @@ msgstr "Here's your overview of what's happening." msgid "Hi! Welcome back" msgstr "Hi! Welcome back" -msgid "Hide filters" -msgstr "Hide filters" - msgid "Home" msgstr "Home" @@ -254,6 +260,9 @@ msgstr "No active login." msgid "No active signup session." msgstr "No active signup session." +msgid "OK" +msgstr "OK" + msgid "Organization" msgstr "Organization" diff --git a/application/account-management/WebApp/shared/translations/locale/nl-NL.po b/application/account-management/WebApp/shared/translations/locale/nl-NL.po index 96610c146..38a640f8e 100644 --- a/application/account-management/WebApp/shared/translations/locale/nl-NL.po +++ b/application/account-management/WebApp/shared/translations/locale/nl-NL.po @@ -88,6 +88,12 @@ msgstr "Rol wijzigen" msgid "Change user role" msgstr "Gebruikersrol wijzigen" +msgid "Clear" +msgstr "Wissen" + +msgid "Clear filters" +msgstr "" + msgid "Continue" msgstr "Verder" @@ -167,6 +173,9 @@ msgstr "Europa" msgid "Fetching data..." msgstr "Gegevens ophalen..." +msgid "Filters" +msgstr "Filters" + msgid "First name" msgstr "Voornaam" @@ -179,9 +188,6 @@ msgstr "Hier is je overzicht van wat er gebeurt." msgid "Hi! Welcome back" msgstr "Hallo! Welkom terug" -msgid "Hide filters" -msgstr "Filters verbergen" - msgid "Home" msgstr "Home" @@ -254,6 +260,9 @@ msgstr "Geen actieve login." msgid "No active signup session." msgstr "Geen actieve registratiesessie." +msgid "OK" +msgstr "" + msgid "Organization" msgstr "Organisatie" From 79ac3a45f76f761e71d7fc53a866ad1546fd61c3 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Sun, 22 Jun 2025 22:11:14 +0200 Subject: [PATCH 030/171] Add visual indicators for active menu items in SideMenu --- .../shared-webapp/ui/components/SideMenu.tsx | 93 ++++++++++++++----- 1 file changed, 68 insertions(+), 25 deletions(-) diff --git a/application/shared-webapp/ui/components/SideMenu.tsx b/application/shared-webapp/ui/components/SideMenu.tsx index 69f6d2cdc..c8c2724eb 100644 --- a/application/shared-webapp/ui/components/SideMenu.tsx +++ b/application/shared-webapp/ui/components/SideMenu.tsx @@ -20,17 +20,21 @@ const overlayContext = createContext<{ isOpen: boolean; close: () => void } | nu const menuButtonStyles = tv({ extend: focusRing, - base: "menu-item flex h-11 w-full justify-start gap-0 rounded-md py-2 pr-4 pl-4 font-normal text-base text-foreground transition-all duration-100 hover:bg-accent/50 hover:text-foreground/80", + base: "menu-item relative flex h-11 w-full justify-start gap-0 overflow-visible rounded-md py-2 pr-4 pl-4 font-normal text-base transition-all duration-100 hover:bg-accent/50 hover:text-foreground/80", variants: { isCollapsed: { true: "ease-out", false: "ease-in" + }, + isActive: { + true: "text-foreground", + false: "text-muted-foreground hover:text-foreground" } } }); const menuTextStyles = tv({ - base: "overflow-hidden whitespace-nowrap text-start text-foreground transition-all duration-100", + base: "overflow-hidden whitespace-nowrap text-start transition-all duration-100", variants: { isCollapsed: { true: "max-w-0 opacity-0 ease-out", @@ -63,7 +67,31 @@ export function MenuButton({ }: Readonly) { const isCollapsed = useContext(collapsedContext); const overlayCtx = useContext(overlayContext); - const { navigate } = useRouter(); + const router = useRouter(); + const { navigate } = router; + + // Check if this menu item is active + const currentPath = router.state.location.pathname; + let targetPath: string; + + if (typeof to === "string") { + targetPath = to; + } else { + try { + targetPath = router.buildLocation({ to: to as any }).pathname; + } catch { + // If buildLocation fails, fallback to string representation + targetPath = String(to); + } + } + + // Normalize paths by removing trailing slashes + const normalizedCurrentPath = currentPath.replace(/\/$/, "") || "/"; + const normalizedTargetPath = targetPath.replace(/\/$/, "") || "/"; + + // Check if current path matches the target path exactly + const isActive = normalizedCurrentPath === normalizedTargetPath; + const onPress = () => { if (to == null) { return; @@ -81,30 +109,45 @@ export function MenuButton({ } }; + // Check if we're in the mobile menu context + const isMobileMenu = + typeof window !== "undefined" && !window.matchMedia(MEDIA_QUERIES.sm).matches && !overlayCtx?.isOpen; + return ( - - - menuButtonStyles({ - ...renderProps, - className, - isCollapsed - }) - )} - onPress={onPress} - isDisabled={isDisabled} - > -
- -
-
{label}
- - {isCollapsed && ( - - {label} - +
+ {/* Active indicator bar - positioned outside button for proper visibility */} + {isActive && ( +
)} - + + + menuButtonStyles({ + ...renderProps, + className, + isCollapsed, + isActive + }) + )} + onPress={onPress} + isDisabled={isDisabled} + > +
+ +
+
{label}
+ + {isCollapsed && ( + + {label} + + )} + +
); } From e041d597b32f09c57e40522f90308b97931c2305 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Sun, 22 Jun 2025 22:20:31 +0200 Subject: [PATCH 031/171] Fix animation of side menu --- .../shared-webapp/ui/components/SideMenu.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/application/shared-webapp/ui/components/SideMenu.tsx b/application/shared-webapp/ui/components/SideMenu.tsx index c8c2724eb..9b5c210ae 100644 --- a/application/shared-webapp/ui/components/SideMenu.tsx +++ b/application/shared-webapp/ui/components/SideMenu.tsx @@ -34,7 +34,7 @@ const menuButtonStyles = tv({ }); const menuTextStyles = tv({ - base: "overflow-hidden whitespace-nowrap text-start transition-all duration-100", + base: "overflow-hidden whitespace-nowrap text-start text-foreground transition-all duration-100", variants: { isCollapsed: { true: "max-w-0 opacity-0 ease-out", @@ -117,11 +117,9 @@ export function MenuButton({
{/* Active indicator bar - positioned outside button for proper visibility */} {isActive && ( -
+
)} Date: Sun, 22 Jun 2025 22:34:26 +0200 Subject: [PATCH 032/171] Fix padding between sidemenu and content to use margin of side menu instead --- .../shared-webapp/ui/components/AppLayout.tsx | 4 ++-- .../shared-webapp/ui/components/SideMenu.tsx | 14 ++++++++------ application/shared-webapp/ui/utils/responsive.ts | 6 +++--- 3 files changed, 13 insertions(+), 11 deletions(-) diff --git a/application/shared-webapp/ui/components/AppLayout.tsx b/application/shared-webapp/ui/components/AppLayout.tsx index 2cea8006c..39f573976 100644 --- a/application/shared-webapp/ui/components/AppLayout.tsx +++ b/application/shared-webapp/ui/components/AppLayout.tsx @@ -95,7 +95,7 @@ export function AppLayout({ children, topMenu, variant = "full", maxWidth = "640 > {/* Fixed TopMenu with blur effect */}
+
{variant === "center" ? (
void } | nu const menuButtonStyles = tv({ extend: focusRing, - base: "menu-item relative flex h-11 w-full justify-start gap-0 overflow-visible rounded-md py-2 pr-4 pl-4 font-normal text-base transition-all duration-100 hover:bg-accent/50 hover:text-foreground/80", + base: "menu-item relative flex h-11 w-full justify-start gap-0 overflow-visible rounded-md py-2 pr-4 pl-4 font-normal text-base hover:bg-hover-background", variants: { isCollapsed: { true: "ease-out", @@ -117,9 +117,11 @@ export function MenuButton({
{/* Active indicator bar - positioned outside button for proper visibility */} {isActive && ( -
+
)} Date: Sun, 22 Jun 2025 22:52:14 +0200 Subject: [PATCH 033/171] Fix frontend build --- .../shared-webapp/ui/components/SideMenu.tsx | 74 ++++++++----------- 1 file changed, 31 insertions(+), 43 deletions(-) diff --git a/application/shared-webapp/ui/components/SideMenu.tsx b/application/shared-webapp/ui/components/SideMenu.tsx index 76c22d194..3adfc93aa 100644 --- a/application/shared-webapp/ui/components/SideMenu.tsx +++ b/application/shared-webapp/ui/components/SideMenu.tsx @@ -1,5 +1,5 @@ import type { Href } from "@react-types/shared"; -import { useRouter } from "@tanstack/react-router"; +import { type MakeRouteMatch, useRouter } from "@tanstack/react-router"; import { ChevronsLeftIcon, type LucideIcon, X } from "lucide-react"; import type React from "react"; import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react"; @@ -18,6 +18,32 @@ import { focusRing } from "./focusRing"; const collapsedContext = createContext(false); const overlayContext = createContext<{ isOpen: boolean; close: () => void } | null>(null); +// Helper function to handle focus trap tab navigation +const _handleFocusTrap = (e: KeyboardEvent, containerRef: React.RefObject) => { + if (e.key !== "Tab") { + return; + } + + const focusableElements = containerRef.current?.querySelectorAll( + 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])' + ); + + if (!focusableElements || focusableElements.length === 0) { + return; + } + + const firstElement = focusableElements[0] as HTMLElement; + const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement; + + if (e.shiftKey && document.activeElement === firstElement) { + e.preventDefault(); + lastElement.focus(); + } else if (!e.shiftKey && document.activeElement === lastElement) { + e.preventDefault(); + firstElement.focus(); + } +}; + const menuButtonStyles = tv({ extend: focusRing, base: "menu-item relative flex h-11 w-full justify-start gap-0 overflow-visible rounded-md py-2 pr-4 pl-4 font-normal text-base hover:bg-hover-background", @@ -78,7 +104,7 @@ export function MenuButton({ targetPath = to; } else { try { - targetPath = router.buildLocation({ to: to as any }).pathname; + targetPath = router.buildLocation({ to: to as MakeRouteMatch }).pathname; } catch { // If buildLocation fails, fallback to string representation targetPath = String(to); @@ -121,7 +147,7 @@ export function MenuButton({ className={`-translate-y-1/2 absolute top-1/2 h-8 w-1 bg-primary ${ isMobileMenu ? "-left-4" : isCollapsed ? "-left-2" : "-left-6" }`} - /> + /> )} ) { } const handleKeyDown = (e: KeyboardEvent) => { - if (e.key === "Tab") { - const focusableElements = sideMenuRef.current?.querySelectorAll( - 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])' - ); - - if (!focusableElements || focusableElements.length === 0) { - return; - } - - const firstElement = focusableElements[0] as HTMLElement; - const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement; - - if (e.shiftKey && document.activeElement === firstElement) { - e.preventDefault(); - lastElement.focus(); - } else if (!e.shiftKey && document.activeElement === lastElement) { - e.preventDefault(); - firstElement.focus(); - } - } + _handleFocusTrap(e, sideMenuRef); }; document.addEventListener("keydown", handleKeyDown); @@ -469,26 +476,7 @@ function MobileMenu({ children, ariaLabel }: { children: React.ReactNode; ariaLa } const handleKeyDown = (e: KeyboardEvent) => { - if (e.key === "Tab") { - const focusableElements = dialogRef.current?.querySelectorAll( - 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])' - ); - - if (!focusableElements || focusableElements.length === 0) { - return; - } - - const firstElement = focusableElements[0] as HTMLElement; - const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement; - - if (e.shiftKey && document.activeElement === firstElement) { - e.preventDefault(); - lastElement.focus(); - } else if (!e.shiftKey && document.activeElement === lastElement) { - e.preventDefault(); - firstElement.focus(); - } - } + _handleFocusTrap(e, dialogRef); }; document.addEventListener("keydown", handleKeyDown); From 67880f06c0dba3d6a33722b9f445cfeb1e4723ef Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Sun, 22 Jun 2025 23:54:06 +0200 Subject: [PATCH 034/171] Fix position of side menu icons and focus border --- application/shared-webapp/ui/components/SideMenu.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/application/shared-webapp/ui/components/SideMenu.tsx b/application/shared-webapp/ui/components/SideMenu.tsx index 3adfc93aa..db7b4e2ec 100644 --- a/application/shared-webapp/ui/components/SideMenu.tsx +++ b/application/shared-webapp/ui/components/SideMenu.tsx @@ -46,7 +46,7 @@ const _handleFocusTrap = (e: KeyboardEvent, containerRef: React.RefObject) {
{/* Scrollable menu content */} -
-
{children}
+
+
{children}
From ae5ebc25f4e81d8d9452797299d0b325d793cfb6 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Mon, 23 Jun 2025 08:35:01 +0200 Subject: [PATCH 035/171] Fix size and responsive layout of cards on dashboard --- .../WebApp/routes/admin/index.tsx | 84 +++++++++---------- 1 file changed, 42 insertions(+), 42 deletions(-) diff --git a/application/account-management/WebApp/routes/admin/index.tsx b/application/account-management/WebApp/routes/admin/index.tsx index 6954f72a2..315d22941 100644 --- a/application/account-management/WebApp/routes/admin/index.tsx +++ b/application/account-management/WebApp/routes/admin/index.tsx @@ -3,6 +3,7 @@ import { TopMenu } from "@/shared/components/topMenu"; import { UserStatus, api } from "@/shared/lib/api/client"; import { t } from "@lingui/core/macro"; import { Trans } from "@lingui/react/macro"; +import { useUserInfo } from "@repo/infrastructure/auth/hooks"; import { AppLayout } from "@repo/ui/components/AppLayout"; import { getDateDaysAgo, getTodayIsoDate } from "@repo/utils/date/formatDate"; import { Link, createFileRoute } from "@tanstack/react-router"; @@ -13,6 +14,7 @@ export const Route = createFileRoute("/admin/")({ export default function Home() { const { data: usersSummary } = api.useQuery("get", "/api/account-management/users/summary"); + const _userInfo = useUserInfo(); return ( <> @@ -24,60 +26,58 @@ export default function Home() {

Here's your overview of what's happening.

-
-
- -
+
+ +
+
Total users
-
+
Add more in the Users menu
-
- {usersSummary?.totalUsers ?

{usersSummary.totalUsers}

:

-

} -
- - -
+
+
{usersSummary?.totalUsers ?? "-"}
+ + +
+
Active users
-
+
Active users in the past 30 days
-
- {usersSummary?.activeUsers ?

{usersSummary.activeUsers}

:

-

} -
- - -
+
+
{usersSummary?.activeUsers ?? "-"}
+ + +
+
Invited users
-
+
Users who haven't confirmed their email
-
- {usersSummary?.pendingUsers ?

{usersSummary.pendingUsers}

:

-

} -
- -
+
+
{usersSummary?.pendingUsers ?? "-"}
+
From 1e252ee6c38c21ca639cd037729e02e7c10b950f Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Sat, 21 Jun 2025 11:19:03 +0200 Subject: [PATCH 036/171] Add personalized welcome message to admin home page --- .../account-management/WebApp/routes/admin/index.tsx | 6 ++---- .../WebApp/shared/translations/locale/da-DK.po | 4 ++++ .../WebApp/shared/translations/locale/en-US.po | 4 ++++ .../WebApp/shared/translations/locale/nl-NL.po | 4 ++++ 4 files changed, 14 insertions(+), 4 deletions(-) diff --git a/application/account-management/WebApp/routes/admin/index.tsx b/application/account-management/WebApp/routes/admin/index.tsx index 315d22941..a2d84c3a0 100644 --- a/application/account-management/WebApp/routes/admin/index.tsx +++ b/application/account-management/WebApp/routes/admin/index.tsx @@ -14,15 +14,13 @@ export const Route = createFileRoute("/admin/")({ export default function Home() { const { data: usersSummary } = api.useQuery("get", "/api/account-management/users/summary"); - const _userInfo = useUserInfo(); + const userInfo = useUserInfo(); return ( <> }> -

- Welcome home -

+

{userInfo?.firstName ? Welcome home, {userInfo.firstName} : Welcome home}

Here's your overview of what's happening.

diff --git a/application/account-management/WebApp/shared/translations/locale/da-DK.po b/application/account-management/WebApp/shared/translations/locale/da-DK.po index 1e30eda83..d8d703f35 100644 --- a/application/account-management/WebApp/shared/translations/locale/da-DK.po +++ b/application/account-management/WebApp/shared/translations/locale/da-DK.po @@ -426,6 +426,10 @@ msgstr "Se brugere" msgid "Welcome home" msgstr "Velkommen hjem" +#. placeholder {0}: userInfo.firstName +msgid "Welcome home, {0}" +msgstr "Velkommen hjem, {0}" + msgid "You are about to permanently delete the account and the entire data environment via PlatformPlatform.<0/><1/>This action is permanent and irreversible." msgstr "Du er ved at slette kontoen og hele dataomgivelserne permanent via PlatformPlatform.<0/><1/>Denne handling er permanent og kan ikke fortrydes." diff --git a/application/account-management/WebApp/shared/translations/locale/en-US.po b/application/account-management/WebApp/shared/translations/locale/en-US.po index 3a4624b77..40e5a885a 100644 --- a/application/account-management/WebApp/shared/translations/locale/en-US.po +++ b/application/account-management/WebApp/shared/translations/locale/en-US.po @@ -426,6 +426,10 @@ msgstr "View users" msgid "Welcome home" msgstr "Welcome home" +#. placeholder {0}: userInfo.firstName +msgid "Welcome home, {0}" +msgstr "Welcome home, {0}" + msgid "You are about to permanently delete the account and the entire data environment via PlatformPlatform.<0/><1/>This action is permanent and irreversible." msgstr "You are about to permanently delete the account and the entire data environment via PlatformPlatform.<0/><1/>This action is permanent and irreversible." diff --git a/application/account-management/WebApp/shared/translations/locale/nl-NL.po b/application/account-management/WebApp/shared/translations/locale/nl-NL.po index 38a640f8e..5532ce6ea 100644 --- a/application/account-management/WebApp/shared/translations/locale/nl-NL.po +++ b/application/account-management/WebApp/shared/translations/locale/nl-NL.po @@ -426,6 +426,10 @@ msgstr "Gebruikers bekijken" msgid "Welcome home" msgstr "Welkom home" +#. placeholder {0}: userInfo.firstName +msgid "Welcome home, {0}" +msgstr "Welkom home, {0}" + msgid "You are about to permanently delete the account and the entire data environment via PlatformPlatform.<0/><1/>This action is permanent and irreversible." msgstr "Je staat op het punt om het account en de volledige gegevensomgeving permanent te verwijderen via PlatformPlatform.<0/><1/>Deze actie is definitief en onomkeerbaar." From 903a3c6ed62fc7d453be7c9eaa277dfa3481f369 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Mon, 23 Jun 2025 09:16:36 +0200 Subject: [PATCH 037/171] Reduce padding in mobile device dialogs --- application/shared-webapp/ui/components/Dialog.tsx | 2 +- application/shared-webapp/ui/components/Modal.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/application/shared-webapp/ui/components/Dialog.tsx b/application/shared-webapp/ui/components/Dialog.tsx index 288f6163d..f26e35a8a 100644 --- a/application/shared-webapp/ui/components/Dialog.tsx +++ b/application/shared-webapp/ui/components/Dialog.tsx @@ -8,7 +8,7 @@ export function Dialog(props: Readonly) { &]:p-4", + "relative max-h-full min-h-0 overflow-y-auto overscroll-contain p-4 outline outline-0 sm:p-11 [[data-placement]>&]:p-4", props.className )} /> diff --git a/application/shared-webapp/ui/components/Modal.tsx b/application/shared-webapp/ui/components/Modal.tsx index 61b0602de..d2955bdd2 100644 --- a/application/shared-webapp/ui/components/Modal.tsx +++ b/application/shared-webapp/ui/components/Modal.tsx @@ -23,7 +23,7 @@ const overlayStyles = tv({ }, fullSize: { true: "", - false: "p-4" + false: "p-2 sm:p-4" }, blur: { true: "backdrop-blur-lg", From dfec007ec7961e731c1c2964519631f33d4ba321 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Mon, 23 Jun 2025 09:17:25 +0200 Subject: [PATCH 038/171] Make mobile side menu full screen and close when clicking active menu item --- .../shared-webapp/ui/components/SideMenu.tsx | 130 ++++++++++-------- 1 file changed, 76 insertions(+), 54 deletions(-) diff --git a/application/shared-webapp/ui/components/SideMenu.tsx b/application/shared-webapp/ui/components/SideMenu.tsx index db7b4e2ec..c5e14a6bb 100644 --- a/application/shared-webapp/ui/components/SideMenu.tsx +++ b/application/shared-webapp/ui/components/SideMenu.tsx @@ -10,8 +10,6 @@ import logoMarkUrl from "../images/logo-mark.svg"; import logoWrapUrl from "../images/logo-wrap.svg"; import { MEDIA_QUERIES } from "../utils/responsive"; import { Button } from "./Button"; -import { Dialog, DialogTrigger } from "./Dialog"; -import { Modal } from "./Modal"; import { Tooltip, TooltipTrigger } from "./Tooltip"; import { focusRing } from "./focusRing"; @@ -49,8 +47,8 @@ const menuButtonStyles = tv({ base: "menu-item relative flex h-11 w-full items-center justify-start gap-0 overflow-visible rounded-md py-2 pr-4 pl-4 font-normal text-base hover:bg-hover-background", variants: { isCollapsed: { - true: "ease-out", - false: "ease-in" + true: "", + false: "" }, isActive: { true: "text-foreground", @@ -60,11 +58,11 @@ const menuButtonStyles = tv({ }); const menuTextStyles = tv({ - base: "overflow-hidden whitespace-nowrap text-start text-foreground transition-all duration-100", + base: "overflow-hidden whitespace-nowrap text-start", variants: { isCollapsed: { - true: "max-w-0 opacity-0 ease-out", - false: "max-w-[200px] opacity-100 ease-in" + true: "max-w-0 opacity-0", + false: "max-w-[200px] opacity-100" } } }); @@ -123,11 +121,16 @@ export function MenuButton({ return; } - // Auto-close overlay after navigation + // Auto-close overlay after navigation (including when clicking active menu item) if (overlayCtx?.isOpen) { overlayCtx.close(); } + // If clicking on the current active page, still close menu but don't navigate + if (isActive) { + return; + } + if (forceReload) { window.location.href = to; } else { @@ -203,8 +206,8 @@ const chevronStyles = tv({ base: "h-4 w-4 transition-transform duration-100", variants: { isCollapsed: { - true: "rotate-180 transform ease-out", - false: "rotate-0 transform ease-in" + true: "rotate-180 transform", + false: "rotate-0 transform" } } }); @@ -382,19 +385,26 @@ export function SideMenu({ children, ariaLabel }: Readonly) { {/* Fixed header section with logo */}
- {/* Logo container - fixed position */} + {/* Logo container - fixed position, clickable to open mobile menu */}
- {actualIsCollapsed ? ( - Logo - ) : ( - Logo - )} +
{/* Toggle button centered on divider, midway between logo and first menu item */} window.removeEventListener("resize", handleResize); }, [isOpen]); - // Focus trap + // Focus trap and body scroll prevention useEffect(() => { if (!isOpen) { return; } + // Prevent body scroll + const originalStyle = window.getComputedStyle(document.body).overflow; + document.body.style.overflow = "hidden"; + const handleKeyDown = (e: KeyboardEvent) => { _handleFocusTrap(e, dialogRef); }; document.addEventListener("keydown", handleKeyDown); - return () => document.removeEventListener("keydown", handleKeyDown); + return () => { + document.removeEventListener("keydown", handleKeyDown); + // Restore body scroll + document.body.style.overflow = originalStyle; + }; }, [isOpen]); return ( -
- - - { - setIsOpen(open); - // Dispatch event for layout hook - window.dispatchEvent( - new CustomEvent("mobile-menu-toggle", { - detail: { isOpen: open } - }) - ); - }} - blur={false} - fullSize={true} - > - -
-
- Logo + <> + {!isOpen && ( +
+ +
+ )} + {isOpen && ( + setIsOpen(false) }}> +
+
+
+
-
-
{children}
+
+
{children}
-
- - -
+
+ + )} + ); } From 760b5571aaa0a64544147475f1c0c58be200c157 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Mon, 23 Jun 2025 09:31:20 +0200 Subject: [PATCH 039/171] Make logo mark for activating side menu larger on mobile devices --- .../shared-webapp/ui/components/SideMenu.tsx | 21 +++++++------------ 1 file changed, 7 insertions(+), 14 deletions(-) diff --git a/application/shared-webapp/ui/components/SideMenu.tsx b/application/shared-webapp/ui/components/SideMenu.tsx index c5e14a6bb..84853147f 100644 --- a/application/shared-webapp/ui/components/SideMenu.tsx +++ b/application/shared-webapp/ui/components/SideMenu.tsx @@ -385,20 +385,13 @@ export function SideMenu({ children, ariaLabel }: Readonly) { {/* Fixed header section with logo */}
- {/* Logo container - fixed position, clickable to open mobile menu */} + {/* Logo container - fixed position */}
- + {actualIsCollapsed ? ( + Logo + ) : ( + Logo + )}
{/* Toggle button centered on divider, midway between logo and first menu item */} @@ -507,7 +500,7 @@ function MobileMenu({ children, ariaLabel }: { children: React.ReactNode; ariaLa
)} {isOpen && ( setIsOpen(false) }}>
-
- -
-
-
{children}
-
From b5988aa68cbf3051919320e3e11f4afb318664a3 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Tue, 1 Jul 2025 09:17:03 +0200 Subject: [PATCH 042/171] Clean up translation files after build process MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- .../WebApp/shared/translations/locale/da-DK.po | 3 --- .../WebApp/shared/translations/locale/en-US.po | 3 --- .../WebApp/shared/translations/locale/nl-NL.po | 3 --- 3 files changed, 9 deletions(-) diff --git a/application/account-management/WebApp/shared/translations/locale/da-DK.po b/application/account-management/WebApp/shared/translations/locale/da-DK.po index a74f83e2a..60dacf092 100644 --- a/application/account-management/WebApp/shared/translations/locale/da-DK.po +++ b/application/account-management/WebApp/shared/translations/locale/da-DK.po @@ -188,9 +188,6 @@ msgstr "Her er din oversigt over, hvad der sker." msgid "Hi! Welcome back" msgstr "Hej! Velkommen tilbage" -msgid "Hide filters" -msgstr "" - msgid "Home" msgstr "Hjem" diff --git a/application/account-management/WebApp/shared/translations/locale/en-US.po b/application/account-management/WebApp/shared/translations/locale/en-US.po index 8ce07b8d2..40e5a885a 100644 --- a/application/account-management/WebApp/shared/translations/locale/en-US.po +++ b/application/account-management/WebApp/shared/translations/locale/en-US.po @@ -188,9 +188,6 @@ msgstr "Here's your overview of what's happening." msgid "Hi! Welcome back" msgstr "Hi! Welcome back" -msgid "Hide filters" -msgstr "Hide filters" - msgid "Home" msgstr "Home" diff --git a/application/account-management/WebApp/shared/translations/locale/nl-NL.po b/application/account-management/WebApp/shared/translations/locale/nl-NL.po index 81ae73371..b0824721d 100644 --- a/application/account-management/WebApp/shared/translations/locale/nl-NL.po +++ b/application/account-management/WebApp/shared/translations/locale/nl-NL.po @@ -188,9 +188,6 @@ msgstr "Hier is je overzicht van wat er gebeurt." msgid "Hi! Welcome back" msgstr "Hallo! Welkom terug" -msgid "Hide filters" -msgstr "" - msgid "Home" msgstr "Home" From 08cf4e0745dfb51eb77098f7a9c751ba2618ecd6 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Sun, 22 Jun 2025 19:14:13 +0200 Subject: [PATCH 043/171] Make pagination on user table stick to the bottom of the screen --- .../admin/users/-components/UserTable.tsx | 273 +++++++++--------- 1 file changed, 136 insertions(+), 137 deletions(-) diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx index f87e04aaf..fe0e05b7b 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx @@ -122,147 +122,146 @@ export function UserTable({ selectedUsers, onSelectedUsersChange }: Readonly !isOpen && setUserToDelete(null)} /> -
-
user.id)} - onSelectionChange={handleSelectionChange} - sortDescriptor={sortDescriptor} - onSortChange={handleSortChange} - aria-label={t`Users`} - > - - - Name - - - Email - - - Created - - - Modified - - - Role - - - Actions - - - - {users?.users.map((user) => ( - - -
- -
-
- {user.firstName} {user.lastName} - {user.emailConfirmed ? ( - "" - ) : ( - - Pending - - )} -
-
{user.title ?? ""}
+
user.id)} + onSelectionChange={handleSelectionChange} + sortDescriptor={sortDescriptor} + onSortChange={handleSortChange} + aria-label={t`Users`} + > + + + Name + + + Email + + + Created + + + Modified + + + Role + + + Actions + + + + {users?.users.map((user) => ( + + +
+ +
+
+ {user.firstName} {user.lastName} + {user.emailConfirmed ? ( + "" + ) : ( + + Pending + + )}
+
{user.title ?? ""}
- - {user.email} - {formatDate(user.createdAt)} - {formatDate(user.modifiedAt)} - - {getUserRoleLabel(user.role)} - - -
-
+ + {user.email} + {formatDate(user.createdAt)} + {formatDate(user.modifiedAt)} + + {getUserRoleLabel(user.role)} + + +
+ + { + if (isOpen) { onSelectedUsersChange([user]); - setUserToDelete(user); - }} - isDisabled={user.id === userInfo?.id} - > - + } + }} + > + - { - if (isOpen) { - onSelectedUsersChange([user]); - } - }} - > - - - - - View profile - - setUserToChangeRole(user)} - > - - - Change role - - - - setUserToDelete(user)} - > - - - Delete - - - - -
- - - ))} - -
- {users && ( - <> - - - - )} -
+ + + + View profile + + setUserToChangeRole(user)} + > + + + Change role + + + + setUserToDelete(user)} + > + + + Delete + + + + +
+ + + ))} + + + + {users && ( +
+ + +
+ )} ); } From 9b8ad66ddb8dcbf16f20621c57687ec8acb97dae Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Sat, 14 Jun 2025 12:29:43 +0200 Subject: [PATCH 044/171] Update user-related error messages for clarity and consistency across the application --- application/README.md | 2 +- .../Core/Features/Users/Commands/CreateUser.cs | 5 +++++ .../Core/Features/Users/Commands/InviteUser.cs | 8 +++++++- .../account-management/Tests/Users/InviteUserTests.cs | 6 +----- 4 files changed, 14 insertions(+), 7 deletions(-) diff --git a/application/README.md b/application/README.md index 0b8810558..c34eee9ad 100644 --- a/application/README.md +++ b/application/README.md @@ -51,7 +51,7 @@ Self-contained systems in PlatformPlatform are divided into the following core p RuleFor(x => x) .MustAsync((x, cancellationToken)=> userRepository.IsEmailFreeAsync(x.TenantId, x.Email, cancellationToken)) .WithName("Email") - .WithMessage(x => $"The email '{x.Email}' is already in use by another user on this tenant.") + .WithMessage(x => $"The user with '{x.Email}' already exists.") .When(x => !string.IsNullOrEmpty(x.Email)); } } diff --git a/application/account-management/Core/Features/Users/Commands/CreateUser.cs b/application/account-management/Core/Features/Users/Commands/CreateUser.cs index a6db7e2fb..8e1d2e992 100644 --- a/application/account-management/Core/Features/Users/Commands/CreateUser.cs +++ b/application/account-management/Core/Features/Users/Commands/CreateUser.cs @@ -47,6 +47,11 @@ public async Task> Handle(CreateUserCommand command, Cancellation throw new UnreachableException("Only when signing up a new tenant, is the TenantID allowed to different than the current tenant."); } + if (await userRepository.IsEmailFreeAsync(command.Email, cancellationToken) == false) + { + return Result.BadRequest($"The user with '{command.Email}' already exists."); + } + var locale = SinglePageAppConfiguration.SupportedLocalizations.Contains(command.PreferredLocale) ? command.PreferredLocale : string.Empty; diff --git a/application/account-management/Core/Features/Users/Commands/InviteUser.cs b/application/account-management/Core/Features/Users/Commands/InviteUser.cs index 269787e54..478d8262d 100644 --- a/application/account-management/Core/Features/Users/Commands/InviteUser.cs +++ b/application/account-management/Core/Features/Users/Commands/InviteUser.cs @@ -34,7 +34,8 @@ public sealed class InviteUserHandler( IEmailClient emailClient, IExecutionContext executionContext, IMediator mediator, - ITelemetryEventsCollector events + ITelemetryEventsCollector events, + IUserRepository userRepository ) : IRequestHandler { public async Task Handle(InviteUserCommand command, CancellationToken cancellationToken) @@ -44,6 +45,11 @@ public async Task Handle(InviteUserCommand command, CancellationToken ca return Result.Forbidden("Only owners are allowed to invite other users."); } + if (await userRepository.IsEmailFreeAsync(command.Email, cancellationToken) == false) + { + return Result.BadRequest($"The user with '{command.Email}' already exists."); + } + var result = await mediator.Send( new CreateUserCommand(executionContext.TenantId!, command.Email, UserRole.Member, false, null), cancellationToken ); diff --git a/application/account-management/Tests/Users/InviteUserTests.cs b/application/account-management/Tests/Users/InviteUserTests.cs index e5fec8b7d..728dbc5d7 100644 --- a/application/account-management/Tests/Users/InviteUserTests.cs +++ b/application/account-management/Tests/Users/InviteUserTests.cs @@ -75,11 +75,7 @@ public async Task InviteUser_WhenUserExists_ShouldReturnBadRequest() var response = await AuthenticatedOwnerHttpClient.PostAsJsonAsync("/api/account-management/users/invite", command); // Assert - var expectedErrors = new[] - { - new ErrorDetail("email", $"The email '{existingUserEmail}' is already in use by another user on this tenant.") - }; - await response.ShouldHaveErrorStatusCode(HttpStatusCode.BadRequest, expectedErrors); + await response.ShouldHaveErrorStatusCode(HttpStatusCode.BadRequest, $"The user with '{existingUserEmail}' already exists."); TelemetryEventsCollectorSpy.AreAllEventsDispatched.Should().BeFalse(); } From 347f87046e0b875c51d686aec6043cccd04f60ff Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Fri, 13 Jun 2025 21:31:55 +0200 Subject: [PATCH 045/171] Move check for unique email from validation to command handler to follow conventions --- .../Core/Features/Users/Commands/CreateUser.cs | 11 ++--------- .../Core/Features/Users/Commands/InviteUser.cs | 14 ++++---------- 2 files changed, 6 insertions(+), 19 deletions(-) diff --git a/application/account-management/Core/Features/Users/Commands/CreateUser.cs b/application/account-management/Core/Features/Users/Commands/CreateUser.cs index 8e1d2e992..a8d13fec2 100644 --- a/application/account-management/Core/Features/Users/Commands/CreateUser.cs +++ b/application/account-management/Core/Features/Users/Commands/CreateUser.cs @@ -1,5 +1,4 @@ using FluentValidation; -using PlatformPlatform.AccountManagement.Features.Tenants.Domain; using PlatformPlatform.AccountManagement.Features.Users.Domain; using PlatformPlatform.AccountManagement.Features.Users.Shared; using PlatformPlatform.AccountManagement.Integrations.Gravatar; @@ -20,15 +19,9 @@ internal sealed record CreateUserCommand(TenantId TenantId, string Email, UserRo internal sealed class CreateUserValidator : AbstractValidator { - public CreateUserValidator(IUserRepository userRepository, ITenantRepository tenantRepository) + public CreateUserValidator() { - RuleFor(x => x.Email).NotEmpty().SetValidator(new SharedValidations.Email()); - - RuleFor(x => x) - .MustAsync((x, cancellationToken) => userRepository.IsEmailFreeAsync(x.Email, cancellationToken)) - .WithName("Email") - .WithMessage(x => $"The email '{x.Email}' is already in use by another user on this tenant.") - .When(x => !string.IsNullOrEmpty(x.Email)); + RuleFor(x => x.Email).SetValidator(new SharedValidations.Email()); } } diff --git a/application/account-management/Core/Features/Users/Commands/InviteUser.cs b/application/account-management/Core/Features/Users/Commands/InviteUser.cs index 478d8262d..cd5ab2755 100644 --- a/application/account-management/Core/Features/Users/Commands/InviteUser.cs +++ b/application/account-management/Core/Features/Users/Commands/InviteUser.cs @@ -18,24 +18,18 @@ public sealed record InviteUserCommand(string Email) : ICommand, IRequest { - public InviteUserValidator(IUserRepository userRepository) + public InviteUserValidator() { - RuleFor(x => x.Email).NotEmpty().SetValidator(new SharedValidations.Email()); - - RuleFor(x => x) - .MustAsync((x, cancellationToken) => userRepository.IsEmailFreeAsync(x.Email, cancellationToken)) - .WithName("Email") - .WithMessage(x => $"The email '{x.Email}' is already in use by another user on this tenant.") - .When(x => !string.IsNullOrEmpty(x.Email)); + RuleFor(x => x.Email).SetValidator(new SharedValidations.Email()); } } public sealed class InviteUserHandler( + IUserRepository userRepository, IEmailClient emailClient, IExecutionContext executionContext, IMediator mediator, - ITelemetryEventsCollector events, - IUserRepository userRepository + ITelemetryEventsCollector events ) : IRequestHandler { public async Task Handle(InviteUserCommand command, CancellationToken cancellationToken) From 46e8fb895c9bb9b30bce97645844f5b9b6f68f76 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Fri, 13 Jun 2025 23:49:10 +0200 Subject: [PATCH 046/171] Remove FormErrorMessage now handled by toast --- .../WebApp/routes/admin/account/index.tsx | 2 -- .../admin/users/-components/InviteUserDialog.tsx | 2 -- .../account-management/WebApp/routes/login/index.tsx | 2 -- .../account-management/WebApp/routes/login/verify.tsx | 11 +++++++++-- .../account-management/WebApp/routes/signup/index.tsx | 2 -- .../WebApp/routes/signup/verify.tsx | 11 +++++++++-- .../shared/components/userModals/UserProfileModal.tsx | 3 --- .../WebApp/shared/translations/locale/da-DK.po | 10 ++++++++-- .../WebApp/shared/translations/locale/en-US.po | 6 ++++++ .../WebApp/shared/translations/locale/nl-NL.po | 10 ++++++++-- 10 files changed, 40 insertions(+), 19 deletions(-) diff --git a/application/account-management/WebApp/routes/admin/account/index.tsx b/application/account-management/WebApp/routes/admin/account/index.tsx index 72f661269..bc6933191 100644 --- a/application/account-management/WebApp/routes/admin/account/index.tsx +++ b/application/account-management/WebApp/routes/admin/account/index.tsx @@ -8,7 +8,6 @@ import { AppLayout } from "@repo/ui/components/AppLayout"; import { Breadcrumb } from "@repo/ui/components/Breadcrumbs"; import { Button } from "@repo/ui/components/Button"; import { Form } from "@repo/ui/components/Form"; -import { FormErrorMessage } from "@repo/ui/components/FormErrorMessage"; import { TextField } from "@repo/ui/components/TextField"; import { mutationSubmitter } from "@repo/ui/forms/mutationSubmitter"; import { createFileRoute } from "@tanstack/react-router"; @@ -76,7 +75,6 @@ export function AccountSettings() { label={t`Account name`} validationBehavior="aria" /> - diff --git a/application/account-management/WebApp/routes/admin/users/-components/InviteUserDialog.tsx b/application/account-management/WebApp/routes/admin/users/-components/InviteUserDialog.tsx index 9d7425bba..f0173539a 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/InviteUserDialog.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/InviteUserDialog.tsx @@ -4,7 +4,6 @@ import { Trans } from "@lingui/react/macro"; import { Button } from "@repo/ui/components/Button"; import { Dialog } from "@repo/ui/components/Dialog"; import { Form } from "@repo/ui/components/Form"; -import { FormErrorMessage } from "@repo/ui/components/FormErrorMessage"; import { Heading } from "@repo/ui/components/Heading"; import { Modal } from "@repo/ui/components/Modal"; import { TextField } from "@repo/ui/components/TextField"; @@ -51,7 +50,6 @@ export default function InviteUserDialog({ isOpen, onOpenChange }: Readonly -
diff --git a/application/account-management/WebApp/routes/login/verify.tsx b/application/account-management/WebApp/routes/login/verify.tsx index c0eea9e89..ac2c07575 100644 --- a/application/account-management/WebApp/routes/login/verify.tsx +++ b/application/account-management/WebApp/routes/login/verify.tsx @@ -10,7 +10,6 @@ import { useIsAuthenticated } from "@repo/infrastructure/auth/hooks"; import { Button } from "@repo/ui/components/Button"; import { DigitPattern } from "@repo/ui/components/Digit"; import { Form } from "@repo/ui/components/Form"; -import { FormErrorMessage } from "@repo/ui/components/FormErrorMessage"; import { Link } from "@repo/ui/components/Link"; import { OneTimeCodeInput } from "@repo/ui/components/OneTimeCodeInput"; import { mutationSubmitter } from "@repo/ui/forms/mutationSubmitter"; @@ -112,7 +111,15 @@ export function CompleteLoginForm() { ariaLabel={t`Login verification code`} />
- + {!isExpired ? ( +

+ Your verification code is valid for {expiresInString} +

+ ) : ( +

+ Your verification code has expired +

+ )} diff --git a/application/account-management/WebApp/routes/signup/verify.tsx b/application/account-management/WebApp/routes/signup/verify.tsx index 9e94df379..7f9570a26 100644 --- a/application/account-management/WebApp/routes/signup/verify.tsx +++ b/application/account-management/WebApp/routes/signup/verify.tsx @@ -11,7 +11,6 @@ import { preferredLocaleKey } from "@repo/infrastructure/translations/constants" import { Button } from "@repo/ui/components/Button"; import { DigitPattern } from "@repo/ui/components/Digit"; import { Form } from "@repo/ui/components/Form"; -import { FormErrorMessage } from "@repo/ui/components/FormErrorMessage"; import { Link } from "@repo/ui/components/Link"; import { OneTimeCodeInput } from "@repo/ui/components/OneTimeCodeInput"; import { mutationSubmitter } from "@repo/ui/forms/mutationSubmitter"; @@ -108,7 +107,15 @@ export function CompleteSignupForm() { ariaLabel={t`Signup verification code`} />
- + {!isExpired ? ( +

+ Your verification code is valid for {expiresInString} +

+ ) : ( +

+ Your verification code has expired +

+ )}
- + } + />
diff --git a/application/account-management/WebApp/shared/lib/api/AccountManagement.Api.json b/application/account-management/WebApp/shared/lib/api/AccountManagement.Api.json index 6aaa759b5..2960c5a4d 100644 --- a/application/account-management/WebApp/shared/lib/api/AccountManagement.Api.json +++ b/application/account-management/WebApp/shared/lib/api/AccountManagement.Api.json @@ -1308,9 +1308,6 @@ "type": "object", "additionalProperties": false, "properties": { - "email": { - "type": "string" - }, "firstName": { "type": "string" }, From 0514df1a18d96082384abb73ab0745d035ed22e5 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Tue, 1 Jul 2025 09:33:45 +0200 Subject: [PATCH 051/171] Remove unused import and fix whitespace --- .../Core/Features/Users/Commands/UpdateCurrentUser.cs | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/application/account-management/Core/Features/Users/Commands/UpdateCurrentUser.cs b/application/account-management/Core/Features/Users/Commands/UpdateCurrentUser.cs index 2fec6f45f..c68338347 100644 --- a/application/account-management/Core/Features/Users/Commands/UpdateCurrentUser.cs +++ b/application/account-management/Core/Features/Users/Commands/UpdateCurrentUser.cs @@ -3,7 +3,6 @@ using PlatformPlatform.AccountManagement.Features.Users.Domain; using PlatformPlatform.SharedKernel.Cqrs; using PlatformPlatform.SharedKernel.Telemetry; -using PlatformPlatform.SharedKernel.Validation; namespace PlatformPlatform.AccountManagement.Features.Users.Commands; @@ -34,7 +33,7 @@ public sealed class UpdateCurrentUserHandler(IUserRepository userRepository, ITe public async Task Handle(UpdateCurrentUserCommand command, CancellationToken cancellationToken) { var user = await userRepository.GetLoggedInUserAsync(cancellationToken); - + user.Update(command.FirstName, command.LastName, command.Title); userRepository.Update(user); From c2837e962a0fa0dd2fe51c5804f17692a8129978 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Sun, 22 Jun 2025 16:32:14 +0200 Subject: [PATCH 052/171] Remove comma after e.g. in placeholder text --- .../components/userModals/UserProfileModal.tsx | 6 +++--- .../WebApp/shared/translations/locale/da-DK.po | 8 ++++---- .../WebApp/shared/translations/locale/en-US.po | 12 ++++++------ .../WebApp/shared/translations/locale/nl-NL.po | 12 ++++++------ 4 files changed, 19 insertions(+), 19 deletions(-) diff --git a/application/account-management/WebApp/shared/components/userModals/UserProfileModal.tsx b/application/account-management/WebApp/shared/components/userModals/UserProfileModal.tsx index 3c7945c4a..c44e85671 100644 --- a/application/account-management/WebApp/shared/components/userModals/UserProfileModal.tsx +++ b/application/account-management/WebApp/shared/components/userModals/UserProfileModal.tsx @@ -211,7 +211,7 @@ function UserProfileDialog({ onOpenChange, onIsLoadingChange }: Readonly
@@ -229,7 +229,7 @@ function UserProfileDialog({ onOpenChange, onIsLoadingChange }: Readonly} /> - +
diff --git a/application/account-management/WebApp/shared/translations/locale/da-DK.po b/application/account-management/WebApp/shared/translations/locale/da-DK.po index cfdb73070..25f53ec74 100644 --- a/application/account-management/WebApp/shared/translations/locale/da-DK.po +++ b/application/account-management/WebApp/shared/translations/locale/da-DK.po @@ -239,7 +239,7 @@ msgid "Member" msgstr "Medlem" msgid "Menu" -msgstr "Menu" +msgstr "" msgid "Modified" msgstr "Ændret" @@ -392,8 +392,11 @@ msgstr "Opdater dit profilbillede og personlige oplysninger her." msgid "Upload profile picture" msgstr "Upload profilbillede" +msgid "User actions" +msgstr "Brugerhandlinger" + msgid "User invited successfully" -msgstr "Bruger inviteret succesfuldt" +msgstr "" msgid "User profile" msgstr "Brugerprofil" diff --git a/application/account-management/WebApp/shared/translations/locale/en-US.po b/application/account-management/WebApp/shared/translations/locale/en-US.po index 702d0c93c..90499fd7f 100644 --- a/application/account-management/WebApp/shared/translations/locale/en-US.po +++ b/application/account-management/WebApp/shared/translations/locale/en-US.po @@ -392,6 +392,9 @@ msgstr "Update your profile picture and personal details here." msgid "Upload profile picture" msgstr "Upload profile picture" +msgid "User actions" +msgstr "User actions" + msgid "User invited successfully" msgstr "User invited successfully" diff --git a/application/account-management/WebApp/shared/translations/locale/nl-NL.po b/application/account-management/WebApp/shared/translations/locale/nl-NL.po index ad8ea3eaf..9eac14ac3 100644 --- a/application/account-management/WebApp/shared/translations/locale/nl-NL.po +++ b/application/account-management/WebApp/shared/translations/locale/nl-NL.po @@ -239,7 +239,7 @@ msgid "Member" msgstr "Lid" msgid "Menu" -msgstr "Menu" +msgstr "" msgid "Modified" msgstr "Gewijzigd" @@ -392,8 +392,11 @@ msgstr "Werk hier je profielfoto en persoonlijke gegevens bij." msgid "Upload profile picture" msgstr "Profielfoto uploaden" +msgid "User actions" +msgstr "Gebruikersacties" + msgid "User invited successfully" -msgstr "Gebruiker succesvol uitgenodigd" +msgstr "" msgid "User profile" msgstr "Gebruikersprofiel" From cea1ea2ad2ddbd6f92c91209e54a728a8cc8c983 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Sun, 15 Jun 2025 10:55:20 +0200 Subject: [PATCH 062/171] Ensure UI state updates on user management when deleting users --- .../routes/admin/users/-components/UserTable.tsx | 1 + .../routes/admin/users/-components/UserToolbar.tsx | 10 ++++++++-- .../WebApp/routes/admin/users/index.tsx | 2 +- .../WebApp/shared/translations/locale/da-DK.po | 3 --- .../WebApp/shared/translations/locale/en-US.po | 3 --- .../WebApp/shared/translations/locale/nl-NL.po | 3 --- 6 files changed, 10 insertions(+), 12 deletions(-) diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx index 02d3f1df5..6603dcf8e 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx @@ -120,6 +120,7 @@ export function UserTable({ selectedUsers, onSelectedUsersChange }: Readonly !isOpen && setUserToDelete(null)} + onUsersDeleted={() => onSelectedUsersChange([])} /> void; } -export function UserToolbar({ selectedUsers }: Readonly) { +export function UserToolbar({ selectedUsers, onSelectedUsersChange }: Readonly) { const [isInviteModalOpen, setIsInviteModalOpen] = useState(false); const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); @@ -39,7 +40,12 @@ export function UserToolbar({ selectedUsers }: Readonly) { )} - + onSelectedUsersChange([])} + /> ); } diff --git a/application/account-management/WebApp/routes/admin/users/index.tsx b/application/account-management/WebApp/routes/admin/users/index.tsx index de6bda142..7b8a0c679 100644 --- a/application/account-management/WebApp/routes/admin/users/index.tsx +++ b/application/account-management/WebApp/routes/admin/users/index.tsx @@ -54,7 +54,7 @@ export default function UsersPage() { Manage your users and permissions here.

- + diff --git a/application/account-management/WebApp/shared/translations/locale/da-DK.po b/application/account-management/WebApp/shared/translations/locale/da-DK.po index 25f53ec74..d3b995658 100644 --- a/application/account-management/WebApp/shared/translations/locale/da-DK.po +++ b/application/account-management/WebApp/shared/translations/locale/da-DK.po @@ -238,9 +238,6 @@ msgstr "Administrer dine brugere og tilladelser her." msgid "Member" msgstr "Medlem" -msgid "Menu" -msgstr "" - msgid "Modified" msgstr "Ændret" diff --git a/application/account-management/WebApp/shared/translations/locale/en-US.po b/application/account-management/WebApp/shared/translations/locale/en-US.po index 90499fd7f..6975ddb10 100644 --- a/application/account-management/WebApp/shared/translations/locale/en-US.po +++ b/application/account-management/WebApp/shared/translations/locale/en-US.po @@ -238,9 +238,6 @@ msgstr "Manage your users and permissions here." msgid "Member" msgstr "Member" -msgid "Menu" -msgstr "Menu" - msgid "Modified" msgstr "Modified" diff --git a/application/account-management/WebApp/shared/translations/locale/nl-NL.po b/application/account-management/WebApp/shared/translations/locale/nl-NL.po index 9eac14ac3..6692799a6 100644 --- a/application/account-management/WebApp/shared/translations/locale/nl-NL.po +++ b/application/account-management/WebApp/shared/translations/locale/nl-NL.po @@ -238,9 +238,6 @@ msgstr "Beheer je gebruikers en rechten hier." msgid "Member" msgstr "Lid" -msgid "Menu" -msgstr "" - msgid "Modified" msgstr "Gewijzigd" From 2801aa5c59cf7ed9d0c3a1fe8824787d4a31dd20 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Sun, 22 Jun 2025 15:32:21 +0200 Subject: [PATCH 063/171] Change filter icon to list filter for improved user list filtering --- .../WebApp/routes/admin/users/-components/UserQuerying.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx index 60d85f87a..ca79b6fbb 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx @@ -13,7 +13,7 @@ import { SearchField } from "@repo/ui/components/SearchField"; import { Select, SelectItem } from "@repo/ui/components/Select"; import { MEDIA_QUERIES } from "@repo/ui/utils/responsive"; import { useLocation, useNavigate } from "@tanstack/react-router"; -import { FilterIcon, FilterXIcon, XIcon } from "lucide-react"; +import { ListFilter, ListFilterPlus, XIcon } from "lucide-react"; import { useCallback, useEffect, useState } from "react"; // SearchParams interface defines the structure of URL query parameters @@ -217,9 +217,9 @@ export function UserQuerying() { }} > {showAllFilters ? ( - + ) : ( - + )} {activeFilterCount > 0 && ( From 3e845bd106457427ba792da77fed1ec867fcf4d5 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Wed, 2 Jul 2025 01:57:17 +0200 Subject: [PATCH 064/171] Rename Invite users button to Invite user MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- .../routes/admin/users/-components/UserToolbar.tsx | 2 +- .../WebApp/shared/translations/locale/da-DK.po | 9 +++------ .../WebApp/shared/translations/locale/en-US.po | 3 --- .../WebApp/shared/translations/locale/nl-NL.po | 9 +++------ 4 files changed, 7 insertions(+), 16 deletions(-) diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx index 7e1718629..db9eef215 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx @@ -26,7 +26,7 @@ export function UserToolbar({ selectedUsers, onSelectedUsersChange }: Readonly setIsInviteModalOpen(true)}> - Invite users + Invite user )} diff --git a/application/account-management/WebApp/shared/translations/locale/da-DK.po b/application/account-management/WebApp/shared/translations/locale/da-DK.po index d3b995658..2a1e19a96 100644 --- a/application/account-management/WebApp/shared/translations/locale/da-DK.po +++ b/application/account-management/WebApp/shared/translations/locale/da-DK.po @@ -202,9 +202,6 @@ msgstr "Billedet skal være mindre end 1 MB." msgid "Invite user" msgstr "Inviter bruger" -msgid "Invite users" -msgstr "Inviter brugere" - msgid "Invited users" msgstr "Inviterede brugere" @@ -393,7 +390,7 @@ msgid "User actions" msgstr "Brugerhandlinger" msgid "User invited successfully" -msgstr "" +msgstr "Bruger inviteret succesfuldt" msgid "User profile" msgstr "Brugerprofil" @@ -448,10 +445,10 @@ msgid "You are about to permanently delete the account and the entire data envir msgstr "Du er ved at slette kontoen og hele dataomgivelserne permanent via PlatformPlatform.<0/><1/>Denne handling er permanent og kan ikke fortrydes." msgid "Your verification code has expired" -msgstr "" +msgstr "Din bekræftelseskode er udløbet" msgid "Your verification code is valid for {expiresInString}" -msgstr "" +msgstr "Din bekræftelseskode er gyldig i {expiresInString}" msgid "yourname@example.com" msgstr "ditnavn@eksempel.com" diff --git a/application/account-management/WebApp/shared/translations/locale/en-US.po b/application/account-management/WebApp/shared/translations/locale/en-US.po index 6975ddb10..aa3796996 100644 --- a/application/account-management/WebApp/shared/translations/locale/en-US.po +++ b/application/account-management/WebApp/shared/translations/locale/en-US.po @@ -202,9 +202,6 @@ msgstr "Image must be smaller than 1 MB." msgid "Invite user" msgstr "Invite user" -msgid "Invite users" -msgstr "Invite users" - msgid "Invited users" msgstr "Invited users" diff --git a/application/account-management/WebApp/shared/translations/locale/nl-NL.po b/application/account-management/WebApp/shared/translations/locale/nl-NL.po index 6692799a6..c4edf8019 100644 --- a/application/account-management/WebApp/shared/translations/locale/nl-NL.po +++ b/application/account-management/WebApp/shared/translations/locale/nl-NL.po @@ -202,9 +202,6 @@ msgstr "Afbeelding moet kleiner zijn dan 1 MB." msgid "Invite user" msgstr "Gebruiker uitnodigen" -msgid "Invite users" -msgstr "Gebruikers uitnodigen" - msgid "Invited users" msgstr "Uitgenodigde gebruikers" @@ -393,7 +390,7 @@ msgid "User actions" msgstr "Gebruikersacties" msgid "User invited successfully" -msgstr "" +msgstr "Gebruiker succesvol uitgenodigd" msgid "User profile" msgstr "Gebruikersprofiel" @@ -448,10 +445,10 @@ msgid "You are about to permanently delete the account and the entire data envir msgstr "Je staat op het punt om het account en de volledige gegevensomgeving permanent te verwijderen via PlatformPlatform.<0/><1/>Deze actie is definitief en onomkeerbaar." msgid "Your verification code has expired" -msgstr "" +msgstr "Je verificatiecode is verlopen" msgid "Your verification code is valid for {expiresInString}" -msgstr "" +msgstr "Je verificatiecode is geldig voor {expiresInString}" msgid "yourname@example.com" msgstr "jouwnaam@voorbeeld.com" From 794fbdc72c36adc2d2e862b758caaa24d515360e Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Thu, 29 May 2025 14:30:08 +0200 Subject: [PATCH 065/171] Improve login/signup state management by adding clear/has state functions and updating verification routes --- .../WebApp/routes/login/-shared/loginState.ts | 14 +++-- .../WebApp/routes/login/index.tsx | 9 +++- .../WebApp/routes/login/verify.tsx | 51 ++++++++++++++----- .../routes/signup/-shared/signupState.ts | 14 +++-- .../WebApp/routes/signup/index.tsx | 9 +++- .../WebApp/routes/signup/verify.tsx | 51 ++++++++++++++----- .../shared/translations/locale/da-DK.po | 10 ++-- .../shared/translations/locale/en-US.po | 10 ++-- .../shared/translations/locale/nl-NL.po | 10 ++-- 9 files changed, 123 insertions(+), 55 deletions(-) diff --git a/application/account-management/WebApp/routes/login/-shared/loginState.ts b/application/account-management/WebApp/routes/login/-shared/loginState.ts index 0d12fb794..8edd28fed 100644 --- a/application/account-management/WebApp/routes/login/-shared/loginState.ts +++ b/application/account-management/WebApp/routes/login/-shared/loginState.ts @@ -1,5 +1,4 @@ import type { Schemas } from "@/shared/lib/api/client"; -import { t } from "@lingui/core/macro"; interface LoginState { loginId: Schemas["LoginId"]; @@ -14,9 +13,14 @@ export function setLoginState(newLogin: LoginState): void { currentLoginState = newLogin; } +export function clearLoginState(): void { + currentLoginState = undefined; +} + +export function hasLoginState(): boolean { + return currentLoginState != null; +} + export function getLoginState() { - if (currentLoginState == null) { - throw new Error(t`No active login.`); - } - return currentLoginState; + return currentLoginState as LoginState; } diff --git a/application/account-management/WebApp/routes/login/index.tsx b/application/account-management/WebApp/routes/login/index.tsx index 75ca1c27f..5205c5d26 100644 --- a/application/account-management/WebApp/routes/login/index.tsx +++ b/application/account-management/WebApp/routes/login/index.tsx @@ -14,8 +14,8 @@ import { Link } from "@repo/ui/components/Link"; import { TextField } from "@repo/ui/components/TextField"; import { mutationSubmitter } from "@repo/ui/forms/mutationSubmitter"; import { Navigate, createFileRoute } from "@tanstack/react-router"; -import { useState } from "react"; -import { setLoginState } from "./-shared/loginState"; +import { useEffect, useState } from "react"; +import { clearLoginState, setLoginState } from "./-shared/loginState"; export const Route = createFileRoute("/login/")({ validateSearch: (search) => { @@ -51,6 +51,11 @@ export function LoginForm() { const startLoginMutation = api.useMutation("post", "/api/account-management/authentication/login/start"); + // Clear any existing login state when starting a new login flow + useEffect(() => { + clearLoginState(); + }, []); + if (startLoginMutation.isSuccess) { const { loginId, emailConfirmationId, validForSeconds } = startLoginMutation.data; diff --git a/application/account-management/WebApp/routes/login/verify.tsx b/application/account-management/WebApp/routes/login/verify.tsx index ac2c07575..f9948534d 100644 --- a/application/account-management/WebApp/routes/login/verify.tsx +++ b/application/account-management/WebApp/routes/login/verify.tsx @@ -12,11 +12,12 @@ import { DigitPattern } from "@repo/ui/components/Digit"; import { Form } from "@repo/ui/components/Form"; import { Link } from "@repo/ui/components/Link"; import { OneTimeCodeInput } from "@repo/ui/components/OneTimeCodeInput"; +import { toastQueue } from "@repo/ui/components/Toast"; import { mutationSubmitter } from "@repo/ui/forms/mutationSubmitter"; import { useExpirationTimeout } from "@repo/ui/hooks/useExpiration"; -import { Navigate, createFileRoute } from "@tanstack/react-router"; -import { useEffect } from "react"; -import { getLoginState, setLoginState } from "./-shared/loginState"; +import { createFileRoute, useNavigate } from "@tanstack/react-router"; +import { useEffect, useState } from "react"; +import { clearLoginState, getLoginState, hasLoginState, setLoginState } from "./-shared/loginState"; export const Route = createFileRoute("/login/verify")({ validateSearch: (search) => { @@ -27,10 +28,29 @@ export const Route = createFileRoute("/login/verify")({ }; }, component: function LoginVerifyRoute() { + const navigate = useNavigate(); const isAuthenticated = useIsAuthenticated(); + const [hasShownToast, setHasShownToast] = useState(false); - if (isAuthenticated) { - return ; + useEffect(() => { + if (isAuthenticated) { + navigate({ to: loggedInPath }); + return; + } + + if (!hasLoginState() && !hasShownToast) { + navigate({ to: "/login", search: { returnPath: undefined } }); + toastQueue.add({ + title: "No active login session", + description: "Please start the login process again.", + variant: "warning" + }); + setHasShownToast(true); + } + }, [isAuthenticated, navigate, hasShownToast]); + + if (!hasLoginState()) { + return null; } return ( @@ -39,15 +59,18 @@ export const Route = createFileRoute("/login/verify")({ ); }, - errorComponent: (props) => ( - - - - ) + errorComponent: (props) => { + return ( + + + + ); + } }); export function CompleteLoginForm() { - const { loginId, emailConfirmationId, email, expireAt } = getLoginState(); + const loginState = getLoginState(); + const { loginId, emailConfirmationId, email, expireAt } = loginState; const { expiresInString, isExpired } = useExpirationTimeout(expireAt); const { returnPath } = Route.useSearch(); @@ -55,6 +78,7 @@ export function CompleteLoginForm() { useEffect(() => { if (completeLoginMutation.isSuccess) { + clearLoginState(); window.location.href = returnPath ?? loggedInPath; } }, [completeLoginMutation.isSuccess, returnPath]); @@ -67,14 +91,15 @@ export function CompleteLoginForm() { useEffect(() => { if (resendLoginCodeMutation.isSuccess && resendLoginCodeMutation.data) { setLoginState({ - ...getLoginState(), + ...loginState, expireAt: new Date(Date.now() + resendLoginCodeMutation.data.validForSeconds * 1000) }); } - }, [resendLoginCodeMutation.isSuccess, resendLoginCodeMutation.data]); + }, [resendLoginCodeMutation.isSuccess, resendLoginCodeMutation.data, loginState]); useEffect(() => { if (isExpired) { + clearLoginState(); window.location.href = "/login/expired"; } }, [isExpired]); diff --git a/application/account-management/WebApp/routes/signup/-shared/signupState.ts b/application/account-management/WebApp/routes/signup/-shared/signupState.ts index 0dbbd630b..4b556a2bc 100644 --- a/application/account-management/WebApp/routes/signup/-shared/signupState.ts +++ b/application/account-management/WebApp/routes/signup/-shared/signupState.ts @@ -1,5 +1,4 @@ import type { Schemas } from "@/shared/lib/api/client"; -import { t } from "@lingui/core/macro"; interface SignupState { emailConfirmationId: Schemas["EmailConfirmationId"]; @@ -13,9 +12,14 @@ export function setSignupState(newSignup: SignupState): void { currentSignupState = newSignup; } +export function clearSignupState(): void { + currentSignupState = undefined; +} + +export function hasSignupState(): boolean { + return currentSignupState != null; +} + export function getSignupState() { - if (currentSignupState == null) { - throw new Error(t`No active signup session.`); - } - return currentSignupState; + return currentSignupState as SignupState; } diff --git a/application/account-management/WebApp/routes/signup/index.tsx b/application/account-management/WebApp/routes/signup/index.tsx index 0250a2cf6..07566dba0 100644 --- a/application/account-management/WebApp/routes/signup/index.tsx +++ b/application/account-management/WebApp/routes/signup/index.tsx @@ -16,8 +16,8 @@ import { TextField } from "@repo/ui/components/TextField"; import { mutationSubmitter } from "@repo/ui/forms/mutationSubmitter"; import { Navigate, createFileRoute } from "@tanstack/react-router"; import { DotIcon } from "lucide-react"; -import { useState } from "react"; -import { setSignupState } from "./-shared/signupState"; +import { useEffect, useState } from "react"; +import { clearSignupState, setSignupState } from "./-shared/signupState"; export const Route = createFileRoute("/signup/")({ component: function SignupRoute() { @@ -45,6 +45,11 @@ export function StartSignupForm() { const startSignupMutation = api.useMutation("post", "/api/account-management/signups/start"); + // Clear any existing signup state when starting a new signup flow + useEffect(() => { + clearSignupState(); + }, []); + if (startSignupMutation.isSuccess) { const { emailConfirmationId, validForSeconds } = startSignupMutation.data; diff --git a/application/account-management/WebApp/routes/signup/verify.tsx b/application/account-management/WebApp/routes/signup/verify.tsx index 7f9570a26..9cd6a596e 100644 --- a/application/account-management/WebApp/routes/signup/verify.tsx +++ b/application/account-management/WebApp/routes/signup/verify.tsx @@ -13,18 +13,38 @@ import { DigitPattern } from "@repo/ui/components/Digit"; import { Form } from "@repo/ui/components/Form"; import { Link } from "@repo/ui/components/Link"; import { OneTimeCodeInput } from "@repo/ui/components/OneTimeCodeInput"; +import { toastQueue } from "@repo/ui/components/Toast"; import { mutationSubmitter } from "@repo/ui/forms/mutationSubmitter"; import { useExpirationTimeout } from "@repo/ui/hooks/useExpiration"; -import { Navigate, createFileRoute } from "@tanstack/react-router"; -import { useEffect } from "react"; -import { getSignupState, setSignupState } from "./-shared/signupState"; +import { createFileRoute, useNavigate } from "@tanstack/react-router"; +import { useEffect, useState } from "react"; +import { clearSignupState, getSignupState, hasSignupState, setSignupState } from "./-shared/signupState"; export const Route = createFileRoute("/signup/verify")({ component: function SignupVerifyRoute() { + const navigate = useNavigate(); const isAuthenticated = useIsAuthenticated(); + const [hasShownToast, setHasShownToast] = useState(false); - if (isAuthenticated) { - return ; + useEffect(() => { + if (isAuthenticated) { + navigate({ to: loggedInPath }); + return; + } + + if (!hasSignupState() && !hasShownToast) { + navigate({ to: "/signup" }); + toastQueue.add({ + title: t`No active signup session`, + description: t`Please start the signup process again.`, + variant: "warning" + }); + setHasShownToast(true); + } + }, [isAuthenticated, navigate, hasShownToast]); + + if (isAuthenticated || !hasSignupState()) { + return null; } return ( @@ -33,15 +53,18 @@ export const Route = createFileRoute("/signup/verify")({ ); }, - errorComponent: (props) => ( - - - - ) + errorComponent: (props) => { + return ( + + + + ); + } }); export function CompleteSignupForm() { - const { email, emailConfirmationId, expireAt } = getSignupState(); + const signupState = getSignupState(); + const { email, emailConfirmationId, expireAt } = signupState; const { expiresInString, isExpired } = useExpirationTimeout(expireAt); const completeSignupMutation = api.useMutation( @@ -51,6 +74,7 @@ export function CompleteSignupForm() { useEffect(() => { if (completeSignupMutation.isSuccess) { + clearSignupState(); window.location.href = signedUpPath; } }, [completeSignupMutation.isSuccess]); @@ -63,14 +87,15 @@ export function CompleteSignupForm() { useEffect(() => { if (resendSignupCodeMutation.isSuccess && resendSignupCodeMutation.data) { setSignupState({ - ...getSignupState(), + ...signupState, expireAt: new Date(Date.now() + resendSignupCodeMutation.data.validForSeconds * 1000) }); } - }, [resendSignupCodeMutation.isSuccess, resendSignupCodeMutation.data]); + }, [resendSignupCodeMutation.isSuccess, resendSignupCodeMutation.data, signupState]); useEffect(() => { if (isExpired) { + clearSignupState(); window.location.href = "/signup/expired"; } }, [isExpired]); diff --git a/application/account-management/WebApp/shared/translations/locale/da-DK.po b/application/account-management/WebApp/shared/translations/locale/da-DK.po index 2a1e19a96..4caca1594 100644 --- a/application/account-management/WebApp/shared/translations/locale/da-DK.po +++ b/application/account-management/WebApp/shared/translations/locale/da-DK.po @@ -250,11 +250,8 @@ msgstr "Navigation" msgid "Next" msgstr "Næste" -msgid "No active login." -msgstr "Ingen aktiv login." - -msgid "No active signup session." -msgstr "Ingen aktiv tilmeldingssession." +msgid "No active signup session" +msgstr "Ingen aktiv tilmeldingssession" msgid "OK" msgstr "OK" @@ -274,6 +271,9 @@ msgstr "Tjek din e-mail for en bekræftelseskode sendt til <0>{email}" msgid "Please select a JPEG, PNG, GIF, or WebP image." msgstr "Vælg et JPEG-, PNG-, GIF- eller WebP-billede." +msgid "Please start the signup process again." +msgstr "Start venligst tilmeldingsprocessen igen." + msgid "Powered by" msgstr "Drevet af" diff --git a/application/account-management/WebApp/shared/translations/locale/en-US.po b/application/account-management/WebApp/shared/translations/locale/en-US.po index aa3796996..7fc979a5b 100644 --- a/application/account-management/WebApp/shared/translations/locale/en-US.po +++ b/application/account-management/WebApp/shared/translations/locale/en-US.po @@ -250,11 +250,8 @@ msgstr "Navigation" msgid "Next" msgstr "Next" -msgid "No active login." -msgstr "No active login." - -msgid "No active signup session." -msgstr "No active signup session." +msgid "No active signup session" +msgstr "No active signup session" msgid "OK" msgstr "OK" @@ -274,6 +271,9 @@ msgstr "Please check your email for a verification code sent to <0>{email}" msgid "Please select a JPEG, PNG, GIF, or WebP image." msgstr "Please select a JPEG, PNG, GIF, or WebP image." +msgid "Please start the signup process again." +msgstr "Please start the signup process again." + msgid "Powered by" msgstr "Powered by" diff --git a/application/account-management/WebApp/shared/translations/locale/nl-NL.po b/application/account-management/WebApp/shared/translations/locale/nl-NL.po index c4edf8019..318bb1176 100644 --- a/application/account-management/WebApp/shared/translations/locale/nl-NL.po +++ b/application/account-management/WebApp/shared/translations/locale/nl-NL.po @@ -250,11 +250,8 @@ msgstr "Navigatie" msgid "Next" msgstr "Volgende" -msgid "No active login." -msgstr "Geen actieve login." - -msgid "No active signup session." -msgstr "Geen actieve registratiesessie." +msgid "No active signup session" +msgstr "Geen actieve registratiesessie" msgid "OK" msgstr "OK" @@ -274,6 +271,9 @@ msgstr "Controleer je e-mail voor een verificatiecode verzonden naar <0>{email}< msgid "Please select a JPEG, PNG, GIF, or WebP image." msgstr "Selecteer een JPEG-, PNG-, GIF- of WebP-afbeelding." +msgid "Please start the signup process again." +msgstr "Begin het registratieproces opnieuw." + msgid "Powered by" msgstr "Mogelijk gemaakt door" From 0043eb838324b201893da8378f95ea301252ceda Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Wed, 4 Jun 2025 16:58:32 +0200 Subject: [PATCH 066/171] Update login to return 400 bad request instead of 404 not found for unknown login ID to prevent revealing existence --- .../Core/Features/Authentication/Commands/CompleteLogin.cs | 6 +++++- .../Tests/Authentication/CompleteLoginTests.cs | 5 ++--- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/application/account-management/Core/Features/Authentication/Commands/CompleteLogin.cs b/application/account-management/Core/Features/Authentication/Commands/CompleteLogin.cs index e8a712893..4a338d30d 100644 --- a/application/account-management/Core/Features/Authentication/Commands/CompleteLogin.cs +++ b/application/account-management/Core/Features/Authentication/Commands/CompleteLogin.cs @@ -34,7 +34,11 @@ public async Task Handle(CompleteLoginCommand command, CancellationToken { var login = await loginRepository.GetByIdAsync(command.Id, cancellationToken); - if (login is null) return Result.NotFound($"Login with id '{command.Id}' not found."); + if (login is null) + { + // For security, avoid confirming the existence of login IDs + return Result.BadRequest("The code is wrong or no longer valid."); + } if (login.Completed) { diff --git a/application/account-management/Tests/Authentication/CompleteLoginTests.cs b/application/account-management/Tests/Authentication/CompleteLoginTests.cs index 56cdd55f3..c57ae8270 100644 --- a/application/account-management/Tests/Authentication/CompleteLoginTests.cs +++ b/application/account-management/Tests/Authentication/CompleteLoginTests.cs @@ -47,7 +47,7 @@ public async Task CompleteLogin_WhenValid_ShouldCompleteLoginAndCreateTokens() } [Fact] - public async Task CompleteLogin_WhenLoginNotFound_ShouldReturnNotFound() + public async Task CompleteLogin_WhenLoginNotFound_ShouldReturnBadRequest() { // Arrange var invalidLoginId = LoginId.NewId(); @@ -57,8 +57,7 @@ public async Task CompleteLogin_WhenLoginNotFound_ShouldReturnNotFound() var response = await AnonymousHttpClient.PostAsJsonAsync($"/api/account-management/authentication/login/{invalidLoginId}/complete", command); // Assert - var expectedDetail = $"Login with id '{invalidLoginId}' not found."; - await response.ShouldHaveErrorStatusCode(HttpStatusCode.NotFound, expectedDetail); + await response.ShouldHaveErrorStatusCode(HttpStatusCode.BadRequest, "The code is wrong or no longer valid."); TelemetryEventsCollectorSpy.AreAllEventsDispatched.Should().BeFalse(); TelemetryEventsCollectorSpy.CollectedEvents.Should().BeEmpty(); From 5bd5e6effcd77b4f14d54f0f212f6cd7d2a28207 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Sun, 8 Jun 2025 16:19:42 +0200 Subject: [PATCH 067/171] Disable one-time password until filled out and auto-focus on failed attempts --- .../WebApp/routes/login/verify.tsx | 18 +++++- .../WebApp/routes/signup/verify.tsx | 20 +++++- .../ui/components/OneTimeCodeInput.tsx | 63 ++++++++++++++----- 3 files changed, 78 insertions(+), 23 deletions(-) diff --git a/application/account-management/WebApp/routes/login/verify.tsx b/application/account-management/WebApp/routes/login/verify.tsx index f9948534d..11e7eca72 100644 --- a/application/account-management/WebApp/routes/login/verify.tsx +++ b/application/account-management/WebApp/routes/login/verify.tsx @@ -11,12 +11,12 @@ import { Button } from "@repo/ui/components/Button"; import { DigitPattern } from "@repo/ui/components/Digit"; import { Form } from "@repo/ui/components/Form"; import { Link } from "@repo/ui/components/Link"; -import { OneTimeCodeInput } from "@repo/ui/components/OneTimeCodeInput"; +import { OneTimeCodeInput, type OneTimeCodeInputRef } from "@repo/ui/components/OneTimeCodeInput"; import { toastQueue } from "@repo/ui/components/Toast"; import { mutationSubmitter } from "@repo/ui/forms/mutationSubmitter"; import { useExpirationTimeout } from "@repo/ui/hooks/useExpiration"; import { createFileRoute, useNavigate } from "@tanstack/react-router"; -import { useEffect, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import { clearLoginState, getLoginState, hasLoginState, setLoginState } from "./-shared/loginState"; export const Route = createFileRoute("/login/verify")({ @@ -74,6 +74,9 @@ export function CompleteLoginForm() { const { expiresInString, isExpired } = useExpirationTimeout(expireAt); const { returnPath } = Route.useSearch(); + const oneTimeCodeInputRef = useRef(null); + const [isOneTimeCodeComplete, setIsOneTimeCodeComplete] = useState(false); + const completeLoginMutation = api.useMutation("post", "/api/account-management/authentication/login/{id}/complete"); useEffect(() => { @@ -104,6 +107,13 @@ export function CompleteLoginForm() { } }, [isExpired]); + // Focus first input after validation error + useEffect(() => { + if (completeLoginMutation.error) { + oneTimeCodeInputRef.current?.focus(); + } + }, [completeLoginMutation.error]); + return (
setIsOneTimeCodeComplete(isComplete)} />
{!isExpired ? ( @@ -148,7 +160,7 @@ export function CompleteLoginForm() { diff --git a/application/account-management/WebApp/routes/signup/verify.tsx b/application/account-management/WebApp/routes/signup/verify.tsx index 9cd6a596e..c320792e7 100644 --- a/application/account-management/WebApp/routes/signup/verify.tsx +++ b/application/account-management/WebApp/routes/signup/verify.tsx @@ -12,12 +12,12 @@ import { Button } from "@repo/ui/components/Button"; import { DigitPattern } from "@repo/ui/components/Digit"; import { Form } from "@repo/ui/components/Form"; import { Link } from "@repo/ui/components/Link"; -import { OneTimeCodeInput } from "@repo/ui/components/OneTimeCodeInput"; +import { OneTimeCodeInput, type OneTimeCodeInputRef } from "@repo/ui/components/OneTimeCodeInput"; import { toastQueue } from "@repo/ui/components/Toast"; import { mutationSubmitter } from "@repo/ui/forms/mutationSubmitter"; import { useExpirationTimeout } from "@repo/ui/hooks/useExpiration"; import { createFileRoute, useNavigate } from "@tanstack/react-router"; -import { useEffect, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import { clearSignupState, getSignupState, hasSignupState, setSignupState } from "./-shared/signupState"; export const Route = createFileRoute("/signup/verify")({ @@ -67,6 +67,9 @@ export function CompleteSignupForm() { const { email, emailConfirmationId, expireAt } = signupState; const { expiresInString, isExpired } = useExpirationTimeout(expireAt); + const oneTimeCodeInputRef = useRef(null); + const [isOneTimeCodeComplete, setIsOneTimeCodeComplete] = useState(false); + const completeSignupMutation = api.useMutation( "post", "/api/account-management/signups/{emailConfirmationId}/complete" @@ -100,6 +103,13 @@ export function CompleteSignupForm() { } }, [isExpired]); + // Focus first input after validation error + useEffect(() => { + if (completeSignupMutation.error) { + oneTimeCodeInputRef.current?.focus(); + } + }, [completeSignupMutation.error]); + return (
setIsOneTimeCodeComplete(isComplete)} />
{!isExpired ? ( @@ -144,7 +156,9 @@ export function CompleteSignupForm() { diff --git a/application/shared-webapp/ui/components/OneTimeCodeInput.tsx b/application/shared-webapp/ui/components/OneTimeCodeInput.tsx index 738493517..5b9b39a68 100644 --- a/application/shared-webapp/ui/components/OneTimeCodeInput.tsx +++ b/application/shared-webapp/ui/components/OneTimeCodeInput.tsx @@ -1,4 +1,4 @@ -import { useCallback, useId, useMemo, useState } from "react"; +import { forwardRef, useCallback, useId, useImperativeHandle, useMemo, useState } from "react"; import { Digit } from "./Digit"; import type { DigitPattern } from "./Digit"; @@ -9,20 +9,25 @@ export interface OneTimeCodeInputProps { name?: string; autoFocus?: boolean; ariaLabel: string; + onValueChange?: (value: string, isComplete: boolean) => void; } -export function OneTimeCodeInput({ - digitPattern, - disabled, - length = 6, - name = "code", - autoFocus, - ariaLabel -}: OneTimeCodeInputProps) { +export interface OneTimeCodeInputRef { + reset: () => void; + focus: () => void; + getValue: () => string; + isComplete: () => boolean; +} + +export const OneTimeCodeInput = forwardRef(function OneTimeCodeInput( + { digitPattern, disabled, length = 6, name = "code", autoFocus, ariaLabel, onValueChange }, + ref +) { const [digits, setDigits] = useState(new Array(length).fill("")); const id = useId(); const digitRefs = useMemo(() => new Array(length).fill(id).map((id, i) => `${id}_${i}`), [id, length]); const inputValue = digits.join(""); + const isComplete = inputValue.length === length; const setFocus = useCallback( (i: number) => { @@ -42,19 +47,43 @@ export function OneTimeCodeInput({ [digitRefs] ); + useImperativeHandle( + ref, + () => ({ + reset: () => { + setDigits(new Array(length).fill("")); + setFocus(0); + }, + focus: () => { + setFocus(0); + }, + getValue: () => inputValue, + isComplete: () => isComplete + }), + [inputValue, isComplete, length, setFocus] + ); + const onChangeHandler = (value: string, i: number): void => { + let newDigits: string[]; + if (value.length > 1) { // If the user pastes more than one digit const pastedDigits = value.substring(0, length).split(""); - setDigits([...pastedDigits]); + newDigits = [...pastedDigits]; + setDigits(newDigits); setFocus(pastedDigits.length); - return; + } else { + newDigits = [...digits]; + newDigits[i] = value; + setDigits(newDigits); + const nextFocusIndex = value.length > 0 ? Math.min(digits.length, i + 1) : Math.max(0, i - 1); + setFocus(nextFocusIndex); } - const newDigits = [...digits]; - newDigits[i] = value; - setDigits(newDigits); - const nextFocusIndex = value.length > 0 ? Math.min(digits.length, i + 1) : Math.max(0, i - 1); - setFocus(nextFocusIndex); + + // Call onValueChange callback if provided + const newValue = newDigits.join(""); + const newIsComplete = newValue.length === length; + onValueChange?.(newValue, newIsComplete); }; return (
@@ -74,4 +103,4 @@ export function OneTimeCodeInput({
); -} +}); From ccf8eb424096fbf490a1f3050d8745dbde5fce1d Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Tue, 10 Jun 2025 22:11:46 +0200 Subject: [PATCH 068/171] Add toast message when one time password is resend --- .../account-management/WebApp/routes/login/verify.tsx | 5 +++++ .../account-management/WebApp/routes/signup/verify.tsx | 5 +++++ .../WebApp/shared/translations/locale/da-DK.po | 6 ++++++ .../WebApp/shared/translations/locale/en-US.po | 6 ++++++ .../WebApp/shared/translations/locale/nl-NL.po | 6 ++++++ 5 files changed, 28 insertions(+) diff --git a/application/account-management/WebApp/routes/login/verify.tsx b/application/account-management/WebApp/routes/login/verify.tsx index 11e7eca72..3793aca24 100644 --- a/application/account-management/WebApp/routes/login/verify.tsx +++ b/application/account-management/WebApp/routes/login/verify.tsx @@ -97,6 +97,11 @@ export function CompleteLoginForm() { ...loginState, expireAt: new Date(Date.now() + resendLoginCodeMutation.data.validForSeconds * 1000) }); + toastQueue.add({ + title: t`Verification code sent`, + description: t`A new verification code has been sent to your email.`, + variant: "success" + }); } }, [resendLoginCodeMutation.isSuccess, resendLoginCodeMutation.data, loginState]); diff --git a/application/account-management/WebApp/routes/signup/verify.tsx b/application/account-management/WebApp/routes/signup/verify.tsx index c320792e7..1db77892e 100644 --- a/application/account-management/WebApp/routes/signup/verify.tsx +++ b/application/account-management/WebApp/routes/signup/verify.tsx @@ -93,6 +93,11 @@ export function CompleteSignupForm() { ...signupState, expireAt: new Date(Date.now() + resendSignupCodeMutation.data.validForSeconds * 1000) }); + toastQueue.add({ + title: t`Verification code sent`, + description: t`A new verification code has been sent to your email.`, + variant: "success" + }); } }, [resendSignupCodeMutation.isSuccess, resendSignupCodeMutation.data, signupState]); diff --git a/application/account-management/WebApp/shared/translations/locale/da-DK.po b/application/account-management/WebApp/shared/translations/locale/da-DK.po index 4caca1594..eca582a68 100644 --- a/application/account-management/WebApp/shared/translations/locale/da-DK.po +++ b/application/account-management/WebApp/shared/translations/locale/da-DK.po @@ -13,6 +13,9 @@ msgstr "" "Plural-Forms: \n" "X-Generator: @lingui/cli\n" +msgid "A new verification code has been sent to your email." +msgstr "En ny bekræftelseskode er blevet sendt til din e-mail." + msgid "Account" msgstr "Konto" @@ -416,6 +419,9 @@ msgstr "Brugere" msgid "Users who haven't confirmed their email" msgstr "Brugere, der ikke har bekræftet deres e-mail" +msgid "Verification code sent" +msgstr "Bekræftelseskode sendt" + msgid "Verify" msgstr "Bekræft" diff --git a/application/account-management/WebApp/shared/translations/locale/en-US.po b/application/account-management/WebApp/shared/translations/locale/en-US.po index 7fc979a5b..1de6f1734 100644 --- a/application/account-management/WebApp/shared/translations/locale/en-US.po +++ b/application/account-management/WebApp/shared/translations/locale/en-US.po @@ -13,6 +13,9 @@ msgstr "" "Plural-Forms: \n" "X-Generator: @lingui/cli\n" +msgid "A new verification code has been sent to your email." +msgstr "A new verification code has been sent to your email." + msgid "Account" msgstr "Account" @@ -416,6 +419,9 @@ msgstr "Users" msgid "Users who haven't confirmed their email" msgstr "Users who haven't confirmed their email" +msgid "Verification code sent" +msgstr "Verification code sent" + msgid "Verify" msgstr "Verify" diff --git a/application/account-management/WebApp/shared/translations/locale/nl-NL.po b/application/account-management/WebApp/shared/translations/locale/nl-NL.po index 318bb1176..04ed07ce0 100644 --- a/application/account-management/WebApp/shared/translations/locale/nl-NL.po +++ b/application/account-management/WebApp/shared/translations/locale/nl-NL.po @@ -13,6 +13,9 @@ msgstr "" "Plural-Forms: \n" "X-Generator: @lingui/cli\n" +msgid "A new verification code has been sent to your email." +msgstr "Een nieuwe verificatiecode is naar je e-mail verzonden." + msgid "Account" msgstr "Account" @@ -416,6 +419,9 @@ msgstr "Gebruikers" msgid "Users who haven't confirmed their email" msgstr "Gebruikers die hun e-mail niet hebben bevestigd" +msgid "Verification code sent" +msgstr "Verificatiecode verzonden" + msgid "Verify" msgstr "Verifiëren" From 8c5ae76c1df713420591942c484f2e7a8aa2991f Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Wed, 11 Jun 2025 22:42:26 +0200 Subject: [PATCH 069/171] Auto-submit one-time verification code on signup and login --- .../WebApp/routes/login/verify.tsx | 13 ++++++++++++- .../WebApp/routes/signup/verify.tsx | 13 ++++++++++++- 2 files changed, 24 insertions(+), 2 deletions(-) diff --git a/application/account-management/WebApp/routes/login/verify.tsx b/application/account-management/WebApp/routes/login/verify.tsx index 3793aca24..bec0736d8 100644 --- a/application/account-management/WebApp/routes/login/verify.tsx +++ b/application/account-management/WebApp/routes/login/verify.tsx @@ -68,6 +68,8 @@ export const Route = createFileRoute("/login/verify")({ } }); +let autoSubmitCode = true; + export function CompleteLoginForm() { const loginState = getLoginState(); const { loginId, emailConfirmationId, email, expireAt } = loginState; @@ -150,7 +152,16 @@ export function CompleteLoginForm() { length={6} autoFocus={true} ariaLabel={t`Login verification code`} - onValueChange={(_, isComplete) => setIsOneTimeCodeComplete(isComplete)} + onValueChange={(_, isComplete) => { + setIsOneTimeCodeComplete(isComplete); + + if (isComplete && autoSubmitCode) { + autoSubmitCode = false; // Only auto-submit once + setTimeout(() => { + document.querySelector("form")?.requestSubmit(); + }, 10); + } + }} />
{!isExpired ? ( diff --git a/application/account-management/WebApp/routes/signup/verify.tsx b/application/account-management/WebApp/routes/signup/verify.tsx index 1db77892e..4c3c5028d 100644 --- a/application/account-management/WebApp/routes/signup/verify.tsx +++ b/application/account-management/WebApp/routes/signup/verify.tsx @@ -62,6 +62,8 @@ export const Route = createFileRoute("/signup/verify")({ } }); +let autoSubmitCode = true; + export function CompleteSignupForm() { const signupState = getSignupState(); const { email, emailConfirmationId, expireAt } = signupState; @@ -146,7 +148,16 @@ export function CompleteSignupForm() { length={6} autoFocus={true} ariaLabel={t`Signup verification code`} - onValueChange={(_, isComplete) => setIsOneTimeCodeComplete(isComplete)} + onValueChange={(_, isComplete) => { + setIsOneTimeCodeComplete(isComplete); + + if (isComplete && autoSubmitCode) { + autoSubmitCode = false; // Only auto-submit once + setTimeout(() => { + document.querySelector("form")?.requestSubmit(); + }, 10); + } + }} />
{!isExpired ? ( From f71c6f369b8727f94f53812a4367deb82beea0d6 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Thu, 12 Jun 2025 13:34:13 +0200 Subject: [PATCH 070/171] Streamline resend and code expiration in signup flow --- .../Commands/ResendEmailConfirmationCode.cs | 5 - .../routes/signup/-shared/signupState.ts | 52 +++- .../WebApp/routes/signup/expired.tsx | 43 ---- .../WebApp/routes/signup/index.tsx | 6 +- .../WebApp/routes/signup/verify.tsx | 238 ++++++++++++------ .../shared/translations/locale/da-DK.po | 19 +- .../shared/translations/locale/en-US.po | 15 +- .../shared/translations/locale/nl-NL.po | 19 +- 8 files changed, 252 insertions(+), 145 deletions(-) delete mode 100644 application/account-management/WebApp/routes/signup/expired.tsx diff --git a/application/account-management/Core/Features/EmailConfirmations/Commands/ResendEmailConfirmationCode.cs b/application/account-management/Core/Features/EmailConfirmations/Commands/ResendEmailConfirmationCode.cs index 02684c4ac..94f395f6b 100644 --- a/application/account-management/Core/Features/EmailConfirmations/Commands/ResendEmailConfirmationCode.cs +++ b/application/account-management/Core/Features/EmailConfirmations/Commands/ResendEmailConfirmationCode.cs @@ -37,11 +37,6 @@ public async Task> Handle(ResendEmai return Result.BadRequest($"The email confirmation with id {emailConfirmation.Id} has already been completed."); } - if (emailConfirmation.ModifiedAt > TimeProvider.System.GetUtcNow().AddSeconds(-30)) - { - return Result.BadRequest("You must wait at least 30 seconds before requesting a new code."); - } - if (emailConfirmation.ResendCount >= EmailConfirmation.MaxResends) { events.CollectEvent(new EmailConfirmationResendBlocked(emailConfirmation.Id, emailConfirmation.Type, emailConfirmation.RetryCount)); diff --git a/application/account-management/WebApp/routes/signup/-shared/signupState.ts b/application/account-management/WebApp/routes/signup/-shared/signupState.ts index 4b556a2bc..7971c769c 100644 --- a/application/account-management/WebApp/routes/signup/-shared/signupState.ts +++ b/application/account-management/WebApp/routes/signup/-shared/signupState.ts @@ -4,12 +4,56 @@ interface SignupState { emailConfirmationId: Schemas["EmailConfirmationId"]; email: string; expireAt: Date; + codeCount: number; + hasRequestedNewCode: boolean; + autoSubmitCode: boolean; + lastSubmittedCode?: string; + currentOtpValue?: string; + validForSeconds?: number; } let currentSignupState: SignupState | undefined; -export function setSignupState(newSignup: SignupState): void { - currentSignupState = newSignup; +export function setSignupState(newSignup: Partial): void { + if (!currentSignupState) { + currentSignupState = { + ...(newSignup as SignupState), + codeCount: 1, // First code + hasRequestedNewCode: false, + autoSubmitCode: true, // Default to auto-submit + lastSubmittedCode: "", // Initialize with empty string + currentOtpValue: "" // Initialize with empty string + }; + } else { + currentSignupState = { + ...currentSignupState, + ...newSignup + }; + } +} + +export function incrementCodeCount(): void { + if (currentSignupState) { + currentSignupState.codeCount += 1; + } +} + +export function setHasRequestedNewCode(value: boolean): void { + if (currentSignupState) { + currentSignupState.hasRequestedNewCode = value; + } +} + +export function setAutoSubmitCode(value: boolean): void { + if (currentSignupState) { + currentSignupState.autoSubmitCode = value; + } +} + +export function setLastSubmittedCode(code: string): void { + if (currentSignupState) { + currentSignupState.lastSubmittedCode = code; + } } export function clearSignupState(): void { @@ -20,6 +64,6 @@ export function hasSignupState(): boolean { return currentSignupState != null; } -export function getSignupState() { - return currentSignupState as SignupState; +export function getSignupState(): Partial { + return currentSignupState || { email: "", codeCount: 0, hasRequestedNewCode: false, autoSubmitCode: true }; } diff --git a/application/account-management/WebApp/routes/signup/expired.tsx b/application/account-management/WebApp/routes/signup/expired.tsx deleted file mode 100644 index e086e1a8f..000000000 --- a/application/account-management/WebApp/routes/signup/expired.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { ErrorMessage } from "@/shared/components/ErrorMessage"; -import { HorizontalHeroLayout } from "@/shared/layouts/HorizontalHeroLayout"; -import { Trans } from "@lingui/react/macro"; -import { signUpPath } from "@repo/infrastructure/auth/constants"; -import { Content, Heading, IllustratedMessage } from "@repo/ui/components/IllustratedMessage"; -import { Link } from "@repo/ui/components/Link"; -import Timeout from "@spectrum-icons/illustrations/Timeout"; -import { createFileRoute } from "@tanstack/react-router"; -import { getSignupState } from "./-shared/signupState"; - -export const Route = createFileRoute("/signup/expired")({ - component: () => ( - - - - ), - errorComponent: (props) => ( - - - - ) -}); - -export function VerificationCodeExpiredMessage() { - const { emailConfirmationId } = getSignupState(); - - return ( - - - - Error: Verification code has expired - - - - The verification code you are trying to use has expired for Email Confirmation ID: {emailConfirmationId} - - - - Try again - - - ); -} diff --git a/application/account-management/WebApp/routes/signup/index.tsx b/application/account-management/WebApp/routes/signup/index.tsx index 07566dba0..7b25dc0d7 100644 --- a/application/account-management/WebApp/routes/signup/index.tsx +++ b/application/account-management/WebApp/routes/signup/index.tsx @@ -17,7 +17,7 @@ import { mutationSubmitter } from "@repo/ui/forms/mutationSubmitter"; import { Navigate, createFileRoute } from "@tanstack/react-router"; import { DotIcon } from "lucide-react"; import { useEffect, useState } from "react"; -import { clearSignupState, setSignupState } from "./-shared/signupState"; +import { clearSignupState, getSignupState, setSignupState } from "./-shared/signupState"; export const Route = createFileRoute("/signup/")({ component: function SignupRoute() { @@ -41,7 +41,9 @@ export const Route = createFileRoute("/signup/")({ }); export function StartSignupForm() { - const [email, setEmail] = useState(""); + // Get email from signup state if available (for prefill when returning from verify) + const { email: savedEmail } = getSignupState(); + const [email, setEmail] = useState(savedEmail || ""); const startSignupMutation = api.useMutation("post", "/api/account-management/signups/start"); diff --git a/application/account-management/WebApp/routes/signup/verify.tsx b/application/account-management/WebApp/routes/signup/verify.tsx index 4c3c5028d..2442c5099 100644 --- a/application/account-management/WebApp/routes/signup/verify.tsx +++ b/application/account-management/WebApp/routes/signup/verify.tsx @@ -5,7 +5,7 @@ import { HorizontalHeroLayout } from "@/shared/layouts/HorizontalHeroLayout"; import { api } from "@/shared/lib/api/client"; import { t } from "@lingui/core/macro"; import { Trans } from "@lingui/react/macro"; -import { loggedInPath, signedUpPath } from "@repo/infrastructure/auth/constants"; +import { loggedInPath } from "@repo/infrastructure/auth/constants"; import { useIsAuthenticated } from "@repo/infrastructure/auth/hooks"; import { preferredLocaleKey } from "@repo/infrastructure/translations/constants"; import { Button } from "@repo/ui/components/Button"; @@ -15,16 +15,21 @@ import { Link } from "@repo/ui/components/Link"; import { OneTimeCodeInput, type OneTimeCodeInputRef } from "@repo/ui/components/OneTimeCodeInput"; import { toastQueue } from "@repo/ui/components/Toast"; import { mutationSubmitter } from "@repo/ui/forms/mutationSubmitter"; -import { useExpirationTimeout } from "@repo/ui/hooks/useExpiration"; import { createFileRoute, useNavigate } from "@tanstack/react-router"; -import { useEffect, useRef, useState } from "react"; -import { clearSignupState, getSignupState, hasSignupState, setSignupState } from "./-shared/signupState"; +import { useCallback, useEffect, useRef, useState } from "react"; + +import { + clearSignupState, + getSignupState, + hasSignupState, + setLastSubmittedCode, + setSignupState +} from "./-shared/signupState"; export const Route = createFileRoute("/signup/verify")({ component: function SignupVerifyRoute() { const navigate = useNavigate(); const isAuthenticated = useIsAuthenticated(); - const [hasShownToast, setHasShownToast] = useState(false); useEffect(() => { if (isAuthenticated) { @@ -32,16 +37,10 @@ export const Route = createFileRoute("/signup/verify")({ return; } - if (!hasSignupState() && !hasShownToast) { - navigate({ to: "/signup" }); - toastQueue.add({ - title: t`No active signup session`, - description: t`Please start the signup process again.`, - variant: "warning" - }); - setHasShownToast(true); + if (!hasSignupState()) { + navigate({ to: "/signup", replace: true }); } - }, [isAuthenticated, navigate, hasShownToast]); + }, [isAuthenticated, navigate]); if (isAuthenticated || !hasSignupState()) { return null; @@ -53,74 +52,137 @@ export const Route = createFileRoute("/signup/verify")({ ); }, - errorComponent: (props) => { - return ( - - - - ); - } + errorComponent: (props) => ( + + + + ) }); -let autoSubmitCode = true; +function useCountdown(expireAt: Date) { + const [secondsRemaining, setSecondsRemaining] = useState(() => + Math.max(0, Math.ceil((expireAt.getTime() - Date.now()) / 1000)) + ); + + // Reset the countdown when expireAt changes + useEffect(() => { + setSecondsRemaining(Math.max(0, Math.ceil((expireAt.getTime() - Date.now()) / 1000))); + }, [expireAt]); -export function CompleteSignupForm() { - const signupState = getSignupState(); - const { email, emailConfirmationId, expireAt } = signupState; - const { expiresInString, isExpired } = useExpirationTimeout(expireAt); + useEffect(() => { + const intervalId = setInterval(() => { + setSecondsRemaining((prev) => { + return Math.max(0, prev - 1); + }); + }, 1000); + + return () => clearInterval(intervalId); + }, []); - const oneTimeCodeInputRef = useRef(null); + return secondsRemaining; +} + +export function CompleteSignupForm() { + const initialState = getSignupState(); + const { email = "", emailConfirmationId = "" } = initialState; + const initialExpireAt = initialState.expireAt ? new Date(initialState.expireAt) : new Date(); + const [expireAt, setExpireAt] = useState(initialExpireAt); + const secondsRemaining = useCountdown(expireAt); + const isExpired = secondsRemaining === 0; + const oneTimeCodeInputRef = useRef(null); const [isOneTimeCodeComplete, setIsOneTimeCodeComplete] = useState(false); + const [showRequestLink, setShowRequestLink] = useState(false); + const [hasRequestedNewCode, setHasRequestedNewCode] = useState(false); + const [isRateLimited, setIsRateLimited] = useState(false); + const [autoSubmitCode, setAutoSubmitCode] = useState(true); + + useEffect(() => { + if (!isExpired && !showRequestLink && !hasRequestedNewCode) { + const timeoutId = setTimeout(() => { + setShowRequestLink(true); + }, 30000); + return () => clearTimeout(timeoutId); + } + }, [isExpired, showRequestLink, hasRequestedNewCode]); const completeSignupMutation = api.useMutation( "post", "/api/account-management/signups/{emailConfirmationId}/complete" ); + const resendSignupCodeMutation = api.useMutation( + "post", + "/api/account-management/signups/{emailConfirmationId}/resend-code" + ); + useEffect(() => { if (completeSignupMutation.isSuccess) { clearSignupState(); - window.location.href = signedUpPath; + window.location.href = loggedInPath; } }, [completeSignupMutation.isSuccess]); - const resendSignupCodeMutation = api.useMutation( - "post", - "/api/account-management/signups/{emailConfirmationId}/resend-code" - ); + useEffect(() => { + if (completeSignupMutation.isError) { + const statusCode = completeSignupMutation.error?.status; + if (statusCode === 403) { + setIsRateLimited(true); + setExpireAt(new Date(0)); // Force expiration + } else { + setTimeout(() => { + if (oneTimeCodeInputRef.current) { + oneTimeCodeInputRef.current.focus?.(); + } + }, 100); + } + } + }, [completeSignupMutation.isError, completeSignupMutation.error]); + + const resetAfterResend = useCallback((validForSeconds: number) => { + const newExpireAt = new Date(); + newExpireAt.setSeconds(newExpireAt.getSeconds() + validForSeconds); + setExpireAt(newExpireAt); + getSignupState().expireAt = newExpireAt; + + setIsOneTimeCodeComplete(false); + setShowRequestLink(false); + setIsRateLimited(false); + + setTimeout(() => { + oneTimeCodeInputRef.current?.reset?.(); + oneTimeCodeInputRef.current?.focus?.(); + }, 100); + }, []); useEffect(() => { if (resendSignupCodeMutation.isSuccess && resendSignupCodeMutation.data) { - setSignupState({ - ...signupState, - expireAt: new Date(Date.now() + resendSignupCodeMutation.data.validForSeconds * 1000) - }); + resetAfterResend(resendSignupCodeMutation.data.validForSeconds); + setHasRequestedNewCode(true); toastQueue.add({ title: t`Verification code sent`, description: t`A new verification code has been sent to your email.`, - variant: "success" + variant: "success", + duration: 3000 }); } - }, [resendSignupCodeMutation.isSuccess, resendSignupCodeMutation.data, signupState]); + }, [resendSignupCodeMutation.isSuccess, resendSignupCodeMutation.data, resetAfterResend]); - useEffect(() => { - if (isExpired) { - clearSignupState(); - window.location.href = "/signup/expired"; - } - }, [isExpired]); - - // Focus first input after validation error - useEffect(() => { - if (completeSignupMutation.error) { - oneTimeCodeInputRef.current?.focus(); - } - }, [completeSignupMutation.error]); + const expiresInString = `${Math.floor(secondsRemaining / 60)}:${String(secondsRemaining % 60).padStart(2, "0")}`; return (
{ + const formData = new FormData(event.currentTarget); + const oneTimePassword = formData.get("oneTimePassword") as string; + if (oneTimePassword.length === 6) { + setLastSubmittedCode(oneTimePassword); + } + const handler = mutationSubmitter(completeSignupMutation, { + path: { emailConfirmationId: emailConfirmationId } + }); + return handler(event); + }} validationErrors={completeSignupMutation.error?.errors} validationBehavior="aria" > @@ -129,7 +191,7 @@ export function CompleteSignupForm() {
- {t`Logo`} + {t`Logo`}

@@ -148,11 +210,14 @@ export function CompleteSignupForm() { length={6} autoFocus={true} ariaLabel={t`Signup verification code`} - onValueChange={(_, isComplete) => { + disabled={isExpired || resendSignupCodeMutation.isPending} + onValueChange={(value: string, isComplete: boolean) => { setIsOneTimeCodeComplete(isComplete); + getSignupState().currentOtpValue = value; + if (isComplete && autoSubmitCode) { - autoSubmitCode = false; // Only auto-submit once + setAutoSubmitCode(false); setTimeout(() => { document.querySelector("form")?.requestSubmit(); }, 10); @@ -173,7 +238,11 @@ export function CompleteSignupForm() { type="submit" className="mt-4 w-full text-center" isDisabled={ - completeSignupMutation.isPending || resendSignupCodeMutation.isPending || !isOneTimeCodeComplete + !isOneTimeCodeComplete || + isExpired || + completeSignupMutation.isPending || + resendSignupCodeMutation.isPending || + getSignupState()?.currentOtpValue === getSignupState()?.lastSubmittedCode } > {completeSignupMutation.isPending ? Verifying... : Verify} @@ -181,30 +250,43 @@ export function CompleteSignupForm() {

-
-
-
- - - - ({expiresInString}) + + + )}
-

- Can't find your code? Check your spam folder. -

- {t`Powered + { + const signupState = getSignupState(); + clearSignupState(); + setSignupState({ email: signupState?.email ?? "" }); + }} + > + Back to signup + + {t`Powered
); diff --git a/application/account-management/WebApp/shared/translations/locale/da-DK.po b/application/account-management/WebApp/shared/translations/locale/da-DK.po index eca582a68..8b042518b 100644 --- a/application/account-management/WebApp/shared/translations/locale/da-DK.po +++ b/application/account-management/WebApp/shared/translations/locale/da-DK.po @@ -75,9 +75,15 @@ msgstr "Er du sikker på, at du vil slette <0>{0} brugere?" msgid "Are you sure you want to delete <0>{userDisplayName}?" msgstr "Er du sikker på, at du vil slette <0>{userDisplayName}?" +msgid "Back to signup" +msgstr "Tilbage til tilmelding" + msgid "By continuing, you accept our policies" msgstr "Ved at fortsætte accepterer du vores vilkår" +msgid "Can't find your code?" +msgstr "Kan du ikke finde din kode?" + msgid "Can't find your code? Check your spam folder." msgstr "Kan du ikke finde din kode? Tjek din spammappe." @@ -96,6 +102,9 @@ msgstr "Skift rolle" msgid "Change user role" msgstr "Skift brugerrolle" +msgid "Check your spam folder." +msgstr "Tjek din spammappe." + msgid "Clear" msgstr "Ryd" @@ -254,7 +263,7 @@ msgid "Next" msgstr "Næste" msgid "No active signup session" -msgstr "Ingen aktiv tilmeldingssession" +msgstr "" msgid "OK" msgstr "OK" @@ -275,7 +284,7 @@ msgid "Please select a JPEG, PNG, GIF, or WebP image." msgstr "Vælg et JPEG-, PNG-, GIF- eller WebP-billede." msgid "Please start the signup process again." -msgstr "Start venligst tilmeldingsprocessen igen." +msgstr "" msgid "Powered by" msgstr "Drevet af" @@ -301,6 +310,9 @@ msgstr "Region" msgid "Remove profile picture" msgstr "Fjern profilbillede" +msgid "Request a new code" +msgstr "Anmod om en ny kode" + msgid "Role" msgstr "Rolle" @@ -356,9 +368,6 @@ msgstr "System" msgid "Terms of use" msgstr "Brugsvilkår" -msgid "The verification code you are trying to use has expired for Email Confirmation ID: {emailConfirmationId}" -msgstr "Bekræftelseskoden, du forsøger at bruge, er udløbet for e-mailbekræftelses-ID: {emailConfirmationId}" - msgid "The verification code you are trying to use has expired for Login ID: {loginId}" msgstr "Bekræftelseskoden, du forsøger at bruge, er udløbet for login-ID: {loginId}" diff --git a/application/account-management/WebApp/shared/translations/locale/en-US.po b/application/account-management/WebApp/shared/translations/locale/en-US.po index 1de6f1734..b0b6c8166 100644 --- a/application/account-management/WebApp/shared/translations/locale/en-US.po +++ b/application/account-management/WebApp/shared/translations/locale/en-US.po @@ -75,9 +75,15 @@ msgstr "Are you sure you want to delete <0>{0} users?" msgid "Are you sure you want to delete <0>{userDisplayName}?" msgstr "Are you sure you want to delete <0>{userDisplayName}?" +msgid "Back to signup" +msgstr "Back to signup" + msgid "By continuing, you accept our policies" msgstr "By continuing, you accept our policies" +msgid "Can't find your code?" +msgstr "Can't find your code?" + msgid "Can't find your code? Check your spam folder." msgstr "Can't find your code? Check your spam folder." @@ -96,6 +102,9 @@ msgstr "Change role" msgid "Change user role" msgstr "Change user role" +msgid "Check your spam folder." +msgstr "Check your spam folder." + msgid "Clear" msgstr "Clear" @@ -301,6 +310,9 @@ msgstr "Region" msgid "Remove profile picture" msgstr "Remove profile picture" +msgid "Request a new code" +msgstr "Request a new code" + msgid "Role" msgstr "Role" @@ -356,9 +368,6 @@ msgstr "System" msgid "Terms of use" msgstr "Terms of use" -msgid "The verification code you are trying to use has expired for Email Confirmation ID: {emailConfirmationId}" -msgstr "The verification code you are trying to use has expired for Email Confirmation ID: {emailConfirmationId}" - msgid "The verification code you are trying to use has expired for Login ID: {loginId}" msgstr "The verification code you are trying to use has expired for Login ID: {loginId}" diff --git a/application/account-management/WebApp/shared/translations/locale/nl-NL.po b/application/account-management/WebApp/shared/translations/locale/nl-NL.po index 04ed07ce0..5aef112da 100644 --- a/application/account-management/WebApp/shared/translations/locale/nl-NL.po +++ b/application/account-management/WebApp/shared/translations/locale/nl-NL.po @@ -75,9 +75,15 @@ msgstr "Weet je zeker dat je <0>{0} gebruikers wilt verwijderen?" msgid "Are you sure you want to delete <0>{userDisplayName}?" msgstr "Weet je zeker dat je <0>{userDisplayName} wilt verwijderen?" +msgid "Back to signup" +msgstr "Terug naar aanmelding" + msgid "By continuing, you accept our policies" msgstr "Door verder te gaan, accepteer je onze voorwaarden" +msgid "Can't find your code?" +msgstr "Kun je je code niet vinden?" + msgid "Can't find your code? Check your spam folder." msgstr "Kun je je code niet vinden? Controleer je spammap." @@ -96,6 +102,9 @@ msgstr "Rol wijzigen" msgid "Change user role" msgstr "Gebruikersrol wijzigen" +msgid "Check your spam folder." +msgstr "Controleer je spammap." + msgid "Clear" msgstr "Wissen" @@ -254,7 +263,7 @@ msgid "Next" msgstr "Volgende" msgid "No active signup session" -msgstr "Geen actieve registratiesessie" +msgstr "" msgid "OK" msgstr "OK" @@ -275,7 +284,7 @@ msgid "Please select a JPEG, PNG, GIF, or WebP image." msgstr "Selecteer een JPEG-, PNG-, GIF- of WebP-afbeelding." msgid "Please start the signup process again." -msgstr "Begin het registratieproces opnieuw." +msgstr "" msgid "Powered by" msgstr "Mogelijk gemaakt door" @@ -301,6 +310,9 @@ msgstr "Regio" msgid "Remove profile picture" msgstr "Profielfoto verwijderen" +msgid "Request a new code" +msgstr "Vraag een nieuwe code aan" + msgid "Role" msgstr "Rol" @@ -356,9 +368,6 @@ msgstr "Systeem" msgid "Terms of use" msgstr "Gebruiksvoorwaarden" -msgid "The verification code you are trying to use has expired for Email Confirmation ID: {emailConfirmationId}" -msgstr "De verificatiecode die je probeert te gebruiken is verlopen voor E-mailbevestiging ID: {emailConfirmationId}" - msgid "The verification code you are trying to use has expired for Login ID: {loginId}" msgstr "De verificatiecode die je probeert te gebruiken is verlopen voor Login ID: {loginId}" From 8f0e1276f598daffb1a4543d2c2d0e8eec580943 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Fri, 13 Jun 2025 10:53:43 +0200 Subject: [PATCH 071/171] Streamline resend and code expiration in login flow --- .../WebApp/routes/login/-shared/loginState.ts | 52 +++- .../WebApp/routes/login/expired.tsx | 41 --- .../WebApp/routes/login/index.tsx | 6 +- .../WebApp/routes/login/verify.tsx | 239 ++++++++++++------ .../shared/translations/locale/da-DK.po | 21 +- .../shared/translations/locale/en-US.po | 21 +- .../shared/translations/locale/nl-NL.po | 21 +- 7 files changed, 221 insertions(+), 180 deletions(-) delete mode 100644 application/account-management/WebApp/routes/login/expired.tsx diff --git a/application/account-management/WebApp/routes/login/-shared/loginState.ts b/application/account-management/WebApp/routes/login/-shared/loginState.ts index 8edd28fed..9004e2e18 100644 --- a/application/account-management/WebApp/routes/login/-shared/loginState.ts +++ b/application/account-management/WebApp/routes/login/-shared/loginState.ts @@ -5,12 +5,56 @@ interface LoginState { emailConfirmationId: Schemas["EmailConfirmationId"]; email: string; expireAt: Date; + codeCount: number; + hasRequestedNewCode: boolean; + autoSubmitCode: boolean; + lastSubmittedCode?: string; + currentOtpValue?: string; + validForSeconds?: number; } let currentLoginState: LoginState | undefined; -export function setLoginState(newLogin: LoginState): void { - currentLoginState = newLogin; +export function setLoginState(newLogin: Partial): void { + if (!currentLoginState) { + currentLoginState = { + ...(newLogin as LoginState), + codeCount: 1, // First code + hasRequestedNewCode: false, + autoSubmitCode: true, // Default to auto-submit + lastSubmittedCode: "", // Initialize with empty string + currentOtpValue: "" // Initialize with empty string + }; + } else { + currentLoginState = { + ...currentLoginState, + ...newLogin + }; + } +} + +export function incrementCodeCount(): void { + if (currentLoginState) { + currentLoginState.codeCount += 1; + } +} + +export function setHasRequestedNewCode(value: boolean): void { + if (currentLoginState) { + currentLoginState.hasRequestedNewCode = value; + } +} + +export function setAutoSubmitCode(value: boolean): void { + if (currentLoginState) { + currentLoginState.autoSubmitCode = value; + } +} + +export function setLastSubmittedCode(code: string): void { + if (currentLoginState) { + currentLoginState.lastSubmittedCode = code; + } } export function clearLoginState(): void { @@ -21,6 +65,6 @@ export function hasLoginState(): boolean { return currentLoginState != null; } -export function getLoginState() { - return currentLoginState as LoginState; +export function getLoginState(): Partial { + return currentLoginState || { email: "", codeCount: 0, hasRequestedNewCode: false, autoSubmitCode: true }; } diff --git a/application/account-management/WebApp/routes/login/expired.tsx b/application/account-management/WebApp/routes/login/expired.tsx deleted file mode 100644 index 769442051..000000000 --- a/application/account-management/WebApp/routes/login/expired.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { ErrorMessage } from "@/shared/components/ErrorMessage"; -import { HorizontalHeroLayout } from "@/shared/layouts/HorizontalHeroLayout"; -import { Trans } from "@lingui/react/macro"; -import { loginPath } from "@repo/infrastructure/auth/constants"; -import { Content, Heading, IllustratedMessage } from "@repo/ui/components/IllustratedMessage"; -import { Link } from "@repo/ui/components/Link"; -import Timeout from "@spectrum-icons/illustrations/Timeout"; -import { createFileRoute } from "@tanstack/react-router"; -import { getLoginState } from "./-shared/loginState"; - -export const Route = createFileRoute("/login/expired")({ - component: () => ( - - - - ), - errorComponent: (props) => ( - - - - ) -}); - -export function VerificationCodeExpiredMessage() { - const { loginId } = getLoginState(); - - return ( - - - - Error: Verification code has expired - - - The verification code you are trying to use has expired for Login ID: {loginId} - - - Try again - - - ); -} diff --git a/application/account-management/WebApp/routes/login/index.tsx b/application/account-management/WebApp/routes/login/index.tsx index 5205c5d26..16e5c96f1 100644 --- a/application/account-management/WebApp/routes/login/index.tsx +++ b/application/account-management/WebApp/routes/login/index.tsx @@ -15,7 +15,7 @@ import { TextField } from "@repo/ui/components/TextField"; import { mutationSubmitter } from "@repo/ui/forms/mutationSubmitter"; import { Navigate, createFileRoute } from "@tanstack/react-router"; import { useEffect, useState } from "react"; -import { clearLoginState, setLoginState } from "./-shared/loginState"; +import { clearLoginState, getLoginState, setLoginState } from "./-shared/loginState"; export const Route = createFileRoute("/login/")({ validateSearch: (search) => { @@ -46,7 +46,9 @@ export const Route = createFileRoute("/login/")({ }); export function LoginForm() { - const [email, setEmail] = useState(""); + // Get email from login state if available (for prefill when returning from verify) + const { email: savedEmail } = getLoginState(); + const [email, setEmail] = useState(savedEmail || ""); const { returnPath } = Route.useSearch(); const startLoginMutation = api.useMutation("post", "/api/account-management/authentication/login/start"); diff --git a/application/account-management/WebApp/routes/login/verify.tsx b/application/account-management/WebApp/routes/login/verify.tsx index bec0736d8..61ce86047 100644 --- a/application/account-management/WebApp/routes/login/verify.tsx +++ b/application/account-management/WebApp/routes/login/verify.tsx @@ -14,10 +14,16 @@ import { Link } from "@repo/ui/components/Link"; import { OneTimeCodeInput, type OneTimeCodeInputRef } from "@repo/ui/components/OneTimeCodeInput"; import { toastQueue } from "@repo/ui/components/Toast"; import { mutationSubmitter } from "@repo/ui/forms/mutationSubmitter"; -import { useExpirationTimeout } from "@repo/ui/hooks/useExpiration"; import { createFileRoute, useNavigate } from "@tanstack/react-router"; -import { useEffect, useRef, useState } from "react"; -import { clearLoginState, getLoginState, hasLoginState, setLoginState } from "./-shared/loginState"; +import { useCallback, useEffect, useRef, useState } from "react"; + +import { + clearLoginState, + getLoginState, + hasLoginState, + setLastSubmittedCode, + setLoginState +} from "./-shared/loginState"; export const Route = createFileRoute("/login/verify")({ validateSearch: (search) => { @@ -30,7 +36,6 @@ export const Route = createFileRoute("/login/verify")({ component: function LoginVerifyRoute() { const navigate = useNavigate(); const isAuthenticated = useIsAuthenticated(); - const [hasShownToast, setHasShownToast] = useState(false); useEffect(() => { if (isAuthenticated) { @@ -38,18 +43,12 @@ export const Route = createFileRoute("/login/verify")({ return; } - if (!hasLoginState() && !hasShownToast) { - navigate({ to: "/login", search: { returnPath: undefined } }); - toastQueue.add({ - title: "No active login session", - description: "Please start the login process again.", - variant: "warning" - }); - setHasShownToast(true); + if (!hasLoginState()) { + navigate({ to: "/login", search: { returnPath: "" }, replace: true }); } - }, [isAuthenticated, navigate, hasShownToast]); + }, [isAuthenticated, navigate]); - if (!hasLoginState()) { + if (isAuthenticated || !hasLoginState()) { return null; } @@ -59,28 +58,67 @@ export const Route = createFileRoute("/login/verify")({ ); }, - errorComponent: (props) => { - return ( - - - - ); - } + errorComponent: (props) => ( + + + + ) }); -let autoSubmitCode = true; +function useCountdown(expireAt: Date) { + const [secondsRemaining, setSecondsRemaining] = useState(() => + Math.max(0, Math.ceil((expireAt.getTime() - Date.now()) / 1000)) + ); + + // Reset the countdown when expireAt changes + useEffect(() => { + setSecondsRemaining(Math.max(0, Math.ceil((expireAt.getTime() - Date.now()) / 1000))); + }, [expireAt]); + + useEffect(() => { + const intervalId = setInterval(() => { + setSecondsRemaining((prev) => { + return Math.max(0, prev - 1); + }); + }, 1000); + + return () => clearInterval(intervalId); + }, []); + + return secondsRemaining; +} export function CompleteLoginForm() { - const loginState = getLoginState(); - const { loginId, emailConfirmationId, email, expireAt } = loginState; - const { expiresInString, isExpired } = useExpirationTimeout(expireAt); + const initialState = getLoginState(); + const { email = "", emailConfirmationId = "" } = initialState; + const initialExpireAt = initialState.expireAt ? new Date(initialState.expireAt) : new Date(); + const [expireAt, setExpireAt] = useState(initialExpireAt); + const secondsRemaining = useCountdown(expireAt); + const isExpired = secondsRemaining === 0; + const oneTimeCodeInputRef = useRef(null); + const [isOneTimeCodeComplete, setIsOneTimeCodeComplete] = useState(false); + const [showRequestLink, setShowRequestLink] = useState(false); + const [hasRequestedNewCode, setHasRequestedNewCode] = useState(false); + const [isRateLimited, setIsRateLimited] = useState(false); + const [autoSubmitCode, setAutoSubmitCode] = useState(true); const { returnPath } = Route.useSearch(); - const oneTimeCodeInputRef = useRef(null); - const [isOneTimeCodeComplete, setIsOneTimeCodeComplete] = useState(false); + useEffect(() => { + if (!isExpired && !showRequestLink && !hasRequestedNewCode) { + const timeoutId = setTimeout(() => { + setShowRequestLink(true); + }, 30000); + return () => clearTimeout(timeoutId); + } + }, [isExpired, showRequestLink, hasRequestedNewCode]); const completeLoginMutation = api.useMutation("post", "/api/account-management/authentication/login/{id}/complete"); + const resendLoginCodeMutation = api.useMutation( + "post", + "/api/account-management/authentication/login/{emailConfirmationId}/resend-code" + ); + useEffect(() => { if (completeLoginMutation.isSuccess) { clearLoginState(); @@ -88,52 +126,74 @@ export function CompleteLoginForm() { } }, [completeLoginMutation.isSuccess, returnPath]); - const resendLoginCodeMutation = api.useMutation( - "post", - "/api/account-management/authentication/login/{emailConfirmationId}/resend-code" - ); + useEffect(() => { + if (completeLoginMutation.isError) { + const statusCode = completeLoginMutation.error?.status; + if (statusCode === 403) { + setIsRateLimited(true); + setExpireAt(new Date(0)); // Force expiration + } else { + setTimeout(() => { + if (oneTimeCodeInputRef.current) { + oneTimeCodeInputRef.current.focus?.(); + } + }, 100); + } + } + }, [completeLoginMutation.isError, completeLoginMutation.error]); + + const resetAfterResend = useCallback((validForSeconds: number) => { + const newExpireAt = new Date(); + newExpireAt.setSeconds(newExpireAt.getSeconds() + validForSeconds); + setExpireAt(newExpireAt); + getLoginState().expireAt = newExpireAt; + + setIsOneTimeCodeComplete(false); + setShowRequestLink(false); + setIsRateLimited(false); + + setTimeout(() => { + oneTimeCodeInputRef.current?.reset?.(); + oneTimeCodeInputRef.current?.focus?.(); + }, 100); + }, []); useEffect(() => { if (resendLoginCodeMutation.isSuccess && resendLoginCodeMutation.data) { - setLoginState({ - ...loginState, - expireAt: new Date(Date.now() + resendLoginCodeMutation.data.validForSeconds * 1000) - }); + resetAfterResend(resendLoginCodeMutation.data.validForSeconds); + setHasRequestedNewCode(true); toastQueue.add({ title: t`Verification code sent`, description: t`A new verification code has been sent to your email.`, - variant: "success" + variant: "success", + duration: 3000 }); } - }, [resendLoginCodeMutation.isSuccess, resendLoginCodeMutation.data, loginState]); + }, [resendLoginCodeMutation.isSuccess, resendLoginCodeMutation.data, resetAfterResend]); - useEffect(() => { - if (isExpired) { - clearLoginState(); - window.location.href = "/login/expired"; - } - }, [isExpired]); - - // Focus first input after validation error - useEffect(() => { - if (completeLoginMutation.error) { - oneTimeCodeInputRef.current?.focus(); - } - }, [completeLoginMutation.error]); + const expiresInString = `${Math.floor(secondsRemaining / 60)}:${String(secondsRemaining % 60).padStart(2, "0")}`; return (
{ + const formData = new FormData(event.currentTarget); + const oneTimePassword = formData.get("oneTimePassword") as string; + if (oneTimePassword.length === 6) { + setLastSubmittedCode(oneTimePassword); + } + const handler = mutationSubmitter(completeLoginMutation, { path: { id: getLoginState().loginId ?? "" } }); + return handler(event); + }} validationErrors={completeLoginMutation.error?.errors} validationBehavior="aria" > - +
- {t`Logo`} + {t`Logo`}

@@ -152,11 +212,14 @@ export function CompleteLoginForm() { length={6} autoFocus={true} ariaLabel={t`Login verification code`} - onValueChange={(_, isComplete) => { + disabled={isExpired || resendLoginCodeMutation.isPending} + onValueChange={(value: string, isComplete: boolean) => { setIsOneTimeCodeComplete(isComplete); + getLoginState().currentOtpValue = value; + if (isComplete && autoSubmitCode) { - autoSubmitCode = false; // Only auto-submit once + setAutoSubmitCode(false); setTimeout(() => { document.querySelector("form")?.requestSubmit(); }, 10); @@ -176,38 +239,56 @@ export function CompleteLoginForm() {

-
-
-
- - - - - ({expiresInString}) + + + )}
-

- Can't find your code? Check your spam folder. -

- {t`Powered + { + const loginState = getLoginState(); + clearLoginState(); + setLoginState({ email: loginState?.email ?? "" }); + }} + > + Back to login + + {t`Powered
); diff --git a/application/account-management/WebApp/shared/translations/locale/da-DK.po b/application/account-management/WebApp/shared/translations/locale/da-DK.po index 8b042518b..a8b5f8e72 100644 --- a/application/account-management/WebApp/shared/translations/locale/da-DK.po +++ b/application/account-management/WebApp/shared/translations/locale/da-DK.po @@ -75,6 +75,9 @@ msgstr "Er du sikker på, at du vil slette <0>{0} brugere?" msgid "Are you sure you want to delete <0>{userDisplayName}?" msgstr "Er du sikker på, at du vil slette <0>{userDisplayName}?" +msgid "Back to login" +msgstr "Tilbage til login" + msgid "Back to signup" msgstr "Tilbage til tilmelding" @@ -84,9 +87,6 @@ msgstr "Ved at fortsætte accepterer du vores vilkår" msgid "Can't find your code?" msgstr "Kan du ikke finde din kode?" -msgid "Can't find your code? Check your spam folder." -msgstr "Kan du ikke finde din kode? Tjek din spammappe." - msgid "Cancel" msgstr "Annuller" @@ -145,9 +145,6 @@ msgstr "Slet brugere" msgid "Delete your account and all data. This action is irreversible—proceed with caution." msgstr "Slet din konto og alle data. Denne handling kan ikke fortrydes—fortsæt med forsigtighed." -msgid "Didn't receive the code? Resend" -msgstr "Modtog du ikke koden? Send igen" - msgid "Do you already have an account?" msgstr "Har du allerede en konto?" @@ -181,9 +178,6 @@ msgstr "Indtast din bekræftelseskode" msgid "Error: Something went wrong!" msgstr "Fejl: Noget gik galt!" -msgid "Error: Verification code has expired" -msgstr "Fejl: Bekræftelseskoden er udløbet" - msgid "Europe" msgstr "Europa" @@ -262,9 +256,6 @@ msgstr "Navigation" msgid "Next" msgstr "Næste" -msgid "No active signup session" -msgstr "" - msgid "OK" msgstr "OK" @@ -283,9 +274,6 @@ msgstr "Tjek din e-mail for en bekræftelseskode sendt til <0>{email}" msgid "Please select a JPEG, PNG, GIF, or WebP image." msgstr "Vælg et JPEG-, PNG-, GIF- eller WebP-billede." -msgid "Please start the signup process again." -msgstr "" - msgid "Powered by" msgstr "Drevet af" @@ -368,9 +356,6 @@ msgstr "System" msgid "Terms of use" msgstr "Brugsvilkår" -msgid "The verification code you are trying to use has expired for Login ID: {loginId}" -msgstr "Bekræftelseskoden, du forsøger at bruge, er udløbet for login-ID: {loginId}" - msgid "Theme" msgstr "Tema" diff --git a/application/account-management/WebApp/shared/translations/locale/en-US.po b/application/account-management/WebApp/shared/translations/locale/en-US.po index b0b6c8166..6a611940c 100644 --- a/application/account-management/WebApp/shared/translations/locale/en-US.po +++ b/application/account-management/WebApp/shared/translations/locale/en-US.po @@ -75,6 +75,9 @@ msgstr "Are you sure you want to delete <0>{0} users?" msgid "Are you sure you want to delete <0>{userDisplayName}?" msgstr "Are you sure you want to delete <0>{userDisplayName}?" +msgid "Back to login" +msgstr "Back to login" + msgid "Back to signup" msgstr "Back to signup" @@ -84,9 +87,6 @@ msgstr "By continuing, you accept our policies" msgid "Can't find your code?" msgstr "Can't find your code?" -msgid "Can't find your code? Check your spam folder." -msgstr "Can't find your code? Check your spam folder." - msgid "Cancel" msgstr "Cancel" @@ -145,9 +145,6 @@ msgstr "Delete users" msgid "Delete your account and all data. This action is irreversible—proceed with caution." msgstr "Delete your account and all data. This action is irreversible—proceed with caution." -msgid "Didn't receive the code? Resend" -msgstr "Didn't receive the code? Resend" - msgid "Do you already have an account?" msgstr "Do you already have an account?" @@ -181,9 +178,6 @@ msgstr "Enter your verification code" msgid "Error: Something went wrong!" msgstr "Error: Something went wrong!" -msgid "Error: Verification code has expired" -msgstr "Error: Verification code has expired" - msgid "Europe" msgstr "Europe" @@ -262,9 +256,6 @@ msgstr "Navigation" msgid "Next" msgstr "Next" -msgid "No active signup session" -msgstr "No active signup session" - msgid "OK" msgstr "OK" @@ -283,9 +274,6 @@ msgstr "Please check your email for a verification code sent to <0>{email}" msgid "Please select a JPEG, PNG, GIF, or WebP image." msgstr "Please select a JPEG, PNG, GIF, or WebP image." -msgid "Please start the signup process again." -msgstr "Please start the signup process again." - msgid "Powered by" msgstr "Powered by" @@ -368,9 +356,6 @@ msgstr "System" msgid "Terms of use" msgstr "Terms of use" -msgid "The verification code you are trying to use has expired for Login ID: {loginId}" -msgstr "The verification code you are trying to use has expired for Login ID: {loginId}" - msgid "Theme" msgstr "Theme" diff --git a/application/account-management/WebApp/shared/translations/locale/nl-NL.po b/application/account-management/WebApp/shared/translations/locale/nl-NL.po index 5aef112da..46841433f 100644 --- a/application/account-management/WebApp/shared/translations/locale/nl-NL.po +++ b/application/account-management/WebApp/shared/translations/locale/nl-NL.po @@ -75,6 +75,9 @@ msgstr "Weet je zeker dat je <0>{0} gebruikers wilt verwijderen?" msgid "Are you sure you want to delete <0>{userDisplayName}?" msgstr "Weet je zeker dat je <0>{userDisplayName} wilt verwijderen?" +msgid "Back to login" +msgstr "Terug naar inloggen" + msgid "Back to signup" msgstr "Terug naar aanmelding" @@ -84,9 +87,6 @@ msgstr "Door verder te gaan, accepteer je onze voorwaarden" msgid "Can't find your code?" msgstr "Kun je je code niet vinden?" -msgid "Can't find your code? Check your spam folder." -msgstr "Kun je je code niet vinden? Controleer je spammap." - msgid "Cancel" msgstr "Annuleren" @@ -145,9 +145,6 @@ msgstr "Gebruikers verwijderen" msgid "Delete your account and all data. This action is irreversible—proceed with caution." msgstr "Verwijder je account en alle gegevens. Deze actie is onomkeerbaar—ga zorgvuldig te werk." -msgid "Didn't receive the code? Resend" -msgstr "Code niet ontvangen? Verstuur opnieuw" - msgid "Do you already have an account?" msgstr "Heb je al een account?" @@ -181,9 +178,6 @@ msgstr "Voer je verificatiecode in" msgid "Error: Something went wrong!" msgstr "Fout: Er is iets misgegaan!" -msgid "Error: Verification code has expired" -msgstr "Fout: Verificatiecode is verlopen" - msgid "Europe" msgstr "Europa" @@ -262,9 +256,6 @@ msgstr "Navigatie" msgid "Next" msgstr "Volgende" -msgid "No active signup session" -msgstr "" - msgid "OK" msgstr "OK" @@ -283,9 +274,6 @@ msgstr "Controleer je e-mail voor een verificatiecode verzonden naar <0>{email}< msgid "Please select a JPEG, PNG, GIF, or WebP image." msgstr "Selecteer een JPEG-, PNG-, GIF- of WebP-afbeelding." -msgid "Please start the signup process again." -msgstr "" - msgid "Powered by" msgstr "Mogelijk gemaakt door" @@ -368,9 +356,6 @@ msgstr "Systeem" msgid "Terms of use" msgstr "Gebruiksvoorwaarden" -msgid "The verification code you are trying to use has expired for Login ID: {loginId}" -msgstr "De verificatiecode die je probeert te gebruiken is verlopen voor Login ID: {loginId}" - msgid "Theme" msgstr "Thema" From f65b56ff2f806ff9202b7d5d46ae1ec482159593 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Fri, 13 Jun 2025 21:44:51 +0200 Subject: [PATCH 072/171] Change locked out time for too many login attempts from 1 day to 15 minutes --- .../EmailConfirmations/Commands/StartEmailConfirmation.cs | 2 +- .../account-management/Tests/Signups/StartSignupTests.cs | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/application/account-management/Core/Features/EmailConfirmations/Commands/StartEmailConfirmation.cs b/application/account-management/Core/Features/EmailConfirmations/Commands/StartEmailConfirmation.cs index 0c811bb26..f51135eb4 100644 --- a/application/account-management/Core/Features/EmailConfirmations/Commands/StartEmailConfirmation.cs +++ b/application/account-management/Core/Features/EmailConfirmations/Commands/StartEmailConfirmation.cs @@ -41,7 +41,7 @@ public async Task> Handle(StartEmailConfi return Result.Conflict("Email confirmation for this email has already been started. Please check your spam folder."); } - if (existingConfirmations.Count(r => r.CreatedAt > TimeProvider.System.GetUtcNow().AddDays(-1)) > 3) + if (existingConfirmations.Count(r => r.CreatedAt > TimeProvider.System.GetUtcNow().AddMinutes(-15)) > 3) { return Result.TooManyRequests("Too many attempts to confirm this email address. Please try again later."); } diff --git a/application/account-management/Tests/Signups/StartSignupTests.cs b/application/account-management/Tests/Signups/StartSignupTests.cs index 4a246f28e..22669b4e2 100644 --- a/application/account-management/Tests/Signups/StartSignupTests.cs +++ b/application/account-management/Tests/Signups/StartSignupTests.cs @@ -97,18 +97,18 @@ public async Task StartSignup_WhenTooManyAttempts_ShouldReturnTooManyRequests() // Arrange var email = Faker.Internet.Email().ToLowerInvariant(); - // Create 4 signups within the last day for this email + // Create 4 signups within the last 15 minutes for this email for (var i = 1; i <= 4; i++) { var oneTimePasswordHash = new PasswordHasher().HashPassword(this, OneTimePasswordHelper.GenerateOneTimePassword(6)); Connection.Insert("EmailConfirmations", [ ("Id", EmailConfirmationId.NewId().ToString()), - ("CreatedAt", TimeProvider.System.GetUtcNow().AddHours(-i)), + ("CreatedAt", TimeProvider.System.GetUtcNow().AddMinutes(-i)), ("ModifiedAt", null), ("Email", email), ("Type", EmailConfirmationType.Signup.ToString()), ("OneTimePasswordHash", oneTimePasswordHash), - ("ValidUntil", TimeProvider.System.GetUtcNow().AddHours(-i).AddMinutes(5)), + ("ValidUntil", TimeProvider.System.GetUtcNow().AddMinutes(-i - 1)), // All should be expired ("RetryCount", 0), ("ResendCount", 0), ("Completed", false) From 5149c71c80369db20860777f523f3f0ec6459e62 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Fri, 13 Jun 2025 22:03:54 +0200 Subject: [PATCH 073/171] Change login attempt limit from daily to 15 minutes --- .../Tests/Authentication/StartLoginTests.cs | 40 +++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/application/account-management/Tests/Authentication/StartLoginTests.cs b/application/account-management/Tests/Authentication/StartLoginTests.cs index f64dd0e30..09d0cf64b 100644 --- a/application/account-management/Tests/Authentication/StartLoginTests.cs +++ b/application/account-management/Tests/Authentication/StartLoginTests.cs @@ -1,10 +1,14 @@ using System.Net; using System.Net.Http.Json; using FluentAssertions; +using Microsoft.AspNetCore.Identity; using NSubstitute; using PlatformPlatform.AccountManagement.Database; using PlatformPlatform.AccountManagement.Features.Authentication.Commands; +using PlatformPlatform.AccountManagement.Features.EmailConfirmations.Domain; +using PlatformPlatform.SharedKernel.Authentication; using PlatformPlatform.SharedKernel.Tests; +using PlatformPlatform.SharedKernel.Tests.Persistence; using PlatformPlatform.SharedKernel.Validation; using Xunit; @@ -108,4 +112,40 @@ await EmailClient.Received(1).SendAsync( Arg.Any() ); } + + [Fact] + public async Task StartLogin_WhenTooManyAttempts_ShouldReturnTooManyRequests() + { + // Arrange + var email = DatabaseSeeder.Tenant1Owner.Email; + + for (var i = 1; i <= 4; i++) + { + var oneTimePasswordHash = new PasswordHasher().HashPassword(this, OneTimePasswordHelper.GenerateOneTimePassword(6)); + Connection.Insert("EmailConfirmations", [ + ("Id", EmailConfirmationId.NewId().ToString()), + ("CreatedAt", TimeProvider.System.GetUtcNow().AddMinutes(-i)), + ("ModifiedAt", null), + ("Email", email.ToLower()), + ("Type", EmailConfirmationType.Login.ToString()), + ("OneTimePasswordHash", oneTimePasswordHash), + ("ValidUntil", TimeProvider.System.GetUtcNow().AddMinutes(-i - 1)), // All should be expired + ("RetryCount", 0), + ("ResendCount", 0), + ("Completed", false) + ] + ); + } + + var command = new StartLoginCommand(email); + + // Act + var response = await AnonymousHttpClient.PostAsJsonAsync("/api/account-management/authentication/login/start", command); + + // Assert + await response.ShouldHaveErrorStatusCode(HttpStatusCode.TooManyRequests, "Too many attempts to confirm this email address. Please try again later."); + + TelemetryEventsCollectorSpy.AreAllEventsDispatched.Should().BeFalse(); + await EmailClient.DidNotReceive().SendAsync(Arg.Any(), Arg.Any(), Arg.Any(), CancellationToken.None); + } } From d3cb2a447212b2cfcc76410ca09bbeb11598e0fd Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Fri, 13 Jun 2025 22:45:02 +0200 Subject: [PATCH 074/171] Change email confirmation attempts for signup from 15 to 60 minutes --- .../Commands/StartEmailConfirmation.cs | 3 ++- .../Tests/Signups/StartSignupTests.cs | 27 +------------------ 2 files changed, 3 insertions(+), 27 deletions(-) diff --git a/application/account-management/Core/Features/EmailConfirmations/Commands/StartEmailConfirmation.cs b/application/account-management/Core/Features/EmailConfirmations/Commands/StartEmailConfirmation.cs index f51135eb4..007a7ab22 100644 --- a/application/account-management/Core/Features/EmailConfirmations/Commands/StartEmailConfirmation.cs +++ b/application/account-management/Core/Features/EmailConfirmations/Commands/StartEmailConfirmation.cs @@ -41,7 +41,8 @@ public async Task> Handle(StartEmailConfi return Result.Conflict("Email confirmation for this email has already been started. Please check your spam folder."); } - if (existingConfirmations.Count(r => r.CreatedAt > TimeProvider.System.GetUtcNow().AddMinutes(-15)) > 3) + var lockoutMinutes = command.Type == EmailConfirmationType.Signup ? -60 : -15; + if (existingConfirmations.Count(r => r.CreatedAt > TimeProvider.System.GetUtcNow().AddMinutes(lockoutMinutes)) >= 3) { return Result.TooManyRequests("Too many attempts to confirm this email address. Please try again later."); } diff --git a/application/account-management/Tests/Signups/StartSignupTests.cs b/application/account-management/Tests/Signups/StartSignupTests.cs index 22669b4e2..88ed9646e 100644 --- a/application/account-management/Tests/Signups/StartSignupTests.cs +++ b/application/account-management/Tests/Signups/StartSignupTests.cs @@ -66,38 +66,13 @@ public async Task StartSignup_WhenInvalidEmail_ShouldReturnBadRequest() await EmailClient.DidNotReceive().SendAsync(Arg.Any(), Arg.Any(), Arg.Any(), CancellationToken.None); } - [Fact] - public async Task StartSignup_WhenSignupAlreadyStarted_ShouldReturnConflict() - { - // Arrange - var email = Faker.Internet.Email(); - var command = new StartSignupCommand(email); - await AnonymousHttpClient.PostAsJsonAsync("/api/account-management/signups/start", command); - - // Act - var response = await AnonymousHttpClient.PostAsJsonAsync("/api/account-management/signups/start", command); - - // Assert - await response.ShouldHaveErrorStatusCode(HttpStatusCode.Conflict, "Email confirmation for this email has already been started. Please check your spam folder."); - - TelemetryEventsCollectorSpy.CollectedEvents.Count.Should().Be(1); // Only the first signup should create an event - TelemetryEventsCollectorSpy.CollectedEvents[0].GetType().Name.Should().Be("SignupStarted"); - TelemetryEventsCollectorSpy.AreAllEventsDispatched.Should().BeTrue(); - await EmailClient.Received(1).SendAsync( - Arg.Is(s => s.Equals(email.ToLower())), - Arg.Any(), - Arg.Any(), - Arg.Any() - ); - } - [Fact] public async Task StartSignup_WhenTooManyAttempts_ShouldReturnTooManyRequests() { // Arrange var email = Faker.Internet.Email().ToLowerInvariant(); - // Create 4 signups within the last 15 minutes for this email + // Create 4 signups within the last hour for this email for (var i = 1; i <= 4; i++) { var oneTimePasswordHash = new PasswordHasher().HashPassword(this, OneTimePasswordHelper.GenerateOneTimePassword(6)); From 5fa5e5cdc19d9380060fcecf883c85d8fe7c05fa Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Fri, 13 Jun 2025 22:46:14 +0200 Subject: [PATCH 075/171] Remove check disallowing multiple active email confirmations and rely on rate limiting logic instead --- .../EmailConfirmations/Commands/StartEmailConfirmation.cs | 5 ----- 1 file changed, 5 deletions(-) diff --git a/application/account-management/Core/Features/EmailConfirmations/Commands/StartEmailConfirmation.cs b/application/account-management/Core/Features/EmailConfirmations/Commands/StartEmailConfirmation.cs index 007a7ab22..f3c7b2018 100644 --- a/application/account-management/Core/Features/EmailConfirmations/Commands/StartEmailConfirmation.cs +++ b/application/account-management/Core/Features/EmailConfirmations/Commands/StartEmailConfirmation.cs @@ -36,11 +36,6 @@ public async Task> Handle(StartEmailConfi { var existingConfirmations = emailConfirmationRepository.GetByEmail(command.Email).ToArray(); - if (existingConfirmations.Any(c => !c.HasExpired())) - { - return Result.Conflict("Email confirmation for this email has already been started. Please check your spam folder."); - } - var lockoutMinutes = command.Type == EmailConfirmationType.Signup ? -60 : -15; if (existingConfirmations.Count(r => r.CreatedAt > TimeProvider.System.GetUtcNow().AddMinutes(lockoutMinutes)) >= 3) { From 7d2f98fd4a63f72f2c2100c1202160a5d94acc60 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Sun, 15 Jun 2025 19:22:04 +0200 Subject: [PATCH 076/171] Update Powered By logo on signup and login pages and optimize Danish and Netherlands translations --- .../account-management/WebApp/routes/login/index.tsx | 11 ++++++++--- .../account-management/WebApp/routes/login/verify.tsx | 9 +++++++-- .../account-management/WebApp/routes/signup/index.tsx | 11 ++++++++--- .../WebApp/routes/signup/verify.tsx | 9 +++++++-- .../WebApp/shared/translations/locale/da-DK.po | 7 +++++-- .../WebApp/shared/translations/locale/en-US.po | 3 +++ .../WebApp/shared/translations/locale/nl-NL.po | 9 ++++++--- 7 files changed, 44 insertions(+), 15 deletions(-) diff --git a/application/account-management/WebApp/routes/login/index.tsx b/application/account-management/WebApp/routes/login/index.tsx index 16e5c96f1..da5491d66 100644 --- a/application/account-management/WebApp/routes/login/index.tsx +++ b/application/account-management/WebApp/routes/login/index.tsx @@ -1,6 +1,6 @@ import { ErrorMessage } from "@/shared/components/ErrorMessage"; import logoMarkUrl from "@/shared/images/logo-mark.svg"; -import poweredByUrl from "@/shared/images/powered-by.svg"; +import logoWrapUrl from "@/shared/images/logo-wrap.svg"; import { HorizontalHeroLayout } from "@/shared/layouts/HorizontalHeroLayout"; import { api } from "@/shared/lib/api/client"; import { t } from "@lingui/core/macro"; @@ -102,12 +102,17 @@ export function LoginForm() { -
+

Don't have an account? Create one +

+
+ + Powered by + + {t`PlatformPlatform`}
- {t`Powered ); } diff --git a/application/account-management/WebApp/routes/login/verify.tsx b/application/account-management/WebApp/routes/login/verify.tsx index 61ce86047..9476239c8 100644 --- a/application/account-management/WebApp/routes/login/verify.tsx +++ b/application/account-management/WebApp/routes/login/verify.tsx @@ -1,6 +1,6 @@ import { ErrorMessage } from "@/shared/components/ErrorMessage"; import logoMarkUrl from "@/shared/images/logo-mark.svg"; -import poweredByUrl from "@/shared/images/powered-by.svg"; +import logoWrapUrl from "@/shared/images/logo-wrap.svg"; import { HorizontalHeroLayout } from "@/shared/layouts/HorizontalHeroLayout"; import { api } from "@/shared/lib/api/client"; import { t } from "@lingui/core/macro"; @@ -288,7 +288,12 @@ export function CompleteLoginForm() { > Back to login - {t`Powered +
+ + Powered by + + {t`PlatformPlatform`} +
); diff --git a/application/account-management/WebApp/routes/signup/index.tsx b/application/account-management/WebApp/routes/signup/index.tsx index 7b25dc0d7..4336cceae 100644 --- a/application/account-management/WebApp/routes/signup/index.tsx +++ b/application/account-management/WebApp/routes/signup/index.tsx @@ -1,6 +1,6 @@ import { ErrorMessage } from "@/shared/components/ErrorMessage"; import logoMarkUrl from "@/shared/images/logo-mark.svg"; -import poweredByUrl from "@/shared/images/powered-by.svg"; +import logoWrapUrl from "@/shared/images/logo-wrap.svg"; import { HorizontalHeroLayout } from "@/shared/layouts/HorizontalHeroLayout"; import { api } from "@/shared/lib/api/client"; import { t } from "@lingui/core/macro"; @@ -107,7 +107,7 @@ export function StartSignupForm() { -

+

Do you already have an account?{" "} Log in @@ -125,7 +125,12 @@ export function StartSignupForm() { - {t`Powered +

+ + Powered by + + {t`PlatformPlatform`} +
); } diff --git a/application/account-management/WebApp/routes/signup/verify.tsx b/application/account-management/WebApp/routes/signup/verify.tsx index 2442c5099..647ef4e96 100644 --- a/application/account-management/WebApp/routes/signup/verify.tsx +++ b/application/account-management/WebApp/routes/signup/verify.tsx @@ -1,6 +1,6 @@ import { ErrorMessage } from "@/shared/components/ErrorMessage"; import logoMarkUrl from "@/shared/images/logo-mark.svg"; -import poweredByUrl from "@/shared/images/powered-by.svg"; +import logoWrapUrl from "@/shared/images/logo-wrap.svg"; import { HorizontalHeroLayout } from "@/shared/layouts/HorizontalHeroLayout"; import { api } from "@/shared/lib/api/client"; import { t } from "@lingui/core/macro"; @@ -286,7 +286,12 @@ export function CompleteSignupForm() { > Back to signup - {t`Powered +
+ + Powered by + + {t`PlatformPlatform`} +
); diff --git a/application/account-management/WebApp/shared/translations/locale/da-DK.po b/application/account-management/WebApp/shared/translations/locale/da-DK.po index a8b5f8e72..54fb8a285 100644 --- a/application/account-management/WebApp/shared/translations/locale/da-DK.po +++ b/application/account-management/WebApp/shared/translations/locale/da-DK.po @@ -268,6 +268,9 @@ msgstr "Ejer" msgid "Pending" msgstr "Afventer" +msgid "PlatformPlatform" +msgstr "PlatformPlatform" + msgid "Please check your email for a verification code sent to <0>{email}" msgstr "Tjek din e-mail for en bekræftelseskode sendt til <0>{email}" @@ -275,7 +278,7 @@ msgid "Please select a JPEG, PNG, GIF, or WebP image." msgstr "Vælg et JPEG-, PNG-, GIF- eller WebP-billede." msgid "Powered by" -msgstr "Drevet af" +msgstr "Powered by" msgid "Preview avatar" msgstr "Forhåndsvisning af avatar" @@ -339,7 +342,7 @@ msgid "Show filters" msgstr "Vis filtre" msgid "Sign up in seconds to start building on PlatformPlatform – just like thousands of others." -msgstr "Tilmeld dig på få sekunder for at begynde at bygge på PlatformPlatform – ligesom tusinder af andre." +msgstr "Tilmeld dig på sekunder for at bygge på PlatformPlatform – ligesom tusinder andre." msgid "Signup verification code" msgstr "Tilmeldingsbekræftelseskode" diff --git a/application/account-management/WebApp/shared/translations/locale/en-US.po b/application/account-management/WebApp/shared/translations/locale/en-US.po index 6a611940c..e3e5adcfd 100644 --- a/application/account-management/WebApp/shared/translations/locale/en-US.po +++ b/application/account-management/WebApp/shared/translations/locale/en-US.po @@ -268,6 +268,9 @@ msgstr "Owner" msgid "Pending" msgstr "Pending" +msgid "PlatformPlatform" +msgstr "PlatformPlatform" + msgid "Please check your email for a verification code sent to <0>{email}" msgstr "Please check your email for a verification code sent to <0>{email}" diff --git a/application/account-management/WebApp/shared/translations/locale/nl-NL.po b/application/account-management/WebApp/shared/translations/locale/nl-NL.po index 46841433f..ff03728af 100644 --- a/application/account-management/WebApp/shared/translations/locale/nl-NL.po +++ b/application/account-management/WebApp/shared/translations/locale/nl-NL.po @@ -82,7 +82,7 @@ msgid "Back to signup" msgstr "Terug naar aanmelding" msgid "By continuing, you accept our policies" -msgstr "Door verder te gaan, accepteer je onze voorwaarden" +msgstr "Door te gaan, accepteer je onze voorwaarden" msgid "Can't find your code?" msgstr "Kun je je code niet vinden?" @@ -268,6 +268,9 @@ msgstr "Eigenaar" msgid "Pending" msgstr "In behandeling" +msgid "PlatformPlatform" +msgstr "PlatformPlatform" + msgid "Please check your email for a verification code sent to <0>{email}" msgstr "Controleer je e-mail voor een verificatiecode verzonden naar <0>{email}" @@ -275,7 +278,7 @@ msgid "Please select a JPEG, PNG, GIF, or WebP image." msgstr "Selecteer een JPEG-, PNG-, GIF- of WebP-afbeelding." msgid "Powered by" -msgstr "Mogelijk gemaakt door" +msgstr "Powered by" msgid "Preview avatar" msgstr "Voorbeeld avatar" @@ -339,7 +342,7 @@ msgid "Show filters" msgstr "Filters tonen" msgid "Sign up in seconds to start building on PlatformPlatform – just like thousands of others." -msgstr "Meld je in enkele seconden aan om te beginnen met bouwen op PlatformPlatform – net als duizenden anderen." +msgstr "Meld je aan en begin direct met bouwen op PlatformPlatform – net als duizenden anderen." msgid "Signup verification code" msgstr "Verificatiecode voor aanmelding" From 8772a7b98d30533156b3d7db7d186566915ab499 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Mon, 23 Jun 2025 09:53:48 +0200 Subject: [PATCH 077/171] Prefill email address when navigating between signin and signup pages --- .../WebApp/routes/login/index.tsx | 13 +++++-------- .../WebApp/routes/signup/index.tsx | 13 +++++-------- 2 files changed, 10 insertions(+), 16 deletions(-) diff --git a/application/account-management/WebApp/routes/login/index.tsx b/application/account-management/WebApp/routes/login/index.tsx index da5491d66..34f15f6c9 100644 --- a/application/account-management/WebApp/routes/login/index.tsx +++ b/application/account-management/WebApp/routes/login/index.tsx @@ -14,7 +14,8 @@ import { Link } from "@repo/ui/components/Link"; import { TextField } from "@repo/ui/components/TextField"; import { mutationSubmitter } from "@repo/ui/forms/mutationSubmitter"; import { Navigate, createFileRoute } from "@tanstack/react-router"; -import { useEffect, useState } from "react"; +import { useState } from "react"; +import { getSignupState } from "../signup/-shared/signupState"; import { clearLoginState, getLoginState, setLoginState } from "./-shared/loginState"; export const Route = createFileRoute("/login/")({ @@ -46,21 +47,17 @@ export const Route = createFileRoute("/login/")({ }); export function LoginForm() { - // Get email from login state if available (for prefill when returning from verify) const { email: savedEmail } = getLoginState(); - const [email, setEmail] = useState(savedEmail || ""); + const { email: signupEmail } = getSignupState(); // Prefill from signup page if user navigated here + const [email, setEmail] = useState(savedEmail || signupEmail || ""); const { returnPath } = Route.useSearch(); const startLoginMutation = api.useMutation("post", "/api/account-management/authentication/login/start"); - // Clear any existing login state when starting a new login flow - useEffect(() => { - clearLoginState(); - }, []); - if (startLoginMutation.isSuccess) { const { loginId, emailConfirmationId, validForSeconds } = startLoginMutation.data; + clearLoginState(); setLoginState({ loginId, emailConfirmationId, diff --git a/application/account-management/WebApp/routes/signup/index.tsx b/application/account-management/WebApp/routes/signup/index.tsx index 4336cceae..1ba5247f7 100644 --- a/application/account-management/WebApp/routes/signup/index.tsx +++ b/application/account-management/WebApp/routes/signup/index.tsx @@ -16,7 +16,8 @@ import { TextField } from "@repo/ui/components/TextField"; import { mutationSubmitter } from "@repo/ui/forms/mutationSubmitter"; import { Navigate, createFileRoute } from "@tanstack/react-router"; import { DotIcon } from "lucide-react"; -import { useEffect, useState } from "react"; +import { useState } from "react"; +import { getLoginState } from "../login/-shared/loginState"; import { clearSignupState, getSignupState, setSignupState } from "./-shared/signupState"; export const Route = createFileRoute("/signup/")({ @@ -41,20 +42,16 @@ export const Route = createFileRoute("/signup/")({ }); export function StartSignupForm() { - // Get email from signup state if available (for prefill when returning from verify) const { email: savedEmail } = getSignupState(); - const [email, setEmail] = useState(savedEmail || ""); + const { email: loginEmail } = getLoginState(); // Prefill from login page if user navigated here + const [email, setEmail] = useState(savedEmail || loginEmail || ""); const startSignupMutation = api.useMutation("post", "/api/account-management/signups/start"); - // Clear any existing signup state when starting a new signup flow - useEffect(() => { - clearSignupState(); - }, []); - if (startSignupMutation.isSuccess) { const { emailConfirmationId, validForSeconds } = startSignupMutation.data; + clearSignupState(); setSignupState({ emailConfirmationId, email, From f47411fc8a7beb86a85a52d4bbb19e2da2f1d73e Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Fri, 27 Jun 2025 17:03:55 +0200 Subject: [PATCH 078/171] Ensure logo mark on login and signup pages links to landing page and shows hand cursor on hover --- application/account-management/WebApp/routes/login/index.tsx | 2 +- application/account-management/WebApp/routes/login/verify.tsx | 2 +- application/account-management/WebApp/routes/signup/index.tsx | 2 +- application/account-management/WebApp/routes/signup/verify.tsx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/application/account-management/WebApp/routes/login/index.tsx b/application/account-management/WebApp/routes/login/index.tsx index 34f15f6c9..8791e1d93 100644 --- a/application/account-management/WebApp/routes/login/index.tsx +++ b/application/account-management/WebApp/routes/login/index.tsx @@ -75,7 +75,7 @@ export function LoginForm() { validationBehavior="aria" className="flex w-full max-w-sm flex-col items-center gap-4 space-y-3 px-6 pt-8 pb-4" > - + {t`Logo`} diff --git a/application/account-management/WebApp/routes/login/verify.tsx b/application/account-management/WebApp/routes/login/verify.tsx index 9476239c8..1f8dbc198 100644 --- a/application/account-management/WebApp/routes/login/verify.tsx +++ b/application/account-management/WebApp/routes/login/verify.tsx @@ -192,7 +192,7 @@ export function CompleteLoginForm() {
- + {t`Logo`}
diff --git a/application/account-management/WebApp/routes/signup/index.tsx b/application/account-management/WebApp/routes/signup/index.tsx index 1ba5247f7..ddfef27d9 100644 --- a/application/account-management/WebApp/routes/signup/index.tsx +++ b/application/account-management/WebApp/routes/signup/index.tsx @@ -68,7 +68,7 @@ export function StartSignupForm() { validationBehavior="aria" className="flex w-full max-w-sm flex-col items-center gap-4 space-y-3 rounded-lg px-6 pt-8 pb-4" > - + {t`Logo`} diff --git a/application/account-management/WebApp/routes/signup/verify.tsx b/application/account-management/WebApp/routes/signup/verify.tsx index 647ef4e96..846edd647 100644 --- a/application/account-management/WebApp/routes/signup/verify.tsx +++ b/application/account-management/WebApp/routes/signup/verify.tsx @@ -190,7 +190,7 @@ export function CompleteSignupForm() {
- + {t`Logo`}
From 12547c31e17f01ef6eff89368128b9eeb7459b03 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Fri, 27 Jun 2025 17:05:34 +0200 Subject: [PATCH 079/171] Add link to PlatformPlatform GitHub profile on PowerBy PlatformPlatform logo --- application/account-management/WebApp/routes/login/index.tsx | 4 +++- application/account-management/WebApp/routes/login/verify.tsx | 4 +++- application/account-management/WebApp/routes/signup/index.tsx | 4 +++- .../account-management/WebApp/routes/signup/verify.tsx | 4 +++- 4 files changed, 12 insertions(+), 4 deletions(-) diff --git a/application/account-management/WebApp/routes/login/index.tsx b/application/account-management/WebApp/routes/login/index.tsx index 8791e1d93..eafad9039 100644 --- a/application/account-management/WebApp/routes/login/index.tsx +++ b/application/account-management/WebApp/routes/login/index.tsx @@ -108,7 +108,9 @@ export function LoginForm() { Powered by - {t`PlatformPlatform`} + + {t`PlatformPlatform`} +
); diff --git a/application/account-management/WebApp/routes/login/verify.tsx b/application/account-management/WebApp/routes/login/verify.tsx index 1f8dbc198..435d78f6c 100644 --- a/application/account-management/WebApp/routes/login/verify.tsx +++ b/application/account-management/WebApp/routes/login/verify.tsx @@ -292,7 +292,9 @@ export function CompleteLoginForm() { Powered by - {t`PlatformPlatform`} + + {t`PlatformPlatform`} +
diff --git a/application/account-management/WebApp/routes/signup/index.tsx b/application/account-management/WebApp/routes/signup/index.tsx index ddfef27d9..ddc8fe23b 100644 --- a/application/account-management/WebApp/routes/signup/index.tsx +++ b/application/account-management/WebApp/routes/signup/index.tsx @@ -126,7 +126,9 @@ export function StartSignupForm() { Powered by - {t`PlatformPlatform`} + + {t`PlatformPlatform`} + ); diff --git a/application/account-management/WebApp/routes/signup/verify.tsx b/application/account-management/WebApp/routes/signup/verify.tsx index 846edd647..a091e65bd 100644 --- a/application/account-management/WebApp/routes/signup/verify.tsx +++ b/application/account-management/WebApp/routes/signup/verify.tsx @@ -290,7 +290,9 @@ export function CompleteSignupForm() { Powered by - {t`PlatformPlatform`} + + {t`PlatformPlatform`} + From baee54664281c547cf945665ef47ecd3c13e9d72 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Fri, 27 Jun 2025 17:09:21 +0200 Subject: [PATCH 080/171] Ensure that the one-time password only accepts uppercase letters --- application/shared-webapp/ui/components/Digit.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/application/shared-webapp/ui/components/Digit.tsx b/application/shared-webapp/ui/components/Digit.tsx index d7566fba5..09f51a27f 100644 --- a/application/shared-webapp/ui/components/Digit.tsx +++ b/application/shared-webapp/ui/components/Digit.tsx @@ -64,14 +64,14 @@ export function Digit({ if (e.key === "Backspace") { onChange(""); } else if (isCharValid.test(e.key)) { - onChange(e.key); + onChange(e.key.toUpperCase()); } }} onPaste={(e) => { e.preventDefault(); const text = e.clipboardData.getData("text"); if (isStringValid.test(text)) { - onChange(text); + onChange(text.toUpperCase()); } }} autoComplete={autoComplete} From 515da75dd7efca34d1db04ac6cecd79e8cccae15 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Sun, 29 Jun 2025 15:09:02 +0200 Subject: [PATCH 081/171] Create initial version of user menu --- .../users/-components/UserProfileSidePane.tsx | 289 ++++++++++++++++++ .../admin/users/-components/UserTable.tsx | 58 ++-- .../WebApp/routes/admin/users/index.tsx | 93 +++++- .../shared/translations/locale/da-DK.po | 36 +++ .../shared/translations/locale/en-US.po | 36 +++ .../shared/translations/locale/nl-NL.po | 36 +++ 6 files changed, 514 insertions(+), 34 deletions(-) create mode 100644 application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx new file mode 100644 index 000000000..caad3ae27 --- /dev/null +++ b/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx @@ -0,0 +1,289 @@ +import type { components } from "@/shared/lib/api/client"; +import { getUserRoleLabel } from "@/shared/lib/api/userRole"; +import { t } from "@lingui/core/macro"; +import { Trans } from "@lingui/react/macro"; +import { useUserInfo } from "@repo/infrastructure/auth/hooks"; +import { Avatar } from "@repo/ui/components/Avatar"; +import { Badge } from "@repo/ui/components/Badge"; +import { Button } from "@repo/ui/components/Button"; +import { Heading } from "@repo/ui/components/Heading"; +import { Separator } from "@repo/ui/components/Separator"; +import { Text } from "@repo/ui/components/Text"; +import { formatDate } from "@repo/utils/date/formatDate"; +import { getInitials } from "@repo/utils/string/getInitials"; +import { PencilIcon, Trash2Icon, XIcon } from "lucide-react"; +import { useEffect, useRef } from "react"; + +type UserDetails = components["schemas"]["UserDetails"]; + +interface UserProfileSidePaneProps { + user: UserDetails | null; + isOpen: boolean; + onClose: () => void; + onChangeRole: (user: UserDetails) => void; + onDeleteUser: (user: UserDetails) => void; +} + +export function UserProfileSidePane({ + user, + isOpen, + onClose, + onChangeRole, + onDeleteUser +}: Readonly) { + const userInfo = useUserInfo(); + const sidePaneRef = useRef(null); + const closeButtonRef = useRef(null); + + // Focus management and keyboard navigation - only focus close button on mobile/tablet + useEffect(() => { + if (isOpen && closeButtonRef.current) { + // Only auto-focus on mobile/tablet, not on 2xl desktop where it's part of the layout + const is2xlScreen = window.matchMedia("(min-width: 1536px)").matches; + if (!is2xlScreen) { + closeButtonRef.current.focus(); + } + } + }, [isOpen]); + + // Escape key handler + useEffect(() => { + const handleKeyDown = (event: KeyboardEvent) => { + if (event.key === "Escape" && isOpen) { + event.preventDefault(); + onClose(); + } + }; + + if (isOpen) { + document.addEventListener("keydown", handleKeyDown); + } + + return () => { + document.removeEventListener("keydown", handleKeyDown); + }; + }, [isOpen, onClose]); + + // Focus trapping - only on mobile/tablet, not on 2xl desktop + useEffect(() => { + if (!isOpen || !sidePaneRef.current) { + return; + } + + // Don't trap focus on 2xl screens where side pane is part of main layout + const is2xlScreen = window.matchMedia("(min-width: 1536px)").matches; + if (is2xlScreen) { + return; + } + + const focusableElements = sidePaneRef.current.querySelectorAll( + 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])' + ); + const firstElement = focusableElements[0] as HTMLElement; + const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement; + + const handleTabKey = (event: KeyboardEvent) => { + if (event.key !== "Tab") { + return; + } + + const isShiftTab = event.shiftKey; + const activeElement = document.activeElement; + + if (isShiftTab && activeElement === firstElement) { + event.preventDefault(); + lastElement.focus(); + } else if (!isShiftTab && activeElement === lastElement) { + event.preventDefault(); + firstElement.focus(); + } + }; + + document.addEventListener("keydown", handleTabKey); + + return () => { + document.removeEventListener("keydown", handleTabKey); + }; + }, [isOpen]); + + if (!isOpen || !user) { + return null; + } + + const isCurrentUser = user.id === userInfo?.id; + const canModifyUser = userInfo?.role === "Owner" && !isCurrentUser; + + return ( + <> + {/* Backdrop for tablet/mobile - only show when not in 2xl layout */} + {isOpen && ( +
{ + if (e.key === "Enter" || e.key === " ") { + onClose(); + } + }} + aria-label={t`Close user profile`} + role="button" + tabIndex={0} + /> + )} + + {/* Side pane */} +
+ {/* Header */} +
+ + User profile + + +
+ + {/* Content */} +
+ {/* User Avatar and Basic Info */} +
+ + + {user.firstName} {user.lastName} + + {user.title && {user.title}} +
+ + {/* Contact Information */} +
+ + Contact + +
+
+ + Email + +
+ {user.email} + {user.emailConfirmed ? ( + + Verified + + ) : ( + + Pending + + )} +
+
+
+
+ + + + {/* Role Information */} +
+ + Role + + {getUserRoleLabel(user.role)} +
+ + + + {/* Account Details */} +
+ + Account details + +
+
+ + Created + + {formatDate(user.createdAt)} +
+
+ + Modified + + {formatDate(user.modifiedAt)} +
+
+
+ + + + {/* Future Extensions Placeholders */} +
+ + Timezone + + + Not set + +
+ + + +
+ + Recent login history + + + No recent activity + +
+ + + +
+ + Team memberships + + + No team memberships + +
+
+ + {/* Quick Actions */} + {canModifyUser && ( +
+ + Quick actions + +
+ + +
+
+ )} +
+ + ); +} diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx index 6603dcf8e..1818a6e79 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx @@ -16,17 +16,24 @@ import { EllipsisVerticalIcon, PencilIcon, Trash2Icon, UserIcon } from "lucide-r import { useCallback, useEffect, useState } from "react"; import type { Selection, SortDescriptor } from "react-aria-components"; import { MenuTrigger, TableBody } from "react-aria-components"; -import { ChangeUserRoleDialog } from "./ChangeUserRoleDialog"; -import { DeleteUserDialog } from "./DeleteUserDialog"; type UserDetails = components["schemas"]["UserDetails"]; interface UserTableProps { selectedUsers: UserDetails[]; onSelectedUsersChange: (users: UserDetails[]) => void; + onViewProfile: (user: UserDetails | null) => void; + onChangeRole: (user: UserDetails) => void; + onDeleteUser: (user: UserDetails) => void; } -export function UserTable({ selectedUsers, onSelectedUsersChange }: Readonly) { +export function UserTable({ + selectedUsers, + onSelectedUsersChange, + onViewProfile, + onChangeRole, + onDeleteUser +}: Readonly) { const navigate = useNavigate(); const { search, userRole, userStatus, startDate, endDate, orderBy, sortOrder, pageOffset } = useSearch({ strict: false @@ -53,9 +60,6 @@ export function UserTable({ selectedUsers, onSelectedUsersChange }: Readonly(null); - const [userToChangeRole, setUserToChangeRole] = useState(null); - const handlePageChange = useCallback( (page: number) => { navigate({ @@ -97,9 +101,18 @@ export function UserTable({ selectedUsers, onSelectedUsersChange }: Readonly selectedKeys.has(user.id)) ?? []; onSelectedUsersChange(selectedUsersList); + + // Handle profile viewing based on selection + if (selectedUsersList.length === 1) { + // Single user selected - show profile + onViewProfile(selectedUsersList[0]); + } else { + // Multiple users selected or no users selected - close profile + onViewProfile(null); + } } }, - [users?.users, onSelectedUsersChange] + [users?.users, onSelectedUsersChange, onViewProfile] ); if (isLoading) { @@ -110,19 +123,6 @@ export function UserTable({ selectedUsers, onSelectedUsersChange }: Readonly - !isOpen && setUserToChangeRole(null)} - /> - - !isOpen && setUserToDelete(null)} - onUsersDeleted={() => onSelectedUsersChange([])} - /> -
{users?.users.map((user) => ( - + { + onSelectedUsersChange([user]); + onViewProfile(user); + }} + className="cursor-pointer" + >
{ onSelectedUsersChange([user]); - setUserToDelete(user); + onDeleteUser(user); }} isDisabled={user.id === userInfo?.id} > @@ -209,14 +217,14 @@ export function UserTable({ selectedUsers, onSelectedUsersChange }: Readonly - + onViewProfile(user)}> View profile setUserToChangeRole(user)} + onAction={() => onChangeRole(user)} > @@ -227,7 +235,7 @@ export function UserTable({ selectedUsers, onSelectedUsersChange }: Readonly setUserToDelete(user)} + onAction={() => onDeleteUser(user)} > diff --git a/application/account-management/WebApp/routes/admin/users/index.tsx b/application/account-management/WebApp/routes/admin/users/index.tsx index 7b8a0c679..891dcc00a 100644 --- a/application/account-management/WebApp/routes/admin/users/index.tsx +++ b/application/account-management/WebApp/routes/admin/users/index.tsx @@ -8,6 +8,9 @@ import { Breadcrumb } from "@repo/ui/components/Breadcrumbs"; import { createFileRoute } from "@tanstack/react-router"; import { useState } from "react"; import { z } from "zod"; +import { ChangeUserRoleDialog } from "./-components/ChangeUserRoleDialog"; +import { DeleteUserDialog } from "./-components/DeleteUserDialog"; +import { UserProfileSidePane } from "./-components/UserProfileSidePane"; import { UserTable } from "./-components/UserTable"; import { UserToolbar } from "./-components/UserToolbar"; @@ -31,6 +34,27 @@ export const Route = createFileRoute("/admin/users/")({ export default function UsersPage() { const [selectedUsers, setSelectedUsers] = useState([]); + const [profileUser, setProfileUser] = useState(null); + const [userToDelete, setUserToDelete] = useState(null); + const [userToChangeRole, setUserToChangeRole] = useState(null); + + const handleCloseProfile = () => { + setProfileUser(null); + // Also clear selection when closing profile + setSelectedUsers([]); + }; + + const handleViewProfile = (user: UserDetails | null) => { + setProfileUser(user); + }; + + const handleChangeRole = (user: UserDetails) => { + setUserToChangeRole(user); + }; + + const handleDeleteUser = (user: UserDetails) => { + setUserToDelete(user); + }; return ( <> @@ -47,16 +71,67 @@ export default function UsersPage() { } > -

- Users -

-

- Manage your users and permissions here. -

- - - +
+ {/* Side pane for 2xl screens */} + {profileUser && ( +
+ +
+ )} + + {/* Main content */} +
+

+ Users +

+

+ Manage your users and permissions here. +

+ + + +
+
+ + {/* Side pane for mobile/tablet screens */} +
+ +
+ + !isOpen && setUserToChangeRole(null)} + /> + + !isOpen && setUserToDelete(null)} + onUsersDeleted={() => { + setSelectedUsers([]); + setProfileUser(null); + }} + /> ); } diff --git a/application/account-management/WebApp/shared/translations/locale/da-DK.po b/application/account-management/WebApp/shared/translations/locale/da-DK.po index 54fb8a285..848176b5b 100644 --- a/application/account-management/WebApp/shared/translations/locale/da-DK.po +++ b/application/account-management/WebApp/shared/translations/locale/da-DK.po @@ -19,6 +19,9 @@ msgstr "En ny bekræftelseskode er blevet sendt til din e-mail." msgid "Account" msgstr "Konto" +msgid "Account details" +msgstr "" + msgid "Account information" msgstr "Kontoinformation" @@ -111,6 +114,12 @@ msgstr "Ryd" msgid "Clear filters" msgstr "Ryd filtre" +msgid "Close user profile" +msgstr "" + +msgid "Contact" +msgstr "" + msgid "Continue" msgstr "Fortsæt" @@ -256,6 +265,15 @@ msgstr "Navigation" msgid "Next" msgstr "Næste" +msgid "No recent activity" +msgstr "" + +msgid "No team memberships" +msgstr "" + +msgid "Not set" +msgstr "" + msgid "OK" msgstr "OK" @@ -295,6 +313,12 @@ msgstr "Profilbillede" msgid "Profile updated successfully" msgstr "Profil opdateret succesfuldt" +msgid "Quick actions" +msgstr "" + +msgid "Recent login history" +msgstr "" + msgid "Region" msgstr "Region" @@ -356,6 +380,9 @@ msgstr "Support" msgid "System" msgstr "System" +msgid "Team memberships" +msgstr "" + msgid "Terms of use" msgstr "Brugsvilkår" @@ -365,6 +392,9 @@ msgstr "Tema" msgid "This is the region where your data is stored" msgstr "Dette er den region, hvor dine data er lagret" +msgid "Timezone" +msgstr "" + msgid "Title" msgstr "Titel" @@ -395,6 +425,9 @@ msgstr "Bruger inviteret succesfuldt" msgid "User profile" msgstr "Brugerprofil" +msgid "User profile details" +msgstr "" + msgid "User profile menu" msgstr "Brugerprofilmenu" @@ -419,6 +452,9 @@ msgstr "Brugere, der ikke har bekræftet deres e-mail" msgid "Verification code sent" msgstr "Bekræftelseskode sendt" +msgid "Verified" +msgstr "" + msgid "Verify" msgstr "Bekræft" diff --git a/application/account-management/WebApp/shared/translations/locale/en-US.po b/application/account-management/WebApp/shared/translations/locale/en-US.po index e3e5adcfd..7ceefaaaf 100644 --- a/application/account-management/WebApp/shared/translations/locale/en-US.po +++ b/application/account-management/WebApp/shared/translations/locale/en-US.po @@ -19,6 +19,9 @@ msgstr "A new verification code has been sent to your email." msgid "Account" msgstr "Account" +msgid "Account details" +msgstr "Account details" + msgid "Account information" msgstr "Account information" @@ -111,6 +114,12 @@ msgstr "Clear" msgid "Clear filters" msgstr "Clear filters" +msgid "Close user profile" +msgstr "Close user profile" + +msgid "Contact" +msgstr "Contact" + msgid "Continue" msgstr "Continue" @@ -256,6 +265,15 @@ msgstr "Navigation" msgid "Next" msgstr "Next" +msgid "No recent activity" +msgstr "No recent activity" + +msgid "No team memberships" +msgstr "No team memberships" + +msgid "Not set" +msgstr "Not set" + msgid "OK" msgstr "OK" @@ -295,6 +313,12 @@ msgstr "Profile picture" msgid "Profile updated successfully" msgstr "Profile updated successfully" +msgid "Quick actions" +msgstr "Quick actions" + +msgid "Recent login history" +msgstr "Recent login history" + msgid "Region" msgstr "Region" @@ -356,6 +380,9 @@ msgstr "Support" msgid "System" msgstr "System" +msgid "Team memberships" +msgstr "Team memberships" + msgid "Terms of use" msgstr "Terms of use" @@ -365,6 +392,9 @@ msgstr "Theme" msgid "This is the region where your data is stored" msgstr "This is the region where your data is stored" +msgid "Timezone" +msgstr "Timezone" + msgid "Title" msgstr "Title" @@ -395,6 +425,9 @@ msgstr "User invited successfully" msgid "User profile" msgstr "User profile" +msgid "User profile details" +msgstr "User profile details" + msgid "User profile menu" msgstr "User profile menu" @@ -419,6 +452,9 @@ msgstr "Users who haven't confirmed their email" msgid "Verification code sent" msgstr "Verification code sent" +msgid "Verified" +msgstr "Verified" + msgid "Verify" msgstr "Verify" diff --git a/application/account-management/WebApp/shared/translations/locale/nl-NL.po b/application/account-management/WebApp/shared/translations/locale/nl-NL.po index ff03728af..be029a428 100644 --- a/application/account-management/WebApp/shared/translations/locale/nl-NL.po +++ b/application/account-management/WebApp/shared/translations/locale/nl-NL.po @@ -19,6 +19,9 @@ msgstr "Een nieuwe verificatiecode is naar je e-mail verzonden." msgid "Account" msgstr "Account" +msgid "Account details" +msgstr "" + msgid "Account information" msgstr "Accountinformatie" @@ -111,6 +114,12 @@ msgstr "Wissen" msgid "Clear filters" msgstr "Filters wissen" +msgid "Close user profile" +msgstr "" + +msgid "Contact" +msgstr "" + msgid "Continue" msgstr "Verder" @@ -256,6 +265,15 @@ msgstr "Navigatie" msgid "Next" msgstr "Volgende" +msgid "No recent activity" +msgstr "" + +msgid "No team memberships" +msgstr "" + +msgid "Not set" +msgstr "" + msgid "OK" msgstr "OK" @@ -295,6 +313,12 @@ msgstr "Profielfoto" msgid "Profile updated successfully" msgstr "Profiel succesvol bijgewerkt" +msgid "Quick actions" +msgstr "" + +msgid "Recent login history" +msgstr "" + msgid "Region" msgstr "Regio" @@ -356,6 +380,9 @@ msgstr "Ondersteuning" msgid "System" msgstr "Systeem" +msgid "Team memberships" +msgstr "" + msgid "Terms of use" msgstr "Gebruiksvoorwaarden" @@ -365,6 +392,9 @@ msgstr "Thema" msgid "This is the region where your data is stored" msgstr "Dit is de regio waar je gegevens zijn opgeslagen" +msgid "Timezone" +msgstr "" + msgid "Title" msgstr "Titel" @@ -395,6 +425,9 @@ msgstr "Gebruiker succesvol uitgenodigd" msgid "User profile" msgstr "Gebruikersprofiel" +msgid "User profile details" +msgstr "" + msgid "User profile menu" msgstr "Gebruikersprofielmenu" @@ -419,6 +452,9 @@ msgstr "Gebruikers die hun e-mail niet hebben bevestigd" msgid "Verification code sent" msgstr "Verificatiecode verzonden" +msgid "Verified" +msgstr "" + msgid "Verify" msgstr "Verifiëren" From f33ec00cff6ff3f4ae23a6a139d9824367cbe273 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Sun, 29 Jun 2025 15:26:08 +0200 Subject: [PATCH 082/171] Fix right positioning and overlap, improve layout on UserProfileSidePane --- .../users/-components/UserProfileSidePane.tsx | 104 +++++------------- .../WebApp/routes/admin/users/index.tsx | 26 ++--- .../shared/translations/locale/da-DK.po | 18 --- .../shared/translations/locale/en-US.po | 18 --- .../shared/translations/locale/nl-NL.po | 18 --- .../shared-webapp/utils/date/formatDate.ts | 18 ++- 6 files changed, 58 insertions(+), 144 deletions(-) diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx index caad3ae27..e59978955 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx @@ -115,32 +115,16 @@ export function UserProfileSidePane({ return ( <> - {/* Backdrop for tablet/mobile - only show when not in 2xl layout */} - {isOpen && ( -
{ - if (e.key === "Enter" || e.key === " ") { - onClose(); - } - }} - aria-label={t`Close user profile`} - role="button" - tabIndex={0} - /> - )} - {/* Side pane */}
{/* Header */}
- + User profile
@@ -161,28 +145,28 @@ export function UserProfileSidePane({ - + {user.firstName} {user.lastName} - {user.title && {user.title}} + {user.title && {user.title}}
{/* Contact Information */} -
- +
+ Contact
- + Email
- {user.email} + {user.email} {user.emailConfirmed ? ( Verified @@ -197,86 +181,54 @@ export function UserProfileSidePane({
- + {/* Role Information */} -
- +
+ Role - {getUserRoleLabel(user.role)} + + {getUserRoleLabel(user.role)} +
- + {/* Account Details */} -
- +
+ Account details -
+
- + Created - {formatDate(user.createdAt)} + {formatDate(user.createdAt, true)}
- + Modified - {formatDate(user.modifiedAt)} + {formatDate(user.modifiedAt, true)}
- - - - {/* Future Extensions Placeholders */} -
- - Timezone - - - Not set - -
- - - -
- - Recent login history - - - No recent activity - -
- - - -
- - Team memberships - - - No team memberships - -
{/* Quick Actions */} {canModifyUser && (
- + Quick actions
- - diff --git a/application/account-management/WebApp/routes/admin/users/index.tsx b/application/account-management/WebApp/routes/admin/users/index.tsx index 891dcc00a..195504372 100644 --- a/application/account-management/WebApp/routes/admin/users/index.tsx +++ b/application/account-management/WebApp/routes/admin/users/index.tsx @@ -72,19 +72,6 @@ export default function UsersPage() { } >
- {/* Side pane for 2xl screens */} - {profileUser && ( -
- -
- )} - {/* Main content */}

@@ -103,6 +90,19 @@ export default function UsersPage() { onDeleteUser={handleDeleteUser} />

+ + {/* Side pane for 2xl screens */} + {profileUser && ( +
+ +
+ )}
diff --git a/application/account-management/WebApp/shared/translations/locale/da-DK.po b/application/account-management/WebApp/shared/translations/locale/da-DK.po index 848176b5b..1e9606303 100644 --- a/application/account-management/WebApp/shared/translations/locale/da-DK.po +++ b/application/account-management/WebApp/shared/translations/locale/da-DK.po @@ -265,15 +265,6 @@ msgstr "Navigation" msgid "Next" msgstr "Næste" -msgid "No recent activity" -msgstr "" - -msgid "No team memberships" -msgstr "" - -msgid "Not set" -msgstr "" - msgid "OK" msgstr "OK" @@ -316,9 +307,6 @@ msgstr "Profil opdateret succesfuldt" msgid "Quick actions" msgstr "" -msgid "Recent login history" -msgstr "" - msgid "Region" msgstr "Region" @@ -380,9 +368,6 @@ msgstr "Support" msgid "System" msgstr "System" -msgid "Team memberships" -msgstr "" - msgid "Terms of use" msgstr "Brugsvilkår" @@ -392,9 +377,6 @@ msgstr "Tema" msgid "This is the region where your data is stored" msgstr "Dette er den region, hvor dine data er lagret" -msgid "Timezone" -msgstr "" - msgid "Title" msgstr "Titel" diff --git a/application/account-management/WebApp/shared/translations/locale/en-US.po b/application/account-management/WebApp/shared/translations/locale/en-US.po index 7ceefaaaf..e41477049 100644 --- a/application/account-management/WebApp/shared/translations/locale/en-US.po +++ b/application/account-management/WebApp/shared/translations/locale/en-US.po @@ -265,15 +265,6 @@ msgstr "Navigation" msgid "Next" msgstr "Next" -msgid "No recent activity" -msgstr "No recent activity" - -msgid "No team memberships" -msgstr "No team memberships" - -msgid "Not set" -msgstr "Not set" - msgid "OK" msgstr "OK" @@ -316,9 +307,6 @@ msgstr "Profile updated successfully" msgid "Quick actions" msgstr "Quick actions" -msgid "Recent login history" -msgstr "Recent login history" - msgid "Region" msgstr "Region" @@ -380,9 +368,6 @@ msgstr "Support" msgid "System" msgstr "System" -msgid "Team memberships" -msgstr "Team memberships" - msgid "Terms of use" msgstr "Terms of use" @@ -392,9 +377,6 @@ msgstr "Theme" msgid "This is the region where your data is stored" msgstr "This is the region where your data is stored" -msgid "Timezone" -msgstr "Timezone" - msgid "Title" msgstr "Title" diff --git a/application/account-management/WebApp/shared/translations/locale/nl-NL.po b/application/account-management/WebApp/shared/translations/locale/nl-NL.po index be029a428..1bf8e5c00 100644 --- a/application/account-management/WebApp/shared/translations/locale/nl-NL.po +++ b/application/account-management/WebApp/shared/translations/locale/nl-NL.po @@ -265,15 +265,6 @@ msgstr "Navigatie" msgid "Next" msgstr "Volgende" -msgid "No recent activity" -msgstr "" - -msgid "No team memberships" -msgstr "" - -msgid "Not set" -msgstr "" - msgid "OK" msgstr "OK" @@ -316,9 +307,6 @@ msgstr "Profiel succesvol bijgewerkt" msgid "Quick actions" msgstr "" -msgid "Recent login history" -msgstr "" - msgid "Region" msgstr "Regio" @@ -380,9 +368,6 @@ msgstr "Ondersteuning" msgid "System" msgstr "Systeem" -msgid "Team memberships" -msgstr "" - msgid "Terms of use" msgstr "Gebruiksvoorwaarden" @@ -392,9 +377,6 @@ msgstr "Thema" msgid "This is the region where your data is stored" msgstr "Dit is de regio waar je gegevens zijn opgeslagen" -msgid "Timezone" -msgstr "" - msgid "Title" msgstr "Titel" diff --git a/application/shared-webapp/utils/date/formatDate.ts b/application/shared-webapp/utils/date/formatDate.ts index b03c2d4a6..2466ce2ae 100644 --- a/application/shared-webapp/utils/date/formatDate.ts +++ b/application/shared-webapp/utils/date/formatDate.ts @@ -1,12 +1,28 @@ /** * Format a date string to a consistent format across the application. * Format: "day month, year" (e.g., "15 Jan, 2024") + * Or with time: "day month, year at time" (e.g., "15 Jan, 2024 at 14:30") */ -export function formatDate(input: string | undefined | null): string { +export function formatDate(input: string | undefined | null, includeTime = false): string { if (!input) { return ""; } const date = new Date(input); + + if (includeTime) { + const dateStr = date.toLocaleDateString(undefined, { + day: "numeric", + month: "short", + year: "numeric" + }); + const timeStr = date.toLocaleTimeString(undefined, { + hour: "2-digit", + minute: "2-digit", + hour12: false + }); + return `${dateStr} at ${timeStr}`; + } + return date.toLocaleDateString(undefined, { day: "numeric", month: "short", From 1a53bbb6c1ef65057c1a34dab7889e1f80806190 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Sun, 29 Jun 2025 15:49:16 +0200 Subject: [PATCH 083/171] Apply additional UserProfileSidePane feedback improvements MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- .../users/-components/UserProfileSidePane.tsx | 29 ++++++++----------- .../admin/users/-components/UserTable.tsx | 16 +++++----- .../WebApp/routes/admin/users/index.tsx | 18 +++++++----- .../shared/translations/locale/da-DK.po | 9 ------ .../shared/translations/locale/en-US.po | 9 ------ .../shared/translations/locale/nl-NL.po | 9 ------ 6 files changed, 31 insertions(+), 59 deletions(-) diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx index e59978955..e09264b8d 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx @@ -118,12 +118,12 @@ export function UserProfileSidePane({ {/* Side pane */}
{/* Header */} -
+
User profile @@ -157,15 +157,12 @@ export function UserProfileSidePane({ {/* Contact Information */}
- - Contact -
Email -
+
{user.email} {user.emailConfirmed ? ( @@ -197,21 +194,18 @@ export function UserProfileSidePane({ {/* Account Details */}
- - Account details -
Created - {formatDate(user.createdAt, true)} + {formatDate(user.createdAt, true)}
Modified - {formatDate(user.modifiedAt, true)} + {formatDate(user.modifiedAt, true)}
@@ -220,15 +214,16 @@ export function UserProfileSidePane({ {/* Quick Actions */} {canModifyUser && (
- - Quick actions - -
- - diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx index 1818a6e79..946ed5360 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx @@ -97,6 +97,8 @@ export function UserTable({ (keys: Selection) => { if (keys === "all") { onSelectedUsersChange(users?.users ?? []); + // Close profile when selecting all users + onViewProfile(null); } else { const selectedKeys = typeof keys === "string" ? new Set([keys]) : keys; const selectedUsersList = users?.users.filter((user) => selectedKeys.has(user.id)) ?? []; @@ -159,12 +161,12 @@ export function UserTable({ key={user.id} id={user.id} onAction={() => { + // Switch to this user (unselect previous, select this one) onSelectedUsersChange([user]); onViewProfile(user); }} - className="cursor-pointer" > - +
- {user.email} - {formatDate(user.createdAt)} - {formatDate(user.modifiedAt)} - + {user.email} + {formatDate(user.createdAt)} + {formatDate(user.modifiedAt)} + {getUserRoleLabel(user.role)} @@ -252,7 +254,7 @@ export function UserTable({
{users && ( -
+
{/* Main content */} -
+

Users

@@ -82,13 +82,15 @@ export default function UsersPage() {

- +
+ +
{/* Side pane for 2xl screens */} diff --git a/application/account-management/WebApp/shared/translations/locale/da-DK.po b/application/account-management/WebApp/shared/translations/locale/da-DK.po index 1e9606303..c4beba633 100644 --- a/application/account-management/WebApp/shared/translations/locale/da-DK.po +++ b/application/account-management/WebApp/shared/translations/locale/da-DK.po @@ -19,9 +19,6 @@ msgstr "En ny bekræftelseskode er blevet sendt til din e-mail." msgid "Account" msgstr "Konto" -msgid "Account details" -msgstr "" - msgid "Account information" msgstr "Kontoinformation" @@ -117,9 +114,6 @@ msgstr "Ryd filtre" msgid "Close user profile" msgstr "" -msgid "Contact" -msgstr "" - msgid "Continue" msgstr "Fortsæt" @@ -304,9 +298,6 @@ msgstr "Profilbillede" msgid "Profile updated successfully" msgstr "Profil opdateret succesfuldt" -msgid "Quick actions" -msgstr "" - msgid "Region" msgstr "Region" diff --git a/application/account-management/WebApp/shared/translations/locale/en-US.po b/application/account-management/WebApp/shared/translations/locale/en-US.po index e41477049..10a9f235c 100644 --- a/application/account-management/WebApp/shared/translations/locale/en-US.po +++ b/application/account-management/WebApp/shared/translations/locale/en-US.po @@ -19,9 +19,6 @@ msgstr "A new verification code has been sent to your email." msgid "Account" msgstr "Account" -msgid "Account details" -msgstr "Account details" - msgid "Account information" msgstr "Account information" @@ -117,9 +114,6 @@ msgstr "Clear filters" msgid "Close user profile" msgstr "Close user profile" -msgid "Contact" -msgstr "Contact" - msgid "Continue" msgstr "Continue" @@ -304,9 +298,6 @@ msgstr "Profile picture" msgid "Profile updated successfully" msgstr "Profile updated successfully" -msgid "Quick actions" -msgstr "Quick actions" - msgid "Region" msgstr "Region" diff --git a/application/account-management/WebApp/shared/translations/locale/nl-NL.po b/application/account-management/WebApp/shared/translations/locale/nl-NL.po index 1bf8e5c00..1b1498445 100644 --- a/application/account-management/WebApp/shared/translations/locale/nl-NL.po +++ b/application/account-management/WebApp/shared/translations/locale/nl-NL.po @@ -19,9 +19,6 @@ msgstr "Een nieuwe verificatiecode is naar je e-mail verzonden." msgid "Account" msgstr "Account" -msgid "Account details" -msgstr "" - msgid "Account information" msgstr "Accountinformatie" @@ -117,9 +114,6 @@ msgstr "Filters wissen" msgid "Close user profile" msgstr "" -msgid "Contact" -msgstr "" - msgid "Continue" msgstr "Verder" @@ -304,9 +298,6 @@ msgstr "Profielfoto" msgid "Profile updated successfully" msgstr "Profiel succesvol bijgewerkt" -msgid "Quick actions" -msgstr "" - msgid "Region" msgstr "Regio" From ca8f8667752d164cd309f2e076dd3375f43c6541 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Sun, 29 Jun 2025 16:26:07 +0200 Subject: [PATCH 084/171] Fix table height issue preventing e2e tests from passing MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Implement proper flex column layout structure to ensure table has correct dimensions. Previously the table had 0px height causing all e2e tests to fail when trying to interact with table elements. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- .../admin/users/-components/UserTable.tsx | 252 +++++++++--------- .../WebApp/routes/admin/users/index.tsx | 6 +- 2 files changed, 131 insertions(+), 127 deletions(-) diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx index 946ed5360..7b85a9a9f 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx @@ -124,134 +124,136 @@ export function UserTable({ const currentPage = (users?.currentPageOffset ?? 0) + 1; return ( - <> - user.id)} - onSelectionChange={handleSelectionChange} - sortDescriptor={sortDescriptor} - onSortChange={handleSortChange} - aria-label={t`Users`} - > - - - Name - - - Email - - - Created - - - Modified - - - Role - - - Actions - - - - {users?.users.map((user) => ( - { - // Switch to this user (unselect previous, select this one) - onSelectedUsersChange([user]); - onViewProfile(user); - }} - > - -
- -
-
- {user.firstName} {user.lastName} - {user.emailConfirmed ? ( - "" - ) : ( - - Pending - - )} +
+
+
user.id)} + onSelectionChange={handleSelectionChange} + sortDescriptor={sortDescriptor} + onSortChange={handleSortChange} + aria-label={t`Users`} + > + + + Name + + + Email + + + Created + + + Modified + + + Role + + + Actions + + + + {users?.users.map((user) => ( + { + // Switch to this user (unselect previous, select this one) + onSelectedUsersChange([user]); + onViewProfile(user); + }} + > + +
+ +
+
+ {user.firstName} {user.lastName} + {user.emailConfirmed ? ( + "" + ) : ( + + Pending + + )} +
+
{user.title ?? ""}
-
{user.title ?? ""}
- - - {user.email} - {formatDate(user.createdAt)} - {formatDate(user.modifiedAt)} - - {getUserRoleLabel(user.role)} - - -
- - { - if (isOpen) { + + {user.email} + {formatDate(user.createdAt)} + {formatDate(user.modifiedAt)} + + {getUserRoleLabel(user.role)} + + +
+ - - onViewProfile(user)}> - - View profile - - onChangeRole(user)} - > - - - Change role - - - - onDeleteUser(user)} - > - - - Delete - - - - -
- - - ))} - -
+ { + if (isOpen) { + onSelectedUsersChange([user]); + } + }} + > + + + onViewProfile(user)}> + + View profile + + onChangeRole(user)} + > + + + Change role + + + + onDeleteUser(user)} + > + + + Delete + + + + +
+ + + ))} + + +
{users && (
@@ -273,6 +275,6 @@ export function UserTable({ />
)} - +
); } diff --git a/application/account-management/WebApp/routes/admin/users/index.tsx b/application/account-management/WebApp/routes/admin/users/index.tsx index 2dec30b74..4ec320e8a 100644 --- a/application/account-management/WebApp/routes/admin/users/index.tsx +++ b/application/account-management/WebApp/routes/admin/users/index.tsx @@ -73,7 +73,9 @@ export default function UsersPage() { >
{/* Main content */} -
+

Users

@@ -82,7 +84,7 @@ export default function UsersPage() {

-
+
Date: Sun, 29 Jun 2025 17:00:00 +0200 Subject: [PATCH 085/171] Improve user profile side pane styling and table interaction --- .../users/-components/UserProfileSidePane.tsx | 23 +++++++++---------- .../WebApp/routes/admin/users/index.tsx | 12 ++++++---- 2 files changed, 18 insertions(+), 17 deletions(-) diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx index e09264b8d..792e37d59 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx @@ -38,9 +38,9 @@ export function UserProfileSidePane({ // Focus management and keyboard navigation - only focus close button on mobile/tablet useEffect(() => { if (isOpen && closeButtonRef.current) { - // Only auto-focus on mobile/tablet, not on 2xl desktop where it's part of the layout - const is2xlScreen = window.matchMedia("(min-width: 1536px)").matches; - if (!is2xlScreen) { + // Only auto-focus on mobile/tablet, not on xl desktop where it's part of the layout + const isXlScreen = window.matchMedia("(min-width: 1280px)").matches; + if (!isXlScreen) { closeButtonRef.current.focus(); } } @@ -64,15 +64,15 @@ export function UserProfileSidePane({ }; }, [isOpen, onClose]); - // Focus trapping - only on mobile/tablet, not on 2xl desktop + // Focus trapping - only on mobile/tablet, not on xl desktop useEffect(() => { if (!isOpen || !sidePaneRef.current) { return; } - // Don't trap focus on 2xl screens where side pane is part of main layout - const is2xlScreen = window.matchMedia("(min-width: 1536px)").matches; - if (is2xlScreen) { + // Don't trap focus on xl screens where side pane is part of main layout + const isXlScreen = window.matchMedia("(min-width: 1280px)").matches; + if (isXlScreen) { return; } @@ -123,7 +123,7 @@ export function UserProfileSidePane({ aria-label={t`User profile details`} > {/* Header */} -
+
User profile @@ -132,7 +132,6 @@ export function UserProfileSidePane({ variant="icon" onPress={onClose} aria-label={t`Close user profile`} - className="2xl:hidden" > @@ -145,7 +144,7 @@ export function UserProfileSidePane({ @@ -199,13 +198,13 @@ export function UserProfileSidePane({ Created - {formatDate(user.createdAt, true)} + {formatDate(user.createdAt, true)}
Modified - {formatDate(user.modifiedAt, true)} + {formatDate(user.modifiedAt, true)}
diff --git a/application/account-management/WebApp/routes/admin/users/index.tsx b/application/account-management/WebApp/routes/admin/users/index.tsx index 4ec320e8a..fc9f7c5f3 100644 --- a/application/account-management/WebApp/routes/admin/users/index.tsx +++ b/application/account-management/WebApp/routes/admin/users/index.tsx @@ -74,7 +74,9 @@ export default function UsersPage() {
{/* Main content */}

Users @@ -84,7 +86,7 @@ export default function UsersPage() {

-
+
- {/* Side pane for 2xl screens */} + {/* Side pane for large screens */} {profileUser && ( -
+
{/* Side pane for mobile/tablet screens */} -
+
Date: Sun, 29 Jun 2025 18:34:57 +0200 Subject: [PATCH 086/171] Make user profile side pane always dock on tablet and desktop screens --- .../users/-components/UserProfileSidePane.tsx | 29 +++--- .../admin/users/-components/UserTable.tsx | 91 +++++++++++++------ .../admin/users/-components/UserToolbar.tsx | 4 +- .../WebApp/routes/admin/users/index.tsx | 22 ++--- .../shared/translations/locale/da-DK.po | 6 +- .../shared/translations/locale/en-US.po | 6 +- .../shared/translations/locale/nl-NL.po | 6 +- 7 files changed, 95 insertions(+), 69 deletions(-) diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx index 792e37d59..3bc0b6d5b 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx @@ -35,12 +35,12 @@ export function UserProfileSidePane({ const sidePaneRef = useRef(null); const closeButtonRef = useRef(null); - // Focus management and keyboard navigation - only focus close button on mobile/tablet + // Focus management and keyboard navigation - only focus close button on mobile useEffect(() => { if (isOpen && closeButtonRef.current) { - // Only auto-focus on mobile/tablet, not on xl desktop where it's part of the layout - const isXlScreen = window.matchMedia("(min-width: 1280px)").matches; - if (!isXlScreen) { + // Only auto-focus on mobile, not on larger screens where it's part of the layout + const isMobileScreen = window.matchMedia("(max-width: 639px)").matches; + if (isMobileScreen) { closeButtonRef.current.focus(); } } @@ -64,15 +64,15 @@ export function UserProfileSidePane({ }; }, [isOpen, onClose]); - // Focus trapping - only on mobile/tablet, not on xl desktop + // Focus trapping - only on mobile, not on larger screens where side pane is part of layout useEffect(() => { if (!isOpen || !sidePaneRef.current) { return; } - // Don't trap focus on xl screens where side pane is part of main layout - const isXlScreen = window.matchMedia("(min-width: 1280px)").matches; - if (isXlScreen) { + // Don't trap focus on larger screens where side pane is part of main layout + const isMobileScreen = window.matchMedia("(max-width: 639px)").matches; + if (!isMobileScreen) { return; } @@ -118,7 +118,7 @@ export function UserProfileSidePane({ {/* Side pane */}
@@ -127,12 +127,7 @@ export function UserProfileSidePane({ User profile -
@@ -157,7 +152,7 @@ export function UserProfileSidePane({ {/* Contact Information */}
-
+
Email @@ -193,7 +188,7 @@ export function UserProfileSidePane({ {/* Account Details */}
-
+
Created diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx index 7b85a9a9f..40c48cd29 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx @@ -117,6 +117,24 @@ export function UserTable({ [users?.users, onSelectedUsersChange, onViewProfile] ); + const handleRowClick = useCallback( + (user: UserDetails) => { + // When clicking on a row (not checkbox), toggle selection of this user + const isCurrentlySelected = selectedUsers.some((selectedUser) => selectedUser.id === user.id); + + if (isCurrentlySelected && selectedUsers.length === 1) { + // If clicking on the only selected user, deselect it + onSelectedUsersChange([]); + onViewProfile(null); + } else { + // Otherwise, unselect all others and select only this user + onSelectedUsersChange([user]); + onViewProfile(user); + } + }, + [selectedUsers, onSelectedUsersChange, onViewProfile] + ); + if (isLoading) { return null; } @@ -158,17 +176,13 @@ export function UserTable({ {users?.users.map((user) => ( - { - // Switch to this user (unselect previous, select this one) - onSelectedUsersChange([user]); - onViewProfile(user); - }} - > - -
+ + +
-
+ - {user.email} - {formatDate(user.createdAt)} - {formatDate(user.modifiedAt)} - - {getUserRoleLabel(user.role)} + + -
- + + + + + + + + + +
{ if (isOpen) { diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx index db9eef215..2d62ca7df 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx @@ -30,11 +30,11 @@ export function UserToolbar({ selectedUsers, onSelectedUsersChange }: Readonly )} - {selectedUsers.length > 0 && ( + {selectedUsers.length > 1 && ( )} diff --git a/application/account-management/WebApp/routes/admin/users/index.tsx b/application/account-management/WebApp/routes/admin/users/index.tsx index fc9f7c5f3..e654aefd6 100644 --- a/application/account-management/WebApp/routes/admin/users/index.tsx +++ b/application/account-management/WebApp/routes/admin/users/index.tsx @@ -71,13 +71,9 @@ export default function UsersPage() { } > -
+
{/* Main content */} -
+

Users

@@ -85,8 +81,10 @@ export default function UsersPage() { Manage your users and permissions here.

- -
+
+ +
+
- {/* Side pane for large screens */} + {/* Side pane - always dock on sm+ */} {profileUser && ( -
+
- {/* Side pane for mobile/tablet screens */} -
+ {/* Side pane for mobile screens - overlay on mobile only */} +
Date: Sun, 29 Jun 2025 18:58:32 +0200 Subject: [PATCH 087/171] Fix UserProfileSidePane styling issues MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Remove excessive top spacing by changing from top-16 to top-0 - Remove unwanted divider line above action buttons - Fix horizontal scrollbar by constraining main content width - Add proper padding between main content and docked side pane 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- .../routes/admin/users/-components/UserProfileSidePane.tsx | 4 ++-- .../account-management/WebApp/routes/admin/users/index.tsx | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx index 3bc0b6d5b..b67c640ed 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx @@ -118,7 +118,7 @@ export function UserProfileSidePane({ {/* Side pane */}
@@ -207,7 +207,7 @@ export function UserProfileSidePane({ {/* Quick Actions */} {canModifyUser && ( -
+
+ + {user.title ?? ""} + + - + - + - + - + -
+ { if (isOpen) { @@ -280,7 +244,7 @@ export function UserTable({

-
+ ))} diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx index 2d62ca7df..2ec9dfd85 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx @@ -22,7 +22,7 @@ export function UserToolbar({ selectedUsers, onSelectedUsersChange }: Readonly
- {selectedUsers.length === 0 && ( + {selectedUsers.length < 2 && ( )} + {selectedUsers.length === 1 && ( + + )} {selectedUsers.length > 1 && ( - -
+
)}
diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx index a1e7492de..805994c91 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx @@ -13,7 +13,7 @@ import { Text } from "@repo/ui/components/Text"; import { formatDate } from "@repo/utils/date/formatDate"; import { getInitials } from "@repo/utils/string/getInitials"; import { useNavigate, useSearch } from "@tanstack/react-router"; -import { EllipsisVerticalIcon, PencilIcon, Trash2Icon, UserIcon } from "lucide-react"; +import { EllipsisVerticalIcon, Trash2Icon, UserIcon } from "lucide-react"; import { useCallback, useEffect, useState } from "react"; import type { Selection, SortDescriptor } from "react-aria-components"; import { MenuTrigger, TableBody } from "react-aria-components"; @@ -24,7 +24,6 @@ interface UserTableProps { selectedUsers: UserDetails[]; onSelectedUsersChange: (users: UserDetails[]) => void; onViewProfile: (user: UserDetails | null) => void; - onChangeRole: (user: UserDetails) => void; onDeleteUser: (user: UserDetails) => void; } @@ -32,7 +31,6 @@ export function UserTable({ selectedUsers, onSelectedUsersChange, onViewProfile, - onChangeRole, onDeleteUser }: Readonly) { const navigate = useNavigate(); @@ -218,16 +216,6 @@ export function UserTable({ View profile - onChangeRole(user)} - > - - - Change role - - )} - {selectedUsers.length === 1 && ( - - )} {selectedUsers.length > 1 && (
@@ -103,7 +98,6 @@ export default function UsersPage() { user={profileUser} isOpen={profileUser !== null} onClose={handleCloseProfile} - onChangeRole={handleChangeRole} onDeleteUser={handleDeleteUser} /> diff --git a/application/account-management/WebApp/shared/components/topMenu/index.tsx b/application/account-management/WebApp/shared/components/topMenu/index.tsx index e1abdb7ff..dba94abfb 100644 --- a/application/account-management/WebApp/shared/components/topMenu/index.tsx +++ b/application/account-management/WebApp/shared/components/topMenu/index.tsx @@ -24,7 +24,7 @@ export function TopMenu({ children, sidePaneOpen = false }: Readonly
diff --git a/application/account-management/WebApp/shared/translations/locale/da-DK.po b/application/account-management/WebApp/shared/translations/locale/da-DK.po index 7c5438a5b..4aa3156f8 100644 --- a/application/account-management/WebApp/shared/translations/locale/da-DK.po +++ b/application/account-management/WebApp/shared/translations/locale/da-DK.po @@ -96,9 +96,6 @@ msgstr "Skift sprog" msgid "Change profile picture" msgstr "Skift profilbillede" -msgid "Change role" -msgstr "Skift rolle" - msgid "Change user role" msgstr "Skift brugerrolle" diff --git a/application/account-management/WebApp/shared/translations/locale/en-US.po b/application/account-management/WebApp/shared/translations/locale/en-US.po index 02536b45a..9e9525909 100644 --- a/application/account-management/WebApp/shared/translations/locale/en-US.po +++ b/application/account-management/WebApp/shared/translations/locale/en-US.po @@ -96,9 +96,6 @@ msgstr "Change language" msgid "Change profile picture" msgstr "Change profile picture" -msgid "Change role" -msgstr "Change role" - msgid "Change user role" msgstr "Change user role" diff --git a/application/account-management/WebApp/shared/translations/locale/nl-NL.po b/application/account-management/WebApp/shared/translations/locale/nl-NL.po index c12432b0c..0a27bcece 100644 --- a/application/account-management/WebApp/shared/translations/locale/nl-NL.po +++ b/application/account-management/WebApp/shared/translations/locale/nl-NL.po @@ -96,9 +96,6 @@ msgstr "Taal wijzigen" msgid "Change profile picture" msgstr "Profielfoto wijzigen" -msgid "Change role" -msgstr "Rol wijzigen" - msgid "Change user role" msgstr "Gebruikersrol wijzigen" diff --git a/application/shared-webapp/ui/components/AppLayout.tsx b/application/shared-webapp/ui/components/AppLayout.tsx index 3fb796f3f..ab67fe227 100644 --- a/application/shared-webapp/ui/components/AppLayout.tsx +++ b/application/shared-webapp/ui/components/AppLayout.tsx @@ -119,8 +119,8 @@ export function AppLayout({ {/* Scrollable content area with bounce */}
{variant === "center" ? ( From d952882c9d1cc1163d4580770adb1c3103b3bb6e Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Sun, 29 Jun 2025 19:56:58 +0200 Subject: [PATCH 092/171] Restore Change role functionality in user table action menu MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- .../routes/admin/users/-components/UserTable.tsx | 14 ++++++++++++-- .../WebApp/routes/admin/users/index.tsx | 5 +++++ .../WebApp/shared/translations/locale/da-DK.po | 3 +++ .../WebApp/shared/translations/locale/en-US.po | 3 +++ .../WebApp/shared/translations/locale/nl-NL.po | 3 +++ 5 files changed, 26 insertions(+), 2 deletions(-) diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx index 805994c91..048c88572 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx @@ -13,7 +13,7 @@ import { Text } from "@repo/ui/components/Text"; import { formatDate } from "@repo/utils/date/formatDate"; import { getInitials } from "@repo/utils/string/getInitials"; import { useNavigate, useSearch } from "@tanstack/react-router"; -import { EllipsisVerticalIcon, Trash2Icon, UserIcon } from "lucide-react"; +import { EllipsisVerticalIcon, SettingsIcon, Trash2Icon, UserIcon } from "lucide-react"; import { useCallback, useEffect, useState } from "react"; import type { Selection, SortDescriptor } from "react-aria-components"; import { MenuTrigger, TableBody } from "react-aria-components"; @@ -25,13 +25,15 @@ interface UserTableProps { onSelectedUsersChange: (users: UserDetails[]) => void; onViewProfile: (user: UserDetails | null) => void; onDeleteUser: (user: UserDetails) => void; + onChangeRole: (user: UserDetails) => void; } export function UserTable({ selectedUsers, onSelectedUsersChange, onViewProfile, - onDeleteUser + onDeleteUser, + onChangeRole }: Readonly) { const navigate = useNavigate(); const { search, userRole, userStatus, startDate, endDate, orderBy, sortOrder, pageOffset } = useSearch({ @@ -216,6 +218,14 @@ export function UserTable({ View profile + onChangeRole(user)} + > + + Change role + { + setUserToChangeRole(user); + }; + return ( <> @@ -87,6 +91,7 @@ export default function UsersPage() { onSelectedUsersChange={setSelectedUsers} onViewProfile={handleViewProfile} onDeleteUser={handleDeleteUser} + onChangeRole={handleChangeRole} />
diff --git a/application/account-management/WebApp/shared/translations/locale/da-DK.po b/application/account-management/WebApp/shared/translations/locale/da-DK.po index 4aa3156f8..b5c925d73 100644 --- a/application/account-management/WebApp/shared/translations/locale/da-DK.po +++ b/application/account-management/WebApp/shared/translations/locale/da-DK.po @@ -96,6 +96,9 @@ msgstr "Skift sprog" msgid "Change profile picture" msgstr "Skift profilbillede" +msgid "Change role" +msgstr "" + msgid "Change user role" msgstr "Skift brugerrolle" diff --git a/application/account-management/WebApp/shared/translations/locale/en-US.po b/application/account-management/WebApp/shared/translations/locale/en-US.po index 9e9525909..02536b45a 100644 --- a/application/account-management/WebApp/shared/translations/locale/en-US.po +++ b/application/account-management/WebApp/shared/translations/locale/en-US.po @@ -96,6 +96,9 @@ msgstr "Change language" msgid "Change profile picture" msgstr "Change profile picture" +msgid "Change role" +msgstr "Change role" + msgid "Change user role" msgstr "Change user role" diff --git a/application/account-management/WebApp/shared/translations/locale/nl-NL.po b/application/account-management/WebApp/shared/translations/locale/nl-NL.po index 0a27bcece..fc7bffb2c 100644 --- a/application/account-management/WebApp/shared/translations/locale/nl-NL.po +++ b/application/account-management/WebApp/shared/translations/locale/nl-NL.po @@ -96,6 +96,9 @@ msgstr "Taal wijzigen" msgid "Change profile picture" msgstr "Profielfoto wijzigen" +msgid "Change role" +msgstr "" + msgid "Change user role" msgstr "Gebruikersrol wijzigen" From 132554d6ecbf3cd820c9e00ce76516562fc1e162 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Sun, 29 Jun 2025 23:04:48 +0200 Subject: [PATCH 093/171] Implement grid-based layout for UserProfileSidePane with proper horizontal scrolling MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Replace fixed positioning with CSS Grid layout in AppLayout component - Add sidePane prop to AppLayout for grid column integration - Fix top menu positioning to constrain to main content when side pane open - Remove absolute positioning from UserProfileSidePane for grid compatibility - Simplify users page layout by passing side pane via AppLayout prop - Fix horizontal scrolling issues by allowing table to scroll within main content - Ensure cross-browser compatibility with Safari, Chrome, and Firefox - Maintain responsive behavior: mobile overlay, desktop grid columns 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- .../users/-components/UserProfileSidePane.tsx | 2 +- .../WebApp/routes/admin/users/index.tsx | 60 +++++++++---------- .../shared-webapp/ui/components/AppLayout.tsx | 21 ++++--- 3 files changed, 42 insertions(+), 41 deletions(-) diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx index 206308c5e..1151292b9 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx @@ -111,7 +111,7 @@ export function UserProfileSidePane({ user, isOpen, onClose, onDeleteUser }: Rea {/* Side pane */}
diff --git a/application/account-management/WebApp/routes/admin/users/index.tsx b/application/account-management/WebApp/routes/admin/users/index.tsx index a209e4ec7..50b11b93b 100644 --- a/application/account-management/WebApp/routes/admin/users/index.tsx +++ b/application/account-management/WebApp/routes/admin/users/index.tsx @@ -60,9 +60,18 @@ export default function UsersPage() { <> + ) : undefined + } topMenu={ - + Users @@ -72,40 +81,29 @@ export default function UsersPage() { } > -
- {/* Main content */} -
-

- Users -

-

- Manage your users and permissions here. -

+
+

+ Users +

+

+ Manage your users and permissions here. +

-
- -
-
- -
+
+ +
+
+
- {/* Single UserProfileSidePane for all screen sizes */} - - ) { const { className, style, isOverlayOpen, isMobileMenuOpen } = useSideMenuLayout(); @@ -95,32 +95,32 @@ export function AppLayout({ return (
))} > {/* Fixed TopMenu with blur effect */}
{topMenu}
{/* Soft gradient fade below TopMenu */}
- {/* Scrollable content area with bounce */} + {/* Main content area */}
{variant === "center" ? ( @@ -139,6 +139,9 @@ export function AppLayout({ children )}
+ + {/* Side pane area - only on desktop */} + {sidePane &&
{sidePane}
}
); } From 033d56d78a8de486ce7809fbadc30997d4aca23b Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Sun, 29 Jun 2025 23:18:07 +0200 Subject: [PATCH 094/171] Fix side pane scrolling to be independent of main content MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Change side pane from grid positioning to fixed positioning - Position side pane as fixed top-0 right-0 with z-40 and h-screen - Update UserProfileSidePane to use h-screen for full viewport height - Maintain grid layout for main content spacing while keeping side pane fixed - Ensure side pane doesn't scroll with main content and lives its own life - Preserve horizontal scrolling functionality in main content area 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- .../routes/admin/users/-components/UserProfileSidePane.tsx | 2 +- application/shared-webapp/ui/components/AppLayout.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx index 1151292b9..b09d4a957 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx @@ -111,7 +111,7 @@ export function UserProfileSidePane({ user, isOpen, onClose, onDeleteUser }: Rea {/* Side pane */}
diff --git a/application/shared-webapp/ui/components/AppLayout.tsx b/application/shared-webapp/ui/components/AppLayout.tsx index 817523f34..b034f35b5 100644 --- a/application/shared-webapp/ui/components/AppLayout.tsx +++ b/application/shared-webapp/ui/components/AppLayout.tsx @@ -141,7 +141,7 @@ export function AppLayout({
{/* Side pane area - only on desktop */} - {sidePane &&
{sidePane}
} + {sidePane &&
{sidePane}
}
); } From a04aa8a33aaaf82d4099d2a7065a0eda95121e2b Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Sun, 29 Jun 2025 23:26:49 +0200 Subject: [PATCH 095/171] Fix mobile responsive behavior for user profile side pane MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Update side pane positioning to display as full-screen overlay on mobile and small tablet screens (below sm breakpoint) while maintaining fixed side panel behavior on larger screens. Changes: - Use `inset-0` for full-screen overlay on mobile - Use `sm:inset-auto sm:top-0 sm:right-0` for fixed positioning on sm+ screens - Maintain proper z-index and responsive width behavior 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- application/shared-webapp/ui/components/AppLayout.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/application/shared-webapp/ui/components/AppLayout.tsx b/application/shared-webapp/ui/components/AppLayout.tsx index b034f35b5..e9c068fb3 100644 --- a/application/shared-webapp/ui/components/AppLayout.tsx +++ b/application/shared-webapp/ui/components/AppLayout.tsx @@ -140,8 +140,10 @@ export function AppLayout({ )}
- {/* Side pane area - only on desktop */} - {sidePane &&
{sidePane}
} + {/* Side pane area - responsive behavior */} + {sidePane && ( +
{sidePane}
+ )}
); } From deb11235f4e06d270cb2b46415c3f540480873fc Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Sun, 29 Jun 2025 23:30:03 +0200 Subject: [PATCH 096/171] Extend full-screen overlay behavior to small screens for side pane MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change responsive breakpoint from sm to md for side pane positioning to ensure proper accessibility on small screens. Now uses full-screen overlay for mobile and small tablet screens, and fixed side panel only for medium screens and above. Changes: - Update side pane positioning from sm:inset-auto to md:inset-auto - Update top menu positioning from sm:right-96 to md:right-96 - Ensures top menu remains accessible on small screens 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- application/shared-webapp/ui/components/AppLayout.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/application/shared-webapp/ui/components/AppLayout.tsx b/application/shared-webapp/ui/components/AppLayout.tsx index e9c068fb3..ecb5130cc 100644 --- a/application/shared-webapp/ui/components/AppLayout.tsx +++ b/application/shared-webapp/ui/components/AppLayout.tsx @@ -104,7 +104,7 @@ export function AppLayout({
{topMenu} @@ -113,7 +113,7 @@ export function AppLayout({
@@ -142,7 +142,7 @@ export function AppLayout({ {/* Side pane area - responsive behavior */} {sidePane && ( -
{sidePane}
+
{sidePane}
)}
); From 071853f3e1d327205f3a49120bb0278426fe693d Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Sun, 29 Jun 2025 23:31:48 +0200 Subject: [PATCH 097/171] Fix z-index layering for user profile side pane MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Increase side pane z-index from z-40 to z-[60] to ensure it appears above the side menu (z-50) on mobile and small screens where both elements overlay the content. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- application/shared-webapp/ui/components/AppLayout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/application/shared-webapp/ui/components/AppLayout.tsx b/application/shared-webapp/ui/components/AppLayout.tsx index ecb5130cc..ce9047fe4 100644 --- a/application/shared-webapp/ui/components/AppLayout.tsx +++ b/application/shared-webapp/ui/components/AppLayout.tsx @@ -142,7 +142,7 @@ export function AppLayout({ {/* Side pane area - responsive behavior */} {sidePane && ( -
{sidePane}
+
{sidePane}
)}
); From 21f832d9ef4bf8ef782fd8be48a945ca7ad2e4b0 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Sun, 29 Jun 2025 23:38:59 +0200 Subject: [PATCH 098/171] Improve responsive behavior for user filter toolbar MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change breakpoint from lg (1024px) to xl (1280px) for showing inline filters, providing better responsive behavior on medium-sized screens. Changes: - Update filter display logic to use xl breakpoint instead of lg - Filters now collapse to grouped modal layout on more screen sizes - Badge count now hidden on xl+ screens instead of lg+ screens - Ensures better space utilization on tablet and smaller desktop screens 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- .../admin/users/-components/UserQuerying.tsx | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx index ca79b6fbb..da4c4cbe8 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx @@ -102,12 +102,12 @@ export function UserQuerying() { // Handle screen size changes to show/hide filters appropriately useEffect(() => { const handleResize = () => { - const isLargeScreen = window.matchMedia(MEDIA_QUERIES.lg).matches; - if (isLargeScreen && activeFilterCount > 0 && !showAllFilters) { - // On large screens, show inline filters if there are active filters + const isXlScreen = window.matchMedia(MEDIA_QUERIES.xl).matches; + if (isXlScreen && activeFilterCount > 0 && !showAllFilters) { + // On XL screens, show inline filters if there are active filters setShowAllFilters(true); - } else if (!isLargeScreen && showAllFilters) { - // On small/medium screens, hide inline filters + } else if (!isXlScreen && showAllFilters) { + // On smaller screens, hide inline filters setShowAllFilters(false); } }; @@ -201,18 +201,18 @@ export function UserQuerying() { aria-label={showAllFilters ? t`Clear filters` : t`Show filters`} data-testid="filter-button" onPress={() => { - // On large screens, if filters are showing, clear them instead of opening dialog - const isLargeScreen = window.matchMedia(MEDIA_QUERIES.lg).matches; - if (isLargeScreen && showAllFilters) { + // On XL screens, if filters are showing, clear them instead of opening dialog + const isXlScreen = window.matchMedia(MEDIA_QUERIES.xl).matches; + if (isXlScreen && showAllFilters) { clearAllFilters(); return; } - // On large screens, toggle inline filters - if (isLargeScreen) { + // On XL screens, toggle inline filters + if (isXlScreen) { setShowAllFilters(!showAllFilters); return; } - // On small/medium screens, open dialog + // On smaller screens, open dialog setIsFilterPanelOpen(true); }} > @@ -222,7 +222,7 @@ export function UserQuerying() { )} {activeFilterCount > 0 && ( - + {activeFilterCount} )} From f4641d70916e8b6c1d5b4ff5e396b01cbe90b005 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Sun, 29 Jun 2025 23:44:30 +0200 Subject: [PATCH 099/171] Add dynamic filter layout based on side menu state MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Implement intelligent responsive logic that considers both screen width and side menu expansion state when determining filter layout. This ensures optimal space utilization regardless of side menu state. Changes: - Import and use useSideMenuLayout hook to access side menu state - Update hasSpaceForInlineFilters logic to check isOverlayOpen and isMobileMenuOpen - Add side menu state to useEffect dependencies for reactive updates - Improve filter button logic to handle space constraints dynamically - Update badge visibility to show only when filters are collapsed This resolves issues where filters would overlap or be cramped when the side menu is expanded on medium-large screens. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- .../admin/users/-components/UserQuerying.tsx | 37 ++++++++++++------- 1 file changed, 23 insertions(+), 14 deletions(-) diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx index da4c4cbe8..6ccd374bb 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx @@ -11,6 +11,7 @@ import { Heading } from "@repo/ui/components/Heading"; import { Modal } from "@repo/ui/components/Modal"; import { SearchField } from "@repo/ui/components/SearchField"; import { Select, SelectItem } from "@repo/ui/components/Select"; +import { useSideMenuLayout } from "@repo/ui/hooks/useSideMenuLayout"; import { MEDIA_QUERIES } from "@repo/ui/utils/responsive"; import { useLocation, useNavigate } from "@tanstack/react-router"; import { ListFilter, ListFilterPlus, XIcon } from "lucide-react"; @@ -37,6 +38,7 @@ interface SearchParams { export function UserQuerying() { const navigate = useNavigate(); const searchParams = (useLocation().search as SearchParams) ?? {}; + const { isOverlayOpen, isMobileMenuOpen } = useSideMenuLayout(); const [search, setSearch] = useState(searchParams.search); const [showAllFilters, setShowAllFilters] = useState( Boolean(searchParams.userRole ?? searchParams.userStatus ?? searchParams.startDate ?? searchParams.endDate) @@ -99,25 +101,29 @@ export function UserQuerying() { const activeFilterCount = getActiveFilterCount(); - // Handle screen size changes to show/hide filters appropriately + // Handle screen size and side menu changes to show/hide filters appropriately useEffect(() => { const handleResize = () => { const isXlScreen = window.matchMedia(MEDIA_QUERIES.xl).matches; - if (isXlScreen && activeFilterCount > 0 && !showAllFilters) { - // On XL screens, show inline filters if there are active filters + + // Consider both screen size AND side menu state for available space + const hasSpaceForInlineFilters = isXlScreen && !isOverlayOpen && !isMobileMenuOpen; + + if (hasSpaceForInlineFilters && activeFilterCount > 0 && !showAllFilters) { + // Show inline filters if there's space and active filters exist setShowAllFilters(true); - } else if (!isXlScreen && showAllFilters) { - // On smaller screens, hide inline filters + } else if (!hasSpaceForInlineFilters && showAllFilters) { + // Hide inline filters if there's insufficient space setShowAllFilters(false); } }; - // Check on mount + // Check on mount and when dependencies change handleResize(); window.addEventListener("resize", handleResize); return () => window.removeEventListener("resize", handleResize); - }, [activeFilterCount, showAllFilters]); + }, [activeFilterCount, showAllFilters, isOverlayOpen, isMobileMenuOpen]); const clearAllFilters = () => { updateFilter({ userRole: undefined, userStatus: undefined, startDate: undefined, endDate: undefined }); @@ -201,18 +207,21 @@ export function UserQuerying() { aria-label={showAllFilters ? t`Clear filters` : t`Show filters`} data-testid="filter-button" onPress={() => { - // On XL screens, if filters are showing, clear them instead of opening dialog + // Determine if we have space for inline filters const isXlScreen = window.matchMedia(MEDIA_QUERIES.xl).matches; - if (isXlScreen && showAllFilters) { + const hasSpaceForInlineFilters = isXlScreen && !isOverlayOpen && !isMobileMenuOpen; + + if (hasSpaceForInlineFilters && showAllFilters) { + // If filters are showing and we have space, clear them clearAllFilters(); return; } - // On XL screens, toggle inline filters - if (isXlScreen) { + if (hasSpaceForInlineFilters) { + // If we have space but filters aren't showing, toggle them setShowAllFilters(!showAllFilters); return; } - // On smaller screens, open dialog + // If we don't have space, open dialog setIsFilterPanelOpen(true); }} > @@ -221,8 +230,8 @@ export function UserQuerying() { ) : ( )} - {activeFilterCount > 0 && ( - + {activeFilterCount > 0 && !showAllFilters && ( + {activeFilterCount} )} From a842232a88b82208578c45bbe973308a406aa232 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Sun, 29 Jun 2025 23:49:55 +0200 Subject: [PATCH 100/171] Fix dynamic filter layout to properly consider side menu expansion state MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Enhance the useSideMenuLayout hook to expose isCollapsed and isLargeScreen states, and update UserQuerying component to use proper side menu state for space calculations. Changes: - Extend useSideMenuLayout hook return type to include isCollapsed and isLargeScreen - Update hasSpaceForInlineFilters logic to check: isLargeScreen && isCollapsed - Remove window.matchMedia calls in favor of hook-provided state - Ensure filters collapse to modal when side menu is expanded on XL screens - Improve reactive behavior when side menu state changes This resolves the issue where inline filters would remain visible and cramped when the side menu was expanded, now they properly collapse to modal layout providing better space utilization and user experience. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- .../admin/users/-components/UserQuerying.tsx | 38 +++++++------------ .../ui/hooks/useSideMenuLayout.ts | 11 +++++- 2 files changed, 24 insertions(+), 25 deletions(-) diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx index 6ccd374bb..173b91397 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx @@ -12,7 +12,6 @@ import { Modal } from "@repo/ui/components/Modal"; import { SearchField } from "@repo/ui/components/SearchField"; import { Select, SelectItem } from "@repo/ui/components/Select"; import { useSideMenuLayout } from "@repo/ui/hooks/useSideMenuLayout"; -import { MEDIA_QUERIES } from "@repo/ui/utils/responsive"; import { useLocation, useNavigate } from "@tanstack/react-router"; import { ListFilter, ListFilterPlus, XIcon } from "lucide-react"; import { useCallback, useEffect, useState } from "react"; @@ -38,7 +37,7 @@ interface SearchParams { export function UserQuerying() { const navigate = useNavigate(); const searchParams = (useLocation().search as SearchParams) ?? {}; - const { isOverlayOpen, isMobileMenuOpen } = useSideMenuLayout(); + const { isOverlayOpen, isMobileMenuOpen, isCollapsed, isLargeScreen } = useSideMenuLayout(); const [search, setSearch] = useState(searchParams.search); const [showAllFilters, setShowAllFilters] = useState( Boolean(searchParams.userRole ?? searchParams.userStatus ?? searchParams.startDate ?? searchParams.endDate) @@ -103,27 +102,19 @@ export function UserQuerying() { // Handle screen size and side menu changes to show/hide filters appropriately useEffect(() => { - const handleResize = () => { - const isXlScreen = window.matchMedia(MEDIA_QUERIES.xl).matches; + // Consider screen size AND side menu state for available space + // On XL screens: show inline filters only when side menu is collapsed + // On smaller screens: always use modal regardless of side menu state + const hasSpaceForInlineFilters = isLargeScreen && isCollapsed && !isOverlayOpen && !isMobileMenuOpen; - // Consider both screen size AND side menu state for available space - const hasSpaceForInlineFilters = isXlScreen && !isOverlayOpen && !isMobileMenuOpen; - - if (hasSpaceForInlineFilters && activeFilterCount > 0 && !showAllFilters) { - // Show inline filters if there's space and active filters exist - setShowAllFilters(true); - } else if (!hasSpaceForInlineFilters && showAllFilters) { - // Hide inline filters if there's insufficient space - setShowAllFilters(false); - } - }; - - // Check on mount and when dependencies change - handleResize(); - - window.addEventListener("resize", handleResize); - return () => window.removeEventListener("resize", handleResize); - }, [activeFilterCount, showAllFilters, isOverlayOpen, isMobileMenuOpen]); + if (hasSpaceForInlineFilters && activeFilterCount > 0 && !showAllFilters) { + // Show inline filters if there's space and active filters exist + setShowAllFilters(true); + } else if (!hasSpaceForInlineFilters && showAllFilters) { + // Hide inline filters if there's insufficient space + setShowAllFilters(false); + } + }, [activeFilterCount, showAllFilters, isOverlayOpen, isMobileMenuOpen, isCollapsed, isLargeScreen]); const clearAllFilters = () => { updateFilter({ userRole: undefined, userStatus: undefined, startDate: undefined, endDate: undefined }); @@ -208,8 +199,7 @@ export function UserQuerying() { data-testid="filter-button" onPress={() => { // Determine if we have space for inline filters - const isXlScreen = window.matchMedia(MEDIA_QUERIES.xl).matches; - const hasSpaceForInlineFilters = isXlScreen && !isOverlayOpen && !isMobileMenuOpen; + const hasSpaceForInlineFilters = isLargeScreen && isCollapsed && !isOverlayOpen && !isMobileMenuOpen; if (hasSpaceForInlineFilters && showAllFilters) { // If filters are showing and we have space, clear them diff --git a/application/shared-webapp/ui/hooks/useSideMenuLayout.ts b/application/shared-webapp/ui/hooks/useSideMenuLayout.ts index b2dd3ea1e..4ffce9b9a 100644 --- a/application/shared-webapp/ui/hooks/useSideMenuLayout.ts +++ b/application/shared-webapp/ui/hooks/useSideMenuLayout.ts @@ -12,6 +12,8 @@ export function useSideMenuLayout(): { style: React.CSSProperties; isOverlayOpen: boolean; isMobileMenuOpen: boolean; + isCollapsed: boolean; + isLargeScreen: boolean; } { // Track screen sizes const [isSmallScreen, setIsSmallScreen] = useState(() => @@ -111,5 +113,12 @@ export function useSideMenuLayout(): { // Determine if in overlay mode const isOverlayMode = isSmallScreen && !isLargeScreen; - return { className, style, isOverlayOpen: isOverlayMode && isOverlayExpanded, isMobileMenuOpen }; + return { + className, + style, + isOverlayOpen: isOverlayMode && isOverlayExpanded, + isMobileMenuOpen, + isCollapsed: isLargeScreen ? isCollapsed : true, // For XL screens, return actual state; for others, consider "collapsed" for space calculation + isLargeScreen + }; } From 93f53bf5575720416ef99e8907b472a7cfcf7061 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Mon, 30 Jun 2025 00:15:36 +0200 Subject: [PATCH 101/171] Make side menu z-index responsive to fix mobile layering MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Apply higher z-index values only on sm+ screens to ensure proper layering behavior across different screen sizes. On mobile, side pane should be above side menu; on larger screens with overlay mode, side menu should be above side pane. Changes: - Side menu: z-50 on mobile, z-[70] on sm+ screens - Side menu backdrop: z-40 on mobile, z-[65] on sm+ screens - Maintains side pane z-[60] between the responsive values Responsive layering hierarchy: Mobile (< 640px): side menu (50) < side pane (60) SM+ screens (≥ 640px): side pane (60) < backdrop (65) < side menu (70) 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- application/shared-webapp/ui/components/SideMenu.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/application/shared-webapp/ui/components/SideMenu.tsx b/application/shared-webapp/ui/components/SideMenu.tsx index 5ce602718..8cccbe19f 100644 --- a/application/shared-webapp/ui/components/SideMenu.tsx +++ b/application/shared-webapp/ui/components/SideMenu.tsx @@ -181,7 +181,7 @@ export function MenuButton({ } const sideMenuStyles = tv({ - base: "group fixed top-0 left-0 z-50 flex h-screen flex-col bg-background transition-[width] duration-100", + base: "group fixed top-0 left-0 z-50 flex h-screen flex-col bg-background transition-[width] duration-100 md:z-[70]", variants: { isCollapsed: { true: "mr-2 w-[72px]", @@ -360,7 +360,7 @@ export function SideMenu({ children, ariaLabel, topMenuContent }: Readonly e.key === "Enter" && closeOverlay()} role="button" From 1062cfa848ae62dc3d56eafa4b3a1e0b30dad201 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Mon, 30 Jun 2025 00:58:32 +0200 Subject: [PATCH 102/171] Fix close button in sidepane and align height with top menu --- .../users/-components/UserProfileSidePane.tsx | 28 +++++++++++++------ .../shared-webapp/ui/components/SideMenu.tsx | 2 +- 2 files changed, 21 insertions(+), 9 deletions(-) diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx index b09d4a957..5b1cb3ca8 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx @@ -26,7 +26,7 @@ interface UserProfileSidePaneProps { export function UserProfileSidePane({ user, isOpen, onClose, onDeleteUser }: Readonly) { const userInfo = useUserInfo(); const sidePaneRef = useRef(null); - const closeButtonRef = useRef(null); + const closeButtonRef = useRef(null); // Focus management and keyboard navigation - only focus close button on mobile useEffect(() => { @@ -111,18 +111,30 @@ export function UserProfileSidePane({ user, isOpen, onClose, onDeleteUser }: Rea {/* Side pane */}
- {/* Header */} -
- + {/* Close button - positioned like modal dialogs */} + { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + onClose(); + } + }} + tabIndex={0} + role="button" + className="absolute top-3 right-2 z-10 h-10 w-10 cursor-pointer p-2 hover:bg-muted focus:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-ring" + aria-label={t`Close user profile`} + /> + +
+ User profile -
{/* Content */} diff --git a/application/shared-webapp/ui/components/SideMenu.tsx b/application/shared-webapp/ui/components/SideMenu.tsx index 8cccbe19f..d5a2e7ff6 100644 --- a/application/shared-webapp/ui/components/SideMenu.tsx +++ b/application/shared-webapp/ui/components/SideMenu.tsx @@ -360,7 +360,7 @@ export function SideMenu({ children, ariaLabel, topMenuContent }: Readonly e.key === "Enter" && closeOverlay()} role="button" From 97ccddddd0a051a9a9e01c81daa51a5fd7851db4 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Mon, 30 Jun 2025 01:35:06 +0200 Subject: [PATCH 103/171] Collapse filter buttons when there is no space --- .../admin/users/-components/UserQuerying.tsx | 126 +++++++++++++++--- 1 file changed, 108 insertions(+), 18 deletions(-) diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx index 173b91397..beb1d70f1 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx @@ -12,9 +12,10 @@ import { Modal } from "@repo/ui/components/Modal"; import { SearchField } from "@repo/ui/components/SearchField"; import { Select, SelectItem } from "@repo/ui/components/Select"; import { useSideMenuLayout } from "@repo/ui/hooks/useSideMenuLayout"; +import { MEDIA_QUERIES } from "@repo/ui/utils/responsive"; import { useLocation, useNavigate } from "@tanstack/react-router"; import { ListFilter, ListFilterPlus, XIcon } from "lucide-react"; -import { useCallback, useEffect, useState } from "react"; +import { useCallback, useEffect, useRef, useState } from "react"; // SearchParams interface defines the structure of URL query parameters interface SearchParams { @@ -37,13 +38,15 @@ interface SearchParams { export function UserQuerying() { const navigate = useNavigate(); const searchParams = (useLocation().search as SearchParams) ?? {}; - const { isOverlayOpen, isMobileMenuOpen, isCollapsed, isLargeScreen } = useSideMenuLayout(); + const { isOverlayOpen, isMobileMenuOpen } = useSideMenuLayout(); + const containerRef = useRef(null); const [search, setSearch] = useState(searchParams.search); const [showAllFilters, setShowAllFilters] = useState( Boolean(searchParams.userRole ?? searchParams.userStatus ?? searchParams.startDate ?? searchParams.endDate) ); const [searchTimeoutId, setSearchTimeoutId] = useState(null); const [isFilterPanelOpen, setIsFilterPanelOpen] = useState(false); + const [, forceUpdate] = useState({}); // Convert URL date strings to DateRange if they exist const dateRange = @@ -100,21 +103,73 @@ export function UserQuerying() { const activeFilterCount = getActiveFilterCount(); - // Handle screen size and side menu changes to show/hide filters appropriately + // Handle screen size and container space changes to show/hide filters appropriately useEffect(() => { - // Consider screen size AND side menu state for available space - // On XL screens: show inline filters only when side menu is collapsed - // On smaller screens: always use modal regardless of side menu state - const hasSpaceForInlineFilters = isLargeScreen && isCollapsed && !isOverlayOpen && !isMobileMenuOpen; + const checkFilterSpace = () => { + // Double-check screen size with direct media query for cross-browser consistency + const isXlScreenDirect = window.matchMedia(MEDIA_QUERIES.xl).matches; - if (hasSpaceForInlineFilters && activeFilterCount > 0 && !showAllFilters) { - // Show inline filters if there's space and active filters exist - setShowAllFilters(true); - } else if (!hasSpaceForInlineFilters && showAllFilters) { - // Hide inline filters if there's insufficient space - setShowAllFilters(false); - } - }, [activeFilterCount, showAllFilters, isOverlayOpen, isMobileMenuOpen, isCollapsed, isLargeScreen]); + if (!isXlScreenDirect || isOverlayOpen || isMobileMenuOpen) { + // On smaller screens or when overlays are open, always use modal + if (showAllFilters) { + setShowAllFilters(false); + } + return; + } + + if (!containerRef.current) return; + + // Measure the actual available space by finding the parent toolbar container + const toolbarContainer = containerRef.current.closest('.flex.items-center.justify-between') as HTMLElement; + if (!toolbarContainer) return; + + const toolbarWidth = toolbarContainer.offsetWidth; + const rightSideButtons = toolbarContainer.querySelector('.flex.items-center.gap-2:last-child') as HTMLElement; + const searchField = containerRef.current.querySelector('input[type="text"]') as HTMLElement; + const filterButton = containerRef.current.querySelector('[data-testid="filter-button"]') as HTMLElement; + + // Calculate space used by existing elements + const searchWidth = searchField?.offsetWidth || 300; + const filterButtonWidth = filterButton?.offsetWidth || 50; + const rightSideWidth = rightSideButtons?.offsetWidth || 200; + const gaps = 16; // gap-2 between main sections + const minimumFilterSpace = 450; // Minimum space needed for all three filter controls + + const usedSpace = searchWidth + filterButtonWidth + rightSideWidth + gaps; + const availableSpace = toolbarWidth - usedSpace; + + const hasSpaceForInlineFilters = availableSpace >= minimumFilterSpace; + + if (hasSpaceForInlineFilters && activeFilterCount > 0 && !showAllFilters) { + // Show inline filters if there's space and active filters exist + setShowAllFilters(true); + } else if (!hasSpaceForInlineFilters && showAllFilters) { + // Hide inline filters if there's insufficient space + setShowAllFilters(false); + } + }; + + // Run check immediately + checkFilterSpace(); + + // Also listen for resize events to handle browser-specific timing issues + const handleResize = () => { + // Small delay to ensure all hooks have updated + setTimeout(checkFilterSpace, 50); + }; + + // Force a recheck after mount to ensure correct initial state across browsers + const timeoutId = setTimeout(() => { + forceUpdate({}); + checkFilterSpace(); + }, 100); + + window.addEventListener("resize", handleResize); + return () => { + window.removeEventListener("resize", handleResize); + clearTimeout(timeoutId); + }; + }, [activeFilterCount, showAllFilters, isOverlayOpen, isMobileMenuOpen]); const clearAllFilters = () => { updateFilter({ userRole: undefined, userStatus: undefined, startDate: undefined, endDate: undefined }); @@ -123,7 +178,7 @@ export function UserQuerying() { }; return ( -
+
{ - // Determine if we have space for inline filters - const hasSpaceForInlineFilters = isLargeScreen && isCollapsed && !isOverlayOpen && !isMobileMenuOpen; + // Determine if we have space for inline filters with cross-browser check + const isXlScreenDirect = window.matchMedia(MEDIA_QUERIES.xl).matches; + + if (!isXlScreenDirect || isOverlayOpen || isMobileMenuOpen) { + // On smaller screens or when overlays are open, always use modal + setIsFilterPanelOpen(true); + return; + } + + if (!containerRef.current) { + setIsFilterPanelOpen(true); + return; + } + + // Measure the actual available space by finding the parent toolbar container + const toolbarContainer = containerRef.current.closest('.flex.items-center.justify-between') as HTMLElement; + if (!toolbarContainer) { + setIsFilterPanelOpen(true); + return; + } + + const toolbarWidth = toolbarContainer.offsetWidth; + const rightSideButtons = toolbarContainer.querySelector('.flex.items-center.gap-2:last-child') as HTMLElement; + const searchField = containerRef.current.querySelector('input[type="text"]') as HTMLElement; + const filterButton = containerRef.current.querySelector('[data-testid="filter-button"]') as HTMLElement; + + // Calculate space used by existing elements + const searchWidth = searchField?.offsetWidth || 300; + const filterButtonWidth = filterButton?.offsetWidth || 50; + const rightSideWidth = rightSideButtons?.offsetWidth || 200; + const gaps = 16; // gap-2 between main sections + const minimumFilterSpace = 450; // Minimum space needed for all three filter controls + + const usedSpace = searchWidth + filterButtonWidth + rightSideWidth + gaps; + const availableSpace = toolbarWidth - usedSpace; + + const hasSpaceForInlineFilters = availableSpace >= minimumFilterSpace; if (hasSpaceForInlineFilters && showAllFilters) { // If filters are showing and we have space, clear them From edb956c0070d54e3a195e199307a6219e877fc34 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Mon, 30 Jun 2025 10:31:27 +0200 Subject: [PATCH 104/171] Make user filter bar buttons collapse and expand depending on available space --- .../admin/users/-components/UserQuerying.tsx | 47 ++++++++++++++++--- 1 file changed, 40 insertions(+), 7 deletions(-) diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx index beb1d70f1..78366a4c8 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx @@ -105,13 +105,24 @@ export function UserQuerying() { // Handle screen size and container space changes to show/hide filters appropriately useEffect(() => { + let debounceTimeout: NodeJS.Timeout | null = null; + let lastStateChange = 0; + const checkFilterSpace = () => { + const now = Date.now(); + + // Circuit breaker: prevent rapid state changes + if (now - lastStateChange < 200) { + return; + } + // Double-check screen size with direct media query for cross-browser consistency const isXlScreenDirect = window.matchMedia(MEDIA_QUERIES.xl).matches; if (!isXlScreenDirect || isOverlayOpen || isMobileMenuOpen) { // On smaller screens or when overlays are open, always use modal if (showAllFilters) { + lastStateChange = now; setShowAllFilters(false); } return; @@ -124,14 +135,13 @@ export function UserQuerying() { if (!toolbarContainer) return; const toolbarWidth = toolbarContainer.offsetWidth; - const rightSideButtons = toolbarContainer.querySelector('.flex.items-center.gap-2:last-child') as HTMLElement; const searchField = containerRef.current.querySelector('input[type="text"]') as HTMLElement; const filterButton = containerRef.current.querySelector('[data-testid="filter-button"]') as HTMLElement; - // Calculate space used by existing elements + // Calculate space used by existing elements - ALWAYS assume filters are hidden for measurement const searchWidth = searchField?.offsetWidth || 300; const filterButtonWidth = filterButton?.offsetWidth || 50; - const rightSideWidth = rightSideButtons?.offsetWidth || 200; + const rightSideWidth = 130; // Fixed width for action buttons (not affected by filter state) const gaps = 16; // gap-2 between main sections const minimumFilterSpace = 450; // Minimum space needed for all three filter controls @@ -141,21 +151,36 @@ export function UserQuerying() { const hasSpaceForInlineFilters = availableSpace >= minimumFilterSpace; if (hasSpaceForInlineFilters && activeFilterCount > 0 && !showAllFilters) { - // Show inline filters if there's space and active filters exist + lastStateChange = now; setShowAllFilters(true); } else if (!hasSpaceForInlineFilters && showAllFilters) { - // Hide inline filters if there's insufficient space + lastStateChange = now; setShowAllFilters(false); } }; + const debouncedCheckFilterSpace = () => { + if (debounceTimeout) { + clearTimeout(debounceTimeout); + } + debounceTimeout = setTimeout(checkFilterSpace, 100); + }; + // Run check immediately checkFilterSpace(); // Also listen for resize events to handle browser-specific timing issues const handleResize = () => { - // Small delay to ensure all hooks have updated - setTimeout(checkFilterSpace, 50); + debouncedCheckFilterSpace(); + }; + + // Listen for side menu events that affect layout + const handleSideMenuToggle = () => { + debouncedCheckFilterSpace(); + }; + + const handleSideMenuResize = () => { + debouncedCheckFilterSpace(); }; // Force a recheck after mount to ensure correct initial state across browsers @@ -165,9 +190,17 @@ export function UserQuerying() { }, 100); window.addEventListener("resize", handleResize); + window.addEventListener("side-menu-toggle", handleSideMenuToggle); + window.addEventListener("side-menu-resize", handleSideMenuResize); + return () => { window.removeEventListener("resize", handleResize); + window.removeEventListener("side-menu-toggle", handleSideMenuToggle); + window.removeEventListener("side-menu-resize", handleSideMenuResize); clearTimeout(timeoutId); + if (debounceTimeout) { + clearTimeout(debounceTimeout); + } }; }, [activeFilterCount, showAllFilters, isOverlayOpen, isMobileMenuOpen]); From 31f7a4b08d0af22b94040fef300da33ecf23cddb Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Mon, 30 Jun 2025 10:35:23 +0200 Subject: [PATCH 105/171] Ensure space for filter buttons is calculated when showing/hiding user sidebar pane --- .../admin/users/-components/UserQuerying.tsx | 24 ++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx index 78366a4c8..32f75c933 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx @@ -103,6 +103,28 @@ export function UserQuerying() { const activeFilterCount = getActiveFilterCount(); + // Detect if side pane is open by checking DOM + const [isSidePaneOpen, setIsSidePaneOpen] = useState(false); + + useEffect(() => { + const checkSidePaneState = () => { + const sidePane = document.querySelector('[class*="fixed"][class*="inset-0"][class*="z-[60]"]'); + const isOpen = !!sidePane; + if (isOpen !== isSidePaneOpen) { + setIsSidePaneOpen(isOpen); + } + }; + + // Check immediately + checkSidePaneState(); + + // Use MutationObserver to detect when side pane is added/removed + const observer = new MutationObserver(checkSidePaneState); + observer.observe(document.body, { childList: true, subtree: true }); + + return () => observer.disconnect(); + }, [isSidePaneOpen]); + // Handle screen size and container space changes to show/hide filters appropriately useEffect(() => { let debounceTimeout: NodeJS.Timeout | null = null; @@ -202,7 +224,7 @@ export function UserQuerying() { clearTimeout(debounceTimeout); } }; - }, [activeFilterCount, showAllFilters, isOverlayOpen, isMobileMenuOpen]); + }, [activeFilterCount, showAllFilters, isOverlayOpen, isMobileMenuOpen, isSidePaneOpen]); const clearAllFilters = () => { updateFilter({ userRole: undefined, userStatus: undefined, startDate: undefined, endDate: undefined }); From 16c24f2c953deefe51dd899e7b7570f219f22fc8 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Mon, 30 Jun 2025 10:44:03 +0200 Subject: [PATCH 106/171] Remove logic for showing/hiding filter bar buttons based on screen size and rely exclusively on available space --- .../admin/users/-components/UserQuerying.tsx | 21 +++++++------------ 1 file changed, 7 insertions(+), 14 deletions(-) diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx index 32f75c933..190a305e0 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx @@ -138,11 +138,8 @@ export function UserQuerying() { return; } - // Double-check screen size with direct media query for cross-browser consistency - const isXlScreenDirect = window.matchMedia(MEDIA_QUERIES.xl).matches; - - if (!isXlScreenDirect || isOverlayOpen || isMobileMenuOpen) { - // On smaller screens or when overlays are open, always use modal + // Only force modal when overlays are open (blocks interaction) + if (isOverlayOpen || isMobileMenuOpen) { if (showAllFilters) { lastStateChange = now; setShowAllFilters(false); @@ -224,7 +221,7 @@ export function UserQuerying() { clearTimeout(debounceTimeout); } }; - }, [activeFilterCount, showAllFilters, isOverlayOpen, isMobileMenuOpen, isSidePaneOpen]); + }, [activeFilterCount, showAllFilters, isMobileMenuOpen, isSidePaneOpen]); const clearAllFilters = () => { updateFilter({ userRole: undefined, userStatus: undefined, startDate: undefined, endDate: undefined }); @@ -308,11 +305,8 @@ export function UserQuerying() { aria-label={showAllFilters ? t`Clear filters` : t`Show filters`} data-testid="filter-button" onPress={() => { - // Determine if we have space for inline filters with cross-browser check - const isXlScreenDirect = window.matchMedia(MEDIA_QUERIES.xl).matches; - - if (!isXlScreenDirect || isOverlayOpen || isMobileMenuOpen) { - // On smaller screens or when overlays are open, always use modal + // Force modal when overlays are open (blocks interaction) + if (isOverlayOpen || isMobileMenuOpen) { setIsFilterPanelOpen(true); return; } @@ -330,14 +324,13 @@ export function UserQuerying() { } const toolbarWidth = toolbarContainer.offsetWidth; - const rightSideButtons = toolbarContainer.querySelector('.flex.items-center.gap-2:last-child') as HTMLElement; const searchField = containerRef.current.querySelector('input[type="text"]') as HTMLElement; const filterButton = containerRef.current.querySelector('[data-testid="filter-button"]') as HTMLElement; - // Calculate space used by existing elements + // Calculate space used by existing elements - ALWAYS assume filters are hidden for measurement const searchWidth = searchField?.offsetWidth || 300; const filterButtonWidth = filterButton?.offsetWidth || 50; - const rightSideWidth = rightSideButtons?.offsetWidth || 200; + const rightSideWidth = 130; // Fixed width for action buttons (not affected by filter state) const gaps = 16; // gap-2 between main sections const minimumFilterSpace = 450; // Minimum space needed for all three filter controls From a3e19afc6a0cb953cbe6e532cc08d27c5043cf2e Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Mon, 30 Jun 2025 11:22:45 +0200 Subject: [PATCH 107/171] Make Invite user button small when user filter bar is expanded --- .../routes/admin/users/-components/UserQuerying.tsx | 11 ++++++++++- .../routes/admin/users/-components/UserToolbar.tsx | 7 ++++--- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx index 190a305e0..64e7ca01b 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx @@ -29,13 +29,17 @@ interface SearchParams { pageOffset: number | undefined; } +interface UserQueryingProps { + onFilterStateChange?: (hasActiveFilters: boolean) => void; +} + /** * UserQuerying component handles the user list filtering. * Uses URL parameters as the single source of truth for all filters. * The only local state is for the search input, which is debounced * to prevent too many URL updates while typing. */ -export function UserQuerying() { +export function UserQuerying({ onFilterStateChange }: UserQueryingProps = {}) { const navigate = useNavigate(); const searchParams = (useLocation().search as SearchParams) ?? {}; const { isOverlayOpen, isMobileMenuOpen } = useSideMenuLayout(); @@ -223,6 +227,11 @@ export function UserQuerying() { }; }, [activeFilterCount, showAllFilters, isMobileMenuOpen, isSidePaneOpen]); + // Notify parent component when active filter count changes + useEffect(() => { + onFilterStateChange?.(activeFilterCount > 0); + }, [activeFilterCount, onFilterStateChange]); + const clearAllFilters = () => { updateFilter({ userRole: undefined, userStatus: undefined, startDate: undefined, endDate: undefined }); setShowAllFilters(false); diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx index c882b88f7..547816112 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx @@ -17,15 +17,16 @@ interface UserToolbarProps { export function UserToolbar({ selectedUsers, onSelectedUsersChange }: Readonly) { const [isInviteModalOpen, setIsInviteModalOpen] = useState(false); const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); + const [hasActiveFilters, setHasActiveFilters] = useState(false); return (
- +
{selectedUsers.length < 2 && ( @@ -33,7 +34,7 @@ export function UserToolbar({ selectedUsers, onSelectedUsersChange }: Readonly 1 && ( From 5cceacb72a076b28238fddb0621b7514b360c130 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Mon, 30 Jun 2025 12:10:56 +0200 Subject: [PATCH 108/171] Collapse invite users when filter bar is expanded without filters --- .../admin/users/-components/UserQuerying.tsx | 22 +++++++++++++------ .../admin/users/-components/UserToolbar.tsx | 12 +++++++--- 2 files changed, 24 insertions(+), 10 deletions(-) diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx index 64e7ca01b..20ddada75 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx @@ -30,7 +30,7 @@ interface SearchParams { } interface UserQueryingProps { - onFilterStateChange?: (hasActiveFilters: boolean) => void; + onFilterStateChange?: (isFilterBarExpanded: boolean, hasActiveFilters: boolean) => void; } /** @@ -164,9 +164,13 @@ export function UserQuerying({ onFilterStateChange }: UserQueryingProps = {}) { // Calculate space used by existing elements - ALWAYS assume filters are hidden for measurement const searchWidth = searchField?.offsetWidth || 300; const filterButtonWidth = filterButton?.offsetWidth || 50; - const rightSideWidth = 130; // Fixed width for action buttons (not affected by filter state) + + // For space calculation, assume buttons will be compact (130px) when filters are shown + // This accounts for the fact that showing filters makes buttons compact, freeing up space + const rightSideWidth = 130; + const gaps = 16; // gap-2 between main sections - const minimumFilterSpace = 450; // Minimum space needed for all three filter controls + const minimumFilterSpace = 300; // Minimum space needed for all three filter controls const usedSpace = searchWidth + filterButtonWidth + rightSideWidth + gaps; const availableSpace = toolbarWidth - usedSpace; @@ -227,10 +231,10 @@ export function UserQuerying({ onFilterStateChange }: UserQueryingProps = {}) { }; }, [activeFilterCount, showAllFilters, isMobileMenuOpen, isSidePaneOpen]); - // Notify parent component when active filter count changes + // Notify parent component when filter state changes useEffect(() => { - onFilterStateChange?.(activeFilterCount > 0); - }, [activeFilterCount, onFilterStateChange]); + onFilterStateChange?.(showAllFilters, activeFilterCount > 0); + }, [showAllFilters, activeFilterCount, onFilterStateChange]); const clearAllFilters = () => { updateFilter({ userRole: undefined, userStatus: undefined, startDate: undefined, endDate: undefined }); @@ -339,7 +343,11 @@ export function UserQuerying({ onFilterStateChange }: UserQueryingProps = {}) { // Calculate space used by existing elements - ALWAYS assume filters are hidden for measurement const searchWidth = searchField?.offsetWidth || 300; const filterButtonWidth = filterButton?.offsetWidth || 50; - const rightSideWidth = 130; // Fixed width for action buttons (not affected by filter state) + + // For space calculation, assume buttons will be compact (130px) when filters are shown + // This accounts for the fact that showing filters makes buttons compact, freeing up space + const rightSideWidth = 130; + const gaps = 16; // gap-2 between main sections const minimumFilterSpace = 450; // Minimum space needed for all three filter controls diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx index 547816112..0f56eae34 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx @@ -17,16 +17,22 @@ interface UserToolbarProps { export function UserToolbar({ selectedUsers, onSelectedUsersChange }: Readonly) { const [isInviteModalOpen, setIsInviteModalOpen] = useState(false); const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); + const [isFilterBarExpanded, setIsFilterBarExpanded] = useState(false); const [hasActiveFilters, setHasActiveFilters] = useState(false); + const handleFilterStateChange = (isExpanded: boolean, hasFilters: boolean) => { + setIsFilterBarExpanded(isExpanded); + setHasActiveFilters(hasFilters); + }; + return (
- +
{selectedUsers.length < 2 && ( @@ -34,7 +40,7 @@ export function UserToolbar({ selectedUsers, onSelectedUsersChange }: Readonly 1 && ( From 9520cf347bb6e899914382abd63e6b01ca3688d8 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Mon, 30 Jun 2025 12:16:26 +0200 Subject: [PATCH 109/171] Show big invite user button on 2xl screens --- .../routes/admin/users/-components/UserQuerying.tsx | 8 ++++++-- .../WebApp/routes/admin/users/-components/UserToolbar.tsx | 8 +++++--- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx index 20ddada75..e07d8d7af 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx @@ -30,7 +30,7 @@ interface SearchParams { } interface UserQueryingProps { - onFilterStateChange?: (isFilterBarExpanded: boolean, hasActiveFilters: boolean) => void; + onFilterStateChange?: (isFilterBarExpanded: boolean, hasActiveFilters: boolean, shouldUseCompactButtons: boolean) => void; } /** @@ -233,7 +233,11 @@ export function UserQuerying({ onFilterStateChange }: UserQueryingProps = {}) { // Notify parent component when filter state changes useEffect(() => { - onFilterStateChange?.(showAllFilters, activeFilterCount > 0); + // On 2XL+ screens, keep full buttons even with filters + const is2XlScreen = window.matchMedia('(min-width: 1536px)').matches; + const shouldUseCompactButtons = !is2XlScreen && (showAllFilters || activeFilterCount > 0); + + onFilterStateChange?.(showAllFilters, activeFilterCount > 0, shouldUseCompactButtons); }, [showAllFilters, activeFilterCount, onFilterStateChange]); const clearAllFilters = () => { diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx index 0f56eae34..cde3cfb58 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx @@ -19,10 +19,12 @@ export function UserToolbar({ selectedUsers, onSelectedUsersChange }: Readonly { + const handleFilterStateChange = (isExpanded: boolean, hasFilters: boolean, useCompact: boolean) => { setIsFilterBarExpanded(isExpanded); setHasActiveFilters(hasFilters); + setShouldUseCompactButtons(useCompact); }; return ( @@ -32,7 +34,7 @@ export function UserToolbar({ selectedUsers, onSelectedUsersChange }: Readonly setIsInviteModalOpen(true)}> - + Invite user @@ -40,7 +42,7 @@ export function UserToolbar({ selectedUsers, onSelectedUsersChange }: Readonly 1 && ( From 0f6ad1f7ea03441136c762eab003e43627d51747 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Mon, 30 Jun 2025 12:42:02 +0200 Subject: [PATCH 110/171] Remove checkboxes in UserTable to enable easy user switching while retaining multiselect via keyboard modifiers --- .../admin/users/-components/UserTable.tsx | 22 +++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx index 048c88572..bd6b07b04 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx @@ -94,6 +94,9 @@ export function UserTable({ onSelectedUsersChange([]); }, [onSelectedUsersChange]); + // Track the currently focused user for keyboard navigation + const [focusedUserId, setFocusedUserId] = useState(null); + const handleSelectionChange = useCallback( (keys: Selection) => { if (keys === "all") { @@ -118,6 +121,16 @@ export function UserTable({ [users?.users, onSelectedUsersChange, onViewProfile] ); + // Handle keyboard focus changes to set active user + useEffect(() => { + if (focusedUserId) { + const focusedUser = users?.users.find(user => user.id === focusedUserId); + if (focusedUser) { + onViewProfile(focusedUser); + } + } + }, [focusedUserId, users?.users, onViewProfile]); + if (isLoading) { return null; } @@ -130,7 +143,7 @@ export function UserTable({ user.id)} onSelectionChange={handleSelectionChange} sortDescriptor={sortDescriptor} @@ -159,7 +172,12 @@ export function UserTable({ {users?.users.map((user) => ( - + setFocusedUserId(user.id)} + onBlur={() => setFocusedUserId(null)} + > Date: Mon, 30 Jun 2025 13:02:28 +0200 Subject: [PATCH 111/171] Add tooltips to all buttons when displaying only the icon --- .../admin/users/-components/UserQuerying.tsx | 251 ++++++++++-------- .../admin/users/-components/UserTable.tsx | 20 +- .../admin/users/-components/UserToolbar.tsx | 43 ++- 3 files changed, 167 insertions(+), 147 deletions(-) diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx index e07d8d7af..5b7ff7d5e 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/UserQuerying.tsx @@ -11,8 +11,8 @@ import { Heading } from "@repo/ui/components/Heading"; import { Modal } from "@repo/ui/components/Modal"; import { SearchField } from "@repo/ui/components/SearchField"; import { Select, SelectItem } from "@repo/ui/components/Select"; +import { Tooltip, TooltipTrigger } from "@repo/ui/components/Tooltip"; import { useSideMenuLayout } from "@repo/ui/hooks/useSideMenuLayout"; -import { MEDIA_QUERIES } from "@repo/ui/utils/responsive"; import { useLocation, useNavigate } from "@tanstack/react-router"; import { ListFilter, ListFilterPlus, XIcon } from "lucide-react"; import { useCallback, useEffect, useRef, useState } from "react"; @@ -30,7 +30,11 @@ interface SearchParams { } interface UserQueryingProps { - onFilterStateChange?: (isFilterBarExpanded: boolean, hasActiveFilters: boolean, shouldUseCompactButtons: boolean) => void; + onFilterStateChange?: ( + isFilterBarExpanded: boolean, + hasActiveFilters: boolean, + shouldUseCompactButtons: boolean + ) => void; } /** @@ -109,7 +113,7 @@ export function UserQuerying({ onFilterStateChange }: UserQueryingProps = {}) { // Detect if side pane is open by checking DOM const [isSidePaneOpen, setIsSidePaneOpen] = useState(false); - + useEffect(() => { const checkSidePaneState = () => { const sidePane = document.querySelector('[class*="fixed"][class*="inset-0"][class*="z-[60]"]'); @@ -121,11 +125,11 @@ export function UserQuerying({ onFilterStateChange }: UserQueryingProps = {}) { // Check immediately checkSidePaneState(); - + // Use MutationObserver to detect when side pane is added/removed const observer = new MutationObserver(checkSidePaneState); observer.observe(document.body, { childList: true, subtree: true }); - + return () => observer.disconnect(); }, [isSidePaneOpen]); @@ -133,17 +137,54 @@ export function UserQuerying({ onFilterStateChange }: UserQueryingProps = {}) { useEffect(() => { let debounceTimeout: NodeJS.Timeout | null = null; let lastStateChange = 0; - + + const shouldSkipSpaceCheck = (now: number) => { + return now - lastStateChange < 200; + }; + + const shouldHideFiltersForOverlays = () => { + return isOverlayOpen || isMobileMenuOpen; + }; + + const getToolbarContainer = () => { + if (!containerRef.current) { + return null; + } + return containerRef.current.closest(".flex.items-center.justify-between") as HTMLElement; + }; + + const calculateAvailableSpace = (toolbarContainer: HTMLElement) => { + const toolbarWidth = toolbarContainer.offsetWidth; + const searchField = containerRef.current?.querySelector('input[type="text"]') as HTMLElement; + const filterButton = containerRef.current?.querySelector('[data-testid="filter-button"]') as HTMLElement; + + const searchWidth = searchField?.offsetWidth || 300; + const filterButtonWidth = filterButton?.offsetWidth || 50; + const rightSideWidth = 130; + const gaps = 16; + + const usedSpace = searchWidth + filterButtonWidth + rightSideWidth + gaps; + return toolbarWidth - usedSpace; + }; + + const updateFiltersVisibility = (hasSpace: boolean, now: number) => { + if (hasSpace && activeFilterCount > 0 && !showAllFilters) { + lastStateChange = now; + setShowAllFilters(true); + } else if (!hasSpace && showAllFilters) { + lastStateChange = now; + setShowAllFilters(false); + } + }; + const checkFilterSpace = () => { const now = Date.now(); - - // Circuit breaker: prevent rapid state changes - if (now - lastStateChange < 200) { + + if (shouldSkipSpaceCheck(now)) { return; } - - // Only force modal when overlays are open (blocks interaction) - if (isOverlayOpen || isMobileMenuOpen) { + + if (shouldHideFiltersForOverlays()) { if (showAllFilters) { lastStateChange = now; setShowAllFilters(false); @@ -151,39 +192,16 @@ export function UserQuerying({ onFilterStateChange }: UserQueryingProps = {}) { return; } - if (!containerRef.current) return; + const toolbarContainer = getToolbarContainer(); + if (!toolbarContainer) { + return; + } - // Measure the actual available space by finding the parent toolbar container - const toolbarContainer = containerRef.current.closest('.flex.items-center.justify-between') as HTMLElement; - if (!toolbarContainer) return; - - const toolbarWidth = toolbarContainer.offsetWidth; - const searchField = containerRef.current.querySelector('input[type="text"]') as HTMLElement; - const filterButton = containerRef.current.querySelector('[data-testid="filter-button"]') as HTMLElement; - - // Calculate space used by existing elements - ALWAYS assume filters are hidden for measurement - const searchWidth = searchField?.offsetWidth || 300; - const filterButtonWidth = filterButton?.offsetWidth || 50; - - // For space calculation, assume buttons will be compact (130px) when filters are shown - // This accounts for the fact that showing filters makes buttons compact, freeing up space - const rightSideWidth = 130; - - const gaps = 16; // gap-2 between main sections - const minimumFilterSpace = 300; // Minimum space needed for all three filter controls - - const usedSpace = searchWidth + filterButtonWidth + rightSideWidth + gaps; - const availableSpace = toolbarWidth - usedSpace; - + const availableSpace = calculateAvailableSpace(toolbarContainer); + const minimumFilterSpace = 300; const hasSpaceForInlineFilters = availableSpace >= minimumFilterSpace; - if (hasSpaceForInlineFilters && activeFilterCount > 0 && !showAllFilters) { - lastStateChange = now; - setShowAllFilters(true); - } else if (!hasSpaceForInlineFilters && showAllFilters) { - lastStateChange = now; - setShowAllFilters(false); - } + updateFiltersVisibility(hasSpaceForInlineFilters, now); }; const debouncedCheckFilterSpace = () => { @@ -219,7 +237,7 @@ export function UserQuerying({ onFilterStateChange }: UserQueryingProps = {}) { window.addEventListener("resize", handleResize); window.addEventListener("side-menu-toggle", handleSideMenuToggle); window.addEventListener("side-menu-resize", handleSideMenuResize); - + return () => { window.removeEventListener("resize", handleResize); window.removeEventListener("side-menu-toggle", handleSideMenuToggle); @@ -229,14 +247,14 @@ export function UserQuerying({ onFilterStateChange }: UserQueryingProps = {}) { clearTimeout(debounceTimeout); } }; - }, [activeFilterCount, showAllFilters, isMobileMenuOpen, isSidePaneOpen]); + }, [activeFilterCount, showAllFilters, isMobileMenuOpen, isOverlayOpen]); // Notify parent component when filter state changes useEffect(() => { // On 2XL+ screens, keep full buttons even with filters - const is2XlScreen = window.matchMedia('(min-width: 1536px)').matches; + const is2XlScreen = window.matchMedia("(min-width: 1536px)").matches; const shouldUseCompactButtons = !is2XlScreen && (showAllFilters || activeFilterCount > 0); - + onFilterStateChange?.(showAllFilters, activeFilterCount > 0, shouldUseCompactButtons); }, [showAllFilters, activeFilterCount, onFilterStateChange]); @@ -316,75 +334,80 @@ export function UserQuerying({ onFilterStateChange }: UserQueryingProps = {}) { )} {/* Filter button with responsive behavior */} - + }} + > + {showAllFilters ? ( + + ) : ( + + )} + {activeFilterCount > 0 && !showAllFilters && ( + + {activeFilterCount} + + )} + + {showAllFilters ? Clear filters : Show filters} + {/* Filter dialog for small/medium screens */} diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx index bd6b07b04..21bff7a43 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/UserTable.tsx @@ -94,9 +94,6 @@ export function UserTable({ onSelectedUsersChange([]); }, [onSelectedUsersChange]); - // Track the currently focused user for keyboard navigation - const [focusedUserId, setFocusedUserId] = useState(null); - const handleSelectionChange = useCallback( (keys: Selection) => { if (keys === "all") { @@ -121,16 +118,6 @@ export function UserTable({ [users?.users, onSelectedUsersChange, onViewProfile] ); - // Handle keyboard focus changes to set active user - useEffect(() => { - if (focusedUserId) { - const focusedUser = users?.users.find(user => user.id === focusedUserId); - if (focusedUser) { - onViewProfile(focusedUser); - } - } - }, [focusedUserId, users?.users, onViewProfile]); - if (isLoading) { return null; } @@ -172,12 +159,7 @@ export function UserTable({ {users?.users.map((user) => ( - setFocusedUserId(user.id)} - onBlur={() => setFocusedUserId(null)} - > + ) { const [isInviteModalOpen, setIsInviteModalOpen] = useState(false); const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); - const [isFilterBarExpanded, setIsFilterBarExpanded] = useState(false); - const [hasActiveFilters, setHasActiveFilters] = useState(false); + const [_isFilterBarExpanded, setIsFilterBarExpanded] = useState(false); + const [_hasActiveFilters, setHasActiveFilters] = useState(false); const [shouldUseCompactButtons, setShouldUseCompactButtons] = useState(false); const handleFilterStateChange = (isExpanded: boolean, hasFilters: boolean, useCompact: boolean) => { @@ -32,20 +33,34 @@ export function UserToolbar({ selectedUsers, onSelectedUsersChange }: Readonly
{selectedUsers.length < 2 && ( - + + + {shouldUseCompactButtons && ( + + Invite user + + )} + )} {selectedUsers.length > 1 && ( - + + + {shouldUseCompactButtons && ( + + Delete {selectedUsers.length} users + + )} + )}
From cef619a3577cd138bb85fd393a08974d112e70a4 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Mon, 30 Jun 2025 13:02:43 +0200 Subject: [PATCH 112/171] Translate missing copy --- .../WebApp/shared/translations/locale/da-DK.po | 10 +++++----- .../WebApp/shared/translations/locale/nl-NL.po | 10 +++++----- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/application/account-management/WebApp/shared/translations/locale/da-DK.po b/application/account-management/WebApp/shared/translations/locale/da-DK.po index b5c925d73..c0816602d 100644 --- a/application/account-management/WebApp/shared/translations/locale/da-DK.po +++ b/application/account-management/WebApp/shared/translations/locale/da-DK.po @@ -97,7 +97,7 @@ msgid "Change profile picture" msgstr "Skift profilbillede" msgid "Change role" -msgstr "" +msgstr "Skift rolle" msgid "Change user role" msgstr "Skift brugerrolle" @@ -112,7 +112,7 @@ msgid "Clear filters" msgstr "Ryd filtre" msgid "Close user profile" -msgstr "" +msgstr "Luk brugerprofil" msgid "Continue" msgstr "Fortsæt" @@ -134,7 +134,7 @@ msgstr "Slet" #. placeholder {0}: selectedUsers.length msgid "Delete {0} users" -msgstr "" +msgstr "Slet {0} brugere" msgid "Delete account" msgstr "Slet konto" @@ -399,7 +399,7 @@ msgid "User profile" msgstr "Brugerprofil" msgid "User profile details" -msgstr "" +msgstr "Brugerprofiloplysninger" msgid "User profile menu" msgstr "Brugerprofilmenu" @@ -426,7 +426,7 @@ msgid "Verification code sent" msgstr "Bekræftelseskode sendt" msgid "Verified" -msgstr "" +msgstr "Bekræftet" msgid "Verify" msgstr "Bekræft" diff --git a/application/account-management/WebApp/shared/translations/locale/nl-NL.po b/application/account-management/WebApp/shared/translations/locale/nl-NL.po index fc7bffb2c..da06baf9b 100644 --- a/application/account-management/WebApp/shared/translations/locale/nl-NL.po +++ b/application/account-management/WebApp/shared/translations/locale/nl-NL.po @@ -97,7 +97,7 @@ msgid "Change profile picture" msgstr "Profielfoto wijzigen" msgid "Change role" -msgstr "" +msgstr "Rol wijzigen" msgid "Change user role" msgstr "Gebruikersrol wijzigen" @@ -112,7 +112,7 @@ msgid "Clear filters" msgstr "Filters wissen" msgid "Close user profile" -msgstr "" +msgstr "Gebruikersprofiel sluiten" msgid "Continue" msgstr "Verder" @@ -134,7 +134,7 @@ msgstr "Verwijderen" #. placeholder {0}: selectedUsers.length msgid "Delete {0} users" -msgstr "" +msgstr "Verwijder {0} gebruikers" msgid "Delete account" msgstr "Account verwijderen" @@ -399,7 +399,7 @@ msgid "User profile" msgstr "Gebruikersprofiel" msgid "User profile details" -msgstr "" +msgstr "Details van gebruikersprofiel" msgid "User profile menu" msgstr "Gebruikersprofielmenu" @@ -426,7 +426,7 @@ msgid "Verification code sent" msgstr "Verificatiecode verzonden" msgid "Verified" -msgstr "" +msgstr "Geverifieerd" msgid "Verify" msgstr "Verifiëren" From c2afb31955a03e497b20b7c4b05a01d2f63dcb2f Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Mon, 30 Jun 2025 15:41:58 +0200 Subject: [PATCH 113/171] Improve user sorting to prioritize names with email fallback MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Sort users with names first, users without names last - Add email as final sort criteria for consistent ordering - Apply to both explicit name sorting and default sorting - Ensures predictable pagination behavior 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- .../Features/Users/Domain/UserRepository.cs | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/application/account-management/Core/Features/Users/Domain/UserRepository.cs b/application/account-management/Core/Features/Users/Domain/UserRepository.cs index bd9dcf842..561d1a096 100644 --- a/application/account-management/Core/Features/Users/Domain/UserRepository.cs +++ b/application/account-management/Core/Features/Users/Domain/UserRepository.cs @@ -158,8 +158,16 @@ CancellationToken cancellationToken ? users.OrderBy(u => u.ModifiedAt) : users.OrderByDescending(u => u.ModifiedAt), SortableUserProperties.Name => sortOrder == SortOrder.Ascending - ? users.OrderBy(u => u.FirstName).ThenBy(u => u.LastName) - : users.OrderByDescending(u => u.FirstName).ThenByDescending(u => u.LastName), + ? users.OrderBy(u => u.FirstName == null ? 1 : 0) + .ThenBy(u => u.FirstName) + .ThenBy(u => u.LastName == null ? 1 : 0) + .ThenBy(u => u.LastName) + .ThenBy(u => u.Email) + : users.OrderBy(u => u.FirstName == null ? 0 : 1) + .ThenByDescending(u => u.FirstName) + .ThenBy(u => u.LastName == null ? 0 : 1) + .ThenByDescending(u => u.LastName) + .ThenBy(u => u.Email), SortableUserProperties.Email => sortOrder == SortOrder.Ascending ? users.OrderBy(u => u.Email) : users.OrderByDescending(u => u.Email), @@ -167,6 +175,11 @@ CancellationToken cancellationToken ? users.OrderBy(u => u.Role) : users.OrderByDescending(u => u.Role), _ => users + .OrderBy(u => u.FirstName == null ? 1 : 0) + .ThenBy(u => u.FirstName) + .ThenBy(u => u.LastName == null ? 1 : 0) + .ThenBy(u => u.LastName) + .ThenBy(u => u.Email) }; pageSize ??= 50; From 39119d0addcc6584c4281984b7f6e3bcf96c56db Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Mon, 30 Jun 2025 18:18:22 +0200 Subject: [PATCH 114/171] Add Owner permission guard to UpdateCurrentTenant backend command --- .../Tenants/Commands/UpdateCurrentTenant.cs | 14 ++++++++++++-- .../Tests/Tenants/UpdateCurrentTenantTests.cs | 15 +++++++++++++++ 2 files changed, 27 insertions(+), 2 deletions(-) diff --git a/application/account-management/Core/Features/Tenants/Commands/UpdateCurrentTenant.cs b/application/account-management/Core/Features/Tenants/Commands/UpdateCurrentTenant.cs index 487ec7127..0e23a76d3 100644 --- a/application/account-management/Core/Features/Tenants/Commands/UpdateCurrentTenant.cs +++ b/application/account-management/Core/Features/Tenants/Commands/UpdateCurrentTenant.cs @@ -1,7 +1,9 @@ using FluentValidation; using JetBrains.Annotations; using PlatformPlatform.AccountManagement.Features.Tenants.Domain; +using PlatformPlatform.AccountManagement.Features.Users.Domain; using PlatformPlatform.SharedKernel.Cqrs; +using PlatformPlatform.SharedKernel.ExecutionContext; using PlatformPlatform.SharedKernel.Telemetry; namespace PlatformPlatform.AccountManagement.Features.Tenants.Commands; @@ -20,11 +22,19 @@ public UpdateCurrentTenantValidator() } } -public sealed class UpdateTenantHandler(ITenantRepository tenantRepository, ITelemetryEventsCollector events) - : IRequestHandler +public sealed class UpdateTenantHandler( + ITenantRepository tenantRepository, + IExecutionContext executionContext, + ITelemetryEventsCollector events +) : IRequestHandler { public async Task Handle(UpdateCurrentTenantCommand command, CancellationToken cancellationToken) { + if (executionContext.UserInfo.Role != UserRole.Owner.ToString()) + { + return Result.Forbidden("Only owners are allowed to update tenant information."); + } + var tenant = await tenantRepository.GetCurrentTenantAsync(cancellationToken); tenant.Update(command.Name); diff --git a/application/account-management/Tests/Tenants/UpdateCurrentTenantTests.cs b/application/account-management/Tests/Tenants/UpdateCurrentTenantTests.cs index a34bc4681..7b9c4fd1e 100644 --- a/application/account-management/Tests/Tenants/UpdateCurrentTenantTests.cs +++ b/application/account-management/Tests/Tenants/UpdateCurrentTenantTests.cs @@ -47,4 +47,19 @@ public async Task UpdateCurrentTenant_WhenInvalid_ShouldReturnBadRequest() TelemetryEventsCollectorSpy.AreAllEventsDispatched.Should().BeFalse(); } + + [Fact] + public async Task UpdateCurrentTenant_WhenNonOwner_ShouldReturnForbidden() + { + // Arrange + var command = new UpdateCurrentTenantCommand { Name = Faker.TenantName() }; + + // Act + var response = await AuthenticatedMemberHttpClient.PutAsJsonAsync("/api/account-management/tenants/current", command); + + // Assert + await response.ShouldHaveErrorStatusCode(HttpStatusCode.Forbidden, "Only owners are allowed to update tenant information."); + + TelemetryEventsCollectorSpy.AreAllEventsDispatched.Should().BeFalse(); + } } From 8308568653a83220659a03b20c0633e74692b8a8 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Mon, 30 Jun 2025 23:33:41 +0200 Subject: [PATCH 115/171] Fix account settings form permissions for non-Owner users - Make form submission conditional based on user role - Handle validation errors only for Owner users - Add read-only state and descriptive text for non-Owners - Hide save button for non-Owner users - Add translation support for permission message --- .../WebApp/routes/admin/account/index.tsx | 23 ++++++++++++------- .../shared/translations/locale/da-DK.po | 3 +++ .../shared/translations/locale/en-US.po | 3 +++ .../shared/translations/locale/nl-NL.po | 3 +++ 4 files changed, 24 insertions(+), 8 deletions(-) diff --git a/application/account-management/WebApp/routes/admin/account/index.tsx b/application/account-management/WebApp/routes/admin/account/index.tsx index 790bd19b9..b1fa1a158 100644 --- a/application/account-management/WebApp/routes/admin/account/index.tsx +++ b/application/account-management/WebApp/routes/admin/account/index.tsx @@ -1,7 +1,7 @@ import { SharedSideMenu } from "@/shared/components/SharedSideMenu"; import { TopMenu } from "@/shared/components/topMenu"; import logoWrap from "@/shared/images/logo-wrap.svg"; -import { api } from "@/shared/lib/api/client"; +import { UserRole, api } from "@/shared/lib/api/client"; import { t } from "@lingui/core/macro"; import { Trans } from "@lingui/react/macro"; import { AppLayout } from "@repo/ui/components/AppLayout"; @@ -23,9 +23,12 @@ export const Route = createFileRoute("/admin/account/")({ export function AccountSettings() { const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); - const { data: tenant, isLoading } = api.useQuery("get", "/api/account-management/tenants/current"); + const { data: tenant, isLoading: tenantLoading } = api.useQuery("get", "/api/account-management/tenants/current"); + const { data: currentUser, isLoading: userLoading } = api.useQuery("get", "/api/account-management/users/me"); const updateCurrentTenantMutation = api.useMutation("put", "/api/account-management/tenants/current"); + const isOwner = currentUser?.role === UserRole.Owner; + useEffect(() => { if (updateCurrentTenantMutation.isSuccess) { toastQueue.add({ @@ -37,7 +40,7 @@ export function AccountSettings() { } }, [updateCurrentTenantMutation.isSuccess]); - if (isLoading) { + if (tenantLoading || userLoading) { return null; } @@ -65,8 +68,8 @@ export function AccountSettings() {

@@ -84,12 +87,16 @@ export function AccountSettings() { name="name" defaultValue={tenant?.name ?? ""} isDisabled={updateCurrentTenantMutation.isPending} + isReadOnly={!isOwner} label={t`Account name`} + description={!isOwner ? t`Only account owners can modify the account name` : undefined} validationBehavior="aria" /> - + {isOwner && ( + + )}
diff --git a/application/account-management/WebApp/shared/translations/locale/da-DK.po b/application/account-management/WebApp/shared/translations/locale/da-DK.po index c0816602d..061a34947 100644 --- a/application/account-management/WebApp/shared/translations/locale/da-DK.po +++ b/application/account-management/WebApp/shared/translations/locale/da-DK.po @@ -262,6 +262,9 @@ msgstr "Næste" msgid "OK" msgstr "OK" +msgid "Only account owners can modify the account name" +msgstr "" + msgid "Organization" msgstr "Organisation" diff --git a/application/account-management/WebApp/shared/translations/locale/en-US.po b/application/account-management/WebApp/shared/translations/locale/en-US.po index 02536b45a..7ba5c6be0 100644 --- a/application/account-management/WebApp/shared/translations/locale/en-US.po +++ b/application/account-management/WebApp/shared/translations/locale/en-US.po @@ -262,6 +262,9 @@ msgstr "Next" msgid "OK" msgstr "OK" +msgid "Only account owners can modify the account name" +msgstr "Only account owners can modify the account name" + msgid "Organization" msgstr "Organization" diff --git a/application/account-management/WebApp/shared/translations/locale/nl-NL.po b/application/account-management/WebApp/shared/translations/locale/nl-NL.po index da06baf9b..11ab7296b 100644 --- a/application/account-management/WebApp/shared/translations/locale/nl-NL.po +++ b/application/account-management/WebApp/shared/translations/locale/nl-NL.po @@ -262,6 +262,9 @@ msgstr "Volgende" msgid "OK" msgstr "OK" +msgid "Only account owners can modify the account name" +msgstr "" + msgid "Organization" msgstr "Organisatie" From 05ddf4c040d3239a5106e8d1e9b1693489cf74d1 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Mon, 30 Jun 2025 23:41:15 +0200 Subject: [PATCH 116/171] Hide invite user button from non-Owners in UserToolbar --- .../WebApp/routes/admin/users/-components/UserToolbar.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx index 6f10648a2..992779ac9 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx @@ -1,4 +1,5 @@ import type { components } from "@/shared/lib/api/client"; +import { UserRole, api } from "@/shared/lib/api/client"; import { Trans } from "@lingui/react/macro"; import { Button } from "@repo/ui/components/Button"; import { Tooltip, TooltipTrigger } from "@repo/ui/components/Tooltip"; @@ -16,12 +17,15 @@ interface UserToolbarProps { } export function UserToolbar({ selectedUsers, onSelectedUsersChange }: Readonly) { + const { data: currentUser } = api.useQuery("get", "/api/account-management/users/me"); const [isInviteModalOpen, setIsInviteModalOpen] = useState(false); const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); const [_isFilterBarExpanded, setIsFilterBarExpanded] = useState(false); const [_hasActiveFilters, setHasActiveFilters] = useState(false); const [shouldUseCompactButtons, setShouldUseCompactButtons] = useState(false); + const isOwner = currentUser?.role === UserRole.Owner; + const handleFilterStateChange = (isExpanded: boolean, hasFilters: boolean, useCompact: boolean) => { setIsFilterBarExpanded(isExpanded); setHasActiveFilters(hasFilters); @@ -32,7 +36,7 @@ export function UserToolbar({ selectedUsers, onSelectedUsersChange }: Readonly
- {selectedUsers.length < 2 && ( + {selectedUsers.length < 2 && isOwner && (
- + {isOwner && } Date: Mon, 30 Jun 2025 23:46:51 +0200 Subject: [PATCH 117/171] Hide bulk delete button from non-Owners in UserToolbar --- .../WebApp/routes/admin/users/-components/UserToolbar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx index 992779ac9..3d1726150 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/UserToolbar.tsx @@ -51,7 +51,7 @@ export function UserToolbar({ selectedUsers, onSelectedUsersChange }: Readonly )} - {selectedUsers.length > 1 && ( + {selectedUsers.length > 1 && isOwner && ( + +
- + )} From a64a5f02e2e5faa1871e2c1b30284b5a98f8f61b Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Tue, 1 Jul 2025 00:20:31 +0200 Subject: [PATCH 119/171] Add comprehensive permission-based UI end-to-end tests --- .../e2e/permission-based-ui-flows.spec.ts | 281 ++++++++++++++++++ 1 file changed, 281 insertions(+) create mode 100644 application/account-management/WebApp/tests/e2e/permission-based-ui-flows.spec.ts diff --git a/application/account-management/WebApp/tests/e2e/permission-based-ui-flows.spec.ts b/application/account-management/WebApp/tests/e2e/permission-based-ui-flows.spec.ts new file mode 100644 index 000000000..a26687d4e --- /dev/null +++ b/application/account-management/WebApp/tests/e2e/permission-based-ui-flows.spec.ts @@ -0,0 +1,281 @@ +import { expect } from "@playwright/test"; +import { test } from "@shared/e2e/fixtures/page-auth"; +import { createTestContext, expectToastMessage } from "@shared/e2e/utils/test-assertions"; +import { completeSignupFlow, getVerificationCode, testUser } from "@shared/e2e/utils/test-data"; +import { step } from "@shared/e2e/utils/test-step-wrapper"; + +test.describe("@smoke", () => { + /** + * PERMISSION-BASED UI ACCESS CONTROL TESTS + * + * Tests the permission-based UI behavior ensuring UI elements accurately reflect + * what actions users can perform based on backend authorization rules by creating + * users with different roles and testing the UI behavior in the same session. + * + * Note: Current test fixtures infrastructure creates only Owner users, so we test + * by creating users with different roles and switching between them in a single session. + */ + test("should enforce permission-based UI visibility and self-action restrictions", async ({ page }) => { + const context = createTestContext(page); + const owner = testUser(); + const member = testUser(); + + // Create owner and member users + await step("Create owner account and set up tenant")(async () => { + await completeSignupFlow(page, expect, owner, context); + await expect(page.getByRole("heading", { name: "Welcome home" })).toBeVisible(); + })(); + + await step("Navigate to users page as Owner & verify invite button is visible")(async () => { + await page.goto("/admin/users"); + + await expect(page.getByRole("heading", { name: "Users" })).toBeVisible(); + await expect(page.getByRole("button", { name: "Invite user" })).toBeVisible(); + })(); + + await step("Navigate to account settings as Owner & verify tenant name field is editable")(async () => { + await page.goto("/admin/account"); + + await expect(page.getByRole("heading", { name: "Account settings" })).toBeVisible(); + await expect(page.getByRole("textbox", { name: "Account name" })).toBeEnabled(); + await expect(page.getByRole("textbox", { name: "Account name" })).not.toHaveAttribute("readonly"); + await expect(page.getByRole("button", { name: "Save changes" })).toBeVisible(); + })(); + + await step("Verify danger zone is visible for Owner")(async () => { + await expect(page.getByRole("heading", { name: "Danger zone" })).toBeVisible(); + await expect(page.getByRole("button", { name: "Delete account" })).toBeVisible(); + await expect( + page.getByText("Delete your account and all data. This action is irreversible—proceed with caution.") + ).toBeVisible(); + })(); + + await step("Verify self-action restrictions work for Owner (cannot delete self or change own role)")(async () => { + await page.goto("/admin/users"); + + // Find the owner's own row by looking for the Owner role badge + const ownerRow = page.locator("tbody tr").filter({ hasText: "Owner" }); + await ownerRow.getByLabel("User actions").click(); + + // Verify delete menu item is disabled (self-protection) + await expect(page.getByRole("menuitem", { name: "Delete" })).toBeDisabled(); + + // Verify change role menu item is disabled (self-protection) + await expect(page.getByRole("menuitem", { name: "Change role" })).toBeDisabled(); + + await page.keyboard.press("Escape"); + })(); + + await step("Invite member user and test non-Owner permissions after role switch")(async () => { + // Invite member user + await page.getByRole("button", { name: "Invite user" }).click(); + await page.getByRole("textbox", { name: "Email" }).fill(member.email); + await page.getByRole("button", { name: "Send invite" }).click(); + await expectToastMessage(context, "User invited successfully"); + await expect(page.getByRole("dialog")).not.toBeVisible(); + + // Change the invited user to Member role (it defaults to Member but let's be explicit) + const memberRow = page.locator("tbody tr").filter({ hasText: member.email }); + await memberRow.getByLabel("User actions").click(); + await page.getByRole("menuitem", { name: "Change role" }).click(); + await expect(page.getByRole("alertdialog", { name: "Change user role" })).toBeVisible(); + await page.getByRole("button", { name: "Member User role" }).click(); + await page.getByRole("option", { name: "Member" }).click(); + await expectToastMessage(context, `User role updated successfully for ${member.email}`); + await expect(page.getByRole("alertdialog", { name: "Change user role" })).not.toBeVisible(); + })(); + + await step("Log out from owner and log in as member to test non-Owner UI restrictions")(async () => { + await page.getByRole("button", { name: "User profile menu" }).click(); + await page.getByRole("menuitem", { name: "Log out" }).click(); + + // Accept whatever return path we get + await expect(page.getByRole("heading", { name: "Welcome back" })).toBeVisible(); + + // Login as member + await page.getByRole("textbox", { name: "Email" }).fill(member.email); + await page.getByRole("button", { name: "Continue" }).click(); + await expect(page.getByRole("heading", { name: "Enter your verification code" })).toBeVisible(); + await page.keyboard.type(getVerificationCode()); + + // Wait for navigation to complete after verification + await page.waitForURL(/\/admin/, { timeout: 10000 }); + })(); + + await step("Complete member profile setup")(async () => { + await expect(page.getByRole("dialog", { name: "User profile" })).toBeVisible(); + await page.getByRole("textbox", { name: "First name" }).fill(member.firstName); + await page.getByRole("textbox", { name: "Last name" }).fill(member.lastName); + await page.getByRole("textbox", { name: "Title" }).fill("Team Member"); + await page.getByRole("button", { name: "Save changes" }).click(); + + await expectToastMessage(context, "Profile updated successfully"); + await expect(page.getByRole("dialog")).not.toBeVisible(); + })(); + + await step("Navigate to users page as Member & verify invite button is hidden")(async () => { + await page.goto("/admin/users"); + + await expect(page.getByRole("heading", { name: "Users" })).toBeVisible(); + await expect(page.getByRole("button", { name: "Invite user" })).not.toBeVisible(); + })(); + + await step("Navigate to account settings as Member & verify tenant name field is readonly")(async () => { + await page.goto("/admin/account"); + + await expect(page.getByRole("heading", { name: "Account settings" })).toBeVisible(); + await expect(page.getByRole("textbox", { name: "Account name" })).toHaveAttribute("readonly"); + await expect(page.getByText("Only account owners can modify the account name")).toBeVisible(); + await expect(page.getByRole("button", { name: "Save changes" })).not.toBeVisible(); + })(); + + await step("Verify danger zone is hidden for Member")(async () => { + await expect(page.getByRole("heading", { name: "Danger zone" })).not.toBeVisible(); + await expect(page.getByRole("button", { name: "Delete account" })).not.toBeVisible(); + await expect( + page.getByText("Delete your account and all data. This action is irreversible—proceed with caution.") + ).not.toBeVisible(); + })(); + + await step("Verify self-action restrictions work for Member (cannot delete self or change own role)")(async () => { + await page.goto("/admin/users"); + + // Find the member's own row by filtering by email + const memberRow = page.locator("tbody tr").filter({ hasText: member.email }); + await memberRow.getByLabel("User actions").click(); + + // Verify delete menu item is disabled (self-protection) + await expect(page.getByRole("menuitem", { name: "Delete" })).toBeDisabled(); + + // Verify change role menu item is disabled (self-protection) + await expect(page.getByRole("menuitem", { name: "Change role" })).toBeDisabled(); + + await page.keyboard.press("Escape"); + })(); + }); + + /** + * BULK DELETE PERMISSION TESTS + * + * Tests that bulk delete functionality is only available to Owners. + */ + test("should show bulk delete controls only for Owners", async ({ page }) => { + const context = createTestContext(page); + const owner = testUser(); + const member = testUser(); + + await step("Create owner account and multiple test users")(async () => { + await completeSignupFlow(page, expect, owner, context); + await page.goto("/admin/users"); + + const user1 = testUser(); + const user2 = testUser(); + + // Invite first user + await page.getByRole("button", { name: "Invite user" }).click(); + await page.getByRole("textbox", { name: "Email" }).fill(user1.email); + await page.getByRole("button", { name: "Send invite" }).click(); + await expectToastMessage(context, "User invited successfully"); + await expect(page.getByRole("dialog")).not.toBeVisible(); + + // Invite second user + await page.getByRole("button", { name: "Invite user" }).click(); + await page.getByRole("textbox", { name: "Email" }).fill(user2.email); + await page.getByRole("button", { name: "Send invite" }).click(); + await expectToastMessage(context, "User invited successfully"); + await expect(page.getByRole("dialog")).not.toBeVisible(); + + // Invite member user for role testing + await page.getByRole("button", { name: "Invite user" }).click(); + await page.getByRole("textbox", { name: "Email" }).fill(member.email); + await page.getByRole("button", { name: "Send invite" }).click(); + await expectToastMessage(context, "User invited successfully"); + await expect(page.getByRole("dialog")).not.toBeVisible(); + + // Should now have owner + 3 invited users = 4 total + await expect(page.locator("tbody tr")).toHaveCount(4); + })(); + + await step("Select multiple users as Owner & verify bulk delete button appears")(async () => { + // Set viewport to 2xl to avoid side pane backdrop issues + await page.setViewportSize({ width: 1536, height: 1024 }); + + // Select the first two invited users + const rows = page.locator("tbody tr"); + const secondRow = rows.nth(1); // First invited user + const thirdRow = rows.nth(2); // Second invited user + + // Select first user + await secondRow.click(); + await expect(secondRow).toHaveAttribute("aria-selected", "true"); + + // Select second user with Ctrl/Cmd modifier + await thirdRow.click({ modifiers: ["ControlOrMeta"] }); + await expect(thirdRow).toHaveAttribute("aria-selected", "true"); + await expect(secondRow).toHaveAttribute("aria-selected", "true"); + + // Verify bulk delete button is visible for Owner + await expect(page.getByRole("button", { name: "Delete 2 users" })).toBeVisible(); + + // Reset viewport + await page.setViewportSize({ width: 1280, height: 720 }); + })(); + + await step("Log out as owner and log in as member to test bulk delete restrictions")(async () => { + await page.getByRole("button", { name: "User profile menu" }).click(); + await page.getByRole("menuitem", { name: "Log out" }).click(); + + // Accept whatever return path we get + await expect(page.getByRole("heading", { name: "Welcome back" })).toBeVisible(); + + // Login as member + await page.getByRole("textbox", { name: "Email" }).fill(member.email); + await page.getByRole("button", { name: "Continue" }).click(); + await expect(page.getByRole("heading", { name: "Enter your verification code" })).toBeVisible(); + await page.keyboard.type(getVerificationCode()); + + // Wait for navigation to complete after verification + await page.waitForURL(/\/admin/, { timeout: 10000 }); + })(); + + await step("Complete member profile setup")(async () => { + await expect(page.getByRole("dialog", { name: "User profile" })).toBeVisible(); + await page.getByRole("textbox", { name: "First name" }).fill(member.firstName); + await page.getByRole("textbox", { name: "Last name" }).fill(member.lastName); + await page.getByRole("textbox", { name: "Title" }).fill("Team Member"); + await page.getByRole("button", { name: "Save changes" }).click(); + + await expectToastMessage(context, "Profile updated successfully"); + await expect(page.getByRole("dialog")).not.toBeVisible(); + })(); + + await step("Navigate to users page as Member & verify no bulk operations available")(async () => { + await page.goto("/admin/users"); + + // Ensure we can see the users that were created + await expect(page.locator("tbody tr")).toHaveCount(4); + + // Try to select rows (member can still select, but no bulk actions should appear) + // Set viewport to 2xl to avoid side pane backdrop issues + await page.setViewportSize({ width: 1536, height: 1024 }); + + const rows = page.locator("tbody tr"); + const secondRow = rows.nth(1); + const thirdRow = rows.nth(2); + + // Select users as Member + await secondRow.click(); + await expect(secondRow).toHaveAttribute("aria-selected", "true"); + + await thirdRow.click({ modifiers: ["ControlOrMeta"] }); + await expect(thirdRow).toHaveAttribute("aria-selected", "true"); + + // Verify bulk delete button is NOT visible for Member even with selections + await expect(page.getByRole("button", { name: "Delete 2 users" })).not.toBeVisible(); + await expect(page.getByRole("button", { name: "Delete user" })).not.toBeVisible(); + + // Reset viewport + await page.setViewportSize({ width: 1280, height: 720 }); + })(); + }); +}); From 24fa1fa157d4177009004de4e68e859845c951c1 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Tue, 1 Jul 2025 00:43:14 +0200 Subject: [PATCH 120/171] Change role badge in user side pane to button --- .../users/-components/UserProfileSidePane.tsx | 29 +- .../shared/translations/locale/da-DK.po | 7 +- .../shared/translations/locale/en-US.po | 5 + .../shared/translations/locale/nl-NL.po | 7 +- .../e2e/permission-based-ui-flows.spec.ts | 281 ------------------ 5 files changed, 42 insertions(+), 287 deletions(-) delete mode 100644 application/account-management/WebApp/tests/e2e/permission-based-ui-flows.spec.ts diff --git a/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx b/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx index 5b1cb3ca8..556bfba2e 100644 --- a/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx +++ b/application/account-management/WebApp/routes/admin/users/-components/UserProfileSidePane.tsx @@ -12,7 +12,8 @@ import { Text } from "@repo/ui/components/Text"; import { formatDate } from "@repo/utils/date/formatDate"; import { getInitials } from "@repo/utils/string/getInitials"; import { Trash2Icon, XIcon } from "lucide-react"; -import { useEffect, useRef } from "react"; +import { useEffect, useRef, useState } from "react"; +import { ChangeUserRoleDialog } from "./ChangeUserRoleDialog"; type UserDetails = components["schemas"]["UserDetails"]; @@ -27,6 +28,7 @@ export function UserProfileSidePane({ user, isOpen, onClose, onDeleteUser }: Rea const userInfo = useUserInfo(); const sidePaneRef = useRef(null); const closeButtonRef = useRef(null); + const [isChangeRoleDialogOpen, setIsChangeRoleDialogOpen] = useState(false); // Focus management and keyboard navigation - only focus close button on mobile useEffect(() => { @@ -184,9 +186,25 @@ export function UserProfileSidePane({ user, isOpen, onClose, onDeleteUser }: Rea Role - - {getUserRoleLabel(user.role)} - + {canModifyUser ? ( + + ) : ( + + {getUserRoleLabel(user.role)} + + )} @@ -220,6 +238,9 @@ export function UserProfileSidePane({ user, isOpen, onClose, onDeleteUser }: Rea )} + + {/* Change User Role Dialog */} + ); } diff --git a/application/account-management/WebApp/shared/translations/locale/da-DK.po b/application/account-management/WebApp/shared/translations/locale/da-DK.po index 061a34947..0072d69c0 100644 --- a/application/account-management/WebApp/shared/translations/locale/da-DK.po +++ b/application/account-management/WebApp/shared/translations/locale/da-DK.po @@ -102,6 +102,11 @@ msgstr "Skift rolle" msgid "Change user role" msgstr "Skift brugerrolle" +#. placeholder {0}: user.firstName +#. placeholder {1}: user.lastName +msgid "Change user role for {0} {1}" +msgstr "Skift brugerrolle for {0} {1}" + msgid "Check your spam folder." msgstr "Tjek din spammappe." @@ -263,7 +268,7 @@ msgid "OK" msgstr "OK" msgid "Only account owners can modify the account name" -msgstr "" +msgstr "Kun kontoejere kan ændre kontonavnet" msgid "Organization" msgstr "Organisation" diff --git a/application/account-management/WebApp/shared/translations/locale/en-US.po b/application/account-management/WebApp/shared/translations/locale/en-US.po index 7ba5c6be0..627391eda 100644 --- a/application/account-management/WebApp/shared/translations/locale/en-US.po +++ b/application/account-management/WebApp/shared/translations/locale/en-US.po @@ -102,6 +102,11 @@ msgstr "Change role" msgid "Change user role" msgstr "Change user role" +#. placeholder {0}: user.firstName +#. placeholder {1}: user.lastName +msgid "Change user role for {0} {1}" +msgstr "Change user role for {0} {1}" + msgid "Check your spam folder." msgstr "Check your spam folder." diff --git a/application/account-management/WebApp/shared/translations/locale/nl-NL.po b/application/account-management/WebApp/shared/translations/locale/nl-NL.po index 11ab7296b..a92e10257 100644 --- a/application/account-management/WebApp/shared/translations/locale/nl-NL.po +++ b/application/account-management/WebApp/shared/translations/locale/nl-NL.po @@ -102,6 +102,11 @@ msgstr "Rol wijzigen" msgid "Change user role" msgstr "Gebruikersrol wijzigen" +#. placeholder {0}: user.firstName +#. placeholder {1}: user.lastName +msgid "Change user role for {0} {1}" +msgstr "Gebruikersrol wijzigen voor {0} {1}" + msgid "Check your spam folder." msgstr "Controleer je spammap." @@ -263,7 +268,7 @@ msgid "OK" msgstr "OK" msgid "Only account owners can modify the account name" -msgstr "" +msgstr "Alleen accounteigenaren kunnen de accountnaam wijzigen" msgid "Organization" msgstr "Organisatie" diff --git a/application/account-management/WebApp/tests/e2e/permission-based-ui-flows.spec.ts b/application/account-management/WebApp/tests/e2e/permission-based-ui-flows.spec.ts deleted file mode 100644 index a26687d4e..000000000 --- a/application/account-management/WebApp/tests/e2e/permission-based-ui-flows.spec.ts +++ /dev/null @@ -1,281 +0,0 @@ -import { expect } from "@playwright/test"; -import { test } from "@shared/e2e/fixtures/page-auth"; -import { createTestContext, expectToastMessage } from "@shared/e2e/utils/test-assertions"; -import { completeSignupFlow, getVerificationCode, testUser } from "@shared/e2e/utils/test-data"; -import { step } from "@shared/e2e/utils/test-step-wrapper"; - -test.describe("@smoke", () => { - /** - * PERMISSION-BASED UI ACCESS CONTROL TESTS - * - * Tests the permission-based UI behavior ensuring UI elements accurately reflect - * what actions users can perform based on backend authorization rules by creating - * users with different roles and testing the UI behavior in the same session. - * - * Note: Current test fixtures infrastructure creates only Owner users, so we test - * by creating users with different roles and switching between them in a single session. - */ - test("should enforce permission-based UI visibility and self-action restrictions", async ({ page }) => { - const context = createTestContext(page); - const owner = testUser(); - const member = testUser(); - - // Create owner and member users - await step("Create owner account and set up tenant")(async () => { - await completeSignupFlow(page, expect, owner, context); - await expect(page.getByRole("heading", { name: "Welcome home" })).toBeVisible(); - })(); - - await step("Navigate to users page as Owner & verify invite button is visible")(async () => { - await page.goto("/admin/users"); - - await expect(page.getByRole("heading", { name: "Users" })).toBeVisible(); - await expect(page.getByRole("button", { name: "Invite user" })).toBeVisible(); - })(); - - await step("Navigate to account settings as Owner & verify tenant name field is editable")(async () => { - await page.goto("/admin/account"); - - await expect(page.getByRole("heading", { name: "Account settings" })).toBeVisible(); - await expect(page.getByRole("textbox", { name: "Account name" })).toBeEnabled(); - await expect(page.getByRole("textbox", { name: "Account name" })).not.toHaveAttribute("readonly"); - await expect(page.getByRole("button", { name: "Save changes" })).toBeVisible(); - })(); - - await step("Verify danger zone is visible for Owner")(async () => { - await expect(page.getByRole("heading", { name: "Danger zone" })).toBeVisible(); - await expect(page.getByRole("button", { name: "Delete account" })).toBeVisible(); - await expect( - page.getByText("Delete your account and all data. This action is irreversible—proceed with caution.") - ).toBeVisible(); - })(); - - await step("Verify self-action restrictions work for Owner (cannot delete self or change own role)")(async () => { - await page.goto("/admin/users"); - - // Find the owner's own row by looking for the Owner role badge - const ownerRow = page.locator("tbody tr").filter({ hasText: "Owner" }); - await ownerRow.getByLabel("User actions").click(); - - // Verify delete menu item is disabled (self-protection) - await expect(page.getByRole("menuitem", { name: "Delete" })).toBeDisabled(); - - // Verify change role menu item is disabled (self-protection) - await expect(page.getByRole("menuitem", { name: "Change role" })).toBeDisabled(); - - await page.keyboard.press("Escape"); - })(); - - await step("Invite member user and test non-Owner permissions after role switch")(async () => { - // Invite member user - await page.getByRole("button", { name: "Invite user" }).click(); - await page.getByRole("textbox", { name: "Email" }).fill(member.email); - await page.getByRole("button", { name: "Send invite" }).click(); - await expectToastMessage(context, "User invited successfully"); - await expect(page.getByRole("dialog")).not.toBeVisible(); - - // Change the invited user to Member role (it defaults to Member but let's be explicit) - const memberRow = page.locator("tbody tr").filter({ hasText: member.email }); - await memberRow.getByLabel("User actions").click(); - await page.getByRole("menuitem", { name: "Change role" }).click(); - await expect(page.getByRole("alertdialog", { name: "Change user role" })).toBeVisible(); - await page.getByRole("button", { name: "Member User role" }).click(); - await page.getByRole("option", { name: "Member" }).click(); - await expectToastMessage(context, `User role updated successfully for ${member.email}`); - await expect(page.getByRole("alertdialog", { name: "Change user role" })).not.toBeVisible(); - })(); - - await step("Log out from owner and log in as member to test non-Owner UI restrictions")(async () => { - await page.getByRole("button", { name: "User profile menu" }).click(); - await page.getByRole("menuitem", { name: "Log out" }).click(); - - // Accept whatever return path we get - await expect(page.getByRole("heading", { name: "Welcome back" })).toBeVisible(); - - // Login as member - await page.getByRole("textbox", { name: "Email" }).fill(member.email); - await page.getByRole("button", { name: "Continue" }).click(); - await expect(page.getByRole("heading", { name: "Enter your verification code" })).toBeVisible(); - await page.keyboard.type(getVerificationCode()); - - // Wait for navigation to complete after verification - await page.waitForURL(/\/admin/, { timeout: 10000 }); - })(); - - await step("Complete member profile setup")(async () => { - await expect(page.getByRole("dialog", { name: "User profile" })).toBeVisible(); - await page.getByRole("textbox", { name: "First name" }).fill(member.firstName); - await page.getByRole("textbox", { name: "Last name" }).fill(member.lastName); - await page.getByRole("textbox", { name: "Title" }).fill("Team Member"); - await page.getByRole("button", { name: "Save changes" }).click(); - - await expectToastMessage(context, "Profile updated successfully"); - await expect(page.getByRole("dialog")).not.toBeVisible(); - })(); - - await step("Navigate to users page as Member & verify invite button is hidden")(async () => { - await page.goto("/admin/users"); - - await expect(page.getByRole("heading", { name: "Users" })).toBeVisible(); - await expect(page.getByRole("button", { name: "Invite user" })).not.toBeVisible(); - })(); - - await step("Navigate to account settings as Member & verify tenant name field is readonly")(async () => { - await page.goto("/admin/account"); - - await expect(page.getByRole("heading", { name: "Account settings" })).toBeVisible(); - await expect(page.getByRole("textbox", { name: "Account name" })).toHaveAttribute("readonly"); - await expect(page.getByText("Only account owners can modify the account name")).toBeVisible(); - await expect(page.getByRole("button", { name: "Save changes" })).not.toBeVisible(); - })(); - - await step("Verify danger zone is hidden for Member")(async () => { - await expect(page.getByRole("heading", { name: "Danger zone" })).not.toBeVisible(); - await expect(page.getByRole("button", { name: "Delete account" })).not.toBeVisible(); - await expect( - page.getByText("Delete your account and all data. This action is irreversible—proceed with caution.") - ).not.toBeVisible(); - })(); - - await step("Verify self-action restrictions work for Member (cannot delete self or change own role)")(async () => { - await page.goto("/admin/users"); - - // Find the member's own row by filtering by email - const memberRow = page.locator("tbody tr").filter({ hasText: member.email }); - await memberRow.getByLabel("User actions").click(); - - // Verify delete menu item is disabled (self-protection) - await expect(page.getByRole("menuitem", { name: "Delete" })).toBeDisabled(); - - // Verify change role menu item is disabled (self-protection) - await expect(page.getByRole("menuitem", { name: "Change role" })).toBeDisabled(); - - await page.keyboard.press("Escape"); - })(); - }); - - /** - * BULK DELETE PERMISSION TESTS - * - * Tests that bulk delete functionality is only available to Owners. - */ - test("should show bulk delete controls only for Owners", async ({ page }) => { - const context = createTestContext(page); - const owner = testUser(); - const member = testUser(); - - await step("Create owner account and multiple test users")(async () => { - await completeSignupFlow(page, expect, owner, context); - await page.goto("/admin/users"); - - const user1 = testUser(); - const user2 = testUser(); - - // Invite first user - await page.getByRole("button", { name: "Invite user" }).click(); - await page.getByRole("textbox", { name: "Email" }).fill(user1.email); - await page.getByRole("button", { name: "Send invite" }).click(); - await expectToastMessage(context, "User invited successfully"); - await expect(page.getByRole("dialog")).not.toBeVisible(); - - // Invite second user - await page.getByRole("button", { name: "Invite user" }).click(); - await page.getByRole("textbox", { name: "Email" }).fill(user2.email); - await page.getByRole("button", { name: "Send invite" }).click(); - await expectToastMessage(context, "User invited successfully"); - await expect(page.getByRole("dialog")).not.toBeVisible(); - - // Invite member user for role testing - await page.getByRole("button", { name: "Invite user" }).click(); - await page.getByRole("textbox", { name: "Email" }).fill(member.email); - await page.getByRole("button", { name: "Send invite" }).click(); - await expectToastMessage(context, "User invited successfully"); - await expect(page.getByRole("dialog")).not.toBeVisible(); - - // Should now have owner + 3 invited users = 4 total - await expect(page.locator("tbody tr")).toHaveCount(4); - })(); - - await step("Select multiple users as Owner & verify bulk delete button appears")(async () => { - // Set viewport to 2xl to avoid side pane backdrop issues - await page.setViewportSize({ width: 1536, height: 1024 }); - - // Select the first two invited users - const rows = page.locator("tbody tr"); - const secondRow = rows.nth(1); // First invited user - const thirdRow = rows.nth(2); // Second invited user - - // Select first user - await secondRow.click(); - await expect(secondRow).toHaveAttribute("aria-selected", "true"); - - // Select second user with Ctrl/Cmd modifier - await thirdRow.click({ modifiers: ["ControlOrMeta"] }); - await expect(thirdRow).toHaveAttribute("aria-selected", "true"); - await expect(secondRow).toHaveAttribute("aria-selected", "true"); - - // Verify bulk delete button is visible for Owner - await expect(page.getByRole("button", { name: "Delete 2 users" })).toBeVisible(); - - // Reset viewport - await page.setViewportSize({ width: 1280, height: 720 }); - })(); - - await step("Log out as owner and log in as member to test bulk delete restrictions")(async () => { - await page.getByRole("button", { name: "User profile menu" }).click(); - await page.getByRole("menuitem", { name: "Log out" }).click(); - - // Accept whatever return path we get - await expect(page.getByRole("heading", { name: "Welcome back" })).toBeVisible(); - - // Login as member - await page.getByRole("textbox", { name: "Email" }).fill(member.email); - await page.getByRole("button", { name: "Continue" }).click(); - await expect(page.getByRole("heading", { name: "Enter your verification code" })).toBeVisible(); - await page.keyboard.type(getVerificationCode()); - - // Wait for navigation to complete after verification - await page.waitForURL(/\/admin/, { timeout: 10000 }); - })(); - - await step("Complete member profile setup")(async () => { - await expect(page.getByRole("dialog", { name: "User profile" })).toBeVisible(); - await page.getByRole("textbox", { name: "First name" }).fill(member.firstName); - await page.getByRole("textbox", { name: "Last name" }).fill(member.lastName); - await page.getByRole("textbox", { name: "Title" }).fill("Team Member"); - await page.getByRole("button", { name: "Save changes" }).click(); - - await expectToastMessage(context, "Profile updated successfully"); - await expect(page.getByRole("dialog")).not.toBeVisible(); - })(); - - await step("Navigate to users page as Member & verify no bulk operations available")(async () => { - await page.goto("/admin/users"); - - // Ensure we can see the users that were created - await expect(page.locator("tbody tr")).toHaveCount(4); - - // Try to select rows (member can still select, but no bulk actions should appear) - // Set viewport to 2xl to avoid side pane backdrop issues - await page.setViewportSize({ width: 1536, height: 1024 }); - - const rows = page.locator("tbody tr"); - const secondRow = rows.nth(1); - const thirdRow = rows.nth(2); - - // Select users as Member - await secondRow.click(); - await expect(secondRow).toHaveAttribute("aria-selected", "true"); - - await thirdRow.click({ modifiers: ["ControlOrMeta"] }); - await expect(thirdRow).toHaveAttribute("aria-selected", "true"); - - // Verify bulk delete button is NOT visible for Member even with selections - await expect(page.getByRole("button", { name: "Delete 2 users" })).not.toBeVisible(); - await expect(page.getByRole("button", { name: "Delete user" })).not.toBeVisible(); - - // Reset viewport - await page.setViewportSize({ width: 1280, height: 720 }); - })(); - }); -}); From 414000f910b35b4228556cb133aefe249baadc29 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Tue, 1 Jul 2025 00:20:31 +0200 Subject: [PATCH 121/171] Add comprehensive permission-based UI end-to-end tests --- .../e2e/permission-based-ui-flows.spec.ts | 281 ++++++++++++++++++ 1 file changed, 281 insertions(+) create mode 100644 application/account-management/WebApp/tests/e2e/permission-based-ui-flows.spec.ts diff --git a/application/account-management/WebApp/tests/e2e/permission-based-ui-flows.spec.ts b/application/account-management/WebApp/tests/e2e/permission-based-ui-flows.spec.ts new file mode 100644 index 000000000..a26687d4e --- /dev/null +++ b/application/account-management/WebApp/tests/e2e/permission-based-ui-flows.spec.ts @@ -0,0 +1,281 @@ +import { expect } from "@playwright/test"; +import { test } from "@shared/e2e/fixtures/page-auth"; +import { createTestContext, expectToastMessage } from "@shared/e2e/utils/test-assertions"; +import { completeSignupFlow, getVerificationCode, testUser } from "@shared/e2e/utils/test-data"; +import { step } from "@shared/e2e/utils/test-step-wrapper"; + +test.describe("@smoke", () => { + /** + * PERMISSION-BASED UI ACCESS CONTROL TESTS + * + * Tests the permission-based UI behavior ensuring UI elements accurately reflect + * what actions users can perform based on backend authorization rules by creating + * users with different roles and testing the UI behavior in the same session. + * + * Note: Current test fixtures infrastructure creates only Owner users, so we test + * by creating users with different roles and switching between them in a single session. + */ + test("should enforce permission-based UI visibility and self-action restrictions", async ({ page }) => { + const context = createTestContext(page); + const owner = testUser(); + const member = testUser(); + + // Create owner and member users + await step("Create owner account and set up tenant")(async () => { + await completeSignupFlow(page, expect, owner, context); + await expect(page.getByRole("heading", { name: "Welcome home" })).toBeVisible(); + })(); + + await step("Navigate to users page as Owner & verify invite button is visible")(async () => { + await page.goto("/admin/users"); + + await expect(page.getByRole("heading", { name: "Users" })).toBeVisible(); + await expect(page.getByRole("button", { name: "Invite user" })).toBeVisible(); + })(); + + await step("Navigate to account settings as Owner & verify tenant name field is editable")(async () => { + await page.goto("/admin/account"); + + await expect(page.getByRole("heading", { name: "Account settings" })).toBeVisible(); + await expect(page.getByRole("textbox", { name: "Account name" })).toBeEnabled(); + await expect(page.getByRole("textbox", { name: "Account name" })).not.toHaveAttribute("readonly"); + await expect(page.getByRole("button", { name: "Save changes" })).toBeVisible(); + })(); + + await step("Verify danger zone is visible for Owner")(async () => { + await expect(page.getByRole("heading", { name: "Danger zone" })).toBeVisible(); + await expect(page.getByRole("button", { name: "Delete account" })).toBeVisible(); + await expect( + page.getByText("Delete your account and all data. This action is irreversible—proceed with caution.") + ).toBeVisible(); + })(); + + await step("Verify self-action restrictions work for Owner (cannot delete self or change own role)")(async () => { + await page.goto("/admin/users"); + + // Find the owner's own row by looking for the Owner role badge + const ownerRow = page.locator("tbody tr").filter({ hasText: "Owner" }); + await ownerRow.getByLabel("User actions").click(); + + // Verify delete menu item is disabled (self-protection) + await expect(page.getByRole("menuitem", { name: "Delete" })).toBeDisabled(); + + // Verify change role menu item is disabled (self-protection) + await expect(page.getByRole("menuitem", { name: "Change role" })).toBeDisabled(); + + await page.keyboard.press("Escape"); + })(); + + await step("Invite member user and test non-Owner permissions after role switch")(async () => { + // Invite member user + await page.getByRole("button", { name: "Invite user" }).click(); + await page.getByRole("textbox", { name: "Email" }).fill(member.email); + await page.getByRole("button", { name: "Send invite" }).click(); + await expectToastMessage(context, "User invited successfully"); + await expect(page.getByRole("dialog")).not.toBeVisible(); + + // Change the invited user to Member role (it defaults to Member but let's be explicit) + const memberRow = page.locator("tbody tr").filter({ hasText: member.email }); + await memberRow.getByLabel("User actions").click(); + await page.getByRole("menuitem", { name: "Change role" }).click(); + await expect(page.getByRole("alertdialog", { name: "Change user role" })).toBeVisible(); + await page.getByRole("button", { name: "Member User role" }).click(); + await page.getByRole("option", { name: "Member" }).click(); + await expectToastMessage(context, `User role updated successfully for ${member.email}`); + await expect(page.getByRole("alertdialog", { name: "Change user role" })).not.toBeVisible(); + })(); + + await step("Log out from owner and log in as member to test non-Owner UI restrictions")(async () => { + await page.getByRole("button", { name: "User profile menu" }).click(); + await page.getByRole("menuitem", { name: "Log out" }).click(); + + // Accept whatever return path we get + await expect(page.getByRole("heading", { name: "Welcome back" })).toBeVisible(); + + // Login as member + await page.getByRole("textbox", { name: "Email" }).fill(member.email); + await page.getByRole("button", { name: "Continue" }).click(); + await expect(page.getByRole("heading", { name: "Enter your verification code" })).toBeVisible(); + await page.keyboard.type(getVerificationCode()); + + // Wait for navigation to complete after verification + await page.waitForURL(/\/admin/, { timeout: 10000 }); + })(); + + await step("Complete member profile setup")(async () => { + await expect(page.getByRole("dialog", { name: "User profile" })).toBeVisible(); + await page.getByRole("textbox", { name: "First name" }).fill(member.firstName); + await page.getByRole("textbox", { name: "Last name" }).fill(member.lastName); + await page.getByRole("textbox", { name: "Title" }).fill("Team Member"); + await page.getByRole("button", { name: "Save changes" }).click(); + + await expectToastMessage(context, "Profile updated successfully"); + await expect(page.getByRole("dialog")).not.toBeVisible(); + })(); + + await step("Navigate to users page as Member & verify invite button is hidden")(async () => { + await page.goto("/admin/users"); + + await expect(page.getByRole("heading", { name: "Users" })).toBeVisible(); + await expect(page.getByRole("button", { name: "Invite user" })).not.toBeVisible(); + })(); + + await step("Navigate to account settings as Member & verify tenant name field is readonly")(async () => { + await page.goto("/admin/account"); + + await expect(page.getByRole("heading", { name: "Account settings" })).toBeVisible(); + await expect(page.getByRole("textbox", { name: "Account name" })).toHaveAttribute("readonly"); + await expect(page.getByText("Only account owners can modify the account name")).toBeVisible(); + await expect(page.getByRole("button", { name: "Save changes" })).not.toBeVisible(); + })(); + + await step("Verify danger zone is hidden for Member")(async () => { + await expect(page.getByRole("heading", { name: "Danger zone" })).not.toBeVisible(); + await expect(page.getByRole("button", { name: "Delete account" })).not.toBeVisible(); + await expect( + page.getByText("Delete your account and all data. This action is irreversible—proceed with caution.") + ).not.toBeVisible(); + })(); + + await step("Verify self-action restrictions work for Member (cannot delete self or change own role)")(async () => { + await page.goto("/admin/users"); + + // Find the member's own row by filtering by email + const memberRow = page.locator("tbody tr").filter({ hasText: member.email }); + await memberRow.getByLabel("User actions").click(); + + // Verify delete menu item is disabled (self-protection) + await expect(page.getByRole("menuitem", { name: "Delete" })).toBeDisabled(); + + // Verify change role menu item is disabled (self-protection) + await expect(page.getByRole("menuitem", { name: "Change role" })).toBeDisabled(); + + await page.keyboard.press("Escape"); + })(); + }); + + /** + * BULK DELETE PERMISSION TESTS + * + * Tests that bulk delete functionality is only available to Owners. + */ + test("should show bulk delete controls only for Owners", async ({ page }) => { + const context = createTestContext(page); + const owner = testUser(); + const member = testUser(); + + await step("Create owner account and multiple test users")(async () => { + await completeSignupFlow(page, expect, owner, context); + await page.goto("/admin/users"); + + const user1 = testUser(); + const user2 = testUser(); + + // Invite first user + await page.getByRole("button", { name: "Invite user" }).click(); + await page.getByRole("textbox", { name: "Email" }).fill(user1.email); + await page.getByRole("button", { name: "Send invite" }).click(); + await expectToastMessage(context, "User invited successfully"); + await expect(page.getByRole("dialog")).not.toBeVisible(); + + // Invite second user + await page.getByRole("button", { name: "Invite user" }).click(); + await page.getByRole("textbox", { name: "Email" }).fill(user2.email); + await page.getByRole("button", { name: "Send invite" }).click(); + await expectToastMessage(context, "User invited successfully"); + await expect(page.getByRole("dialog")).not.toBeVisible(); + + // Invite member user for role testing + await page.getByRole("button", { name: "Invite user" }).click(); + await page.getByRole("textbox", { name: "Email" }).fill(member.email); + await page.getByRole("button", { name: "Send invite" }).click(); + await expectToastMessage(context, "User invited successfully"); + await expect(page.getByRole("dialog")).not.toBeVisible(); + + // Should now have owner + 3 invited users = 4 total + await expect(page.locator("tbody tr")).toHaveCount(4); + })(); + + await step("Select multiple users as Owner & verify bulk delete button appears")(async () => { + // Set viewport to 2xl to avoid side pane backdrop issues + await page.setViewportSize({ width: 1536, height: 1024 }); + + // Select the first two invited users + const rows = page.locator("tbody tr"); + const secondRow = rows.nth(1); // First invited user + const thirdRow = rows.nth(2); // Second invited user + + // Select first user + await secondRow.click(); + await expect(secondRow).toHaveAttribute("aria-selected", "true"); + + // Select second user with Ctrl/Cmd modifier + await thirdRow.click({ modifiers: ["ControlOrMeta"] }); + await expect(thirdRow).toHaveAttribute("aria-selected", "true"); + await expect(secondRow).toHaveAttribute("aria-selected", "true"); + + // Verify bulk delete button is visible for Owner + await expect(page.getByRole("button", { name: "Delete 2 users" })).toBeVisible(); + + // Reset viewport + await page.setViewportSize({ width: 1280, height: 720 }); + })(); + + await step("Log out as owner and log in as member to test bulk delete restrictions")(async () => { + await page.getByRole("button", { name: "User profile menu" }).click(); + await page.getByRole("menuitem", { name: "Log out" }).click(); + + // Accept whatever return path we get + await expect(page.getByRole("heading", { name: "Welcome back" })).toBeVisible(); + + // Login as member + await page.getByRole("textbox", { name: "Email" }).fill(member.email); + await page.getByRole("button", { name: "Continue" }).click(); + await expect(page.getByRole("heading", { name: "Enter your verification code" })).toBeVisible(); + await page.keyboard.type(getVerificationCode()); + + // Wait for navigation to complete after verification + await page.waitForURL(/\/admin/, { timeout: 10000 }); + })(); + + await step("Complete member profile setup")(async () => { + await expect(page.getByRole("dialog", { name: "User profile" })).toBeVisible(); + await page.getByRole("textbox", { name: "First name" }).fill(member.firstName); + await page.getByRole("textbox", { name: "Last name" }).fill(member.lastName); + await page.getByRole("textbox", { name: "Title" }).fill("Team Member"); + await page.getByRole("button", { name: "Save changes" }).click(); + + await expectToastMessage(context, "Profile updated successfully"); + await expect(page.getByRole("dialog")).not.toBeVisible(); + })(); + + await step("Navigate to users page as Member & verify no bulk operations available")(async () => { + await page.goto("/admin/users"); + + // Ensure we can see the users that were created + await expect(page.locator("tbody tr")).toHaveCount(4); + + // Try to select rows (member can still select, but no bulk actions should appear) + // Set viewport to 2xl to avoid side pane backdrop issues + await page.setViewportSize({ width: 1536, height: 1024 }); + + const rows = page.locator("tbody tr"); + const secondRow = rows.nth(1); + const thirdRow = rows.nth(2); + + // Select users as Member + await secondRow.click(); + await expect(secondRow).toHaveAttribute("aria-selected", "true"); + + await thirdRow.click({ modifiers: ["ControlOrMeta"] }); + await expect(thirdRow).toHaveAttribute("aria-selected", "true"); + + // Verify bulk delete button is NOT visible for Member even with selections + await expect(page.getByRole("button", { name: "Delete 2 users" })).not.toBeVisible(); + await expect(page.getByRole("button", { name: "Delete user" })).not.toBeVisible(); + + // Reset viewport + await page.setViewportSize({ width: 1280, height: 720 }); + })(); + }); +}); From 5bcfe7e0dc39e689f6af16d4487685b34b28e5a7 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Wed, 2 Jul 2025 03:01:55 +0200 Subject: [PATCH 122/171] Remove e2e test file due to missing infrastructure --- .../e2e/permission-based-ui-flows.spec.ts | 281 ------------------ 1 file changed, 281 deletions(-) delete mode 100644 application/account-management/WebApp/tests/e2e/permission-based-ui-flows.spec.ts diff --git a/application/account-management/WebApp/tests/e2e/permission-based-ui-flows.spec.ts b/application/account-management/WebApp/tests/e2e/permission-based-ui-flows.spec.ts deleted file mode 100644 index a26687d4e..000000000 --- a/application/account-management/WebApp/tests/e2e/permission-based-ui-flows.spec.ts +++ /dev/null @@ -1,281 +0,0 @@ -import { expect } from "@playwright/test"; -import { test } from "@shared/e2e/fixtures/page-auth"; -import { createTestContext, expectToastMessage } from "@shared/e2e/utils/test-assertions"; -import { completeSignupFlow, getVerificationCode, testUser } from "@shared/e2e/utils/test-data"; -import { step } from "@shared/e2e/utils/test-step-wrapper"; - -test.describe("@smoke", () => { - /** - * PERMISSION-BASED UI ACCESS CONTROL TESTS - * - * Tests the permission-based UI behavior ensuring UI elements accurately reflect - * what actions users can perform based on backend authorization rules by creating - * users with different roles and testing the UI behavior in the same session. - * - * Note: Current test fixtures infrastructure creates only Owner users, so we test - * by creating users with different roles and switching between them in a single session. - */ - test("should enforce permission-based UI visibility and self-action restrictions", async ({ page }) => { - const context = createTestContext(page); - const owner = testUser(); - const member = testUser(); - - // Create owner and member users - await step("Create owner account and set up tenant")(async () => { - await completeSignupFlow(page, expect, owner, context); - await expect(page.getByRole("heading", { name: "Welcome home" })).toBeVisible(); - })(); - - await step("Navigate to users page as Owner & verify invite button is visible")(async () => { - await page.goto("/admin/users"); - - await expect(page.getByRole("heading", { name: "Users" })).toBeVisible(); - await expect(page.getByRole("button", { name: "Invite user" })).toBeVisible(); - })(); - - await step("Navigate to account settings as Owner & verify tenant name field is editable")(async () => { - await page.goto("/admin/account"); - - await expect(page.getByRole("heading", { name: "Account settings" })).toBeVisible(); - await expect(page.getByRole("textbox", { name: "Account name" })).toBeEnabled(); - await expect(page.getByRole("textbox", { name: "Account name" })).not.toHaveAttribute("readonly"); - await expect(page.getByRole("button", { name: "Save changes" })).toBeVisible(); - })(); - - await step("Verify danger zone is visible for Owner")(async () => { - await expect(page.getByRole("heading", { name: "Danger zone" })).toBeVisible(); - await expect(page.getByRole("button", { name: "Delete account" })).toBeVisible(); - await expect( - page.getByText("Delete your account and all data. This action is irreversible—proceed with caution.") - ).toBeVisible(); - })(); - - await step("Verify self-action restrictions work for Owner (cannot delete self or change own role)")(async () => { - await page.goto("/admin/users"); - - // Find the owner's own row by looking for the Owner role badge - const ownerRow = page.locator("tbody tr").filter({ hasText: "Owner" }); - await ownerRow.getByLabel("User actions").click(); - - // Verify delete menu item is disabled (self-protection) - await expect(page.getByRole("menuitem", { name: "Delete" })).toBeDisabled(); - - // Verify change role menu item is disabled (self-protection) - await expect(page.getByRole("menuitem", { name: "Change role" })).toBeDisabled(); - - await page.keyboard.press("Escape"); - })(); - - await step("Invite member user and test non-Owner permissions after role switch")(async () => { - // Invite member user - await page.getByRole("button", { name: "Invite user" }).click(); - await page.getByRole("textbox", { name: "Email" }).fill(member.email); - await page.getByRole("button", { name: "Send invite" }).click(); - await expectToastMessage(context, "User invited successfully"); - await expect(page.getByRole("dialog")).not.toBeVisible(); - - // Change the invited user to Member role (it defaults to Member but let's be explicit) - const memberRow = page.locator("tbody tr").filter({ hasText: member.email }); - await memberRow.getByLabel("User actions").click(); - await page.getByRole("menuitem", { name: "Change role" }).click(); - await expect(page.getByRole("alertdialog", { name: "Change user role" })).toBeVisible(); - await page.getByRole("button", { name: "Member User role" }).click(); - await page.getByRole("option", { name: "Member" }).click(); - await expectToastMessage(context, `User role updated successfully for ${member.email}`); - await expect(page.getByRole("alertdialog", { name: "Change user role" })).not.toBeVisible(); - })(); - - await step("Log out from owner and log in as member to test non-Owner UI restrictions")(async () => { - await page.getByRole("button", { name: "User profile menu" }).click(); - await page.getByRole("menuitem", { name: "Log out" }).click(); - - // Accept whatever return path we get - await expect(page.getByRole("heading", { name: "Welcome back" })).toBeVisible(); - - // Login as member - await page.getByRole("textbox", { name: "Email" }).fill(member.email); - await page.getByRole("button", { name: "Continue" }).click(); - await expect(page.getByRole("heading", { name: "Enter your verification code" })).toBeVisible(); - await page.keyboard.type(getVerificationCode()); - - // Wait for navigation to complete after verification - await page.waitForURL(/\/admin/, { timeout: 10000 }); - })(); - - await step("Complete member profile setup")(async () => { - await expect(page.getByRole("dialog", { name: "User profile" })).toBeVisible(); - await page.getByRole("textbox", { name: "First name" }).fill(member.firstName); - await page.getByRole("textbox", { name: "Last name" }).fill(member.lastName); - await page.getByRole("textbox", { name: "Title" }).fill("Team Member"); - await page.getByRole("button", { name: "Save changes" }).click(); - - await expectToastMessage(context, "Profile updated successfully"); - await expect(page.getByRole("dialog")).not.toBeVisible(); - })(); - - await step("Navigate to users page as Member & verify invite button is hidden")(async () => { - await page.goto("/admin/users"); - - await expect(page.getByRole("heading", { name: "Users" })).toBeVisible(); - await expect(page.getByRole("button", { name: "Invite user" })).not.toBeVisible(); - })(); - - await step("Navigate to account settings as Member & verify tenant name field is readonly")(async () => { - await page.goto("/admin/account"); - - await expect(page.getByRole("heading", { name: "Account settings" })).toBeVisible(); - await expect(page.getByRole("textbox", { name: "Account name" })).toHaveAttribute("readonly"); - await expect(page.getByText("Only account owners can modify the account name")).toBeVisible(); - await expect(page.getByRole("button", { name: "Save changes" })).not.toBeVisible(); - })(); - - await step("Verify danger zone is hidden for Member")(async () => { - await expect(page.getByRole("heading", { name: "Danger zone" })).not.toBeVisible(); - await expect(page.getByRole("button", { name: "Delete account" })).not.toBeVisible(); - await expect( - page.getByText("Delete your account and all data. This action is irreversible—proceed with caution.") - ).not.toBeVisible(); - })(); - - await step("Verify self-action restrictions work for Member (cannot delete self or change own role)")(async () => { - await page.goto("/admin/users"); - - // Find the member's own row by filtering by email - const memberRow = page.locator("tbody tr").filter({ hasText: member.email }); - await memberRow.getByLabel("User actions").click(); - - // Verify delete menu item is disabled (self-protection) - await expect(page.getByRole("menuitem", { name: "Delete" })).toBeDisabled(); - - // Verify change role menu item is disabled (self-protection) - await expect(page.getByRole("menuitem", { name: "Change role" })).toBeDisabled(); - - await page.keyboard.press("Escape"); - })(); - }); - - /** - * BULK DELETE PERMISSION TESTS - * - * Tests that bulk delete functionality is only available to Owners. - */ - test("should show bulk delete controls only for Owners", async ({ page }) => { - const context = createTestContext(page); - const owner = testUser(); - const member = testUser(); - - await step("Create owner account and multiple test users")(async () => { - await completeSignupFlow(page, expect, owner, context); - await page.goto("/admin/users"); - - const user1 = testUser(); - const user2 = testUser(); - - // Invite first user - await page.getByRole("button", { name: "Invite user" }).click(); - await page.getByRole("textbox", { name: "Email" }).fill(user1.email); - await page.getByRole("button", { name: "Send invite" }).click(); - await expectToastMessage(context, "User invited successfully"); - await expect(page.getByRole("dialog")).not.toBeVisible(); - - // Invite second user - await page.getByRole("button", { name: "Invite user" }).click(); - await page.getByRole("textbox", { name: "Email" }).fill(user2.email); - await page.getByRole("button", { name: "Send invite" }).click(); - await expectToastMessage(context, "User invited successfully"); - await expect(page.getByRole("dialog")).not.toBeVisible(); - - // Invite member user for role testing - await page.getByRole("button", { name: "Invite user" }).click(); - await page.getByRole("textbox", { name: "Email" }).fill(member.email); - await page.getByRole("button", { name: "Send invite" }).click(); - await expectToastMessage(context, "User invited successfully"); - await expect(page.getByRole("dialog")).not.toBeVisible(); - - // Should now have owner + 3 invited users = 4 total - await expect(page.locator("tbody tr")).toHaveCount(4); - })(); - - await step("Select multiple users as Owner & verify bulk delete button appears")(async () => { - // Set viewport to 2xl to avoid side pane backdrop issues - await page.setViewportSize({ width: 1536, height: 1024 }); - - // Select the first two invited users - const rows = page.locator("tbody tr"); - const secondRow = rows.nth(1); // First invited user - const thirdRow = rows.nth(2); // Second invited user - - // Select first user - await secondRow.click(); - await expect(secondRow).toHaveAttribute("aria-selected", "true"); - - // Select second user with Ctrl/Cmd modifier - await thirdRow.click({ modifiers: ["ControlOrMeta"] }); - await expect(thirdRow).toHaveAttribute("aria-selected", "true"); - await expect(secondRow).toHaveAttribute("aria-selected", "true"); - - // Verify bulk delete button is visible for Owner - await expect(page.getByRole("button", { name: "Delete 2 users" })).toBeVisible(); - - // Reset viewport - await page.setViewportSize({ width: 1280, height: 720 }); - })(); - - await step("Log out as owner and log in as member to test bulk delete restrictions")(async () => { - await page.getByRole("button", { name: "User profile menu" }).click(); - await page.getByRole("menuitem", { name: "Log out" }).click(); - - // Accept whatever return path we get - await expect(page.getByRole("heading", { name: "Welcome back" })).toBeVisible(); - - // Login as member - await page.getByRole("textbox", { name: "Email" }).fill(member.email); - await page.getByRole("button", { name: "Continue" }).click(); - await expect(page.getByRole("heading", { name: "Enter your verification code" })).toBeVisible(); - await page.keyboard.type(getVerificationCode()); - - // Wait for navigation to complete after verification - await page.waitForURL(/\/admin/, { timeout: 10000 }); - })(); - - await step("Complete member profile setup")(async () => { - await expect(page.getByRole("dialog", { name: "User profile" })).toBeVisible(); - await page.getByRole("textbox", { name: "First name" }).fill(member.firstName); - await page.getByRole("textbox", { name: "Last name" }).fill(member.lastName); - await page.getByRole("textbox", { name: "Title" }).fill("Team Member"); - await page.getByRole("button", { name: "Save changes" }).click(); - - await expectToastMessage(context, "Profile updated successfully"); - await expect(page.getByRole("dialog")).not.toBeVisible(); - })(); - - await step("Navigate to users page as Member & verify no bulk operations available")(async () => { - await page.goto("/admin/users"); - - // Ensure we can see the users that were created - await expect(page.locator("tbody tr")).toHaveCount(4); - - // Try to select rows (member can still select, but no bulk actions should appear) - // Set viewport to 2xl to avoid side pane backdrop issues - await page.setViewportSize({ width: 1536, height: 1024 }); - - const rows = page.locator("tbody tr"); - const secondRow = rows.nth(1); - const thirdRow = rows.nth(2); - - // Select users as Member - await secondRow.click(); - await expect(secondRow).toHaveAttribute("aria-selected", "true"); - - await thirdRow.click({ modifiers: ["ControlOrMeta"] }); - await expect(thirdRow).toHaveAttribute("aria-selected", "true"); - - // Verify bulk delete button is NOT visible for Member even with selections - await expect(page.getByRole("button", { name: "Delete 2 users" })).not.toBeVisible(); - await expect(page.getByRole("button", { name: "Delete user" })).not.toBeVisible(); - - // Reset viewport - await page.setViewportSize({ width: 1280, height: 720 }); - })(); - }); -}); From c6b8f9648d5ccf0eb3e8092424d15535cefe678e Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Tue, 1 Jul 2025 12:30:09 +0200 Subject: [PATCH 123/171] Update Claude workflow --- .../commands/implement-product-increment.md | 66 +++++++++++++++++++ 1 file changed, 66 insertions(+) create mode 100644 .claude/commands/implement-product-increment.md diff --git a/.claude/commands/implement-product-increment.md b/.claude/commands/implement-product-increment.md new file mode 100644 index 000000000..8b5602a0d --- /dev/null +++ b/.claude/commands/implement-product-increment.md @@ -0,0 +1,66 @@ +--- +description: Coordinates full implementation of a product increment via delegated subagents +--- + +## Inputs + +- `$ARGUMENTS` must contain two space-separated markdown file paths or identifiers: + 1. The PRD markdown + 2. The Product Increment markdown + +Example usage: + +``` +/project:implement-product-increment prd.md increment.md +``` +--- + +## Workflow +Your job is to coordinate the implementation of a product increment. You have a very senior development team, and you're the architect and tech lead. +You must **not** make any code changes yourself. Stay at a high level and ensure the PRD is implemented as discussed. + +Go through each product increment task by task using this workflow: + +1. **Delegate development of the task** to a senior developer subagent. + * Ask the subagent to read `$ARGUMENTS[0]` (PRD) and `$ARGUMENTS[1]` (increment) and prepare a plan for the specific task. + * Be very clear: they must only implement what's in the task, and not do the entire product increment in one go. + * Ask the subagent to get an overview of all the rules in `.windsurf/rules` and ask them to read all the relevant rules related to the task. They must always read `.windsurf/rules/main.md`. + * Ask the developer to read `.windsurf/rules/tools.md` and use the tools while developing: + - Run `[CLI_ALIAS] build --backend` or `[CLI_ALIAS] build --frontend` (or `[CLI_ALIAS] build` if both are changed) constantly while developing. + - Run `[CLI_ALIAS] format --backend` or `[CLI_ALIAS] format --frontend` (or `[CLI_ALIAS] format` if both are changed) to clean up code. + - Run `[CLI_ALIAS] test` to run backend tests and `[CLI_ALIAS] e2e --quiet` to run frontend tests. + * When feature complete and all tests are passing, run `[CLI_ALIAS] check --backend` (very slow) and `[CLI_ALIAS] check --frontend` to ensure code quality. Fix any issues that are found (re-run the checks). + * If the developer finds that something in the task needs to be done differently, they should update the current task in `$ARGUMENTS[1]` and prefix with `UPDATED:`, `DELETED:`, `ADDED:`, or `MOVED TO TASK #: `. If they find that something belongs to a different product increment, they should find that product increment in the same folder and update it if it exists. Also, the `$ARGUMENTS[0]` should be updated to reflect the findings. + +2. **Stage all changes done by the developer subagent in Git** yourself + +3. **Delegate review of the task to another senior developer subagent** + * Ask the reviewer to read `$ARGUMENTS[0]` (PRD) and `$ARGUMENTS[1]` (increment) and prepare a review for the specific task. + * This reviewer must: + - Review uncommitted changes file by file + - For each file they should find relevant rules in `.windsurf/rules` and make sure the code aligns with the rules. + - For each file they should also find relevant patterns in the codebase and make sure the code aligns with existing patterns. + - Return with a detailed list of changes that need to be made, or approval if no changes are needed. + * Be very clear that the reviewer MUST NOT make any changes to the codebase. + * If and only if the reviewer approves the implementation, ask them to follow this workflow `.windsurf/workflows/commit-changes.md` and commit the changes. It's important that they do not add any description or co-authors to the commit. + +4. **Review checkpoint** + * If the changes were NOT approved: + - Start the process from step 1, but adjust the instructions to address the findings from the review, and provide the findings to the senior developer subagent. + - Continue the process until the reviewer approves the implementation. + * If the changes were approved, you must triple check that all tests are passing and code is committed: + - Run `[CLI_ALIAS] check` and `[CLI_ALIAS] e2e --quiet`. + - Confirm that **all application code changes are committed**. + - IMPORTANT: If any checks fail, start the process from step 1 again. Do NOT proceed to the next task until all checks are passing. + +5. **Update PRD and product increment plans** + * Mark the task as completed in `$ARGUMENTS[1]` using `[x]` (product increment plan) + * Commit the changes to `$ARGUMENTS[1]` and potentially `$ARGUMENTS[0]` (PRD) + - These files are in the `/task-manager` directory (a nested git repository, but it's not a submodule) + - Commit changes inside the submodule using a one line commit message in imperative form + +Rinse and repeat these steps until all tasks in `$ARGUMENTS[1]` are completed. + +Once a increments are complete, assign a subagent to follow `.windsurf/workflows/prepare-pull-request.md` to prepare the pull request title and description. + +When the full product increment is complete, return to me for final verification. From 3039453a4c5a69db5a63e7a4eff574435cf2ab79 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Fri, 27 Jun 2025 12:40:11 +0200 Subject: [PATCH 124/171] Create end-to-end developer CLI command for running Playwright tests with sane defaults --- developer-cli/Commands/End2EndCommand.cs | 517 ++++++++++++++++++ .../Installation/PlaywrightInstaller.cs | 23 + developer-cli/Program.cs | 15 +- .../CommandLineArgumentsPreprocessor.cs | 36 ++ .../Utilities/SelfContainedSystemHelper.cs | 43 ++ 5 files changed, 632 insertions(+), 2 deletions(-) create mode 100644 developer-cli/Commands/End2EndCommand.cs create mode 100644 developer-cli/Installation/PlaywrightInstaller.cs create mode 100644 developer-cli/Utilities/CommandLineArgumentsPreprocessor.cs create mode 100644 developer-cli/Utilities/SelfContainedSystemHelper.cs diff --git a/developer-cli/Commands/End2EndCommand.cs b/developer-cli/Commands/End2EndCommand.cs new file mode 100644 index 000000000..e05b92aab --- /dev/null +++ b/developer-cli/Commands/End2EndCommand.cs @@ -0,0 +1,517 @@ +using System.CommandLine; +using System.CommandLine.NamingConventionBinder; +using System.Diagnostics; +using PlatformPlatform.DeveloperCli.Installation; +using PlatformPlatform.DeveloperCli.Utilities; +using Spectre.Console; + +namespace PlatformPlatform.DeveloperCli.Commands; + +public class End2EndCommand : Command +{ + private static readonly string[] ValidBrowsers = ["chromium", "firefox", "webkit", "safari", "all"]; + + // Get available self-contained systems + private static readonly string[] AvailableSelfContainedSystems = SelfContainedSystemHelper.GetAvailableSelfContainedSystems(); + + public End2EndCommand() : base("e2e", "Run end-to-end tests using Playwright") + { + // Add argument for search term or test file patterns + AddArgument(new Argument("search-terms", () => [], "Search terms for test filtering (e.g., 'user management', '@smoke', 'smoke', 'comprehensive', 'user-management-flows.spec.ts')")); + + // All options in alphabetical order + AddOption(new Option(["--browser", "-b"], () => "all", "Browser to use for tests (chromium, firefox, webkit, safari, all)")); + AddOption(new Option(["--debug"], () => false, "Start with Playwright Inspector for debugging (automatically enables headed mode)")); + AddOption(new Option(["--debug-timing"], () => false, "Show step timing output with color coding during test execution")); + AddOption(new Option(["--headed"], () => false, "Show browser UI while running tests (automatically enables sequential execution)")); + AddOption(new Option(["--include-slow"], () => false, "Include tests marked as @slow")); + AddOption(new Option(["--last-failed"], () => false, "Only re-run the failures")); + AddOption(new Option(["--only-changed"], () => false, "Only run test files that have uncommitted changes")); + AddOption(new Option(["--quiet"], () => false, "Suppress all output including terminal output and automatic report opening")); + AddOption(new Option(["--repeat-each"], "Number of times to repeat each test")); + AddOption(new Option(["--delete-artifacts"], () => false, "Delete all test artifacts and exit")); + AddOption(new Option(["--retries"], "Maximum retry count for flaky tests, zero for no retries")); + AddOption(new Option(["", "--self-contained-system", "-s"], $"The name of the self-contained system to test ({string.Join(", ", AvailableSelfContainedSystems)}, etc.)")); + AddOption(new Option(["--show-report"], () => false, "Always show HTML report after test run")); + AddOption(new Option(["--slow-mo"], () => false, "Run tests in slow motion (automatically enables headed mode)")); + AddOption(new Option(["--smoke"], () => false, "Run only smoke tests")); + AddOption(new Option(["--stop-on-first-failure", "-x"], () => false, "Stop after the first failure")); + AddOption(new Option(["--ui"], () => false, "Run tests in interactive UI mode with time-travel debugging")); + AddOption(new Option(["--workers", "-w"], "Number of worker processes to use for running tests")); + + Handler = CommandHandler.Create(Execute); + } + + private static string BaseUrl => Environment.GetEnvironmentVariable("PUBLIC_URL") ?? "https://localhost:9000"; + + private static void Execute( + string[] searchTerms, + string browser, + bool debug, + bool debugTiming, + bool headed, + bool includeSlow, + bool lastFailed, + bool onlyChanged, + bool quiet, + int? repeatEach, + bool deleteArtifacts, + int? retries, + string? selfContainedSystem, + bool showReport, + bool slowMo, + bool smoke, + bool stopOnFirstFailure, + bool ui, + int? workers) + { + Prerequisite.Ensure(Prerequisite.Node); + + if (deleteArtifacts) + { + DeleteAllTestArtifacts(); + AnsiConsole.MarkupLine("[yellow]Note: --delete-artifacts is a standalone operation and exits after cleaning artifacts.[/]"); + Environment.Exit(0); + } + + AnsiConsole.MarkupLine("[blue]Checking server availability...[/]"); + CheckWebsiteAccessibility(); + + PlaywrightInstaller.EnsurePlaywrightBrowsers(); + + // Convert search terms to test patterns and grep patterns + var (testPatterns, searchGrep) = ProcessSearchTerms(searchTerms); + + // Determine which self-contained systems to test based on the provided patterns or grep + string[] selfContainedSystemsToTest; + if (selfContainedSystem is not null) + { + if (!AvailableSelfContainedSystems.Contains(selfContainedSystem)) + { + AnsiConsole.MarkupLine($"[red]Invalid self-contained system '{selfContainedSystem}'. Available systems: {string.Join(", ", AvailableSelfContainedSystems)}[/]"); + Environment.Exit(1); + } + + selfContainedSystemsToTest = [selfContainedSystem]; + } + else + { + selfContainedSystemsToTest = DetermineSystemsToTest(testPatterns, searchGrep, AvailableSelfContainedSystems); + } + + // If debug or UI mode is enabled, we need a specific self-contained system + if ((debug || ui) && selfContainedSystem is null) + { + if (selfContainedSystemsToTest.Length == 1) + { + selfContainedSystem = selfContainedSystemsToTest[0]; + selfContainedSystemsToTest = [selfContainedSystem]; + } + else + { + selfContainedSystem = SelfContainedSystemHelper.PromptForSelfContainedSystem( + selfContainedSystemsToTest.Length > 0 ? selfContainedSystemsToTest : AvailableSelfContainedSystems); + selfContainedSystemsToTest = [selfContainedSystem]; + } + } + + // Validate browser option + if (!ValidBrowsers.Contains(browser.ToLower())) + { + AnsiConsole.MarkupLine($"[red]Invalid browser '{browser}'. Valid options are: {string.Join(", ", ValidBrowsers)}[/]"); + Environment.Exit(1); + } + + var stopwatch = Stopwatch.StartNew(); + var overallSuccess = true; + var failedSelfContainedSystems = new List(); + + foreach (var currentSelfContainedSystem in selfContainedSystemsToTest) + { + var selfContainedSystemSuccess = RunTestsForSystem(currentSelfContainedSystem, testPatterns, browser, debug, debugTiming, searchGrep, headed, includeSlow, lastFailed, + onlyChanged, quiet, repeatEach, retries, showReport, slowMo, smoke, stopOnFirstFailure, ui, workers + ); + + if (!selfContainedSystemSuccess) + { + overallSuccess = false; + failedSelfContainedSystems.Add(currentSelfContainedSystem); + + // If stop on first failure is enabled, exit the loop after the first failure + if (stopOnFirstFailure) + { + break; + } + } + } + + stopwatch.Stop(); + + AnsiConsole.MarkupLine(overallSuccess + ? $"[green]All tests completed in {stopwatch.Elapsed.TotalSeconds:F1} seconds[/]" + : $"[red]Some tests failed in {stopwatch.Elapsed.TotalSeconds:F1} seconds[/]" + ); + + if (!quiet) + { + if (showReport) + { + foreach (var currentSelfContainedSystem in selfContainedSystemsToTest) + { + OpenHtmlReport(currentSelfContainedSystem); + } + } + else if (!overallSuccess) + { + foreach (var currentSelfContainedSystem in failedSelfContainedSystems) + { + OpenHtmlReport(currentSelfContainedSystem); + } + } + } + + if (!overallSuccess) Environment.Exit(1); + } + + private static (string[] testPatterns, string? grep) ProcessSearchTerms(string[] searchTerms) + { + if (searchTerms.Length == 0) + { + return ([], null); + } + + var testPatterns = new List(); + var grepTerms = new List(); + + foreach (var term in searchTerms) + { + var processedTerm = term; + var wasAtSymbol = false; + + // Handle escaped @tag syntax from CommandLineArgumentsPreprocessor + if (term.StartsWith(CommandLineArgumentsPreprocessor.EscapedAtSymbolMarker)) + { + processedTerm = term.Substring(CommandLineArgumentsPreprocessor.EscapedAtSymbolMarker.Length); + wasAtSymbol = true; + } + + // If the term ends with .spec.ts or looks like a file, treat it as a test pattern + if (processedTerm.EndsWith(".spec.ts") || processedTerm.Contains('/') || processedTerm.Contains('\\')) + { + testPatterns.Add(processedTerm); + } + else + { + // For grep terms, preserve the @ if it was originally there + var grepTerm = wasAtSymbol ? $"@{processedTerm}" : processedTerm; + grepTerms.Add(grepTerm); + } + } + + // Combine search terms + var finalGrep = grepTerms.Count > 0 ? string.Join(" ", grepTerms) : null; + + return (testPatterns.ToArray(), finalGrep); + } + + private static bool RunTestsForSystem( + string selfContainedSystem, + string[] testPatterns, + string browser, + bool debug, + bool debugTiming, + string? searchGrep, + bool headed, + bool includeSlow, + bool lastFailed, + bool onlyChanged, + bool quiet, + int? repeatEach, + int? retries, + bool showReport, + bool slowMo, + bool smoke, + bool stopOnFirstFailure, + bool ui, + int? workers) + { + var systemPath = Path.Combine(Configuration.ApplicationFolder, selfContainedSystem, "WebApp"); + var e2eTestsPath = Path.Combine(systemPath, "tests/e2e"); + + if (!Directory.Exists(e2eTestsPath)) + { + AnsiConsole.MarkupLine($"[yellow]No e2e tests found for {selfContainedSystem}. Skipping...[/]"); + return true; + } + + AnsiConsole.MarkupLine($"[blue]Running tests for {selfContainedSystem}...[/]"); + + // Clean up report directory if we're going to show it + if (showReport) + { + var reportDirectory = Path.Combine(systemPath, "tests", "test-results", "playwright-report"); + if (Directory.Exists(reportDirectory)) + { + AnsiConsole.MarkupLine("[blue]Cleaning up previous test report...[/]"); + Directory.Delete(reportDirectory, true); + } + } + + var showBrowser = headed || debug || slowMo; + var runSequential = showBrowser || debugTiming; + var isLocalhost = BaseUrl.Contains("localhost", StringComparison.OrdinalIgnoreCase); + + var playwrightArgs = BuildPlaywrightArgs( + testPatterns, browser, debug, searchGrep, showBrowser, includeSlow, lastFailed, onlyChanged, quiet, repeatEach, + retries, runSequential, smoke, stopOnFirstFailure, ui, workers + ); + + var processStartInfo = new ProcessStartInfo + { + FileName = Configuration.IsWindows ? "cmd.exe" : "npx", + Arguments = $"{(Configuration.IsWindows ? "/C npx" : string.Empty)} playwright test --config=./tests/playwright.config.ts {playwrightArgs}", + WorkingDirectory = systemPath, + UseShellExecute = false + }; + + AnsiConsole.MarkupLine($"[cyan]Running command in {selfContainedSystem}: npx playwright test --config=./tests/playwright.config.ts {playwrightArgs}[/]"); + + processStartInfo.EnvironmentVariables["PUBLIC_URL"] = BaseUrl; + + if (slowMo) processStartInfo.EnvironmentVariables["PLAYWRIGHT_SLOW_MO"] = "500"; + if (isLocalhost) processStartInfo.EnvironmentVariables["PLAYWRIGHT_VIDEO_MODE"] = "on"; + if (debugTiming) processStartInfo.EnvironmentVariables["PLAYWRIGHT_SHOW_DEBUG_TIMING"] = "true"; + + // Prevent HTML report from opening automatically + processStartInfo.EnvironmentVariables["PLAYWRIGHT_HTML_OPEN"] = "never"; + + var testsFailed = false; + try + { + ProcessHelper.StartProcess(processStartInfo, throwOnError: true); + AnsiConsole.MarkupLine(testsFailed + ? $"[red]Tests for {selfContainedSystem} failed[/]" + : $"[green]Tests for {selfContainedSystem} completed successfully[/]" + ); + } + catch (Exception) + { + testsFailed = true; + AnsiConsole.MarkupLine($"[red]Tests for {selfContainedSystem} failed[/]"); + } + + return !testsFailed; + } + + private static void CheckWebsiteAccessibility() + { + try + { + using var httpClient = new HttpClient(); + httpClient.Timeout = TimeSpan.FromSeconds(5); + + var response = httpClient.Send(new HttpRequestMessage(HttpMethod.Head, BaseUrl)); + + if (response.IsSuccessStatusCode) + { + AnsiConsole.MarkupLine($"[green]Server is accessible at {BaseUrl}[/]"); + return; + } + } + catch + { + // Fall through to error handling + } + + AnsiConsole.MarkupLine($"[red]Server is not accessible at {BaseUrl}[/]"); + AnsiConsole.MarkupLine($"[yellow]Please start AppHost in your IDE before running '{Configuration.AliasName} e2e'[/]"); + Environment.Exit(1); + } + + private static string[] DetermineSystemsToTest(string[] testPatterns, string? grep, string[] availableSystems) + { + if ((testPatterns.Length == 0 || testPatterns[0] == "*") && string.IsNullOrEmpty(grep)) + { + return availableSystems; + } + + var matchingSystems = new HashSet(); + + foreach (var pattern in testPatterns.Where(p => p != null && p != "*")) + { + var normalizedPattern = pattern.EndsWith(".spec.ts") ? pattern : $"{pattern}.spec.ts"; + normalizedPattern = Path.GetFileName(normalizedPattern); + + foreach (var system in availableSystems) + { + var e2eTestsPath = Path.Combine(Configuration.ApplicationFolder, system, "WebApp", "tests", "e2e"); + if (!Directory.Exists(e2eTestsPath)) continue; + + var testFiles = Directory.GetFiles(e2eTestsPath, "*.spec.ts", SearchOption.AllDirectories) + .Select(Path.GetFileName); + + if (testFiles.Any(file => file?.Equals(normalizedPattern, StringComparison.OrdinalIgnoreCase) == true)) + { + matchingSystems.Add(system); + } + } + } + + if (matchingSystems.Count > 0) return matchingSystems.ToArray(); + + if (!string.IsNullOrEmpty(grep)) + { + foreach (var system in availableSystems) + { + var e2eTestsPath = Path.Combine(Configuration.ApplicationFolder, system, "WebApp", "tests", "e2e"); + if (!Directory.Exists(e2eTestsPath)) continue; + + var testFiles = Directory.GetFiles(e2eTestsPath, "*.spec.ts", SearchOption.AllDirectories); + foreach (var testFile in testFiles) + { + // For filename search, remove @ if present for comparison + var filenameSearchTerm = grep.StartsWith("@") ? grep.Substring(1) : grep; + var fileName = Path.GetFileNameWithoutExtension(testFile); + if (fileName.Contains(filenameSearchTerm, StringComparison.OrdinalIgnoreCase)) + { + matchingSystems.Add(system); + break; + } + + // For content search, use the grep term as-is (with @ if present) + if (File.ReadAllText(testFile).Contains(grep, StringComparison.OrdinalIgnoreCase)) + { + matchingSystems.Add(system); + break; + } + } + } + + return matchingSystems.ToArray(); + } + + return availableSystems; + } + + private static string BuildPlaywrightArgs( + string[] testPatterns, + string browser, + bool debug, + string? grep, + bool showBrowser, + bool includeSlow, + bool lastFailed, + bool onlyChanged, + bool quiet, + int? repeatEach, + int? retries, + bool runSequential, + bool smoke, + bool stopOnFirstFailure, + bool ui, + int? workers) + { + var args = new List(); + + // Handle browser project first as it affects test selection + if (!browser.Equals("all", StringComparison.CurrentCultureIgnoreCase)) + { + var playwrightBrowser = browser.ToLower() == "safari" ? "webkit" : browser.ToLower(); + args.Add($"--project={playwrightBrowser}"); + } + + // Handle test patterns - they should be relative to the tests/e2e directory + if (testPatterns.Length > 0) + { + args.AddRange(testPatterns.Select(pattern => + pattern.StartsWith("./") || pattern.StartsWith("tests/e2e/") ? pattern : $"./tests/e2e/{pattern}" + ) + ); + } + + // Handle test filtering + if (grep != null) + { + args.Add($"--grep=\"{grep}\""); + } + + if (smoke) args.Add("--grep=\"@smoke\""); + if (!includeSlow) args.Add("--grep-invert=\"@slow\""); + + // Handle test execution options + if (ui) args.Add("--ui"); + if (debug) args.Add("--debug"); + if (showBrowser) args.Add("--headed"); + if (lastFailed) args.Add("--last-failed"); + if (onlyChanged) args.Add("--only-changed"); + if (repeatEach.HasValue) args.Add($"--repeat-each={repeatEach.Value}"); + if (retries.HasValue) args.Add($"--retries={retries.Value}"); + if (workers.HasValue) + { + args.Add($"--workers={workers.Value}"); + } + else if (runSequential) args.Add("--workers=1"); + + if (stopOnFirstFailure) args.Add("-x"); + + return string.Join(" ", args); + } + + private static string PromptForSelfContainedSystem(string[] availableSystems) + { + if (availableSystems.Length == 0) + { + AnsiConsole.MarkupLine("[red]No self-contained systems found.[/]"); + Environment.Exit(1); + return string.Empty; // This line will never be reached but is needed to satisfy the compiler + } + + var selectedSystem = AnsiConsole.Prompt( + new SelectionPrompt() + .Title("Select a [green]self-contained system[/] to test:") + .PageSize(10) + .MoreChoicesText("[grey](Move up and down to reveal more systems)[/]") + .AddChoices(availableSystems) + ); + + return selectedSystem; + } + + private static void OpenHtmlReport(string selfContainedSystem) + { + var reportPath = Path.Combine(Configuration.ApplicationFolder, selfContainedSystem, "WebApp", "tests", "test-results", "playwright-report", "index.html"); + + if (File.Exists(reportPath)) + { + AnsiConsole.MarkupLine($"[green]Opening test report for '{selfContainedSystem}'...[/]"); + ProcessHelper.OpenBrowser(reportPath); + } + else + { + AnsiConsole.MarkupLine($"[yellow]No test report found for '{selfContainedSystem}' at '{reportPath}'[/]"); + } + } + + private static void DeleteAllTestArtifacts() + { + AnsiConsole.MarkupLine("[blue]Deleting test artifacts...[/]"); + + var totalDeleted = 0; + + foreach (var selfContainedSystemName in AvailableSelfContainedSystems) + { + var testResultsDirectory = Path.Combine(Configuration.ApplicationFolder, selfContainedSystemName, "WebApp", "tests", "test-results"); + + if (!Directory.Exists(testResultsDirectory)) continue; + + Directory.Delete(testResultsDirectory, true); + totalDeleted++; + AnsiConsole.MarkupLine($"[green]Deleted test-results directory for {selfContainedSystemName}[/]"); + } + + AnsiConsole.MarkupLine(totalDeleted > 0 + ? $"[green]Successfully deleted test artifacts from {totalDeleted} system(s)[/]" + : "[yellow]No test artifacts found to delete[/]" + ); + } +} diff --git a/developer-cli/Installation/PlaywrightInstaller.cs b/developer-cli/Installation/PlaywrightInstaller.cs new file mode 100644 index 000000000..990f94e22 --- /dev/null +++ b/developer-cli/Installation/PlaywrightInstaller.cs @@ -0,0 +1,23 @@ +using System.Diagnostics; +using PlatformPlatform.DeveloperCli.Utilities; +using Spectre.Console; + +namespace PlatformPlatform.DeveloperCli.Installation; + +public static class PlaywrightInstaller +{ + public static void EnsurePlaywrightBrowsers() + { + AnsiConsole.MarkupLine("[blue]Ensuring Playwright browsers are installed...[/]"); + + var processStartInfo = new ProcessStartInfo + { + FileName = Configuration.IsWindows ? "cmd.exe" : "npx", + Arguments = $"{(Configuration.IsWindows ? "/C npx" : string.Empty)} --yes playwright install --with-deps", + WorkingDirectory = Configuration.ApplicationFolder, + UseShellExecute = false + }; + + ProcessHelper.StartProcess(processStartInfo, throwOnError: true); + } +} \ No newline at end of file diff --git a/developer-cli/Program.cs b/developer-cli/Program.cs index bdba27b22..a852a75c0 100644 --- a/developer-cli/Program.cs +++ b/developer-cli/Program.cs @@ -1,6 +1,9 @@ -using System.CommandLine; +using System.CommandLine; +using System.CommandLine.Builder; +using System.CommandLine.Parsing; using System.Reflection; using PlatformPlatform.DeveloperCli.Installation; +using PlatformPlatform.DeveloperCli.Utilities; using Spectre.Console; var isDebugBuild = new FileInfo(Environment.ProcessPath!).FullName.Contains("debug"); @@ -17,6 +20,9 @@ args = ["--help"]; } +// Preprocess arguments to handle @ symbols in search terms +args = CommandLineArgumentsPreprocessor.PreprocessArguments(args); + var solutionName = new DirectoryInfo(Configuration.SourceCodeFolder).Name; if (args.Length == 1 && (args[0] == "--help" || args[0] == "-h" || args[0] == "-?")) { @@ -45,4 +51,9 @@ allCommands.ForEach(rootCommand.AddCommand); -await rootCommand.InvokeAsync(args); +// Create a CommandLineBuilder with the root command +var builder = new CommandLineBuilder(rootCommand); + +builder.UseDefaults(); + +await builder.Build().InvokeAsync(args); diff --git a/developer-cli/Utilities/CommandLineArgumentsPreprocessor.cs b/developer-cli/Utilities/CommandLineArgumentsPreprocessor.cs new file mode 100644 index 000000000..3cfa3a110 --- /dev/null +++ b/developer-cli/Utilities/CommandLineArgumentsPreprocessor.cs @@ -0,0 +1,36 @@ +namespace PlatformPlatform.DeveloperCli.Utilities; + +public static class CommandLineArgumentsPreprocessor +{ + public const string EscapedAtSymbolMarker = "ESCAPED_AT_SYMBOL"; + + /// + /// Preprocesses command-line arguments to handle special cases like positional arguments with @ symbols. + /// This works around System.CommandLine's response file handling which treats @ as a response file indicator. + /// + /// The original command-line arguments + /// Preprocessed command-line arguments + public static string[] PreprocessArguments(string[] args) + { + var result = new List(); + for (var i = 0; i < args.Length; i++) + { + var arg = args[i]; + + // Handle positional arguments that start with @ (for e2e search terms) + if (arg.StartsWith("@")) + { + // Replace @ with a special marker that won't trigger response file handling + var escapedValue = EscapedAtSymbolMarker + arg.Substring(1); + result.Add(escapedValue); + } + else + { + // Add the argument as-is + result.Add(arg); + } + } + + return result.ToArray(); + } +} \ No newline at end of file diff --git a/developer-cli/Utilities/SelfContainedSystemHelper.cs b/developer-cli/Utilities/SelfContainedSystemHelper.cs new file mode 100644 index 000000000..1094d6ccf --- /dev/null +++ b/developer-cli/Utilities/SelfContainedSystemHelper.cs @@ -0,0 +1,43 @@ +using PlatformPlatform.DeveloperCli.Installation; +using Spectre.Console; + +namespace PlatformPlatform.DeveloperCli.Utilities; + +public static class SelfContainedSystemHelper +{ + public static string[] GetAvailableSelfContainedSystems() + { + return Directory.GetDirectories(Configuration.ApplicationFolder) + .Where(dir => HasRequiredFolders(dir)) + .Select(Path.GetFileName) + .Where(name => name is not null) + .Select(name => name!) + .OrderBy(name => name) + .ToArray(); + } + + private static bool HasRequiredFolders(string directory) + { + return Directory.Exists(Path.Combine(directory, "Api")) && + Directory.Exists(Path.Combine(directory, "Core")) && + Directory.Exists(Path.Combine(directory, "Tests")) && + Directory.Exists(Path.Combine(directory, "WebApp")); + } + + public static string PromptForSelfContainedSystem(string[] availableSystems) + { + if (!AnsiConsole.Profile.Capabilities.Interactive) + { + AnsiConsole.MarkupLine("[red]Cannot show selection prompt in non-interactive terminal.[/]"); + AnsiConsole.MarkupLine("[yellow]Please specify a self-contained system using the -s flag.[/]"); + AnsiConsole.MarkupLine($"[yellow]Available systems: {string.Join(", ", availableSystems)}[/]"); + Environment.Exit(1); + } + + return AnsiConsole.Prompt( + new SelectionPrompt() + .Title("Select a [green]self-contained system[/] to test:") + .AddChoices(availableSystems) + ); + } +} From 2d2d7b6f9c4622242d36ab1f6a4bb69db769649f Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Fri, 27 Jun 2025 12:41:15 +0200 Subject: [PATCH 125/171] Add AI rules for using e2e developer CLI command test regression during development --- .cursor/rules/tools.mdc | 27 ++++++++++++++++++++++++++- .windsurf/rules/tools.md | 27 ++++++++++++++++++++++++++- 2 files changed, 52 insertions(+), 2 deletions(-) diff --git a/.cursor/rules/tools.mdc b/.cursor/rules/tools.mdc index 8500bb2a0..8135674e3 100644 --- a/.cursor/rules/tools.mdc +++ b/.cursor/rules/tools.mdc @@ -9,6 +9,8 @@ alwaysApply: true * BrowserMCP: Use this to troubleshoot frontend issues. The base URL is https://localhost:9000. The website is already running, so never start it manually. * `[PRODUCT_MANAGEMENT_TOOL]`: Use this MCP tool to create and manage product backlog items. +If an MCP Server is not responding, instruct the user to activate it rather than using workarounds like calling `curl` when the browser MCP is unavailable. + # Product Management Tools > **Update this value in ONE place:** @@ -25,7 +27,7 @@ Use the `[CLI_ALIAS]` Developer CLI to build, test, and format backend and front Always use the Developer CLI to build, test, and format code correctly over using direct commands like `npm run format` or `dotnet test`. -**IMPORTANT:** Never fall back to using direct commands like `npm run format` or `dotnet test`. Always use the Developer CLI with the appropriate alias. +**IMPORTANT:** Never fall back to using direct commands like `npm run format`, `dotnet test`, `npx playwright test`, `npm test`, etc. Always use the Developer CLI with the appropriate alias. ## CLI Alias Configuration @@ -67,6 +69,29 @@ After you have completed a backend task and want to ensure that it works as expe [CLI_ALIAS] test --solution-name ``` +## End-to-End Test Commands + +```bash +# Run all end-to-end tests except slow tests +[CLI_ALIAS] e2e + +# Run end-to-end tests for specific so lution +[CLI_ALIAS] e2e --self-contained-system + +# Run end-to-end tests for specific browser +[CLI_ALIAS] e2e --browser + +# Run end-to-end tests for specific search term +[CLI_ALIAS] e2e + +# Run end-to-end tests for specific test tags +[CLI_ALIAS] e2e "@smoke" +[CLI_ALIAS] e2e "smoke" +[CLI_ALIAS] e2e "@comprehensive" +``` + +Any combination of the above parameters is possible. There are other parameters available, but you should only use the ones mentioned above. + ## Format Commands Run these commands before you commit your changes. diff --git a/.windsurf/rules/tools.md b/.windsurf/rules/tools.md index c9ba94473..87db2f21d 100644 --- a/.windsurf/rules/tools.md +++ b/.windsurf/rules/tools.md @@ -9,6 +9,8 @@ description: You have access to several tools and MCP servers * BrowserMCP: Use this to troubleshoot frontend issues. The base URL is https://localhost:9000. The website is already running, so never start it manually. * `[PRODUCT_MANAGEMENT_TOOL]`: Use this MCP tool to create and manage product backlog items. +If an MCP Server is not responding, instruct the user to activate it rather than using workarounds like calling `curl` when the browser MCP is unavailable. + # Product Management Tools > **Update this value in ONE place:** @@ -25,7 +27,7 @@ Use the `[CLI_ALIAS]` Developer CLI to build, test, and format backend and front Always use the Developer CLI to build, test, and format code correctly over using direct commands like `npm run format` or `dotnet test`. -**IMPORTANT:** Never fall back to using direct commands like `npm run format` or `dotnet test`. Always use the Developer CLI with the appropriate alias. +**IMPORTANT:** Never fall back to using direct commands like `npm run format`, `dotnet test`, `npx playwright test`, `npm test`, etc. Always use the Developer CLI with the appropriate alias. ## CLI Alias Configuration @@ -67,6 +69,29 @@ After you have completed a backend task and want to ensure that it works as expe [CLI_ALIAS] test --solution-name ``` +## End-to-End Test Commands + +```bash +# Run all end-to-end tests except slow tests +[CLI_ALIAS] e2e + +# Run end-to-end tests for specific so lution +[CLI_ALIAS] e2e --self-contained-system + +# Run end-to-end tests for specific browser +[CLI_ALIAS] e2e --browser + +# Run end-to-end tests for specific search term +[CLI_ALIAS] e2e + +# Run end-to-end tests for specific test tags +[CLI_ALIAS] e2e "@smoke" +[CLI_ALIAS] e2e "smoke" +[CLI_ALIAS] e2e "@comprehensive" +``` + +Any combination of the above parameters is possible. There are other parameters available, but you should only use the ones mentioned above. + ## Format Commands Run these commands before you commit your changes. From bd3a79078f1208fb450bfd10643c230a625916a2 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Thu, 12 Jun 2025 12:14:51 +0200 Subject: [PATCH 126/171] Fix bug in GitHelper.GetChangedFiles() in Developer CLI for deleted files --- developer-cli/Utilities/GitHelper.cs | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/developer-cli/Utilities/GitHelper.cs b/developer-cli/Utilities/GitHelper.cs index a702e8033..047fa648e 100644 --- a/developer-cli/Utilities/GitHelper.cs +++ b/developer-cli/Utilities/GitHelper.cs @@ -136,7 +136,9 @@ public static Dictionary GetChangedFiles() .Where(f => !f.EndsWith('/') && !f.EndsWith('\\')) .Select(line => line[3..].Trim()); - return changedFiles.ToDictionary(file => file.Replace(Configuration.SourceCodeFolder, ""), GetFileHash); + return changedFiles + .Where(File.Exists) + .ToDictionary(file => file.Replace(Configuration.SourceCodeFolder, ""), GetFileHash); string GetFileHash(string file) { From 23a5b17202821881a0983657e5ae2689222c41b8 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Thu, 29 May 2025 17:28:30 +0200 Subject: [PATCH 127/171] Fix flaky AvatarButton loading issues with module federation --- .../back-office/WebApp/shared/components/topMenu/index.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/application/back-office/WebApp/shared/components/topMenu/index.tsx b/application/back-office/WebApp/shared/components/topMenu/index.tsx index 716c387a4..49b806866 100644 --- a/application/back-office/WebApp/shared/components/topMenu/index.tsx +++ b/application/back-office/WebApp/shared/components/topMenu/index.tsx @@ -6,7 +6,7 @@ import { Button } from "@repo/ui/components/Button"; import { ThemeModeSelector } from "@repo/ui/theme/ThemeModeSelector"; import { LifeBuoyIcon } from "lucide-react"; import type { ReactNode } from "react"; -import { lazy } from "react"; +import { Suspense, lazy } from "react"; const AvatarButton = lazy(() => import("account-management/AvatarButton")); @@ -31,7 +31,9 @@ export function TopMenu({ children }: Readonly) { - + }> + + ); From cbfb8759882131e04504b58a235a813fffbb4b27 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Fri, 6 Jun 2025 22:02:58 +0200 Subject: [PATCH 128/171] Add CLAUDE.md files --- CLAUDE.md | 173 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 173 insertions(+) create mode 100644 CLAUDE.md diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 000000000..09f47617c --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,173 @@ +# CLAUDE.md + +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. + +## Main Entry Point + +This is the main entry point for AI-based development when working with this codebase, but also serves as a great reference for developers. + +Always follow these rule files very carefully, as they have been crafted to ensure consistency and high-quality code. + +## High-Level Problem Solving Strategy + +1. Understand the problem deeply. Carefully read the instructions and think critically about what is required. +2. Investigate the codebase. Explore relevant files, search for key functions, and gather context. +3. Develop a clear, step-by-step plan. Break down the fix into manageable, incremental steps. +4. Before each code change, always consult the relevant rule files, and follow the rules very carefully. + - Failure to follow the rules is the main reason for making unacceptable changes. +5. Iterate until you are extremely confident the fix is complete. + - When changing code, do not add comments about what you changed. +6. After each change, make sure you follow the rules in Backend Rules or Frontend Rules on how to correctly use the [CLI_ALIAS] CLI tool for building, testing, and formatting the code. + - Failure to use the [CLI_ALIAS] CLI tool after each change is the second most common reason for making unacceptable changes. + - Always use the [CLI_ALIAS] CLI commands as described in Tools for building, testing, formatting, and inspecting code. + +## Rules for implementing changes + +Always consult the relevant rule files before each code change. + +Please note that I often correct or even revert code you generated. If you notice that, take special care not to revert my changes. + +Commit messages should be in imperative form, start with a capital letter, avoid ending punctuation, be a single line, and concisely describe changes and motivation. + +## CLI Alias Configuration + +The `[CLI_ALIAS]` is configured as `pp` (PlatformPlatform CLI). This Developer CLI should be used for all build, test, and format operations instead of direct commands. + +**IMPORTANT:** Never fall back to using direct commands like `npm run format`, `dotnet test`, `npx playwright test`, `npm test`, etc. Always use the Developer CLI with the appropriate alias. + +## Build Commands + +Use these commands continuously when you are working on the codebase. + +```bash +# Build both backend and frontend +pp build + +# Build only backend +pp build --backend + +# Build specific backend solution +pp build --backend --solution-name + +# Build only frontend +pp build --frontend +``` + +## Test Commands + +After you have completed a backend task and want to ensure that it works as expected, run the test commands. + +```bash +# Run all tests +pp test + +# Run tests for specific solution +pp test --solution-name +``` + +## End-to-End Test Commands + +```bash +# Run all end-to-end tests except slow tests +pp e2e + +# Run end-to-end tests for specific solution +pp e2e --self-contained-system + +# Run end-to-end tests for specific browser +pp e2e --browser + +# Run end-to-end tests for specific test +pp e2e --grep + +# Run end-to-end tests for specific test and browser +pp e2e --grep "@tag" + +# Include slow tests (excluded by default) +pp e2e --include-slow +``` + +## Format Commands + +Run these commands before you commit your changes. + +```bash +# Format both backend and frontend (run this before commit) +pp format + +# Format only backend (run this before commit) +pp format --backend + +# Format specific backend solution (run this before commit) +pp format --backend --solution-name + +# Format only frontend (run this before commit) +pp format --frontend +``` +## Rules for implementing changes + +Always consult the relevant rule files before each code change. + +*General Rules*: +- [Tools](/.windsurf/rules/tools.md) - Rules for how to use Developer CLI tools to build, test, and format code correctly over using direct commands like `npm run format` or `dotnet test`. + +*Backend*: +- [Backend](/.windsurf/rules/backend/backend.md) - Core rules for C# development and tooling +- [API Endpoints](/.windsurf/rules/backend/api-endpoints.md) - Rules for ASP.NET minimal API endpoints +- [Commands](/.windsurf/rules/backend/commands.md) - Rules for implementing CQRS commands, validation, handlers, and structure +- [Database Migrations](/.windsurf/rules/backend/database-migrations.md) - Rules for creating database migrations +- [Domain Modeling](/.windsurf/rules/backend/domain-modeling.md) - Rules for creating DDD aggregates, entities, value objects, and Entity Framework configuration +- [External Integrations](/.windsurf/rules/backend/external-integrations.md) - Rules for creating external integration services +- [Queries](/.windsurf/rules/backend/queries.md) - Rules for CQRS queries, including structure, validation, response types, and mapping +- [Repositories](/.windsurf/rules/backend/repositories.md) - Rules for DDD repositories, including tenant scoping, interface conventions, and use of Entity Framework +- [Strongly Typed IDs](/.windsurf/rules/backend/strongly-typed-ids.md) - Rules for creating strongly typed IDs for DDD aggregates and entities +- [Telemetry Events](/.windsurf/rules/backend/telemetry-events.md) - Rules for telemetry events including important rules of where to create events, naming, and what properties to track +- [API Tests](/.windsurf/rules/backend/api-tests.md) - Rules for writing backend API tests + +*Frontend*: +- [Frontend](/.windsurf/rules/frontend/frontend.md) - Core rules for frontend TypeScript and React development + - [Form with Validation](/.windsurf/rules/frontend/form-with-validation.md) - Rules for forms with validation using React Aria Components + - [Modal Dialog](/.windsurf/rules/frontend/modal-dialog.md) - Rules for modal dialogs using React Aria Components + - [React Aria Components](/.windsurf/rules/frontend/react-aria-components.md) - Rules for using React Aria Components + - [TanStack Query API Integration](/.windsurf/rules/frontend/tanstack-query-api-integration.md) - Rules for using TanStack Query with backend APIs + - [Translations](/.windsurf/rules/frontend/translations.md) - Rules for translations and internationalization + +*Infrastructure*: +- [Infrastructure](/.windsurf/rules/infrastructure/infrastructure.md) - Rules for cloud infrastructure and deployment + +*Developer CLI*: +- [Developer CLI](/.windsurf/rules/developer-cli/developer-cli.md) - Rules for implementing Developer CLI commands + +*Workflows*: +- [AI Rules Workflow](/.windsurf/workflows/ai-rules.md) - Workflow for creating and maintaining AI rules +- [Code Review Workflow](/.windsurf/workflows/code-review.md) - Workflow for code review of branches, uncommitted changes, or files +- [Git Commits Workflow](/.windsurf/workflows/git-commits.md) - Workflow for writing effective git commit messages +- [Pull Request Workflow](/.windsurf/workflows/pull-request.md) - Workflow for writing pull request titles and descriptions +- [Update Windsurf Rules Workflow](/.windsurf/workflows/update-windsurfrules.md) - Rules for updating the .windsurfrules file which is used by Windsurf's JetBrains Add-in. + +*End-to-End Testing*: +- [End-to-End Testing](/.windsurf/rules/e2e/e2e.md) - Rules for end-to-end testing + +## Project Structure + +This is a mono repository with multiple self-contained systems (SCS), each being a small monolith. All SCSs follow the same structure. + +- **application/**: Contains application code: + - **account-management/**: An SCS for tenant and user management: + - **WebApp/**: A React, TypeScript SPA. + - **Api/**: .NET 9 minimal API. + - **Core/**: .NET 9 Vertical Sliced Architecture. + - **Workers/**: A .NET Console job. + - **Tests/**: xUnit tests for backend. + - **back-office/**: An empty SCS that will be used to create tools for Support and System Admins: + - **WebApp/**: A React, TypeScript SPA. + - **Api/**: .NET 9 minimal API. + - **Core/**: .NET 9 Vertical Sliced Architecture. + - **Workers/**: A .NET Console job. + - **Tests/**: xUnit tests for backend. + - **AppHost/**: .NET Aspire project for orchestrating SCSs and Docker containers. Never run directly—typically running in watch mode. + - **AppGateway/**: Main entry point using .NET YARP as reverse proxy for all SCSs. + - **shared-kernel/**: Reusable .NET backend shared by all SCSs. + - **shared-webapp/**: Reusable frontend shared by all SCSs. +- **cloud-infrastructure/**: Bash and Azure Bicep scripts (IaC). +- **developer-cli/**: A .NET CLI tool for automating common developer tasks. From 3a37b2184841f990d2da75520636126ff43f2ac3 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Mon, 26 May 2025 09:19:40 +0200 Subject: [PATCH 129/171] Create End2EndTests project structure and add to solution --- application/End2EndTests/End2EndTests.esproj | 11 +++++++++++ application/PlatformPlatform.slnx | 1 + 2 files changed, 12 insertions(+) create mode 100644 application/End2EndTests/End2EndTests.esproj diff --git a/application/End2EndTests/End2EndTests.esproj b/application/End2EndTests/End2EndTests.esproj new file mode 100644 index 000000000..4ecb96bd7 --- /dev/null +++ b/application/End2EndTests/End2EndTests.esproj @@ -0,0 +1,11 @@ + + + + false + false + net9.0 + $(DefaultItemExcludes);node_modules\**;dist\**;playwright-report\**;test-results\**;*.config.*;*.d.ts + $(MSBuildProjectDirectory)\..\package-lock.json + + + \ No newline at end of file diff --git a/application/PlatformPlatform.slnx b/application/PlatformPlatform.slnx index 2cfc33114..045dc072e 100644 --- a/application/PlatformPlatform.slnx +++ b/application/PlatformPlatform.slnx @@ -20,4 +20,5 @@ + From 35bb2bc8b2f114d3a6eb0c48ead67672a60b7802 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Mon, 26 May 2025 09:29:23 +0200 Subject: [PATCH 130/171] Add Playwright End2EndTests project with complete configuration --- .gitignore | 6 ++ application/End2EndTests/README.md | 15 +++ application/End2EndTests/package.json | 8 ++ application/End2EndTests/playwright.config.ts | 76 +++++++++++++++ application/End2EndTests/shared/constants.ts | 19 ++++ .../tests/account-management/homepage.spec.ts | 8 ++ .../tests/back-office/homepage.spec.ts | 8 ++ application/End2EndTests/tsconfig.json | 14 +++ application/package-lock.json | 93 +++++++++++++++++-- application/package.json | 9 +- application/turbo.json | 6 +- 11 files changed, 251 insertions(+), 11 deletions(-) create mode 100644 application/End2EndTests/README.md create mode 100644 application/End2EndTests/package.json create mode 100644 application/End2EndTests/playwright.config.ts create mode 100644 application/End2EndTests/shared/constants.ts create mode 100644 application/End2EndTests/tests/account-management/homepage.spec.ts create mode 100644 application/End2EndTests/tests/back-office/homepage.spec.ts create mode 100644 application/End2EndTests/tsconfig.json diff --git a/.gitignore b/.gitignore index 82d719f94..12b58f39f 100644 --- a/.gitignore +++ b/.gitignore @@ -400,3 +400,9 @@ dist/ # Git submodules .gitmodules + +# Playwright E2E testing artifacts +test-results/ +playwright-report/ +**/playwright/.cache/ + diff --git a/application/End2EndTests/README.md b/application/End2EndTests/README.md new file mode 100644 index 000000000..8e0422173 --- /dev/null +++ b/application/End2EndTests/README.md @@ -0,0 +1,15 @@ +# End2EndTests + +End-to-end tests for PlatformPlatform using Playwright. + +## About Playwright + +Playwright is Microsoft's modern end-to-end testing framework that provides reliable, fast, and cross-browser testing capabilities. It's the right choice for PlatformPlatform because it offers excellent developer experience with built-in debugging tools, automatic waiting, and comprehensive browser support including Chromium, Firefox, and WebKit. + +## Test Organization + +Create tests in folders under `tests/your-self-contained-system/` (e.g., `tests/account-management/`, `tests/back-office/`). Use `@smoke` tags for fast, essential tests that should run on every change. + +## Prerequisites + +- Application running at `https://localhost:9000` diff --git a/application/End2EndTests/package.json b/application/End2EndTests/package.json new file mode 100644 index 000000000..1edd423c5 --- /dev/null +++ b/application/End2EndTests/package.json @@ -0,0 +1,8 @@ +{ + "name": "end-2-endtests", + "version": "1.0.0", + "private": true, + "scripts": { + "test": "playwright test" + } +} diff --git a/application/End2EndTests/playwright.config.ts b/application/End2EndTests/playwright.config.ts new file mode 100644 index 000000000..baedb741e --- /dev/null +++ b/application/End2EndTests/playwright.config.ts @@ -0,0 +1,76 @@ +/// +import { defineConfig, devices } from "@playwright/test"; +import { getBaseUrl } from "./shared/constants"; + +/** + * See https://playwright.dev/docs/test-configuration. + */ +export default defineConfig({ + // Look for test files in the "tests" directory, relative to this configuration file. + testDir: "tests", + + // Run tests in files in parallel + fullyParallel: true, + + // Fail the build on CI if you accidentally left test.only in the source code. + forbidOnly: !!process.env.CI, + + // Retry on CI only + retries: process.env.CI ? 2 : 0, + + // Opt out of parallel tests on CI. + workers: process.env.CI ? 1 : undefined, + + // Reporter to use. See https://playwright.dev/docs/test-reporters + reporter: process.env.CI ? "github" : [["list"], ["html", { open: "never" }]], + + // Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. + use: { + // Base URL to use in actions like `await page.goto('/')`. + // biome-ignore lint/style/useNamingConvention: Using Playwright's required property name + baseURL: getBaseUrl(), + + // Browser launch options + launchOptions: { + // Slow motion delay controlled by CLI --slow-mo flag + slowMo: process.env.PLAYWRIGHT_SLOW_MO ? Number.parseInt(process.env.PLAYWRIGHT_SLOW_MO) : 0 + }, + + // Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer + trace: "on-first-retry", + // Take screenshot on failure + screenshot: "only-on-failure", + // Record video - always use retain-on-failure for better HTML report compatibility + // Videos will be recorded for failed tests and can be forced on via CLI if needed + video: process.env.PLAYWRIGHT_VIDEO_MODE === "on" ? "on" : "retain-on-failure" + }, + + // Global timeout for each test (dynamic based on slow tests) + timeout: process.env.PLAYWRIGHT_TIMEOUT ? Number.parseInt(process.env.PLAYWRIGHT_TIMEOUT) : 30000, + + // Global timeout for expect assertions + expect: { + timeout: 5000 + }, + + // Output directories + outputDir: "test-results/", + + // Configure projects for major browsers + projects: [ + { + name: "chromium", + use: { ...devices["Desktop Chrome"] } + }, + + { + name: "firefox", + use: { ...devices["Desktop Firefox"] } + }, + + { + name: "webkit", + use: { ...devices["Desktop Safari"] } + } + ] +}); diff --git a/application/End2EndTests/shared/constants.ts b/application/End2EndTests/shared/constants.ts new file mode 100644 index 000000000..9d47c632b --- /dev/null +++ b/application/End2EndTests/shared/constants.ts @@ -0,0 +1,19 @@ +/** + * Shared constants for End2End tests + */ + +const DEFAULT_BASE_URL = "https://localhost:9000"; + +/** + * Get the base URL for tests + */ +export function getBaseUrl(): string { + return process.env.PUBLIC_URL ?? DEFAULT_BASE_URL; +} + +/** + * Check if we're running against localhost + */ +export function isLocalhost(): boolean { + return getBaseUrl() === DEFAULT_BASE_URL; +} diff --git a/application/End2EndTests/tests/account-management/homepage.spec.ts b/application/End2EndTests/tests/account-management/homepage.spec.ts new file mode 100644 index 000000000..99f3f1128 --- /dev/null +++ b/application/End2EndTests/tests/account-management/homepage.spec.ts @@ -0,0 +1,8 @@ +import { expect, test } from "@playwright/test"; + +test("@smoke homepage loads", async ({ page }) => { + await page.goto("/"); + + // Expect the page to load successfully (no 404 or error) + await expect(page.locator("body")).toBeVisible(); +}); diff --git a/application/End2EndTests/tests/back-office/homepage.spec.ts b/application/End2EndTests/tests/back-office/homepage.spec.ts new file mode 100644 index 000000000..8b8b40a45 --- /dev/null +++ b/application/End2EndTests/tests/back-office/homepage.spec.ts @@ -0,0 +1,8 @@ +import { expect, test } from "@playwright/test"; + +test("@smoke back-office homepage", async ({ page }) => { + await page.goto("/back-office"); + + // Verify page loads successfully and has correct title + await expect(page.locator("body")).toBeVisible(); +}); diff --git a/application/End2EndTests/tsconfig.json b/application/End2EndTests/tsconfig.json new file mode 100644 index 000000000..067475f12 --- /dev/null +++ b/application/End2EndTests/tsconfig.json @@ -0,0 +1,14 @@ +{ + "$schema": "https://json.schemastore.org/tsconfig", + "display": "End2EndTests", + "extends": "@repo/config/typescript/node-library.json", + "compilerOptions": { + "baseUrl": ".", + "types": ["node"], + "paths": { + "@/shared/*": ["./shared/*"] + } + }, + "include": ["tests/**/*.ts", "shared/**/*.ts"], + "exclude": ["node_modules", "test-results", "playwright-report"] +} diff --git a/application/package-lock.json b/application/package-lock.json index fbb7221f4..9f6044e99 100644 --- a/application/package-lock.json +++ b/application/package-lock.json @@ -7,10 +7,12 @@ "": { "name": "application", "version": "1.0.0", + "hasInstallScript": true, "workspaces": [ "account-management/WebApp", "back-office/WebApp", - "shared-webapp/*" + "shared-webapp/*", + "End2EndTests" ], "dependencies": { "@fontsource/inter": "5.1.0", @@ -40,6 +42,7 @@ "@lingui/cli": "5.1.0", "@lingui/format-po": "5.1.0", "@lingui/swc-plugin": "5.0.1", + "@playwright/test": "1.42.1", "@rsbuild/core": "1.1.10", "@rsbuild/plugin-react": "1.1.0", "@rsbuild/plugin-svgr": "1.0.6", @@ -48,10 +51,12 @@ "@tailwindcss/container-queries": "0.1.1", "@tanstack/router-devtools": "1.90.0", "@tanstack/router-plugin": "1.87.13", + "@types/node": "^22.15.28", "@types/react": "19.0.0", "@types/react-dom": "19.0.0", "openapi-typescript": "7.4.4", "openapi-typescript-helpers": "0.0.15", + "playwright": "1.42.1", "rimraf": "6.0.1", "tailwindcss": "3.4.16", "tailwindcss-animate": "1.0.7", @@ -80,6 +85,10 @@ "@repo/ui": "*" } }, + "End2EndTests": { + "name": "end-2-endtests", + "version": "1.0.0" + }, "node_modules/@alloc/quick-lru": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz", @@ -1850,6 +1859,23 @@ "node": ">=14" } }, + "node_modules/@playwright/test": { + "version": "1.42.1", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.42.1.tgz", + "integrity": "sha512-Gq9rmS54mjBL/7/MvBaNOBwbfnh7beHvS6oS4srqXFcQHpQCV1+c8JXWE8VLPyRDhgS3H8x8A7hztqI9VnwrAQ==", + "deprecated": "Please update to the latest version of Playwright to test up-to-date browsers.", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "playwright": "1.42.1" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=16" + } + }, "node_modules/@react-aria/accordion": { "version": "3.0.0-alpha.36", "resolved": "https://registry.npmjs.org/@react-aria/accordion/-/accordion-3.0.0-alpha.36.tgz", @@ -4629,13 +4655,13 @@ } }, "node_modules/@types/node": { - "version": "22.10.2", - "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.2.tgz", - "integrity": "sha512-Xxr6BBRCAOQixvonOye19wnzyDiUtTeqldOOmj3CkeblonbccA12PFwlufvRdrpjXxqnmUaeiU5EOA+7s5diUQ==", + "version": "22.15.29", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.29.tgz", + "integrity": "sha512-LNdjOkUDlU1RZb8e1kOIUpN1qQUlzGkEtbVNo53vbrwDg5om6oduhm4SiUaPW5ASTXhAiP0jInWG8Qx9fVlOeQ==", "devOptional": true, "license": "MIT", "dependencies": { - "undici-types": "~6.20.0" + "undici-types": "~6.21.0" } }, "node_modules/@types/parse-json": { @@ -5550,6 +5576,10 @@ "node": ">= 4" } }, + "node_modules/end-2-endtests": { + "resolved": "End2EndTests", + "link": true + }, "node_modules/entities": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", @@ -6940,6 +6970,53 @@ "node": ">=8" } }, + "node_modules/playwright": { + "version": "1.42.1", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.42.1.tgz", + "integrity": "sha512-PgwB03s2DZBcNRoW+1w9E+VkLBxweib6KTXM0M3tkiT4jVxKSi6PmVJ591J+0u10LUrgxB7dLRbiJqO5s2QPMg==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "playwright-core": "1.42.1" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=16" + }, + "optionalDependencies": { + "fsevents": "2.3.2" + } + }, + "node_modules/playwright-core": { + "version": "1.42.1", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.42.1.tgz", + "integrity": "sha512-mxz6zclokgrke9p1vtdy/COWBH+eOZgYUVVU34C73M+4j4HLlQJHtfcqiqqxpP0o8HhMkflvfbquLX5dg6wlfA==", + "dev": true, + "license": "Apache-2.0", + "bin": { + "playwright-core": "cli.js" + }, + "engines": { + "node": ">=16" + } + }, + "node_modules/playwright/node_modules/fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, "node_modules/pluralize": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-8.0.0.tgz", @@ -8867,9 +8944,9 @@ } }, "node_modules/undici-types": { - "version": "6.20.0", - "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz", - "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==", + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz", + "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==", "devOptional": true, "license": "MIT" }, diff --git a/application/package.json b/application/package.json index 9a6305443..21b072516 100644 --- a/application/package.json +++ b/application/package.json @@ -7,7 +7,8 @@ "workspaces": [ "account-management/WebApp", "back-office/WebApp", - "shared-webapp/*" + "shared-webapp/*", + "End2EndTests" ], "scripts": { "start": "npm install && turbo dev", @@ -15,7 +16,8 @@ "build": "turbo build", "test": "turbo test", "check": "turbo check", - "lint": "turbo lint" + "lint": "turbo lint", + "postinstall": "npx playwright install --with-deps" }, "dependencies": { "@fontsource/inter": "5.1.0", @@ -45,6 +47,7 @@ "@lingui/cli": "5.1.0", "@lingui/format-po": "5.1.0", "@lingui/swc-plugin": "5.0.1", + "@playwright/test": "1.42.1", "@rsbuild/core": "1.1.10", "@rsbuild/plugin-react": "1.1.0", "@rsbuild/plugin-svgr": "1.0.6", @@ -53,10 +56,12 @@ "@tailwindcss/container-queries": "0.1.1", "@tanstack/router-devtools": "1.90.0", "@tanstack/router-plugin": "1.87.13", + "@types/node": "^22.15.28", "@types/react": "19.0.0", "@types/react-dom": "19.0.0", "openapi-typescript": "7.4.4", "openapi-typescript-helpers": "0.0.15", + "playwright": "1.42.1", "rimraf": "6.0.1", "tailwindcss": "3.4.16", "tailwindcss-animate": "1.0.7", diff --git a/application/turbo.json b/application/turbo.json index 5d0092355..c64c991f7 100644 --- a/application/turbo.json +++ b/application/turbo.json @@ -3,7 +3,7 @@ "globalEnv": ["CERTIFICATE_PASSWORD"], "tasks": { "build": { - "outputs": ["dist/**"], + "outputs": ["dist/**", "End2EndTests/playwright-report/**"], "dependsOn": ["^build"] }, "check": { @@ -26,6 +26,10 @@ }, "clean": { "cache": false + }, + "test": { + "cache": false, + "dependsOn": ["^build"] } }, "remoteCache": { From bc61f638dca0481c8bed1616a0dc58089bc6a04b Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Mon, 26 May 2025 09:35:01 +0200 Subject: [PATCH 131/171] Add VS Code IDE integration for Playwright End2EndTests --- .vscode/extensions.json | 5 ++-- .vscode/launch.json | 64 +++++++++++++++++++++++++++++++++++++++++ .vscode/settings.json | 5 +++- 3 files changed, 71 insertions(+), 3 deletions(-) create mode 100644 .vscode/launch.json diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 8ac133d7a..579e953ad 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -1,8 +1,9 @@ { "recommendations": [ + "biomejs.biome", "bradlc.vscode-tailwindcss", "ms-azuretools.vscode-bicep", - "github.vscode-github-actions", - "biomejs.biome", + "ms-playwright.playwright", + "github.vscode-github-actions" ] } diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 000000000..c824eccf5 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,64 @@ +{ + "version": "0.2.0", + "configurations": [ + { + "name": "Run All Playwright Tests", + "type": "node", + "request": "launch", + "program": "${workspaceFolder}/application/node_modules/@playwright/test/cli.js", + "args": ["test"], + "cwd": "${workspaceFolder}/application/End2EndTests", + "env": { + "PUBLIC_URL": "https://localhost:9000" + }, + "console": "integratedTerminal", + "internalConsoleOptions": "neverOpen" + }, + { + "name": "Run Smoke Tests", + "type": "node", + "request": "launch", + "program": "${workspaceFolder}/application/node_modules/@playwright/test/cli.js", + "args": ["test", "--grep", "@smoke"], + "cwd": "${workspaceFolder}/application/End2EndTests", + "env": { + "PUBLIC_URL": "https://localhost:9000" + }, + "console": "integratedTerminal", + "internalConsoleOptions": "neverOpen" + }, + { + "name": "Debug Current Test (Chrome)", + "type": "node", + "request": "launch", + "program": "${workspaceFolder}/application/node_modules/@playwright/test/cli.js", + "args": ["test", "${relativeFile}", "--headed", "--project=chromium", "--timeout=0"], + "cwd": "${workspaceFolder}/application/End2EndTests", + "env": { + "PUBLIC_URL": "https://localhost:9000", + "PWDEBUG": "0" + }, + "console": "integratedTerminal", + "internalConsoleOptions": "neverOpen", + "sourceMaps": true, + "smartStep": true, + "skipFiles": [ + "/**", + "**/node_modules/**" + ] + }, + { + "name": "Debug with Playwright Inspector", + "type": "node", + "request": "launch", + "program": "${workspaceFolder}/application/node_modules/@playwright/test/cli.js", + "args": ["test", "${relativeFile}", "--debug", "--project=chromium"], + "cwd": "${workspaceFolder}/application/End2EndTests", + "env": { + "PUBLIC_URL": "https://localhost:9000" + }, + "console": "integratedTerminal", + "internalConsoleOptions": "neverOpen" + } + ] +} \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json index f608d0476..13797a3e5 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -27,7 +27,8 @@ "editor.defaultFormatter": "biomejs.biome" }, "files.associations": { - "*.css": "tailwindcss" + "*.css": "tailwindcss", + "*.spec.ts": "typescript" }, "githubIssues.issueBranchTitle": "${issueNumber}-${sanitizedLowercaseIssueTitle}", "githubPullRequests.assignCreated": "${user}", @@ -35,4 +36,6 @@ "biome.lspBin": "./application/node_modules/.bin/biome", "biome.searchInPath": false, "biome.enabled": true, + "playwright.projectDir": "application/End2EndTests", + "playwright.showTrace": true, } From cec398450c0f1079cea997d1e9c56c476a37d049 Mon Sep 17 00:00:00 2001 From: Thomas Jespersen Date: Sat, 31 May 2025 17:08:16 +0200 Subject: [PATCH 132/171] Move e2e test utilities to shared-webapp with failing tests --- .cursor/rules/end-to-end-tests/e2e-tests.mdc | 121 ++++ .cursor/rules/workflows/create-e2e-tests.mdc | 59 ++ .vscode/launch.json | 8 +- .windsurf/rules/end-to-end-tests/e2e-tests.md | 122 ++++ .windsurf/workflows/create-e2e-tests.md | 58 ++ application/End2EndTests/playwright.config.ts | 2 +- .../tests/account-management/login.spec.ts | 671 ++++++++++++++++++ .../tests/account-management/signup.spec.ts | 605 ++++++++++++++++ application/shared-webapp/package.json | 12 + .../tests/e2e/utils}/constants.ts | 2 + .../tests/e2e/utils/test-assertions.ts | 377 ++++++++++ .../tests/e2e/utils/test-data.ts | 96 +++ 12 files changed, 2128 insertions(+), 5 deletions(-) create mode 100644 .cursor/rules/end-to-end-tests/e2e-tests.mdc create mode 100644 .cursor/rules/workflows/create-e2e-tests.mdc create mode 100644 .windsurf/rules/end-to-end-tests/e2e-tests.md create mode 100644 .windsurf/workflows/create-e2e-tests.md create mode 100644 application/End2EndTests/tests/account-management/login.spec.ts create mode 100644 application/End2EndTests/tests/account-management/signup.spec.ts create mode 100644 application/shared-webapp/package.json rename application/{End2EndTests/shared => shared-webapp/tests/e2e/utils}/constants.ts (92%) create mode 100644 application/shared-webapp/tests/e2e/utils/test-assertions.ts create mode 100644 application/shared-webapp/tests/e2e/utils/test-data.ts diff --git a/.cursor/rules/end-to-end-tests/e2e-tests.mdc b/.cursor/rules/end-to-end-tests/e2e-tests.mdc new file mode 100644 index 000000000..52188acb9 --- /dev/null +++ b/.cursor/rules/end-to-end-tests/e2e-tests.mdc @@ -0,0 +1,121 @@ +--- +description: Rules for end-to-end tests +globs: */tests/e2e/** +alwaysApply: false +--- +# End-to-End Tests + +These rules outline the structure, patterns, and best practices for writing end-to-end tests. + +## Implementation + +1. Use `[CLI_ALIAS] e2e` with these option categories to optimize test execution: + - Test filtering: `--smoke`, `--include-slow`, `--grep`, `--browser` + - Change scoping: `--last-failed`, `--only-changed` + - Flaky test detection: `--repeat-each`, `--retries`, `--stop-on-first-failure` + +2. Test-Driven Debugging Process: + - Focus on one failing test at a time and make it pass before moving to the next. + - Ensure tests use Playwright's built-in auto-waiting assertions: `toHaveURL()`, `toBeVisible()`, `toBeEnabled()`, `toHaveValue()`, `toContainText()`. + - Consider if root causes can be fixed in the application code, and fix application bugs rather than masking them with test workarounds. + - Use Browser MCP to manually test the feature and verify it works correctly outside of automated tests. + +3. Organize tests in a consistent file structure: + - One file per feature (e.g., `signup.spec.ts`). + - Group tests using nested `test.describe` blocks with these 3 tags: + ```typescript + test.describe("Feature Name", () => { + test.describe("@smoke", () => {}); + + test.describe("@comprehensive", () => {}); + + test.describe("@slow", () => { + test.describe.configure({ timeout: 360000 }); + }); + }); + ``` + - `@smoke` tests: + - Critical tests run on deployment of any self-contained system. + - Should be very long test scenarios testing all happy paths and selected boundary cases in a few tailored tests. + + - `@comprehensive` tests: + - Thorough tests run when a specific self-contained system is deployed. + - Focused on testing a specific area covering all edge cases, e.g., responsive design, keyboard navigation, concurrency, error handling, and validation. + + - `@slow` tests: + - Optional and run only ad-hoc using `--include-slow` flag. + - Any tests that require waiting like `waitForTimeout` (e.g., for OTP timeouts) must be marked as `@slow`. + +4. Structure each test with clear *steps*, assertions, and proper monitoring: + - All tests must start with `const context = createTestContext(page);` and end with `assertNoUnexpectedErrors(context);` + - Create multiple *steps* that all include arrange, act, and assert steps. + - Use clear, concise *step* comments explaining what (arrange and act) *and* expected result (assert). + - Use semantic selectors: `page.getByRole("button", { name: "Submit" })`, `page.getByText("Welcome")`, `page.getByLabel("Email")` + - Assert side effects immediately after an action using `assertToastMessage`, `assertValidationError`, `assertNetworkErrors`. + - Avoid verbose explanatory comments *within* a step; if needed, add comments inline after statement. + +5. Write deterministic tests - This is critical for reliable testing: + - Each test should have a clear, linear flow of actions and assertions. + - Never use if statements, custom error handling, or try/catch blocks in tests. + - Tests should be independent and not rely on state from other tests. + +6. What to test: +- Enter invalid values, such as empty strings, only whitespace characters, long strings, negative numbers, Unicode, etc. + - Tooltips, keyboard navigation, accessibility, validation messages, translations, responsiveness, etc. + +## Examples + +```typescript +test.describe("@smoke", () => { + test("should complete full signup flow from homepage to admin dashboard", async ({ page }) => { + const context = createTestContext(page); // ✅ DO: Always start with this + + // Step 1: Navigate from homepage to signup page and verify + await page.goto("/"); + await page.getByRole("button", { name: "Signup" }).first().click(); + await expect(page).toHaveURL("/signup"); // ✅ DO: Wait for navigation before proceeding + + // Step 2: Enter credentials and verify validation + await page.getByLabel("Email").fill("test@example.com"); + await page.keyboard.press("Tab"); // Move to region selector // ✅ DO: Add comments inline when something is unclear + await page.getByRole("button", { name: "Continue" }).click(); + await assertToastMessage(context, "Success", "Check your email."); // ✅ DO: Wait for side effects before proceeding + + // Step 3: Enter verification code and verify successful login + await page.keyboard.type(getVerificationCode()); + await page.getByRole("button", { name: "Verify" }).click(); + await expect(page).toHaveURL("/admin"); // ✅ DO: Wait for navigation before final assertions + await expect(page.getByRole("heading", { name: "Welcome" })).toBeVisible(); // ✅ DO: Wait for content before final assertions + + // Step 4: Assert no unexpected errors occurred // ✅ DO: Always use this exact comment + assertNoUnexpectedErrors(context); + }); +}); +``` + +```typescript +test.describe("@security", () => { // ❌ DON'T: Don't invent new tags + test("should handle login", async ({ page }) => { + // ❌ DON'T: Skip createTestContext(page); step + + // Navigate to login page // ❌ DON'T: Don't add step comments without "Step #" prefix and expected result + if (currentUrl.includes("/login/verify")) { // ❌ DON'T: Add conditional logic in tests + // Continue with verification... // ❌ DON'T: Don't write verbose explanatory comments + } + }); + + expect(page.url().includes("/admin") || page.url().includes("/login")).toBeTruthy(); // ❌ DON'T: Use ambiguous assertions + + // ❌ DON'T: Use try/catch to handle flaky behavior + try { + await page.waitForLoadState("networkidle"); // ❌ DON'T: Don't add timeout logic in tests + await page.getByRole("button", { name: "Submit" }).click(); + } catch (error) { + await page.waitForTimeout(1000); // ❌ DON'T: Don't add timeout logic in tests + // Fallback logic - this masks real issues! + } +}); + +// Step 4: Verify no unexpected errors occurred // ❌ DON'T: Change the default closing comment +assertNoUnexpectedErrors(context); +``` diff --git a/.cursor/rules/workflows/create-e2e-tests.mdc b/.cursor/rules/workflows/create-e2e-tests.mdc new file mode 100644 index 000000000..04d7847bd --- /dev/null +++ b/.cursor/rules/workflows/create-e2e-tests.mdc @@ -0,0 +1,59 @@ +--- +description: Workflow for creating end-to-end tests +globs: +alwaysApply: false +--- +# E2E Testing Workflow + +This workflow guides you through the process of creating comprehensive end-to-end tests for specific features like login and signup. It focuses on identifying what tests to write, planning complex scenarios, and ensuring tests follow the established conventions. + +## Workflow + +1. Understand the feature under test: + - Study the frontend components and their interactions. + - Review API endpoints and authentication flows. + - Understand validation rules and error handling. + - Identify key user interactions and expected behaviors. + +2. Use Browser MCP to explore the webapp functionality: + - Navigate to the application: `mcp0_browser_navigate({ url: "https://localhost:9000" })`. + - Interact with the feature manually to understand user flows. + - Take snapshots to identify UI elements and their structure. + - Document key interactions and expected behaviors. + - Note any edge cases or potential issues discovered during exploration. + +3. Review existing test examples: + - Read [End-to-End Tests](/.cursor/rules/end-to-end-tests/tests/e2e.mdc) for detailed information. + - Examine [signup.spec.ts](/application/End2EndTests/tests/account-management/signup.spec.ts) and [login.spec.ts](/application/End2EndTests/tests/account-management/login.spec.ts) for inspiration. + - Note the structure, assertions, and test organization. + +4. Plan comprehensive test scenarios: + - Identify standard user journeys through the feature. + - Plan for complex multi-session scenarios like: + - Concurrent sessions: What happens when a user has two tabs open? + - Cross-session state changes: What happens when state changes in one session affect another? + - Authentication conflicts: How does the system handle authentication changes across sessions? + - Form submissions across sessions: What happens with concurrent form submissions? + - Antiforgery token handling: How are antiforgery tokens managed across tabs? + - Browser navigation: Back/forward buttons, refresh, direct URL access. + - Network conditions: Slow connections, disconnections during operations. + - Input validation: Boundary values, special characters, extremely long inputs. + - Accessibility: Keyboard navigation, screen reader compatibility. + - Localization: Testing with different languages and formats. + +5. Categorize tests appropriately: + - `@smoke`: Essential functionality that will run on deployment of any system. + - `@comprehensive`: More thorough tests covering edge cases that will run on deployment of the system under test. + - `@slow`: Tests involving timeouts or waiting periods that will run ad-hoc, when features under test are changed. + +6. Create or update test structure: + - For new features, create a new test file at `application/End2EndTests/tests/[scs-name]/[feature].spec.ts`. + - For existing features, review and update tests to follow current conventions. + - For refactored features, update selectors and assertions to match new implementation. + +## Key principles + +- Comprehensive coverage: Test all critical paths and important edge cases. +- Follow conventions: Adhere to the established patterns in [End-to-End Tests](/.cursor/rules/end-to-end-tests/tests/e2e.mdc). +- Clear organization: Properly categorize tests and use descriptive names. +- Realistic user journeys: Test scenarios that reflect actual user behavior. diff --git a/.vscode/launch.json b/.vscode/launch.json index c824eccf5..8893407e9 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -7,7 +7,7 @@ "request": "launch", "program": "${workspaceFolder}/application/node_modules/@playwright/test/cli.js", "args": ["test"], - "cwd": "${workspaceFolder}/application/End2EndTests", + "cwd": "${workspaceFolder}/application/account-management/WebApp/tests", "env": { "PUBLIC_URL": "https://localhost:9000" }, @@ -20,7 +20,7 @@ "request": "launch", "program": "${workspaceFolder}/application/node_modules/@playwright/test/cli.js", "args": ["test", "--grep", "@smoke"], - "cwd": "${workspaceFolder}/application/End2EndTests", + "cwd": "${workspaceFolder}/application/account-management/WebApp/tests", "env": { "PUBLIC_URL": "https://localhost:9000" }, @@ -33,7 +33,7 @@ "request": "launch", "program": "${workspaceFolder}/application/node_modules/@playwright/test/cli.js", "args": ["test", "${relativeFile}", "--headed", "--project=chromium", "--timeout=0"], - "cwd": "${workspaceFolder}/application/End2EndTests", + "cwd": "${workspaceFolder}/application/account-management/WebApp/tests", "env": { "PUBLIC_URL": "https://localhost:9000", "PWDEBUG": "0" @@ -53,7 +53,7 @@ "request": "launch", "program": "${workspaceFolder}/application/node_modules/@playwright/test/cli.js", "args": ["test", "${relativeFile}", "--debug", "--project=chromium"], - "cwd": "${workspaceFolder}/application/End2EndTests", + "cwd": "${workspaceFolder}/application/account-management/WebApp/tests", "env": { "PUBLIC_URL": "https://localhost:9000" }, diff --git a/.windsurf/rules/end-to-end-tests/e2e-tests.md b/.windsurf/rules/end-to-end-tests/e2e-tests.md new file mode 100644 index 000000000..caa33e935 --- /dev/null +++ b/.windsurf/rules/end-to-end-tests/e2e-tests.md @@ -0,0 +1,122 @@ +--- +trigger: glob +globs: */tests/e2e/** +description: Rules for end-to-end tests +--- + +# End-to-End Tests + +These rules outline the structure, patterns, and best practices for writing end-to-end tests. + +## Implementation + +1. Use `[CLI_ALIAS] e2e` with these option categories to optimize test execution: + - Test filtering: `--smoke`, `--include-slow`, `--grep`, `--browser` + - Change scoping: `--last-failed`, `--only-changed` + - Flaky test detection: `--repeat-each`, `--retries`, `--stop-on-first-failure` + +2. Test-Driven Debugging Process: + - Focus on one failing test at a time and make it pass before moving to the next. + - Ensure tests use Playwright's built-in auto-waiting assertions: `toHaveURL()`, `toBeVisible()`, `toBeEnabled()`, `toHaveValue()`, `toContainText()`. + - Consider if root causes can be fixed in the application code, and fix application bugs rather than masking them with test workarounds. + - Use Browser MCP to manually test the feature and verify it works correctly outside of automated tests. + +3. Organize tests in a consistent file structure: + - One file per feature (e.g., `signup.spec.ts`). + - Group tests using nested `test.describe` blocks with these 3 tags: + ```typescript + test.describe("Feature Name", () => { + test.describe("@smoke", () => {}); + + test.describe("@comprehensive", () => {}); + + test.describe("@slow", () => { + test.describe.configure({ timeout: 360000 }); + }); + }); + ``` + - `@smoke` tests: + - Critical tests run on deployment of any self-contained system. + - Should be very long test scenarios testing all happy paths and selected boundary cases in a few tailored tests. + + - `@comprehensive` tests: + - Thorough tests run when a specific self-contained system is deployed. + - Focused on testing a specific area covering all edge cases, e.g., responsive design, keyboard navigation, concurrency, error handling, and validation. + + - `@slow` tests: + - Optional and run only ad-hoc using `--include-slow` flag. + - Any tests that require waiting like `waitForTimeout` (e.g., for OTP timeouts) must be marked as `@slow`. + +4. Structure each test with clear *steps*, assertions, and proper monitoring: + - All tests must start with `const context = createTestContext(page);` and end with `assertNoUnexpectedErrors(context);` + - Create multiple *steps* that all include arrange, act, and assert steps. + - Use clear, concise *step* comments explaining what (arrange and act) *and* expected result (assert). + - Use semantic selectors: `page.getByRole("button", { name: "Submit" })`, `page.getByText("Welcome")`, `page.getByLabel("Email")` + - Assert side effects immediately after an action using `assertToastMessage`, `assertValidationError`, `assertNetworkErrors`. + - Avoid verbose explanatory comments *within* a step; if needed, add comments inline after statement. + +5. Write deterministic tests - This is critical for reliable testing: + - Each test should have a clear, linear flow of actions and assertions. + - Never use if statements, custom error handling, or try/catch blocks in tests. + - Tests should be independent and not rely on state from other tests. + +6. What to test: +- Enter invalid values, such as empty strings, only whitespace characters, long strings, negative numbers, Unicode, etc. + - Tooltips, keyboard navigation, accessibility, validation messages, translations, responsiveness, etc. + +## Examples + +```typescript +test.describe("@smoke", () => { + test("should complete full signup flow from homepage to admin dashboard", async ({ page }) => { + const context = createTestContext(page); // ✅ DO: Always start with this + + // Step 1: Navigate from homepage to signup page and verify + await page.goto("/"); + await page.getByRole("button", { name: "Signup" }).first().click(); + await expect(page).toHaveURL("/signup"); // ✅ DO: Wait for navigation before proceeding + + // Step 2: Enter credentials and verify validation + await page.getByLabel("Email").fill("test@example.com"); + await page.keyboard.press("Tab"); // Move to region selector // ✅ DO: Add comments inline when something is unclear + await page.getByRole("button", { name: "Continue" }).click(); + await assertToastMessage(context, "Success", "Check your email."); // ✅ DO: Wait for side effects before proceeding + + // Step 3: Enter verification code and verify successful login + await page.keyboard.type(getVerificationCode()); + await page.getByRole("button", { name: "Verify" }).click(); + await expect(page).toHaveURL("/admin"); // ✅ DO: Wait for navigation before final assertions + await expect(page.getByRole("heading", { name: "Welcome" })).toBeVisible(); // ✅ DO: Wait for content before final assertions + + // Step 4: Assert no unexpected errors occurred // ✅ DO: Always use this exact comment + assertNoUnexpectedErrors(context); + }); +}); +``` + +```typescript +test.describe("@security", () => { // ❌ DON'T: Don't invent new tags + test("should handle login", async ({ page }) => { + // ❌ DON'T: Skip createTestContext(page); step + + // Navigate to login page // ❌ DON'T: Don't add step comments without "Step #" prefix and expected result + if (currentUrl.includes("/login/verify")) { // ❌ DON'T: Add conditional logic in tests + // Continue with verification... // ❌ DON'T: Don't write verbose explanatory comments + } + }); + + expect(page.url().includes("/admin") || page.url().includes("/login")).toBeTruthy(); // ❌ DON'T: Use ambiguous assertions + + // ❌ DON'T: Use try/catch to handle flaky behavior + try { + await page.waitForLoadState("networkidle"); // ❌ DON'T: Don't add timeout logic in tests + await page.getByRole("button", { name: "Submit" }).click(); + } catch (error) { + await page.waitForTimeout(1000); // ❌ DON'T: Don't add timeout logic in tests + // Fallback logic - this masks real issues! + } +}); + +// Step 4: Verify no unexpected errors occurred // ❌ DON'T: Change the default closing comment +assertNoUnexpectedErrors(context); +``` diff --git a/.windsurf/workflows/create-e2e-tests.md b/.windsurf/workflows/create-e2e-tests.md new file mode 100644 index 000000000..4a6387168 --- /dev/null +++ b/.windsurf/workflows/create-e2e-tests.md @@ -0,0 +1,58 @@ +--- +description: Workflow for creating end-to-end tests +--- + +# E2E Testing Workflow + +This workflow guides you through the process of creating comprehensive end-to-end tests for specific features like login and signup. It focuses on identifying what tests to write, planning complex scenarios, and ensuring tests follow the established conventions. + +## Workflow + +1. Understand the feature under test: + - Study the frontend components and their interactions. + - Review API endpoints and authentication flows. + - Understand validation rules and error handling. + - Identify key user interactions and expected behaviors. + +2. Use Browser MCP to explore the webapp functionality: + - Navigate to the application: `mcp0_browser_navigate({ url: "https://localhost:9000" })`. + - Interact with the feature manually to understand user flows. + - Take snapshots to identify UI elements and their structure. + - Document key interactions and expected behaviors. + - Note any edge cases or potential issues discovered during exploration. + +3. Review existing test examples: + - Read [End-to-End Tests](/.windsurf/rules/end-to-end-tests/tests/e2e.md) for detailed information. + - Examine [signup.spec.ts](/application/End2EndTests/tests/account-management/signup.spec.ts) and [login.spec.ts](/application/End2EndTests/tests/account-management/login.spec.ts) for inspiration. + - Note the structure, assertions, and test organization. + +4. Plan comprehensive test scenarios: + - Identify standard user journeys through the feature. + - Plan for complex multi-session scenarios like: + - Concurrent sessions: What happens when a user has two tabs open? + - Cross-session state changes: What happens when state changes in one session affect another? + - Authentication conflicts: How does the system handle authentication changes across sessions? + - Form submissions across sessions: What happens with concurrent form submissions? + - Antiforgery token handling: How are antiforgery tokens managed across tabs? + - Browser navigation: Back/forward buttons, refresh, direct URL access. + - Network conditions: Slow connections, disconnections during operations. + - Input validation: Boundary values, special characters, extremely long inputs. + - Accessibility: Keyboard navigation, screen reader compatibility. + - Localization: Testing with different languages and formats. + +5. Categorize tests appropriately: + - `@smoke`: Essential functionality that will run on deployment of any system. + - `@comprehensive`: More thorough tests covering edge cases that will run on deployment of the system under test. + - `@slow`: Tests involving timeouts or waiting periods that will run ad-hoc, when features under test are changed. + +6. Create or update test structure: + - For new features, create a new test file at `application/End2EndTests/tests/[scs-name]/[feature].spec.ts`. + - For existing features, review and update tests to follow current conventions. + - For refactored features, update selectors and assertions to match new implementation. + +## Key principles + +- Comprehensive coverage: Test all critical paths and important edge cases. +- Follow conventions: Adhere to the established patterns in [End-to-End Tests](/.windsurf/rules/end-to-end-tests/tests/e2e.md). +- Clear organization: Properly categorize tests and use descriptive names. +- Realistic user journeys: Test scenarios that reflect actual user behavior. diff --git a/application/End2EndTests/playwright.config.ts b/application/End2EndTests/playwright.config.ts index baedb741e..10d70a11b 100644 --- a/application/End2EndTests/playwright.config.ts +++ b/application/End2EndTests/playwright.config.ts @@ -1,6 +1,6 @@ /// import { defineConfig, devices } from "@playwright/test"; -import { getBaseUrl } from "./shared/constants"; +import { getBaseUrl } from "../shared-webapp/tests/e2e/utils/constants"; /** * See https://playwright.dev/docs/test-configuration. diff --git a/application/End2EndTests/tests/account-management/login.spec.ts b/application/End2EndTests/tests/account-management/login.spec.ts new file mode 100644 index 000000000..514aff2a9 --- /dev/null +++ b/application/End2EndTests/tests/account-management/login.spec.ts @@ -0,0 +1,671 @@ +import { expect, test } from "@playwright/test"; +import { + assertNetworkErrors, + assertNoUnexpectedErrors, + assertToastMessage, + assertValidationError, + createTestContext +} from "../../../shared-webapp/tests/e2e/utils/test-assertions"; +import { getVerificationCode, testUser } from "../../../shared-webapp/tests/e2e/utils/test-data"; + +test.describe("Login", () => { + test.describe("@smoke", () => { + test("should complete successful login flow from homepage to admin dashboard", async ({ page }) => { + const context = createTestContext(page); + const user = testUser(); + + // Step 1: Create a user account first through signup flow + await page.goto("/"); + await page.getByRole("button", { name: "Get started today" }).first().click(); + await expect(page).toHaveURL("/signup"); + await page.getByRole("textbox", { name: "Email" }).fill(user.email); + await page.getByRole("button", { name: "Create your account" }).click(); + await expect(page).toHaveURL("/signup/verify"); + await page.keyboard.type(getVerificationCode()); + await page.getByRole("button", { name: "Verify" }).click(); + await expect(page).toHaveURL("/admin"); + await page.getByRole("textbox", { name: "First name" }).fill(user.firstName); + await page.getByRole("textbox", { name: "Last name" }).fill(user.lastName); + await page.getByRole("button", { name: "Save changes" }).click(); + await expect(page.getByRole("heading", { name: "Welcome home" })).toBeVisible(); + + // Step 2: Logout from the account to test login flow + await page.getByRole("button", { name: "User profile menu" }).click(); + await page.getByRole("menuitem", { name: "Log out" }).click(); + await expect(page).toHaveURL("/login?returnPath=%2Fadmin"); + + // Step 3: Verify login page content (already on login page after logout) + await expect(page.getByRole("heading", { name: "Hi! Welcome back" })).toBeVisible(); + + // Step 4: Complete login email form and verify navigation + await page.getByRole("textbox", { name: "Email" }).fill(user.email); + await page.getByRole("button", { name: "Continue" }).click(); + await expect(page).toHaveURL("/login/verify?returnPath=%2Fadmin"); + await expect(page.getByRole("heading", { name: "Enter your verification code" })).toBeVisible(); + await expect( + page.getByText(`Please check your email for a verification code sent to ${user.email}`) + ).toBeVisible(); + + // Step 5: Complete verification process and verify navigation to admin dashboard + await page.keyboard.type(getVerificationCode()); + await page.getByRole("button", { name: "Verify" }).click(); + await expect(page).toHaveURL("/admin"); + await expect(page.getByRole("heading", { name: "Welcome home" })).toBeVisible(); + + // Step 6: Verify user is properly authenticated and can access admin features + await expect(page.getByRole("heading", { name: "Welcome home" })).toBeVisible(); + await page.getByRole("button", { name: "Users" }).click(); + await expect(page.getByRole("heading", { name: "Users" })).toBeVisible(); + + await expect(page.getByText(`${user.firstName} ${user.lastName}`)).toBeVisible(); + await expect(page.getByText(user.email)).toBeVisible(); + + // Step 7: Assert no unexpected errors occurred + assertNoUnexpectedErrors(context); + }); + + test("should complete login with existing user account", async ({ page }) => { + const context = createTestContext(page); + const user = testUser(); + + // Step 1: Create a user account first through signup flow + await page.goto("/"); + await page.getByRole("button", { name: "Get started today" }).first().click(); + await page.getByRole("textbox", { name: "Email" }).fill(user.email); + await page.getByRole("button", { name: "Create your account" }).click(); + await expect(page).toHaveURL("/signup/verify"); + await page.keyboard.type(getVerificationCode()); + await page.getByRole("button", { name: "Verify" }).click(); + await page.getByRole("textbox", { name: "First name" }).fill(user.firstName); + await page.getByRole("textbox", { name: "Last name" }).fill(user.lastName); + await page.getByRole("button", { name: "Save changes" }).click(); + await expect(page.getByRole("heading", { name: "Welcome home" })).toBeVisible(); + + // Step 2: Logout to test login with existing account + await page.getByRole("button", { name: "User profile menu" }).click(); + await page.getByRole("menuitem", { name: "Log out" }).click(); + await expect(page).toHaveURL("/login?returnPath=%2Fadmin"); + + // Step 3: Navigate directly to login page and verify (clear return path) + await page.goto("/login"); + await expect(page.getByRole("heading", { name: "Hi! Welcome back" })).toBeVisible(); + + // Step 4: Complete login flow and verify successful authentication + await page.getByRole("textbox", { name: "Email" }).fill(user.email); + await page.getByRole("button", { name: "Continue" }).click(); + await expect(page).toHaveURL("/login/verify"); + await page.keyboard.type(getVerificationCode()); + await page.getByRole("button", { name: "Verify" }).click(); + await expect(page).toHaveURL("/admin"); + await expect(page.getByRole("heading", { name: "Welcome home" })).toBeVisible(); + + // Step 5: Assert no unexpected errors occurred + assertNoUnexpectedErrors(context); + }); + + test("should handle logout functionality and session termination", async ({ page }) => { + const context = createTestContext(page); + const user = testUser(); + + // Step 1: Create and login with user account + await page.goto("/"); + await page.getByRole("button", { name: "Get started today" }).first().click(); + await page.getByRole("textbox", { name: "Email" }).fill(user.email); + await page.getByRole("button", { name: "Create your account" }).click(); + await expect(page).toHaveURL("/signup/verify"); + await page.keyboard.type(getVerificationCode()); + await page.getByRole("button", { name: "Verify" }).click(); + await page.getByRole("textbox", { name: "First name" }).fill(user.firstName); + await page.getByRole("textbox", { name: "Last name" }).fill(user.lastName); + await page.getByRole("button", { name: "Save changes" }).click(); + await expect(page.getByRole("heading", { name: "Welcome home" })).toBeVisible(); + + // Step 2: Verify user is authenticated and can access admin features + await page.getByRole("button", { name: "Users" }).click(); + await expect(page.getByRole("heading", { name: "Users" })).toBeVisible(); + + // Step 3: Perform logout through avatar menu and verify session termination + await page.getByRole("button", { name: "User profile menu" }).click(); + await page.getByRole("menuitem", { name: "Log out" }).click(); + await expect(page).toHaveURL("/login?returnPath=%2Fadmin%2Fusers"); + + // Step 4: Verify user is logged out and cannot access protected routes + await page.goto("/admin"); + await expect(page).toHaveURL("/login?returnPath=%2Fadmin"); + await assertNetworkErrors(context, [401]); + + // Step 5: Assert no unexpected errors occurred + assertNoUnexpectedErrors(context); + }); + + test("should maintain authentication state persistence across page reloads", async ({ page }) => { + const context = createTestContext(page); + const user = testUser(); + + // Step 1: Create and login with user account + await page.goto("/"); + await page.getByRole("button", { name: "Get started today" }).first().click(); + await page.getByRole("textbox", { name: "Email" }).fill(user.email); + await page.getByRole("button", { name: "Create your account" }).click(); + await expect(page).toHaveURL("/signup/verify"); + await page.keyboard.type(getVerificationCode()); + await page.getByRole("button", { name: "Verify" }).click(); + await page.getByRole("textbox", { name: "First name" }).fill(user.firstName); + await page.getByRole("textbox", { name: "Last name" }).fill(user.lastName); + await page.getByRole("button", { name: "Save changes" }).click(); + await expect(page.getByRole("heading", { name: "Welcome home" })).toBeVisible(); + + // Step 2: Navigate to a protected page and verify access + await page.getByRole("button", { name: "Users" }).click(); + await expect(page.getByRole("heading", { name: "Users" })).toBeVisible(); + + // Step 3: Reload the page and verify authentication is maintained + await page.reload(); + await expect(page.getByRole("heading", { name: "Users" })).toBeVisible(); + await expect(page.getByText(`${user.firstName} ${user.lastName}`)).toBeVisible(); + + // Step 4: Navigate to different admin pages and verify access is maintained + await page.goto("/admin"); + await expect(page.getByRole("heading", { name: "Welcome home" })).toBeVisible(); + + // Step 5: Assert no unexpected errors occurred + assertNoUnexpectedErrors(context); + }); + + test("should redirect to login page when accessing protected routes while unauthenticated", async ({ page }) => { + const context = createTestContext(page); + + // Step 1: Attempt to access admin dashboard while unauthenticated + await page.goto("/admin"); + await expect(page).toHaveURL("/login?returnPath=%2Fadmin"); + await expect(page.getByRole("heading", { name: "Hi! Welcome back" })).toBeVisible(); + await assertNetworkErrors(context, [401]); + + // Step 2: Attempt to access users page while unauthenticated + await page.goto("/admin/users"); + await expect(page).toHaveURL("/login?returnPath=%2Fadmin%2Fusers"); + await expect(page.getByRole("heading", { name: "Hi! Welcome back" })).toBeVisible(); + await assertNetworkErrors(context, [401]); + + // Step 3: Verify login page shows return path in URL parameters + const currentUrl = new URL(page.url()); + expect(currentUrl.searchParams.get("returnPath")).toBe("/admin/users"); + + // Step 4: Assert no unexpected errors occurred + assertNoUnexpectedErrors(context); + }); + }); + + test.describe("@comprehensive", () => { + test("should validate email format and show server validation error message", async ({ page }) => { + const context = createTestContext(page); + + // Step 1: Navigate to login page and verify content + await page.goto("/login"); + await expect(page.getByRole("heading", { name: "Hi! Welcome back" })).toBeVisible(); + + // Step 2: Submit invalid email format and verify validation error + await page.getByRole("textbox", { name: "Email" }).fill("invalid-email"); + await page.getByRole("button", { name: "Continue" }).click(); + await expect(page).toHaveURL("/login"); + await assertValidationError(context, "Email must be in a valid format and no longer than 100 characters."); + + // Step 3: Assert no unexpected errors occurred + assertNoUnexpectedErrors(context); + }); + + test("should validate email length and show server validation error message", async ({ page }) => { + const context = createTestContext(page); + + // Step 1: Navigate to login page and verify content + await page.goto("/login"); + await expect(page.getByRole("heading", { name: "Hi! Welcome back" })).toBeVisible(); + + // Step 2: Submit email exceeding maximum length and verify validation error + const longEmail = `${"a".repeat(90)}@example.com`; // 101 characters total + await page.getByRole("textbox", { name: "Email" }).fill(longEmail); + await page.getByRole("button", { name: "Continue" }).click(); + await expect(page).toHaveURL("/login"); + await assertValidationError(context, "Email must be in a valid format and no longer than 100 characters."); + + // Step 3: Assert no unexpected errors occurred + assertNoUnexpectedErrors(context); + }); + + test("should handle login with non-existent email address", async ({ page }) => { + const context = createTestContext(page); + const nonExistentEmail = `nonexistent.user.${Date.now()}@platformplatform.net`; + + // Step 1: Navigate to login page and verify content + await page.goto("/login"); + await expect(page.getByRole("heading", { name: "Hi! Welcome back" })).toBeVisible(); + + // Step 2: Submit non-existent email and verify it appears to proceed (security measure) + await page.getByRole("textbox", { name: "Email" }).fill(nonExistentEmail); + await page.getByRole("button", { name: "Continue" }).click(); + await expect(page).toHaveURL("/login/verify"); + await expect(page.getByRole("heading", { name: "Enter your verification code" })).toBeVisible(); + await expect( + page.getByText(`Please check your email for a verification code sent to ${nonExistentEmail}`) + ).toBeVisible(); + + // Step 3: Try to verify with any code and verify it fails without revealing whether the email exists + await page.keyboard.type(getVerificationCode()); + await page.getByRole("button", { name: "Verify" }).click(); + await assertToastMessage(context, 400, "The code is wrong or no longer valid."); + await expect(page).toHaveURL("/login/verify"); + + // Step 4: Assert no unexpected errors occurred + assertNoUnexpectedErrors(context); + }); + + test("should handle login with wrong verification code", async ({ page }) => { + const context = createTestContext(page); + const user = testUser(); + + // Step 1: Create a user account first through signup flow + await page.goto("/"); + await page.getByRole("button", { name: "Get started today" }).first().click(); + await page.getByRole("textbox", { name: "Email" }).fill(user.email); + await page.getByRole("button", { name: "Create your account" }).click(); + await expect(page).toHaveURL("/signup/verify"); + await page.keyboard.type(getVerificationCode()); + await page.getByRole("button", { name: "Verify" }).click(); + await page.getByRole("textbox", { name: "First name" }).fill(user.firstName); + await page.getByRole("textbox", { name: "Last name" }).fill(user.lastName); + await page.getByRole("button", { name: "Save changes" }).click(); + await expect(page.getByRole("heading", { name: "Welcome home" })).toBeVisible(); + + // Step 2: Logout to test login flow + await page.getByRole("button", { name: "User profile menu" }).click(); + await page.getByRole("menuitem", { name: "Log out" }).click(); + await expect(page).toHaveURL("/login?returnPath=%2Fadmin"); + + // Step 3: Navigate to login page and submit email + await page.goto("/login"); + await page.getByRole("textbox", { name: "Email" }).fill(user.email); + await page.getByRole("button", { name: "Continue" }).click(); + await expect(page).toHaveURL("/login/verify"); + + // Step 4: Submit wrong verification code and verify error handling + await page.keyboard.type("WRONG1"); + await page.getByRole("button", { name: "Verify" }).click(); + await expect(page).toHaveURL("/login/verify"); + await assertToastMessage(context, 400, "The code is wrong or no longer valid."); + + // Step 5: Assert no unexpected errors occurred + assertNoUnexpectedErrors(context); + }); + + test("should handle verification code resend functionality during login", async ({ page }) => { + const context = createTestContext(page); + const user = testUser(); + + // Step 1: Create a user account first through signup flow + await page.goto("/"); + await page.getByRole("button", { name: "Get started today" }).first().click(); + await page.getByRole("textbox", { name: "Email" }).fill(user.email); + await page.getByRole("button", { name: "Create your account" }).click(); + await expect(page).toHaveURL("/signup/verify"); + await page.keyboard.type(getVerificationCode()); + await page.getByRole("button", { name: "Verify" }).click(); + await page.getByRole("textbox", { name: "First name" }).fill(user.firstName); + await page.getByRole("textbox", { name: "Last name" }).fill(user.lastName); + await page.getByRole("button", { name: "Save changes" }).click(); + await expect(page.getByRole("heading", { name: "Welcome home" })).toBeVisible(); + + // Step 2: Logout to test login flow + await page.getByRole("button", { name: "User profile menu" }).click(); + await page.getByRole("menuitem", { name: "Log out" }).click(); + await expect(page).toHaveURL("/login?returnPath=%2Fadmin"); + + // Step 3: Navigate to login page and submit email to reach verification page + await page.goto("/login"); + await page.getByRole("textbox", { name: "Email" }).fill(user.email); + await page.getByRole("button", { name: "Continue" }).click(); + await expect(page).toHaveURL("/login/verify"); + + // Step 4: Click resend button and verify no errors occur + await page.getByRole("button", { name: "Didn't receive the code? Resend" }).click(); + // Note: This should work similarly to signup resend functionality + + // Step 5: Verify the resend functionality works and we're still on verification page + await expect(page).toHaveURL("/login/verify"); + await expect(page.getByRole("heading", { name: "Enter your verification code" })).toBeVisible(); + + // Step 6: Assert no unexpected errors occurred + assertNoUnexpectedErrors(context); + }); + + test("should handle login form validation and error messages", async ({ page }) => { + const context = createTestContext(page); + const user = testUser(); + + // Step 1: Navigate to login page and verify content + await page.goto("/login"); + await expect(page.getByRole("heading", { name: "Hi! Welcome back" })).toBeVisible(); + + // Step 2: Submit empty form and verify validation error + await page.getByRole("button", { name: "Continue" }).click(); + await expect(page).toHaveURL("/login"); + await assertValidationError(context, "'Email' must not be empty."); + + // Step 3: Fill invalid email and verify validation error + await page.getByRole("textbox", { name: "Email" }).fill("not-an-email"); + await page.getByRole("button", { name: "Continue" }).click(); + await expect(page).toHaveURL("/login"); + await assertValidationError(context, "Email must be in a valid format and no longer than 100 characters."); + + // Step 4: Create a test user first to ensure the next step works + await page.goto("/"); + await page.getByRole("button", { name: "Get started today" }).first().click(); + await page.getByRole("textbox", { name: "Email" }).fill(user.email); + await page.getByRole("button", { name: "Create your account" }).click(); + await expect(page).toHaveURL("/signup/verify"); + await page.keyboard.type(getVerificationCode()); + await page.getByRole("button", { name: "Verify" }).click(); + await page.getByRole("textbox", { name: "First name" }).fill(user.firstName); + await page.getByRole("textbox", { name: "Last name" }).fill(user.lastName); + await page.getByRole("button", { name: "Save changes" }).click(); + await expect(page.getByRole("heading", { name: "Welcome home" })).toBeVisible(); + + // Step 5: Logout and return to login page + await page.getByRole("button", { name: "User profile menu" }).click(); + await page.getByRole("menuitem", { name: "Log out" }).click(); + await expect(page).toHaveURL("/login?returnPath=%2Fadmin"); + + // Step 6: Verify form is still functional after validation errors + await page.getByRole("textbox", { name: "Email" }).fill(user.email); + await page.getByRole("button", { name: "Continue" }).click(); + await expect(page).toHaveURL("/login/verify?returnPath=%2Fadmin"); + await expect( + page.getByText(`Please check your email for a verification code sent to ${user.email}`) + ).toBeVisible(); + + // Step 7: Assert no unexpected errors occurred + assertNoUnexpectedErrors(context); + }); + + test("should work correctly across different viewport sizes", async ({ page }) => { + const context = createTestContext(page); + const user = testUser(); + + // Step 1: Create a user account first + await page.goto("/"); + await page.getByRole("button", { name: "Get started today" }).first().click(); + await page.getByRole("textbox", { name: "Email" }).fill(user.email); + await page.getByRole("button", { name: "Create your account" }).click(); + await expect(page).toHaveURL("/signup/verify"); + await page.keyboard.type(getVerificationCode()); + await page.getByRole("button", { name: "Verify" }).click(); + await page.getByRole("textbox", { name: "First name" }).fill(user.firstName); + await page.getByRole("textbox", { name: "Last name" }).fill(user.lastName); + await page.getByRole("button", { name: "Save changes" }).click(); + await expect(page.getByRole("heading", { name: "Welcome home" })).toBeVisible(); + + // Step 2: Logout and test mobile viewport (375x667) + await page.getByRole("button", { name: "User profile menu" }).click(); + await page.getByRole("menuitem", { name: "Log out" }).click(); + await page.setViewportSize({ width: 375, height: 667 }); + await expect(page).toHaveURL("/login?returnPath=%2Fadmin"); + await expect(page.getByRole("heading", { name: "Hi! Welcome back" })).toBeVisible(); + + // Step 3: Complete login on mobile viewport + await page.getByRole("textbox", { name: "Email" }).fill(user.email); + await page.getByRole("button", { name: "Continue" }).click(); + await expect(page).toHaveURL("/login/verify?returnPath=%2Fadmin"); + + // Step 4: Test tablet viewport (768x1024) and verify content + await page.setViewportSize({ width: 768, height: 1024 }); + await expect(page.getByRole("heading", { name: "Enter your verification code" })).toBeVisible(); + + // Step 5: Complete verification on tablet viewport + await page.keyboard.type(getVerificationCode()); + await page.getByRole("button", { name: "Verify" }).click(); + await expect(page).toHaveURL("/admin"); + + // Step 6: Test desktop viewport (1920x1080) and verify content + await page.setViewportSize({ width: 1920, height: 1080 }); + await expect(page.getByRole("heading", { name: "Welcome home" })).toBeVisible(); + + // Step 7: Assert no unexpected errors occurred + assertNoUnexpectedErrors(context); + }); + + test("should provide keyboard navigation support with proper focus management", async ({ page }) => { + const context = createTestContext(page); + const user = testUser(); + + // Step 1: Create a user account first + await page.goto("/"); + await page.getByRole("button", { name: "Get started today" }).first().click(); + await page.getByRole("textbox", { name: "Email" }).fill(user.email); + await page.getByRole("button", { name: "Create your account" }).click(); + await expect(page).toHaveURL("/signup/verify"); + await page.keyboard.type(getVerificationCode()); + await page.getByRole("button", { name: "Verify" }).click(); + await page.getByRole("textbox", { name: "First name" }).fill(user.firstName); + await page.getByRole("textbox", { name: "Last name" }).fill(user.lastName); + await page.getByRole("button", { name: "Save changes" }).click(); + await expect(page.getByRole("heading", { name: "Welcome home" })).toBeVisible(); + + // Step 2: Logout and navigate to login page + await page.getByRole("button", { name: "User profile menu" }).click(); + await page.getByRole("menuitem", { name: "Log out" }).click(); + await expect(page).toHaveURL("/login?returnPath=%2Fadmin"); + + // Step 3: Complete login form using keyboard navigation + await expect(page.getByRole("textbox", { name: "Email" })).toBeFocused(); + await page.keyboard.type(user.email); + await page.keyboard.press("Enter"); // Submit form using Enter on input field + await expect(page).toHaveURL("/login/verify?returnPath=%2Fadmin"); + + // Step 4: Verify accessibility attributes on verification page + const codeInput = page.getByLabel("Login verification code").locator("input").first(); + await expect(codeInput).toHaveAttribute("type", "text"); + + // Step 5: Complete verification using keyboard + await codeInput.focus(); + await page.keyboard.type(getVerificationCode()); + await page.getByRole("button", { name: "Verify" }).click(); + await expect(page).toHaveURL("/admin"); + + // Step 6: Assert no unexpected errors occurred + assertNoUnexpectedErrors(context); + }); + + test("should handle rate limiting for failed login attempts", async ({ page }) => { + const context = createTestContext(page); + const user = testUser(); + + // Step 1: Create a user account first through signup flow + await page.goto("/"); + await page.getByRole("button", { name: "Get started today" }).first().click(); + await page.getByRole("textbox", { name: "Email" }).fill(user.email); + await page.getByRole("button", { name: "Create your account" }).click(); + await expect(page).toHaveURL("/signup/verify"); + await page.keyboard.type(getVerificationCode()); + await page.getByRole("button", { name: "Verify" }).click(); + await page.getByRole("textbox", { name: "First name" }).fill(user.firstName); + await page.getByRole("textbox", { name: "Last name" }).fill(user.lastName); + await page.getByRole("button", { name: "Save changes" }).click(); + await expect(page.getByRole("heading", { name: "Welcome home" })).toBeVisible(); + + // Step 2: Logout to test login flow + await page.getByRole("button", { name: "User profile menu" }).click(); + await page.getByRole("menuitem", { name: "Log out" }).click(); + await expect(page).toHaveURL("/login?returnPath=%2Fadmin"); + + // Step 3: Navigate to login page and submit email + await page.goto("/login"); + await page.getByRole("textbox", { name: "Email" }).fill(user.email); + await page.getByRole("button", { name: "Continue" }).click(); + await expect(page).toHaveURL("/login/verify"); + + // Step 4: Make three failed attempts quickly to trigger rate limiting + await page.keyboard.type("WRONG1"); + await page.getByRole("button", { name: "Verify" }).click(); + await assertToastMessage(context, 400, "The code is wrong or no longer valid."); + await page.keyboard.press("Control+A"); + + await page.keyboard.type("WRONG2"); + await page.getByRole("button", { name: "Verify" }).click(); + await assertToastMessage(context, 400, "The code is wrong or no longer valid."); + await page.keyboard.press("Control+A"); + + await page.keyboard.type("WRONG3"); + await page.getByRole("button", { name: "Verify" }).click(); + await assertToastMessage(context, 400, "The code is wrong or no longer valid."); + await page.keyboard.press("Control+A"); + + // Step 5: Submit fourth attempt and verify it's blocked with rate limiting message + await page.keyboard.type("WRONG4"); + await page.getByRole("button", { name: "Verify" }).click(); + await expect(page.getByText("Too many attempts, please request a new code.").first()).toBeVisible(); + await assertToastMessage(context, "Forbidden", "Too many attempts, please request a new code."); + + // Step 6: Assert no unexpected errors occurred + assertNoUnexpectedErrors(context); + }); + }); + + test.describe("@slow", () => { + test.describe.configure({ timeout: 360000 }); // 6 minutes timeout + + test("should handle verification code expiration during login (5-minute timeout)", async ({ page }) => { + // NOTE: This test currently expects React errors in the console due to a bug in the application. + // The /login/expired page tries to call getLoginState() which throws "No active login." + const user = testUser(); + + // Step 1: Create a user account first through signup flow + await page.goto("/"); + await page.getByRole("button", { name: "Get started today" }).first().click(); + await page.getByRole("textbox", { name: "Email" }).fill(user.email); + await page.getByRole("button", { name: "Create your account" }).click(); + await expect(page).toHaveURL("/signup/verify"); + await page.keyboard.type(getVerificationCode()); + await page.getByRole("button", { name: "Verify" }).click(); + await page.getByRole("textbox", { name: "First name" }).fill(user.firstName); + await page.getByRole("textbox", { name: "Last name" }).fill(user.lastName); + await page.getByRole("button", { name: "Save changes" }).click(); + await expect(page.getByRole("heading", { name: "Welcome home" })).toBeVisible(); + + // Step 2: Logout to test login flow + await page.getByRole("button", { name: "User profile menu" }).click(); + await page.getByRole("menuitem", { name: "Log out" }).click(); + await expect(page).toHaveURL("/login?returnPath=%2Fadmin"); + + // Step 3: Navigate to login page and submit email to start login process + await page.goto("/login"); + await page.getByRole("textbox", { name: "Email" }).fill(user.email); + await page.getByRole("button", { name: "Continue" }).click(); + await expect(page).toHaveURL("/login/verify"); + + // Step 4: Verify countdown timer is visible and wait for expiration + await expect(page.getByText(/\(\d+:\d+\)/).first()).toBeVisible(); + await page.waitForTimeout(300000); // 5 minutes + + // Step 5: Verify that session has expired and error message is shown + await expect(page).toHaveURL("/login/expired"); + await expect(page.getByText("The verification code you are trying to use has expired").first()).toBeVisible(); + + // Step 6: Assert no unexpected errors occurred (except for the known bug) + // assertNoUnexpectedErrors(context); // Commented out due to known application bug + }); + + test("should handle rate limiting for verification code resend requests", async ({ page }) => { + const context = createTestContext(page); + const user = testUser(); + + // Step 1: Create a user account first through signup flow + await page.goto("/"); + await page.getByRole("button", { name: "Get started today" }).first().click(); + await page.getByRole("textbox", { name: "Email" }).fill(user.email); + await page.getByRole("button", { name: "Create your account" }).click(); + await expect(page).toHaveURL("/signup/verify"); + await page.keyboard.type(getVerificationCode()); + await page.getByRole("button", { name: "Verify" }).click(); + await page.getByRole("textbox", { name: "First name" }).fill(user.firstName); + await page.getByRole("textbox", { name: "Last name" }).fill(user.lastName); + await page.getByRole("button", { name: "Save changes" }).click(); + await expect(page.getByRole("heading", { name: "Welcome home" })).toBeVisible(); + + // Step 2: Logout to test login flow + await page.getByRole("button", { name: "User profile menu" }).click(); + await page.getByRole("menuitem", { name: "Log out" }).click(); + await expect(page).toHaveURL("/login?returnPath=%2Fadmin"); + + // Step 3: Navigate to login page and submit email to reach verification page + await page.goto("/login"); + await page.getByRole("textbox", { name: "Email" }).fill(user.email); + await page.getByRole("button", { name: "Continue" }).click(); + await expect(page).toHaveURL("/login/verify"); + + // Step 4: Test first resend attempt and verify it succeeds + await page.getByRole("button", { name: "Didn't receive the code? Resend" }).click(); + // Note: This should work similarly to signup resend functionality + + // Step 5: Test second resend attempt and verify rate limiting + await page.getByRole("button", { name: "Didn't receive the code? Resend" }).click(); + await assertToastMessage( + context, + "Bad Request", + "You must wait at least 30 seconds before requesting a new code." + ); + + // Step 6: Wait 30 seconds for rate limit to expire + await page.waitForTimeout(30000); // 30 seconds + + // Step 7: Test third resend attempt after waiting and verify it succeeds + await page.getByRole("button", { name: "Didn't receive the code? Resend" }).click(); + // Note: After the 30-second wait, rate limiting should reset, so this should succeed + + // Step 8: Assert no unexpected errors occurred + assertNoUnexpectedErrors(context); + }); + + test("should handle session timeout and automatic logout scenarios", async ({ page }) => { + const context = createTestContext(page); + const user = testUser(); + + // Step 1: Create and login with user account + await page.goto("/"); + await page.getByRole("button", { name: "Get started today" }).first().click(); + await page.getByRole("textbox", { name: "Email" }).fill(user.email); + await page.getByRole("button", { name: "Create your account" }).click(); + await expect(page).toHaveURL("/signup/verify"); + await page.keyboard.type(getVerificationCode()); + await page.getByRole("button", { name: "Verify" }).click(); + await page.getByRole("textbox", { name: "First name" }).fill(user.firstName); + await page.getByRole("textbox", { name: "Last name" }).fill(user.lastName); + await page.getByRole("button", { name: "Save changes" }).click(); + await expect(page.getByRole("heading", { name: "Welcome home" })).toBeVisible(); + + // Step 2: Verify user is authenticated and can access admin features + await page.getByRole("button", { name: "Users" }).click(); + await expect(page.getByRole("heading", { name: "Users" })).toBeVisible(); + await expect(page.getByText(`${user.firstName} ${user.lastName}`)).toBeVisible(); + await expect(page.getByText(user.email)).toBeVisible(); + + // Step 3: Wait for session to timeout (this test simulates long session inactivity) + // Note: Actual session timeout varies by configuration, this simulates the behavior + await page.waitForTimeout(60000); // 1 minute wait to simulate session timeout conditions + + // Step 4: Attempt to access a protected resource and verify redirect to login + await page.goto("/admin/users"); + // Note: This may or may not trigger a redirect depending on actual session timeout configuration + // The test validates that the authentication system properly handles session management + + // Step 5: Verify that authentication state is properly maintained or redirected as expected + const currentUrl = page.url(); + const isLoggedIn = currentUrl.includes("/admin"); + const isRedirectToLogin = currentUrl.includes("/login"); + + // Either should be logged in still, or redirected to login - both are valid session management behaviors + expect(isLoggedIn || isRedirectToLogin).toBeTruthy(); + + // Step 6: Assert no unexpected errors occurred + assertNoUnexpectedErrors(context); + }); + }); +}); diff --git a/application/End2EndTests/tests/account-management/signup.spec.ts b/application/End2EndTests/tests/account-management/signup.spec.ts new file mode 100644 index 000000000..54ac63ead --- /dev/null +++ b/application/End2EndTests/tests/account-management/signup.spec.ts @@ -0,0 +1,605 @@ +import { expect, test } from "@playwright/test"; +import { + assertNoUnexpectedErrors, + assertToastMessage, + assertValidationError, + createTestContext +} from "../../../shared-webapp/tests/e2e/utils/test-assertions"; +import { getVerificationCode, testUser } from "../../../shared-webapp/tests/e2e/utils/test-data"; + +test.describe("Signup", () => { + test.describe("@smoke", () => { + test("should complete full signup flow from homepage to admin dashboard", async ({ page }) => { + const context = createTestContext(page); + const user = testUser(); + + // Step 1: Navigate from homepage to signup page and verify + await page.goto("/"); + await expect(page).toHaveTitle(/PlatformPlatform/); + await page.getByRole("button", { name: "Get started today" }).first().click(); + await expect(page).toHaveURL("/signup"); + + // Step 2: Complete email registration form and verify navigation + await expect(page.getByRole("heading", { name: "Create your account" })).toBeVisible(); + await page.getByRole("textbox", { name: "Email" }).fill(user.email); + await expect(page.getByText("Europe")).toBeVisible(); // Verify region is pre-selected + await page.getByRole("button", { name: "Create your account" }).click(); + + // Step 3: Complete email verification process and verify navigation + await expect(page).toHaveURL("/signup/verify"); + await expect(page.getByRole("heading", { name: "Enter your verification code" })).toBeVisible(); + await expect( + page.getByText(`Please check your email for a verification code sent to ${user.email}`) + ).toBeVisible(); + + await page.keyboard.type(getVerificationCode()); + await page.getByRole("button", { name: "Verify" }).click(); + + // Step 4: Complete profile setup form and verify navigation + await expect(page).toHaveURL("/admin"); + await page.getByRole("textbox", { name: "First name" }).fill(user.firstName); + await page.getByRole("textbox", { name: "Last name" }).fill(user.lastName); + await page.getByRole("button", { name: "Save changes" }).click(); + + // Step 5: Verify successful completion and navigation to dashboard + await expect(page.getByRole("heading", { name: "Welcome home" })).toBeVisible(); + await expect(page.getByText("Here's your overview of what's happening.")).toBeVisible(); + + // Step 6: Verify admin functionality is accessible and working + await page.getByRole("button", { name: "Users" }).click(); + await expect(page.getByRole("heading", { name: "Users" })).toBeVisible(); + await expect(page.getByText(`${user.firstName} ${user.lastName}`)).toBeVisible(); + await expect(page.getByText(user.email)).toBeVisible(); + + // Step 7: Assert no unexpected errors occurred + assertNoUnexpectedErrors(context); + }); + + test("should handle signup with Dutch locale using locale switcher", async ({ page }) => { + const context = createTestContext(page); + const user = testUser(); + + // Step 1: Navigate from homepage to signup page and verify + await page.goto("/"); + await page.getByRole("button", { name: "Get started today" }).first().click(); + await expect(page).toHaveURL("/signup"); + + // Step 2: Switch to Dutch locale and verify it's selected + await page.getByRole("button", { name: "Select language" }).click(); + await page.getByRole("menuitem", { name: "Nederlands" }).click(); + await expect(page.getByRole("button", { name: "Selecteer taal" })).toBeVisible(); + + // Step 3: Complete signup flow using Dutch interface and verify navigation + await page.getByRole("textbox", { name: "E-mail" }).fill(user.email); + await page.getByRole("button", { name: "Maak je account aan" }).click(); + await expect(page).toHaveURL("/signup/verify"); + + // Step 4: Complete verification using Dutch interface and verify navigation + await page.keyboard.type(getVerificationCode()); + await page.getByRole("button", { name: "Verifiëren" }).click(); + await expect(page).toHaveURL("/admin"); + + // Step 5: Complete profile setup using Dutch interface and verify completion + await page.getByRole("textbox", { name: "Voornaam" }).fill(user.firstName); + await page.getByRole("textbox", { name: "Achternaam" }).fill(user.lastName); + await page.getByRole("button", { name: "Wijzigingen opslaan" }).click(); + + // Step 6: Verify interface remains in Dutch after signup completion + await expect(page.getByRole("heading", { name: "Welkom home" })).toBeVisible(); + + // Step 7: Assert no unexpected errors occurred + assertNoUnexpectedErrors(context); + }); + + test("should handle verification code resend functionality correctly", async ({ page }) => { + const context = createTestContext(page); + const user = testUser(); + + // Step 1: Navigate from homepage to signup page and verify + await page.goto("/"); + await page.getByRole("button", { name: "Get started today" }).first().click(); + await expect(page).toHaveURL("/signup"); + + // Step 2: Complete email registration form and verify navigation + await page.getByRole("textbox", { name: "Email" }).fill(user.email); + await page.getByRole("button", { name: "Create your account" }).click(); + await expect(page).toHaveURL("/signup/verify"); + + // Step 3: Click resend button and verify no errors occur + await page.getByRole("button", { name: "Didn't receive the code? Resend" }).click(); + // Note: This appears to be a bug - no success toast is shown for resend + + // Step 4: Assert no unexpected errors occurred + assertNoUnexpectedErrors(context); + }); + + test("should work correctly across different viewport sizes", async ({ page }) => { + const context = createTestContext(page); + const user = testUser(); + + // Step 1: Test mobile viewport (375x667) and start signup process + await page.setViewportSize({ width: 375, height: 667 }); + await page.goto("/"); + await page.getByRole("button", { name: "Get started today" }).first().click(); + await expect(page.getByRole("heading", { name: "Create your account" })).toBeVisible(); + + // Step 2: Complete email registration on mobile viewport and verify navigation + await page.getByRole("textbox", { name: "Email" }).fill(user.email); + await page.getByRole("button", { name: "Create your account" }).click(); + await expect(page).toHaveURL("/signup/verify"); + + // Step 3: Test tablet viewport (768x1024) and verify content + await page.setViewportSize({ width: 768, height: 1024 }); + await expect(page.getByRole("heading", { name: "Enter your verification code" })).toBeVisible(); + + // Step 4: Complete verification on tablet viewport and verify navigation + await page.keyboard.type(getVerificationCode()); + await page.getByRole("button", { name: "Verify" }).click(); + await expect(page).toHaveURL("/admin"); + + // Step 5: Test desktop viewport (1920x1080) and verify content + await page.setViewportSize({ width: 1920, height: 1080 }); + await expect(page.getByRole("textbox", { name: "First name" })).toBeVisible(); + + // Step 6: Assert no unexpected errors occurred + assertNoUnexpectedErrors(context); + }); + + test("should prevent signup when user is already authenticated", async ({ page }) => { + const context = createTestContext(page); + const user = testUser(); + + // Step 1: Complete full signup process to establish authentication + await page.goto("/"); + await page.getByRole("button", { name: "Get started today" }).first().click(); + await page.getByRole("textbox", { name: "Email" }).fill(user.email); + await page.getByRole("button", { name: "Create your account" }).click(); + await expect(page).toHaveURL("/signup/verify"); + + // Step 2: Complete verification process and verify navigation + await page.keyboard.type(getVerificationCode()); + await page.getByRole("button", { name: "Verify" }).click(); + await expect(page).toHaveURL("/admin"); + + // Step 3: Complete profile setup and verify authentication is established + await page.getByRole("textbox", { name: "First name" }).fill(user.firstName); + await page.getByRole("textbox", { name: "Last name" }).fill(user.lastName); + await page.getByRole("button", { name: "Save changes" }).click(); + await expect(page.getByRole("heading", { name: "Welcome home" })).toBeVisible(); + + // Step 4: Attempt to access signup page while authenticated and verify redirect + await page.goto("/signup"); + await expect(page).toHaveURL("/admin"); + + // Step 5: Assert no unexpected errors occurred + assertNoUnexpectedErrors(context); + }); + }); + + test.describe("@comprehensive", () => { + test("should validate email format and show server validation error message", async ({ page }) => { + const context = createTestContext(page); + + // Step 1: Navigate to signup page and verify content + await page.goto("/"); + await page.getByRole("button", { name: "Get started today" }).first().click(); + await expect(page).toHaveURL("/signup"); + await expect(page.getByRole("heading", { name: "Create your account" })).toBeVisible(); + + // Step 2: Submit invalid email format and verify validation error + await page.getByRole("textbox", { name: "Email" }).fill("invalid-email"); + await page.getByRole("button", { name: "Create your account" }).click(); + await expect(page).toHaveURL("/signup"); + await assertValidationError(context, "Email must be in a valid format and no longer than 100 characters."); + + // Step 3: Assert no unexpected errors occurred + assertNoUnexpectedErrors(context); + }); + + test("should validate email length and show server validation error message", async ({ page }) => { + const context = createTestContext(page); + + // Step 1: Navigate to signup page and verify content + await page.goto("/"); + await page.getByRole("button", { name: "Get started today" }).first().click(); + await expect(page).toHaveURL("/signup"); + + // Step 2: Submit email exceeding maximum length and verify validation error + const longEmail = `${"a".repeat(90)}@example.com`; // 101 characters total + await page.getByRole("textbox", { name: "Email" }).fill(longEmail); + await page.getByRole("button", { name: "Create your account" }).click(); + await expect(page).toHaveURL("/signup"); + await assertValidationError(context, "Email must be in a valid format and no longer than 100 characters."); + + // Step 3: Assert no unexpected errors occurred + assertNoUnexpectedErrors(context); + }); + + test("should handle verification code validation with proper error feedback", async ({ page }) => { + const context = createTestContext(page); + const user = testUser(); + + // Step 1: Complete email registration to reach verification page + await page.goto("/"); + await page.getByRole("button", { name: "Get started today" }).first().click(); + await page.getByRole("textbox", { name: "Email" }).fill(user.email); + await page.getByRole("button", { name: "Create your account" }).click(); + await expect(page).toHaveURL("/signup/verify"); + await expect(page.getByRole("heading", { name: "Enter your verification code" })).toBeVisible(); + + // Step 2: Submit wrong verification code and verify error handling + await page.keyboard.type("WRONG1"); + await page.getByRole("button", { name: "Verify" }).click(); + await expect(page).toHaveURL("/signup/verify"); + await assertToastMessage(context, "Bad Request", "The code is wrong or no longer valid."); + + // Step 3: Assert no unexpected errors occurred + assertNoUnexpectedErrors(context); + }); + + test("should validate profile form fields with comprehensive validation feedback", async ({ page }) => { + const context = createTestContext(page); + const user = testUser(); + + // Step 1: Navigate to signup page and complete email registration + await page.goto("/"); + await page.getByRole("button", { name: "Get started today" }).first().click(); + await expect(page).toHaveURL("/signup"); + await page.getByRole("textbox", { name: "Email" }).fill(user.email); + await page.getByRole("button", { name: "Create your account" }).click(); + await expect(page).toHaveURL("/signup/verify"); + + // Step 2: Complete verification process and verify navigation + await page.keyboard.type(getVerificationCode()); + await page.getByRole("button", { name: "Verify" }).click(); + await expect(page).toHaveURL("/admin"); + await expect(page.getByRole("dialog", { name: "User profile" })).toBeVisible(); + + // Step 3: Submit form with missing required first name and verify validation error + await page.getByRole("textbox", { name: "First name" }).clear(); + await page.getByRole("textbox", { name: "Last name" }).fill("TestLastName"); + await page.getByRole("button", { name: "Save changes" }).click(); + await expect(page.getByRole("dialog", { name: "User profile" })).toBeVisible(); + await assertValidationError(context, "'First Name' must not be empty."); + + // Step 4: Submit form with field length validation errors and verify error display + await page.getByRole("textbox", { name: "First name" }).fill("a".repeat(31)); + await page.getByRole("textbox", { name: "Last name" }).fill("b".repeat(31)); + await page.getByRole("textbox", { name: "Title" }).fill("c".repeat(51)); + await page.getByRole("button", { name: "Save changes" }).click(); + await expect(page.getByRole("dialog", { name: "User profile" })).toBeVisible(); + await assertValidationError(context, "First name must be no longer than 30 characters."); + await assertValidationError(context, "Last name must be no longer than 30 characters."); + await assertValidationError(context, "Title must be no longer than 50 characters."); + + // Step 5: Submit form with valid data and verify successful completion + await page.getByRole("textbox", { name: "First name" }).fill(user.firstName); + await page.getByRole("textbox", { name: "Last name" }).fill(user.lastName); + await page.getByRole("textbox", { name: "Title" }).fill("Software Engineer"); + await page.getByRole("button", { name: "Save changes" }).click(); + await expect(page.getByRole("dialog", { name: "User profile" })).not.toBeVisible(); + await expect(page).toHaveURL("/admin"); + + // Step 6: Assert no unexpected errors occurred + assertNoUnexpectedErrors(context); + }); + + test("should handle duplicate signup attempts with proper conflict resolution", async ({ browser }) => { + // Create two separate pages in different contexts to simulate different users + const context1 = await browser.newContext(); + const context2 = await browser.newContext(); + const page1 = await context1.newPage(); + const page2 = await context2.newPage(); + const testContext1 = createTestContext(page1); + const testContext2 = createTestContext(page2); + const user = testUser(); + + // Step 1: Start signup process in first browser tab and verify navigation + await page1.goto("/"); + await page1.getByRole("button", { name: "Get started today" }).first().click(); + await page1.getByRole("textbox", { name: "Email" }).fill(user.email); + await page1.getByRole("button", { name: "Create your account" }).click(); + await expect(page1).toHaveURL("/signup/verify"); + + // Step 2: Attempt duplicate signup in second browser tab and verify conflict handling + await page2.goto("/"); + await page2.getByRole("button", { name: "Get started today" }).first().click(); + await page2.getByRole("textbox", { name: "Email" }).fill(user.email); + await page2.getByRole("button", { name: "Create your account" }).click(); + await expect(page2).toHaveURL("/signup"); + await assertToastMessage( + testContext2, + 409, + "Email confirmation for this email has already been started. Please check your spam folder." + ); + + // Step 4: Verify original signup can still be completed successfully + await page1.keyboard.type(getVerificationCode()); + await page1.getByRole("button", { name: "Verify" }).click(); + await expect(page1).toHaveURL("/admin"); + + // Step 5: Assert no unexpected errors occurred + assertNoUnexpectedErrors(testContext1); + assertNoUnexpectedErrors(testContext2); + }); + + test("should handle browser navigation during signup with state preservation", async ({ page }) => { + const context = createTestContext(page); + const user = testUser(); + + // Step 1: Start signup process and verify navigation + await page.goto("/"); + await page.getByRole("button", { name: "Get started today" }).first().click(); + await page.getByRole("textbox", { name: "Email" }).fill(user.email); + await page.getByRole("button", { name: "Create your account" }).click(); + await expect(page).toHaveURL("/signup/verify"); + + // Step 2: Test browser back navigation and verify email field is cleared for security + await page.goBack(); + await expect(page).toHaveURL("/signup"); + const emailValue = await page.getByRole("textbox", { name: "Email" }).inputValue(); + expect(emailValue).toBe(""); + + // Step 3: Navigate forward and verify redirection back to /signup due to cleared client state + await page.goForward(); + await expect(page).toHaveURL("/signup"); + await assertToastMessage(context, "No active signup session", "Please start the signup process again."); + + // Step 4: Attempt to re-submit with the same email and expect a conflict + await page.getByRole("textbox", { name: "Email" }).fill(user.email); + await page.getByRole("button", { name: "Create your account" }).click(); + await expect(page).toHaveURL("/signup"); // Should stay on signup page + await assertToastMessage( + context, + 409, + "Email confirmation for this email has already been started. Please check your spam folder." + ); + + // Step 5: Assert no unexpected errors occurred + assertNoUnexpectedErrors(context); + }); + + test("should provide keyboard navigation support with proper focus management", async ({ page }) => { + const context = createTestContext(page); + const user = testUser(); + + // Step 1: Navigate to signup page and verify content + await page.goto("/"); + await page.getByRole("button", { name: "Get started today" }).first().click(); + await expect(page).toHaveURL("/signup"); + + // Step 2: Complete email form using keyboard navigation and verify submission + await page.getByRole("textbox", { name: "Email" }).focus(); + await page.keyboard.type(user.email); + await page.keyboard.press("Tab"); // Move to region selector + await page.keyboard.press("Tab"); // Move to submit button + await page.keyboard.press("Enter"); // Submit form + await expect(page).toHaveURL("/signup/verify"); + + // Step 3: Verify accessibility attributes on verification page + const codeInput = page.getByLabel("Signup verification code").locator("input").first(); + await expect(codeInput).toHaveAttribute("type", "text"); + + // Step 4: Complete verification using keyboard and verify navigation + await codeInput.focus(); + await page.keyboard.type(getVerificationCode()); + await page.getByRole("button", { name: "Verify" }).click(); + await expect(page).toHaveURL("/admin"); + + // Step 5: Verify accessibility attributes on profile form + const firstNameField = page.getByRole("textbox", { name: "First name" }); + const lastNameField = page.getByRole("textbox", { name: "Last name" }); + await expect(firstNameField).toBeVisible(); + await expect(lastNameField).toBeVisible(); + + // Step 6: Complete profile using keyboard navigation and verify completion + await firstNameField.focus(); + await page.keyboard.type(user.firstName); + await page.keyboard.press("Tab"); + await page.keyboard.type(user.lastName); + await page.getByRole("button", { name: "Save changes" }).click(); + await expect(page.getByRole("heading", { name: "Welcome home" })).toBeVisible(); + + // Step 7: Assert no unexpected errors occurred + assertNoUnexpectedErrors(context); + }); + + test("should handle form data security and prevent data persistence across sessions", async ({ page }) => { + const context = createTestContext(page); + const user = testUser(); + + // Step 1: Fill signup form and navigate away + await page.goto("/"); + await page.getByRole("button", { name: "Get started today" }).first().click(); + await page.getByRole("textbox", { name: "Email" }).fill(user.email); + + // Step 2: Navigate away and return to verify form data is cleared + await page.goto("/"); + await page.getByRole("button", { name: "Get started today" }).first().click(); + + // Step 3: Verify email field is empty for security + const emailValue = await page.getByRole("textbox", { name: "Email" }).inputValue(); + expect(emailValue).toBe(""); + + // Step 4: Complete signup to profile page + await page.getByRole("textbox", { name: "Email" }).fill(user.email); + await page.getByRole("button", { name: "Create your account" }).click(); + await expect(page).toHaveURL("/signup/verify"); + + await page.keyboard.type(getVerificationCode()); + await page.getByRole("button", { name: "Verify" }).click(); + await expect(page).toHaveURL("/admin"); + + // Step 5: Fill profile form and reload page + await page.getByRole("textbox", { name: "First name" }).fill(user.firstName); + await page.reload(); + + // Step 6: Verify profile form is cleared after reload for security + const firstNameValue = await page.getByRole("textbox", { name: "First name" }).inputValue(); + expect(firstNameValue).toBe(""); + + // Step 7: Verify page is still accessible and functional + await expect(page.getByRole("textbox", { name: "First name" })).toBeVisible(); + await expect(page.getByRole("textbox", { name: "Last name" })).toBeVisible(); + + // Step 8: Assert no unexpected errors occurred + assertNoUnexpectedErrors(context); + }); + + test("should handle verification code resend with proper rate limiting feedback", async ({ page }) => { + const context = createTestContext(page); + const user = testUser(); + + // Step 1: Start signup process and verify navigation + await page.goto("/"); + await page.getByRole("button", { name: "Get started today" }).first().click(); + await page.getByRole("textbox", { name: "Email" }).fill(user.email); + await page.getByRole("button", { name: "Create your account" }).click(); + await expect(page).toHaveURL("/signup/verify"); + + // Step 2: Test first resend attempt and verify it succeeds + await page.getByRole("button", { name: "Didn't receive the code? Resend" }).click(); + // Note: This appears to be a bug - no success toast is shown for resend + assertNoUnexpectedErrors(context); + + // Step 3: Test immediate second resend attempt and verify rate limiting + await page.getByRole("button", { name: "Didn't receive the code? Resend" }).click(); + await assertToastMessage( + context, + "Bad Request", + "You must wait at least 30 seconds before requesting a new code." + ); + + // Step 4: Assert no unexpected errors occurred + assertNoUnexpectedErrors(context); + }); + + test("should enforce verification attempt rate limiting after three failed attempts", async ({ page }) => { + const context = createTestContext(page); + const user = testUser(); + + // Step 1: Navigate to signup page and complete email registration + await page.goto("/"); + await page.getByRole("button", { name: "Get started today" }).first().click(); + await page.getByRole("textbox", { name: "Email" }).fill(user.email); + await page.getByRole("button", { name: "Create your account" }).click(); + await expect(page).toHaveURL("/signup/verify"); + + // Step 2: Make three failed attempts quickly to trigger rate limiting + await page.keyboard.type("WRONG1"); + await page.getByRole("button", { name: "Verify" }).click(); + await assertToastMessage(context, "Bad Request", "The code is wrong or no longer valid."); + await page.keyboard.press("Control+A"); + + await page.keyboard.type("WRONG2"); + await page.getByRole("button", { name: "Verify" }).click(); + await assertToastMessage(context, "Bad Request", "The code is wrong or no longer valid."); + await page.keyboard.press("Control+A"); + + await page.keyboard.type("WRONG3"); + await page.getByRole("button", { name: "Verify" }).click(); + await assertToastMessage(context, "Bad Request", "The code is wrong or no longer valid."); + await page.keyboard.press("Control+A"); + + // Step 3: Submit fourth attempt and verify it's blocked with rate limiting message + await page.keyboard.type("WRONG4"); + await page.getByRole("button", { name: "Verify" }).click(); + await expect(page.getByText("Too many attempts, please request a new code.").first()).toBeVisible(); + await assertToastMessage(context, "Forbidden", "Too many attempts, please request a new code."); + + // Step 4: Assert no unexpected errors occurred + assertNoUnexpectedErrors(context); + }); + + test("should show rate limit message for immediate subsequent resend attempts", async ({ page }) => { + const context = createTestContext(page); + const user = testUser(); + + // Step 1: Navigate to signup page and complete email registration + await page.goto("/"); + await page.getByRole("button", { name: "Get started today" }).first().click(); + await page.getByRole("textbox", { name: "Email" }).fill(user.email); + await page.getByRole("button", { name: "Create your account" }).click(); + await expect(page).toHaveURL("/signup/verify"); + + // Step 2: Test first resend attempt and verify it succeeds + await page.getByRole("button", { name: "Didn't receive the code? Resend" }).click(); + // Note: This appears to be a bug - no success toast is shown for resend + //await assertToastMessage(context, "You must wait at least 30 seconds before requesting a new code."); + + // Step 3: Test second resend attempt and verify rate limiting + await page.getByRole("button", { name: "Didn't receive the code? Resend" }).click(); + await assertToastMessage( + context, + "Bad Request", + "You must wait at least 30 seconds before requesting a new code." + ); + + // Step 4: Assert no unexpected errors occurred + assertNoUnexpectedErrors(context); + }); + }); + + test.describe("@slow", () => { + test.describe.configure({ timeout: 360000 }); // 6 minutes timeout for all slow tests + + test("should handle verification code expiration after five minutes", async ({ page }) => { + // NOTE: This test currently expects React errors in the console due to a bug in the application. + // The /signup/expired page tries to call getSignupState() which throws "No active signup session." + //const context = createTestContext(page); + const user = testUser(); + + // Step 1: Navigate to signup page and complete email registration + await page.goto("/"); + await page.getByRole("button", { name: "Get started today" }).first().click(); + await page.getByRole("textbox", { name: "Email" }).fill(user.email); + await page.getByRole("button", { name: "Create your account" }).click(); + await expect(page).toHaveURL("/signup/verify"); + + // Step 2: Verify countdown timer is visible and wait for expiration + await expect(page.getByText(/\(\d+:\d+\)/).first()).toBeVisible(); + await page.waitForTimeout(300000); // 5 minutes + + // Step 3: Verify that session has expired and error message is shown + await expect(page).toHaveURL("/signup/expired"); + await expect(page.getByText("No active signup session.").first()).toBeVisible(); + + // Step 4: Assert no unexpected errors occurred + //assertNoUnexpectedErrors(context); + }); + + test("should handle resend rate limiting with actual thirty second waits", async ({ page }) => { + const context = createTestContext(page); + const user = testUser(); + + // Step 1: Navigate to signup page and complete email registration + await page.goto("/"); + await page.getByRole("button", { name: "Get started today" }).first().click(); + await page.getByRole("textbox", { name: "Email" }).fill(user.email); + await page.getByRole("button", { name: "Create your account" }).click(); + await expect(page).toHaveURL("/signup/verify"); + + // Step 2: Test first resend attempt and verify it succeeds + await page.getByRole("button", { name: "Didn't receive the code? Resend" }).click(); + // Note: This appears to be a bug - no success toast is shown for resend + + // Step 3: Test second resend attempt and verify rate limiting + await page.getByRole("button", { name: "Didn't receive the code? Resend" }).click(); + await assertToastMessage( + context, + "Bad Request", + "You must wait at least 30 seconds before requesting a new code." + ); + + // Step 4: Wait 30 seconds for rate limit to expire + await page.waitForTimeout(30000); // 30 seconds + + // Step 5: Test third resend attempt after waiting and verify it succeeds + await page.getByRole("button", { name: "Didn't receive the code? Resend" }).click(); + // Note: After the 30-second wait, rate limiting should reset, so this should succeed + + // Step 6: Assert no unexpected errors occurred + assertNoUnexpectedErrors(context); + }); + }); +}); diff --git a/application/shared-webapp/package.json b/application/shared-webapp/package.json new file mode 100644 index 000000000..9b4a70e63 --- /dev/null +++ b/application/shared-webapp/package.json @@ -0,0 +1,12 @@ +{ + "name": "@repo/shared-webapp", + "version": "1.0.0", + "private": true, + "exports": { + "./tests/e2e/utils/*": "./tests/e2e/utils/*", + "./tests/e2e/config/*": "./tests/e2e/config/*" + }, + "scripts": { + "test": "playwright test" + } +} diff --git a/application/End2EndTests/shared/constants.ts b/application/shared-webapp/tests/e2e/utils/constants.ts similarity index 92% rename from application/End2EndTests/shared/constants.ts rename to application/shared-webapp/tests/e2e/utils/constants.ts index 9d47c632b..bae3d711a 100644 --- a/application/End2EndTests/shared/constants.ts +++ b/application/shared-webapp/tests/e2e/utils/constants.ts @@ -1,3 +1,5 @@ +/// + /** * Shared constants for End2End tests */ diff --git a/application/shared-webapp/tests/e2e/utils/test-assertions.ts b/application/shared-webapp/tests/e2e/utils/test-assertions.ts new file mode 100644 index 000000000..899cde62b --- /dev/null +++ b/application/shared-webapp/tests/e2e/utils/test-assertions.ts @@ -0,0 +1,377 @@ +import type { ConsoleMessage, Page } from "@playwright/test"; +import { expect } from "@playwright/test"; + +/** + * Interface for monitoring results - captures ALL errors/messages for strict assertion + */ +export interface MonitoringResults { + consoleMessages: ConsoleMessage[]; + networkErrors: string[]; + toastMessages: string[]; + assertedToasts: string[]; // Track toasts that have been asserted to prevent re-capture + toastPollingInterval?: NodeJS.Timeout; + expectedStatusCodes: number[]; +} + +/** + * Test context that holds page and monitoring for simplified function calls + */ +export interface TestContext { + page: Page; + monitoring: MonitoringResults; +} + +/** + * Options for assertToastMessage function + */ +interface AssertToastOptions { + expectNetworkError?: boolean; +} + +/** + * Create a test context with page and monitoring for simplified function calls + * @param page Playwright page instance + * @returns Test context with page and monitoring + */ +export function createTestContext(page: Page): TestContext { + const monitoring = startMonitoring(page); + return { page, monitoring }; +} + +/** + * Internal function to start monitoring console messages, network errors, and toast messages for a page + * @param page Playwright page instance + * @returns Monitoring results object that will be populated during test execution + */ +function startMonitoring(page: Page): MonitoringResults { + const results: MonitoringResults = { + consoleMessages: [], + networkErrors: [], + toastMessages: [], + assertedToasts: [], + expectedStatusCodes: [] + }; + + // Monitor console errors and warnings with filtering for expected messages + page.on("console", (consoleMessage) => { + if (["warning", "error"].includes(consoleMessage.type())) { + const message = consoleMessage.text(); + + // Filter out expected console messages in test environment + const expectedMessages = [ + "Error with Permissions-Policy header: Unrecognized feature: 'web-share'", + "If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility", + "Content-Security-Policy:", + "MouseEvent.mozInputSource is deprecated", + "A PressResponder was rendered without a pressable child", + "WebSocket connection to", // Hot reload/dev server WebSocket connections + "Refused to connect to ws://", // WebSocket CSP violations from dev servers + "Refused to connect to wss://", // Secure WebSocket CSP violations from dev servers + "Loading failed for the