2 files changed, 49 insertions, 14 deletions
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