Commit 06dac611 authored by Adrien Dorsaz's avatar Adrien Dorsaz

options: render page using mustache.js and i18n

parent 0ed0bbd1
......@@ -12,5 +12,55 @@
"sidebarTitle": {
"description": "Title shown in the sidebar panel.",
"message": "XMPP Pane"
},
"authenticate": {
"description": "Label used to describe authentication part of options",
"message": "Authenticate"
},
"xmpp-identifier-label": {
"description": "Label used to ask a XMPP Identifier.",
"message": "XMPP Identifier"
},
"xmpp-identifier-placeholder":{
"description": "Placeholder used to show an example of XMPP Identifier",
"message": "john.smith@example.com"
},
"password-label": {
"description": "Label used to ask a password.",
"message": "Password"
},
"password-placeholder": {
"description": "Placeholder used to explain the password field should be filled only to set or update it.",
"message": "Fill password only to set or update it."
},
"websocket-label": {
"description": "Label used to ask the WebSocket URL.",
"message": "Websocket URL"
},
"websocket-placeholder": {
"description": "Placeholder showing an example of WebSocket URL.",
"message": "wss://example.com"
},
"websocket-help": {
"description": "Explain when the Websocket URL is optional",
"message": "Optional when it is discoverable from a well-known URL on the XMPP domain."
},
"optional": {
"description": "optional",
"message": "optional"
},
"save-start": {
"description": "Label for button Save and Start",
"message": "Save and start"
}
}
......@@ -20,6 +20,7 @@ input
.explain
{
border-bottom: 1px dashed gray;
font-size : 0.8rem;
}
.explain:hover
......
......@@ -8,19 +8,61 @@
</head>
<body>
<div id="target"></div>
<script id="form" type="x-tmpl-mustache">
<form>
<fieldset class="browser-style">
<legend>Authentication</legend>
<label class="browser-style-label" for="jid">XMPP identifier</label>
<input id="jid" type="email" placeholder="account@im.example.org" />
<label class="browser-style-label" for="password">Password</label>
<input id="password" type="password" placeholder="Fill this field only to set or update password."/>
<label class="browser-style-label" for="websocket">WebSocket URL <span class="explain" title="If discoverable from wellknown URL on the domain name." style="font-size:0.8rem">(optional)</span></label>
<input id="websocket" type="text" placeholder="wss://example.com:5280/"></input>
<legend>{{authenticate}}</legend>
<label
class="browser-style-label"
for="jid">
{{xmpp-identifier-label}}
</label>
<input id="jid"
type="email"
placeholder="{{xmpp-identifier-placeholder}}"
value="{{jid}}" />
<label
class="browser-style-label"
for="password">
{{password-label}}
</label>
<input
id="password"
type="password"
placeholder="{{password-placeholder}}"/>
<label
class="browser-style-label"
for="websocket">
{{websocket-label}}
<span
class="explain"
title="{{websocket-help}}" >
({{optional}})
</span>
</label>
<input
id="websocket"
type="text"
placeholder="{{websocket-placeholder}}">
</input>
</fieldset>
<button type="submit" class="browser-style default">Save and start</button>
<button
type="submit"
class="browser-style default">
{{save-start}}
</button>
</form>
</script>
<script src="../3rdparty/mustache.js/mustache.js"></script>
<script src="options.js"></script>
</body>
</html>
......@@ -36,15 +36,42 @@ function saveOptions(e) {
});
}
function renderForm() {
let optionForm = Mustache.render(template, optionStrings);
document.querySelector("#target").innerHTML = optionForm;
document.querySelector("form").addEventListener("submit", saveOptions);
}
function restoreOptions() {
function setJidInput(result) {
document.querySelector("#jid").value = result.jid || "";
optionStrings['jid'] = result.jid;
}
let getJid = browser.storage.local.get("jid");
getJid.then(setJidInput);
getJid.then(setJidInput).then(renderForm);
}
// Render the page
let optionStrings = {
'authenticate': '',
'xmpp-identifier-label': '',
'xmpp-identifier-placeholder': '',
'password-label': '',
'password-placeholder': '',
'websocket-label': '',
'websocket-placeholder': '',
'websocket-help': '',
'optional': '',
'save-start': ''
}
for (const string of Object.keys(optionStrings)) {
optionStrings[string] = browser.i18n.getMessage(string);
}
let template = document.querySelector("#form").innerHTML;
// Add logic to the form
document.addEventListener("DOMContentLoaded", restoreOptions);
document.querySelector("form").addEventListener("submit", saveOptions);
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment