111 lines
4.4 KiB
Rust
111 lines
4.4 KiB
Rust
use crate::auth::signup;
|
|
use crate::models::User;
|
|
use crate::util::state::GlobalState;
|
|
use leptos::leptos_dom::*;
|
|
use leptos::*;
|
|
use leptos_icons::*;
|
|
|
|
#[component]
|
|
pub fn Signup() -> impl IntoView {
|
|
let (username, set_username) = create_signal("".to_string());
|
|
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 mut new_user = User {
|
|
id: None,
|
|
username: username.get(),
|
|
email: email.get(),
|
|
password: Some(password.get()),
|
|
created_at: None,
|
|
admin: false,
|
|
};
|
|
log!("new user: {:?}", new_user);
|
|
|
|
let user = GlobalState::logged_in_user();
|
|
|
|
spawn_local(async move {
|
|
if let Err(err) = signup(new_user.clone()).await {
|
|
// Handle the error here, e.g., log it or display to the user
|
|
log!("Error signing up: {:?}", err);
|
|
|
|
// Since we're not sure what the state is, manually refetch the user
|
|
user.refetch();
|
|
} else {
|
|
// Manually set the user to the new user, avoiding a refetch
|
|
new_user.password = None;
|
|
user.set(Some(new_user));
|
|
|
|
// Redirect to the login page
|
|
log!("Signed up successfully!");
|
|
leptos_router::use_navigate()("/", Default::default());
|
|
log!("Navigated to home page after signup")
|
|
}
|
|
});
|
|
};
|
|
|
|
view! {
|
|
<div class="auth-page-container">
|
|
<div class="signup-container">
|
|
<a class="return" href="/"><Icon icon=icondata::IoReturnUpBackSharp /></a>
|
|
<div class="header">
|
|
<h1>LibreTunes</h1>
|
|
</div>
|
|
<form class="signup-form" action="POST" on:submit=on_submit>
|
|
<div class="input-box">
|
|
<input class="signup-email" type="text" required
|
|
on:input = move |ev| {
|
|
set_email(event_target_value(&ev));
|
|
log!("email changed to: {}", email.get());
|
|
}
|
|
prop:value=email
|
|
/>
|
|
<span>Email</span>
|
|
<i></i>
|
|
</div>
|
|
<div class="input-box">
|
|
<input class="signup-username" type="text" required
|
|
on:input = move |ev| {
|
|
set_username(event_target_value(&ev));
|
|
log!("username changed to: {}", username.get());
|
|
}
|
|
/>
|
|
<span>Username</span>
|
|
<i></i>
|
|
</div>
|
|
<div class="input-box">
|
|
<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());
|
|
}
|
|
/>
|
|
<span>Password</span>
|
|
<i></i>
|
|
<Show
|
|
when=move || {show_password() == false}
|
|
fallback=move || view!{ <button on:click=toggle_password class="password-visibility"> <Icon icon=icondata::AiEyeInvisibleFilled /></button> /> }
|
|
>
|
|
<button on:click=toggle_password class="password-visibility">
|
|
<Icon icon=icondata::AiEyeFilled />
|
|
</button>
|
|
</Show>
|
|
</div>
|
|
<input type="submit" value="Sign Up" />
|
|
<span class="go-to-login">
|
|
Already Have an Account? <a href="/login" class="link" >Go to Login</a>
|
|
</span>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|