added "Ditto Pre Authenticated" to authorization modal

* made modal a little wider * harmonized layout Signed-off-by: Thomas Jaeckle <thomas.jaeckle@bosch.io>
eclipse-ditto · Aug 1, 2022 · 66d0b5a · 66d0b5a
1 parent 6cba90a
commit 66d0b5a
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 8 deletions.
diff --git a/ui/modules/environments/authorization.html b/ui/modules/environments/authorization.html
@@ -11,7 +11,7 @@
   ~ SPDX-License-Identifier: EPL-2.0
   -->
 <div id="authorizationModal" class="modal fade" tabindex="-1">
-    <div class="modal-dialog">
+    <div class="modal-dialog modal-lg">
         <div class="modal-content">
             <div class="modal-header">
                 Authorize
@@ -21,10 +21,10 @@
                 <h5>Basic Auth</h5>
                 <hr />
                 <div class="row">
-                    <div class="col-md-4">
+                    <div class="col-md-5">
                         <label>Main User</label>
                     </div>
-                    <div class="col-md-8">
+                    <div class="col-md-7">
                         <div class="input-group input-group-sm mb-1">
                             <label class="input-group-text">Username</label>
                             <input type="text" class="form-control form-control-sm" id="userName"></input>
@@ -36,10 +36,10 @@ <h5>Basic Auth</h5>
                     </div>
                 </div>
                 <div class="row">
-                    <div class="col-md-4">
+                    <div class="col-md-5">
                         <label>DevOps User<br /><small>(for Connections, optional)</small></label>
                     </div>
-                    <div class="col-md-8">
+                    <div class="col-md-7">
                         <div class="input-group input-group-sm mb-1">
                             <label class="input-group-text">DevOps Username</label>
                             <input type="text" class="form-control form-control-sm" id="devOpsUserName"></input>
@@ -56,14 +56,41 @@ <h5>Basic Auth</h5>
                 </div>
                 <h5>Bearer</h5>
                 <hr />
-                <div class="input-group input-group-sm mb-1">
-                    <label class="input-group-text">Value</label>
-                    <input type="password" class="form-control form-control-sm" id="bearer"></input>
+                <div class="row">
+                    <div class="col-md-5">
+                        <label>Main User<br /><small>(JWT OAuth2.0 Bearer token)</small></label>
+                    </div>
+                    <div class="col-md-7">
+                        <div class="input-group input-group-sm mb-1">
+                            <label class="input-group-text">Bearer</label>
+                            <input type="password" class="form-control form-control-sm" id="bearer"></input>
+                        </div>
+                    </div>
                 </div>
                 <div class="input-group input-group-sm" style="flex-direction: row-reverse;">
                     <button class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal"
                         id="authorizeBearer">Authorize</button>
                 </div>
+                <h5>Ditto Pre Authenticated</h5>
+                <hr />
+                <div class="row">
+                    <div class="col-md-5">
+                        <label>Main User<br />
+                            <small>(via HTTP header 'x-ditto-pre-authenticated', must take the form
+                                <code>prefix:suffix</code>)</small>
+                        </label>
+                    </div>
+                    <div class="col-md-7">
+                        <div class="input-group input-group-sm mb-1">
+                            <label class="input-group-text">Username</label>
+                            <input type="text" class="form-control form-control-sm" id="dittoPreAuthenticatedUsername"></input>
+                        </div>
+                    </div>
+                </div>
+                <div class="input-group input-group-sm" style="flex-direction: row-reverse;">
+                    <button class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal"
+                        id="authorizePreAuthenticated">Authorize</button>
+                </div>
             </div>
         </div>
     </div>

diff --git a/ui/modules/environments/authorization.js b/ui/modules/environments/authorization.js
@@ -23,6 +23,7 @@ let dom = {
   password: null,
   devOpsUserName: null,
   devOpsPassword: null,
+  dittoPreAuthenticatedUsername: null,
   collapseConnections: null,
 };
 
@@ -31,16 +32,25 @@ export function ready() {
 
   document.getElementById('authorizeBearer').onclick = () => {
     Environments.current().useBasicAuth = false;
+    Environments.current().useDittoPreAuthenticatedAuth = false;
     Environments.current().bearer = dom.bearer.value;
     Environments.environmentsJsonChanged();
   };
 
   document.getElementById('authorizeBasic').onclick = () => {
     Environments.current().useBasicAuth = true;
+    Environments.current().useDittoPreAuthenticatedAuth = false;
     Environments.current().usernamePassword = dom.userName.value + ':' + dom.password.value;
     Environments.current().usernamePasswordDevOps = dom.devOpsUserName.value + ':' + dom.devOpsPassword.value;
     Environments.environmentsJsonChanged();
   };
+
+  document.getElementById('authorizePreAuthenticated').onclick = () => {
+    Environments.current().useBasicAuth = false;
+    Environments.current().useDittoPreAuthenticatedAuth = true;
+    Environments.current().dittoPreAuthenticatedUsername = dom.dittoPreAuthenticatedUsername.value;
+    Environments.environmentsJsonChanged();
+  };
 };
 
 export function onEnvironmentChanged() {
@@ -53,5 +63,8 @@ export function onEnvironmentChanged() {
   dom.devOpsUserName.value = usernamePassword.split(':')[0];
   dom.devOpsPassword.value = usernamePassword.split(':')[1];
   dom.bearer.value = Environments.current().bearer ? Environments.current().bearer : '';
+  dom.dittoPreAuthenticatedUsername.value = Environments.current().dittoPreAuthenticatedUsername ?
+                                            Environments.current().dittoPreAuthenticatedUsername :
+                                            '';
   API.setAuthHeader(dom.collapseConnections.classList.contains('show'));
 };