From ff64cf65b40ca50c1c324721140d95f201a04395 Mon Sep 17 00:00:00 2001 From: Eduar Ursu Date: Thu, 1 Oct 2020 02:57:53 +0200 Subject: [PATCH] v0.0.2 - Added style to option page - Added toast message on actions - Options page with inputs to configure the sync - Buttons to copy and paste the key - Button to save settings( with validating) --- options.html | 258 ++++++++++++++++++++++++++++++++++++++++++++++++++- options.js | 140 +++++++++++++++++++++++----- popup.css | 1 + 3 files changed, 374 insertions(+), 25 deletions(-) diff --git a/options.html b/options.html index 8d27edc..a33085a 100644 --- a/options.html +++ b/options.html @@ -1,15 +1,269 @@ + Sync - Sttings + + +
+
This is an Alert!
+
- Link new device -
+
+
+

To sync a new device enter the same key on all the devices

+
+
+ + Sycn Setup +
+
+ +
+
+ + + +
+
+ +
+
+
+
+ \ No newline at end of file diff --git a/options.js b/options.js index 1a257fd..53ff920 100644 --- a/options.js +++ b/options.js @@ -1,26 +1,120 @@ - -document.getElementById('add_new_device_button').addEventListener('click', function (e) { - var generated_html = ''; - generated_html += '

To sync a new device enter the same key on all the devices:

Your current key is: '; - generated_html += '
' + localStorage.passphrase + '
'; - // generated_html += '
'; - document.getElementById('content').innerHTML = generated_html; - alert('You are about to share bookmarks and tabs with other devices'); - var passphrase = prompt("Copy-paste the same key on all your devices", localStorage.passphrase); - if (passphrase == null || !window.atob(passphrase)) - { - alert('Incorrect key'); - return; +//Custom Toast class for notification +function Notif(option) { + //Configuration + var el = this; + el.self = document.querySelector('.toast-message'); + el.message = document.querySelector('.message'); + el.top = option.topPos; + el.classNames = option.classNames; + el.autoClose = (typeof option.autoClose === "boolean") ? option.autoClose : false; + el.autoCloseTimeout = (option.autoClose && typeof option.autoCloseTimeout === "number") ? option.autoCloseTimeout : 3000; + //Methods + el.reset = function () { + (el.message).innerHTML = ""; + el.self.classList.remove(el.classNames); } - localStorage.passphrase = passphrase; - var default_devicename = "Device-" + Math.random(); - if (typeof localStorage.deviceId != 'undefined') - default_devicename = localStorage.deviceId; - var deviceid = prompt("Enter device name", default_devicename); - if (deviceid == null) - { - alert('Incorrect device name'); - return; + el.showN = function (msg, type) { + el.reset(); + el.message.innerHTML = msg; + el.self.style.top = el.top; + el.self.classList.add(type); + + if (el.autoClose) { + setTimeout(function () { + el.hideN(); + }, el.autoCloseTimeout); + } } + el.hideN = function () { + el.self.style.top = '-100%'; + el.reset(); + }; +} +//Initialize a Toast message object +var notification = new Notif({ + topPos: '200px', + classNames: 'success', + autoClose: true, + autoCloseTimeout: 2000 +}); + +//Get sync key +var passphrase = localStorage.passphrase; +//Get device name (id) +var deviceId = localStorage.deviceId; + +if (typeof localStorage.deviceId == 'undefined') { + deviceId = "Device-" + Math.random(); localStorage.deviceId = deviceid; - }); \ No newline at end of file +} + + + + + +//Get input elements +const input_synckey = document.getElementById("sync-key"); +const input_devicename = document.getElementById("device-name"); +const save_buttno = document.getElementById("save"); + + + +//Function to paste from clipboard +async function pasteFromClip () { + const text = await navigator.clipboard.readText(); + input_synckey.value = text; + notification.showN('Sync key has been pasted from clipboard !', 'success'); + } +// Function to copy to clipboard +function copyToClip(str) { + const el = document.createElement('textarea'); + el.value = str; + el.setAttribute('readonly', ''); + el.style.position = 'absolute'; + el.style.left = '-9999px'; + document.body.appendChild(el); + const selected = + document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false; + el.select(); + document.execCommand('copy'); + el.parentNode.removeChild(el); + if (selected) { + document.getSelection().removeAllRanges(); + document.getSelection().addRange(selected); + } + notification.showN('Your key has been copied to clipboard !', 'success'); +} + +// set-up values and initialize listeners +input_devicename.value = deviceId; + +input_synckey.value = passphrase; + +document.getElementById("copy-key").addEventListener('click', () => { + copyToClip(passphrase); +}); +document.getElementById("save").addEventListener('click', () => { + save_settings(); +}); +document.getElementById("paste-key").addEventListener('click', () => { + pasteFromClip(); +}); + + +//Function to save settings( to localstorage) +function save_settings() { + let key =input_synckey.value.trim(); + if (key.length == 0 || !window.atob(input_synckey.value)) { + notification.showN('Sync key not valid', 'danger'); + return; + } + //Remove white spaces at start/end + let id = input_devicename.value.trim(); + if (id.length==0) {//Check if device name is not empty + notification.showN('Invalid device name', 'danger'); + return; + } + localStorage.passphrase = input_synckey.value; + localStorage.deviceId = input_devicename.value; + notification.showN('Settings saved correctly!', 'success'); +} \ No newline at end of file diff --git a/popup.css b/popup.css index fb5ebf5..2815fbd 100644 --- a/popup.css +++ b/popup.css @@ -1,5 +1,6 @@ *{ box-sizing: border-box; + border-spacing: 0; } body { min-width: 300px;