0
0

🚸 add domain validity checker #3

Merged
thetek42 merged 15 commits from ui-test into main 2021-04-03 14:12:19 +02:00
3 changed files with 60 additions and 20 deletions
Showing only changes of commit 72b6603fc6 - Show all commits

View File

@ -1,11 +1,23 @@
function dnswatch_search() {
// get domain
var domain = document.getElementById('dnswatch-search').value.toLowerCase();
// test if domain is invalid
if (!is_valid_domain(domain)) {
document.getElementById('results').innerHTML = '<table></table>';
feather.replace();
document.getElementById('invaliddomain').style.visibility = 'visible';
document.getElementById('invaliddomain').style.display = 'block';
return;
}
document.getElementById('invaliddomain').style.visibility = 'hidden';
document.getElementById('invaliddomain').style.display = 'none';
// activate spinner
document.getElementById('loadani').style.visibility = 'visible';
document.getElementById('loadani').style.display = 'block';
// get domain
var domain = document.getElementById('dnswatch-search').value.toLowerCase();
// send api request
var request = new XMLHttpRequest();
request.open('POST', 'https://dns-watch.org/search', true);
@ -16,6 +28,8 @@ function dnswatch_search() {
var response = JSON.parse(this.response);
console.log(response);
// TODO: CLEAN UP THIS MESS OF TABLE GENERATION CODE
if (response['type'] == 'success') { // success
var table = '<table>\n';
@ -71,22 +85,30 @@ function dnswatch_search() {
} else { // no success
var table = '<table>\n';
table += '<tr>\n';
// status
table += '<td class="status cross">\n';
table += '<i data-feather="x"></i>\n';
table += '</td>\n';
// provider icon
table += '<td class="icon">\n';
table += '<i data-feather="x"></i>\n';
table += '</td>\n';
// name and address
table += `<td class="name">ERROR: ${ response["error"] }</td>\n`;
table += '<td class="desc ref"></td>\n';
table += '<td class="help"></td>\n';
table += '</tr>\n';
table += '</table>';
if (response['error'] == 'malformed_domain') { // invalid domain - should not happen, but just in case i guess
var table = '<table></table>';
document.getElementById('results').innerHTML = '<table></table>';
feather.replace();
document.getElementById('invaliddomain').style.visibility = 'visible';
document.getElementById('invaliddomain').style.display = 'block';
} else {
var table = '<table>\n';
table += '<tr>\n';
// status
table += '<td class="status cross">\n';
table += '<i data-feather="x"></i>\n';
table += '</td>\n';
// provider icon
table += '<td class="icon">\n';
table += '<i data-feather="x"></i>\n';
table += '</td>\n';
// name and address
table += `<td class="name">ERROR: ${ response["error"] }</td>\n`;
table += '<td class="desc ref"></td>\n';
table += '<td class="help"></td>\n';
table += '</tr>\n';
table += '</table>';
}
}
@ -104,6 +126,13 @@ function dnswatch_search() {
function is_valid_domain(str) {
let regex = /^(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?.)+[a-z0-9][a-z0-9-]{0,61}[a-z0-9]$/;
return regex.test(str);
}
// add event triggers
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('dnswatch-search-submit').addEventListener('click', (event) => {

View File

@ -8,12 +8,15 @@
#search
#searchbar
.buttonspacer
input#dnswatch-search( type='text' placeholder='Search...' )
input#dnswatch-search( type='text' placeholder='Search...' autofocus )
button#dnswatch-search-submit: i( data-feather='search' )
button#help: i( data-feather='help-circle' )
small Try "gnu.org", "wikipedia.com", "s.to" or your own website!
#loadani
#spinner
span loading...
#invaliddomain
i( data-feather='x' )
span invalid domain.
#results

View File

@ -113,6 +113,14 @@ input, button
color: $c-blue
margin-left: .5rem
#invaliddomain
color: $c-red
display: none
margin-top: 1rem
visibility: hidden
.feather
vertical-align: -.3rem
#results
table
margin-left: 25vw