forms: use checkboxes for scope selection in UserForm

Enable selection of multiple scopes in user/add and user/edit
for restricted users.
Replace quick form creation with an inline form definition in
add_user.html and edit_user.html

3 files changed, 83 insertions, 10 deletions

diff --git a/ogcp/forms/auth.py b/ogcp/forms/auth.py
index 526fdb0..ba7a545 100644
--- a/ogcp/forms/auth.py
+++ b/ogcp/forms/auth.py
@@ -7,7 +7,7 @@
 
 from wtforms import (
     Form, SubmitField, HiddenField, SelectField, BooleanField, IntegerField,
-    StringField, RadioField, PasswordField, SelectMultipleField
+    StringField, RadioField, PasswordField, SelectMultipleField, widgets
 )
 from wtforms.validators import InputRequired
 from flask_wtf import FlaskForm
@@ -47,6 +47,8 @@ class UserForm(FlaskForm):
     scopes = SelectMultipleField(
         label=_l('Allowed scopes'),
         description=_l('Leave this empty to give full permissions'),
+        option_widget=widgets.CheckboxInput(),
+        widget=widgets.ListWidget(prefix_label=False)
     )
     submit_btn = SubmitField(
         label=_l('Submit')
diff --git a/ogcp/templates/auth/add_user.html b/ogcp/templates/auth/add_user.html
index 91866fb..cc5ed09 100644
--- a/ogcp/templates/auth/add_user.html
+++ b/ogcp/templates/auth/add_user.html
@@ -9,9 +9,45 @@
 
 <h1 class="m-5">{{_('Add a user')}}</h1>
 
-{{ wtf.quick_form(form,
-                  action=url_for('user_add_post'),
-                  method='post',
-                  button_map={'submit_btn':'primary'}) }}
+<form action="{{ url_for('user_add_post') }}" method="post" class="form">
+    {{ form.hidden_tag() }}
+
+    <div class="form-group">
+        {{ form.username.label(class_='form-label') }}
+        {{ form.username(class_='form-control') }}
+    </div>
+
+    <div class="form-group">
+        {{ form.pwd.label(class_='form-label') }}
+        {{ form.pwd(class_='form-control') }}
+    </div>
+
+    <div class="form-group">
+        {{ form.pwd_confirm.label(class_='form-label') }}
+        {{ form.pwd_confirm(class_='form-control') }}
+    </div>
+
+    <div class="form-group form-check">
+        {{ form.admin(class_='form-check-input') }}
+        {{ form.admin.label(class_='form-check-label') }}
+    </div>
+
+    <div class="form-group">
+        {{ form.scopes.label(class_='form-label') }}
+        <div class="form-text text-muted">{{ form.scopes.description }}</div>
+        <div>
+            {% for value, label, checked in form.scopes.iter_choices() %}
+                <div class="form-check">
+                    <input class="form-check-input" type="checkbox" name="{{ form.scopes.name }}" value="{{ value }}" {% if checked %} checked {% endif %}>
+                    <label class="form-check-label">{{ label }}</label>
+                </div>
+            {% endfor %}
+        </div>
+    </div>
+
+    <div class="form-group">
+        {{ form.submit_btn(class_='btn btn-primary') }}
+    </div>
+</form>
 
 {% endblock %}
diff --git a/ogcp/templates/auth/edit_user.html b/ogcp/templates/auth/edit_user.html
index 51437c9..b9e748d 100644
--- a/ogcp/templates/auth/edit_user.html
+++ b/ogcp/templates/auth/edit_user.html
@@ -9,10 +9,45 @@
 
 <h1 class="m-5">{{_('Edit user {}').format(form.username.data)}}</h1>
 
-{{ wtf.quick_form(form,
-                  action=url_for('user_edit_post'),
-                  method='post',
-                  button_map={'submit_btn':'primary'},
-                  id='user-form') }}
+<form action="{{ url_for('user_edit_post') }}" method="post" class="form">
+    {{ form.hidden_tag() }}
+
+    <div class="form-group">
+        {{ form.username.label(class_='form-label') }}
+        {{ form.username(class_='form-control') }}
+    </div>
+
+    <div class="form-group">
+        {{ form.pwd.label(class_='form-label') }}
+        {{ form.pwd(class_='form-control') }}
+    </div>
+
+    <div class="form-group">
+        {{ form.pwd_confirm.label(class_='form-label') }}
+        {{ form.pwd_confirm(class_='form-control') }}
+    </div>
+
+    <div class="form-group form-check">
+        {{ form.admin(class_='form-check-input') }}
+        {{ form.admin.label(class_='form-check-label') }}
+    </div>
+
+    <div class="form-group">
+        {{ form.scopes.label(class_='form-label') }}
+        <div class="form-text text-muted">{{ form.scopes.description }}</div>
+        <div>
+            {% for value, label, checked in form.scopes.iter_choices() %}
+                <div class="form-check">
+                    <input class="form-check-input" type="checkbox" name="{{ form.scopes.name }}" value="{{ value }}" {% if checked %} checked {% endif %}>
+                    <label class="form-check-label">{{ label }}</label>
+                </div>
+            {% endfor %}
+        </div>
+    </div>
+
+    <div class="form-group">
+        {{ form.submit_btn(class_='btn btn-primary') }}
+    </div>
+</form>
 
 {% endblock %}