feat(phase-39): role-based access control overhaul + forced password change

- 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

frontend/src/components/ChangePasswordModal.tsx

@@ -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>
+  );
+}

frontend/src/components/Sidebar.tsx

@@ -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 },
 ];
 

frontend/src/components/test-detail/TeamTabs.tsx

@@ -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 ─────────────────────────────────────────────────
 

frontend/src/components/test-detail/TestDetailHeader.tsx

@@ -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) {