greg/urbit-browser-manager
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

React-ify urbit credentials form

Browse Source
This commit is contained in:
ronreg-ribdev 2021-01-03 01:29:54 -08:00
parent 703a0cd630
commit ed58ab0c0f
3 changed files with 89 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
extension/options/index.js Normal file
View File

@ -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 (
<div style={style}>
<form>
<label>
Urbit ID: <pre>~</pre>
<input type="text" name="urbitId" value={this.state.urbitId} onChange={this.handleChange} />
</label>
<br/>
<label>
Urbit code:
<input type="password" name="urbitCode" value={this.state.urbitCode} onChange={this.handleChange} />
</label>
<button type="button" name="saveButton" onClick={this.handleSave}>Save</button>
<button type="button" name="resetButton" onClick={this.handleChange}>Reset</button>
<br/>
<button type="button" name="clearButton" onClick={this.handleChange}>Remove credentials</button>
</form>
</div>
);
}
}
const Main = () => {
return (
<>
<h1>Urbit credentials</h1>
<UrbitLoginForm />
</>
);
};
ReactDOM.render(
<Main />,
document.querySelectorAll("main")[0]);

14
extension/options/options.html
View File

@ -6,17 +6,7 @@
</head>
<body>
<form>
<label>Urbit ID</label>
<input type="text" id="urbitId"/>
<br/>
<label>Code</label>
<input id="urbitCode" type="password" id="urbit_code"/>
<br/>
<button id="saveButton">Save</button>
<button id="clearButton">Clear</button>
</form>
<script src="options.js"></script>
<main></main>
<script src="index.js"></script>
</body>
</html>

28
extension/options/options.js
View File

@ -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");
});