mail4one/jsdev/index.html

474 lines
16 KiB
HTML
Raw Normal View History

2023-07-02 23:48:04 -04:00
<!doctype html>
<html>
<head>
2023-07-04 13:06:21 -04:00
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
2023-07-03 17:52:28 -04:00
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
2023-07-04 13:06:21 -04:00
<title>Mail4one Web config</title>
2023-07-02 23:48:04 -04:00
<script type="application/json" id="m41config">
{
"matches": [
{
"name": "mydomain",
"addr_rexs": [
".*@mydomain.com",
".*@m.mydomain.com"
]
},
{
"name": "personal",
"addrs": [
"first.last@mydomain.com",
"secret.name@mydomain.com"
]
}
],
"boxes": [
{
"name": "spam",
"rules": [
{
"match_name": "mydomain",
"negate": true,
"stop_check": true
}
]
},
{
"name": "important",
"rules": [
{
"match_name": "personal"
}
]
},
{
"name": "all",
"rules": [
{
"match_name": "default_match_all"
}
]
}
],
"users": [
{
"username": "mymobile",
"password_hash": "AFTY5EVN7AX47ZL7UMH3BETYWFBTAV3XHR73CEFAJBPN2NIHPWDZHV2UQSMSPHSQQ2A2BFQBNC77VL7F2UKATQNJZGYLCSU6C43UQDAQXWXSWNGAEPGIMG2F3QDKBXL3MRHY6K2BPID64ZR6LABLPVSF",
"mbox": "important"
},
{
"username": "mydesk",
"password_hash": "AFTY5EVN7AX47ZL7UMH3BETYWFBTAV3XHR73CEFAJBPN2NIHPWDZHV2UQSMSPHSQQ2A2BFQBNC77VL7F2UKATQNJZGYLCSU6C43UQDAQXWXSWNGAEPGIMG2F3QDKBXL3MRHY6K2BPID64ZR6LABLPVSF",
"mbox": "all"
}
]
}
</script>
2023-07-04 23:46:57 -04:00
<style>
2023-07-06 22:18:35 -04:00
td {
padding: 5px;
}
2023-07-06 21:16:47 -04:00
table {
2023-07-06 22:18:35 -04:00
border: 2px solid;
2023-07-06 21:16:47 -04:00
}
2023-07-06 22:18:35 -04:00
2023-07-06 21:16:47 -04:00
thead {
background-color: orange;
}
2023-07-06 22:18:35 -04:00
h1.page-title {
background-color: orange;
}
h3 {
text-align: center;
}
2023-07-05 22:27:09 -04:00
.outer {
display: flex;
justify-content: center;
background: grey;
}
2023-07-06 22:18:35 -04:00
2023-07-05 22:27:09 -04:00
.inner {
2023-07-06 21:16:47 -04:00
display: flex;
flex-direction: column;
align-items: center;
2023-07-06 22:18:35 -04:00
border: 2px solid;
background-color: lightyellow;
2023-07-06 21:16:47 -04:00
padding: 10px;
2023-07-06 22:18:35 -04:00
justify-content: space-around;
2023-07-06 21:16:47 -04:00
margin: 10px;
width: 1200px;
2023-07-05 22:27:09 -04:00
}
2023-07-04 23:46:57 -04:00
.m41-box {
display: grid;
2023-07-05 22:27:09 -04:00
grid-template-columns: 1fr 3fr;
margin: 10px;
// background-color: lightblue;
2023-07-04 23:46:57 -04:00
}
2023-07-06 21:16:47 -04:00
2023-07-06 22:18:35 -04:00
.multiline {
text-align: left;
padding: 5px;
padding-left: 15px;
}
2023-07-06 21:16:47 -04:00
#web-cfg-matches {
width: 90%;
text-align: center;
}
#web-cfg-matches tbody tr:nth-of-type(odd) {
background: lightblue;
}
#web-cfg-matches tbody tr:nth-of-type(even) {
background: lightgrey;
}
2023-07-06 22:18:35 -04:00
2023-07-04 23:46:57 -04:00
#web-cfg-boxes {
2023-07-06 21:16:47 -04:00
text-align: center;
width: 90%;
2023-07-05 22:27:09 -04:00
// display: grid;
// grid-template-columns: 1fr ;
2023-07-04 23:46:57 -04:00
//justify-content: space-around;
// justify-content: flex-start;
// background-color: blue;
}
2023-07-05 22:27:09 -04:00
2023-07-06 21:16:47 -04:00
#web-cfg-boxes tbody:nth-of-type(odd) {
2023-07-05 22:27:09 -04:00
background: lightblue;
}
2023-07-06 21:16:47 -04:00
#web-cfg-boxes tbody:nth-of-type(even) {
2023-07-05 22:27:09 -04:00
background: lightgrey;
}
2023-07-06 21:16:47 -04:00
#web-cfg-boxes tbody tr td div.dummy{
display: none;
}
#web-cfg-boxes tbody tr td div button.dummy {
display: none;
}
#web-cfg-boxes tbody:first-of-type tr td.box div button.up.dummy {
display: block;
}
#web-cfg-boxes tbody:first-of-type tr td.box div button.up.real {
display: none;
}
#web-cfg-boxes tbody:last-of-type tr td.box div button.down.dummy {
display: block;
}
#web-cfg-boxes tbody:last-of-type tr td.box div button.down.real {
display: none;
}
#web-cfg-boxes tbody:only-of-type tr td.box div.real {
display: none;
}
#web-cfg-boxes tbody:only-of-type tr td.box div.dummy {
2023-07-06 22:18:35 -04:00
display: flex;
2023-07-06 21:16:47 -04:00
}
2023-07-06 22:18:35 -04:00
td.box {
display: flex;
justify-content: center;
2023-07-06 21:16:47 -04:00
}
2023-07-04 23:46:57 -04:00
.button-group {
2023-07-05 22:27:09 -04:00
display: flex;
justify-content: center;
2023-07-04 23:46:57 -04:00
}
</style>
2023-07-02 23:48:04 -04:00
<script type="application/javascript">
2023-07-03 22:04:58 -04:00
"use strict"
2023-07-04 13:06:21 -04:00
2023-07-03 22:04:58 -04:00
// Globals
2023-07-06 21:16:47 -04:00
let server_config
2023-07-03 22:04:58 -04:00
let matches_table
let match_row_template
2023-07-06 21:16:47 -04:00
let boxes_table
2023-07-04 19:44:25 -04:00
let box_template
2023-07-06 21:16:47 -04:00
// let rule_template
2023-07-04 13:06:21 -04:00
function initGlobals() {
2023-07-06 21:16:47 -04:00
server_config = JSON.parse(document.getElementById('m41config').text)
2023-07-04 13:06:21 -04:00
matches_table = document.getElementById("web-cfg-matches")
match_row_template = document.getElementById("web-cfg-matches-row")
2023-07-06 21:16:47 -04:00
boxes_table = document.getElementById("web-cfg-boxes")
box_template = document.getElementById("web-cfg-box")
// rule_template = document.getElementById("web-cfg-boxes-rule-li")
2023-07-04 13:06:21 -04:00
}
2023-07-03 22:04:58 -04:00
function populate_match_table(matches_config) {
2023-07-04 13:06:21 -04:00
for (const { name: match_name, addrs, addr_rexs } of matches_config) {
2023-07-03 22:04:58 -04:00
const [match_type, match_values] = (() => {
2023-07-04 13:06:21 -04:00
2023-07-03 22:04:58 -04:00
if (addrs != undefined) {
return ["addrs", addrs]
} else {
return ["addr_rexs", addr_rexs]
}
2023-07-04 13:06:21 -04:00
})()
2023-07-02 23:48:04 -04:00
2023-07-03 17:52:28 -04:00
addMatchRow()
2023-07-04 13:06:21 -04:00
const last_row = matches_table.tBodies[0].lastElementChild
const [ ,name_cell, {firstElementChild: type_select}, value_cell ] = last_row.cells
2023-07-03 22:04:58 -04:00
name_cell.innerText = match_name
2023-07-04 13:06:21 -04:00
type_select.value = match_type
value_cell.innerText = match_values.join("\n")
2023-07-03 22:04:58 -04:00
}
}
function extract_match_table() {
2023-07-04 13:06:21 -04:00
2023-07-03 22:04:58 -04:00
let matches = []
for (let row of matches_table.tBodies[0].rows) {
2023-07-04 13:06:21 -04:00
const [ ,name_cell, {firstElementChild: type_select}, value_cell ] = row.cells
2023-07-03 22:04:58 -04:00
let m = {"name" : name_cell.innerText}
2023-07-04 13:06:21 -04:00
switch (type_select.value) {
case "addrs":
m["addrs"] = value_cell.innerText.split("\n")
break
case "addr_rexs":
m["addr_rexs"] = value_cell.innerText.split("\n")
break
2023-07-03 22:04:58 -04:00
}
matches.push(m)
2023-07-02 23:48:04 -04:00
}
2023-07-03 22:04:58 -04:00
return matches
2023-07-02 23:48:04 -04:00
}
2023-07-03 22:04:58 -04:00
2023-07-04 13:06:21 -04:00
function addMatchRow() {
let row_clone = match_row_template.content.cloneNode(true)
matches_table.tBodies[0].appendChild(row_clone)
}
2023-07-04 19:44:25 -04:00
function populate_boxes_list(boxes_config) {
2023-07-06 21:16:47 -04:00
2023-07-04 19:44:25 -04:00
for (const {name:box_name, rules} of boxes_config) {
2023-07-06 21:16:47 -04:00
2023-07-04 19:44:25 -04:00
addBox()
2023-07-06 21:16:47 -04:00
const tbody = boxes_table.lastElementChild
const box = tbody.firstElementChild
// console.log(box)
const [,
{children: [box_text, ]},
,
{firstElementChild: match_select},
{firstElementChild: negate_check},
{firstElementChild: stop_check},
] = box.children
box_text.value = box_name
2023-07-06 22:18:35 -04:00
2023-07-06 21:16:47 -04:00
const [first_rule, ...rest] = rules
const {match_name, negate = false, stop = false} = first_rule
match_select.value = match_name
negate_check.checked = negate
stop_check.checked = stop
for (const {match_name, negate = false, stop_check = false} of rest ) {
addRule(box)
const rule = tbody.lastElementChild
2023-07-04 19:44:25 -04:00
const [,
{firstElementChild: match_select},
{firstElementChild: negateCheck},
{firstElementChild: stopCheck}
] = rule.children
2023-07-06 21:16:47 -04:00
match_select.value = match_name
negate_check.checked = negate
stop_check.checked = stop
2023-07-04 19:44:25 -04:00
}
}
}
2023-07-06 21:16:47 -04:00
function addRule(box) {
box.parentElement.appendChild(box.cloneNode(true))
box.children[0].rowSpan++;
box.children[1].rowSpan++;
const newrule = box.parentElement.lastElementChild
newrule.removeClass("fist-tr")
newrule.firstElementChild.remove()
newrule.firstElementChild.remove()
}
2023-07-04 19:44:25 -04:00
function addBox() {
let box_clone = box_template.content.cloneNode(true)
2023-07-06 21:16:47 -04:00
boxes_table.appendChild(box_clone)
2023-07-04 19:44:25 -04:00
}
function moveUp(button) {
2023-07-04 23:46:57 -04:00
const li = button.parentElement.parentElement.parentElement
2023-07-04 19:44:25 -04:00
if (li.previousElementSibling != null) {
li.parentNode.insertBefore(li, li.previousElementSibling)
}
}
function moveDown(button) {
2023-07-04 23:46:57 -04:00
const li = button.parentElement.parentElement.parentElement
2023-07-04 19:44:25 -04:00
if (li.nextElementSibling != null) {
li.parentNode.insertBefore(li.nextElementSibling, li)
}
}
2023-07-03 22:04:58 -04:00
function main() {
2023-07-04 13:06:21 -04:00
initGlobals()
2023-07-06 21:16:47 -04:00
populate_match_table(server_config["matches"])
2023-07-03 22:04:58 -04:00
save()
2023-07-06 21:16:47 -04:00
document.getElementById("before").innerText = JSON.stringify(server_config["matches"], null, 2)
populate_boxes_list(server_config["boxes"])
2023-07-03 22:04:58 -04:00
}
function save() {
2023-07-04 13:06:21 -04:00
const matches = extract_match_table()
document.getElementById("after").innerText = JSON.stringify(matches, null, 2)
2023-07-02 23:48:04 -04:00
}
2023-07-03 22:04:58 -04:00
2023-07-02 23:48:04 -04:00
</script>
</head>
<body onload="main()">
<template id="web-cfg-matches-row">
<tr>
2023-07-04 13:06:21 -04:00
<td><button onClick="this.parentElement.parentElement.remove()"></button></td>
<td contentEditable></td>
2023-07-03 17:52:28 -04:00
<td>
<select>
<option value="addrs">List of addresses</option>
<option value="addr_rexs">List of regexes for addresses</option>
</select>
</td>
2023-07-06 22:18:35 -04:00
<td contentEditable class="multiline"></td>
2023-07-02 23:48:04 -04:00
</tr>
</template>
2023-07-06 21:16:47 -04:00
<template id="web-cfg-box">
<tbody>
<tr>
<td class="box">
<div class="button-group dummy">
<button disabled></button>
<button disabled></button>
<button disabled></button>
</div>
<div class="button-group real">
<button onClick="this.parentElement.parentElement.parentElement.parentElement.remove()"></button>
2023-07-06 22:18:35 -04:00
<button onClick="moveBoxUp(this)" class="real up"></button>
2023-07-06 21:16:47 -04:00
<button disabled class="dummy up"></button>
2023-07-06 22:18:35 -04:00
<button onClick="moveBoxDown(this)" class="real down"></button>
2023-07-06 21:16:47 -04:00
<button disabled class="dummy down"></button>
</div>
2023-07-06 22:18:35 -04:00
<button onClick="addRule(this.parentElement.parentElement)">+</button>
2023-07-06 21:16:47 -04:00
</td>
2023-07-06 22:18:35 -04:00
<td contentEditable>
2023-07-06 21:16:47 -04:00
<input type="text" contentEditable>
</td>
<td class="rule">
<div class="button-group dummy">
<button disabled></button>
<button disabled></button>
<button disabled></button>
</div>
<div class="button-group real">
<button onClick="this.parentElement.parentElement.parentElement.remove()"></button>
2023-07-06 22:18:35 -04:00
<button onClick="moveRuleUp(this)" class="real up"></button>
2023-07-06 21:16:47 -04:00
<button disabled class="dummy up"></button>
2023-07-06 22:18:35 -04:00
<button onClick="moveRuleDown(this)" class="real down"></button>
2023-07-06 21:16:47 -04:00
<button disabled class="dummy down"></button>
</div>
</td>
<td>
<select></select>
</td>
<td>
<input type=checkbox>
</td>
<td>
<input type=checkbox>
</td>
</tr>
</tbody>
2023-07-04 19:44:25 -04:00
</template>
2023-07-05 22:27:09 -04:00
<div class="outer">
<div class="inner">
2023-07-06 22:18:35 -04:00
<h1 class="page-title">Mail4one Web config</h1>
<div id="top-menu">
<button onClick="save()">Previous</button>
<button onClick="save()">Matches</button>
<button onClick="save()">Boxes</button>
<button onClick="save()">Users</button>
<button onClick="save()">JSON</button>
<button onClick="save()">Next</button>
</div>
<div id="match-page">
<h3> Matches </h3>
<table id="web-cfg-matches">
<thead>
<tr>
<th>
<button onClick="addMatchRow()">+</button>
</th>
<th>Match</th>
<th>Type</th>
<th>Values</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div id=box-page">
<h3>Boxes</h3>
<table id="web-cfg-boxes">
<thead>
<tr>
<th><button onClick="addBox()">+</button></th>
<th>Mailbox</th>
<th></th>
<th>Match</th>
<th>Invert</th>
<th>Stop</th>
</tr>
</thead>
</table>
</div>
<hr>
<h3>Before</h3>
<pre id="before"></pre>
<hr>
<h3>After</h3>
<pre id="after"></pre>
<hr>
2023-07-05 22:27:09 -04:00
</div>
</div>
2023-07-02 23:48:04 -04:00
</body>
</html>