tallyweb_frontend/pages/
create_acc.rs

1use leptos::{html::Input, *};
2use leptos_router::{ActionForm, A};
3use web_sys::SubmitEvent;
4
5use super::*;
6
7stylance::import_style!(style, "../../style/login.module.scss");
8
9#[component]
10pub fn CreateAccount() -> impl IntoView {
11    let action = create_server_action::<api::CreateAccount>();
12    let message_jar = expect_context::<components::MessageJar>();
13
14    let password_input = create_node_ref::<Input>();
15    let password_repeat = create_node_ref::<Input>();
16
17    let on_submit = move |ev: SubmitEvent| {
18        if password_input().unwrap().value().len() < 8 {
19            // message.set(Some(String::from(
20            //     "Password should be longer than 8 characters",
21            // )));
22            ev.prevent_default()
23        }
24        if password_input().unwrap().value() != password_repeat().unwrap().value() {
25            // message.set(Some(String::from("passwords do not match")));
26            ev.prevent_default();
27        }
28        create_effect(move |_| match action.value().get() {
29            Some(Ok(_)) => leptos_router::use_navigate()("/", Default::default()),
30            Some(Err(err)) => message_jar.set_err(err.to_string()),
31            None => {}
32        });
33    };
34
35    view! {
36        <ActionForm action=action on:submit=on_submit class=style::login_form>
37            <h1>Sign Up</h1>
38
39            <label for="username">
40                <b>Username</b>
41            </label>
42            <input type="text" placeholder="Enter Username" name="username" required />
43
44            <label for="password">
45                <b>Password</b>
46            </label>
47            <input
48                type="password"
49                placeholder="Enter Password"
50                name="password"
51                node_ref=password_input
52                required
53            />
54
55            <label for="password_repeat">
56                <b>Repeat Password</b>
57            </label>
58            <input
59                type="password"
60                placeholder="Repeat Password"
61                name="password_repeat"
62                node_ref=password_repeat
63                required
64            />
65
66            <action-buttons>
67                <div class=style::action_button_el>
68                    <input type="checkbox" required />
69                    <a rel="external" href="/privacy-policy.html" class=style::accept_ts>
70                        <b>{"I have read the Terms&Conditions"}</b>
71                    </a>
72                </div>
73                <A href="/login">
74                    <i class="fa-solid fa-xmark"></i>
75                </A>
76                <button type="submit" class="signupbtn">
77                    <i class="fa-solid fa-right-to-bracket"></i>
78                </button>
79            </action-buttons>
80        </ActionForm>
81    }
82}
tallyweb_frontend/pages/create_acc.rs

tallyweb_frontend/pages/
create_acc.rs
