Continuing writing report

project/frontend/src/component/login.rs

@@ -0,0 +1,91 @@
+use log::info;
+use yew::prelude::*;
+
+pub struct LoginComponent {
+    component_link: ComponentLink<LoginComponent>,
+    username: String,
+    password: String,
+    login_button_disabled: bool,
+}
+
+pub enum Message {
+    UpdateUsername(String),
+    UpdatePassword(String),
+    HandleForm(),
+}
+impl Component for LoginComponent {
+    type Message = Message;
+    type Properties = ();
+
+    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+        Self {
+            component_link: link,
+            username: String::new(),
+            password: String::new(),
+            login_button_disabled: true,
+        }
+    }
+
+    fn change(&mut self, _: Self::Properties) -> ShouldRender {
+        true
+    }
+
+    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+        match msg {
+            Message::UpdateUsername(new_username) => {
+                self.username = new_username;
+                self.update_button_state();
+            }
+
+            Message::UpdatePassword(new_password) => {
+                info!("Password changed");
+                self.password = new_password;
+                self.update_button_state();
+            }
+            Message::HandleForm() => {
+                info!("Submit button clicked");
+            }
+        }
+        true
+    }
+
+    fn view(&self) -> Html {
+        let onclick = self.component_link.callback(|_| Message::HandleForm());
+        let oninput_username = self
+            .component_link
+            .callback(|e: InputData| Message::UpdateUsername(e.value));
+        let oninput_password = self
+            .component_link
+            .callback(|e: InputData| Message::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>
+                    <fieldset class="uk-fieldset">
+                        <input class="uk-input uk-margin",
+                            placeholder="Username",
+                            value=&self.username,
+                            oninput=oninput_username, />
+                        <input class="uk-input uk-margin-bottom",
+                            placeholder="Password",
+                            type="password",
+                            value=&self.password,
+                            oninput=oninput_password, />
+                        <button
+                        class="uk-button uk-button-primary",
+                        type="submit", onclick=onclick>
+                            { "Submit" }
+                        </button>
+                    </fieldset>
+                </form>
+            </div>
+        }
+    }
+}
+
+impl LoginComponent {
+    fn update_button_state(&mut self) {
+        self.login_button_disabled = self.username.is_empty() || self.password.is_empty();
+    }
+}

project/frontend/src/component/mod.rs

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