Added login function to UI; #1

This commit is contained in:
xeovalyte 2024-02-19 10:30:12 +01:00
parent 8bb1f62352
commit fe5a35208e
No known key found for this signature in database
5 changed files with 161 additions and 51 deletions

View File

@ -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;
}

View File

@ -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="/participants" view=participants::Participants />
<Route path="/participants/add" view=participants::add::Add />
<Route path="/times" view=times::Times />
<Route path="/*" view=NotFound />
<Route path="/" view=move || {
view! {
// only show the outlet if data have loaded
<Show when=move || websocket.authenticated.get() fallback=login::Login>
<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>

View File

@ -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>
}
}

View File

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

View File

@ -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 {
name: "User1".to_string(),
group: GroupKind {
hour: HourKind::A,
lane: 1,
},
}]);
let (participants, _set_participants) = create_signal::<Vec<Participant>>(vec![]);
let (authenticated, set_authenticated) = create_signal::<bool>(false);
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())
}