savanni/monorepo
1
0
Fork 0
Code Issues96 Pull Requests Actions Projects6 Releases Wiki Activity

Update the Login view to use the styled components

Browse Source
This commit is contained in:
Savanni D'Gerinel 2025-04-12 22:31:43 -04:00
parent d106cbe1d2
commit e5a0c85e18
8 changed files with 79 additions and 51 deletions

14
visions/ui/design.css
View File

@ -183,6 +183,7 @@ body {
color: var(--text-light);
}
/*
.label__edit-button {
margin-left: var(--spacing-l);
padding: var(--spacing-s);
@ -192,6 +193,11 @@ body {
background-color: var(--button-background-dark);
color: var(--text-inverse);
}
*/
.label > .cta {
margin-left: var(--spacing-l);
}
.row {
margin: var(--spacing-m);
@ -215,3 +221,11 @@ body {
color: var(--text-light);
}
.cta {
margin: 0;
padding: var(--spacing-m);
border: var(--border-light);
border-radius: var(--radius-l);
background-color: var(--button-background-dark);
color: var(--text-inverse);
}

14
visions/ui/src/components/button.rs Normal file
View File

@ -0,0 +1,14 @@
use yew::{function_component, html, AttrValue, Callback, Html, MouseEvent, Properties};
#[derive(Properties, PartialEq)]
pub struct ButtonProps {
pub on_click: Callback<MouseEvent>,
pub children: Html
}
#[function_component]
pub fn Button(ButtonProps{ on_click, children }: &ButtonProps) -> Html {
html! {
<button class="cta" onclick={on_click}>{children.clone()}</button>
}
}

4
visions/ui/src/components/label.rs
View File

@ -1,5 +1,7 @@
use yew::{function_component, html, AttrValue, Html, Properties};
use crate::components::Button;
#[derive(Properties, PartialEq)]
pub struct LabelProps {
#[prop_or(AttrValue::from(""))]
@ -19,7 +21,7 @@ pub fn Label(LabelProps { text, placeholder, editable }: &LabelProps) -> Html {
};
let edit_button = if *editable {
html! { <span class="label__edit-button">{"edit"}</span> }
html! { <Button on_click={|_| ()}>{"Edit"}</Button> }
} else { html! { } };
html! {

3
visions/ui/src/components/mod.rs
View File

@ -1,3 +1,6 @@
mod button;
pub use button::Button;
mod card;
pub use card::Card;

30
visions/ui/src/components/text_entry.rs
View File

@ -1,6 +1,8 @@
use wasm_bindgen::JsCast;
use web_sys::HtmlInputElement;
use yew::{function_component, html, use_node_ref, use_state, AttrValue, Callback, Event, Html, Properties};
use yew::{
function_component, html, use_node_ref, use_state, AttrValue, Callback, Event, Html, Properties,
};
#[derive(Properties, PartialEq)]
pub struct TextEntryProps {
@ -11,14 +13,26 @@ pub struct TextEntryProps {
#[prop_or(None)]
pub on_changed: Option<Callback<String>>,
#[prop_or(false)]
pub sensitive: bool,
}
#[function_component]
pub fn TextEntry(TextEntryProps { value, placeholder, on_changed }: &TextEntryProps) -> Html {
pub fn TextEntry(
TextEntryProps {
value,
placeholder,
on_changed,
sensitive,
}: &TextEntryProps,
) -> Html {
let on_changed_ = {
let on_changed = on_changed.clone();
Callback::from(move |event: Event| {
let input = event.target().and_then(|t| t.dyn_into::<HtmlInputElement>().ok());
let input = event
.target()
.and_then(|t| t.dyn_into::<HtmlInputElement>().ok());
if let Some(input) = input {
if let Some(ref on_changed) = on_changed {
on_changed.emit(input.value());
@ -27,7 +41,13 @@ pub fn TextEntry(TextEntryProps { value, placeholder, on_changed }: &TextEntryPr
})
};
html! {
<input class="text-entry" type="text" placeholder={placeholder} onchange={on_changed_} value={value} />
if *sensitive {
html! {
<input class="text-entry" type="password" placeholder={placeholder} onchange={on_changed_} value={value} />
}
} else {
html! {
<input class="text-entry" type="text" placeholder={placeholder} onchange={on_changed_} value={value} />
}
}
}

2
visions/ui/src/main.rs
View File

@ -121,7 +121,7 @@ fn App() -> Html {
auth_info.dispatch(AuthAction::Auth(session_id.as_str().to_owned()))
}
Err(ClientError::Unauthorized) => todo!(),
Err(ClientError::Err(status)) => todo!(),
Err(ClientError::Err(_status)) => todo!(),
};
})
})

9
visions/ui/src/views/design.rs
View File

@ -1,3 +1,4 @@
use gloo_console::log;
use yew::{function_component, html, Html, Properties};
use crate::components::*;
@ -53,6 +54,14 @@ pub fn Design(DesignProps { }: &DesignProps) -> Html {
<TextEntry value="vakarian" placeholder="username" />
</Row>
<Row>
<Button on_click={|_| {
log!("on_click");
}}>
{"Click Me"}
</Button>
</Row>
<Row>
<Card title="Card Title">
<p>{"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."}</p>

54
visions/ui/src/views/login.rs
View File

@ -1,8 +1,9 @@
use gloo_console::log;
use wasm_bindgen::JsCast;
use web_sys::HtmlInputElement;
use yew::{function_component, html, use_state, Callback, Event, Html, Properties};
use crate::components::TextEntry;
use crate::components::{Button, TextEntry};
#[derive(Properties, PartialEq)]
pub struct LoginProps {
@ -23,59 +24,24 @@ pub fn Login(LoginProps { on_login }: &LoginProps) -> Html {
let on_username_changed = {
let username = username.clone();
Callback::from(move |text: String| username.set(text))
};
let on_password_changed = {
let username = username.clone();
Callback::from(move |text: String| username.set(text))
};
/*
let on_username_changed = {
let username = username.clone();
Callback::from(move |event: Event| {
let input = event
.target()
.and_then(|t| t.dyn_into::<HtmlInputElement>().ok());
if let Some(input) = input {
username.set(input.value());
}
Callback::from(move |text: String| {
log!("on_username_changed", text.clone());
username.set(text);
})
};
let on_password_changed = {
let password = password.clone();
Callback::from(move |event: Event| {
let input = event
.target()
.and_then(|t| t.dyn_into::<HtmlInputElement>().ok());
if let Some(input) = input {
password.set(input.value());
}
})
let password = password .clone();
Callback::from(move |text: String| password .set(text))
};
*/
/*
html! {
<div class="login-form">
<div class="card">
<h1>{"Welcome to Visions VTT"}</h1>
<input type="text" name="username" placeholder="username" onchange={on_username_changed} />
<input type="password" name="password" placeholder="password" onchange={on_password_changed} />
<button onclick={on_click}>{"Login"}</button>
</div>
</div>
}
*/
html! {
<div class="login-form">
<div class="card">
<h1>{"Welcome to Visions VTT"}</h1>
<TextEntry placeholder="username" on_changed={on_username_changed} />
<TextEntry placeholder="password" on_changed={on_password_changed} />
<button onclick={on_click}>{"Login"}</button>
<TextEntry placeholder="username" value={(*username).clone()} on_changed={on_username_changed} />
<TextEntry placeholder="password" value={(*password).clone()} on_changed={on_password_changed} sensitive={true} />
<Button on_click={on_click}>{"Login"}</Button>
</div>
</div>
}