Fix user management documentation: use checkboxes (not comma-separated), add screenshot, remove admin+operator example, add password reset section

containers/backupchecks/src/templates/documentation/users/users-and-roles.html

@@ -127,15 +127,15 @@
 <h3>How Multiple Roles Work</h3>
 
 <ol>
-  <li>A user can be assigned any combination of roles (e.g., "admin, operator")</li>
+  <li>A user can be assigned any combination of roles using checkboxes</li>
   <li>When logged in, the user selects their <strong>active role</strong> from a dropdown in the navigation bar</li>
   <li>The interface and available features adapt based on the selected active role</li>
   <li>Users can switch between their assigned roles at any time</li>
 </ol>
 
-<div class="doc-callout doc-callout-info">
+<div class="doc-callout doc-callout-tip">
-  <strong>💡 Example:</strong><br>
+  <strong>💡 When to Use Multiple Roles:</strong><br>
-  A user assigned both "admin" and "operator" roles can switch between system administration tasks (admin) and daily backup reviews (operator) without logging out.
+  Multiple roles are useful when a user occasionally needs different access levels. However, use sparingly - most users should have a single role that matches their primary responsibility.
 </div>
 
 <h2>Managing Users</h2>
@@ -146,12 +146,26 @@
 
 <ol>
   <li>Navigate to <strong>Settings</strong> → <strong>User Management</strong> (Admin only)</li>
-  <li>Click <strong>New User</strong></li>
+  <li>Scroll down to the <strong>Create new user</strong> section</li>
-  <li>Enter username and password</li>
+  <li>Enter a <strong>Username</strong> in the username field</li>
-  <li>Assign one or more roles (comma-separated: e.g., "admin,operator")</li>
+  <li>Enter a <strong>Password</strong> in the password field</li>
-  <li>Save the user</li>
+  <li>Select one or more roles by checking the appropriate checkboxes:
+    <ul>
+      <li>Admin</li>
+      <li>Operator</li>
+      <li>Reporter</li>
+      <li>Viewer</li>
+    </ul>
+  </li>
+  <li>Click the <strong>Create</strong> button</li>
 </ol>
 
+<figure>
+  <img src="{{ url_for('static', filename='images/documentation/user-management.png') }}"
+       alt="User Management Interface" />
+  <figcaption>Figure 1: User Management interface showing role checkboxes and user creation</figcaption>
+</figure>
+
 <div class="doc-callout doc-callout-info">
   <strong>📝 Future Feature:</strong><br>
   Email address configuration for users is planned for a future update. The database field exists but is not yet available in the user interface.
@@ -161,9 +175,10 @@
 
 <ol>
   <li>Navigate to <strong>Settings</strong> → <strong>User Management</strong></li>
-  <li>Click the edit icon next to the user</li>
+  <li>Find the user you want to edit in the list</li>
-  <li>Modify the roles field (comma-separated list)</li>
+  <li>Check or uncheck the role checkboxes to modify their assigned roles</li>
-  <li>Save changes</li>
+  <li>The <strong>Current:</strong> line below the checkboxes shows the currently assigned roles</li>
+  <li>Click the <strong>Save</strong> button to apply the changes</li>
 </ol>
 
 <div class="doc-callout doc-callout-warning">
@@ -171,6 +186,18 @@
   Role changes take effect immediately. If you remove a user's current active role, they will be switched to their first remaining role automatically.
 </div>
 
+<h3>Resetting User Passwords</h3>
+
+<ol>
+  <li>Navigate to <strong>Settings</strong> → <strong>User Management</strong></li>
+  <li>Find the user whose password you want to reset</li>
+  <li>Click the <strong>New password</strong> button</li>
+  <li>Enter the new password in the dialog</li>
+  <li>Confirm the password change</li>
+</ol>
+
+<p>The user can immediately log in with their new password.</p>
+
 <h3>Deleting Users</h3>
 
 <p>Administrators can delete user accounts via Settings → User Management.</p>