proper response management 0.1.0

2 files changed, 79 insertions, 9 deletions

diff --git a/client/static/main.css b/client/static/main.css
index 2964681..a3182f9 100644
--- a/client/static/main.css
+++ b/client/static/main.css
@@ -18,13 +18,39 @@ html * {
     color: #E0E0E0;
 }
 
+.response-text {
+    margin-bottom: 0;
+}
+
+.copy-text {
+    color: #E0E0E0;
+    padding-right: 30px;
+    text-align: right;
+    -webkit-touch-callout: none !important;
+    -webkit-user-select: none !important;
+    -moz-user-select: none !important;
+    -ms-user-select: none !important;
+    user-select: none !important;
+}
+
 .input-group {
     position: relative;
     display: table;
+    border-color: #E0E0E0;
     border-collapse: separate;
     transition: border-color 1s;
 }
 
+.response-container {
+    display: flex;
+    align-items: center;
+    border: 2px solid #E0E0E0;
+    margin: 15px 30px 0 30px;
+    height: 14vh;
+    justify-content: space-between;
+    border-radius: 0 5vh 5vh 5vh;
+}
+
 .input-field {
     position: relative;
     z-index: 2;
@@ -54,7 +80,7 @@ html * {
     align-items: center;
     position: relative;
     padding: 0;
-    border-radius: 100px 0 0 100px;
+    border-radius: 5vh 0 0 5vh;
     border: 2px solid;
     border-color: inherit;
     margin: 0;
@@ -94,9 +120,18 @@ html * {
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
-    border-radius: 0 100px 100px 0;
+    border-radius: 0 5vh 5vh 0;
     border: 2px solid;
     border-color: inherit;
     border-left: none;
     transition: color 1s;
+}
+
+strong {
+    font-weight: normal;
+    color: #727272;
+}
+
+a {
+    text-decoration: none;
 }
\ No newline at end of file
diff --git a/client/static/main.js b/client/static/main.js
index 25ac3bd..cd7c922 100644
--- a/client/static/main.js
+++ b/client/static/main.js
@@ -10,13 +10,26 @@ function onFormSubmit() {
     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);
-        })
+        $.ajax('/', {method: 'POST', data: data, contentType: 'application/json'}).then(onSuccess);
     }
     return false;
 }
 
+function onSuccess(response) {
+    const responseDiv = $('#response-template')[0].content.querySelector('div');
+    const node = document.importNode(responseDiv, true);
+    const urlField = $('#url');
+    let text;
+    if (urlField.val().length < 20 ) {
+        text = 'The short link for <strong>' + urlField.val() + '</strong> is<br><strong>sho.rest/' + response.hash + '</strong>';
+    } else {
+        text = 'The short link for your URL is<br><strong>sho.rest/' + response.hash + '</strong>';
+    }
+    node.querySelector('.response-text').innerHTML = text;
+    $(node).find('.copy-text').on('click', copyClick);
+    $('#responses')[0].prepend(node);
+}
+
 function inputUpdate() {
     const userInput = $('#url').val();
     setButtonVisible(validateURL(userInput));
@@ -34,12 +47,12 @@ function setButtonVisible(visible) {
     const left = $('#left');
     const formGroup = $('#form-group');
 
-    const values = visible ? valuesEnabled : valuesDisabled;
+    let values;
     if (visible) {
-        const values = valuesEnabled;
+        values = valuesEnabled;
         form.removeAttr('disabled');
     } else {
-        const values = valuesDisabled;
+        values = valuesDisabled;
         form[0].setAttribute('disabled', '');
     }
 
@@ -54,10 +67,32 @@ function pasteTrim() {
     const pattern = /^https?:\/\//;
     setTimeout(() => {
         const element = $('#url');
-        element.value = element.value.replace(pattern, '');
+        element.val(element.val().replace(pattern, ''));
+        inputUpdate();
     }, 0);
 }
 
+function copyClick(event) {
+    const target = $(event.target);
+    if (target.hasClass('copied')) return;
+    const copyText = target.closest('.copy-text');
+    const previousCopied = $('.copied');
+
+    previousCopied.removeClass('copied');
+    previousCopied.html('<strong>Copy Link</strong>');
+    copyText.html('Link Copied!');
+    copyText.addClass('copied');
+
+    const link = copyText.parent().find('.response-text strong').last();
+
+    const range = document.createRange();
+    range.selectNode(link[0]);
+    window.getSelection().removeAllRanges();
+    window.getSelection().addRange(range);
+    document.execCommand('copy');
+    window.getSelection().removeAllRanges();
+}
+
 function validateURL(url) {
     return !validate({website: 'https://' + url}, {website: {url: true}});
 }
\ No newline at end of file