Skip to content

Commit

Permalink
[#1592] provide "Bearer" authentication for devops resources controll…
Browse files Browse the repository at this point in the history 
…ed via UI

* added radiobutton groups so that "Authorize" modal clearly shows/states which authentication to use where
* reduced to a single "Authorize" button in modal
* simplified environment a bit

Signed-off-by: Thomas Jaeckle <thomas.jaeckle@beyonnex.io>
  • Loading branch information
@thjaeckle
thjaeckle authored and Stanchev Aleksandar committed Mar 13, 2023
1 parent 6269376 commit 0e0241f
Show file tree
Hide file tree
Showing 5 changed files with 148 additions and 90 deletions.
4 changes: 4 additions & 0 deletions ui/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,10 @@ body {
padding-top: 60px;
}

#authorizationModal label {
display: inline;
}

.toast-header {
color: #842029;
background-color: #f8d7da;
Expand Down
29 changes: 18 additions & 11 deletions ui/modules/api.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -277,18 +277,25 @@ let authHeaderValue;
* @param {boolean} forDevOps if true, the credentials for the dev ops api will be used.
*/
export function setAuthHeader(forDevOps) {
if (forDevOps && Environments.current().useBasicAuth) {
authHeaderKey = 'Authorization';
authHeaderValue = 'Basic ' + window.btoa(Environments.current().usernamePasswordDevOps);
} else if (Environments.current().useBasicAuth) {
authHeaderKey = 'Authorization';
authHeaderValue = 'Basic ' + window.btoa(Environments.current().usernamePassword);
} else if (Environments.current().useDittoPreAuthenticatedAuth) {
authHeaderKey = 'x-ditto-pre-authenticated';
authHeaderValue = Environments.current().dittoPreAuthenticatedUsername;
if (forDevOps) {
if (Environments.current().devopsAuth === 'basic') {
authHeaderKey = 'Authorization';
authHeaderValue = 'Basic ' + window.btoa(Environments.current().usernamePasswordDevOps);
} else if (Environments.current().devopsAuth === 'bearer') {
authHeaderKey = 'Authorization';
authHeaderValue ='Bearer ' + Environments.current().bearerDevOps;
}
} else {
authHeaderKey = 'Authorization';
authHeaderValue ='Bearer ' + Environments.current().bearer;
if (Environments.current().mainAuth === 'basic') {
authHeaderKey = 'Authorization';
authHeaderValue = 'Basic ' + window.btoa(Environments.current().usernamePassword);
} else if (Environments.current().mainAuth === 'pre') {
authHeaderKey = 'x-ditto-pre-authenticated';
authHeaderValue = Environments.current().dittoPreAuthenticatedUsername;
} else if (Environments.current().mainAuth === 'bearer') {
authHeaderKey = 'Authorization';
authHeaderValue ='Bearer ' + Environments.current().bearer;
}
}
}

Expand Down
126 changes: 71 additions & 55 deletions ui/modules/environments/authorization.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,78 +18,94 @@
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<h5>Basic Auth</h5>
<hr />
<div class="row">
<div class="col-md-5">
<label>Main User</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="userName"></input>
<h5>Basic Auth</h5>
<hr />
<div class="row">
<div class="col-md-5">
<input type="radio" id="main-userpass" name="main-auth" value="basic"></input>
<label for="main-userpass">Main User</label>
</div>
<div class="input-group input-group-sm mb-1">
<label class="input-group-text">Password</label>
<input type="password" class="form-control form-control-sm" id="password"></input>
<div class="col-md-7">
<div class="input-group input-group-sm mb-1">
<label for="userName" class="input-group-text">Username</label>
<input type="text" class="form-control form-control-sm" id="userName"></input>
</div>
<div class="input-group input-group-sm mb-1">
<label for="password" class="input-group-text">Password</label>
<input type="password" class="form-control form-control-sm" id="password"></input>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<label>DevOps User<br /><small>(for Connections, optional)</small></label>
</div>
<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>
<div class="row">
<div class="col-md-5">
<input type="radio" id="devops-userpass" name="devops-auth" value="basic"></input>
<label for="devops-userpass">DevOps User<br /><small>(for Connections, optional)</small></label>
</div>
<div class="input-group input-group-sm mb-1">
<label class="input-group-text">DevOps Password</label>
<input type="password" class="form-control form-control-sm" id="devOpsPassword"></input>
<div class="col-md-7">
<div class="input-group input-group-sm mb-1">
<label for="devOpsUserName" class="input-group-text">DevOps Username</label>
<input type="text" class="form-control form-control-sm" id="devOpsUserName"></input>
</div>
<div class="input-group input-group-sm mb-1">
<label for="devOpsPassword" class="input-group-text">DevOps Password</label>
<input type="password" class="form-control form-control-sm" id="devOpsPassword"></input>
</div>
</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="authorizeBasic">Authorize</button>
</div>
<h5>Bearer</h5>
<hr />
<div class="row">
<div class="col-md-5">
<label>Main User<br /><small>(JWT OAuth2.0 Bearer token)</small></label>
<div class="row mt-3">
<h5>Bearer</h5>
<hr />
<div class="row">
<div class="col-md-5">
<input type="radio" id="main-bearer" name="main-auth" value="bearer"></input>
<label for="main-bearer">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 for="bearer" class="input-group-text">Bearer</label>
<input type="password" class="form-control form-control-sm" id="bearer"></input>
</div>
</div>
</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 class="row">
<div class="col-md-5">
<input type="radio" id="devops-bearer" name="devops-auth" value="bearer"></input>
<label for="devops-bearer">DevOps User<br /><small>(JWT OAuth2.0 Bearer token, optional)</small></label>
</div>
<div class="col-md-7">
<div class="input-group input-group-sm mb-1">
<label for="bearerDevOps" class="input-group-text">DevOps Bearer</label>
<input type="password" class="form-control form-control-sm" id="bearerDevOps"></input>
</div>
<div class="input-group input-group-sm mb-1">
</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 class="row mt-3">
<h5>Ditto Pre Authenticated</h5>
<hr />
<div class="row">
<div class="col-md-5">
<input type="radio" id="main-pre" name="main-auth" value="pre"></input>
<label for="main-pre">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 for="dittoPreAuthenticatedUsername" class="input-group-text">prefix:suffix</label>
<input type="text" class="form-control form-control-sm" id="dittoPreAuthenticatedUsername"></input>
</div>
</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>
id="authorizeSubmit">Authorize</button>
</div>
</div>
</div>
Expand Down
56 changes: 42 additions & 14 deletions ui/modules/environments/authorization.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ let dom = {
bearer: null,
userName: null,
password: null,
bearerDevOps: null,
devOpsUserName: null,
devOpsPassword: null,
dittoPreAuthenticatedUsername: null,
Expand All @@ -30,24 +31,50 @@ let dom = {
export function ready() {
Utils.getAllElementsById(dom);

document.getElementById('authorizeBearer').onclick = () => {
Environments.current().useBasicAuth = false;
Environments.current().useDittoPreAuthenticatedAuth = false;
Environments.current().bearer = dom.bearer.value;
Environments.environmentsJsonChanged('authorization');
document.getElementById('authorize').onclick = () => {
let mainAuth = Environments.current().mainAuth;
let devopsAuth = Environments.current().devopsAuth;

if (!mainAuth) {
if (dom.dittoPreAuthenticatedUsername.value && dom.dittoPreAuthenticatedUsername.value.length > 0) {
mainAuth = 'pre';
} else if (dom.bearer.value && dom.bearer.value.length > 0) {
mainAuth = 'bearer';
} else if (dom.userName.value && dom.userName.value.length > 0) {
mainAuth = 'basic';
}
}
if (!devopsAuth) {
if (dom.bearerDevOps.value && dom.bearerDevOps.value.length > 0) {
devopsAuth = 'bearer';
} else if (dom.devOpsUserName.value && dom.devOpsUserName.value.length > 0) {
devopsAuth = 'basic';
}
}

const mainAuths = document.querySelectorAll('input[name="main-auth"]');
for(let i = 0; i < mainAuths.length; i++) {
mainAuths[i].checked = mainAuths[i].value === mainAuth;
}

const devopsAuths = document.querySelectorAll('input[name="devops-auth"]');
for(let i = 0; i < devopsAuths.length; i++) {
devopsAuths[i].checked = devopsAuths[i].value === devopsAuth;
}

};

document.getElementById('authorizeBasic').onclick = () => {
Environments.current().useBasicAuth = true;
Environments.current().useDittoPreAuthenticatedAuth = false;
document.getElementById('authorizeSubmit').onclick = () => {
const mainAuthSelector = document.querySelector('input[name="main-auth"]:checked');
const mainAuth = mainAuthSelector ? mainAuthSelector.value : undefined;
const devopsAuthSelector = document.querySelector('input[name="devops-auth"]:checked');
const devopsAuth = devopsAuthSelector ? devopsAuthSelector.value : undefined;
Environments.current().mainAuth = mainAuth;
Environments.current().devopsAuth = devopsAuth;
Environments.current().usernamePassword = dom.userName.value + ':' + dom.password.value;
Environments.current().usernamePasswordDevOps = dom.devOpsUserName.value + ':' + dom.devOpsPassword.value;
Environments.environmentsJsonChanged('authorization');
};

document.getElementById('authorizePreAuthenticated').onclick = () => {
Environments.current().useBasicAuth = false;
Environments.current().useDittoPreAuthenticatedAuth = true;
Environments.current().bearer = dom.bearer.value;
Environments.current().bearerDevOps = dom.bearerDevOps.value;
Environments.current().dittoPreAuthenticatedUsername = dom.dittoPreAuthenticatedUsername.value;
Environments.environmentsJsonChanged();
};
Expand All @@ -63,6 +90,7 @@ 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.bearerDevOps.value = Environments.current().bearerDevOps ? Environments.current().bearerDevOps : '';
dom.dittoPreAuthenticatedUsername.value = Environments.current().dittoPreAuthenticatedUsername ?
Environments.current().dittoPreAuthenticatedUsername :
'';
Expand Down
23 changes: 13 additions & 10 deletions ui/templates/environmentTemplates.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,33 @@
"api_uri": "http://localhost:8080",
"ditto_version": 3,
"bearer": null,
"bearerDevOps": null,
"defaultUsernamePassword": "ditto:ditto",
"defaultDittoPreAuthenticatedUsername": null,
"defaultUsernamePasswordDevOps": "devops:foobar",
"useBasicAuth": true,
"useDittoPreAuthenticatedAuth": false,
"defaultDittoPreAuthenticatedUsername": null
"mainAuth": "basic",
"devopsAuth": "basic"
},
"local_ditto_ide": {
"api_uri": "http://localhost:8080",
"ditto_version": 3,
"bearer": null,
"bearerDevOps": null,
"defaultUsernamePassword": null,
"defaultUsernamePasswordDevOps": null,
"useBasicAuth": false,
"useDittoPreAuthenticatedAuth": true,
"defaultDittoPreAuthenticatedUsername": "pre:ditto"
"defaultDittoPreAuthenticatedUsername": "pre:ditto",
"defaultUsernamePasswordDevOps": "devops:foobar",
"mainAuth": "pre",
"devopsAuth": "basic"
},
"ditto_sandbox": {
"api_uri": "https://ditto.eclipseprojects.io",
"ditto_version": 3,
"bearer": null,
"bearerDevOps": null,
"defaultUsernamePassword": "ditto:ditto",
"defaultDittoPreAuthenticatedUsername": null,
"defaultUsernamePasswordDevOps": null,
"useBasicAuth": true,
"useDittoPreAuthenticatedAuth": false,
"defaultDittoPreAuthenticatedUsername": null
"mainAuth": "basic",
"devopsAuth": null
}
}

0 comments on commit 0e0241f

Please sign in to comment.