From 417a3dbf1a0e0f5d9761192eb53d18bb40fde2cc Mon Sep 17 00:00:00 2001
From: Melonai <einebeere@gmail.com>
Date: Thu, 7 May 2020 20:31:31 +0200
Subject: frontend fixes

---
 client/static/main.js | 53 +++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 43 insertions(+), 10 deletions(-)

(limited to 'client/static/main.js')

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
-- 
cgit 1.4.1