better login page

This commit is contained in:
2026-05-29 10:55:14 -07:00
parent 3441ae63b4
commit 6814cf1b15
6 changed files with 209 additions and 182 deletions

View File

@@ -66,9 +66,9 @@
])
(defn not-found [_]
{:status 404
{:status 404
:headers {}
:body ""})
:body ""})
(defn home-handler [{:keys [identity]}]
(if identity
@@ -125,13 +125,13 @@
(defn wrap-logging [handler]
(fn [request]
(mu/with-context (cond-> {:uri (:uri request)
:route (:handler (bidi.bidi/match-route all-routes
(:uri request)
:request-method (:request-method request)))
(mu/with-context (cond-> {:uri (:uri request)
:route (:handler (bidi.bidi/match-route all-routes
(:uri request)
:request-method (:request-method request)))
:client-selection (:client-selection request)
:source "request"
:source "request"
:query (:uri request)
:request-method (:request-method request)
:user (dissoc (:identity request)
@@ -157,15 +157,15 @@
(defn wrap-idle-session-timeout
[handler]
(fn [request]
(let [session (:session request {:version session-version/current-session-version})
(let [session (:session request {:version session-version/current-session-version})
end-time (coerce/to-date-time (::idle-timeout session))]
(if (and end-time (time/before? end-time (time/now)))
(if (get (:headers request) "hx-request")
{:session nil
:status 200
:status 200
:headers {"hx-redirect" "/login"}}
{:session nil
:status 302
:status 302
:headers {"Location" "/login"}})
(when-let [response (handler request)]
(let [session (:session response session)]
@@ -231,7 +231,7 @@
seq
(pull-many (dc/db conn)
'[:db/id :client/name :client/code :client/locations
:client/matches :client/feature-flags
:client/matches :client/feature-flags
{:client/bank-accounts [:db/id
{:bank-account/type [:db/ident]}
:bank-account/number
@@ -298,7 +298,7 @@
{:status 200
:headers {"hx-trigger" (cheshire/generate-string
{"notification" (str (hiccup/html [:div (.getMessage e)]))})
"hx-reswap" "none"}} ;; TODO make a warning box so you don't have to reuse the notifaction box, or make it reuse the same box but theme differently
"hx-reswap" "none"}} ;; TODO make a warning box so you don't have to reuse the notifaction box, or make it reuse the same box but theme differently
:else
{:status 500
:body (pr-str e)})))))
@@ -315,32 +315,48 @@
:valid-trimmed-client-ids trimmed-clients
:first-client-id (first valid-clients)
:clients-trimmed? (not= (count trimmed-clients) (count valid-clients)))))))
(defn wrap-dev-login [handler]
(fn [request]
(if (and (= "/dev-login" (:uri request))
(some-> env :base-url (.contains "localhost")))
(let [identity {:user "Dev User"
:user/name "Dev User"
:user/role "admin"
:db/id 0}]
{:status 200
:headers {"Content-Type" "text/html"}
:body "<p>Logged in as Dev User!</p><a href='/dashboard'>Continue to dashboard</a>"
:session {:identity identity
:version session-version/current-session-version}})
(handler request))))
#_{:clj-kondo/ignore [:clojure-lsp/unused-public-var]}
(defonce app
(-> route-handler
(wrap-hx-current-url-params)
(wrap-guess-route)
(wrap-logging)
(wrap-trim-clients)
(wrap-hydrate-clients)
(wrap-store-client-in-session)
(wrap-gunzip-jwt)
(wrap-authorization auth-backend)
(wrap-authentication auth-backend
(session-backend {:authfn (fn [auth]
(dissoc auth :exp))}))
(-> route-handler
(wrap-hx-current-url-params)
(wrap-guess-route)
(wrap-logging)
(wrap-trim-clients)
(wrap-hydrate-clients)
(wrap-store-client-in-session)
(wrap-gunzip-jwt)
(wrap-dev-login)
(wrap-authorization auth-backend)
(wrap-authentication auth-backend
(session-backend {:authfn (fn [auth]
(dissoc auth :exp))}))
#_(wrap-pprint-session)
#_(wrap-pprint-session)
(session-version/wrap-session-version)
(wrap-idle-session-timeout)
(wrap-session {:store (cookie-store
{:key
(byte-array
[42, 52, -31, 101, -126, -33, -118, -69, -82, -59, -15, -69, -38, 103, -102, -1])})})
(session-version/wrap-session-version)
(wrap-idle-session-timeout)
(wrap-session {:store (cookie-store
{:key
(byte-array
[42, 52, -31, 101, -126, -33, -118, -69, -82, -59, -15, -69, -38, 103, -102, -1])})})
#_(wrap-reload)
(wrap-params)
(mp/wrap-multipart-params)
(wrap-edn-params)
(wrap-error)))
#_(wrap-reload)
(wrap-params)
(mp/wrap-multipart-params)
(wrap-edn-params)
(wrap-error)))

View File

@@ -1,12 +1,11 @@
(ns auto-ap.ssr.auth
(:require
[auto-ap.session-version :as session-version]
[auto-ap.ssr.components :as com]
[auto-ap.ssr.hx :as hx]
[auto-ap.ssr.svg :as svg]
[auto-ap.ssr.ui :refer [base-page]]
[buddy.sign.jwt :as jwt]
[config.core :refer [env]]
[hiccup2.core :as hiccup]
[hiccup.util :as hu]))
(defn logout [request]
@@ -37,69 +36,73 @@
"scope" "https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile"}
next (assoc "state" (hu/url-encode next))))))))
(defn- login-page [contents]
{:status 200
:headers {"Content-Type" "text/html"}
:body (str "<!DOCTYPE html>"
(hiccup/html
[:html
[:head
[:meta {:charset "utf-8"}]
[:meta {:name "viewport" :content "width=device-width, initial-scale=1"}]
[:title "Integreat · Sign In"]
[:link {:rel "icon" :type "image/png" :href "/favicon.png"}]
[:link {:rel "stylesheet" :href "/output.css"}]
[:script {:defer true :src "https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"}]
[:style
"body{background:linear-gradient(160deg,#79b52e 0%,#009cea 100%);min-height:100vh}"]]
[:body contents]]))})
(defn- page-contents [request]
[:div#app {"@notification.document" "notificationDetails=event.detail.value; showNotification=true"
[:div
{:x-data (hx/json {:showError false
:errorDetails ""})
"@htmx:response-error.camel" "errorDetails = $event.detail.xhr.response; showError=true;"}
:x-data (hx/json {:showError false
:errorDetails ""
:showNotification false
:notificationDetails ""})
"@htmx:response-error.camel" "errorDetails = $event.detail.xhr.response; showError=true;"}
[:div#app-contents.flex.overflow-hidden
[:div#main-content {:class "relative w-full h-full overflow-y-auto px-4 bg-gray-100 dark:bg-gray-900 min-h-content "}
[:div#notification-holder
[:div.fixed.top-0.right-0.left-0.z-30.mx-auto.max-w-screen-lg.w-screen-lg.my-0.pt-8.rounded-lg {:x-show "showNotification"}
[:div.relative
[:button.absolute.right-2.top-2.w-6.h-6.z-50.text-blue-400
{"@click" "showNotification=false"}
svg/filled-x]]
[:div.fixed.top-0.left-0.right-0.z-50.mx-auto.max-w-md.w-full.px-4.pt-6
{:x-show "showError"
"x-transition:enter" "transition duration-200 ease-out"
"x-transition:enter-start" "opacity-0 -translate-y-3"
"x-transition:enter-end" "opacity-100 translate-y-0"}
[:div.relative.bg-white.rounded-xl.shadow-xl.border.border-red-200.p-4
[:button.absolute.right-3.top-3.p-1.text-red-400.hover:text-red-600
{"@click" "showError=false"}
svg/filled-x]
[:div.flex.items-start.gap-3
[:div.flex-shrink-0.w-5.h-5.text-red-500 svg/alert]
[:div.flex-1.min-w-0
[:p.text-sm.font-medium.text-gray-900 "Something went wrong"]
[:p.text-xs.text-gray-500.mt-0.5
"Our team has been notified. Please try again."
[:span {:x-data (hx/json {"e" false})}
" "
[:a.text-xs.underline.cursor-pointer.text-gray-500.hover:text-gray-700
{"@click" "e=true"}
"Details"]
[:pre.text-xs.mt-1.font-mono.text-red-600.bg-red-50.p-2.rounded {:x-show "e" :x-text "errorDetails"}]]]]]]]
[:div.m-4.overflow-auto.z-30.flex.center-items.justify-center.text-blue-800.bg-blue-50.dark:bg-gray-800.dark:text-blue-400.border-blue-300.rounded-lg.border.max-h-96
{:x-show "showNotification"
"x-transition:enter" "transition duration-300 transform ease-in-out"
"x-transition:enter-start" "opacity-0 translate-y-full"
"x-transition:enter-end" "opacity-100 translate-y-0"
"x-transition:leave" "transition duration-300 transform ease-in-out"
"x-transition:leave-start" "opacity-100 translate-y-0"
"x-transition:leave-end" "opacity-0 translate-y-full"}
[:div.flex.items-center.justify-center.min-h-screen.px-4
[:div.w-full.max-w-lg
[:div.flex.flex-col.items-center.mb-10
[:img {:src "/img/logo-big.png" :alt "Integreat" :class "h-16 brightness-0 invert"}]]
[:div {:class "p-4 text-lg w-full" :role "alert"}
[:div.text-sm
[:pre#notification-details.text-xs {:x-html "notificationDetails"}]]]]]]
[:div {:x-show "showError"
:x-init ""}
[:div.fixed.top-0.right-0.left-0.z-30.mx-auto.max-w-screen-lg.w-screen-lg.my-0.pt-8.rounded-lg
[:div.relative
[:button.absolute.right-2.top-2.w-6.h-6.z-50.text-red-600
{"@click" "showError=false"}
svg/filled-x]]
[:div.bg-white.rounded-2xl.shadow-2xl.p-10
{:style "animation: slideUp 0.4s ease-out forwards; opacity: 0;"}
[:div.flex.flex-col.items-center.gap-8
[:div.text-center
[:h1.text-2xl.font-bold.text-gray-900 "Sign in to Integreat"]
[:p.mt-2.text-base.text-gray-500 "Use your Google account to continue"]]
[:div.m-4.overflow-auto.z-30.flex.center-items.justify-center.text-red-800.bg-red-50.dark:bg-gray-800.dark:text-red-400.border-red-300.rounded-lg.border.max-h-96
{:x-show "showError"
"x-transition:enter" "transition duration-300"
"x-transition:enter-start" "opacity-0"
"x-transition:enter-end" "opacity-100"}
[:a {:href (login-url (get (:query-params request) "redirect-to"))
:class "w-full max-w-xs flex items-center justify-center gap-3 px-6 py-3.5 text-base font-semibold rounded-xl border-2 border-gray-200 text-gray-700 bg-white hover:bg-gray-50 hover:border-gray-300 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 transition-all duration-150"}
svg/google
"Sign in with Google"]]
[:div {:class "p-4 mb-4 text-lg w-full" :role "alert"}
[:div.inline-block.w-8.h-8.mr-2 svg/alert]
[:span.font-medium "Oh, drat! An unexpected error has occurred."]
[:div.text-sm {:x-data (hx/json {"expandError" false})}
[:p "Integreat staff have been notified and are looking into it. "]
[:p "To see error details, " [:a.underline.cursor-pointer {"@click" "expandError=true"} "click here"] "."]
[:pre#error-details.text-xs {:x-show "expandError" :x-text "errorDetails"}]]]]]]
[:div.p-4.flex.flex-row.justify-center.items-center.h-screen
(com/card {:class "animate-slideUp w-full max-w-md"}
[:div.p-8
[:div.flex.justify-center.mb-6
[:img {:src "/img/logo-big.png" :class "max-w-[200px]"}]]
[:div
[:a {:href (login-url (get (:query-params request) "redirect-to"))
:class "inline-flex items-center justify-center w-full px-8 py-3 text-base font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"}
"Login with Google"]]])]]]])
[:p.mt-2.text-center.text-xs.text-gray-400
"By signing in, you agree to our "
[:a.underline.hover:text-gray-600 {:href "/terms"} "Terms of Service"]
" and "
[:a.underline.hover:text-gray-600 {:href "/privacy"} "Privacy Policy"]]]]]])
(defn login [request]
(base-page
request
(page-contents request)
"Dashboard"))
(login-page (page-contents request)))

View File

@@ -83,11 +83,11 @@
[:line {:stroke "currentColor", :fill "none", :stroke-linejoin "round", :y1 "16.22", :stroke-linecap "round", :stroke-width "1.5px", :x1 "16.221", :y2 "23.25", :x2 "23.25"}]])
(def moon
[:svg {:id "theme-toggle-dark-icon", :fill "currentColor", :viewbox "0 0 20 20", :xmlns "http://www.w3.org/2000/svg"}
[:svg {:id "theme-toggle-dark-icon", :fill "currentColor", :viewbox "0 0 20 20", :xmlns "http://www.w3.org/2000/svg"}
[:path {:d "M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"}]])
(def sun
[:svg {:id "theme-toggle-light-icon", :fill "currentColor", :viewbox "0 0 20 20", :xmlns "http://www.w3.org/2000/svg"}
[:svg {:id "theme-toggle-light-icon", :fill "currentColor", :viewbox "0 0 20 20", :xmlns "http://www.w3.org/2000/svg"}
[:path {:d "M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z", :fill-rule "evenodd", :clip-rule "evenodd"}]])
(def home
@@ -157,23 +157,23 @@
[:defs]
[:title "navigation-next"]
[:path
{:d "M23,9.5H12.387a4,4,0,0,0-4,4v2",
:fill "none",
:stroke "currentColor",
:stroke-linecap "round",
{:d "M23,9.5H12.387a4,4,0,0,0-4,4v2",
:fill "none",
:stroke "currentColor",
:stroke-linecap "round",
:stroke-linejoin "round"}]
[:polyline
{:points "19 13.498 23 9.498 19 5.498",
:fill "none",
:stroke "currentColor",
:stroke-linecap "round",
{:points "19 13.498 23 9.498 19 5.498",
:fill "none",
:stroke "currentColor",
:stroke-linecap "round",
:stroke-linejoin "round"}]
[:path
{:d
"M14.387,13v5.5a1,1,0,0,1-1,1h-12a1,1,0,0,1-1-1V6.5a1,1,0,0,1,1-1h12a1,1,0,0,1,1,1V7",
:fill "none",
:stroke "currentColor",
:stroke-linecap "round",
:fill "none",
:stroke "currentColor",
:stroke-linecap "round",
:stroke-linejoin "round"}]])
(def play
[:svg {:xmlns "http://www.w3.org/2000/svg", :viewbox "-0.5 -0.5 24 24"}
@@ -187,26 +187,26 @@
[:defs]
[:title "pencil"]
[:rect
{:y "1.09",
:stroke "currentColor",
:transform "translate(11.889 -5.238) rotate(45)",
:fill "none",
{:y "1.09",
:stroke "currentColor",
:transform "translate(11.889 -5.238) rotate(45)",
:fill "none",
:stroke-linejoin "round",
:width "6",
:stroke-linecap "round",
:x "9.268",
:height "21.284"}]
:width "6",
:stroke-linecap "round",
:x "9.268",
:height "21.284"}]
[:polygon
{:points "2.621 17.136 0.5 23.5 6.864 21.379 2.621 17.136",
:fill "none",
:stroke "currentColor",
:stroke-linecap "round",
{:points "2.621 17.136 0.5 23.5 6.864 21.379 2.621 17.136",
:fill "none",
:stroke "currentColor",
:stroke-linecap "round",
:stroke-linejoin "round"}]
[:path
{:d "M21.914,6.328,17.672,2.086l.707-.707a3,3,0,0,1,4.242,4.242Z",
:fill "none",
:stroke "currentColor",
:stroke-linecap "round",
{:d "M21.914,6.328,17.672,2.086l.707-.707a3,3,0,0,1,4.242,4.242Z",
:fill "none",
:stroke "currentColor",
:stroke-linecap "round",
:stroke-linejoin "round"}]])
(def dollar-tag
@@ -231,15 +231,15 @@
[:path
{:d
"M5.5,11.5c-.275,0-.341.159-.146.354l6.292,6.293a.5.5,0,0,0,.709,0l6.311-6.275c.2-.193.13-.353-.145-.355L15.5,11.5V1.5a1,1,0,0,0-1-1h-5a1,1,0,0,0-1,1V11a.5.5,0,0,1-.5.5Z",
:fill "none",
:stroke "currentColor",
:stroke-linecap "round",
:fill "none",
:stroke "currentColor",
:stroke-linecap "round",
:stroke-linejoin "round"}]
[:path
{:d "M23.5,18.5v4a1,1,0,0,1-1,1H1.5a1,1,0,0,1-1-1v-4",
:fill "none",
:stroke "currentColor",
:stroke-linecap "round",
{:d "M23.5,18.5v4a1,1,0,0,1-1,1H1.5a1,1,0,0,1-1-1v-4",
:fill "none",
:stroke "currentColor",
:stroke-linecap "round",
:stroke-linejoin "round"}]])
(def trash
@@ -522,3 +522,10 @@
[:path {:d "m12 16 0 3", :fill "none", :stroke "currentColor", :stroke-linecap "round", :stroke-linejoin "round", :stroke-width "1"}]
[:path {:d "M4.5 9.5h15s1 0 1 1v12s0 1 -1 1h-15s-1 0 -1 -1v-12s0 -1 1 -1", :fill "none", :stroke "currentColor", :stroke-linecap "round", :stroke-linejoin "round", :stroke-width "1"}]
[:path {:d "M6.5 6a5.5 5.5 0 0 1 11 0v3.5h-11Z", :fill "none", :stroke "currentColor", :stroke-linecap "round", :stroke-linejoin "round", :stroke-width "1"}]])
(def google
[:svg {:viewbox "0 0 24 24", :width "20", :height "20", :xmlns "http://www.w3.org/2000/svg"}
[:path {:fill "#4285F4" :d "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"}]
[:path {:fill "#34A853" :d "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"}]
[:path {:fill "#FBBC05" :d "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"}]
[:path {:fill "#EA4335" :d "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"}]])