Make requesting permissions appear less terrible.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@3952 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
Cory McWilliams 2022-08-07 22:39:58 +00:00
parent eca3696740
commit 58196c4ac0
2 changed files with 67 additions and 6 deletions

View File

@ -443,18 +443,59 @@ function api_localStorageGet(key, value) {
function api_requestPermission(permission, id) { function api_requestPermission(permission, id) {
let permissions = document.getElementById('permissions'); let permissions = document.getElementById('permissions');
let container = document.createElement('div');
container.classList.add('permissions_contents');
let div = document.createElement('div'); let div = document.createElement('div');
div.appendChild(document.createTextNode(permission)); div.appendChild(document.createTextNode('This app is requesting the following permission:'));
for (let action of ['allow', 'allow once', 'deny once', 'deny']) { let span = document.createElement('span');
span.style = 'font-weight: bold';
span.appendChild(document.createTextNode(permission));
div.appendChild(span);
container.appendChild(div);
div = document.createElement('div');
div.style = 'padding: 1em';
let check = document.createElement('input');
check.id = 'permissions_remember_check';
check.type = 'checkbox';
div.appendChild(check);
let label = document.createElement('label');
label.htmlFor = check.id;
label.appendChild(document.createTextNode('Remember this decision.'));
div.appendChild(label);
container.appendChild(div);
const k_options = [
{
text: '✅ Allow',
grant: ['allow once', 'allow'],
},
{
text: '❌ Deny',
grant: ['deny once', 'deny'],
},
];
div = document.createElement('div');
for (let option of k_options) {
let button = document.createElement('button'); let button = document.createElement('button');
button.innerText = action; button.innerText = option.text;
button.onclick = function() { button.onclick = function() {
send({action: 'permission', id: id, granted: action}); send({action: 'permission', id: id, granted: option.grant[check.checked ? 1 : 0]});
permissions.removeChild(div); while (permissions.firstChild) {
permissions.removeChild(permissions.firstChild);
}
permissions.style.visibility = 'hidden';
} }
div.appendChild(button); div.appendChild(button);
} }
permissions.appendChild(div); container.appendChild(div);
permissions.appendChild(container);
permissions.style.visibility = 'visible';
} }
function receive(message) { function receive(message) {

View File

@ -253,3 +253,23 @@ kbd {
padding: 2px 4px; padding: 2px 4px;
white-space: nowrap; white-space: nowrap;
} }
#permissions {
visibility: hidden;
position: absolute;
display: block;
top: 0;
z-index: 100;
display: flex;
justify-content: center;
width: 100%;
}
.permissions_contents {
background-color: #444;
border-left: 4px solid #fff;
border-right: 4px solid #fff;
border-bottom: 4px solid #fff;
padding: 1em;
margin: 0 auto;
}