interaction between API and client

6 files changed, 48 insertions, 25 deletions

diff --git a/Cargo.toml b/Cargo.toml
index c717f19..db5fa3f 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -17,5 +17,6 @@ crc32fast = "1.2.0"
 base64 = "0.12.0"
 url = "2.1.1"
 diesel = { version = "1.4.4", features = ["postgres", "r2d2"] }
+actix-files = "0.2.1"
 
 
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
diff --git a/src/main.rs b/src/main.rs
index ab4c044..12c1356 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -7,11 +7,12 @@ use schema::links;
 mod types;
 use types::*;
 
-use actix_web::{middleware, web, HttpServer, App, HttpResponse, Result};
+use actix_web::{middleware, web, HttpServer, App, HttpResponse, Result, HttpRequest};
 use actix_web::web::{Json, Path, Data};
 use diesel::{PgConnection, RunQueryDsl, QueryDsl, ExpressionMethods, QueryResult};
 use dotenv::dotenv;
 use diesel::r2d2::{ConnectionManager, Pool};
+use actix_files::{Files, NamedFile};
 
 fn establish_connection() -> Pool<ConnectionManager<PgConnection>> {
     dotenv().ok();
@@ -58,16 +59,14 @@ fn add_to_database_safely(mut hash: String, user_url: String, connection: &PgCon
             }
         }
         Err(_) => {
-            if add_entry_to_database(Entry { hash: hash.clone() , url: user_url }, connection).is_err() {
-
-            }
+            add_entry_to_database(Entry { hash: hash.clone() , url: user_url }, connection).unwrap();
         }
     };
     hash
 }
 
-async fn root() -> HttpResponse {
-    HttpResponse::Ok().body("Please make a POST request to / in the format {'url': '<your_url>'} with the URL you want to shorten!")
+async fn root(req: HttpRequest) -> HttpResponse {
+    NamedFile::open("./client/index.html").unwrap().into_response(&req).unwrap()
 }
 
 async fn shorten(params: Json<UserData>, state: Data<PoolState>) -> HttpResponse {
@@ -77,7 +76,7 @@ async fn shorten(params: Json<UserData>, state: Data<PoolState>) -> HttpResponse
             return HttpResponse::BadRequest().body("The URL you entered does not follow the proper URL format.");
         },
     };
-    let hash= add_to_database_safely(get_hash_from_string(&user_url), user_url, &state.get().expect("Could not get a connection from pool"));
+    let hash = add_to_database_safely(get_hash_from_string(&user_url), user_url, &state.get().expect("Could not get a connection from pool"));
 
     HttpResponse::Ok().json(UserResponse{ hash })
 }
@@ -109,6 +108,9 @@ async fn main() -> std::io::Result<()> {
                 web::resource("/{hash}")
                     .route(web::get().to(redirect))
             )
+            .service(
+                Files::new("/static/", "./client/static/")
+            )
     })
         .bind("localhost:3000")?
         .run()