Added login function to UI; #1
This commit is contained in:
parent
8bb1f62352
commit
fe5a35208e
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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>
|
||||
|
32
application/src/pages/login.rs
Normal file
32
application/src/pages/login.rs
Normal 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>
|
||||
}
|
||||
}
|
@ -1,4 +1,5 @@
|
||||
pub mod home;
|
||||
pub mod login;
|
||||
pub mod not_found;
|
||||
pub mod participants;
|
||||
pub mod times;
|
||||
|
@ -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())
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user