improve capability handling

CHANGELOG.md

@@ -18,6 +18,14 @@
 
 - Trusted web applications can skip the consent screen
 
+### Enhancements
+
+- Reworked and improved several parts of the web interface:
+  - Consent Screen: On default a more compressed view is shown, where sections can be expanded if needed.
+  - Capabilities:
+    - Simplified the checking of capabilities
+    - Read/Write capabilities are now not split but can be toggled
+ 
 ### Dependencies
 
 - Bump github.com/valyala/fasthttp from 1.37.0 to 1.38.0

internal/server/web/partials/capabilities-part.mustache

@@ -3,11 +3,6 @@
         {{> capability-single-part}}
     {{/ReadWriteCapability}}
     <ul class="list-group">
-        {{#ReadOnlyCapability}}
-            <li class="list-group-item capability">
-                {{> capability-single-part}}
-            </li>
-        {{/ReadOnlyCapability}}
         {{#Children}}
             {{> capabilities-part}}
         {{/Children}}

internal/server/web/partials/capability-single-part.mustache

@@ -6,21 +6,29 @@
         <div class="d-flex justify-content-between">
             <h6>
                 {{Name}}
-                <span class="pl-1" style="font-size: 1rem;">
-                {{^IsReadOnly}}
-                    <i class="fas fa-pencil-alt" data-toggle="tooltip" data-placement="top" title=""
-                       data-original-title="Allows full access."></i>
-                {{/IsReadOnly}}
-                    {{#IsReadOnly}}
-                        <i class="fas fa-book-open" data-toggle="tooltip" data-placement="top" title=""
-                           data-original-title="Allows only read access."></i>
-                    {{/IsReadOnly}}
+                <span class="pl-1" style="font-size: 1rem;" data-toggle="tooltip" data-placement="top" title=""
+                      data-original-title="">
+                    {{#ReadOnlyCapability}}
+                        <input id="cp-{{Name}}-mode" class="rw-cap-mode" type="checkbox" checked data-size="sm"
+                               data-toggle="toggle"
+                               data-onstyle="dark" data-offstyle="dark" data-style="round"
+                               data-on='<i class="fas fa-pencil-alt"></i>'
+                               data-off='<i class="fas fa-book-open"></i>'>
+                    {{/ReadOnlyCapability}}
                 </span>
             </h6>
-            <i class="fas fa-exclamation-circle {{ColorClass}}" data-toggle="tooltip"
+            <i class="fas fa-exclamation-circle {{ColorClass}} rw-cap-write" data-toggle="tooltip"
                data-placement="right" title="" data-original-title="{{CapabilityLevel}}"></i>
+            {{#ReadOnlyCapability}}
+                <i class="fas fa-exclamation-circle {{ColorClass}} rw-cap-read d-none" data-toggle="tooltip"
+                   data-placement="right" title="" data-original-title="{{CapabilityLevel}}"></i>
+            {{/ReadOnlyCapability}}
         </div>
-        <small>{{Description}}</small>
+        <small class="rw-cap-write">{{Description}}</small>
+        {{#ReadOnlyCapability}}
+            <small class="rw-cap-read d-none">{{Description}}</small>
+        {{/ReadOnlyCapability}}
+
         {{#IsCreateMT}}
             <small><br>A created mytoken can have the following
                 capabilities:</small>

internal/server/web/partials/restrictions.mustache

@@ -3,6 +3,7 @@
     <div>
     <span id="restr-editor-wrap" class="{{#collapse}} d-none{{/collapse}}">
         <input id="restr-editor-mode" type="checkbox" checked data-size="sm" data-toggle="toggle"
+               data-style="restr-editor"
                data-onstyle="success" data-offstyle="info" data-on="Easy Editor" data-off="JSON Editor"></span>
         {{#collapse}}
             <button class="btn btn-info my-expand ml-2" type="button" data-toggle="collapse" data-target="#restr-body"

internal/server/web/partials/sub-capabilities-part.mustache

@@ -3,11 +3,6 @@
         {{> sub-capability-single-part}}
     {{/ReadWriteCapability}}
     <ul class="list-group">
-        {{#ReadOnlyCapability}}
-            <li class="list-group-item capability">
-                {{> sub-capability-single-part}}
-            </li>
-        {{/ReadOnlyCapability}}
         {{#Children}}
             {{> sub-capabilities-part}}
         {{/Children}}

internal/server/web/partials/sub-capability-single-part.mustache

@@ -6,20 +6,27 @@
         <div class="d-flex justify-content-between">
             <h6>
                 {{Name}}
-                <span class="pl-1" style="font-size: 1rem;">
-                {{^IsReadOnly}}
-                    <i class="fas fa-pencil-alt" data-toggle="tooltip" data-placement="top" title=""
-                       data-original-title="Allows full access."></i>
-                {{/IsReadOnly}}
-                    {{#IsReadOnly}}
-                        <i class="fas fa-book-open" data-toggle="tooltip" data-placement="top" title=""
-                           data-original-title="Allows only read access. Click to allow full access."></i>
-                    {{/IsReadOnly}}
+                <span class="pl-1" style="font-size: 1rem;" data-toggle="tooltip" data-placement="top" title=""
+                      data-original-title="">
+                    {{#ReadOnlyCapability}}
+                        <input id="sub-cp-{{Name}}-mode" class="rw-cap-mode" type="checkbox" checked data-size="sm"
+                               data-toggle="toggle"
+                               data-onstyle="light" data-offstyle="light" data-style="round"
+                               data-on='<i class="fas fa-pencil-alt"></i>'
+                               data-off='<i class="fas fa-book-open"></i>'>
+                    {{/ReadOnlyCapability}}
                 </span>
             </h6>
-            <i class="fas fa-exclamation-circle {{ColorClass}}" data-toggle="tooltip"
+            <i class="fas fa-exclamation-circle {{ColorClass}} rw-cap-write" data-toggle="tooltip"
                data-placement="right" title="" data-original-title="{{CapabilityLevel}}"></i>
+            {{#ReadOnlyCapability}}
+                <i class="fas fa-exclamation-circle {{ColorClass}} rw-cap-read d-none" data-toggle="tooltip"
+                   data-placement="right" title="" data-original-title="{{CapabilityLevel}}"></i>
+            {{/ReadOnlyCapability}}
         </div>
-        <small>{{Description}}</small>
+        <small class="rw-cap-write">{{Description}}</small>
+        {{#ReadOnlyCapability}}
+            <small class="rw-cap-read d-none">{{Description}}</small>
+        {{/ReadOnlyCapability}}
     </div>
 </div>

internal/server/web/static/css/mytoken.css

@@ -42,4 +42,12 @@ ul.list-group li.list-group-item {
     border-top: 1px solid rgba(0, 0, 0, .15);
     border-left: 1px solid rgba(0, 0, 0, .15);
     border-right: 1px solid rgba(0, 0, 0, .15);
+}
+
+.toggle, .toggle-on, .toggle-off {
+    border-radius: 0.3rem;
+}
+
+.toggle.round, .toggle-on.round, .toggle-off.round {
+    border-radius: 20rem;
 }
\ No newline at end of file

internal/server/web/static/css/restr-gui.css

-.table-item{
+.table-item {
     padding: 0.375rem 0.75rem;
 }
-.toggle{
-    width: 110px!important;
+
+.toggle.restr-editor, .toggle-on.restr-editor, .toggle-off.restr-editor {
+    width: 110px !important;
 }
-.btn-add-list-item{
+
+.btn-add-list-item {
     padding: 0;
 }
-.btn-delete-list-item{
+
+.btn-delete-list-item {
     padding: 0;
 }

internal/server/web/static/js/capabilities.js

@@ -9,6 +9,9 @@ const $capSummarySettings = $('#cap-summary-settings');
 const $capSummaryHowManyGreen = $('#cap-summary-count-green');
 const $capSummaryHowManyYellow = $('#cap-summary-count-yellow');
 const $capSummaryHowManyRed = $('#cap-summary-count-red');
+const $capRWModes = $('.rw-cap-mode');
+
+const rPrefix = "read@";
 
 $capabilityChecks.click(function () {
     checkThisCapability.call(this);
@@ -51,22 +54,28 @@ $(document).ready(function () {
         $('#subtokenCapabilities').hideB();
     }
     updateCapSummary();
+    $capRWModes.trigger('update-change');
 })
 
 function getCheckedCapabilities() {
-    return _getCheckedCapabilities($capabilityChecks);
+    return _getCheckedCapabilities($capabilityChecks, 'cp');
 }
 
 function getCheckedSubtokenCapabilities() {
     if (!$capabilityCreateMytoken.prop("checked")) {
         return [];
     }
-    return _getCheckedCapabilities($subtokenCapabilityChecks);
+    return _getCheckedCapabilities($subtokenCapabilityChecks, 'sub-cp');
 }
 
-function _getCheckedCapabilities($checks) {
+function _getCheckedCapabilities($checks, idPrefix) {
     let caps = $checks.filter(':checked').map(function (_, el) {
-        return $(el).val();
+        let v = $(el).val();
+        let $rw = $('#' + escapeSelector(idPrefix + '-' + rPrefix + v + '-mode'));
+        if ($rw.length && !$rw.prop('checked')) {
+            v = rPrefix + v;
+        }
+        return v;
     }).get();
     caps = caps.filter(filterCaps);
     return caps;
@@ -86,7 +95,6 @@ function filterCaps(c, i, caps) {
 }
 
 function isChildCapability(a, b) {
-    const rPrefix = "read@";
     let aReadOnly = a.startsWith(rPrefix);
     let bReadOnly = b.startsWith(rPrefix);
     if (aReadOnly) {
@@ -149,7 +157,7 @@ function updateCapSummary() {
             continue;
         }
         let name = $(c).val();
-        let $icon = $($(c).closest('li.list-group-item').find('i.fa-exclamation-circle')[0]);
+        let $icon = $($(c).closest('li.list-group-item').find('i.fa-exclamation-circle').not('.d-none')[0]);
         if ($icon.hasClass('text-success')) {
             counter['green'][name] = 1;
         }
@@ -199,4 +207,31 @@ function updateCapSummary() {
     } else {
         $capSummarySettings.attr('data-original-title', "This mytoken cannot be used to change settings.");
     }
-}
+}
\ No newline at end of file
+
+$capRWModes.on('update-change', function () {
+    let write = $(this).prop('checked');
+    if (write) {
+        $(this).closest('span').attr('data-original-title', `Allows full access. Click to only allow read access.`);
+        $(this).closest('div.flex-fill').find('.rw-cap-read').hideB();
+        $(this).closest('div.flex-fill').find('.rw-cap-write').showB();
+    } else {
+        $(this).closest('span').attr('data-original-title', `Allows only read access. Click to allow full access.`);
+        $(this).closest('div.flex-fill').find('.rw-cap-write').hideB();
+        $(this).closest('div.flex-fill').find('.rw-cap-read').showB();
+    }
+});
+
+$capRWModes.change(function () {
+    let write = $(this).prop('checked');
+    $(this).trigger('update-change');
+    let $modes = $(this).closest('li.list-group-item').find('.rw-cap-mode');
+    $modes.bootstrapToggle(write ? 'on' : 'off', true);
+    $modes.trigger('update-change');
+    if (!write) {
+        let $p = $(this).parents('li.list-group-item').children('div').find('.rw-cap-mode');
+        $p.bootstrapToggle('off', true);
+        $p.trigger('update-change');
+    }
+    updateCapSummary();
+});
\ No newline at end of file

internal/server/web/static/js/consent.js

@@ -10,10 +10,20 @@ $(function (){
     }
     updateRotationIcon();
     checkedCapabilities.forEach(function (value) {
-        $('#cp-' + escapeSelector(value)).prop("checked", true)
+        let rCap = value.startsWith(rPrefix);
+        if (rCap) {
+            value = value.substring(rPrefix.length);
+        }
+        $('#cp-' + escapeSelector(value)).prop("checked", true);
+        $('#cp-' + escapeSelector(rPrefix + value) + '-mode').bootstrapToggle(rCap ? 'off' : 'on');
     })
     checkedSubtokenCapabilities.forEach(function (value) {
-        $('#sub-cp-' + escapeSelector(value)).prop("checked", true)
+        let rCap = value.startsWith(rPrefix);
+        if (rCap) {
+            value = value.substring(rPrefix.length);
+        }
+        $('#sub-cp-' + escapeSelector(value)).prop("checked", true);
+        $('#sub-cp-' + escapeSelector(rPrefix + value) + '-mode').bootstrapToggle(rCap ? 'off' : 'on');
     })
     chainFunctions(
         discovery,

internal/server/web/static/js/create-mt.js

@@ -182,26 +182,22 @@ function polling(code, interval) {
                         return;
                     case "access_denied":
                         message = "You denied the authorization request.";
-                        window.clearInterval(intervalID);
                         break;
                     case "expired_token":
                         message = "Code expired. You might want to restart the flow.";
-                        window.clearInterval(intervalID);
                         break;
                     case "invalid_grant":
                     case "invalid_token":
                         message = "Code already used.";
-                        window.clearInterval(intervalID);
                         break;
                     case "undefined":
                         message = "No response from server";
-                        window.clearInterval(intervalID);
                         break;
                     default:
                         message = getErrorMessage(errRes);
-                        window.clearInterval(intervalID);
                         break;
                 }
+                window.clearInterval(intervalID);
                 mtShowError(message)
             }
         });