Skip to content
This repository has been archived by the owner on Sep 16, 2022. It is now read-only.

Avoid multiple removal of Credentials and Pairing Keys. #381

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion backend/backend/static/js/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,5 +31,5 @@ require('exports-loader?window.select23!../../staticfiles/tagulous/adaptor/selec
// Copy to clipboard
import * as clipboard from "clipboard-polyfill"
window.copyToClipboard = function(text) {
return clipboard.writeText(text).then(console.log, console.error);
return clipboard.writeText(text);
}
11 changes: 5 additions & 6 deletions backend/device_registry/templates/credentials.html
Original file line number Diff line number Diff line change
Expand Up @@ -459,12 +459,11 @@ <h6 class="card-subtitle text-muted">View credentials.</h6>
let data = table.row( $(this).parents('tr') ).data();
deleted_pk = data.pk;

$('#confirm-btn').on('click', delete_credential );
show_confirm_dialog( "Confirm Removal", "Are you sure you want to delete?", "Delete" );
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The idea was in use one confirmation dialog for several confirmations. And to move it (html dialog template and function) to separate utils file may be.
So, if we plan to move repeated code to somewhere library like in future, may be it would be better to use something like code below or even move it inside a function

$('#confirm-btn').off('click');
$('#confirm-btn').on('click', delete_credential );
show_confirm_dialog( "Confirm Removal", "Are you sure you want to delete?", "Delete" );

If not, then your variant is fine

});


function delete_credential() {
$('#confirm-btn').click(e => {
console.log('del');

$.ajax({
Expand All @@ -479,11 +478,11 @@ <h6 class="card-subtitle text-muted">View credentials.</h6>
console.log(a.status, a.responseText);
alertbox_on_ajax_fail(a,del_modal_idx);
});
}
});

