darth_ui/components/examples/form/
register.rs

1#![cfg(feature = "examples")]
2use crate::components::button::button::{Button, ButtonBuild};
3use crate::components::container::container::ContainerBuild;
4use crate::components::form::components::text::{InputBuild, InputText, LabelBuild};
5use crate::components::form::form::{Form, FormBuild};
6use crate::components::icons::{icon::Icon, icons::IconBuild};
7use crate::components::toast::toast::{toast, ToastBodyBuild, ToastBuild, ToastPosition};
8use darth_rust::DarthRust;
9use leptos::*;
10
11#[derive(DarthRust, Debug)]
12pub struct Form {
13    #[pattern(r"^.{3,32}$")]
14    #[pattern_notify("user must be valid")]
15    user: String,
16    #[pattern(r"^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$")]
17    #[pattern_notify("e-mail must be valid")]
18    email: String,
19    #[pattern(r"^.{6,32}$")]
20    #[pattern_notify("password must be valid")]
21    password: String,
22}
23
24#[component]
25pub fn RegisterForm() -> impl IntoView {
26    view! {
27        <Form props=FormBuild::new()
28           .class("")
29            .submit(|hashmap, _| {
30                let user = hashmap.get("user").expect("Input name user not found");
31                let email = hashmap.get("email").expect("Input name email not found");
32                let password = hashmap.get("password").expect("Input name password not found");
33                let form = Form::new()
34                    .user(user)
35                    .email(email)
36                    .password(password)
37                    .build();
38                if let Ok(form) = form {
39                    let body_content = format!(
40                        "(200, user: {}, email: {}, password: {})",
41                        form.user, form.email, form.password
42                    );
43                    toast(ToastBuild::new()
44                        .class("bg-green-500")
45                        .position(ToastPosition::TopEnd)
46                        .duration_seconds(3)
47                        .body(
48                            ToastBodyBuild::new()
49                            .class("p-2")
50                            .content(body_content)
51                            .tag("p")
52                        )
53                    );
54                } else if let Err(content) = form {
55                    toast(ToastBuild::new()
56                        .class("bg-indigo-600")
57                        .position(ToastPosition::TopMid)
58                        .duration_seconds(10)
59                        .body(
60                            ToastBodyBuild::new()
61                            .class("p-2 font-bold")
62                            .content(content)
63                        )
64                        .unique(true)
65                    );
66                }
67        })>
68            <InputText props=InputBuild::new()
69                .label(LabelBuild::new()
70                    .name("User")
71                    .forhtml("User")
72                )
73                .icon(IconBuild::new()
74                    .class("text-white")
75                    .icon(Icon::User)
76                    .size::<usize>(24)
77                )
78                .input_box(ContainerBuild::new()
79                    .class("box_ghost hover:border-indigo-400")
80                )
81                .container(ContainerBuild::new()
82                    .class("p-2")
83                )
84                .class("input focus:bg-indigo-950")
85                .placeholder("Your user")
86                .name("user")
87            />
88            <InputText props=InputBuild::new()
89                .label(LabelBuild::new()
90                    .name("Email")
91                    .forhtml("Email")
92                )
93                .icon(IconBuild::new()
94                    .class("text-white")
95                    .icon(Icon::Email)
96                    .size::<usize>(24)
97                )
98                .input_box(ContainerBuild::new()
99                    .class("box_ghost border-white hover:border-indigo-400")
100                )
101                .container(ContainerBuild::new()
102                    .class("p-2")
103                )
104                .class("input focus:bg-indigo-950")
105                .placeholder("Your best email")
106                .name("email")
107            />
108            <InputText props=InputBuild::new()
109                .label(LabelBuild::new()
110                    .name("password")
111                    .forhtml("Password")
112                )
113                .icon(IconBuild::new()
114                    .class("text-white")
115                    .icon(Icon::Key)
116                    .size::<usize>(24)
117                )
118                .input_box(ContainerBuild::new()
119                    .class("box_ghost hover:border-indigo-400")
120                )
121                .container(ContainerBuild::new()
122                    .class("p-2")
123                )
124                .class("input focus:bg-indigo-950")
125                .placeholder("Your password")
126                .name("password")
127            />
128            <Button props=ButtonBuild::new()
129                .class("button_sunset w-full")
130                .kind("submit")
131            >
132                "Register"
133            </Button>
134        </Form>
135    }
136}
darth_ui/components/examples/form/register.rs

darth_ui/components/examples/form/
register.rs
