prettier, update to the dependencies (latest), remove nip26 and its artifacts, cleanup and renew
This commit is contained in:
Fishcake
@@ -1,184 +1,261 @@
|
||||
<!DOCTYPE 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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
</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="newProfile">New</button>
|
||||
<button class="button" @click.prevent="newDelegated" x-show="delegationActive" x-cloak>New Delegate</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" x-show="delegate" x-cloak>
|
||||
<div class="mb-1">
|
||||
<span class="text-red-700 font-bold">This is is a delegated profile.</span>
|
||||
<!-- 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="newProfile">New</button>
|
||||
<button class="button" @click.prevent="deleteProfile">
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label for="delegator-pub-key">Delegator Public Key</label>
|
||||
<br>
|
||||
<input id="delegator-pub-key" x-model="delegator" class="input" autocapitalize="off" autocomplete="off"
|
||||
spellcheck="off" :disabled="delegate">
|
||||
</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="visibilityClass" class="input" :class="validKeyClass" autocapitalize="off"
|
||||
autocomplete="off" spellcheck="off" :disabled="delegate">
|
||||
<a href="" @click.prevent="visible = !visible" x-text="(visible && 'Hide') || 'Show'" class="border-none"></a>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<label for="priv-key">Private Key</label>
|
||||
<br />
|
||||
<input
|
||||
x-model="privKey"
|
||||
:type="visibilityClass"
|
||||
class="input"
|
||||
:class="validKeyClass"
|
||||
autocapitalize="off"
|
||||
autocomplete="off"
|
||||
spellcheck="off"
|
||||
/>
|
||||
<a
|
||||
href=""
|
||||
@click.prevent="visible = !visible"
|
||||
x-text="(visible && 'Hide') || 'Show'"
|
||||
class="border-none"
|
||||
></a>
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<label for="pub-key">Public Key</label>
|
||||
<br>
|
||||
<input x-model="pubKey" type="text" class="input" disabled>
|
||||
<a href="" class="border-none" @click.prevent="copyPubKey" x-text="copied ? 'Copied!' : 'Copy'"></a>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<label for="pub-key">Public Key</label>
|
||||
<br />
|
||||
<input
|
||||
x-model="pubKey"
|
||||
type="text"
|
||||
class="input"
|
||||
disabled
|
||||
/>
|
||||
<a
|
||||
href=""
|
||||
class="border-none"
|
||||
@click.prevent="copyPubKey"
|
||||
x-text="copied ? 'Copied!' : 'Copy'"
|
||||
></a>
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<button class="button" :disabled="!needsSave || !validKey" @click.prevent="saveProfile">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="mt-3">
|
||||
<button
|
||||
class="button"
|
||||
:disabled="!needsSave || !validKey"
|
||||
@click.prevent="saveProfile"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<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" x-cloak>
|
||||
<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>
|
||||
|
||||
<div class="mt-3" x-show="hasRecommendedRelays" x-cloak>
|
||||
<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"
|
||||
x-cloak
|
||||
></div>
|
||||
</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" x-cloak></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>
|
||||
|
||||
<!-- 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>
|
||||
<p x-show="permHosts.length === 0" x-cloak class="font-bold mt-3">
|
||||
You have not remembered any app requests yet.
|
||||
</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>
|
||||
<table
|
||||
class="mt-3 text-xs md:text-base table-fixed"
|
||||
x-show="hostPerms.length > 0"
|
||||
x-cloak
|
||||
>
|
||||
<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>
|
||||
|
||||
<p x-show="permHosts.length === 0" x-cloak class="font-bold mt-3">You have not remembered any app requests yet.</p>
|
||||
<div class="mt-6">
|
||||
<button class="button" @click.prevent="closeOptions">Close</button>
|
||||
<button class="button" @click.prevent="clearData">
|
||||
Clear Data
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<table class="mt-3 text-xs md:text-base table-fixed" x-show="hostPerms.length > 0" x-cloak>
|
||||
<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="closeOptions">Close</button>
|
||||
<button class="button" @click.prevent="clearData">Clear Data</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<a href="experimental/experimental.html" class="border-none hover:underline">Experimental
|
||||
features →</a>
|
||||
<br>
|
||||
<a href="event_history/event_history.html" class="border-none hover:underline">Event history →</a>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<div class="mt-6">
|
||||
<a
|
||||
href="experimental/experimental.html"
|
||||
class="border-none hover:underline"
|
||||
>Experimental features →</a
|
||||
>
|
||||
<br />
|
||||
<a
|
||||
href="event_history/event_history.html"
|
||||
class="border-none hover:underline"
|
||||
>Event history →</a
|
||||
>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user