Files
nostash/Shared (Extension)/Resources/options.html
Ryan Breen 8322aca674 Native app facelift, extension UI tweaks, bug fixes.
Show/Hide Button for private key in Options page.

Move experimental page into separate sub-folder.

Move delegation wizard to sub-folder.

Move permission page into separate folder.

Basic functional SwiftUI look for the app.

Beginning to define the main app view.

NavigationStack and Privacy Policy

Show App Icon on main screen.

Getting Started: macOS

Getting Started: iPhone

Getting Started: iPad

Removing old default UIKit code.

Added "No Thanks" toggle to the relay reminder.

Clearly indicate in the Settings page when a profile is a delegated profile.

Changed recommended relays to all public relays.

Use x-cloak in all the places.

Fix bundle display name to use capital N.

Added copy button to pubkey in settings.

Window default size.

Updating event kind list.

Allow events to be copied by clicking on them in the event log.

Tweaking the colors for a more purple-ish look.

Added Tips and Tricks view to native app.

Move utilities modules into separate folder.

Rename event_log files to event_history to escape some content blockers.

Renamed Event Log to Event History in the UI as well.
2023-02-20 22:34:40 -05:00

184 lines
6.8 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="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>
</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>
<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="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>
<!-- 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" 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>
<!-- 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" x-cloak 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" 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>