Skip to content

Commit

Permalink
Confirmations and basic validation when editing keys
Browse files Browse the repository at this point in the history 
- Used roughly existing pattern for confirmations and validation when submitting an action
- Refactored validation where it made sense - though more effort needs to be done here across all the pages
- Added README section to help devs work on the UI
  • Loading branch information
@alex-yau-ttd
alex-yau-ttd committed Oct 16, 2023
1 parent 3e0db7b commit 09d213e
Show file tree
Hide file tree
Showing 5 changed files with 96 additions and 16 deletions.
3 changes: 3 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ When running locally, GitHub OAuth 2.0 is disabled and users are logged in as *t

If you want to test with GitHub OAuth 2.0, you will need to create an OAuth application on GitHub with `http://localhost:8089/oauth2-callback` as the callback URL, then generate a client ID/secret. Once generated, set the `is_auth_disabled` flag to `false`, and copy the client ID/secret into `github_client_id` and `github_client_secret`.

### Working on the UI
Per the above setup steps, the UI runs on `http://localhost:8089/`. To see your local UI changes reflected in the browser, you will need to hard reload (`Crtl+Shift+R`) while on the specific web page you have changed.

## V2 API

The v2 API is based on individual route provider classes. Each class should provide exactly one endpoint and must implement IRouteProvider or IBlockingRouteProvider.
Expand Down
32 changes: 27 additions & 5 deletions webroot/adm/administrators.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ <h3>Operations</h3>

<ul>
<li class="ro-adm" style="display: none"><a href="#" id="doMeta">Get Metadata</a></li>
<li class="ro-adm" style="display: none"><a href="#" id="doList">List Admin User</a></li>
<li class="ro-adm" style="display: none"><a href="#" id="doList">List Admin Users</a></li>
<li class="ro-adm" style="display: none"><a href="#" id="doReveal">Reveal Admin User</a></li>
<li class="ro-adm" style="display: none"><a href="#" id="doAdd">Add Admin User</a></li>
<li class="ro-adm" style="display: none"><a href="#" id="doDisable">Disable Admin User</a></li>
Expand Down Expand Up @@ -110,18 +110,40 @@ <h3>Output</h3>
});

$('#doDisable').on('click', function () {
var email = encodeURIComponent($('#email').val());
var url = '/api/admin/disable?name=' + email;
var email = $('#email').val();
var encodedEmail = encodeURIComponent(email);
var url = '/api/admin/disable?name=' + encodedEmail;

if (!validateEmail(encodedEmail)) return;

const confirmationMessage = `Disabling this admin key will prevent the associated account from being to interact with the admin service.\n\nAre you sure you want to disable ${email}?`;

if (!confirm(confirmationMessage)) return;

doApiCall('POST', url, '#standardOutput', '#errorOutput');
});

$('#doEnable').on('click', function () {
var email = encodeURIComponent($('#email').val());
var url = '/api/admin/enable?name=' + email;
var email = $('#email').val();
var encodedEmail = encodeURIComponent(email);
var url = '/api/admin/enable?name=' + encodedEmail;

if (!validateEmail(encodedEmail)) return;

const confirmationMessage = `Enabling this admin key will allow the user to interact with the admin service. This should only be enabled for current UID2 developers and service accounts.\n\nAre you sure you want to enable ${email}?`;

if (!confirm(confirmationMessage)) return;

doApiCall('POST', url, '#standardOutput', '#errorOutput');
});

function validateEmail(email) {
if (!email) {
$('#errorOutput').text("required parameter: email")
return false;
}
return true;
}
});
</script>

Expand Down
28 changes: 24 additions & 4 deletions webroot/adm/client-key.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,15 +111,27 @@ <h3>Output</h3>
});

$('#doDisable').on('click', function () {
var clientName = encodeURIComponent($('#clientName').val());
var url = '/api/client/disable?name=' + clientName;
const clientName = $('#clientName').val();
var encodedClientName = encodeURIComponent(clientName);
var url = '/api/client/disable?name=' + encodedClientName;

if (!validateClientName(encodedClientName)) return;

const confirmationMessage = `Disabling this client key will prevent this key from generating UID2s in a server-side integration.\n\nBefore proceeding, ensure there is no valid traffic, and confirm that the participant has provided consent.\n\nAre you sure you want to disable ${clientName}?`;
if (!confirm(confirmationMessage)) return;

doApiCall('POST', url, '#standardOutput', '#errorOutput');
});

