How do I handle errors returned from the server in <Form>?

[Grafcube]

I have a form which makes a POST request to the action:

<Form action="post" method="/api/v1/login">...</Form>

If the server returns a non-zero status, I want to display the message sent from the server. I tried to use the error property on Form but it doesn't take closures. I couldn't find any examples on the usage.

[gbj]

You probably want to provide an on_response callback.

From the FormProps docs:

on_response: Option<Rc<dyn Fn(&Response)>>

A callback will be called with the Response the server sends in response to a form submission.

[Grafcube]

Here's what I have:

on_response=move |res: web_sys::Response| {
    if !res.ok() {
        set_errormsg(res.text().unwrap())
    }
}

res.text() returns a Promise, not a Future, and looking at the docs, I don't see any way to await it.

The type also seems to be incorrect. This I'm not too sure on how to handle:

rustc: mismatched types
expected struct `std::rc::Rc<(dyn for<'a> std::ops::Fn(&'a web_sys::Response) + 'static)>`
  found closure `[closure@ui/src/components/auth.rs:21:25: 21:49]` [E0308]

[gbj]

Higher-level comment

I basically built <Form/> so I could build <ActionForm/> on top of it, so sorry if the ergonomics are a little rough here. My typical pattern for doing what you're trying to do would be to use a server function and then create_server_action and then <ActionForm/> (see the various todo_app_sqlite examples). We should probably create better APIs for using <Form/> or <ActionForm/> with external/non-server-fn APIs like you're doing here. I'm open to suggestions on how to make that better.

Lower-level comment

Re: both these questions, taking a look at the on_response implementation for <ActionForm/> may be useful:

leptos/router/src/components/form.rs

Lines 255 to 311 in 6753ba2

	let on_response = Rc::new(move |resp: &web_sys::Response| {
	let resp = resp.clone().expect("couldn't get Response");
	let status = resp.status();
	spawn_local(async move {
	let body = JsFuture::from(
	resp.text().expect("couldn't get .text() from Response"),
	)
	.await;
	match body {
	Ok(json) => {
	// 500 just returns text of error, not JSON
	if status == 500 {
	let err = ServerFnError::ServerError(
	json.as_string().unwrap_or_default(),
	);
	if let Some(error) = error {
	error.try_set(Some(Box::new(err.clone())));
	}
	value.try_set(Some(Err(err)));
	} else {
	match O::de(
	&json
	.as_string()
	.expect("couldn't get String from JsString"),
	) {
	Ok(res) => {
	value.try_set(Some(Ok(res)));
	if let Some(error) = error {
	error.try_set(None);
	}
	}
	Err(e) => {
	value.try_set(Some(Err(
	ServerFnError::Deserialization(
	e.to_string(),
	),
	)));
	if let Some(error) = error {
	error.try_set(Some(Box::new(e)));
	}
	}
	}
	}
	}
	Err(e) => {
	error!("{e:?}");
	if let Some(error) = error {
	error.try_set(Some(Box::new(ServerFnError::Request(
	e.as_string().unwrap_or_default(),
	))));
	}
	}
	};
	input.try_set(None);
	action.set_pending(false);
	});
	});

res.text() returns a Promise, not a Future, and looking at the docs, I don't see any way to await it.

Yeah at this point you're working with raw web-sys types, so a look at the wasm-bindgen guide section on Promises and Futures may be helpful.

The type also seems to be incorrect. This I'm not too sure on how to handle:

rustc: mismatched types
expected struct `std::rc::Rc<(dyn for<'a> std::ops::Fn(&'a web_sys::Response) + 'static)>`
  found closure `[closure@ui/src/components/auth.rs:21:25: 21:49]` [E0308]

Right, this is telling you it expects Rc<dyn Fn(_)> and you're giving it a closure. Which suggests to me that on_response=Rc::new(move /* etc. */) or on_response=Rc::new(move /* etc. */) as Rc<dyn Fn(&Response)> would satisfy it.

[Grafcube]

I tried to make it a server function but I ran into several problems so I decided to keep it as is. After updating my dependencies to include actix, sqlx etc. in my UI crate, I set up the server function like this.

