kitos/Aegis
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(phase-39): role-based access control overhaul + forced password change
Some checks failed
Aegis CI / lint-and-test (push) Has been cancelled
Details

Browse Source 
- Add must_change_password field to User model with migration b023

- Add POST /auth/change-password endpoint with password policy validation

- Add require_password_changed dependency to block requests until password is changed

- Add ChangePasswordModal with live password policy checklist (forced on first login)

- Show password policy in CreateUserModal and EditUserModal

- Fix backend permissions: tests, campaigns, templates, reports, evidence, worklogs

- red_tech/blue_tech: execute only, cannot create tests/campaigns/templates

- red_lead/blue_lead: create/edit tests/campaigns/templates, generate reports, no system access

- viewer: read-only everywhere, can generate reports

- Fix frontend role checks across TestDetailPage, TestDetailHeader, TeamTabs, TestsPage, CampaignsPage, CampaignDetailPage, Sidebar
This commit is contained in:
Kitos
2026-02-18 10:37:02 +01:00
parent 8f764d8e39
commit a4a2adccee
24 changed files with 338 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/api/auth.ts
View File

@@ -34,3 +34,14 @@ export async function getMe(): Promise<User> {
const { data } = await client.get<User>("/auth/me");
return data;
}
/** Change the current user's password. */
export async function changePassword(
currentPassword: string,
newPassword: string,
): Promise<void> {
await client.post("/auth/change-password", {
current_password: currentPassword,
new_password: newPassword,
});
}

148
frontend/src/components/ChangePasswordModal.tsx Normal file
View File

