diff --git a/ui/compile.sh b/ui/compile.sh index fc8ccc4..7ca6bec 100755 --- a/ui/compile.sh +++ b/ui/compile.sh @@ -8,6 +8,8 @@ echo "dnswatch + + " | cat - html/index.html > temp mv temp html/index.html diff --git a/ui/html/index.css b/ui/html/index.css index a091ac3..b4950a0 100644 --- a/ui/html/index.css +++ b/ui/html/index.css @@ -45,6 +45,9 @@ input, button { font-size: 4rem; font-weight: 200; } +#title h1 span { + color: #4c5666; +} #search { text-align: center; @@ -119,6 +122,15 @@ input, button { color: #61afef; margin-left: 0.5rem; } +#search #invaliddomain { + color: #e06c75; + display: none; + margin-top: 1rem; + visibility: hidden; +} +#search #invaliddomain .feather { + vertical-align: -0.3rem; +} #results table { margin-left: 25vw; diff --git a/ui/html/index.css.map b/ui/html/index.css.map index 6f9d86a..112195f 100644 --- a/ui/html/index.css.map +++ b/ui/html/index.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../raw/index.sass"],"names":[],"mappings":"AASA;EACC;;;AAED;EACC,kBAZS;EAaT,OAXS;EAYT,aATS;EAUT;EACA;EACA;;;AAED;EACC,aAfS;;;AAiBV;EACC;EACA;EACA;;AACA;EACC,kBA3BQ;EA4BR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;;AAEH;EACC;EACA;EACA;;AACA;EACC;EACA;;;AAEF;EACC;;AAEC;EACC;EACA;;AACD;EACC;EACA;EACA;EACA,OAxDO;EAyDP;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACF;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;EACA,OA/EK;;AAgFP;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAEJ;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AACD;EACC,OA5GO;EA6GP;;;AAGF;EACC;EACA;EACA;;AACA;EACC;;AACA;EACC;;AACA;EACC,OAvHK;;AAwHN;EACC,OAxHK;;AAyHN;EACC,OA7HK;;AA8HP;EACC;EACA;;AACD;EACC;EACA;;AACD;EACC;;AACA;EACC,OApIK;;AAqIN;EACC,OAzIK;;AA0IP;EACC;EACA;;AACA;EACC,kBA/IK;EAgJL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACD;EACC;EACA;EACA;;;AAEN;EACC;IACC;;EACD;IACC","file":"index.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../raw/index.sass"],"names":[],"mappings":"AASA;EACC;;;AAED;EACC,kBAZS;EAaT,OAXS;EAYT,aATS;EAUT;EACA;EACA;;;AAED;EACC,aAfS;;;AAiBV;EACC;EACA;EACA;;AACA;EACC,kBA3BQ;EA4BR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;;AAEH;EACC;EACA;EACA;;AACA;EACC;EACA;;AACA;EACC;;;AAEH;EACC;;AAEC;EACC;EACA;;AACD;EACC;EACA;EACA;EACA,OA1DO;EA2DP;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACF;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;EACA,OAjFK;;AAkFP;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAEJ;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AACD;EACC,OA9GO;EA+GP;;AAEF;EACC,OA/GQ;EAgHR;EACA;EACA;;AACA;EACC;;;AAGF;EACC;EACA;EACA;;AACA;EACC;;AACA;EACC;;AACA;EACC,OAjIK;;AAkIN;EACC,OAlIK;;AAmIN;EACC,OAvIK;;AAwIP;EACC;EACA;;AACD;EACC;EACA;;AACD;EACC;;AACA;EACC,OA9IK;;AA+IN;EACC,OAnJK;;AAoJP;EACC;EACA;;AACA;EACC,kBAzJK;EA0JL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACD;EACC;EACA;EACA;;;AAEN;EACC;IACC;;EACD;IACC","file":"index.css"} \ No newline at end of file diff --git a/ui/html/index.html b/ui/html/index.html index 6ddb2e7..b789f1c 100644 --- a/ui/html/index.html +++ b/ui/html/index.html @@ -2,6 +2,8 @@ + + -

dnswatch

\ No newline at end of file +

dns-watch.org

