eta357/LibreTunes-Nix-Test
1
0
Fork 0
Code Pull Requests Actions Activity

made a simple password visibility toggler

Browse Source 
modified:   Cargo.lock
	modified:   Cargo.toml
	modified:   src/pages/signup.rs
	modified:   style/signup.scss
This commit is contained in:
Danny Zou
2024-02-23 20:31:25 -05:00
parent 5650882ba8
commit f4bea8aa33
4 changed files with 178 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/pages/signup.rs
View File

@ -1,10 +1,11 @@
use leptos::leptos_dom::*;
use leptos::*;
use leptos_icons::IoIcon::*;
use leptos_icons::*;
use crate::auth::signup;
use crate::models::User;
use leptos::ev::input;
use leptos::leptos_dom::*;
use leptos::*;
use leptos_icons::AiIcon::*;
use leptos_icons::IoIcon::*;
use leptos_icons::*;
#[component]
pub fn Signup() -> impl IntoView {
@ -12,6 +13,13 @@ pub fn Signup() -> impl IntoView {
let (email, set_email) = create_signal("".to_string());
let (password, set_password) = create_signal("".to_string());
let (show_password, set_show_password) = create_signal(false);
let toggle_password = move |_| {
set_show_password.update(|show_password| *show_password = !*show_password);
log!("showing password");
};
let on_submit = move |ev: leptos::ev::SubmitEvent| {
ev.prevent_default();
let new_user = User {
@ -33,7 +41,7 @@ pub fn Signup() -> impl IntoView {
});
};
view!{
view! {
<div class="page-container">
<div class="signup-container">
<a class="return" href="/"><Icon icon=Icon::from(IoReturnUpBackSharp) /></a>
@ -63,7 +71,7 @@ pub fn Signup() -> impl IntoView {
<i></i>
</div>
<div class="input-box">
<input class="signup-password" type="text" required
<input class="signup-password" type={move || if show_password() { "text" } else { "password"} } required style="width: 90%;"
on:input = move |ev| {
set_password(event_target_value(&ev));
log!("password changed to: {}", password.get());
@ -71,6 +79,18 @@ pub fn Signup() -> impl IntoView {
/>
<span>Password</span>
<i></i>
<Show
when=move || {show_password() == false}
fallback=move || view!{ <button on:click=toggle_password class="password-visibility">
<Icon icon=Icon::from(AiEyeInvisibleFilled) />
</button> /> }
>
<button on:click=toggle_password class="password-visibility">
<Icon icon=Icon::from(AiEyeFilled) />
</button>
</Show>
</div>
<input type="submit" value="Sign Up" />
<span class="go-to-login">
@ -80,4 +100,4 @@ pub fn Signup() -> impl IntoView {
</div>
</div>
}
}
}