feat(web): login modal (#213)

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

@@ -0,0 +1,76 @@
+use leptos::{
+    component, create_action, create_rw_signal, create_signal, view, IntoView, RwSignal, Show,
+    SignalGet, SignalGetUntracked, SignalSet,
+};
+
+use townhall_client::Client;
+
+use crate::components::text_field::{TextField, TextFieldType};
+
+#[component]
+pub fn LoginCard(
+    #[prop(into)] signup_status: RwSignal<bool>,
+    #[prop(into)] login_status: RwSignal<bool>,
+) -> impl IntoView {
+    let (error_getter, error_setter) = create_signal::<Option<String>>(None);
+
+    let email_value = create_rw_signal(String::default());
+    let password_value = create_rw_signal(String::default());
+
+    let handle_submit = create_action(move |_| async move {
+        let client = Client::new();
+        let res = client
+            .auth
+            .token_create(email_value.get_untracked(), password_value.get_untracked())
+            .await;
+
+        if let Some(ref error) = res.error {
+            error_setter.set(Some(error.message.to_owned()));
+        }
+    });
+
+    let handle_switch = move |_| {
+        login_status.set(false);
+        signup_status.set(true);
+    };
+
+    view! {
+
+        <div class="w-96 p-6 bg-white border border-gray-200 rounded-lg shadow">
+        <h1 class="text-2xl mb-3 text-center">Log in</h1>
+              <form class="space-y-2" on:submit=move |_| handle_submit.dispatch(())>
+              <TextField
+                  class="w-full"
+                  name="email"
+                  label="Email"
+                  placeholder="example@townhall.com"
+                  value=email_value
+              />
+              <TextField
+                  class="w-full"
+                  label="Password"
+                  name="password"
+                  r#type=TextFieldType::Password
+                  placeholder="* * * * * * *"
+                  value=password_value
+              />
+              <button
+                  type="submit"
+                  class="bg-blue-700 text-white font-bold w-full mt-3 rounded-md py-3 px-4"
+              >
+                  Log in
+              </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">
+              {"Don't have an account? "} <button type="button"  on:click=handle_switch class="underline">
+                  Sign up
+              </button>
+          </div>
+              </div>
+    }
+}

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

@@ -1 +1,2 @@
+pub mod login;
 pub mod register;

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

@@ -1,10 +1,16 @@
-use leptos::{component, create_rw_signal, view, IntoView, SignalSet};
+use leptos::{component, create_rw_signal, view, IntoView, Show, SignalGet, SignalSet};
 
-use crate::components::{auth::register::SignupCard, icons::home::Home, modal::Modal};
+use crate::components::{
+    auth::{login::LoginCard, register::SignupCard},
+    icons::home::Home,
+    modal::Modal,
+};
 
 #[component]
 pub fn Header() -> impl IntoView {
-    let is_open_auth_modal = create_rw_signal(false);
+    let is_open_auth_signup_modal = create_rw_signal(false);
+    let is_open_auth_login_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">
@@ -16,14 +22,22 @@ pub fn Header() -> impl IntoView {
                         </a>
                     </nav>
                     <button on:click=move |_| {
-                        is_open_auth_modal.set(true);
+                        is_open_auth_login_modal.set(true);
                       } class="md:col-start-12 md:col-end-13">
                         User
                     </button>
                 </div>
             </header>
-            <Modal modal_status=is_open_auth_modal>
+            <Modal modal_status=is_open_auth_signup_modal>
+                <Show when=move || is_open_auth_signup_modal.get() fallback=move || ()>
                 <SignupCard />
-            </Modal >
+                </Show>
+                </Modal >
+                <Modal modal_status=is_open_auth_login_modal >
+
+                <Show when=move || is_open_auth_login_modal.get() fallback=move || ()>
+                <LoginCard login_status=is_open_auth_login_modal signup_status=is_open_auth_signup_modal/>
+                </Show>
+                </Modal>
     }
 }

crates/web/src/views/mod.rs

@@ -1,2 +1 @@
 pub mod home;
-pub mod login;