From ed58ab0c0fddede4958a8c4ce000c4e0d7bf6027 Mon Sep 17 00:00:00 2001 From: ronreg-ribdev Date: Sun, 3 Jan 2021 01:29:54 -0800 Subject: [PATCH] React-ify urbit credentials form --- extension/options/index.js | 87 ++++++++++++++++++++++++++++++++++ extension/options/options.html | 14 +----- extension/options/options.js | 28 ----------- 3 files changed, 89 insertions(+), 40 deletions(-) create mode 100644 extension/options/index.js delete mode 100644 extension/options/options.js diff --git a/extension/options/index.js b/extension/options/index.js new file mode 100644 index 0000000..f7ccf4f --- /dev/null +++ b/extension/options/index.js @@ -0,0 +1,87 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; + +const browser = require("webextension-polyfill"); + +class UrbitLoginForm extends React.Component { + constructor(props) { + super(props); + this.setStateFromBrowserStorage = this.setStateFromBrowserStorage.bind(this); + this.handleChange = this.handleChange.bind(this); + this.handleSave = this.handleSave.bind(this); + + this.state = { urbitId: "", urbitCode: "", savedUrbitId: "", savedUrbitCode: "" }; + this.setStateFromBrowserStorage(); + } + + setStateFromBrowserStorage() { + browser.storage.sync.get("credentials") + .then((result) => { + if (result.credentials && result.credentials.urbitId && result.credentials.urbitCode) { + const urbitId = result.credentials.urbitId; + const urbitCode = result.credentials.urbitCode; + this.setState({urbitId, urbitCode, savedUrbitId: urbitId, savedUrbitCode: urbitCode}); + } + }); + } + + handleChange(evt) { + const name = evt.target.name + const value = evt.target.value; + + if (name === "urbitId") { + this.setState({urbitId: value}); + } else if (name === "urbitCode") { + this.setState({urbitCode: value}); + } else if (name === "resetButton") { + this.setState({urbitId: this.state.savedUrbitId, urbitCode: this.state.savedUrbitCode}); + } else if (name === "clearButton") { + browser.storage.sync.remove("credentials"); + this.setState({ urbitId: "", urbitCode: "", savedUrbitId: "", savedUrbitCode: "" }); + } + } + + handleSave() { + const urbitId = this.state.urbitId; + const urbitCode = this.state.urbitCode; + browser.storage.sync.set({credentials: {urbitId, urbitCode}}); + this.setStateFromBrowserStorage(); + } + + render() { + const changed = !(this.state.urbitId === this.state.savedUrbitId && this.state.urbitCode === this.state.savedUrbitCode); + const style = { backgroundColor: changed ? "yellow" : "inherit" }; + return ( +
+
+ +
+ + + +
+ +
+
+ ); + } +} + +const Main = () => { + return ( + <> +

Urbit credentials

+ + + ); +}; + +ReactDOM.render( +
, +document.querySelectorAll("main")[0]); diff --git a/extension/options/options.html b/extension/options/options.html index 1c83aba..eb334fb 100644 --- a/extension/options/options.html +++ b/extension/options/options.html @@ -6,17 +6,7 @@ -
- - -
- - - -
- - -
- +
+ diff --git a/extension/options/options.js b/extension/options/options.js deleted file mode 100644 index 47795d0..0000000 --- a/extension/options/options.js +++ /dev/null @@ -1,28 +0,0 @@ -const browser = require("webextension-polyfill"); - -const urbitIdSelector = document.querySelector("#urbitId"); -const urbitCodeSelector = document.querySelector("#urbitCode"); - -document.addEventListener('DOMContentLoaded', () => { - browser.storage.sync.get("credentials") - .then((result) => { - if (result.credentials && result.credentials.urbitId && result.credentials.urbitCode) { - urbitIdSelector.value = result.credentials.urbitId; - urbitCodeSelector.value = result.credentials.urbitCode; - } else { - urbitIdSelector.value = ""; - urbitCodeSelector.value = ""; - } - }); -}); - -document.querySelector("#saveButton").addEventListener("click", () => { - const urbitId = urbitIdSelector.value; - const urbitCode = urbitCodeSelector.value; - browser.storage.sync.set({credentials: {urbitId, urbitCode}}); -}); - -document.querySelector("#clearButton").addEventListener("click", () => { - browser.storage.sync.remove("credentials"); -}); -