Login works now

project/frontend/Cargo.lock

@@ -217,7 +217,7 @@ dependencies = [
 
 [[package]]
 name = "serde_json"
-version = "1.0.51"
+version = "1.0.52"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 dependencies = [
  "itoa 0.4.5 (registry+https://github.com/rust-lang/crates.io-index)",
@@ -248,7 +248,7 @@ dependencies = [
  "discard 1.0.4 (registry+https://github.com/rust-lang/crates.io-index)",
  "rustc_version 0.2.3 (registry+https://github.com/rust-lang/crates.io-index)",
  "serde 1.0.106 (registry+https://github.com/rust-lang/crates.io-index)",
- "serde_json 1.0.51 (registry+https://github.com/rust-lang/crates.io-index)",
+ "serde_json 1.0.52 (registry+https://github.com/rust-lang/crates.io-index)",
  "stdweb-derive 0.5.3 (registry+https://github.com/rust-lang/crates.io-index)",
  "stdweb-internal-macros 0.2.9 (registry+https://github.com/rust-lang/crates.io-index)",
  "stdweb-internal-runtime 0.1.5 (registry+https://github.com/rust-lang/crates.io-index)",
@@ -277,7 +277,7 @@ dependencies = [
  "quote 1.0.3 (registry+https://github.com/rust-lang/crates.io-index)",
  "serde 1.0.106 (registry+https://github.com/rust-lang/crates.io-index)",
  "serde_derive 1.0.106 (registry+https://github.com/rust-lang/crates.io-index)",
- "serde_json 1.0.51 (registry+https://github.com/rust-lang/crates.io-index)",
+ "serde_json 1.0.52 (registry+https://github.com/rust-lang/crates.io-index)",
  "sha1 0.6.0 (registry+https://github.com/rust-lang/crates.io-index)",
  "syn 1.0.17 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
@@ -301,8 +301,11 @@ dependencies = [
 name = "thesis-frontend"
 version = "0.1.0"
 dependencies = [
+ "anyhow 1.0.28 (registry+https://github.com/rust-lang/crates.io-index)",
  "log 0.4.8 (registry+https://github.com/rust-lang/crates.io-index)",
+ "serde_json 1.0.52 (registry+https://github.com/rust-lang/crates.io-index)",
  "stdweb 0.4.20 (registry+https://github.com/rust-lang/crates.io-index)",
+ "web_logger 0.2.0 (registry+https://github.com/rust-lang/crates.io-index)",
  "yew 0.14.3 (registry+https://github.com/rust-lang/crates.io-index)",
  "yew-router 0.11.0 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
@@ -384,6 +387,16 @@ name = "wasm-bindgen-shared"
 version = "0.2.60"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 
+[[package]]
+name = "web_logger"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+dependencies = [
+ "log 0.4.8 (registry+https://github.com/rust-lang/crates.io-index)",
+ "stdweb 0.4.20 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wasm-bindgen 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)",
+]
+
 [[package]]
 name = "yew"
 version = "0.14.3"
@@ -401,7 +414,7 @@ dependencies = [
  "proc-macro-nested 0.1.4 (registry+https://github.com/rust-lang/crates.io-index)",
  "ryu 1.0.3 (registry+https://github.com/rust-lang/crates.io-index)",
  "serde 1.0.106 (registry+https://github.com/rust-lang/crates.io-index)",
- "serde_json 1.0.51 (registry+https://github.com/rust-lang/crates.io-index)",
+ "serde_json 1.0.52 (registry+https://github.com/rust-lang/crates.io-index)",
  "slab 0.4.2 (registry+https://github.com/rust-lang/crates.io-index)",
  "stdweb 0.4.20 (registry+https://github.com/rust-lang/crates.io-index)",
  "thiserror 1.0.15 (registry+https://github.com/rust-lang/crates.io-index)",
@@ -432,7 +445,7 @@ dependencies = [
  "log 0.4.8 (registry+https://github.com/rust-lang/crates.io-index)",
  "nom 5.1.1 (registry+https://github.com/rust-lang/crates.io-index)",
  "serde 1.0.106 (registry+https://github.com/rust-lang/crates.io-index)",
- "serde_json 1.0.51 (registry+https://github.com/rust-lang/crates.io-index)",
+ "serde_json 1.0.52 (registry+https://github.com/rust-lang/crates.io-index)",
  "stdweb 0.4.20 (registry+https://github.com/rust-lang/crates.io-index)",
  "wasm-bindgen 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)",
  "yew 0.14.3 (registry+https://github.com/rust-lang/crates.io-index)",
@@ -493,7 +506,7 @@ dependencies = [
 "checksum semver-parser 0.7.0 (registry+https://github.com/rust-lang/crates.io-index)" = "388a1df253eca08550bef6c72392cfe7c30914bf41df5269b68cbd6ff8f570a3"
 "checksum serde 1.0.106 (registry+https://github.com/rust-lang/crates.io-index)" = "36df6ac6412072f67cf767ebbde4133a5b2e88e76dc6187fa7104cd16f783399"
 "checksum serde_derive 1.0.106 (registry+https://github.com/rust-lang/crates.io-index)" = "9e549e3abf4fb8621bd1609f11dfc9f5e50320802273b12f3811a67e6716ea6c"
-"checksum serde_json 1.0.51 (registry+https://github.com/rust-lang/crates.io-index)" = "da07b57ee2623368351e9a0488bb0b261322a15a6e0ae53e243cbdc0f4208da9"
+"checksum serde_json 1.0.52 (registry+https://github.com/rust-lang/crates.io-index)" = "a7894c8ed05b7a3a279aeb79025fdec1d3158080b75b98a08faf2806bb799edd"
 "checksum sha1 0.6.0 (registry+https://github.com/rust-lang/crates.io-index)" = "2579985fda508104f7587689507983eadd6a6e84dd35d6d115361f530916fa0d"
 "checksum slab 0.4.2 (registry+https://github.com/rust-lang/crates.io-index)" = "c111b5bd5695e56cffe5129854aa230b39c93a305372fdbb2668ca2394eea9f8"
 "checksum static_assertions 0.3.4 (registry+https://github.com/rust-lang/crates.io-index)" = "7f3eb36b47e512f8f1c9e3d10c2c1965bc992bd9cdb024fa581e2194501c83d3"
@@ -511,6 +524,7 @@ dependencies = [
 "checksum wasm-bindgen-macro 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)" = "8bd151b63e1ea881bb742cd20e1d6127cef28399558f3b5d415289bc41eee3a4"
 "checksum wasm-bindgen-macro-support 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)" = "d68a5b36eef1be7868f668632863292e37739656a80fc4b9acec7b0bd35a4931"
 "checksum wasm-bindgen-shared 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)" = "daf76fe7d25ac79748a37538b7daeed1c7a6867c92d3245c12c6222e4a20d639"
+"checksum web_logger 0.2.0 (registry+https://github.com/rust-lang/crates.io-index)" = "f50afec20c2e728ca33ffb77d1ed049c8559f1d2e59e0fea36f6586d5bc74683"
 "checksum yew 0.14.3 (registry+https://github.com/rust-lang/crates.io-index)" = "2e48bc6b264e30362e5d420cd6aa2cd24dd4c9131284bc24afc0a41c28c125f3"
 "checksum yew-macro 0.14.1 (registry+https://github.com/rust-lang/crates.io-index)" = "074c652331c32cf6431b0c5c4b6cb6fbb2168a1be6022e51b32c95fefb70153c"
 "checksum yew-router 0.11.0 (registry+https://github.com/rust-lang/crates.io-index)" = "19145953cfaa35cbd26a06ef5f589553d8e16d2a8d889d9c3e74516617ea7db8"

project/frontend/Cargo.toml

@@ -11,6 +11,9 @@ stdweb = "0.4.20"
 yew = { version = "0.14.3", features = ["std_web"] }
 yew-router = { version = "0.11.0", features = ["std_web"] }
 log = "0.4.8"
+web_logger = "0.2.0"
+serde_json = "1.0.52"
+anyhow = "1.0.28"
 
 [[bin]]
 name = "app"

project/frontend/src/component/login.rs

@@ -1,20 +1,68 @@
-use log::info;
+use log::{error, info};
+use serde_json::json;
+use yew::format::{Json, Text};
 use yew::prelude::*;
+use yew::services::fetch::{FetchService, FetchTask, Request, Response};
+
+use yew::services::fetch::Mode::Cors;
 
 pub struct LoginComponent {
     component_link: ComponentLink<LoginComponent>,
     username: String,
     password: String,
     login_button_disabled: bool,
+    fetch_service: FetchService,
+    fetch_task: Option<FetchTask>,
+    fetching: bool,
 }
 
-pub enum Message {
+pub enum Msg {
     UpdateUsername(String),
     UpdatePassword(String),
     HandleForm(),
+    FetchReady(String),
+    FetchError,
 }
+
+impl LoginComponent {
+    fn update_button_state(&mut self) {
+        self.login_button_disabled = self.username.is_empty() || self.password.is_empty();
+    }
+
+    fn post_login(&mut self) {
+        self.fetching = true;
+
+        let user = json!({
+            "username": self.username,
+            "password": self.password
+        });
+
+        let request = Request::builder()
+            .method("POST")
+            .header("Content-Type", "application/json")
+            .uri("http://localhost:3880/api/auth/login")
+            .body(Json(&user))
+            .unwrap();
+
+        let callback =
+            self.component_link
+                .callback(|response: Response<Result<String, anyhow::Error>>| {
+                    let (meta, body) = response.into_parts();
+                    if meta.status.is_success() {
+                        Msg::FetchReady(body.unwrap())
+                    } else {
+                        error!("{}", body.unwrap());
+                        Msg::FetchError
+                    }
+                });
+
+        let task = self.fetch_service.fetch(request, callback);
+        self.fetch_task = Some(task.unwrap());
+    }
+}
+
 impl Component for LoginComponent {
-    type Message = Message;
+    type Message = Msg;
     type Properties = ();
 
     fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
@@ -23,6 +71,9 @@ impl Component for LoginComponent {
             username: String::new(),
             password: String::new(),
             login_button_disabled: true,
+            fetch_service: FetchService::new(),
+            fetch_task: None,
+            fetching: false,
         }
     }
 
@@ -32,60 +83,66 @@ impl Component for LoginComponent {
 
     fn update(&mut self, msg: Self::Message) -> ShouldRender {
         match msg {
-            Message::UpdateUsername(new_username) => {
+            Msg::UpdateUsername(new_username) => {
                 self.username = new_username;
                 self.update_button_state();
             }
 
-            Message::UpdatePassword(new_password) => {
+            Msg::UpdatePassword(new_password) => {
-                info!("Password changed");
                 self.password = new_password;
                 self.update_button_state();
             }
-            Message::HandleForm() => {
+
-                info!("Submit button clicked");
+            Msg::HandleForm() => self.post_login(),
+
+            Msg::FetchReady(response) => {
+                self.fetching = false;
+                info!("Fetch complete. Body: {}", response)
+            }
+
+            Msg::FetchError => {
+                self.fetching = false;
+                error!("There was an error connecting to API")
             }
         }
         true
     }
 
     fn view(&self) -> Html {
-        let onclick = self.component_link.callback(|_| Message::HandleForm());
+        let onclick = self.component_link.callback(|_| Msg::HandleForm());
         let oninput_username = self
             .component_link
-            .callback(|e: InputData| Message::UpdateUsername(e.value));
+            .callback(|e: InputData| Msg::UpdateUsername(e.value));
         let oninput_password = self
             .component_link
-            .callback(|e: InputData| Message::UpdatePassword(e.value));
+            .callback(|e: InputData| Msg::UpdatePassword(e.value));
 
         html! {
             <div class="uk-card uk-card-default uk-card-body uk-width-1-3@s uk-position-center">
                 <h1 class="uk-card-title">{ "Please log in" }</h1>
-                <form>
+                <div>
                     <fieldset class="uk-fieldset">
                         <input class="uk-input uk-margin",
                             placeholder="Username",
+                            disabled=self.fetching,
                             value=&self.username,
                             oninput=oninput_username, />
                         <input class="uk-input uk-margin-bottom",
                             placeholder="Password",
+                            disabled=self.fetching,
                             type="password",
                             value=&self.password,
                             oninput=oninput_password, />
                         <button
                         class="uk-button uk-button-primary",
-                        type="submit", onclick=onclick>
+                        type="button",
-                            { "Submit" }
+                        disabled=self.fetching,
+                        onclick=onclick>
+                            { "Log in" }
                         </button>
                     </fieldset>
-                </form>
+                </div>
             </div>
         }
     }
 }
-
-impl LoginComponent {
-    fn update_button_state(&mut self) {
-        self.login_button_disabled = self.username.is_empty() || self.password.is_empty();
-    }
-}

project/frontend/src/main.rs

@@ -1,6 +1,10 @@
 #![recursion_limit = "256"]
 
+extern crate log;
+extern crate web_logger;
+
 mod component;
+pub mod utils;
 
 use component::login::LoginComponent;
 use yew::prelude::*;
@@ -13,9 +17,9 @@ struct App {}
 enum AppRoute {
     #[to = "/login"]
     Login,
-    PageNotFound(Permissive<String>),
     #[to = "/"]
     Root,
+    PageNotFound(Permissive<String>),
 }
 
 impl Component for App {
@@ -33,32 +37,27 @@ impl Component for App {
     fn view(&self) -> VNode {
         html! {
             <div>
-                <nav class="menu",>
+                <Router<AppRoute>
-                    <RouterButton<AppRoute> route=AppRoute::Root>{"Go to Root"}</RouterButton<AppRoute>>
+                    render = Router::render(|switch: AppRoute| {
-                    <RouterButton<AppRoute> route=AppRoute::Login>{"Go to Login"}</RouterButton<AppRoute>>
+                        match switch {
-                </nav>
+                            AppRoute::Login => html!{<LoginComponent />},
-                <div>
+                            AppRoute::PageNotFound(Permissive(None)) => html!{"Page not found"},
-                    <Router<AppRoute>
+                            AppRoute::PageNotFound(Permissive(Some(missed_route))) => html!{format!("Page '{}' not found", missed_route)},
-                        render = Router::render(|switch: AppRoute| {
+                            AppRoute::Root => {
-                            match switch {
+                                html!{"hello there!"}
-                                AppRoute::Login => html!{<LoginComponent />},
+                            },
-                                AppRoute::PageNotFound(Permissive(None)) => html!{"Page not found"},
+                        }
-                                AppRoute::PageNotFound(Permissive(Some(missed_route))) => html!{format!("Page '{}' not found", missed_route)},
+                    })
-                                AppRoute::Root => {
+                    redirect = Router::redirect(|route: Route| {
-                                    html!{"hello there!"}
+                        AppRoute::PageNotFound(Permissive(Some(route.route)))
-                                },
+                    })
-                            }
+                />
-                        })
-                        redirect = Router::redirect(|route: Route| {
-                            AppRoute::PageNotFound(Permissive(Some(route.route)))
-                        })
-                    />
-                </div>
             </div>
         }
     }
 }
 
 fn main() {
+    web_logger::init();
     yew::start_app::<App>();
 }