How to receive backend responses and render accordingly on the frontend based on different responses?

[callmeitachi]

When developing with Cargo Leptos, taking a login page as an example, if I use and perform a series of backend validations, multiple responses might be returned. If the response status is not 200, how can I implement displaying error messages using the alert method on the frontend?

[gbj]

There are many ways to do what you're describing. Please provide some example code that shows what you've tried so far and what isn't working.

[callmeitachi]

On the login page, I want to first verify on the client side whether the two password inputs match. If the passwords don't match when clicking login, I want to use the alert function to notify the user. However, when I click the submit button, the ActionForm also executes server-side functions, which I don't want.
Additionally, when the passwords do match, I want to receive the backend response to inform the user whether login was successful. If verification fails, I want to use alert to notify the user of incorrect password.Here is my code：

use serde::{Deserialize,Serialize};
#[derive(Serialize,Deserialize,Debug,Clone)]
pub struct User {
    username:String,
    password:String,
}
#[component]
pub fn Login() -> impl IntoView {
    let (username,set_username)=signal("".to_string());
    let (password,set_password)=signal("".to_string());
    let submit=ServerAction::<LoginAuth>::new();
    let (is_loading,set_is_loading)=signal(false);
    view! {
        <main>
            <div class="min-h-screen flex items-center justify-center " >
                <div class="flex items-center justify-center h-full">
                    <img src="/telecom(1).png" alt="加载出错" />
                </div>
                <div class="w-full max-w-md p-8 space-y-8">
                    <h2 class="text-2xl font-semibold text-center">
                        "登陆你的账号"
                    </h2>

                    {}
                    <ActionForm  action=submit>
                        <div>
                            <label
                                htmlFor="username"
                                class="block text-sm font-medium text-gray-300 mb-2"
                            >
                                "账号"
                            </label>
                            <input
                                id="username"
                                name="login_arg[username]"
                                type="text"
                                class="w-full px-3 py-2 bg-gray-800/50 border border-gray-700 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
                                required
                                on:input:target=move |ev| {
                                    set_username.set(ev.target().value());
                                }
                                prop:value=username
                            />
                        </div>

                        <div>
                            <div class="flex justify-between items-center mb-2">
                                <label
                                    htmlFor="password"
                                    class="block text-sm font-medium text-gray-300"
                                >
                                    "密码"
                                </label>
                                <a href="#" class="text-sm text-indigo-400 hover:text-indigo-300">
                                    "忘记密码？"
                                </a>
                            </div>
                            <input
                                id="password"
                                name="login_arg[password]"
                                type="password"
                                class="w-full px-3 py-2 bg-gray-800/50 border border-gray-700 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
                                required
                                on:input:target=move |ev| {
                                    set_password.set(ev.target().value());
                                }
                                prop:value=password
                            />
                        </div>

                        <button
                            type="submit"
                            class="w-full mt-4 py-2  bg-indigo-500 hover:bg-indigo-600 text-white font-semibold rounded-md transition duration-200"
                            on:click=move |e| {
                                leptos::logging::log!("发生");
                                set_is_loading.set(true);
                            }
                        >{move || if is_loading.get() { "登录中..." } else { "登录" }}</button>
                    </ActionForm>

                    <div class="text-center text-sm">
                        <span class="text-gray-400">"还没有账号"</span>
                        <a href="/register" class="text-indigo-400 hover:text-indigo-300 ml-1">
                            "开始免费体验"
                        </a>
                    </div>
                </div>
            </div>
        </main>
    }
}
#[server]
pub async fn login_auth(login_arg:User) -> Result<(),ServerFnError> {
    use surrealdb::opt::auth::Record;
    use surrealdb::{Surreal,engine::remote::ws::{Ws},opt::auth::Root};
    use axum::http::header::HeaderValue;
    use axum::http::{header,StatusCode};
    use leptos_axum::ResponseOptions;
    use crate::pub_variant::DB;
    let response=expect_context::<ResponseOptions>();
    // let db=Surreal::new::<Ws>("localhost:8000").await.expect("数据库连接失败，请确认是否启动数据库");
    let login_auth=DB.signin(Record {
        access:"account",
        namespace:"test",
        database:"test",
        params:User {
            username:login_arg.username,
            password:login_arg.password,
        }
     })
    .await;
     match login_auth {
        Ok(v)=> {
            let token=v.into_insecure_token();
            response.set_status(StatusCode::OK);
            println!("login success!: {}", token);
            // response.
            // response.headers_mut().insert(header::SET_COOKIE, HeaderValue::from_str(&format!("token={}; Path=/; HttpOnly; SameSite=Lax", token)).unwrap());
            leptos_axum::redirect("/home");
            Ok(())
        },
        Err(e)=> {
            println!("login error: {}", e);
            response.set_status(StatusCode::UNAUTHORIZED);
            Err(ServerFnError::ServerError("error".to_string()))
        }
     }
}

[callmeitachi]

By the way, how can I use to conditionally render the page? For some pages, I want them to render only when the session is valid. If the session expires, I want to render other content. I only found a few examples about cargo leptos in the Leptos documentation, and it's a bit hard to solve. Here is my server-side code:

#[server]
pub async fn home_auth() -> Result<(),ServerFnError> {
    use crate::pub_variant::DB;
    use surrealdb::opt::auth::{Root};
    DB.signin(Root {
        username:"root",
        password:"root",
    })
    .await?;
    let res:Option<String>=DB.query("RETURN <string>$session").await?.take(0)?;
    match res {
        Some(session) => {
            println!("{:?}",session);
            Ok(())
        },
        None => {
            println!("session获取错误");
            Err(ServerFnError::ServerError("session错误".to_string()))
        }
    }
}

[gbj]

On the login page, I want to first verify on the client side whether the two password inputs match. If the passwords don't match when clicking login, I want to use the alert function to notify the user.

See this section of the docs on how to do this kind of client-side validation by adding a submit listener:

on:submit:capture=|ev| {
  if /* the two inputs do not match */ {
    ev.prevent_default();
    alert("My message");
  }
}

To notify the user on success, you can create an effect that reads from the .value() signal of the ServerAction you have created:

Effect::new(move || {
  if let Some(Ok(_)) = submit.value().get() {
    // do something
  }
});

[gbj]

To conditionally render the page, you can use ProtectedRoute from the router, or you can use a resource that loads your home_auth() function, and a Suspense that reads from it with a Show component.