UX: added simple combo-box like gui element to local role assignment

form, added html5 "required" attributes to avoid errors on submit; added button "assign local role" to security tab
zopefoundation · Jun 21, 2018 · 49deec4 · 49deec4
1 parent 1738dfb
commit 49deec4
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 14 deletions.
diff --git a/src/OFS/dtml/access.dtml b/src/OFS/dtml/access.dtml
@@ -23,14 +23,21 @@
 		a permission in addition to selecting to acquire permissions.
 	</p>
 
-	<form action="manage_reportUserPermissions" method="get" class="form-inline mb-4">
-		<div class="form-group">
-			<label for="username" class="col-sm-2">Username:</label>
-			<div class="col-sm-10">
-				<input class="form-control" type="text" id="username" name="user" placeholder="Enter name of user ..." />
-				<input type="submit" class="btn btn-primary mr-sm-2"
+	<form action="manage_reportUserPermissions" method="get" class="mb-4">
+		<div class="form-group row form-inline">
+			<label for="username" class="col-sm-3 col-md-2">Username:</label>
+			<div class="col-sm-9 col-md-10">
+				<input class="form-control mr-3" type="text" id="username" name="user" 
+					required="required" placeholder="Enter name of user ..." />
+				<input type="submit" 
+					class="btn btn-primary mr-sm-2"
 					title="Show me the user permissions and roles in the context of the current object"
 					value="Show permissions" />
+				<input type="button"
+				  class="btn btn-primary mr-3"
+					title="Add a New Local Roles for the entered or any other User Name"
+					onclick="window.location.href='manage_listLocalRoles?username=' + $('#username').val()"
+					value="Assign Local Roles" />
 			</div>
 		</div>
 	</form>

diff --git a/src/OFS/dtml/listLocalRoles.dtml b/src/OFS/dtml/listLocalRoles.dtml
@@ -4,7 +4,7 @@
 
 <main class="container-fluid">
 
-	<dtml-if stat><div class="alert alert danger">&dtml-stat;</div></dtml-if>
+	<dtml-if stat><div class="alert alert-success">&dtml-stat;</div></dtml-if>
 
 	<p class="form-help">
 		Local roles allow you to give particular users extra roles in the context
@@ -23,7 +23,8 @@
 		<form action="manage_delLocalRoles" method="POST" class="zmi-localroles-delete">
 			<dtml-in get_local_roles>
 				<div class="form-check">
- 					<input type="checkbox" class="form-check-input" name="userids:list" value="&dtml-sequence-key;" id="&dtml-sequence-key;_&dtml-sequence-item;" />
+ 					<input type="checkbox" class="form-check-input" 
+ 						name="userids:list" value="&dtml-sequence-key;" id="&dtml-sequence-key;_&dtml-sequence-item;" />
 					<label for="&dtml-sequence-key;_&dtml-sequence-item;" class="form-check-label">
 	 					<a href="manage_editLocalRoles?userid=&dtml.url_quote-sequence-key;"><strong>&dtml-sequence-key;</strong></a> (<dtml-in
 							sequence-item>&dtml-sequence-item;<dtml-unless
@@ -32,7 +33,7 @@
 				</div>
 			</dtml-in>
 			<div class="zmi-controls mt-3 mb-4">
- 				<input class="btn btn-primary" type="submit" name="submit" value="Remove" />
+				<input class="btn btn-primary" type="submit" name="submit" value="Remove" />
 			</div>
 		</form>
 
@@ -47,25 +48,35 @@
 		<table class="table table-md">
 			<thead>
 				<tr>
-					<th class="pl-3">User</th>
-					<th>Roles</th>
+					<th scope="col" class="pl-3" style="width:50%">User</th>
+					<th scope="col" style="width:50%">Roles</th>
 				</tr>
 			</thead>
 			<tbody>
 				<tr>
 					<td class="pl-3">
 					<dtml-try>
-						<select name="userid" class="form-control" size="5">
+						<input id="userid" name="userid" class="form-control" 
+							placeholder="Enter User Name or Select from List"
+							value="<dtml-var "REQUEST.get('username','')">" 
+							required="required" />
+						<select name="userid_list" class="form-control bg-light" size="5"
+							onclick="$('#userid').val( $(this).val() ); $('#userid').focus();">
 							<dtml-in get_valid_userids>
 								<option value="&dtml-sequence-item;">&dtml-sequence-item;</option>
 							</dtml-in>
 						</select>
 						<dtml-except OverflowError>
-						<input name="userid" size=10>
+						<input id="userid" placeholder="Enter User Name" 
+							name="userid" class="form-control"
+							required="required" />
 					</dtml-try>
 				</td>
 				<td>
-					<select name="roles:list" class="form-control" size="5" multiple>
+					<select id="roles" name="roles:list" class="form-control pb-4" 
+						size="6" 
+						multiple="multiple"
+						required="required">
 						<dtml-in valid_roles><dtml-if
 							"_vars['sequence-item'] not in ('Anonymous', 'Shared', 'Authenticated')">
 							<option value="&dtml-sequence-item;">&dtml-sequence-item;</option>