Skip to content

Commit f5ab1fe

Browse files
niwinzniwinz
committed
♻️ Refactor auth related components
1 parent 2c2b4c6 commit f5ab1fe

File tree

6 files changed

+277
-232
lines changed

6 files changed

+277
-232
lines changed

‎frontend/src/app/main/ui/auth/login.cljs

Lines changed: 96 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@
9292
(assoc :message (tr "errors.email-invalid"))))))
9393

9494
(mf/defc login-form
95-
[{:keys [params on-success-callback] :as props}]
95+
[{:keys [params on-success] :as props}]
9696
(let [initial (mf/use-memo (mf/deps params) (constantly params))
9797

9898
totp* (mf/use-state false)
@@ -104,64 +104,74 @@
104104
:initial initial)
105105

106106
on-error
107-
(fn [cause]
108-
(when (map? cause)
109-
(err/print-trace! cause)
110-
(err/print-data! cause)
111-
(err/print-explain! cause))
112-
113-
(cond
114-
(and (= :totp (:code cause))
115-
(= :negotiation (:type cause)))
116-
(do
117-
(reset! totp* true)
118-
(reset! error (tr "errors.missing-totp"))
119-
(swap! form (fn [form]
120-
(-> form
121-
(update :errors assoc :totp {:message (tr "errors.missing-totp")})
122-
(update :touched assoc :totp true)))))
123-
124-
125-
(and (= :restriction (:type cause))
126-
(= :passkey-disabled (:code cause)))
127-
(reset! error (tr "errors.wrong-credentials"))
128-
129-
(and (= :restriction (:type cause))
130-
(= :profile-blocked (:code cause)))
131-
(reset! error (tr "errors.profile-blocked"))
132-
133-
(and (= :restriction (:type cause))
134-
(= :admin-only-profile (:code cause)))
135-
(reset! error (tr "errors.profile-blocked"))
136-
137-
(and (= :validation (:type cause))
138-
(= :wrong-credentials (:code cause)))
139-
(reset! error (tr "errors.wrong-credentials"))
140-
141-
(and (= :validation (:type cause))
142-
(= :account-without-password (:code cause)))
143-
(reset! error (tr "errors.wrong-credentials"))
144-
145-
:else
146-
(reset! error (tr "errors.generic"))))
107+
(mf/use-fn
108+
(fn [form cause]
109+
(when (map? cause)
110+
(err/print-trace! cause)
111+
(err/print-data! cause)
112+
(err/print-explain! cause))
113+
114+
(cond
115+
116+
(and (= :totp (:code cause))
117+
(= :negotiation (:type cause)))
118+
(reset! totp* true)
119+
120+
(and (= :invalid-totp (:code cause))
121+
(= :negotiation (:type cause)))
122+
(do
123+
;; (reset! error (tr "errors.invalid-totp"))
124+
(swap! form (fn [form]
125+
(-> form
126+
(update :errors assoc :totp {:message (tr "errors.invalid-totp")})
127+
(update :touched assoc :totp true)))))
128+
129+
130+
(and (= :restriction (:type cause))
131+
(= :passkey-disabled (:code cause)))
132+
(reset! error (tr "errors.wrong-credentials"))
133+
134+
(and (= :restriction (:type cause))
135+
(= :profile-blocked (:code cause)))
136+
(reset! error (tr "errors.profile-blocked"))
137+
138+
(and (= :restriction (:type cause))
139+
(= :admin-only-profile (:code cause)))
140+
(reset! error (tr "errors.profile-blocked"))
141+
142+
(and (= :validation (:type cause))
143+
(= :wrong-credentials (:code cause)))
144+
(reset! error (tr "errors.wrong-credentials"))
145+
146+
(and (= :validation (:type cause))
147+
(= :account-without-password (:code cause)))
148+
(reset! error (tr "errors.wrong-credentials"))
149+
150+
:else
151+
(reset! error (tr "errors.generic")))))
147152

148153
on-success-default
149-
(fn [data]
150-
(when-let [token (:invitation-token data)]
151-
(st/emit! (rt/nav :auth-verify-token {} {:token token}))))
154+
(mf/use-fn
155+
(fn [data]
156+
(when-let [token (:invitation-token data)]
157+
(st/emit! (rt/nav :auth-verify-token {} {:token token})))))
152158

153159
on-success
154-
(fn [data]
155-
(if (nil? on-success-callback)
156-
(on-success-default data)
157-
(on-success-callback)))
160+
(mf/use-fn
161+
(mf/deps on-success)
162+
(fn [data]
163+
(if (fn? on-success)
164+
(on-success data)
165+
(on-success-default data))))
158166

159167
on-submit
160168
(mf/use-fn
161169
(fn [form event]
162170
(let [event (dom/event->native-event event)
163171
submitter (unchecked-get event "submitter")
164-
submitter (dom/get-data submitter "role")]
172+
submitter (dom/get-data submitter "role")
173+
on-error (partial on-error form)
174+
on-success (partial on-success form)]
165175

166176
(case submitter
167177
"login-with-passkey"
@@ -175,6 +185,7 @@
175185
{:on-error on-error
176186
:on-success on-success})]
177187
(st/emit! (du/login-with-password params)))
188+
178189
nil))))
179190

