try to use yew

Cargo.toml

@@ -0,0 +1,44 @@
+[package]
+name = "pipe"
+version = "0.1.0"
+authors = ["Spxg <itsme@unsafe.me>"]
+edition = "2018"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+[lib]
+crate-type = ["cdylib", "rlib"]
+
+[dependencies]
+chrono = { version = "0.4", features = ["serde"] }
+dotenv_codegen = "0.15"
+lazy_static = "1.4"
+log = "0.4"
+parking_lot = "0.10"
+pulldown-cmark = "0.6"
+serde = "1.0"
+serde_json = "1.0"
+thiserror = "1"
+yew = "0.17"
+yew-router = { version="0.14", features = ["web_sys"] }
+wasm-bindgen = "0.2"
+wasm-logger = "0.2"
+wee_alloc = "0.4"
+
+[dependencies.status-protoc]
+version = "0.1"
+path = "../status-protoc"
+
+[dependencies.web-sys]
+version = "0.3"
+features = [
+    "Document",
+    "Element",
+    "Node",
+    "Window",
+    "HtmlCollection",
+]
+
+[dev-dependencies]
+js-sys = "0.3"
+wasm-bindgen-futures = "0.4"
+wasm-bindgen-test = "0.3"

src/error.rs

@@ -0,0 +1,36 @@
+//! Error type for error handling
+
+use crate::types::ErrorInfo;
+use thiserror::Error as ThisError;
+
+/// Define all possible errors
+#[derive(ThisError, Clone, Debug)]
+pub enum Error {
+    /// 401
+    #[error("Unauthorized")]
+    Unauthorized,
+
+    /// 403
+    #[error("Forbidden")]
+    Forbidden,
+
+    /// 404
+    #[error("Not Found")]
+    NotFound,
+
+    /// 422
+    #[error("Unprocessable Entity: {0:?}")]
+    UnprocessableEntity(ErrorInfo),
+
+    /// 500
+    #[error("Internal Server Error")]
+    InternalServerError,
+
+    /// serde deserialize error
+    #[error("Deserialize Error")]
+    DeserializeError,
+
+    /// request error
+    #[error("Http Request Error")]
+    RequestError,
+}

src/lib.rs

@@ -0,0 +1,14 @@
+#![recursion_limit="256"]
+use yew::App;
+use crate::routes::login::Login;
+use wasm_bindgen::prelude::*;
+
+mod routes;
+mod types;
+mod services;
+mod error;
+
+#[wasm_bindgen(start)]
+pub fn run_app() {
+    App::<Login>::new().mount_to_body();
+}

src/routes/login.rs