@@ -0,0 +1,148 @@
import { useState, useMemo } from "react";
import { changePassword } from "../api/auth";
interface PasswordRule {
label: string;
test: (pw: string) => boolean;
}
const PASSWORD_RULES: PasswordRule[] = [
{ label: "At least 12 characters", test: (pw) => pw.length >= 12 },
{ label: "At least one uppercase letter", test: (pw) => /[A-Z]/.test(pw) },
{ label: "At least one lowercase letter", test: (pw) => /[a-z]/.test(pw) },
{ label: "At least one digit", test: (pw) => /[0-9]/.test(pw) },
{
label: "At least one special character (!@#$%^&*…)",
test: (pw) => /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?`~]/.test(pw),
},
];
export function PasswordPolicyChecklist({ password }: { password: string }) {
return (
<ul className="mt-2 space-y-1 text-xs">
{PASSWORD_RULES.map((rule) => {
const ok = password.length > 0 && rule.test(password);
return (
<li key={rule.label} className="flex items-center gap-1.5">
<span className={ok ? "text-green-400" : "text-gray-500"}>
{ok ? "✓" : "○"}
</span>
<span className={ok ? "text-green-300" : "text-gray-400"}>
{rule.label}
</span>
</li>
);
})}
</ul>
);
}
interface Props {
onSuccess: () => void;
isForced?: boolean;
}
export default function ChangePasswordModal({ onSuccess, isForced }: Props) {
const [currentPw, setCurrentPw] = useState("");
const [newPw, setNewPw] = useState("");
const [confirmPw, setConfirmPw] = useState("");
const [error, setError] = useState<string | null>(null);
const [loading, setLoading] = useState(false);
const allRulesPass = useMemo(
() => PASSWORD_RULES.every((r) => r.test(newPw)),
[newPw],
);
const canSubmit =
currentPw.length > 0 &&
allRulesPass &&
newPw === confirmPw &&
!loading;
async function handleSubmit(e: React.FormEvent) {
e.preventDefault();
if (!canSubmit) return;
setLoading(true);
setError(null);
try {
await changePassword(currentPw, newPw);
onSuccess();
} catch (err: unknown) {
const msg =
(err as { response?: { data?: { detail?: string } } })?.response?.data
?.detail ?? "Failed to change password";
setError(msg);
} finally {
setLoading(false);
}
}
return (
<div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/70 backdrop-blur-sm">
<form
onSubmit={handleSubmit}
className="w-full max-w-md rounded-xl border border-gray-700 bg-gray-900 p-6 shadow-2xl"
>
<h2 className="mb-1 text-lg font-semibold text-white">
Change Password
</h2>
{isForced && (
<p className="mb-4 text-sm text-amber-400">
You must change your password before continuing.
</p>
)}
{error && (
<div className="mb-3 rounded bg-red-900/50 px-3 py-2 text-sm text-red-300">
{error}
</div>
)}
<label className="mb-1 block text-sm text-gray-400">
Current password
</label>
<input
type="password"
className="mb-4 w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white focus:border-cyan-500 focus:outline-none"
value={currentPw}
onChange={(e) => setCurrentPw(e.target.value)}
autoFocus
/>
<label className="mb-1 block text-sm text-gray-400">
New password
</label>
<input
type="password"
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white focus:border-cyan-500 focus:outline-none"
value={newPw}
onChange={(e) => setNewPw(e.target.value)}
/>
<PasswordPolicyChecklist password={newPw} />
<label className="mb-1 mt-4 block text-sm text-gray-400">
Confirm new password
</label>
<input
type="password"
className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white focus:border-cyan-500 focus:outline-none"
value={confirmPw}
onChange={(e) => setConfirmPw(e.target.value)}
/>
{confirmPw.length > 0 && newPw !== confirmPw && (
<p className="mt-1 text-xs text-red-400">Passwords do not match</p>
)}
<button
type="submit"
disabled={!canSubmit}
className="mt-6 w-full rounded-lg bg-cyan-600 py-2.5 text-sm font-medium text-white transition-colors hover:bg-cyan-500 disabled:cursor-not-allowed disabled:opacity-50"
>
{loading ? "Changing…" : "Change Password"}
</button>
</form>
</div>
);
}

4
frontend/src/components/Sidebar.tsx
View File

@@ -33,7 +33,7 @@ interface NavItem {
const mainLinks: NavItem[] = [
{ to: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
{ to: "/executive-dashboard", label: "Executive Dashboard", icon: Gauge, roles: ["admin", "red_lead", "blue_lead"] },
{ to: "/executive-dashboard", label: "Executive Dashboard", icon: Gauge, roles: ["admin", "red_lead", "blue_lead", "viewer"] },
{ to: "/matrix", label: "ATT&CK Matrix", icon: Grid3X3 },
{
to: "/tests",
@@ -48,7 +48,7 @@ const mainLinks: NavItem[] = [
{ to: "/campaigns", label: "Campaigns", icon: Zap },
{ to: "/threat-actors", label: "Threat Actors", icon: Crosshair },
{ to: "/compliance", label: "Compliance", icon: ShieldCheck },
{ to: "/comparison", label: "Comparison", icon: GitCompareArrows, roles: ["admin", "red_lead", "blue_lead"] },
{ to: "/comparison", label: "Comparison", icon: GitCompareArrows, roles: ["admin", "red_lead", "blue_lead", "viewer"] },
{ to: "/reports", label: "Reports", icon: BarChart3 },
];

4
frontend/src/components/test-detail/TeamTabs.tsx
View File

@@ -119,11 +119,11 @@ export default function TeamTabs({
const canEditRed =
RED_EDITABLE_STATES.includes(test.state) &&
(role === "red_tech" || role === "admin");
(role === "red_tech" || role === "red_lead" || role === "admin");
const canEditBlue =
BLUE_EDITABLE_STATES.includes(test.state) &&
(role === "blue_tech" || role === "admin");
(role === "blue_tech" || role === "blue_lead" || role === "admin");
// ── Red Team Tab ─────────────────────────────────────────────────

16
frontend/src/components/test-detail/TestDetailHeader.tsx
View File

@@ -91,10 +91,10 @@ export default function TestDetailHeader({
const renderActions = () => {
const buttons: React.ReactNode[] = [];
// Red Tech in draft -> Start Execution
// Red Team in draft -> Start Execution
if (
test.state === "draft" &&
(role === "red_tech" || role === "admin")
(role === "red_tech" || role === "red_lead" || role === "admin")
) {
buttons.push(
<button
@@ -109,10 +109,10 @@ export default function TestDetailHeader({
);
}
// Red Tech in red_executing -> Submit to Blue Team
// Red Team in red_executing -> Submit to Blue Team
if (
test.state === "red_executing" &&
(role === "red_tech" || role === "admin")
(role === "red_tech" || role === "red_lead" || role === "admin")
) {
buttons.push(
<button
@@ -127,10 +127,10 @@ export default function TestDetailHeader({
);
}
// Blue Tech in blue_evaluating -> Submit for Review
// Blue Team in blue_evaluating -> Submit for Review
if (
test.state === "blue_evaluating" &&
(role === "blue_tech" || role === "admin")
(role === "blue_tech" || role === "blue_lead" || role === "admin")
) {
buttons.push(
<button
@@ -245,8 +245,8 @@ export default function TestDetailHeader({
// ── Live timer ───────────────────────────────────────────────────
const canControlTimer =
(test.state === "red_executing" && (role === "red_tech" || role === "admin")) ||
(test.state === "blue_evaluating" && (role === "blue_tech" || role === "admin"));
(test.state === "red_executing" && (role === "red_tech" || role === "red_lead" || role === "admin")) ||
(test.state === "blue_evaluating" && (role === "blue_tech" || role === "blue_lead" || role === "admin"));
const renderLiveTimer = () => {
if (test.state === "red_executing" && test.red_started_at) {

26
frontend/src/context/AuthContext.tsx
View File

@@ -12,6 +12,7 @@ import {
getMe,
} from "../api/auth";
import type { User } from "../types/models";
import ChangePasswordModal from "../components/ChangePasswordModal";
/* ── Context shape ────────────────────────────────────────────────── */
@@ -31,18 +32,20 @@ export function AuthProvider({ children }: { children: ReactNode }) {
const [user, setUser] = useState<User | null>(null);
const [isLoading, setIsLoading] = useState(true);
// On mount — try to hydrate the user from the existing HttpOnly cookie.
// If no valid cookie exists the /auth/me call will 401 and we stay
// unauthenticated — no localStorage involved.
useEffect(() => {
getMe()
.then(setUser)
.catch(() => setUser(null))
.finally(() => setIsLoading(false));
const refreshUser = useCallback(async () => {
try {
const me = await getMe();
setUser(me);
} catch {
setUser(null);
}
}, []);
useEffect(() => {
refreshUser().finally(() => setIsLoading(false));
}, [refreshUser]);
const login = useCallback(async (username: string, password: string) => {
// The backend sets the HttpOnly cookie automatically
await apiLogin(username, password);
const me = await getMe();
setUser(me);
@@ -53,6 +56,8 @@ export function AuthProvider({ children }: { children: ReactNode }) {
setUser(null);
}, []);
const mustChangePassword = user?.must_change_password === true;
return (
<AuthContext.Provider
value={{
@@ -64,6 +69,9 @@ export function AuthProvider({ children }: { children: ReactNode }) {
}}
>
{children}
{mustChangePassword && (
<ChangePasswordModal isForced onSuccess={refreshUser} />
)}
</AuthContext.Provider>
);
}

2
frontend/src/pages/CampaignDetailPage.tsx
View File

@@ -70,7 +70,7 @@ export default function CampaignDetailPage() {
};
const role = user?.role ?? "";
const canManage = role === "admin" || role === "red_tech";
const canManage = role === "admin" || role === "red_lead" || role === "blue_lead";
const canComplete = role === "admin" || role === "red_lead";
const {

2
frontend/src/pages/CampaignsPage.tsx
View File

@@ -56,7 +56,7 @@ export default function CampaignsPage() {
target_platform: "",
});
const canCreate = user?.role === "admin" || user?.role === "red_tech";
const canCreate = user?.role === "admin" || user?.role === "red_lead" || user?.role === "blue_lead";
const { data, isLoading, error } = useQuery({
queryKey: ["campaigns", filters],

4
frontend/src/pages/TestDetailPage.tsx
View File

@@ -344,10 +344,10 @@ export default function TestDetailPage() {
const role = user?.role ?? "";
const canSaveRed =
(test.state === "draft" || test.state === "red_executing") &&
(role === "red_tech" || role === "admin");
(role === "red_tech" || role === "red_lead" || role === "admin");
const canSaveBlue =
test.state === "blue_evaluating" &&
(role === "blue_tech" || role === "admin");
(role === "blue_tech" || role === "blue_lead" || role === "admin");
// ── Render ─────────────────────────────────────────────────────

2
frontend/src/pages/TestsPage.tsx
View File

@@ -75,7 +75,7 @@ export default function TestsPage() {
const { user } = useAuth();
const canCreate =
user?.role === "admin" || user?.role === "red_tech";
user?.role === "admin" || user?.role === "red_lead" || user?.role === "blue_lead";
// ── Filter state ──────────────────────────────────────────────────
const [stateFilter, setStateFilter] = useState<TestState | "">("");

8
frontend/src/pages/UsersPage.tsx
View File

@@ -12,6 +12,7 @@ import {
Edit,
} from "lucide-react";
import { getUsers, createUser, updateUser, type UserOut, type UserCreatePayload } from "../api/users";
import { PasswordPolicyChecklist } from "../components/ChangePasswordModal";
const ROLES = [
{ value: "viewer", label: "Viewer" },
@@ -323,7 +324,11 @@ function CreateUserModal({ onClose, onSubmit, isSubmitting, error }: CreateUserM
errors.password ? "border-red-500" : "border-gray-700"
}`}
/>
<PasswordPolicyChecklist password={formData.password} />
{errors.password && <p className="mt-1 text-sm text-red-400">{errors.password}</p>}
<p className="mt-1 text-xs text-amber-400/70">
The user will be required to change this password on first login.
</p>
</div>
<div>
@@ -446,6 +451,9 @@ function EditUserModal({ user, onClose, onSubmit, isSubmitting, error }: EditUse
className="mt-1 w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-gray-200"
placeholder="••••••••"
/>
{formData.password.length > 0 && (
<PasswordPolicyChecklist password={formData.password} />
)}
</div>
<div className="flex justify-end gap-3 pt-4">

1
frontend/src/types/models.ts
View File

@@ -6,6 +6,7 @@ export interface User {
id: string;
username: string;
role: string;
must_change_password?: boolean;
}
// ── Techniques ─────────────────────────────────────────────────────