diff --git a/ui/html/index.js b/ui/html/index.js index 3560bd9..837cda7 100644 --- a/ui/html/index.js +++ b/ui/html/index.js @@ -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 = '
'; + 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 = '\n'; @@ -71,22 +85,30 @@ function dnswatch_search() { } else { // no success - var table = '
\n'; - table += '\n'; - // status - table += '\n'; - // provider icon - table += '\n'; - // name and address - table += `\n`; - table += '\n'; - table += '\n'; - table += '\n'; - table += '
\n'; - table += '\n'; - table += '\n'; - table += '\n'; - table += 'ERROR: ${ response["error"] }
'; + if (response['error'] == 'malformed_domain') { // invalid domain - should not happen, but just in case i guess + var table = '
'; + document.getElementById('results').innerHTML = '
'; + feather.replace(); + document.getElementById('invaliddomain').style.visibility = 'visible'; + document.getElementById('invaliddomain').style.display = 'block'; + } else { + var table = '\n'; + table += '\n'; + // status + table += '\n'; + // provider icon + table += '\n'; + // name and address + table += `\n`; + table += '\n'; + table += '\n'; + table += '\n'; + table += '
\n'; + table += '\n'; + table += '\n'; + table += '\n'; + table += 'ERROR: ${ response["error"] }
'; + } } @@ -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) => { diff --git a/ui/jhtml-compat/index.css b/ui/jhtml-compat/index.css index b2bb553..a5a2e32 100644 --- a/ui/jhtml-compat/index.css +++ b/ui/jhtml-compat/index.css @@ -46,6 +46,9 @@ input, button { font-size: 4rem; font-weight: 200; } +#title h1 span { + color: #4c5666; +} #search { text-align: center; @@ -120,6 +123,15 @@ input, button { color: #61afef; margin-left: 0.5rem; } +#search #invaliddomain { + color: #e06c75; + display: none; + margin-top: 1rem; + visibility: hidden; +} +#search #invaliddomain .feather { + vertical-align: -0.3rem; +} #results table { margin-left: 25vw; diff --git a/ui/jhtml-compat/index.css.map b/ui/jhtml-compat/index.css.map index 6f9d86a..112195f 100644 --- a/ui/jhtml-compat/index.css.map +++ b/ui/jhtml-compat/index.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../raw/index.sass"],"names":[],"mappings":"AASA;EACC;;;AAED;EACC,kBAZS;EAaT,OAXS;EAYT,aATS;EAUT;EACA;EACA;;;AAED;EACC,aAfS;;;AAiBV;EACC;EACA;EACA;;AACA;EACC,kBA3BQ;EA4BR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;;AAEH;EACC;EACA;EACA;;AACA;EACC;EACA;;;AAEF;EACC;;AAEC;EACC;EACA;;AACD;EACC;EACA;EACA;EACA,OAxDO;EAyDP;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACF;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;EACA,OA/EK;;AAgFP;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAEJ;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AACD;EACC,OA5GO;EA6GP;;;AAGF;EACC;EACA;EACA;;AACA;EACC;;AACA;EACC;;AACA;EACC,OAvHK;;AAwHN;EACC,OAxHK;;AAyHN;EACC,OA7HK;;AA8HP;EACC;EACA;;AACD;EACC;EACA;;AACD;EACC;;AACA;EACC,OApIK;;AAqIN;EACC,OAzIK;;AA0IP;EACC;EACA;;AACA;EACC,kBA/IK;EAgJL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACD;EACC;EACA;EACA;;;AAEN;EACC;IACC;;EACD;IACC","file":"index.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../raw/index.sass"],"names":[],"mappings":"AASA;EACC;;;AAED;EACC,kBAZS;EAaT,OAXS;EAYT,aATS;EAUT;EACA;EACA;;;AAED;EACC,aAfS;;;AAiBV;EACC;EACA;EACA;;AACA;EACC,kBA3BQ;EA4BR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;;AAEH;EACC;EACA;EACA;;AACA;EACC;EACA;;AACA;EACC;;;AAEH;EACC;;AAEC;EACC;EACA;;AACD;EACC;EACA;EACA;EACA,OA1DO;EA2DP;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACF;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;EACA,OAjFK;;AAkFP;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAEJ;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AACD;EACC,OA9GO;EA+GP;;AAEF;EACC,OA/GQ;EAgHR;EACA;EACA;;AACA;EACC;;;AAGF;EACC;EACA;EACA;;AACA;EACC;;AACA;EACC;;AACA;EACC,OAjIK;;AAkIN;EACC,OAlIK;;AAmIN;EACC,OAvIK;;AAwIP;EACC;EACA;;AACD;EACC;EACA;;AACD;EACC;;AACA;EACC,OA9IK;;AA+IN;EACC,OAnJK;;AAoJP;EACC;EACA;;AACA;EACC,kBAzJK;EA0JL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACD;EACC;EACA;EACA;;;AAEN;EACC;IACC;;EACD;IACC","file":"index.css"} \ No newline at end of file diff --git a/ui/jhtml-compat/index.js b/ui/jhtml-compat/index.js index 1735ffe..31cc985 100644 --- a/ui/jhtml-compat/index.js +++ b/ui/jhtml-compat/index.js @@ -1,12 +1,24 @@ *stop() 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 = '
'; + 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); @@ -17,6 +29,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 = '\n'; @@ -72,22 +86,30 @@ function dnswatch_search() { } else { // no success - var table = '
\n'; - table += '\n'; - // status - table += '\n'; - // provider icon - table += '\n'; - // name and address - table += `\n`; - table += '\n'; - table += '\n'; - table += '\n'; - table += '
\n'; - table += '\n'; - table += '\n'; - table += '\n'; - table += 'ERROR: ${ response["error"] }
'; + if (response['error'] == 'malformed_domain') { // invalid domain - should not happen, but just in case i guess + var table = '
'; + document.getElementById('results').innerHTML = '
'; + feather.replace(); + document.getElementById('invaliddomain').style.visibility = 'visible'; + document.getElementById('invaliddomain').style.display = 'block'; + } else { + var table = '\n'; + table += '\n'; + // status + table += '\n'; + // provider icon + table += '\n'; + // name and address + table += `\n`; + table += '\n'; + table += '\n'; + table += '\n'; + table += '
\n'; + table += '\n'; + table += '\n'; + table += '\n'; + table += 'ERROR: ${ response["error"] }
'; + } } @@ -105,6 +127,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) => { diff --git a/ui/jhtml-compat/index.php b/ui/jhtml-compat/index.php index 62377c2..127306e 100644 --- a/ui/jhtml-compat/index.php +++ b/ui/jhtml-compat/index.php @@ -5,4 +5,4 @@ *js("///index.js") *js("https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js") *postjs("///feather.js") -

