diff options
| -rw-r--r-- | Cargo.toml | 1 | ||||
| -rw-r--r-- | client/index.html | 12 | ||||
| -rw-r--r-- | client/main.js | 13 | ||||
| -rw-r--r-- | client/static/main.css (renamed from client/main.css) | 1 | ||||
| -rw-r--r-- | client/static/main.js | 30 | ||||
| -rw-r--r-- | src/main.rs | 16 |
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() |