Options is now showing keys, and changing keys as the dropdown is switched.

This commit is contained in:
Ryan Breen
2023-01-26 23:02:31 -05:00
parent 252c9d5234
commit 0ea7f11356
4 changed files with 116 additions and 17 deletions

View File

@@ -105,6 +105,18 @@ browser.runtime.onMessage.addListener(
let [srfpIndex, srfpRelays] = message.payload; let [srfpIndex, srfpRelays] = message.payload;
await saveRelaysForProfile(srfpIndex, srfpRelays); await saveRelaysForProfile(srfpIndex, srfpRelays);
break; break;
case 'getNameForProfile':
let nameForProfile = await getNameForProfile(message.payload);
sendResponse(nameForProfile);
break;
case 'getPubKeyForProfile':
let pubKeyForProfile = await getNpubKey(message.payload);
sendResponse(pubKeyForProfile);
break;
case 'getPrivKeyForProfile':
let privKeyForProfile = await getNsecKey(message.payload);
sendResponse(privKeyForProfile);
break;
default: default:
break; break;
} }
@@ -138,9 +150,22 @@ async function initialize() {
]); ]);
} }
async function getNsecKey() { async function getProfile(index) {
let profile = await currentProfile(); let profiles = await get('profiles');
return profile.nsecKey; return profiles[index];
}
async function getNsecKey(index) {
let profile = await getProfile(index);
let nsecKey = nip19.nsecEncode(profile.privKey);
return nsecKey;
}
async function getNpubKey(index) {
let profile = await getProfile(index);
let pubKey = getPublicKey(profile.privKey);
let npubKey = nip19.npubEncode(pubKey);
return npubKey;
} }
async function getPrivKey() { async function getPrivKey() {
@@ -148,12 +173,6 @@ async function getPrivKey() {
return profile.privKey; return profile.privKey;
} }
async function getNpubKey() {
let pubKey = await getPubKey();
let npubKey = nip19.npubEncode(pubKey);
return npubKey;
}
async function getPubKey() { async function getPubKey() {
let privKey = await getPrivKey(); let privKey = await getPrivKey();
let pubKey = getPublicKey(privKey); let pubKey = getPublicKey(privKey);
@@ -260,3 +279,9 @@ async function saveRelaysForProfile(profileIndex, relays) {
profile.relays = relays; profile.relays = relays;
await storage.set({ profiles }); await storage.set({ profiles });
} }
async function getNameForProfile(profileIndex) {
let profiles = await get('profiles');
let profile = profiles[profileIndex];
return profile.name;
}

View File

@@ -8,7 +8,7 @@
} }
.input { .input {
@apply bg-fuchsia-200 text-fuchsia-800 rounded-lg p-1 lg:p-1.5 focus:border-fuchsia-800; @apply bg-fuchsia-200 text-fuchsia-800 rounded-lg p-1 lg:p-1.5 focus:border-fuchsia-800 w-64;
} }
.checkbox { .checkbox {
@@ -18,4 +18,8 @@
.section { .section {
@apply border-2 border-fuchsia-700 rounded-lg p-5 mt-6 shadow-md; @apply border-2 border-fuchsia-700 rounded-lg p-5 mt-6 shadow-md;
} }
.section-header {
@apply text-2xl lg:text-5xl font-bold;
}
} }

View File