function obj_to_kv_editor_data(obj)
{
let rows = []
let rows = [];
for( let key in obj ) {
rows.push( [key, obj[key]] );
}
Expand All @@ -492,10 +491,10 @@ <h6 class="card-subtitle text-muted">View credentials.</h6>

function get_kv_data_view(data, view_id, starred=true)
{
let rows = []
let rows = [];
for( let key in data ){
let val = data[key].toString();
val = (starred) ? '*'.repeat(val.length) : htmlEntities(val)
val = (starred) ? '*'.repeat(val.length) : htmlEntities(val);
rows.push( "<tr><td>" + key + "</td><td>" + val + "</td></tr>" );
}
let value = JSON.stringify(data);
Expand Down
77 changes: 22 additions & 55 deletions backend/device_registry/templates/pairing_keys.html
Original file line number Diff line number Diff line change
Expand Up @@ -196,32 +196,30 @@ <h6 class="card-subtitle text-muted">List of keys not yet applied.</h6>
return `<input type="text" value="${h_data}" style="width:100%" readonly></input>`;
}

function fa_button( type, btn, fa, onclick, popover=undefined)
{
let pop = ( popover === undefined ) ? "" : ' data-toggle="popover" data-placement="top" title="' +
popover.title + (popover.content === undefined ? '"' : `" data-content="${popover.content}"`);

return `<button type="${type}" class="btn ${btn}" aria-label="Left Align"><span class="${fa}" `
+ `aria-hidden="true" onclick="${onclick}" ${pop} ></span></button>`;
}

function render_buttons(data, type, row, meta)
{
let save_url = `location.href='/pairing-keys/download?pk=${row.key}';`;

return fa_button( "button", "btn-primary", "fas fa-copy fa-lg", `copy_key(this, '${row.key}')`,
{ title: "Copy key to clipboard",
content: "Copy the enrollment string to the clipboard. The string is in the form 'key = value' " +
"to simply paste to config.ini file."})
+ fa_button( "button", "btn-success", "fas fa-save fa-lg", save_url,
{ title:"Store key to disk", content: "Store generated enrollment key as ready to go config.ini file." } )
+ fa_button( "button", "btn-danger", "fas fa-trash fa-lg", "revoke_key(this)",
{ title:"Revoke the enrollment key"} )
let fa_button = ( type, btn, fa, onclick, title) =>
`<button type="${type}" class="btn ${btn}" aria-label="Left Align"><span class="${fa}" `
+ `aria-hidden="true" onclick="${onclick}" title="${title}" data-toggle="popover" data-placement="top" ></span></button>`;

return fa_button( "button", "btn-primary", "fas fa-copy fa-lg", `copy_key(this, '${row.key}')`,"Copy key to clipboard")
+ fa_button( "button", "btn-success", "fas fa-save fa-lg", save_url, "Store key to disk")
+ fa_button( "button", "btn-danger", "fas fa-trash fa-lg", "revoke_key(this)","Revoke the enrollment key");
}

function copy_key(a){
copyToClipboard(
"enroll_token = " + a
);
}

var deleted_pk;
function revoke_key(a){
wott_alert_hide("main-alert");
$('#confirm-btn').on("click", {key: a.parentElement.parentElement.parentElement.id}, delete_key );
deleted_pk = a.parentElement.parentElement.parentElement.id;
show_dialog("Confirm Revoke Key",
"Are you sure you want to revoke?",
"Revoke"
Expand All @@ -230,14 +228,9 @@ <h6 class="card-subtitle text-muted">List of keys not yet applied.</h6>

function show_popover(el, title, content='')
{
let title_store = el.attr('title');
let content_store = el.attr('data-content');
el.attr('title', title);
el.attr('data-content', content);
el.attr('title', title);
el.popover('show');
el.attr('title', title_store);
el.attr('data-content', content_store);
el.on( "mouseout", function (ev) {
let el = $(ev.currentTarget);
el.off("mouseout");
Expand All @@ -247,35 +240,30 @@ <h6 class="card-subtitle text-muted">List of keys not yet applied.</h6>

function copy_key(btn, key){
let key_text = "enroll_token = " + key;
navigator.clipboard.writeText(key_text).then(function() {
show_popover($(btn), 'Copied', key_text);
}, function() {
let successful = copyToClipboard(key_text);
let title = successful ? 'Copied' : 'Could not copy to clipboard. Check the browser permissions.';
let msg = successful ? key_text : '';
show_popover($(btn), title, msg);
copyToClipboard(key_text).then(() => {
show_popover($(btn), 'Copied', key_text);
}, () => {
show_popover($(btn), 'Could not copy to clipboard. Check the browser permissions.', '');
});
}

/***
* on confirm delete
* @param e - e.data.key <- key to delete
*/
function delete_key(e)
{
$('#confirm-btn').click(e => {
hide_dialog();
$.ajax({
url: `/ajax-pairing-keys/${e.data.key}/delete/`,
url: `/ajax-pairing-keys/${deleted_pk}/delete/`,
type: "DELETE",
}).done(function () {
console.log('success');
table.ajax.reload();
}).fail(function (a) {
console.log('error');
console.log(a.status, a.responseText);
alertbox_on_ajax_fail(a, "confirm-alert");
});
}
});

/**
* id - key/row_id (they are the same)
Expand Down Expand Up @@ -369,27 +357,6 @@ <h6 class="card-subtitle text-muted">List of keys not yet applied.</h6>
wott_alert_strings(errMsgs, alert_box_id);
}

const copyToClipboard = str => {
const el = document.createElement('textarea'); // Create a <textarea> element
el.value = str; // Set its value to the string that you want copied
el.setAttribute('readonly', ''); // Make it readonly to be tamper-proof
el.style.position = 'absolute';
el.style.left = '-9999px'; // Move outside the screen to make it invisible
document.body.appendChild(el); // Append the <textarea> element to the HTML document
const selected =
document.getSelection().rangeCount > 0 // Check if there is any content selected previously
? document.getSelection().getRangeAt(0) // Store selection if found
: false; // Mark as false to know no selection existed before
el.select(); // Select the <textarea> content
let res = document.execCommand('copy'); // Copy - only works as a result of a user action (e.g. click events)
document.body.removeChild(el); // Remove the <textarea> element
if (selected) { // If a selection existed before copying
document.getSelection().removeAllRanges(); // Unselect everything on the HTML document
document.getSelection().addRange(selected); // Restore the original selection
}
return res;
};

function htmlEntities(str) {
return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}
Expand Down