add options page (to upload vault snapshots)
This commit is contained in:
DEV Sam Hayes
@@ -18,5 +18,9 @@ module.exports = {
|
|||||||
import: 'src/prompt.ts',
|
import: 'src/prompt.ts',
|
||||||
runtime: false,
|
runtime: false,
|
||||||
},
|
},
|
||||||
|
options: {
|
||||||
|
import: 'src/options.ts',
|
||||||
|
runtime: false,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
} as Configuration;
|
} as Configuration;
|
||||||
|
|||||||
@@ -2,8 +2,9 @@
|
|||||||
"manifest_version": 3,
|
"manifest_version": 3,
|
||||||
"name": "Gooti",
|
"name": "Gooti",
|
||||||
"description": "Nostr Identity Manager & Signer",
|
"description": "Nostr Identity Manager & Signer",
|
||||||
"version": "0.0.1",
|
"version": "0.0.2",
|
||||||
"homepage_url": "https://getgooti.com",
|
"homepage_url": "https://getgooti.com",
|
||||||
|
"options_page": "options.html",
|
||||||
"permissions": [
|
"permissions": [
|
||||||
"windows",
|
"windows",
|
||||||
"storage"
|
"storage"
|
||||||
|
|||||||
173
projects/chrome/public/options.html
Normal file
173
projects/chrome/public/options.html
Normal file
@@ -0,0 +1,173 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html data-bs-theme="dark">
|
||||||
|
<head>
|
||||||
|
<title>Gooti - Options</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||||
|
<script src="scripts.js"></script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background: var(--background);
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 16px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
height: 60px;
|
||||||
|
width: 60px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border: 2px solid var(--primary);
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-name {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
letter-spacing: 4px;
|
||||||
|
color: #b9d6ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-header {
|
||||||
|
padding-top: 50px;
|
||||||
|
font-size: 50px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-header {
|
||||||
|
padding-top: 28px;
|
||||||
|
font-size: 20px;
|
||||||
|
max-width: 460px;
|
||||||
|
text-align: right;
|
||||||
|
line-height: 1.4;
|
||||||
|
|
||||||
|
.accent {
|
||||||
|
color: #d63384;
|
||||||
|
border: 1px solid #d63384;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 2px 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.middle {
|
||||||
|
margin-top: 68px;
|
||||||
|
width: 100%;
|
||||||
|
background: var(--background-light);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
padding-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-label {
|
||||||
|
font-size: 20px;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-text {
|
||||||
|
color: gray;
|
||||||
|
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.snapshots-list {
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="page">
|
||||||
|
<div class="container sam-flex-row gap" style="margin-top: 16px">
|
||||||
|
<div class="logo">
|
||||||
|
<img src="gooti.svg" alt="" />
|
||||||
|
</div>
|
||||||
|
<span class="brand-name">Gooti</span>
|
||||||
|
<span>OPTIONS</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container sam-flex-column center">
|
||||||
|
<span class="main-header"> Nostr Identity Manager & Signer </span>
|
||||||
|
<span class="sub-header">
|
||||||
|
Manage and switch between
|
||||||
|
<span class="accent">multiple identities</span>
|
||||||
|
while interacting with Nostr apps
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="middle">
|
||||||
|
<div class="container sam-flex-column">
|
||||||
|
<!-- VAULT SNAPSHOTS -->
|
||||||
|
<span class="option-label">Vault Snapshots</span>
|
||||||
|
<span class="option-text">
|
||||||
|
Importing a previously exported vault snapshot is not
|
||||||
|
<b>directly</b>
|
||||||
|
possible in the extension's popup window. This is due to the
|
||||||
|
browser's limitation of automatically closing the popup when it
|
||||||
|
looses focus, making it impossible to drop or select a file there.
|
||||||
|
</span>
|
||||||
|
<span class="option-text">
|
||||||
|
To circumvent this limitation, you need to upload your snapshot here
|
||||||
|
and make it available for the extension to import in the popup.
|
||||||
|
</span>
|
||||||
|
<span class="option-text">
|
||||||
|
<b>
|
||||||
|
Uploading a snapshot here does NOT automatically start an import!
|
||||||
|
</b>
|
||||||
|
</span>
|
||||||
|
<span class="option-text">
|
||||||
|
<b>
|
||||||
|
The data remains inside this browser and is NOT uploaded to
|
||||||
|
any server!
|
||||||
|
</b>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<div class="sam-mt-h sam-flex-row gap">
|
||||||
|
<button id="uploadSnapshotsButton" class="btn btn-primary">
|
||||||
|
Upload Snapshots
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button id="deleteSnapshotsButton" class="btn btn-danger">
|
||||||
|
Delete Snapshots
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul id="snapshotsList" class="snapshots-list">
|
||||||
|
<!-- will be filled by JS -->
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<input
|
||||||
|
id="uploadSnapshotInput"
|
||||||
|
type="file"
|
||||||
|
multiple
|
||||||
|
style="position: absolute; top: 0; display: none"
|
||||||
|
accept=".json"
|
||||||
|
/>
|
||||||
|
<script src="options.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
130
projects/chrome/src/options.ts
Normal file
130
projects/chrome/src/options.ts
Normal file
@@ -0,0 +1,130 @@
|
|||||||
|
import {
|
||||||
|
BrowserSyncData,
|
||||||
|
GOOTI_META_DATA_KEY,
|
||||||
|
GootiMetaData_VaultSnapshot,
|
||||||
|
} from '@common';
|
||||||
|
import './app/common/extensions/array';
|
||||||
|
import browser from 'webextension-polyfill';
|
||||||
|
|
||||||
|
//
|
||||||
|
// Functions
|
||||||
|
//
|
||||||
|
|
||||||
|
async function getGootiMetaDataVaultSnapshots(): Promise<
|
||||||
|
GootiMetaData_VaultSnapshot[]
|
||||||
|
> {
|
||||||
|
const data = (await browser.storage.local.get(
|
||||||
|
GOOTI_META_DATA_KEY.vaultSnapshots
|
||||||
|
)) as {
|
||||||
|
vaultSnapshots?: GootiMetaData_VaultSnapshot[];
|
||||||
|
};
|
||||||
|
|
||||||
|
return typeof data.vaultSnapshots === 'undefined'
|
||||||
|
? []
|
||||||
|
: data.vaultSnapshots.sortBy((x) => x.fileName, 'desc');
|
||||||
|
}
|
||||||
|
|
||||||
|
async function setGootiMetaDataVaultSnapshots(
|
||||||
|
vaultSnapshots: GootiMetaData_VaultSnapshot[]
|
||||||
|
): Promise<void> {
|
||||||
|
await browser.storage.local.set({
|
||||||
|
vaultSnapshots,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function rebuildSnapshotsList(snapshots: GootiMetaData_VaultSnapshot[]) {
|
||||||
|
const ul = document.getElementById('snapshotsList');
|
||||||
|
if (!ul) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Clear the list
|
||||||
|
ul.innerHTML = '';
|
||||||
|
|
||||||
|
for (const snapshot of snapshots) {
|
||||||
|
const li = document.createElement('li');
|
||||||
|
|
||||||
|
const test =
|
||||||
|
'"' +
|
||||||
|
snapshot.fileName +
|
||||||
|
'"' +
|
||||||
|
' -> vault version: ' +
|
||||||
|
snapshot.data.version +
|
||||||
|
' -> identities: ' +
|
||||||
|
snapshot.data.identities.length +
|
||||||
|
' -> relays: ' +
|
||||||
|
snapshot.data.relays.length +
|
||||||
|
'';
|
||||||
|
|
||||||
|
li.innerText = test;
|
||||||
|
ul.appendChild(li);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Main
|
||||||
|
//
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', async () => {
|
||||||
|
const uploadSnapshotsButton = document.getElementById(
|
||||||
|
'uploadSnapshotsButton'
|
||||||
|
);
|
||||||
|
const deleteSnapshotsButton = document.getElementById(
|
||||||
|
'deleteSnapshotsButton'
|
||||||
|
);
|
||||||
|
const uploadSnapshotInput = document.getElementById(
|
||||||
|
'uploadSnapshotInput'
|
||||||
|
) as HTMLInputElement;
|
||||||
|
|
||||||
|
deleteSnapshotsButton?.addEventListener('click', async () => {
|
||||||
|
await setGootiMetaDataVaultSnapshots([]);
|
||||||
|
rebuildSnapshotsList([]);
|
||||||
|
});
|
||||||
|
|
||||||
|
uploadSnapshotsButton?.addEventListener('click', async () => {
|
||||||
|
uploadSnapshotInput?.click();
|
||||||
|
});
|
||||||
|
|
||||||
|
uploadSnapshotInput?.addEventListener('change', async (event) => {
|
||||||
|
const files = (event.target as HTMLInputElement).files;
|
||||||
|
if (!files) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const existingSnapshots = await getGootiMetaDataVaultSnapshots();
|
||||||
|
|
||||||
|
const newSnapshots: GootiMetaData_VaultSnapshot[] = [];
|
||||||
|
for (const file of files) {
|
||||||
|
const text = await file.text();
|
||||||
|
const vault = JSON.parse(text) as BrowserSyncData;
|
||||||
|
|
||||||
|
// Check, if the "new" file is already in the list (via fileName comparison)
|
||||||
|
if (existingSnapshots.some((x) => x.fileName === file.name)) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
newSnapshots.push({
|
||||||
|
fileName: file.name,
|
||||||
|
data: vault,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const snapshots = [...existingSnapshots, ...newSnapshots].sortBy(
|
||||||
|
(x) => x.fileName,
|
||||||
|
'desc'
|
||||||
|
);
|
||||||
|
|
||||||
|
// Persist the new snapshots to the local storage
|
||||||
|
await setGootiMetaDataVaultSnapshots(snapshots);
|
||||||
|
|
||||||
|
//
|
||||||
|
rebuildSnapshotsList(snapshots);
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const snapshots = await getGootiMetaDataVaultSnapshots();
|
||||||
|
rebuildSnapshotsList(snapshots);
|
||||||
|
});
|
||||||
@@ -11,7 +11,8 @@
|
|||||||
"src/background.ts",
|
"src/background.ts",
|
||||||
"src/gooti-extension.ts",
|
"src/gooti-extension.ts",
|
||||||
"src/gooti-content-script.ts",
|
"src/gooti-content-script.ts",
|
||||||
"src/prompt.ts"
|
"src/prompt.ts",
|
||||||
|
"src/options.ts"
|
||||||
],
|
],
|
||||||
"include": ["src/**/*.d.ts"]
|
"include": ["src/**/*.d.ts"]
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ export abstract class GootiMetaHandler {
|
|||||||
|
|
||||||
#gootiMetaData?: GootiMetaData;
|
#gootiMetaData?: GootiMetaData;
|
||||||
|
|
||||||
readonly metaProperties = ['syncFlow'];
|
readonly metaProperties = ['syncFlow', 'vaultSnapshots'];
|
||||||
/**
|
/**
|
||||||
* Load the full data from the storage. If the storage is used for storing
|
* Load the full data from the storage. If the storage is used for storing
|
||||||
* other data (e.g. browser sync data when the user decided to NOT sync),
|
* other data (e.g. browser sync data when the user decided to NOT sync),
|
||||||
|
|||||||
@@ -79,6 +79,17 @@ export interface BrowserSessionData {
|
|||||||
relays: Relay_DECRYPTED[];
|
relays: Relay_DECRYPTED[];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface GootiMetaData_VaultSnapshot {
|
||||||
|
fileName: string;
|
||||||
|
data: BrowserSyncData;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const GOOTI_META_DATA_KEY = {
|
||||||
|
vaultSnapshots: 'vaultSnapshots',
|
||||||
|
};
|
||||||
|
|
||||||
export interface GootiMetaData {
|
export interface GootiMetaData {
|
||||||
syncFlow?: number; // 0 = no sync, 1 = browser sync, (future: 2 = Gooti sync, 3 = Custom sync (bring your own sync))
|
syncFlow?: number; // 0 = no sync, 1 = browser sync, (future: 2 = Gooti sync, 3 = Custom sync (bring your own sync))
|
||||||
|
|
||||||
|
vaultSnapshots?: GootiMetaData_VaultSnapshot[];
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -10,6 +10,10 @@
|
|||||||
margin-top: var(--size-h);
|
margin-top: var(--size-h);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sam-mt-hh {
|
||||||
|
margin-top: var(--size-hh);
|
||||||
|
}
|
||||||
|
|
||||||
.sam-mb {
|
.sam-mb {
|
||||||
margin-bottom: var(--size);
|
margin-bottom: var(--size);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,6 +8,7 @@
|
|||||||
--size-2: 32px;
|
--size-2: 32px;
|
||||||
--size: 16px;
|
--size: 16px;
|
||||||
--size-h: 8px;
|
--size-h: 8px;
|
||||||
|
--size-hh: 4px;
|
||||||
|
|
||||||
--background: #161c26;
|
--background: #161c26;
|
||||||
--background-light: #202733;
|
--background-light: #202733;
|
||||||
|
|||||||
Reference in New Issue
Block a user