dnswatch

\ No newline at end of file +

dns-watch.org

\ No newline at end of file diff --git a/ui/raw/index.js b/ui/raw/index.js index 3560bd9..837cda7 100644 --- a/ui/raw/index.js +++ b/ui/raw/index.js @@ -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 = '
'; + 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 = '\n'; @@ -71,22 +85,30 @@ function dnswatch_search() { } else { // no success - var table = '
\n'; - table += '\n'; - // status - table += '\n'; - // provider icon - table += '\n'; - // name and address - table += `\n`; - table += '\n'; - table += '\n'; - table += '\n'; - table += '
\n'; - table += '\n'; - table += '\n'; - table += '\n'; - table += 'ERROR: ${ response["error"] }
'; + if (response['error'] == 'malformed_domain') { // invalid domain - should not happen, but just in case i guess + var table = '
'; + document.getElementById('results').innerHTML = '
'; + feather.replace(); + document.getElementById('invaliddomain').style.visibility = 'visible'; + document.getElementById('invaliddomain').style.display = 'block'; + } else { + var table = '\n'; + table += '\n'; + // status + table += '\n'; + // provider icon + table += '\n'; + // name and address + table += `\n`; + table += '\n'; + table += '\n'; + table += '\n'; + table += '
\n'; + table += '\n'; + table += '\n'; + table += '\n'; + table += 'ERROR: ${ response["error"] }
'; + } } @@ -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) => { diff --git a/ui/raw/index.pug b/ui/raw/index.pug index 682afa2..10440e5 100644 --- a/ui/raw/index.pug +++ b/ui/raw/index.pug @@ -3,17 +3,20 @@ button: i( data-feather='sun' ) #title - h1 dnswatch + h1 dns-watch.org #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 diff --git a/ui/raw/index.sass b/ui/raw/index.sass index da194e2..7d2fb21 100644 --- a/ui/raw/index.sass +++ b/ui/raw/index.sass @@ -46,6 +46,8 @@ input, button h1 font-size: 4rem font-weight: 200 + span + color: darken($c-fg, 50%) #search text-align: center @@ -111,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