feat(ui): daisyui login modal, wip

Author: goshatch

src/main/parts/frontend/components/login_modal.cljs

@@ -32,49 +32,59 @@
 
     ($ modal
        {:show show
-        :title "Log in"
         :on-close on-close}
 
-       ($ :form {:on-submit handle-submit}
+       ($ :<>
           (when error
-            ($ :div {:class "error-message"}
-               error))
+            ($ :div {:class "alert alert-error mb-4"}
+               ($ :span {:class "font-medium"} error)))
 
-          (when-let [csrf-token (utils/get-csrf-token)]
-            ($ :input
-               {:type "hidden"
-                :id "__anti-forgery-token"
-                :name "__anti-forgery-token"
-                :value csrf-token}))
+          ($ :form {:on-submit handle-submit}
 
-          ($ :div {:class "form-group"}
-             ($ :label {:for "email"} "Email:")
-             ($ :input
-                {:type "email"
-                 :id "email"
-                 :value email
-                 :disabled loading
-                 :on-change #(set-email (.. % -target -value))
-                 :required true}))
+             (when-let [csrf-token (utils/get-csrf-token)]
+               ($ :input
+                  {:type "hidden"
+                   :id "__anti-forgery-token"
+                   :name "__anti-forgery-token"
+                   :value csrf-token}))
 
-          ($ :div {:class "form-group"}
-             ($ :label {:for "password"} "Password:")
-             ($ :input
-                {:type "password"
-                 :id "password"
-                 :value password
-                 :disabled loading
-                 :on-change #(set-password (.. % -target -value))
-                 :required true}))
+             ($ :fieldset
+                {:class "fieldset w-full bg-base-200 border border-base-300 p-4 rounded-box"}
+                ($ :legend {:class "fieldset-legend"} "Login")
 
-          ($ :div {:class "form-actions"}
-             ($ :button
-                {:type "button"
-                 :disabled loading
-                 :on-click on-close}
-                "Cancel")
-             ($ :button
-                {:type "submit"
-                 :disabled loading
-                 :class "primary"}
-                (if loading "Logging in..." "Log in")))))))
+                ($ :div {:class "form-control mb-3"}
+                   ($ :label {:class "fieldset-label" :for "email"}
+                      "Email")
+                   ($ :input
+                      {:type "email"
+                       :id "email"
+                       :placeholder "[email protected]"
+                       :class "input input-bordered w-full"
+                       :value email
+                       :disabled loading
+                       :on-change #(set-email (.. % -target -value))
+                       :required true}))
+
+                ($ :div {:class "form-control"}
+                   ($ :label {:class "fieldset-label" :for "password"}
+                      "Password")
+                   ($ :input
+                      {:type "password"
+                       :id "password"
+                       :class "input input-bordered w-full"
+                       :value password
+                       :disabled loading
+                       :on-change #(set-password (.. % -target -value))
+                       :required true}))
+                ($ :div {:class "modal-action mt-6 space-x-2 flex"}
+                   ($ :button
+                      {:type "button"
+                       :class "btn btn-outline flex-1"
+                       :disabled loading
+                       :on-click on-close}
+                      "Cancel")
+                   ($ :button
+                      {:type "submit"
+                       :disabled loading
+                       :class (str "btn btn-primary flex-1" (when loading "loading"))}
+                      (if loading "Logging in..." "Log in")))))))))

src/main/parts/frontend/components/modal.cljs

@@ -1,13 +1,35 @@
 (ns parts.frontend.components.modal
   (:require
-   [uix.core :refer [defui $]]))
+   [uix.core :refer [defui $ use-ref use-effect]]))
 
-(defui modal [{:keys [show title on-close children]}]
-  (when show
-    ($ :div {:class "modal-overlay"}
-       ($ :div {:class "modal-container"}
-          ($ :div {:class "modal-header"}
-             ($ :h3 title)
-             ($ :button {:class "modal-close" :on-click on-close} "×"))
-          ($ :div {:class "modal-content"}
-             children)))))
+(defui modal
+  [{:keys [show title on-close children]}]
+  (let [dialog-ref (use-ref nil)]
+
+    ;; control modal visibility based on show prop
+    (use-effect
+     (fn []
+       (when-let [dialog (.-current dialog-ref)]
+         (if show
+           (.showModal dialog)
+           (.close dialog))))
+     [show])
+
+    ($ :dialog
+       {:class "modal"
+        :ref dialog-ref
+        :on-click (fn [e]
+                    ;; close when clicking backdrop
+                    (when (= (.-target e) (.-current dialog-ref))
+                      (on-close)))
+        :on-cancel on-close} ;; handles ESC key
+       ($ :div
+          {:class "modal-box"
+           :on-click #(.stopPropagation %)}
+          ;; ;; ($ :button
+          ;; ;;    {:class "btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
+          ;; ;;     :on-click on-close}
+          ;;    "✕")
+          (when title
+            ($ :h3 {:class "text-lg font-bold"} title))
+          children))))

src/main/parts/frontend/components/system.cljs

@@ -56,10 +56,9 @@
   (let [[show-login-modal set-show-login-modal] (use-state false)
         {:keys [user loading logout]} (ctx/use-auth)]
     ($ :div
-       (when show-login-modal
-         ($ login-modal
-            {:show true
-             :on-close #(set-show-login-modal false)}))
+       ($ login-modal
+          {:show show-login-modal
+           :on-close #(set-show-login-modal false)})
        (when loading
          ($ :span "(...) "))
        (if user