mirror of https://github.com/Revertron/Alfis
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
313 lines
17 KiB
HTML
313 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>ALFIS</title>
|
|
{scripts}
|
|
{styles}
|
|
</head>
|
|
<body onload="onLoad();">
|
|
|
|
<div class="main">
|
|
<!-- Tabs -->
|
|
<div class="row header tabs is-centered is-boxed">
|
|
<ul>
|
|
<li class="tab is-active">
|
|
<a onclick="openTab(this, 'tab_credentials')">
|
|
<span class="icon">
|
|
<svg viewBox="0 0 24 24" style="width: 20px; height: 20px;"><path d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1M12,3.18L19,6.3V11.22C19,12.92 18.5,14.65 17.65,16.17C16,14.94 13.26,14.5 12,14.5C10.74,14.5 8,14.94 6.35,16.17C5.5,14.65 5,12.92 5,11.22V6.3L12,3.18M12,6A3.5,3.5 0 0,0 8.5,9.5A3.5,3.5 0 0,0 12,13A3.5,3.5 0 0,0 15.5,9.5A3.5,3.5 0 0,0 12,6M12,8A1.5,1.5 0 0,1 13.5,9.5A1.5,1.5 0 0,1 12,11A1.5,1.5 0 0,1 10.5,9.5A1.5,1.5 0 0,1 12,8M12,16.5C13.57,16.5 15.64,17.11 16.53,17.84C15.29,19.38 13.7,20.55 12,21C10.3,20.55 8.71,19.38 7.47,17.84C8.37,17.11 10.43,16.5 12,16.5Z"></path></svg>
|
|
</span>
|
|
<span>Credentials</span>
|
|
</a>
|
|
</li>
|
|
<li class="tab">
|
|
<a onclick="openTab(this, 'tab_domains')">
|
|
<span class="icon">
|
|
<svg viewBox="0 0 24 24" style="width: 20px; height: 20px;"><path d="M17.9,17.39C17.64,16.59 16.89,16 16,16H15V13A1,1 0 0,0 14,12H8V10H10A1,1 0 0,0 11,9V7H13A2,2 0 0,0 15,5V4.59C17.93,5.77 20,8.64 20,12C20,14.08 19.2,15.97 17.9,17.39M11,19.93C7.05,19.44 4,16.08 4,12C4,11.38 4.08,10.78 4.21,10.21L9,15V16A2,2 0 0,0 11,18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg>
|
|
</span>
|
|
<span>Domains</span>
|
|
</a>
|
|
</li>
|
|
<li class="tab">
|
|
<a onclick="openTab(this, 'tab_events')">
|
|
<span class="icon">
|
|
<svg viewBox="0 0 24 24" style="width: 20px; height: 20px;"><path d="M4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H16L12,22L8,18H4A2,2 0 0,1 2,16V4A2,2 0 0,1 4,2M4,4V16H8.83L12,19.17L15.17,16H20V4H4M6,7H18V9H6V7M6,11H16V13H6V11Z"></path></svg>
|
|
</span>
|
|
<span>Events</span>
|
|
</a>
|
|
</li>
|
|
<li class="tab">
|
|
<a onclick="openTab(this, 'tab_help')">
|
|
<span class="icon">
|
|
<svg viewBox="0 0 24 24" style="width: 20px; height: 20px;"><path d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"></path></svg>
|
|
</span>
|
|
<span>Help</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Credentials (Key management) -->
|
|
<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" placeholder="No key loaded" readonly title="If you load or mine a keypair the public key will be displayed here">
|
|
<span class="icon is-small is-left">
|
|
<svg viewBox="0 0 24 24" style="width: 20px; height: 20px;"><path d="M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z"></path></svg>
|
|
</span>
|
|
</div>
|
|
<div class="buttons has-addons">
|
|
<button class="button is-link is-light" onclick="loadKey();" title="Load keypair from file">Load key</button>
|
|
<button class="button is-link is-light" id="save_key" onclick="saveKey();" disabled title="Save current keypair to file">Save key</button>
|
|
<button class="button is-link" id="new_key_button" onclick="createKey();" title="Generate new keypair, suitable to mine domains">Mine new key</button>
|
|
</div>
|
|
</div>
|
|
<p class="help">To mine domains you need to mine a strong pair of keys.</p>
|
|
</div>
|
|
|
|
<!-- Domain mining -->
|
|
<div class="tab row page is-hidden" id="tab_domains" style="align-items: center;">
|
|
<div id="my_domains" class="container is-fluid cards-container mt-0">
|
|
<!-- Here will be our domains -->
|
|
</div>
|
|
<button class="button is-link mt-2" onclick="showNewDomainDialog()" style="max-width: 200px;">New domain</button>
|
|
</div>
|
|
|
|
<!-- Events and notifications -->
|
|
<div class="tab row page is-hidden list" id="tab_events" style="margin-bottom: 10pt;">
|
|
<!-- Events are getting here -->
|
|
</div>
|
|
|
|
<!-- Help -->
|
|
<div class="tab row page is-hidden" id="tab_help">
|
|
<div class="level">
|
|
<div class="level-left">
|
|
<div class="content"><h2>Welcome to ALFIS!</h2><p>ALFIS stands for Alternative Free Identity System.</p></div>
|
|
</div>
|
|
<div class="level-right is-align-self-flex-start">
|
|
<a title="Get source code and contribute!" onclick="open_link('https://github.com/Revertron/Alfis');">
|
|
<svg class="octicon octicon-mark-github v-align-middle" height="32" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<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>
|
|
|
|
<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_domain_dialog" class="modal">
|
|
<div class="modal-background"></div>
|
|
<div class="modal-content">
|
|
<div class="box" id="new_domain_dialog_box">
|
|
<button class="delete" aria-label="close" onclick="closeDialog('new_domain_dialog')"></button>
|
|
<label class="label">New domain:</label>
|
|
<div class="field is-grouped is-fullwidth">
|
|
<div class="control field has-addons is-expanded">
|
|
<div class="control is-expanded has-icons-left">
|
|
<input class="input is-expanded" type="text" placeholder="domain" id="new_domain" oninput="onDomainChange(this)" title="Just a name of desired domain, like mail, facehook, etc.">
|
|
<span class="icon is-small is-left">
|
|
<svg viewBox="0 0 24 24" style="width: 20px; height: 20px;"><path d="M17.9,17.39C17.64,16.59 16.89,16 16,16H15V13A1,1 0 0,0 14,12H8V10H10A1,1 0 0,0 11,9V7H13A2,2 0 0,0 15,5V4.59C17.93,5.77 20,8.64 20,12C20,14.08 19.2,15.97 17.9,17.39M11,19.93C7.05,19.44 4,16.08 4,12C4,11.38 4.08,10.78 4.21,10.21L9,15V16A2,2 0 0,0 11,18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg>
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Zones -->
|
|
<div class="control">
|
|
<div class="dropdown" id="zones-dropdown" onclick="toggle(this, event);" title="Select your TLD - Top Level Domain">
|
|
<div class="dropdown-trigger">
|
|
<button class="button" aria-haspopup="true" aria-controls="zones-menu" onblur="closeZonesDropdown()">
|
|
<span id="zones-current-name">Select zone</span>
|
|
<span class="icon is-small">
|
|
<svg viewBox="0 0 24 24" style="width: 20px; height: 20px;"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"></path></svg>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<div class="dropdown-menu" id="zones-menu" role="menu">
|
|
<div class="dropdown-content" id="zones-links">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="control">
|
|
<div class="buttons has-addons">
|
|
<button id="add_record_button" class="button is-link is-light" onclick="showNewRecordDialog();" title="Domain is nothing without good DNS records">Add record</button>
|
|
<button disabled id="owners_button" class="button is-link is-light" onclick="showOwnersDialog();" title="You can change domain owners. Leave empty to be yours only.">
|
|
<span>Set owners</span><span id="owners_count" class="tag is-info is-hidden ml-2">0</span>
|
|
</button>
|
|
<button disabled id="add_contacts_button" class="button is-link is-light" onclick="showContactsDialog();" title="You can add contact information to your domain, if you wish">Set contacts</button>
|
|
<button id="new_domain_button" class="button is-link" onclick="createDomain();" title="Start mining">Mine domain</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="help">Enter domain name, choose domain zone, add some DNS-records, then hit the "Mine domain" button! Note: zones with * are restricted to <a onclick="open_link('https://yggdrasil-network.github.io');">Yggdrasil</a> only.</p>
|
|
|
|
<div class="list mt-2" id="domain_records">
|
|
<!-- Here will be our domain records, added by dialog -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="owners_dialog" class="modal">
|
|
<div class="modal-background"></div>
|
|
<div class="modal-content">
|
|
<div class="box">
|
|
<div class="field">
|
|
<label class="label">Public keys</label>
|
|
<div class="control">
|
|
<textarea class="textarea" id="owners_text"></textarea>
|
|
</div>
|
|
</div>
|
|
<p class="help mb-3">Domains can be owned by several people.
|
|
You need to add their public keys in this text field, separated by new line.
|
|
If you don't include your own key, then domain will be completely transferred to entered owners.
|
|
If you wish to own domain by yourself, just leave this space empty.</p>
|
|
<div class="buttons is-grouped is-centered">
|
|
<button class="button is-link" id="owners_positive_button" onclick="ownersPositiveButton();">Ok</button>
|
|
<button class="button is-link is-light" id="owners_negative_button" onclick="ownersCancelButton();">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">
|
|
<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">
|
|
<button class="button is-link" 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">
|
|
<button class="delete" id="warning_close"></button>
|
|
<p id="warning_text"></p>
|
|
</div>
|
|
|
|
<div class="notification is-success is-hidden" id="notification_success">
|
|
<button class="delete" id="success_close"></button>
|
|
<p id="success_text"></p>
|
|
</div>
|
|
|
|
</body>
|
|
</html> |