|
4 | 4 | <div class="card"> |
5 | 5 | <h1>Security</h1> |
6 | 6 | <p class="muted">Security settings, access control, and audit logs.</p> |
7 | | - <p>This is a placeholder page for Security settings.</p> |
| 7 | + |
| 8 | + <section aria-labelledby="sec-overview"> |
| 9 | + <h2 id="sec-overview">Overview</h2> |
| 10 | + <p> |
| 11 | + Manage your account and organization security settings from one place. Use the controls below to enforce |
| 12 | + authentication policies, review and revoke active sessions, manage API keys and OAuth applications, and |
| 13 | + inspect audit logs for important events. |
| 14 | + </p> |
| 15 | + </section> |
| 16 | + |
| 17 | + <hr /> |
| 18 | + |
| 19 | + <section aria-labelledby="sec-authentication"> |
| 20 | + <h2 id="sec-authentication">Authentication</h2> |
| 21 | + <p class="muted">Password policy, multi-factor authentication (MFA), and SSO settings.</p> |
| 22 | + |
| 23 | + <div class="form-grid"> |
| 24 | + <div> |
| 25 | + <h3>Password policy</h3> |
| 26 | + <p> |
| 27 | + Enforce strong passwords across your organization. We recommend requiring a minimum length of 12 |
| 28 | + characters and enabling checks for common leaked passwords. |
| 29 | + </p> |
| 30 | + <form method="post" action="#"> |
| 31 | + <!-- Placeholder controls; wiring to server can be added later --> |
| 32 | + <label> |
| 33 | + Minimum password length |
| 34 | + <input type="number" name="min_length" value="12" min="8" max="128" /> |
| 35 | + </label> |
| 36 | + <label> |
| 37 | + Require character classes |
| 38 | + <select name="char_classes"> |
| 39 | + <option value="recommended">Recommended (upper, lower, digits, symbols)</option> |
| 40 | + <option value="optional">Optional</option> |
| 41 | + </select> |
| 42 | + </label> |
| 43 | + <button class="btn" disabled>Save (not wired)</button> |
| 44 | + </form> |
| 45 | + </div> |
| 46 | + |
| 47 | + <div> |
| 48 | + <h3>Multi-factor authentication (MFA)</h3> |
| 49 | + <p> |
| 50 | + Add an extra layer of security by requiring a second verification factor (TOTP, SMS, or hardware |
| 51 | + security keys) when users sign in. |
| 52 | + </p> |
| 53 | + <ul> |
| 54 | + <li>TOTP (Authenticator apps like Google Authenticator or Authy)</li> |
| 55 | + <li>SMS (text messages) — note: less secure than TOTP</li> |
| 56 | + <li>Hardware security keys (WebAuthn / U2F)</li> |
| 57 | + </ul> |
| 58 | + <div class="muted">Use the buttons below to enable per-account MFA or enforce organization-wide MFA.</div> |
| 59 | + <div class="actions"> |
| 60 | + <button class="btn" disabled>Enable MFA for my account</button> |
| 61 | + <button class="btn" disabled>Enforce MFA organization-wide</button> |
| 62 | + </div> |
| 63 | + </div> |
| 64 | + </div> |
| 65 | + </section> |
| 66 | + |
| 67 | + <hr /> |
| 68 | + |
| 69 | + <section aria-labelledby="sec-sessions"> |
| 70 | + <h2 id="sec-sessions">Session & Access Management</h2> |
| 71 | + <p class="muted">View and revoke active sessions, and configure session timeouts and device policies.</p> |
| 72 | + <div> |
| 73 | + <h3>Active sessions</h3> |
| 74 | + <p class="muted">Signed-in devices and recent sessions (last 30 days).</p> |
| 75 | + <table class="table"> |
| 76 | + <thead> |
| 77 | + <tr><th>Device</th><th>Location</th><th>IP</th><th>Started</th><th>Actions</th></tr> |
| 78 | + </thead> |
| 79 | + <tbody> |
| 80 | + <tr><td>Browser — Chrome on Linux</td><td>Unknown</td><td>192.0.2.1</td><td>Today, 10:12 UTC</td><td><button class="btn" disabled>Revoke</button></td></tr> |
| 81 | + <tr><td>Mobile — iOS</td><td>San Francisco, CA</td><td>198.51.100.23</td><td>Sep 1, 2025</td><td><button class="btn" disabled>Revoke</button></td></tr> |
| 82 | + </tbody> |
| 83 | + </table> |
| 84 | + <div class="muted">Tip: Revoke any sessions you don't recognize immediately.</div> |
| 85 | + </div> |
| 86 | + |
| 87 | + <div style="margin-top:1rem;"> |
| 88 | + <h3>Session timeout</h3> |
| 89 | + <p>Configure how long sessions remain valid before requiring re-authentication.</p> |
| 90 | + <form method="post" action="#"> |
| 91 | + <label> |
| 92 | + Inactivity timeout (minutes) |
| 93 | + <input type="number" name="timeout" value="60" min="5" max="43200" /> |
| 94 | + </label> |
| 95 | + <button class="btn" disabled>Save (not wired)</button> |
| 96 | + </form> |
| 97 | + </div> |
| 98 | + </section> |
| 99 | + |
| 100 | + <hr /> |
| 101 | + |
| 102 | + <section aria-labelledby="sec-api"> |
| 103 | + <h2 id="sec-api">API Keys & OAuth Applications</h2> |
| 104 | + <p class="muted">Manage API tokens and connected third-party applications.</p> |
| 105 | + <div> |
| 106 | + <h3>API tokens</h3> |
| 107 | + <p>API tokens grant programmatic access. Treat them like passwords — store them securely and rotate regularly.</p> |
| 108 | + <ul> |
| 109 | + <li>Create scoped tokens for automation and CI.</li> |
| 110 | + <li>Rotate tokens periodically and revoke unused tokens.</li> |
| 111 | + </ul> |
| 112 | + <div class="actions"><button class="btn" disabled>Create token</button></div> |
| 113 | + </div> |
| 114 | + |
| 115 | + <div style="margin-top:1rem;"> |
| 116 | + <h3>OAuth applications</h3> |
| 117 | + <p>Review and revoke third-party applications that have access to your account data.</p> |
| 118 | + <table class="table"> |
| 119 | + <thead><tr><th>Application</th><th>Scope</th><th>Connected</th><th>Actions</th></tr></thead> |
| 120 | + <tbody> |
| 121 | + <tr><td>Example App</td><td>read:user, repo</td><td>Aug 10, 2025</td><td><button class="btn" disabled>Revoke</button></td></tr> |
| 122 | + </tbody> |
| 123 | + </table> |
| 124 | + </div> |
| 125 | + </section> |
| 126 | + |
| 127 | + <hr /> |
| 128 | + |
| 129 | + <section aria-labelledby="sec-access"> |
| 130 | + <h2 id="sec-access">Access Control & Roles</h2> |
| 131 | + <p class="muted">Control who can view and modify resources in your organization.</p> |
| 132 | + <ul> |
| 133 | + <li>Role-based access control (RBAC): assign roles like Admin, Maintainer, and Viewer to users and groups.</li> |
| 134 | + <li>Least privilege: grant only the permissions necessary for a user to perform their job.</li> |
| 135 | + <li>Audit membership and role changes regularly.</li> |
| 136 | + </ul> |
| 137 | + </section> |
| 138 | + |
| 139 | + <hr /> |
| 140 | + |
| 141 | + <section aria-labelledby="sec-audit"> |
| 142 | + <h2 id="sec-audit">Audit Logs & Monitoring</h2> |
| 143 | + <p class="muted">Search and export audit logs for security reviews and incident investigations.</p> |
| 144 | + <p> |
| 145 | + Audit logs include sign-ins, failed login attempts, token creation/revocation, role changes, and configuration updates. |
| 146 | + Use filters by date, actor, or event type to find relevant entries. |
| 147 | + </p> |
| 148 | + <div class="actions"> |
| 149 | + <button class="btn" disabled>Download recent logs (CSV)</button> |
| 150 | + <button class="btn" disabled>Open audit viewer</button> |
| 151 | + </div> |
| 152 | + </section> |
| 153 | + |
| 154 | + <hr /> |
| 155 | + |
| 156 | + <section aria-labelledby="sec-encryption"> |
| 157 | + <h2 id="sec-encryption">Encryption & Data Handling</h2> |
| 158 | + <p class="muted">How we protect your data at rest and in transit.</p> |
| 159 | + <ul> |
| 160 | + <li>TLS 1.2+ is enforced for all network traffic.</li> |
| 161 | + <li>Data at rest is encrypted using AES-256 (where applicable).</li> |
| 162 | + <li>Secrets and API tokens are stored hashed or encrypted; access is limited by role.</li> |
| 163 | + </ul> |
| 164 | + </section> |
| 165 | + |
| 166 | + <hr /> |
| 167 | + |
| 168 | + <section aria-labelledby="sec-incident"> |
| 169 | + <h2 id="sec-incident">Incident Response & Reporting</h2> |
| 170 | + <p class="muted">Report suspicious activity and learn how incidents are handled.</p> |
| 171 | + <p> |
| 172 | + If you suspect your account has been compromised, immediately revoke active sessions and API tokens, change |
| 173 | + your password, and contact our security team at <a href="mailto:security@example.com">security@example.com</a>. |
| 174 | + </p> |
| 175 | + <div class="actions"> |
| 176 | + <button class="btn" disabled>Report an incident</button> |
| 177 | + </div> |
| 178 | + </section> |
| 179 | + |
| 180 | + <hr /> |
| 181 | + |
| 182 | + <section aria-labelledby="sec-actions"> |
| 183 | + <h2 id="sec-actions">Quick actions</h2> |
| 184 | + <ul> |
| 185 | + <li><button class="btn" disabled>Change password</button></li> |
| 186 | + <li><button class="btn" disabled>Enable MFA</button></li> |
| 187 | + <li><button class="btn" disabled>Revoke all sessions</button></li> |
| 188 | + <li><button class="btn" disabled>Rotate all API keys</button></li> |
| 189 | + </ul> |
| 190 | + </section> |
| 191 | + |
| 192 | + <p class="muted small">This page provides guidance and controls for security-related settings. Where controls are marked |
| 193 | + "not wired" or disabled, they serve as a UI blueprint and require backend wiring to take effect.</p> |
8 | 194 | </div> |
9 | 195 | </div> |
10 | 196 | {% endblock %} |
0 commit comments