#[derive(Serialize, Deserialize, Validate)]
struct LoginData {
    #[validate(email)]
    email: String,
    #[validate(length(min = 8))]
    password: String,
    client_app: String,
    #[validate(url)]
    client_website: Option<String>,
}

#[server(ServerLogin, "/auth/login")]
async fn login(cx: Scope, email: String, password: String) -> Result<(), ServerFnError> {
    let pool = use_context::<activitypub_federation::config::Data<sqlx::PgPool>>(cx).unwrap();
    let session = use_context::<actix_session::Session>(cx).unwrap();
    let info = LoginData {
        email,
        password,
        client_app: "Web".to_string(),
        client_website: None,
    };

    info.validate()
        .map_err(|e| ServerFnError::ServerError(e.to_string()))?;
    let res = sqlx::query!(
        "SELECT apub_id, password FROM users WHERE lower(email)=$1",
        info.email.to_lowercase()
    )
    .fetch_one(pool.app_data())
    .await
    .map_err(|_| ServerFnError::ServerError("Email address is not registered".to_string()))?;
    let password_hash = argon2::PasswordHash::new(&res.password)
        .map_err(|e| ServerFnError::ServerError(e.to_string()))?;

    match argon2::PasswordVerifier::verify_password(
        &argon2::Argon2::default(),
        info.password.as_bytes(),
        &password_hash,
    ) {
        Ok(_) => {
            session
                .insert("id", res.apub_id)
                .map_err(|e| ServerFnError::ServerError(e.to_string()))?;
            session
                .insert("client_app", &info.client_app)
                .map_err(|e| ServerFnError::ServerError(e.to_string()))?;
            session
                .insert("client_website", &info.client_website)
                .map_err(|e| ServerFnError::ServerError(e.to_string()))?;
            Ok(())
        }
        Err(e) => Err(ServerFnError::ServerError(e.to_string())),
    }
}

The two main problems I had were

• I couldn't use the extractor for pool because of this error: the trait bound `activitypub_federation::config::Data<sqlx::Pool<sqlx::Postgres>>: std::clone::Clone` is not satisfied.
• I couldn't figure out how to return specific HTTP codes (400, 302, 401).

I would like to avoid having to do this the low level way because it seems like more work than necessary but if there's no other way then I'll do it.

We should probably create better APIs for using <Form/> or <ActionForm/> with external/non-server-fn APIs like you're doing here. I'm open to suggestions on how to make that better.

I would suggest a way to handle on_submit and/or on_error seamlessly with a closure that accepts an argument of Response/Error, preferably without additional dependencies for type annotations but that's not really a big deal.

[gbj]

I couldn't use the extractor for pool because of this error: the trait bound `activitypub_federation::config::Data<sqlx::Pool<sqlx::Postgres>>: std::clone::Clone` is not satisfied.

In that case you can just wrap it in an Arc so you can clone it. I think the query only needs to take an immutable reference to the pool so that should be fine.

Or if it's provided by an Actix extractor you can do something like this to extract it from the `HttpRequest

    let request = use_context::<HttpRequest>(cx).expect("failed to get actix web data");
    let data = <actix_web::web::Data<AppState> as actix_web::FromRequest>::extract(&request)
        .await
        .expect("expected to have some data");

I couldn't figure out how to return specific HTTP codes (400, 302, 401).

See my reply to your question yesterday:

To set a status code using leptos_actix you can let resp = use_context::<ResponseOptions>(cx).unwrap(); inside a server function. This gives you ResponseOptions, at which point you can just use the set_status method.

I would suggest a way to handle on_submit and/or on_error seamlessly with a closure that accepts an argument of Response/Error, preferably without additional dependencies for type annotations but that's not really a big deal.

Unfortunately you can't really have optional generic props (like a generic F: Fn(&web_sys::Response) because in the None case the compiler doesn't know what the type is. Hence the wrapper (either Rc or Box).

---

I don't know if you use Discord but we do have a pretty active Discord server which tends to be good for discussions like this.

[Grafcube]

Using Arc fixed that issue. I'll try to make the server function and ActionForm work. Thanks for the help. If I have any other questions I'll ask on the discord.