Commit 15436d3c authored by Jiří Helebrant's avatar Jiří Helebrant

Option page sync & updated styling

parent 3fdab27a
......@@ -4,24 +4,26 @@
<meta charset="utf-8" />
<title>DNSSEC Validator</title>
<link rel="stylesheet" type="text/css" href="../styles/options.css" />
<script src="../scripts/options.js"></script>
</head>
<body>
<form>
<section class="form-section">
<label><input type="checkbox" name="showAdvanced" /> show advanced options</label>
</section>
<section class="form-section">
<label><input type="checkbox" name="showAdvanced" /> show advanced options</label>
</section>
<section class="form-section">
<h3>Request blocking</h3>
<label
><input type="checkbox" name="blockInvalid" /> Block requests to
domains with an invalid DNSSEC signature</label
><input type="checkbox" name="blockInvalid" /> Block requests to domains with an invalid
DNSSEC signature</label
>
<label class="advanced"
><input type="checkbox" name="blockUnsigned" /> Block requests to
unsigned domains. <b>This will break most of the web.</b></label
><input type="checkbox" name="blockUnsigned" /> Block requests to unsigned domains.
<b>This will break most of the web.</b></label
>
<label
><input type="checkbox" name="blockShowBadge" /> Show an icon badge with blocked request count</label
><input type="checkbox" name="blockShowBadge" /> Show an icon badge with blocked request
count</label
>
</section>
<section class="form-section">
......@@ -60,9 +62,9 @@
</tr>
</table>
</section>
<section class="form-section" class="advanced">
<h3>DNSSEC whitelist</h3>
<table>
<section class="form-section whitelist" class="advanced">
<h3>DNSSEC whitelist</h3>
<!-- <table>
<tr>
<td><input type="text" /></td>
<td><button>&times;</button></td>
......@@ -72,7 +74,7 @@
<td><button>&times;</button></td>
</tr>
<tr><td><button>&plus;</button></td></tr>
</table>
</table> -->
</section>
<section class="form-section" class="advanced">
<h3>Icon colors</h3>
......@@ -104,10 +106,8 @@
</table>
</section>
<section class="button-section">
<button type="submit">Save</button
><button id="load-default">Reset to defaults</button>
<button type="submit">Save</button><button id="load-default">Reset to defaults</button>
</section>
</form>
<script src="../scripts/options.js"></script>
</body>
</html>
import '../styles/options.scss'
import config from '../config.json'
const createButton = (type, text, onclick) => {
const button = document.createElement('button')
......@@ -15,12 +16,44 @@ const saveOptions = event => {
console.log('saVE')
}
const createSection = (heading, contents) => {
const section = document.createElement('section')
section.className = 'form-section'
const head = document.createElement('h3')
head.innerText = heading
section.appendChild(head)
contents.forEach(item => section.appendChild(item))
return section
}
const createColorInputs = colors => {
const rows = []
Object.keys(colors).forEach(key => {
const row = document.createElement('label')
row.innerText = key
const input = document.createElement('input')
input.type = 'color'
input.value = colors[key]
row.appendChild(input)
rows.push(row)
})
return rows
}
const initOptionsPage = settings => {
const form = document.querySelector('form')
form.innerHTML = ''
console.log('S', form)
// form.innerHTML = ''
const formWhitelist = document.createElement('textarea')
formWhitelist.value = settings.dnssecWhitelist.join('\n')
form.appendChild(createSection('DNSSEC whitelist', [formWhitelist]))
form.appendChild(createSection('Colors', createColorInputs(settings.colors)))
form.addEventListener('submit', saveOptions)
form.appendChild(createButton('submit', 'Save'))
form.appendChild(createButton('button', 'Reset to defaults', () => console.log('reset')))
}
document.addEventListener('DOMContentLoaded', initOptionsPage)
document.addEventListener('DOMContentLoaded', () => initOptionsPage(config.defaultSettings))
......@@ -23,6 +23,10 @@ button {
margin-right: 1em;
}
textarea {
min-height: 8em;
}
label.advanced,
.form-section.advanced {
color: red;
......
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