feat(web): create the signup view

crates/web/Cargo.toml

@@ -16,12 +16,14 @@ name = "townhall-web"
 path = "src/bin/main.rs"
 
 [dependencies]
-leptos =  { workspace = true, features = ["csr"] }
+leptos = { workspace = true, features = ["csr"] }
 leptos_meta = { workspace = true, features = ["csr"] }
 leptos_router = { workspace = true, features = ["csr"] }
 
 # Local Dependencies
 client = { path = "../client" }
+types = { path = "../types" }
+leptos-use = "0.10.10"
 
 [dev-dependencies]
 wasm-bindgen = "0.2"

crates/web/src/components/auth/mod.rs

@@ -0,0 +1 @@
+pub mod register;

crates/web/src/components/auth/register.rs

@@ -0,0 +1,98 @@
+use std::str::FromStr;
+
+use leptos::{
+    component, create_action, create_rw_signal, create_signal, view, IntoView, Show, SignalGet,
+    SignalGetUntracked, SignalSet,
+};
+
+use townhall_client::Client;
+use townhall_types::user::Email;
+
+use crate::components::text_field::{TextField, TextFieldType};
+
+#[component]
+pub fn SignupCard() -> impl IntoView {
+    let (error_getter, error_setter) = create_signal::<Option<String>>(None);
+
+    let name_value = create_rw_signal(String::default());
+    let surname_value = create_rw_signal(String::default());
+    let username_value = create_rw_signal(String::default());
+    let email_value = create_rw_signal(String::default());
+    let password_value = create_rw_signal(String::default());
+
+    let submit = create_action(move |_| async move {
+        let client = Client::new();
+        let res = client
+            .auth
+            .user_register(townhall_client::auth::user_register::UserRegisterInput {
+                name: name_value.get_untracked().into(),
+                surname: surname_value.get_untracked().into(),
+                username: username_value.get_untracked().into(),
+                email: Email::from_str(email_value.get_untracked().as_str()).unwrap(),
+                password: password_value.get_untracked().into(),
+            })
+            .await;
+
+        if let Some(ref error) = res.error {
+            error_setter.set(Some(error.message.to_owned()));
+        }
+    });
+
+    view! {
+
+        <div class="w-96 p-6 bg-white border border-gray-200 rounded-lg shadow">
+        <h1 class="text-2xl mb-3 text-center">Sign up</h1>
+              <form class="space-y-2">
+              <TextField class="w-full" name="name" placeholder="Name" value=name_value/>
+              <TextField
+                  class="w-full"
+                  label="Surname"
+                  name="surname"
+                  placeholder="Surname"
+                  value=surname_value
+              />
+              <TextField
+                  class="w-full"
+                  label="Username"
+                  name="username"
+                  placeholder="Username"
+                  value=username_value
+              />
+              <TextField
+                  class="w-full"
+                  name="email"
+                  label="Email"
+                  placeholder="Email"
+                  value=email_value
+              />
+              <TextField
+                  class="w-full"
+                  label="Password"
+                  name="password"
+                  r#type=TextFieldType::Password
+                  placeholder="Password"
+                  value=password_value
+              />
+              <button
+                  type="button"
+                  on:click=move |_| submit.dispatch(())
+                  class="bg-blue-700 text-white font-bold w-full mt-3 rounded-md py-3 px-4"
+              >
+                  Sign up
+              </button>
+              <Show when=move || error_getter.get().is_some()>
+                  <div class="bg-rose-600 text-white p-2 rounded-md">
+                      {error_getter.get().unwrap()}
+                  </div>
+              </Show>
+          </form>
+          <div class="text-center mt-3">
+              {"Do you have an account? "} <a class="underline" href="/login">
+                  Log In
+              </a>
+          </div>
+              </div>
+
+
+    }
+}

crates/web/src/components/layout/header.rs

@@ -1,24 +1,29 @@
-use leptos::{component, view, IntoView};
+use leptos::{component, create_rw_signal, view, IntoView, SignalSet};
 
-use crate::components::icons::home::Home;
+use crate::components::{auth::register::SignupCard, icons::home::Home, modal::Modal};
 
 #[component]
 pub fn Header() -> impl IntoView {
+    let is_open_auth_modal = create_rw_signal(false);
     view! {
-        <header class="sticky top-0 bg-white flex items-center justify-center shadow">
-            <div class="grid md:grid-cols-12 md:max-w-[1400px] px-4 py-2">
-                <figure class="md:col-start-1">
-                    <img src="https://via.placeholder.com/140x40" />
-                </figure>
-                <nav class="px-4 text-zinc-700 flex justify-start items-center md:col-start-4 md:col-end-10">
-                    <a class="flex justify-center items-center h-8 w-8" href="/">
-                        <Home class="h-6 w-6" />
-                    </a>
-                </nav>
-                <div class="md:col-start-12 md:col-end-13">
-                    User
+            <header class="sticky top-0 bg-white flex items-center justify-center shadow">
+                <div class="grid md:grid-cols-12 md:max-w-[1400px] px-4 py-2">
+                    <figure class="md:col-start-1"> <img src="https://via.placeholder.com/140x40" />
+                    </figure>
+                    <nav class="px-4 text-zinc-700 flex justify-start items-center md:col-start-4 md:col-end-10">
+                        <a class="flex justify-center items-center h-8 w-8" href="/">
+                            <Home class="h-6 w-6" />
+                        </a>
+                    </nav>
+                    <button on:click=move |_| {
+                        is_open_auth_modal.set(true);
+                      } class="md:col-start-12 md:col-end-13">
+                        User
+                    </button>
                 </div>
-            </div>
-        </header>
+            </header>
+            <Modal modal_status=is_open_auth_modal>
+                <SignupCard />
+            </Modal >
     }
 }

crates/web/src/components/mod.rs

@@ -1,8 +1,10 @@
 mod helper;
 
+pub mod auth;
 pub mod button;
 pub mod feed;
 pub mod icons;
 pub mod layout;
+pub mod modal;
 pub mod publisher;
 pub mod text_field;

crates/web/src/components/modal.rs

@@ -0,0 +1,23 @@
+use leptos::{
+    component, create_node_ref, html::Div, store_value, view, ChildrenFn, IntoView, RwSignal, Show,
+    SignalGet, SignalSet, Suspense,
+};
+use leptos_use::on_click_outside;
+
+#[component]
+pub fn Modal(#[prop(into)] modal_status: RwSignal<bool>, children: ChildrenFn) -> impl IntoView {
+    let modal_ref = create_node_ref::<Div>();
+    let children = store_value(children);
+
+    on_click_outside(modal_ref, move |_event| modal_status.set(false));
+
+    view! {
+        <Suspense fallback=|| ()>
+            <Show when=move || modal_status.get() fallback=move || ()>
+                <div class="fixed right-0 top-0 z-10 flex h-screen w-screen flex-col items-center justify-center drop-shadow-lg backdrop-blur-[2px] bg-black/50">
+                    <div node_ref=modal_ref>{children.with_value(|children| children())}</div>
+                </div>
+            </Show>
+        </Suspense>
+    }
+}