From e674fb613950c3fdd97fcb28364907f7a9d47ab6 Mon Sep 17 00:00:00 2001
From: Graham Christensen <graham@grahamc.com>
Date: Thu, 1 Apr 2021 03:12:47 +0000
Subject: [PATCH] edit user: make the role changer checkboxes

Also, it makes the role changer a bit of a dangerzone visually for
admins.
---
 src/root/user.tt | 51 +++++++++++++++++++++++++++++-------------------
 1 file changed, 31 insertions(+), 20 deletions(-)

diff --git a/src/root/user.tt b/src/root/user.tt
index 3535bf265..76f858504 100644
--- a/src/root/user.tt
+++ b/src/root/user.tt
@@ -2,17 +2,23 @@
 [% PROCESS common.tt %]
 
 [% BLOCK roleoption %]
-  <option value="[% role %]"
-    [% checked = false %]
-    [% FOREACH r IN user.userroles %]
-      [% checked = r.role == role %]
-      [% BREAK IF checked %]
-    [% END %]
+  [% checked = false %]
+  [% FOREACH r IN user.userroles %]
+    [% checked = r.role == role %]
+    [% BREAK IF checked %]
+  [% END %]
+  <input
+    type="checkbox"
+    name="roles"
     [% IF checked %]
-      selected="selected"
+      checked="checked"
     [% END %]
-    >[% role %]</option>
-[% END %]
+    [% IF !mutable %]
+      disabled="disabled"
+    [% END %]
+    [% HTML.attributes(id => "role-${role}", value => role) %] />
+  <label [% HTML.attributes(for => "role-${role}") %]> [% role %]</label><br />
+  [% END %]
 
 <form>
 
@@ -70,16 +76,22 @@
   </div>
 
   [% IF !create || c.check_user_roles('admin') %]
-    <div class="form-group row">
-      <label class="col-sm-3">Roles</label>
-      <div class="col-sm-9">
-        <select multiple="multiple" name="roles" class="form-control" [% IF !c.check_user_roles('admin') %]disabled="disabled"[% END %]>
-          [% INCLUDE roleoption role="admin" %]
-          [% INCLUDE roleoption role="create-projects" %]
-          [% INCLUDE roleoption role="restart-jobs" %]
-          [% INCLUDE roleoption role="bump-to-front" %]
-          [% INCLUDE roleoption role="cancel-build" %]
-        </select>
+    [% mutable = c.check_user_roles('admin') %]
+    <div class="form-group row card [% mutable ? "border-danger" : "border-light" %]">
+      <div class="card-header">User Roles</div>
+      <div class="card-body [% mutable ? "text-danger" : "" %]">
+        [% IF mutable %]
+          <h5 class="card-title">Take care, you're allowed to change [% HTML.escape(user.fullname || user.emailaddress || "this user") %]'s roles.</h5>
+        [% ELSE %]
+          <h5 class="card-title">[% HTML.escape(user.fullname || user.emailaddress || "this user") %]'s roles.</h5>
+        [% END %]
+        <p class="card-text">
+          [% INCLUDE roleoption mutable=mutable role="admin" %]
+          [% INCLUDE roleoption mutable=mutable role="create-projects" %]
+          [% INCLUDE roleoption mutable=mutable role="restart-jobs" %]
+          [% INCLUDE roleoption mutable=mutable role="bump-to-front" %]
+          [% INCLUDE roleoption mutable=mutable role="cancel-build" %]
+        </p>
       </div>
     </div>
   [% END %]
@@ -115,7 +127,6 @@
       Delete this user
     </button>
   [% END %]
-
 </form>
 
 <script>