Sweetbread/Alfis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactored interface. Added log events to Events tab.

Browse Source
This commit is contained in:
Revertron
2021-04-06 00:31:50 +02:00
parent 33a52c8e8a
commit 7830681b38
5 changed files with 186 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/webview/index.html
+44 -43
View File
@@ -9,9 +9,9 @@
</head>
<body onload="onLoad();">
<div class="container">
<div class="main">
<!-- Tabs -->
<div class="tabs is-centered is-boxed">
<div class="row header tabs is-centered is-boxed">
<ul>
<li class="tab is-active">
<a onclick="openTab(this, 'tab_credentials')">
@@ -57,7 +57,7 @@
</div>
<!-- Credentials (Key management) -->
<div class="tab content" id="tab_credentials">
<div class="tab row page" id="tab_credentials">
<div class="field is-grouped">
<div class="control is-expanded has-icons-left">
<input class="input is-expanded" type="text" id="public_key_hash" placeholder="No key loaded" readonly>
@@ -75,7 +75,7 @@
</div>
<!-- Domain mining -->
<div class="tab content is-hidden" id="tab_domains">
<div class="tab row page is-hidden" id="tab_domains">
<div class="field is-grouped is-fullwidth">
<div class="control field has-addons is-expanded">
<div class="control is-expanded has-icons-left">
@@ -113,13 +113,13 @@
</div>
<p class="help">Enter domain name, add some DNS-records, then hit the "Mine domain" button!</p>
<div id="domain_records">
<div class="list pb-3" id="domain_records">
<!-- Here will be our domain records, added by dialog -->
</div>
</div>
<!-- Zone mining -->
<div class="tab content is-hidden" id="tab_zones">
<div class="tab row page is-hidden" id="tab_zones">
<div class="field is-grouped">
<div class="control is-expanded has-icons-left">
<input class="input" type="text" placeholder="ygg" id="new_zone" oninput="onZoneChange()">
@@ -141,27 +141,48 @@
</div>
<!-- Events and notifications -->
<div class="tab content is-hidden" id="tab_events">
<div class="tab row page is-hidden list" id="tab_events">
<!-- TODO -->
</div>
<!-- Help -->
<div class="tab content is-hidden" id="tab_help">
<h1>Welcome to ALFIS!</h1>
<p>ALFIS stands for Alternative Free Identity System.</p>
<p>It gives you an opportunity to create your own domains and use them in decentralized networks, store security certificates for browsers to trust without any centralized CA.</p>
<h2>How this system works?</h2>
<h3>If you just want to be able to resolve our domains</h3>
<p>Carefully configure DNS section in <strong>alfis.toml</strong> and start ALFIS with <code>-n</code> command line switch.
It will start without GUI, but will work as local DNS-resolver.</p>
<h3>If you want to get your own domain</h3>
<ul>
<li>Generate a keypair in "Manage keys" part (you need just one for any number of domains)</li>
<li>Check available zones (for now we have a test zone <code>.yy</code>). In future version a list of available zones will be somewhere here</li>
<li>Go to "Mine domain" part and enter desired domain in first field, if it is not red - you can create it</li>
<li>Carefully add needed DNS-records (you can add them later, but you will need to mine it again)</li>
<li>Just click on "Mine domain" and wait for it, your domain (when properly cooked) will propagate to all blockchain nodes automatically</li>
</ul>
<div class="tab row page is-hidden" id="tab_help">
<div class="content">
<h2>Welcome to ALFIS!</h2>
<p>ALFIS stands for Alternative Free Identity System.</p>
<p>It gives you an opportunity to create your own domains and use them in decentralized networks, store security certificates for browsers to trust without any centralized CA.</p>
<h3>How this system works?</h3>
<h4>If you just want to be able to resolve our domains</h4>
<p>Carefully configure DNS section in <strong>alfis.toml</strong> and start ALFIS with <code>-n</code> command line switch.
It will start without GUI, but will work as local DNS-resolver.</p>
<h4>If you want to get your own domain</h4>
<ul>
<li>Generate a keypair in "Manage keys" part (you need just one for any number of domains)</li>
<li>Go to "Mine domain" part and enter desired domain in first field, choose appropriate zone from dropdown, if it is not red - you can create it</li>
<li>Carefully add needed DNS-records (you can add them later, but you will need to mine it again)</li>
<li>Just click on "Mine domain" and wait for it, your domain (when properly cooked) will propagate to all blockchain nodes automatically</li>
</ul>
</div>
</div>
<div class="row status is-family-code">
<div class="level">
<div class="level-left">
<div class="level-item" id="indicator_parent">
<div class="busy_indicator busy_blue" id="busy_indicator" onclick="miningIndicatorClick(this)">
<span></span>
<span></span>
</div>
</div>
<div class="level-item">
<div id="status_bar_left">Connecting...</div>
</div>
</div>
<div class="level-right">
<div class="level-item" id="status_bar_right">No data</div>
</div>
</div>
</div>
</div>
@@ -270,25 +291,5 @@
<p id="success_text"></p>
</div>
<div class="footer is-family-code">
<div class="level">
<div class="level-left">
<div class="level-item" id="indicator_parent">
<div class="busy_indicator busy_blue" id="busy_indicator" onclick="miningIndicatorClick(this)">
<span></span>
<span></span>
</div>
</div>
<div class="level-item">
<div id="status_bar_left">Connecting...</div>
</div>
</div>
<div class="level-right">
<div class="level-item" id="status_bar_right">No data</div>
</div>
</div>
</div>
</body>
</html>
src/webview/scripts.js
+19 -3
View File
@@ -105,9 +105,9 @@ function openTab(element, tabName) {
var i, tabContent, tabLinks;
// Get all elements with class="content" and hide them
tabContent = document.getElementsByClassName("tab content");
tabContent = document.getElementsByClassName("tab row page");
for (i = 0; i < tabContent.length; i++) {
tabContent[i].className = "tab content is-hidden";
tabContent[i].className = "tab row page is-hidden";
}
// Get all elements with class="tab" and remove the class "is-active"
@@ -117,7 +117,7 @@ function openTab(element, tabName) {
}
// Show the current tab, and add an "is-active" class to the button that opened the tab
document.getElementById(tabName).className = "tab content";
document.getElementById(tabName).className = "tab row page";
element.parentElement.className = "tab is-active";
refreshRecordsList();
}
@@ -315,12 +315,28 @@ function setRightStatusBarText(text) {
bar.innerHTML = text;
}
function addEvent(type, time, message) {
var t = "";
if (type == 'warn') {
t = "is-warning";
} else if (type == 'fail') {
t = "is-danger";
} else if (type == 'luck') {
t = "is-success";
}
var buf = "<article class=\"message mb-1 {1}\"><div class=\"message-body px-2 py-1\"><strong>{2}</strong>&nbsp;&nbsp;{3}</div></article>".replace("{1}", t).replace("{2}", time).replace("{3}", message);
var tab_events = document.getElementById("tab_events");
tab_events.innerHTML = tab_events.innerHTML + buf;
}
function keystoreChanged(path, pub_key, hash) {
if (path == '') {
path = "In memory";
}
var public_key_hash = document.getElementById("public_key_hash");
public_key_hash.value = hash;
public_key_hash.title = path + "\n" + pub_key;
var save_key = document.getElementById("save_key");
save_key.disabled = false;
src/webview/styles.css
+41 -9
View File
@@ -1,8 +1,45 @@
html {
overflow-y: auto;
min-width: 768px;
overflow-y: hidden;
}
html,
body {
height: 100%;
margin: 0;
}
.main {
display: flex;
flex-flow: column;
height: 100%;
padding-top: 10pt;
}
.main .row {
/*border: 1px dotted grey;*/
}
.main .row.header {
flex: 0 1 auto;
}
.main .row.page {
display: flex;
flex-flow: column;
flex: 1 1 auto;
margin-left: 10pt;
margin-right: 10pt;
overflow-y: auto;
}
.main .row.status {
flex: 0 1 auto;
background-color: #f4f4f4;
padding: 0.2rem 0.5rem 0.2rem 0.5rem;
}
/* ========================================== */
.container {
margin: 10pt;
}
@@ -25,13 +62,8 @@ html {
right: 10pt;
}
.footer {
background-color: #f4f4f4;
padding: 0.2rem 0.5rem 0.2rem 0.5rem;
width: 100%;
position: absolute;
bottom: 0px;
z-index: 9;
.list {
overflow-y: auto;
}
path {