4 files changed, 38 insertions, 18 deletions
diff --git a/client/index.html b/client/index.html
index a8aa831..5b8459e 100644
--- a/client/index.html
+++ b/client/index.html
@@ -2,9 +2,11 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Shor</title>
-    <link rel="stylesheet" href="main.css">
-    <script src="main.js"></script>
+    <title>Shorest</title>
+    <link rel="stylesheet" href="static/main.css">
+    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/validate.js/0.13.1/validate.min.js"></script>
+    <script src="static/main.js"></script>
 </head>
 <body>
 <div class="active">
@@ -12,11 +14,11 @@
         <a><b>sho.rest</b><br></a>
         <a>Made with ❤ by <b>Mel</b></a>
     </div>
-    <form class="form-inline" onsubmit="onFormSubmit(); return false;">
+    <form id="form">
         <div class="input-group" id="form-group">
             <div class="input-container">
                 <a class="input-field-text">https://</a>
-                <input oninput="inputUpdate()" pattern="(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?" class="input-field" id="url" required>
+                <input class="input-field" id="url" required>
             </div>
             <div class="btn-container">
                 <input type="submit" value="→" class="btn">
diff --git a/client/main.js b/client/main.js
deleted file mode 100644
index 652776a..0000000
--- a/client/main.js
+++ /dev/null
@@ -1,13 +0,0 @@
-function onFormSubmit() {
-    return false;
-}
-
-function inputUpdate() {
-    const pattern = /^(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?&/;
-    const userInput = document.getElementById('url').value;
-    if (pattern.test(userInput)) {
-        document.getElementById('form-group').style.borderColor = '#E0E0E0';
-    } else {
-        document.getElementById('form-group').style.borderColor = '#FFBCBC';
-    }
-}
\ No newline at end of file
diff --git a/client/main.css b/client/static/main.css
index 8f84f71..1726881 100644
--- a/client/main.css
+++ b/client/static/main.css
@@ -86,6 +86,7 @@ html * {
     touch-action: manipulation;
     cursor: pointer;
     background-image: none;
+    background-color: #fff;
     padding: 4px 5vw;
     height: 10vh;
     -webkit-user-select: none;
diff --git a/client/static/main.js b/client/static/main.js
new file mode 100644
index 0000000..aa823c0
--- /dev/null
+++ b/client/static/main.js
@@ -0,0 +1,30 @@
+$(document).ready(function() {
+    $('#form').on('submit', onFormSubmit);
+    $('#url').on({'input': inputUpdate, 'paste': pasteTrim});
+});
+
+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;
+    })
+    return false;
+}
+
+function inputUpdate() {
+    const userInput = document.getElementById('url').value;
+    if (!validate({website: 'https://' + userInput}, {website: {url: true}})) {
+        $('#form-group').css('border-color', '#E0E0E0');
+    } else {
+        $('#form-group').css('border-color', '#FFBCBC');
+    }
+}
+
+function pasteTrim() {
+    const pattern = /^https?:\/\//;
+    setTimeout(() => {
+        const element = $('#url');
+        element.value = element.value.replace(pattern, '');
+    }, 0);
+}
\ No newline at end of file