180191
on-submit-ldap
@@ -284,7 +295,7 @@
284295
(tr "auth.login-with-oidc-submit")]]))
285296

286297
(mf/defc login-methods
287-
[{:keys [params on-success-callback] :as props}]
298+
[{:keys [params on-success] :as props}]
288299
[:*
289300
(when show-alt-login-buttons?
290301
[:*
@@ -306,35 +317,40 @@
306317
(when (or (contains? cf/flags :login)
307318
(contains? cf/flags :login-with-password)
308319
(contains? cf/flags :login-with-ldap))
309-
[:& login-form {:params params :on-success-callback on-success-callback}])])
320+
[:& login-form {:params params :on-success on-success}])])
310321

311322
(mf/defc login-page
312-
[{:keys [params] :as props}]
313-
[:div.generic-form.login-form
314-
[:div.form-container
315-
[:h1 {:data-test "login-title"} (tr "auth.login-title")]
316-
317-
[:& login-methods {:params params}]
318-
319-
[:div.links
320-
(when (or (contains? cf/flags :login)
321-
(contains? cf/flags :login-with-password))
322-
[:div.link-entry
323-
[:& lk/link {:action #(st/emit! (rt/nav :auth-recovery-request))
324-
:data-test "forgot-password"}
325-
(tr "auth.forgot-password")]])
326-
327-
(when (contains? cf/flags :registration)
328-
[:div.link-entry
329-
[:span (tr "auth.register") " "]
330-
[:& lk/link {:action #(st/emit! (rt/nav :auth-register {} params))
331-
:data-test "register-submit"}
332-
(tr "auth.register-submit")]])]
333-
334-
(when (contains? cf/flags :demo-users)
335-
[:div.links.demo
336-
[:div.link-entry
337-
[:span (tr "auth.create-demo-profile") " "]
338-
[:& lk/link {:action #(st/emit! (du/create-demo-profile))
339-
:data-test "demo-account-link"}
340-
(tr "auth.create-demo-account")]]])]])
323+
{::mf/wrap-props false}
324+
[{:keys [params]}]
325+
(let [nav-to-recovery (mf/use-fn #(st/emit! (rt/nav :auth-recovery-request)))
326+
nav-to-register (mf/use-fn (mf/deps params) #(st/emit! (rt/nav :auth-register {} params)))
327+
create-demo (mf/use-fn #(st/emit! (du/create-demo-profile)))]
328+
329+
[:div.generic-form.login-form
330+
[:div.form-container
331+
[:h1 {:data-test "login-title"} (tr "auth.login-title")]
332+
333+
[:& login-methods {:params params}]
334+
335+
[:div.links
336+
(when (or (contains? cf/flags :login)
337+
(contains? cf/flags :login-with-password))
338+
[:div.link-entry
339+
[:& lk/link {:on-click nav-to-recovery
340+
:data-test "forgot-password"}
341+
(tr "auth.forgot-password")]])
342+
343+
(when (contains? cf/flags :registration)
344+
[:div.link-entry
345+
[:span (tr "auth.register") " "]
346+
[:& lk/link {:on-click nav-to-register
347+
:data-test "register-submit"}
348+
(tr "auth.register-submit")]])]
349+
350+
(when (contains? cf/flags :demo-users)
351+
[:div.links.demo
352+
[:div.link-entry
353+
[:span (tr "auth.create-demo-profile") " "]
354+
[:& lk/link {:on-click create-demo
355+
:data-test "demo-account-link"}
356+
(tr "auth.create-demo-account")]]])]]))

‎frontend/src/app/main/ui/auth/recovery_request.cljs

Lines changed: 28 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,9 @@
2121
[rumext.v2 :as mf]))
2222

2323
(s/def ::email ::us/email)
24-
(s/def ::recovery-request-form (s/keys :req-un [::email]))
24+
(s/def ::recovery-request-form
25+
(s/keys :req-un [::email]))
26+
2527
(defn handle-error-messages
2628
[errors _data]
2729
(d/update-when errors :email
@@ -31,24 +33,27 @@
3133
(assoc :message (tr "errors.email-invalid"))))))
3234

