diff options
| -rw-r--r-- | client/index.html | 6 | ||||
| -rw-r--r-- | client/static/main.css | 10 | ||||
| -rw-r--r-- | client/static/main.js | 53 | ||||
| -rw-r--r-- | src/main.rs | 7 |
4 files changed, 57 insertions, 19 deletions
diff --git a/client/index.html b/client/index.html index 5b8459e..9099972 100644 --- a/client/index.html +++ b/client/index.html @@ -16,12 +16,12 @@ </div> <form id="form"> <div class="input-group" id="form-group"> - <div class="input-container"> + <div class="input-container" id="left"> <a class="input-field-text">https://</a> <input class="input-field" id="url" required> </div> - <div class="btn-container"> - <input type="submit" value="→" class="btn"> + <div class="button-container"> + <input type="submit" value="→" class="button" id="btn"> </div> </div> </form> diff --git a/client/static/main.css b/client/static/main.css index 1726881..2964681 100644 --- a/client/static/main.css +++ b/client/static/main.css @@ -5,8 +5,9 @@ html * { .active { justify-content: center; + position: absolute; max-width: 100vw; - margin-top: 20%; + top: 40%; padding: 0 50px 0 50px; } @@ -21,7 +22,6 @@ html * { position: relative; display: table; border-collapse: separate; - border-color: #E0E0E0; transition: border-color 1s; } @@ -62,7 +62,7 @@ html * { height: 10vh; } -.btn-container { +.button-container { display: table-cell; position: relative; font-size: 0; @@ -73,7 +73,7 @@ html * { border-color: inherit; } -.btn { +.button { z-index: 2; margin-left: -1px; display: inline-block; @@ -87,6 +87,7 @@ html * { cursor: pointer; background-image: none; background-color: #fff; + color: #727272; padding: 4px 5vw; height: 10vh; -webkit-user-select: none; @@ -97,4 +98,5 @@ html * { border: 2px solid; border-color: inherit; border-left: none; + transition: color 1s; } \ No newline at end of file diff --git a/client/static/main.js b/client/static/main.js index aa823c0..25ac3bd 100644 --- a/client/static/main.js +++ b/client/static/main.js @@ -1,24 +1,53 @@ $(document).ready(function() { - $('#form').on('submit', onFormSubmit); + const form = $('#form'); + form.on('submit', onFormSubmit); + form.attr("novalidate",true); $('#url').on({'input': inputUpdate, 'paste': pasteTrim}); + inputUpdate(); }); function onFormSubmit() { - const urlField = document.getElementById('url'); - const data = JSON.stringify({'url': 'https://' + urlField.value}); - $.ajax('/', {method: 'POST', data: data, contentType: 'application/json'}).then(function (r) { - urlField.value = 'sho.rest/' + r.hash; - }) + const urlField = $('#url'); + if (validateURL(urlField.val())) { + const data = JSON.stringify({'url': 'https://' + urlField.val()}); + $.ajax('/', {method: 'POST', data: data, contentType: 'application/json'}).then(function (r) { + urlField.val('sho.rest/' + r.hash); + }) + } return false; } function inputUpdate() { - const userInput = document.getElementById('url').value; - if (!validate({website: 'https://' + userInput}, {website: {url: true}})) { - $('#form-group').css('border-color', '#E0E0E0'); + const userInput = $('#url').val(); + setButtonVisible(validateURL(userInput)); +} + +function setButtonVisible(visible) { + const form = $('#form'); + + if (!form[0].hasAttribute('disabled') === visible) return; + + const valuesDisabled = {borderColor: '#FFBCBC', borderRight: 'none', buttonValue: '', buttonValueColor: '#FFFFFF'}; + const valuesEnabled = {borderColor: '#E0E0E0', borderRight: '', buttonValue: '→', buttonValueColor: '#727272'}; + + const btn = $('#btn'); + const left = $('#left'); + const formGroup = $('#form-group'); + + const values = visible ? valuesEnabled : valuesDisabled; + if (visible) { + const values = valuesEnabled; + form.removeAttr('disabled'); } else { - $('#form-group').css('border-color', '#FFBCBC'); + const values = valuesDisabled; + form[0].setAttribute('disabled', ''); } + + formGroup.css('border-color', values.borderColor); + left.css('border-right', values.borderRight); + btn.css('color', values.buttonValueColor); + btn.val(values.buttonValue); + } function pasteTrim() { @@ -27,4 +56,8 @@ function pasteTrim() { const element = $('#url'); element.value = element.value.replace(pattern, ''); }, 0); +} + +function validateURL(url) { + return !validate({website: 'https://' + url}, {website: {url: true}}); } \ No newline at end of file diff --git a/src/main.rs b/src/main.rs index 12c1356..9e6bef1 100644 --- a/src/main.rs +++ b/src/main.rs @@ -26,7 +26,11 @@ fn make_url(url_to_check: &str) -> Result<String, ()> { Ok(result_url) => result_url, Err(_) => return Err(()) }; - if !url_object.cannot_be_a_base() && url_object.has_host() && url_object.domain().is_some() { + if !url_object.cannot_be_a_base() && + url_object.has_host() && + url_object.host_str().map_or(false, |h| h.contains('.')) && + url_object.domain().is_some() + { Ok(format!("https://{}{}{}", url_object.domain().unwrap(), url_object.path(), @@ -115,5 +119,4 @@ async fn main() -> std::io::Result<()> { .bind("localhost:3000")? .run() .await - } |