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;
await saveRelaysForProfile(srfpIndex, srfpRelays);
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:
break;
}
@@ -138,9 +150,22 @@ async function initialize() {
]);
}
async function getNsecKey() {
let profile = await currentProfile();
return profile.nsecKey;
async function getProfile(index) {
let profiles = await get('profiles');
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() {
@@ -148,12 +173,6 @@ async function getPrivKey() {
return profile.privKey;
}
async function getNpubKey() {
let pubKey = await getPubKey();
let npubKey = nip19.npubEncode(pubKey);
return npubKey;
}
async function getPubKey() {
let privKey = await getPrivKey();
let pubKey = getPublicKey(privKey);
@@ -260,3 +279,9 @@ async function saveRelaysForProfile(profileIndex, relays) {
profile.relays = relays;
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 {
@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 {
@@ -18,4 +18,8 @@
.section {
@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">
<h1 class="text-3xl lg:text-6xl font-bold">Nostore</h1>
<!-- PROFILES -->
<div class="mt-6">
<label for="profiles">Profile</label>
<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">
<option x-text="profileName" :value="index"></option>
</template>
</select>
</div>
<!-- KEYS -->
<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">
<table class="mt-3">
@@ -57,7 +86,7 @@
</template>
<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>
<template x-for="relay in recommendedRelays">
<option :value="relay" x-text="relay"></option>

View File

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