3335
(mf/defc recovery-form
34-
[{:keys [on-success-callback] :as props}]
36+
{::mf/wrap-props false}
37+
[{:keys [on-success]}]
3538
(let [form (fm/use-form :spec ::recovery-request-form
3639
:validators [handle-error-messages]
3740
:initial {})
3841
submitted (mf/use-state false)
3942

40-
default-success-finish #(st/emit! (dm/info (tr "auth.notifications.recovery-token-sent")))
43+
default-on-success
44+
(mf/use-fn #(st/emit! (dm/info (tr "auth.notifications.recovery-token-sent"))))
4145

4246
on-success
43-
(mf/use-callback
47+
(mf/use-fn
48+
(mf/deps default-on-success on-success)
4449
(fn [cdata _]
4550
(reset! submitted false)
46-
(if (nil? on-success-callback)
47-
(default-success-finish)
48-
(on-success-callback (:email cdata)))))
51+
(if (fn? on-success)
52+
(on-success (:email cdata))
53+
(default-on-success))))
4954

5055
on-error
51-
(mf/use-callback
56+
(mf/use-fn
5257
(fn [data {:keys [code] :as error}]
5358
(reset! submitted false)
5459
(case code
@@ -64,7 +69,7 @@
6469
(rx/throw error))))
6570

6671
on-submit
67-
(mf/use-callback
72+
(mf/use-fn
6873
(fn []
6974
(reset! submitted true)
7075
(let [cdata (:clean-data @form)
@@ -74,32 +79,34 @@
7479
(reset! form nil)
7580
(st/emit! (du/request-profile-recovery params)))))]
7681

77-
[:& fm/form {:on-submit on-submit
78-
:form form}
82+
[:& fm/form {:on-submit on-submit :form form}
7983
[:div.fields-row
80-
[:& fm/input {:name :email
81-
:label (tr "auth.email")
82-
:help-icon i/at
83-
:type "text"}]]
84+
[:& fm/input
85+
{:name :email
86+
:label (tr "auth.email")
87+
:help-icon i/at
88+
:type "text"}]]
8489

8590
[:> fm/submit-button*
8691
{:label (tr "auth.recovery-request-submit")
8792
:data-test "recovery-resquest-submit"}]]))
8893

89-
9094
;; --- Recovery Request Page
9195

9296
(mf/defc recovery-request-page
93-
[{:keys [params on-success-callback go-back-callback] :as props}]
94-
(let [default-go-back #(st/emit! (rt/nav :auth-login))
95-
go-back (or go-back-callback default-go-back)]
97+
{::mf/wrap-props false}
98+
[{:keys [params on-success on-go-back]}]
99+
(let [default-go-back (mf/use-fn #(st/emit! (rt/nav :auth-login)))
100+
on-go-back (or on-go-back default-go-back)]
96101
[:section.generic-form
97102
[:div.form-container
98103
[:h1 (tr "auth.recovery-request-title")]
99104
[:div.subtitle (tr "auth.recovery-request-subtitle")]
100-
[:& recovery-form {:params params :on-success-callback on-success-callback}]
105+
[:& recovery-form
106+
{:params params
107+
:on-success on-success}]
101108
[:div.links
102109
[:div.link-entry
103-
[:& lk/link {:action go-back
110+
[:& lk/link {:on-click on-go-back
104111
:data-test "go-back-link"}
105112
(tr "labels.go-back")]]]]]))

0 commit comments

Comments
 (0)