forked from alemi/upub
feat(web): nicer register page (but still broken)
This commit is contained in:
parent
b9386c286a
commit
d6bafb8518
1 changed files with 67 additions and 38 deletions
|
@ -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>
|
||||||
</form>
|
<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>
|
||||||
|
</div>
|
||||||
|
<p>{error}</p>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue