135 lines
5.1 KiB
Rust
135 lines
5.1 KiB
Rust
use dioxus::prelude::*;
|
|
use dioxus::router::components::Link;
|
|
|
|
use crate::api::auth::{register, AuthResponse};
|
|
use crate::components::forms::{AlertBox, FormInput, FormLabel, BUTTON_PRIMARY_CLASS};
|
|
use crate::router::Route;
|
|
|
|
#[component]
|
|
pub fn Register() -> Element {
|
|
let mut username = use_signal(|| "".to_string());
|
|
let mut email = use_signal(|| "".to_string());
|
|
let mut password = use_signal(|| "".to_string());
|
|
let mut confirm_password = use_signal(|| "".to_string());
|
|
let mut error = use_signal(|| None::<String>);
|
|
let mut success = use_signal(|| false);
|
|
|
|
let on_submit = move |_| {
|
|
error.set(None);
|
|
success.set(false);
|
|
|
|
if password().len() < 8 {
|
|
error.set(Some("密码长度至少 8 位".to_string()));
|
|
return;
|
|
}
|
|
if password() != confirm_password() {
|
|
error.set(Some("两次输入的密码不一致".to_string()));
|
|
return;
|
|
}
|
|
|
|
let username_val = username();
|
|
let email_val = email();
|
|
let password_val = password();
|
|
|
|
spawn(async move {
|
|
match register(username_val, email_val, password_val).await {
|
|
Ok(AuthResponse { success: true, .. }) => {
|
|
success.set(true);
|
|
}
|
|
Ok(AuthResponse {
|
|
success: false,
|
|
message,
|
|
..
|
|
}) => {
|
|
error.set(Some(message));
|
|
}
|
|
Err(e) => {
|
|
error.set(Some(format!("请求失败: {}", e)));
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
rsx! {
|
|
div { class: "min-h-screen flex items-center justify-center bg-white dark:bg-[#1d1e20]",
|
|
div { class: "w-full max-w-md p-8 bg-white dark:bg-[#2e2e33] rounded-2xl border border-gray-200 dark:border-[#333]",
|
|
h1 { class: "text-2xl font-bold text-center text-gray-900 dark:text-[#dadadb] mb-2",
|
|
"注册"
|
|
}
|
|
p { class: "text-sm text-center text-gray-500 dark:text-[#9b9c9d] mb-6",
|
|
"首个注册账号将自动成为管理员"
|
|
}
|
|
|
|
if success() {
|
|
div { class: "mb-4 p-3 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 rounded-lg text-center",
|
|
"注册成功！"
|
|
Link { class: "block mt-2 text-gray-700 dark:text-[#dadadb] hover:underline cursor-pointer",
|
|
to: Route::Login {},
|
|
"去登录"
|
|
}
|
|
}
|
|
}
|
|
|
|
if let Some(err) = error() {
|
|
AlertBox { message: err, variant: "error" }
|
|
}
|
|
|
|
div { class: "space-y-4",
|
|
div {
|
|
FormLabel { label: "用户名" }
|
|
FormInput {
|
|
r#type: "text",
|
|
placeholder: "3-50 位字符",
|
|
value: username(),
|
|
oninput: move |v: String| username.set(v),
|
|
onkeydown: None,
|
|
}
|
|
}
|
|
div {
|
|
FormLabel { label: "邮箱" }
|
|
FormInput {
|
|
r#type: "email",
|
|
placeholder: "your@email.com",
|
|
value: email(),
|
|
oninput: move |v: String| email.set(v),
|
|
onkeydown: None,
|
|
}
|
|
}
|
|
div {
|
|
FormLabel { label: "密码" }
|
|
FormInput {
|
|
r#type: "password",
|
|
placeholder: "至少 8 位",
|
|
value: password(),
|
|
oninput: move |v: String| password.set(v),
|
|
onkeydown: None,
|
|
}
|
|
}
|
|
div {
|
|
FormLabel { label: "确认密码" }
|
|
FormInput {
|
|
r#type: "password",
|
|
placeholder: "再次输入密码",
|
|
value: confirm_password(),
|
|
oninput: move |v: String| confirm_password.set(v),
|
|
onkeydown: None,
|
|
}
|
|
}
|
|
button {
|
|
class: "{BUTTON_PRIMARY_CLASS}",
|
|
onclick: on_submit,
|
|
"注册"
|
|
}
|
|
}
|
|
p { class: "mt-4 text-center text-sm text-gray-500 dark:text-[#9b9c9d]",
|
|
"已有账号？"
|
|
Link { class: "text-gray-700 dark:text-[#dadadb] hover:underline cursor-pointer",
|
|
to: Route::Login {},
|
|
"去登录"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|