UI fixes:

* fix policyId search slot submitting form
* fix that sending a payload `0` as message payload did not work
* add form to authentication popup, submitting via enter
* open authentication popup when backend responds with error needing authentication

Author: thjaeckle

ui/modules/api.ts

@@ -307,9 +307,17 @@ export function setAuthHeader(forDevOps) {
   }
 }
 
+function shouldShowAuthDialog(dittoErr) {
+  return (dittoErr.status === 400 && dittoErr.error === "jwt:invalid") ||
+    dittoErr.status === 401;
+}
+
 function showDittoError(dittoErr, response) {
   if (dittoErr.status && dittoErr.message) {
     Utils.showError(dittoErr.description + `\n(${dittoErr.error})`, dittoErr.message, dittoErr.status);
+    if (shouldShowAuthDialog(dittoErr)) {
+      document.getElementById('authorize').click();
+    }
   } else {
     Utils.showError(JSON.stringify(dittoErr), 'Error', response.status);
   }
@@ -343,7 +351,7 @@ export async function callDittoREST(method,
         [authHeaderKey]: authHeaderValue,
         ...additionalHeaders,
       },
-      ...(body) && {body: JSON.stringify(body)},
+      ...(method !== 'GET' && method !== 'DELETE' && body !== undefined) && {body: JSON.stringify(body)},
     });
   } catch (err) {
     Utils.showError(err);

ui/modules/environments/authorization.html

@@ -17,7 +17,7 @@
                 Authorize
                 <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
             </div>
-            <div class="modal-body">
+            <form class="modal-body">
                 <div class="row">
                     <h5>Main authentication</h5>
                     <hr />
@@ -104,7 +104,7 @@ <h5>DevOps authentication</h5>
                     <button class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal"
                         id="authorizeSubmit">Authorize</button>
                 </div>
-            </div>
+            </form>
         </div>
     </div>
 </div>

ui/modules/environments/authorization.ts

@@ -13,10 +13,10 @@
 
 import * as API from '../api.js';
 import * as Utils from '../utils.js';
+import authorizationHTML from './authorization.html';
 /* eslint-disable prefer-const */
 /* eslint-disable require-jsdoc */
 import * as Environments from './environments.js';
-import authorizationHTML from './authorization.html';
 
 let dom = {
   bearer: null,
@@ -41,7 +41,7 @@ export function setForDevops(forDevops) {
 export function ready() {
   Utils.getAllElementsById(dom);
 
-  document.getElementById('authorize').onclick = () => {
+  document.getElementById('authorize').onclick = (e) => {
     let mainAuth = Environments.current().mainAuth;
     let devopsAuth = Environments.current().devopsAuth;
 
@@ -71,7 +71,8 @@ export function ready() {
     });
   };
 
-  document.getElementById('authorizeSubmit').onclick = () => {
+  document.getElementById('authorizeSubmit').onclick = (e) => {
+    e.preventDefault();
     const mainAuthSelector = document.querySelector('input[name="main-auth"]:checked') as HTMLInputElement;
     const mainAuth = mainAuthSelector ? mainAuthSelector.value : undefined;
     const devopsAuthSelector = document.querySelector('input[name="devops-auth"]:checked') as HTMLInputElement;

ui/modules/policies/policies.ts

@@ -11,18 +11,18 @@
  * SPDX-License-Identifier: EPL-2.0
  */
 
+import * as API from '../api.js';
+import * as Environments from '../environments/environments.js';
+import * as Things from '../things/things.js';
 /* eslint-disable comma-dangle */
 /* eslint-disable prefer-const */
 /* eslint-disable no-invalid-this */
 /* eslint-disable require-jsdoc */
 import * as Utils from '../utils.js';
-import * as API from '../api.js';
-import * as Things from '../things/things.js';
-import * as Environments from '../environments/environments.js';
-import {TabHandler} from '../utils/tabHandler.js';
-import policyHTML from './policies.html';
-import { Observable } from '../utils/observable.js';
 import { CrudOperation, CrudToolbar } from '../utils/crudToolbar.js';
+import { Observable } from '../utils/observable.js';
+import { TabHandler } from '../utils/tabHandler.js';
+import policyHTML from './policies.html';
 
 export interface Policy {
   policyId: string,
@@ -64,7 +64,8 @@ export function ready() {
 
   dom.tbodyRecentPolicies.addEventListener('click', onRecentPoliciesTableClicked); 
 
-  dom.buttonLoadPolicy.onclick = () => {
+  dom.buttonLoadPolicy.onclick = (e) => {
+    e.preventDefault();
     Utils.assert(dom.inputPolicyId.value, 'Please enter a policyId', dom.inputPolicyId);
     refreshPolicy(dom.inputPolicyId.value);
   };