feat(web): nicer register page (but still broken)

This commit is contained in:
əlemi 2024-05-14 04:08:06 +02:00
parent b9386c286a
commit 85fe8e9172
Signed by: alemi
GPG key ID: A4895B84D311642C

View file

@ -1,48 +1,77 @@
use leptos::*; use leptos::*;
use reqwest::Method;
use crate::prelude::*; use crate::prelude::*;
#[component] #[component]
pub fn RegisterPage() -> impl IntoView { pub fn RegisterPage() -> impl IntoView {
let auth = use_context::<Auth>().expect("missing auth context");
let username_ref: NodeRef<html::Input> = create_node_ref();
let password_ref: NodeRef<html::Input> = create_node_ref();
let display_name_ref: NodeRef<html::Input> = create_node_ref();
let summary_ref: NodeRef<html::Input> = create_node_ref();
let avatar_url_ref: NodeRef<html::Input> = create_node_ref();
let banner_url_ref: NodeRef<html::Input> = create_node_ref();
let (error, set_error) = create_signal(None);
view! { view! {
<div> <div class="two-col">
<Breadcrumb>register</Breadcrumb> <Breadcrumb>register</Breadcrumb>
<form> <div class="border ma-2">
<table class="align ma-3"> <form on:submit=move|ev| {
<tr> ev.prevent_default();
<td>username</td> logging::log!("registering new user...");
<td><input type="email" /></td> let email = username_ref.get().map(|x| x.value()).unwrap_or("".into());
</tr> let password = password_ref.get().map(|x| x.value()).unwrap_or("".into());
<tr> spawn_local(async move {
<td>password</td> match Http::request(
<td><input type="password" /></td> Method::PUT, format!("{URL_BASE}/auth"), None, auth
</tr> ).await {
<tr> Ok(x) => {},
<td colspan="2"><hr /></td> Err(e) => set_error.set(Some(
</tr> view! { <blockquote>{e.to_string()}</blockquote> }
<tr> )),
<td>display name</td> }
<td><input type="text" /></td> });
</tr> } >
<tr> <div class="col-side mb-0">username</div>
<td>summary</td> <div class="col-main">
<td><input type="text" /></td> <input class="w-100" type="email" node_ref=username_ref placeholder="doll" />
</tr> </div>
<tr>
<td>avatar url</td> <div class="col-side mb-0">password</div>
<td><input type="text" /></td> <div class="col-main">
</tr> <input class="w-100" type="password" node_ref=password_ref placeholder="±·ì¥ì¤uª]*«P³.ÐvkÏÚ;åÍì§ÕºöAQ¿SnÔý" />
<tr> </div>
<td>banner url</td>
<td><input type="text" /></td> <div class="col-side mb-0"><hr /></div>
</tr> <div class="col-main"><hr class="hidden-on-mobile" /></div>
<tr>
<td colspan="2"><hr /></td> <div class="col-side mb-0">display name</div>
</tr> <div class="col-main">
<tr> <input class="w-100" type="text" node_ref=display_name_ref placeholder="bmdieGo="/>
<td colspan="2"><input class="w-100" type="submit" value="register" /></td> </div>
</tr>
</table> <div class="col-side mb-0">summary</div>
<div class="col-main">
<input class="w-100" type="text" node_ref=summary_ref placeholder="when you lose control of yourself, who's controlling you?" />
</div>
<div class="col-side mb-0">avatar url</div>
<div class="col-main">
<input class="w-100" type="text" node_ref=avatar_url_ref placeholder="https://cdn.alemi.dev/social/circle-square.png" />
</div>
<div class="col-side mb-0">banner url</div>
<div class="col-main">
<input class="w-100" type="text" node_ref=banner_url_ref placeholder="https://cdn.alemi.dev/social/gradient.png" />
</div>
<div class="col-side mb-0"><hr /></div>
<div class="col-main"><hr class="hidden-on-mobile" /></div>
<input class="w-100" type="submit" value="register" />
</form> </form>
</div> </div>
<p>{error}</p>
</div>
} }
} }