Files
Alfis/src/webview/index.html
T

224 lines
9.9 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
2021-03-24 19:06:22 +01:00
<html class="is-clipped">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
2021-02-17 14:53:45 +01:00
<title>ALFIS</title>
{styles}
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/font-awesome-line-awesome/css/all.min.css">
{scripts}
</head>
<body onload="onLoad();">
2021-03-24 19:06:22 +01:00
<div class="container">
<!-- Credentials (Key management) -->
<div class="content">
<label class="label">Credentials</label>
<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>
<span class="icon is-small is-left">
<i class="fas fa-lock"></i>
</span>
</div>
<div class="buttons has-addons">
<button class="button is-info is-light" onclick="loadKey();">Load key</button>
<button class="button is-info is-light" id="save_key" onclick="saveKey();" disabled>Save key</button>
<button class="button is-info" onclick="createKey();">Mine new key</button>
</div>
</div>
<p class="help">To mine domains (or zones) you need to mine a strong pair of keys.</p>
</div>
<!-- Domain mining -->
<div class="content">
<label class="label">Mine domain name</label>
<div class="field is-grouped">
<div class="control is-expanded has-icons-left">
<input class="input is-expanded" type="text" placeholder="example.tld" id="new_domain" oninput="onDomainChange(this)">
<span class="icon is-small is-left">
<i class="fas fa-globe"></i>
</span>
</div>
<div class="buttons has-addons">
<button id="add_record_button" class="button is-info is-light" onclick="showNewRecordDialog();">Add record</button>
<button id="new_domain_button" class="button is-info" onclick="createDomain();">Mine domain</button>
</div>
</div>
<p class="help">Enter domain name, add some DNS-records, then hit the "Mine domain" button!</p>
<div id="domain_records">
<!-- Here will be our domain records, added by dialog -->
</div>
</div>
<!-- Zone mining -->
<div class="content">
<label class="label">Mine new zone</label>
<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()">
<span class="icon is-small is-left">
<i class="fas fa-map"></i>
</span>
</div>
<div class="control has-icons-left">
<input class="input" type="number" placeholder="Difficulty: 20-28" id="new_zone_difficulty" name="Just a name" oninput="onZoneChange()">
<span class="icon is-small is-left">
<i class="fas fa-fire"></i>
</span>
</div>
<div class="buttons has-addons">
<button class="button is-info" id="new_zone_button" onclick="createZone();">Mine zone</button>
</div>
</div>
<p class="help">If you feel that we need another zone you can mine that too. Just select a name, a difficulty for domains in that zone, and hit "Mine zone".</p>
</div>
<!-- Help -->
2021-03-25 13:48:07 +01:00
<div class="content center is-hidden" id="help">
2021-03-24 19:06:22 +01:00
<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>
</div>
<div id="modal_dialog" class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<div class="box">
<p id="modal_text" class="is-centered">Do you really want to cancel mining?</p>
<br/>
<div class="buttons is-grouped is-centered">
<button class="button is-link" id="modal_positive_button" onclick="positiveButton();">Ok</button>
<button class="button is-link is-light" id="modal_negative_button" onclick="cancelButton();">Cancel</button>
</div>
</div>
</div>
</div>
<div id="new_record_dialog" class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<div class="box">
<div class="columns">
<div class="column">
<div class="field">
<label class="label">Name</label>
<div class="control">
<input class="input" type="text" placeholder="www" id="record_name">
</div>
</div>
</div>
<div class="column is-narrow">
2021-03-24 19:06:22 +01:00
<div class="control">
<label class="label">Type</label>
<div class="select">
<select id="record_type">
<option>A</option>
<option>AAAA</option>
<option>CNAME</option>
<option>NS</option>
<option>MX</option>
<option>SRV</option>
<option>TXT</option>
<!--<option>SOA</option>
<option>OPT</option>-->
</select>
</div>
</div>
</div>
</div>
<div class="columns">
<div class="column">
<div class="field">
<label class="label">TTL</label>
<div class="control">
<input class="input" type="text" placeholder="3600" id="record_ttl" value="3600">
</div>
</div>
</div>
<div class="column">
<div class="field">
<label class="label">Priority</label>
<div class="control">
<input class="input" type="number" placeholder="10" id="record_priority">
</div>
</div>
</div>
<div class="column">
<div class="field">
<label class="label">Weight</label>
<div class="control">
<input class="input" type="number" placeholder="10" id="record_weight">
</div>
</div>
</div>
<div class="column">
<div class="field">
<label class="label">Port</label>
<div class="control">
<input class="input" type="number" placeholder="5222" id="record_port">
</div>
</div>
</div>
</div>
<div class="field">
<label class="label">Data/host</label>
<div class="control">
<input class="input" type="text" placeholder="1.2.3.4" id="record_data">
</div>
</div>
<br/>
<div class="buttons is-grouped is-centered">
2021-03-24 19:06:22 +01:00
<button class="button is-info" id="new_record_positive_button">Add</button>
<button class="button is-link is-light" id="new_record_negative_button">Cancel</button>
</div>
</div>
</div>
</div>
<div class="notification is-warning is-hidden" id="notification_warning">
2021-03-25 20:55:09 +01:00
<button class="delete" id="warning_close"></button>
<p id="warning_text"></p>
</div>
2021-03-25 20:55:09 +01:00
<div class="notification is-success is-hidden" id="notification_success">
<button class="delete" id="success_close"></button>
<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">
2021-03-21 00:19:09 +01:00
<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>