Added login function to UI; #1

application/public/styles.scss

@@ -75,3 +75,30 @@ a {
   background-color: $secondary-bg-color-light;
 }
 
+input {
+  background-color: $secondary-bg-color-light;
+  border: none;
+  border-radius: 3px;
+  padding: 5px 10px;
+  font-size: 0.9em;
+  color: $text-color;
+  margin-bottom: 20px;
+}
+
+input[type=password] {
+  margin-top: 60px;
+}
+
+input[type=submit]:hover {
+  background-color: $secondary-bg-color-lighter;
+  cursor: pointer;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  margin: 40px auto 0 auto;
+  width: 400px;
+}
+

application/src/lib.rs

@@ -9,6 +9,7 @@ mod util;
 
 // Top-Level pages
 use crate::pages::home::Home;
+use crate::pages::login;
 use crate::pages::not_found::NotFound;
 use crate::pages::participants;
 use crate::pages::times;
@@ -21,8 +22,7 @@ pub fn App() -> impl IntoView {
     util::surrealdb::init_surrealdb();
 
     let websocket = expect_context::<util::surrealdb::SurrealContext>();
-    let websocket2 = websocket.clone();
+    let _participants = use_context::<util::surrealdb::ParticipantsContext>()
-    let participants = use_context::<util::surrealdb::ParticipantsContext>()
         .expect("Could not find participants context");
 
     view! {
@@ -59,17 +59,22 @@ pub fn App() -> impl IntoView {
         >
             <Router>
                 <components::navbar::Navbar />
-                <p>{websocket.message}</p>
-                <p>{ move || format!("{:?}", participants.0.get() )}</p>
-                <button on:click=move |_| { websocket.signin() }>"Test Message"</button>
-                <button on:click=move |_| { websocket2.send("{ \"id\": 1, \"method\": \"create\", \"params\": [ \"person\", { \"name\": \"Mary Doe\" } ] }") }>"Test Message"</button>
                 <main>
                     <Routes>
-                        <Route path="/" view=Home />
+                        <Route path="/" view=move || {
-                        <Route path="/participants" view=participants::Participants />
+                            view! {
-                        <Route path="/participants/add" view=participants::add::Add />
+                                // only show the outlet if data have loaded
-                        <Route path="/times" view=times::Times />
+                                <Show when=move || websocket.authenticated.get() fallback=login::Login>
-                        <Route path="/*" view=NotFound />
+                                    <Outlet/>
+                                </Show>
+                            }
+                        }>
+                            <Route path="/" view=Home />
+                            <Route path="/participants" view=participants::Participants />
+                            <Route path="/participants/add" view=participants::add::Add />
+                            <Route path="/times" view=times::Times />
+                            <Route path="/*" view=NotFound />
+                        </Route>
                     </Routes>
                 </main>
             </Router>

application/src/pages/login.rs

@@ -0,0 +1,32 @@
+use crate::util;
+use leptos::*;
+
+/// Login page
+#[component]
+pub fn Login() -> impl IntoView {
+    let websocket = expect_context::<util::surrealdb::SurrealContext>();
+
+    let input_element: NodeRef<html::Input> = create_node_ref();
+
+    let on_submit = move |ev: leptos::ev::SubmitEvent| {
+        ev.prevent_default();
+
+        let value = input_element
+            .get()
+            .expect("<input> should be mounted")
+            .value();
+
+        websocket.signin(value)
+    };
+
+    view! {
+        <form class="login" on:submit=on_submit>
+            <h1>"WRB Timings"</h1>
+            <input type="password"
+                node_ref=input_element
+                placeholder="Password"
+            />
+            <input type="submit" value="Submit" />
+        </form>
+    }
+}

application/src/pages/mod.rs

@@ -1,4 +1,5 @@
 pub mod home;
+pub mod login;
 pub mod not_found;
 pub mod participants;
 pub mod times;

application/src/util/surrealdb.rs

@@ -1,6 +1,6 @@
 use leptos::*;
 use leptos_use::{core::ConnectionReadyState, use_websocket, UseWebsocketReturn};
-use serde::Serialize;
+use serde::{Deserialize, Serialize};
 use serde_json::json;
 use std::rc::Rc;
 
@@ -25,25 +25,10 @@ struct SigninParam {
     pass: String,
 }
 
-#[derive(Clone, Debug)]
-pub enum HourKind {
-    A,
-    B,
-    C,
-    D,
-    Z,
-}
-
-#[derive(Clone, Debug)]
-pub struct GroupKind {
-    hour: HourKind,
-    lane: u8,
-}
-
 #[derive(Clone, Debug)]
 pub struct Participant {
     name: String,
-    group: GroupKind,
+    group: String,
 }
 
 #[derive(Clone, Debug)]
@@ -54,6 +39,21 @@ pub struct SurrealContext {
     pub message: Signal<Option<String>>,
     send: Rc<dyn Fn(&str)>,
     pub ready_state: Signal<ConnectionReadyState>,
+    pub authenticated: ReadSignal<bool>,
+    pub set_authenticated: WriteSignal<bool>,
+}
+
+#[derive(Serialize, Deserialize)]
+struct SurrealResponse {
+    id: u32,
+    result: SurrealResult,
+}
+
+#[derive(Serialize, Deserialize)]
+#[serde(untagged)]
+enum SurrealResult {
+    String(String),
+    Null,
 }
 
 impl SurrealContext {
@@ -61,11 +61,15 @@ impl SurrealContext {
         message: Signal<Option<String>>,
         send: Rc<dyn Fn(&str)>,
         ready_state: Signal<ConnectionReadyState>,
+        authenticated: ReadSignal<bool>,
+        set_authenticated: WriteSignal<bool>,
     ) -> Self {
         Self {
             message,
             send,
             ready_state,
+            authenticated,
+            set_authenticated,
         }
     }
 
@@ -74,28 +78,19 @@ impl SurrealContext {
         (self.send)(message)
     }
 
-    pub fn signin(&self) {
+    pub fn signin(&self, pass: String) {
+        log::debug!("Signing into surrealdb");
+
         let request = SurrealRequest {
-            id: 1,
+            id: 0,
             method: String::from("signin"),
             params: vec![SurrealParams::SigninParam(SigninParam {
                 user: String::from("root"),
-                pass: String::from("root"),
+                pass,
             })],
         };
 
         self.send(&json!(request).to_string());
-
-        let request = SurrealRequest {
-            id: 1,
-            method: String::from("use"),
-            params: vec![
-                SurrealParams::String(String::from("wrb")),
-                SurrealParams::String(String::from("timings")),
-            ],
-        };
-
-        self.send(&json!(request).to_string())
     }
 }
 
@@ -107,18 +102,68 @@ pub fn init_surrealdb() {
         ..
     } = use_websocket("ws://localhost:80/rpc");
 
-    let (participants, _set_participants) = create_signal::<Vec<Participant>>(vec![Participant {
+    let (participants, _set_participants) = create_signal::<Vec<Participant>>(vec![]);
-        name: "User1".to_string(),
+    let (authenticated, set_authenticated) = create_signal::<bool>(false);
-        group: GroupKind {
-            hour: HourKind::A,
-            lane: 1,
-        },
-    }]);
 
-    provide_context(SurrealContext::new(
+    let websocket = SurrealContext::new(
         message,
         Rc::new(send.clone()),
         ready_state,
-    ));
+        authenticated,
+        set_authenticated,
+    );
+
+    provide_context(websocket);
     provide_context(ParticipantsContext(participants));
+
+    create_effect(move |prev_value| {
+        let msg = message.get();
+
+        if prev_value != Some(msg.clone()) {
+            match msg {
+                Some(ref text) => {
+                    log::debug!("{:?}", text);
+                    surrealdb_response(text.to_string());
+                }
+                None => (),
+            }
+        }
+
+        msg
+    });
+}
+
+/// Function to execute when SurrealDB returns a message
+fn surrealdb_response(response: String) {
+    let response: SurrealResponse = match serde_json::from_str(&response) {
+        Ok(res) => res,
+        Err(err) => {
+            log::warn!("{}", err);
+            return;
+        }
+    };
+
+    match response.id {
+        0 => use_surrealdb(response),
+        1 => log::debug!("Succesfully execute use wrb timings"),
+        _ => return,
+    }
+}
+
+/// Function to execute when DB signin is succesful
+fn use_surrealdb(_response: SurrealResponse) {
+    let websocket = expect_context::<SurrealContext>();
+
+    websocket.set_authenticated.set(true);
+
+    let request = SurrealRequest {
+        id: 1,
+        method: String::from("use"),
+        params: vec![
+            SurrealParams::String(String::from("wrb")),
+            SurrealParams::String(String::from("timings")),
+        ],
+    };
+
+    websocket.send(&json!(request).to_string())
 }