From 24f918d76abe58d5e7ecd7751495ff441eb67176 Mon Sep 17 00:00:00 2001 From: Corentin Date: Tue, 15 Nov 2022 16:04:28 +0900 Subject: [PATCH] Fix icons, export working --- icons/add.svg | 2 +- icons/close.svg | 2 +- icons/delete.svg | 2 +- icons/done.svg | 2 +- icons/edit.svg | 2 +- icons/export.svg | 3 +++ icons/import.svg | 3 +++ icons/logout.svg | 2 +- icons/visibility.svg | 2 +- popup.css | 21 +++++++++++++++++++-- popup.html | 10 +++++++--- popup.js | 23 ++++++++++++++++++++--- 12 files changed, 59 insertions(+), 15 deletions(-) create mode 100644 icons/export.svg create mode 100644 icons/import.svg diff --git a/icons/add.svg b/icons/add.svg index 46cd62b..e335b08 100644 --- a/icons/add.svg +++ b/icons/add.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/icons/close.svg b/icons/close.svg index 5475f58..cedc890 100644 --- a/icons/close.svg +++ b/icons/close.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/icons/delete.svg b/icons/delete.svg index e5a4018..e6db09d 100644 --- a/icons/delete.svg +++ b/icons/delete.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/icons/done.svg b/icons/done.svg index 2c09769..6521894 100644 --- a/icons/done.svg +++ b/icons/done.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/icons/edit.svg b/icons/edit.svg index b3bc7a0..5cb1517 100644 --- a/icons/edit.svg +++ b/icons/edit.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/icons/export.svg b/icons/export.svg new file mode 100644 index 0000000..56951b1 --- /dev/null +++ b/icons/export.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/icons/import.svg b/icons/import.svg new file mode 100644 index 0000000..0e1c8dc --- /dev/null +++ b/icons/import.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/icons/logout.svg b/icons/logout.svg index 2e46d99..b46e8bd 100644 --- a/icons/logout.svg +++ b/icons/logout.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/icons/visibility.svg b/icons/visibility.svg index 13bd625..4a11822 100644 --- a/icons/visibility.svg +++ b/icons/visibility.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/popup.css b/popup.css index 3a24de7..c646c3e 100644 --- a/popup.css +++ b/popup.css @@ -60,7 +60,8 @@ h2 { display: flex; } -.entry .header h2, .entry .header input { +.entry .header h2, +.entry .header input { flex-grow: 1; } @@ -89,8 +90,13 @@ h2 { border-top: 1px solid var(--border-color); } +#entry-list .entry input { + font-size: 1.2em; + width: 200px; +} + .hidden { - display: none; + display: none !important; } .icon { @@ -115,6 +121,7 @@ h2 { #entry-add-container { position: relative; + padding-bottom: 4px; } #entry-form { @@ -150,4 +157,14 @@ h2 { #password-form label { margin-right: 8px; +} + +#store-action { + display: flex; + justify-content: center; +} + +#store-action img { + height: 2em; + cursor: pointer; } \ No newline at end of file diff --git a/popup.html b/popup.html index 57db84d..4314d09 100644 --- a/popup.html +++ b/popup.html @@ -10,14 +10,14 @@
- +
-
+
+ +
\ No newline at end of file diff --git a/popup.js b/popup.js index b201d3a..38f9c1d 100644 --- a/popup.js +++ b/popup.js @@ -1,10 +1,11 @@ -const body_elt = document.getElementsByTagName('body')[0] const password_container_elt = document.querySelector('#password-container') const password_form_elt = document.querySelector('#password-form') const master_password_elt = document.querySelector('#master-password') const master_visibility_elt = document.querySelector('#master-visibility') const entry_add_container_elt = document.querySelector('#entry-add-container') const logout_elt = document.querySelector('#logout') +const store_action_elt = document.querySelector('#store-action') +const export_elt = document.querySelector('#export') const entry_form_elt = document.querySelector('#entry-form') const entry_name_elt = document.querySelector('#entry-name') const entry_secret_elt = document.querySelector('#entry-secret') @@ -135,11 +136,11 @@ class Store if(this.key === null) throw `Cannot save store without key` let encoder = new TextEncoder(); - const entries = this.entries.map(entry => {return {name: entry.name, secret: entry.secret}}) const encrypted = await window.crypto.subtle.encrypt( {name: 'AES-GCM', iv: this.iv}, this.key, - encoder.encode(JSON.stringify(entries))) + encoder.encode(JSON.stringify( + this.entries.map(entry => {return {name: entry.name, secret: entry.secret}})))) await browser.storage.local.set({ iv: b32encode(this.iv), salt: b32encode(this.salt), @@ -169,6 +170,18 @@ class Store this.entries = [] this.key = null } + + export() + { + let export_elt = document.createElement('a') + export_elt.setAttribute('href', 'data:application/json,' + JSON.stringify( + this.entries.map(entry => {return {name: entry.name, secret: entry.secret}}))) + export_elt.setAttribute('download', 'uotp_export.json') + export_elt.style.display = 'none' + document.body.appendChild(export_elt) + export_elt.click() + document.body.removeChild(export_elt) + } } let store = new Store() @@ -304,6 +317,7 @@ class Entry done_elt.addEventListener('click', () => { this.name = name_input_elt.value + this.elements.title.textContent = this.name this.secret = secret_input_elt.value this.regenerateKey().then(() => { this.refresh(Math.floor(Date.now() / 30000)) }) store.save() @@ -340,6 +354,7 @@ async function addEntry(event) function start() { password_container_elt.classList.add('hidden') + store_action_elt.classList.remove('hidden') entry_add_container_elt.classList.remove('hidden') const now = Date.now() if(refresh_timeout !== null) @@ -353,6 +368,7 @@ function start() function stop() { + store_action_elt.classList.add('hidden') entry_add_container_elt.classList.add('hidden') password_container_elt.classList.remove('hidden') if(refresh_timeout !== null) @@ -376,6 +392,7 @@ async function init() background_port.postMessage({command: 'logout', password: master_password_elt.value}) stop() }) + export_elt.addEventListener('click', () => { store.export() }) background_port.postMessage({command: 'init'}) background_port.onMessage.addListener((state) => {