From d202efa883e4eb0975c7a7cec1d228783c4290cb Mon Sep 17 00:00:00 2001
From: Michael Liendo <michael.m.liendo.r@gmail.com>
Date: Thu, 1 Aug 2024 22:22:53 -0400
Subject: [PATCH] feat(web): login modal (#213)

---
 crates/web/src/components/auth/login.rs    | 76 ++++++++++++++++++++++
 crates/web/src/components/auth/mod.rs      |  1 +
 crates/web/src/components/layout/header.rs | 26 ++++++--
 crates/web/src/views/login.rs              | 64 ------------------
 crates/web/src/views/mod.rs                |  1 -
 5 files changed, 97 insertions(+), 71 deletions(-)
 create mode 100644 crates/web/src/components/auth/login.rs
 delete mode 100644 crates/web/src/views/login.rs

diff --git a/crates/web/src/components/auth/login.rs b/crates/web/src/components/auth/login.rs
new file mode 100644
index 0000000..4a08a97
--- /dev/null
+++ b/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>
+    }
+}
diff --git a/crates/web/src/components/auth/mod.rs b/crates/web/src/components/auth/mod.rs
index f862bee..8d32f68 100644
--- a/crates/web/src/components/auth/mod.rs
+++ b/crates/web/src/components/auth/mod.rs
@@ -1 +1,2 @@
+pub mod login;
 pub mod register;
diff --git a/crates/web/src/components/layout/header.rs b/crates/web/src/components/layout/header.rs
index 6132b19..fe788aa 100644
--- a/crates/web/src/components/layout/header.rs
+++ b/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>
     }
 }
diff --git a/crates/web/src/views/login.rs b/crates/web/src/views/login.rs
deleted file mode 100644
index 2a137f6..0000000
--- a/crates/web/src/views/login.rs
+++ /dev/null
@@ -1,64 +0,0 @@
-use leptos::{
-    component, create_action, create_rw_signal, create_signal, view, IntoView, Show, SignalGet,
-    SignalGetUntracked, SignalSet,
-};
-
-use townhall_client::Client;
-
-use crate::components::text_field::{TextField, TextFieldType};
-
-#[component]
-pub fn Login() -> 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()));
-        }
-    });
-
-    view! {
-        <div class="min-h-screen relative flex justify-center items-center bg-no-repeat bg-cover bg-slate-800 bg-[url('https://images.unsplash.com/photo-1580192985016-7e15ef081dd8?q=80&w=1961&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')]">
-            <div class="absolute bg-black rounded-[50%] w-full h-full blur-[23rem]"></div>
-            <div class="flex justify-center items-center z-20">
-                <div class="w-full">
-                    <h1 class="text-6xl text-center font-bold text-white mb-16">TownHall</h1>
-                    <form class="w-96" on:submit=move |_| handle_submit.dispatch(())>
-                        <TextField
-                            class="w-full"
-                            name="email"
-                            placeholder="Email"
-                            value=email_value
-                        />
-                        <TextField
-                            class="w-full"
-                            name="password"
-                            r#type=TextFieldType::Password
-                            placeholder="Password"
-                            value=password_value
-                        />
-                        <button type="submit">Login</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 w-full text-white mt-3">
-                        {"Don't have an account? "} <a class="underline" href="/signup">
-                            Sign up!
-                        </a>
-                    </div>
-                </div>
-            </div>
-        </div>
-    }
-}
diff --git a/crates/web/src/views/mod.rs b/crates/web/src/views/mod.rs
index f567f27..9b86bcf 100644
--- a/crates/web/src/views/mod.rs
+++ b/crates/web/src/views/mod.rs
@@ -1,2 +1 @@
 pub mod home;
-pub mod login;