$('#doEnable').on('click', function () {
var clientName = encodeURIComponent($('#clientName').val());
var url = '/api/client/enable?name=' + clientName;
const clientName = $('#clientName').val();
var encodedClientName = encodeURIComponent(clientName);
var url = '/api/client/enable?name=' + encodedClientName;

if (!validateClientName(clientName)) return;

const confirmationMessage = `Enabling this client key will allow this key to generate UID2s in a server-side integration.\n\nAre you sure you want to enable ${clientName}?`;
if (!confirm(confirmationMessage)) return;

doApiCall('POST', url, '#standardOutput', '#errorOutput');
});
Expand All @@ -134,6 +146,14 @@ <h3>Output</h3>
var url = '/api/client/rename?oldName=' + oldClientName + '&newName=' + newClientName;
doApiCall('POST', url, '#standardOutput', '#errorOutput');
});

function validateClientName(clientName) {
if (!clientName) {
$('#errorOutput').text("required parameter: name")
return false;
}
return true;
}
});
</script>

Expand Down
21 changes: 18 additions & 3 deletions webroot/adm/client-side-keypairs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ <h3>Output</h3>
const siteId = $('#siteId').val();
const name = $('#name').val();
const disabled = ($('#disable').is(':checked'));
if(!siteId) {
if (!siteId) {
$('#errorOutput').text("required parameters: site_id")
return
}
Expand All @@ -93,20 +93,35 @@ <h3>Output</h3>
const name = $('#name').val();
const disabled = ($('#disable').is(':checked'));

if(!subscriptionId) {
if (!subscriptionId) {
$('#errorOutput').text("required parameters: subscription_id")
return
}

const confirmationMessage = getUpdateKeypairConfirmationMessage(disabled, subscriptionId);
if (!confirm(confirmationMessage)) return;

const payload = {"subscription_id": subscriptionId, "disabled" : disabled}
if(name){
if (name) {
payload["name"] = name
}

doApiCall('POST', '/api/client_side_keypairs/update', '#standardOutput', '#errorOutput', JSON.stringify(payload));
});

});

function getUpdateKeypairConfirmationMessage(disabled, subscriptionId) {
let action = disabled ? 'disable' : 'enable';
let confirmationMessage = `You may ignore this warning if you are not changing the disabled status of this keypair.\n\nAre you sure you want to ${action} ${subscriptionId}?`;

if (disabled) {
confirmationMessage = `Disabling this client-side keypair will prevent it from using CSTG.\nBefore proceeding, ensure there is no valid traffic, and confirm that the participant has provided consent.\n\n${confirmationMessage}`;
} else {
confirmationMessage = `Enabling this client-side keypair will allow it to use CSTG.\n\n${confirmationMessage}`;
}
return confirmationMessage;
}
</script>

</body>
Expand Down
28 changes: 24 additions & 4 deletions webroot/adm/operator-key.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,15 +98,27 @@ <h3>Output</h3>
});

$('#doDisable').on('click', function () {
var operatorName = encodeURIComponent($('#operatorName').val());
var url = '/api/operator/disable?name=' + operatorName;
const operatorName = $('#operatorName').val();
var encodedOperatorName = encodeURIComponent(operatorName);
var url = '/api/operator/disable?name=' + encodedOperatorName;

if (!validateOperatorName(encodedOperatorName)) return;

const confirmationMessage = `Disabling an operator key will keep the private operators running, but will eventually cause the operator to stop serving client requests.\n\nBefore proceeding, ensure there is no valid traffic, and confirm that the participant has provided consent.\n\nAre you sure you want to disable ${operatorName}?`;
if (!confirm(confirmationMessage)) return;

doApiCall('POST', url, '#standardOutput', '#errorOutput');
});

$('#doEnable').on('click', function () {
var operatorName = encodeURIComponent($('#operatorName').val());
var url = '/api/operator/enable?name=' + operatorName;
const operatorName = $('#operatorName').val();
var encodedOperatorName = encodeURIComponent(operatorName);
var url = '/api/operator/enable?name=' + encodedOperatorName;

if (!validateOperatorName(encodedOperatorName)) return;

const confirmationMessage = `Are you sure you want to enable ${operatorName}?`;
if (!confirm(confirmationMessage)) return;

doApiCall('POST', url, '#standardOutput', '#errorOutput');
});
Expand Down Expand Up @@ -134,6 +146,14 @@ <h3>Output</h3>

doApiCall('POST', url, '#standardOutput', '#errorOutput');
});

function validateOperatorName(operatorName) {
if (!operatorName) {
$('#errorOutput').text("required parameter: name")
return false;
}
return true;
}
});
</script>

Expand Down

0 comments on commit 09d213e

Please sign in to comment.