frontend fixes

melnary · May 7, 2020 · 417a3db · 417a3db
1 parent 1e06820
commit 417a3db
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 19 deletions.
diff --git 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
@@ -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;
 }
diff --git 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}});
 }
diff --git 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
-
 }