@@ -12,18 +12,47 @@
<body x-data="options" class="text-fuchsia-900 p-3.5 lg:p-32"> <body x-data="options" class="text-fuchsia-900 p-3.5 lg:p-32">
<h1 class="text-3xl lg:text-6xl font-bold">Nostore</h1> <h1 class="text-3xl lg:text-6xl font-bold">Nostore</h1>
<!-- PROFILES -->
<div class="mt-6"> <div class="mt-6">
<label for="profiles">Profile</label> <label for="profiles">Profile</label>
<br> <br>
<select class="input w-64" x-model.number="profileIndex" id="profiles"> <select class="input" x-model.number="profileIndex" id="profiles">
<template x-for="(profileName, index) in profileNames" :key="profileName"> <template x-for="(profileName, index) in profileNames" :key="profileName">
<option x-text="profileName" :value="index"></option> <option x-text="profileName" :value="index"></option>
</template> </template>
</select> </select>
</div> </div>
<!-- KEYS -->
<div class="section"> <div class="section">
<h2 class="text-2xl lg:text-5xl font-bold">Relays</h2> <h2 class="section-header">Keys</h2>
<div class="mt-3">
<label for="profile-name">Profile Name</label>
<br>
<input x-model="profileName" type="text" class="input">
</div>
<div class="mt-3">
<label for="priv-key">Private Key</label>
<br>
<input x-model="privKey" type="text" class="input">
</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">Save</button>
</div>
</div>
<!-- RELAYS -->
<div class="section">
<h2 class="section-header">Relays</h2>
<template x-if="hasRelays"> <template x-if="hasRelays">
<table class="mt-3"> <table class="mt-3">
@@ -57,7 +86,7 @@
</template> </template>
<div class="mt-3" x-show="hasRecommendedRelays"> <div class="mt-3" x-show="hasRecommendedRelays">
<select x-model="recommendedRelay" class="input w-64"> <select x-model="recommendedRelay" class="input">
<option value="" disabled selected>Recommended Relays</option> <option value="" disabled selected>Recommended Relays</option>
<template x-for="relay in recommendedRelays"> <template x-for="relay in recommendedRelays">
<option :value="relay" x-text="relay"></option> <option :value="relay" x-text="relay"></option>

View File

@@ -10,18 +10,21 @@ const RECOMMENDED_RELAYS = [
Alpine.data('options', () => ({ Alpine.data('options', () => ({
profileNames: ['Default'], profileNames: ['Default'],
profileIndex: 0, profileIndex: 0,
profileName: '',
pristineProfileName: '',
privKey: '',
pristinePrivKey: '',
pubKey: '',
relays: [], relays: [],
newRelay: '', newRelay: '',
urlError: '', urlError: '',
recommendedRelay: '', recommendedRelay: '',
async init() { async init() {
await browser.runtime.getBackgroundPage(); await this.refreshInfo();
await this.getProfileNames();
await this.getRelaysForProfile();
this.$watch('profileIndex', async () => { this.$watch('profileIndex', async () => {
await this.getRelaysForProfile(); await this.refreshInfo();
}); });
this.$watch('recommendedRelay', async () => { this.$watch('recommendedRelay', async () => {
@@ -31,6 +34,14 @@ Alpine.data('options', () => ({
}); });
}, },
async refreshInfo() {
await this.getProfileNames();
await this.getNameForProfile();
await this.getPrivKeyForProfile();
await this.getPubKeyForProfile();
await this.getRelaysForProfile();
},
async getProfileNames() { async getProfileNames() {
this.profileNames = await browser.runtime.sendMessage({ this.profileNames = await browser.runtime.sendMessage({
kind: 'getProfileNames', kind: 'getProfileNames',
@@ -84,6 +95,29 @@ Alpine.data('options', () => ({
}, 3000); }, 3000);
}, },
async getNameForProfile() {
this.profileName = await browser.runtime.sendMessage({
kind: 'getNameForProfile',
payload: this.profileIndex,
});
this.pristineProfileName = this.profileName;
},
async getPubKeyForProfile() {
this.pubKey = await browser.runtime.sendMessage({
kind: 'getPubKeyForProfile',
payload: this.profileIndex,
});
},
async getPrivKeyForProfile() {
this.privKey = await browser.runtime.sendMessage({
kind: 'getPrivKeyForProfile',
payload: this.profileIndex,
});
this.pristinePrivKey = this.privKey;
},
// Properties // Properties
get recommendedRelays() { get recommendedRelays() {
@@ -100,6 +134,13 @@ Alpine.data('options', () => ({
get hasRecommendedRelays() { get hasRecommendedRelays() {
return this.recommendedRelays.length > 0; return this.recommendedRelays.length > 0;
}, },
get needsSave() {
return (
this.privKey !== this.pristinePrivKey ||
this.profileName !== this.pristineProfileName
);
},
})); }));
Alpine.start(); Alpine.start();