@@ -0,0 +1,136 @@
+use crate::types::auth::LoginInfo;
+use yew::{ComponentLink, Component, Html};
+use yew::format::Json;
+use wasm_bindgen::prelude::*;
+use yew::prelude::*;
+use yew::services::fetch::FetchTask;
+use status_protoc::status::user::login::LoginStatus;
+use crate::error::Error;
+use crate::services::auth::Auth;
+
+pub struct Login {
+    auth: Auth,
+    error: Option<Error>,
+    request: LoginInfo,
+    response: Callback<Result<LoginStatus, Error>>,
+    task: Option<FetchTask>,
+    props: Props,
+    link: ComponentLink<Self>,
+    test: String
+}
+
+pub enum Msg {
+    Request,
+    Response(Result<LoginStatus, Error>),
+    Ignore,
+    UpdateUserName(String),
+    UpdatePassword(String),
+}
+
+#[derive(PartialEq, Properties, Clone, Default)]
+pub struct Props {
+    /// Callback when user is logged in successfully
+    pub callback: Callback<LoginStatus>,
+}
+
+impl Component for Login {
+    type Message = Msg;
+    type Properties = Props;
+
+    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
+        Self {
+            auth: Auth::new(),
+            error: None,
+            request: LoginInfo::default(),
+            response: link.callback(Msg::Response),
+            task: None,
+            props,
+            link,
+            test: String::default()
+        }
+    }
+
+    fn update(&mut self, msg: Self::Message) -> bool {
+        match msg {
+            Msg::Request => {
+                let request = self.request.clone();
+                self.task = Some(self.auth.login(request, self.response.clone()))
+            },
+            Msg::Response(Ok(response)) => {
+                self.test = serde_json::to_string_pretty(&response).unwrap();
+
+                self.props.callback.emit(response);
+                self.error = None;
+                self.task = None;
+                // Route to home page after logged in
+                // self.router_agent.send(ChangeRoute(AppRoute::Home.into()));
+            },
+            Msg::Response(Err(err)) => {
+                self.error = Some(err);
+                self.task = None;
+            },
+            Msg::UpdateUserName(value) => self.request.user_name = value,
+            Msg::UpdatePassword(value) => self.request.user_password = value,
+            Msg::Ignore => {}
+        }
+        true
+    }
+
+    fn change(&mut self, _props: Self::Properties) -> bool {
+        unimplemented!()
+    }
+
+    fn view(&self) -> Html {
+        let onsubmit = self.link.callback(|ev: FocusEvent| {
+            ev.prevent_default(); /* Prevent event propagation */
+            Msg::Request
+        });
+        let oninput_name = self
+            .link
+            .callback(|ev: InputData| Msg::UpdateUserName(ev.value));
+        let oninput_password = self
+            .link
+            .callback(|ev: InputData| Msg::UpdatePassword(ev.value));
+
+        html! {
+         <div class="auth-page">
+                <div class="container page">
+                    <div class="row">
+                        <div class="col-md-6 offset-md-3 col-xs-12">
+                            <h1 class="text-xs-center">{ "Sign In" }</h1>
+                            <form onsubmit=onsubmit>
+                                <fieldset>
+                                    <fieldset class="form-group">
+                                        <input
+                                            class="form-control form-control-lg"
+                                            type="name"
+                                            placeholder="Name"
+                                            value=&self.request.user_name
+                                            oninput=oninput_name
+                                            />
+                                    </fieldset>
+                                    <fieldset class="form-group">
+                                        <input
+                                            class="form-control form-control-lg"
+                                            type="password"
+                                            placeholder="Password"
+                                            value=&self.request.user_password
+                                            oninput=oninput_password
+                                            />
+                                    </fieldset>
+                                    <button
+                                        class="btn btn-lg btn-primary pull-xs-right"
+                                        type="submit"
+                                        disabled=false>
+                                        { "Sign in" }
+                                    </button>
+                                </fieldset>
+                            </form>
+                            <p> { self.test.clone() } </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        }
+    }
+}

src/routes/mod.rs

@@ -0,0 +1 @@
+pub mod login;

src/services/auth.rs

@@ -0,0 +1,47 @@
+use yew::callback::Callback;
+use yew::services::fetch::FetchTask;
+use status_protoc::status::user::login::LoginStatus;
+
+use crate::error::Error;
+use crate::services::requests::Requests;
+use crate::types::auth::{LoginInfo, UserInfo};
+
+/// Apis for authentication
+#[derive(Default, Debug)]
+pub struct Auth {
+    requests: Requests,
+}
+
+impl Auth {
+    pub fn new() -> Self {
+        Self {
+            requests: Requests::new(),
+        }
+    }
+
+    /// Login a user
+    pub fn login(
+        &mut self,
+        login_info: LoginInfo,
+        callback: Callback<Result<LoginStatus, Error>>,
+    ) -> FetchTask {
+        self.requests.post::<LoginInfo, LoginStatus>(
+            "/user/login".to_string(),
+            login_info,
+            callback,
+        )
+    }
+
+    // /// Register a new user
+    // pub fn register(
+    //     &mut self,
+    //     register_info: RegisterInfo,
+    //     callback: Callback<Result<UserInfoWrapper, Error>>,
+    // ) -> FetchTask {
+    //     self.requests.post::<RegisterInfoWrapper, UserInfoWrapper>(
+    //         "/user/register".to_string(),
+    //         register_info,
+    //         callback,
+    //     )
+    // }
+}

src/services/mod.rs

@@ -0,0 +1,4 @@
+//! Api requests via yew FetchService
+
+pub mod auth;
+pub mod requests;