Files
nostash/Shared (Extension)/Resources/options.html
Ryan Breen c832aa22af Permissions UI with user requests and modification post-saving.
Commits:

Basic, functional permission tab when requesting getPubKey. Only allows one time deny.

getPubKey and getRelays for sure working after prompt.

Changed the prompt to use a query string instead of background script queue. This should prevent any disconnect between the user expecting one thing and getting a different prompt.

It is not working using query string and working quite nicely.

Finally figured out the secret sauce to only open one prompt at a time.

Allow and deny now both work, with the option to remember the request next time.

Still tweaking lots of events to try and get the prompts working smoothly

Nice rendering for the event query message.

Tweaking the migration setup and the tab opening/closing code.

When remembering signing events, it is now scoped by event kind, as well!

Include extra event information in event signing dialogs.

Change confirm buttons to confirm dialog box.

Update nostr-tools to 1.2.1

The interface for app permissions looks good. Ready to work on functionality now.

Don't show app permissions section unless there are things to show.

Fix bug when saving a "Deny".

Additional formatting changes to options page for permissions UI.

Fine permissions seem to be working nicely!

Quick usability fix so that App Permissions section appears on Options page, even when there are no options selected.

Bumping build to #5. Preparing for new build release.
2023-02-05 20:40:30 -05:00

162 lines
5.7 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="options.build.css">
<script defer src="options.build.js"></script>
</head>
<body x-data="options" class="text-fuchsia-900 p-3.5 lg:p-32">
<h1 class="text-3xl lg:text-6xl font-bold md:text-center">Settings</h1>
<!-- PROFILES -->
<div class="mt-6">
<label for="profiles">Profile</label>
<br>
<select class="input" x-model.number="profileIndex" id="profiles">
<template x-for="(name, index) in profileNames" :key="index">
<option x-text="name" :value="index"></option>
</template>
</select>
<div class="block md:inline p-3 pl-0 md:p-0">
<button class="button" @click.prevent="await newProfile()">New</button>
<button class="button" @click.prevent="deleteProfile">Delete</button>
</div>
</div>
<!-- KEYS -->
<div class="section">
<h2 class="section-header">Keys</h2>
<p class="text-sm italic">Provide your <code class="not-italic">nsec</code> or legacy (hexadecimal) private keys.
</p>
<form @submit.prevent="saveProfile">
<div class="mt-3">
<label for="profile-name">Profile Name</label>
<br>
<input x-model="profileName" type="text" class="input" autocapitalize="off" autocomplete="off" spellcheck="off">
</div>
<div class="mt-3">
<label for="priv-key">Private Key</label>
<br>
<input x-model="privKey" type="text" class="input" autocapitalize="off" autocomplete="off" spellcheck="off">
</div>
<div class="mt-3">
<label for="pub-key">Public Key</label>
<br>
<input x-model="pubKey" type="text" class="input" disabled>
</div>
<div class="mt-3">
<button class="button" :disabled="!needsSave" @click.prevent="saveProfile">Save</button>
</div>
</form>
</div>
<!-- RELAYS -->
<div class="section">
<h2 class="section-header">Relays</h2>
<p class="text-sm italic">Add relay suggestions for clients.</p>
<template x-if="hasRelays">
<table class="mt-3 text-xs md:text-base table-auto md:table-fixed">
<thead class="font-bold text-lg">
<td class="p-2 text-center">URL</td>
<td class="p-2 text-center">Read</td>
<td class="p-2 text-center">Write</td>
<td class="p-2 text-center">Actions</td>
</thead>
<template x-for="(relay, index) in relays" :key="index">
<tr>
<td class="p-2 w-1/3" x-text="relay.url"></td>
<td class="p-2 text-center">
<input class="checkbox" type="checkbox" x-model="relay.read" @change="await saveRelays()">
</td>
<td class="p-2 text-center">
<input class="checkbox" type="checkbox" x-model="relay.write" @change="await saveRelays()">
</td>
<td class="p-2 text-center">
<button class="button" @click.prevent="await deleteRelay(index)">Delete</button>
</td>
</tr>
</template>
</table>
</template>
<template x-if="!hasRelays">
<div class="mt-3">
There are no relays assigned to this profile.
</div>
</template>
<div class="mt-3" x-show="hasRecommendedRelays">
<select x-model="recommendedRelay" class="input">
<option value="" disabled selected>Recommended Relays</option>
<template x-for="relay in recommendedRelays">
<option :value="relay" x-text="relay"></option>
</template>
</select>
</div>
<input class="mt-3 input" x-model="newRelay" type="text" @keyup.enter="await addRelay()" placeholder="wss://..."
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="off">
<div class="block md:inline p-3 pl-0 md:p-0">
<button class="button" @click="await addRelay()">Add</button>
</div>
<div class="text-red-500 font-bold" x-show="urlError.length > 0" x-text="urlError"></div>
</div>
<!-- PERMISSIONS -->
<div class="section">
<h2 class="section-header">App Permissions</h2>
<p class="text-sm italic">
Permissions granted to individual applications.
Everything defaults to <span class="font-bold">Ask</span> unless you have saved a different option.
</p>
<div class="mt-3" x-show="permHosts.length > 0">
<label for="app">Apps</label>
<br>
<select id="app" class="input" x-model="host">
<option value=""></option>
<template x-for="permHost in permHosts">
<option :value="permHost" x-text="permHost"></option>
</template>
</select>
</div>
<p x-show="permHosts.length === 0" class="font-bold mt-3">You have not remembered any app requests yet.</p>
<table class="mt-3 text-xs md:text-base table-fixed" x-show="hostPerms.length > 0">
<thead class="font-bold text-lg">
<td class="p-2 text-center">App Request</td>
<td class="p-2 text-center">Action</td>
</thead>
<template x-for="[etype, humanName, perm] in hostPerms" :key="etype">
<tr>
<td class="p-2 w-1/3 md:w-2/4" x-text="humanName"></td>
<td class="p-2 text-center">
<select class="input" :value="perm"
@change="await setPermission(host, etype, $event.target.value, profileIndex)">
<option value="ask">Ask</option>
<option value="allow">Allow</option>
<option value="deny">Deny</option>
</select>
</td>
</tr>
</template>
</table>
</div>
<div class="mt-6">
<button class="button" @click.prevent="window.close()">Close</button>
<button class="button" @click.prevent="clearData">Clear Data</button>
</div>
</body>
</html>