♻️ Refactor auth related components

penpot · Jul 20, 2023 · f5ab1fe · f5ab1fe
1 parent 2c2b4c6
commit f5ab1fe
Show file tree

Hide file tree

Showing 6 changed files with 277 additions and 232 deletions.
diff --git a/frontend/src/app/main/ui/auth/login.cljs b/frontend/src/app/main/ui/auth/login.cljs
@@ -92,7 +92,7 @@
  (assoc :message (tr "errors.email-invalid"))))))
 
 (mf/defc login-form
- [{:keys [params on-success-callback] :as props}]
+ [{:keys [params on-success] :as props}]
  (let [initial (mf/use-memo (mf/deps params) (constantly params))
 
  totp* (mf/use-state false)
@@ -104,64 +104,74 @@
  :initial initial)
 
  on-error
- (fn [cause]
- (when (map? cause)
- (err/print-trace! cause)
- (err/print-data! cause)
- (err/print-explain! cause))
-
- (cond
- (and (= :totp (:code cause))
- (= :negotiation (:type cause)))
- (do
- (reset! totp* true)
- (reset! error (tr "errors.missing-totp"))
- (swap! form (fn [form]
- (-> form
- (update :errors assoc :totp {:message (tr "errors.missing-totp")})
- (update :touched assoc :totp true)))))
-
-
- (and (= :restriction (:type cause))
- (= :passkey-disabled (:code cause)))
- (reset! error (tr "errors.wrong-credentials"))
-
- (and (= :restriction (:type cause))
- (= :profile-blocked (:code cause)))
- (reset! error (tr "errors.profile-blocked"))
-
- (and (= :restriction (:type cause))
- (= :admin-only-profile (:code cause)))
- (reset! error (tr "errors.profile-blocked"))
-
- (and (= :validation (:type cause))
- (= :wrong-credentials (:code cause)))
- (reset! error (tr "errors.wrong-credentials"))
-
- (and (= :validation (:type cause))
- (= :account-without-password (:code cause)))
- (reset! error (tr "errors.wrong-credentials"))
-
- :else
- (reset! error (tr "errors.generic"))))
+ (mf/use-fn
+ (fn [form cause]
+ (when (map? cause)
+ (err/print-trace! cause)
+ (err/print-data! cause)
+ (err/print-explain! cause))
+
+ (cond
+
+ (and (= :totp (:code cause))
+ (= :negotiation (:type cause)))
+ (reset! totp* true)
+
+ (and (= :invalid-totp (:code cause))
+ (= :negotiation (:type cause)))
+ (do
+ ;; (reset! error (tr "errors.invalid-totp"))
+ (swap! form (fn [form]
+ (-> form
+ (update :errors assoc :totp {:message (tr "errors.invalid-totp")})
+ (update :touched assoc :totp true)))))
+
+
+ (and (= :restriction (:type cause))
+ (= :passkey-disabled (:code cause)))
+ (reset! error (tr "errors.wrong-credentials"))
+
+ (and (= :restriction (:type cause))
+ (= :profile-blocked (:code cause)))
+ (reset! error (tr "errors.profile-blocked"))
+
+ (and (= :restriction (:type cause))
+ (= :admin-only-profile (:code cause)))
+ (reset! error (tr "errors.profile-blocked"))
+
+ (and (= :validation (:type cause))
+ (= :wrong-credentials (:code cause)))
+ (reset! error (tr "errors.wrong-credentials"))
+
+ (and (= :validation (:type cause))
+ (= :account-without-password (:code cause)))
+ (reset! error (tr "errors.wrong-credentials"))
+
+ :else
+ (reset! error (tr "errors.generic")))))
 
  on-success-default
- (fn [data]
- (when-let [token (:invitation-token data)]
- (st/emit! (rt/nav :auth-verify-token {} {:token token}))))
+ (mf/use-fn
+ (fn [data]
+ (when-let [token (:invitation-token data)]
+ (st/emit! (rt/nav :auth-verify-token {} {:token token})))))
 
  on-success
- (fn [data]
- (if (nil? on-success-callback)
- (on-success-default data)
- (on-success-callback)))
+ (mf/use-fn
+ (mf/deps on-success)
+ (fn [data]
+ (if (fn? on-success)
+ (on-success data)
+ (on-success-default data))))
 
  on-submit
  (mf/use-fn
  (fn [form event]
  (let [event (dom/event->native-event event)
  submitter (unchecked-get event "submitter")
- submitter (dom/get-data submitter "role")]
+ submitter (dom/get-data submitter "role")
+ on-error (partial on-error form)
+ on-success (partial on-success form)]
 
  (case submitter
  "login-with-passkey"
@@ -175,6 +185,7 @@
  {:on-error on-error
  :on-success on-success})]
  (st/emit! (du/login-with-password params)))
+
  nil))))
 
  on-submit-ldap
@@ -284,7 +295,7 @@
  (tr "auth.login-with-oidc-submit")]]))
 
 (mf/defc login-methods
- [{:keys [params on-success-callback] :as props}]
+ [{:keys [params on-success] :as props}]
  [:*
  (when show-alt-login-buttons?
  [:*
@@ -306,35 +317,40 @@
  (when (or (contains? cf/flags :login)
  (contains? cf/flags :login-with-password)
  (contains? cf/flags :login-with-ldap))
- [:& login-form {:params params :on-success-callback on-success-callback}])])
+ [:& login-form {:params params :on-success on-success}])])
 
 (mf/defc login-page
- [{:keys [params] :as props}]
- [:div.generic-form.login-form
- [:div.form-container
- [:h1 {:data-test "login-title"} (tr "auth.login-title")]
-
- [:& login-methods {:params params}]
-
- [:div.links
- (when (or (contains? cf/flags :login)
- (contains? cf/flags :login-with-password))
- [:div.link-entry
- [:& lk/link {:action #(st/emit! (rt/nav :auth-recovery-request))
- :data-test "forgot-password"}
- (tr "auth.forgot-password")]])
-
- (when (contains? cf/flags :registration)
- [:div.link-entry
- [:span (tr "auth.register") " "]
- [:& lk/link {:action #(st/emit! (rt/nav :auth-register {} params))
- :data-test "register-submit"}
- (tr "auth.register-submit")]])]
-
- (when (contains? cf/flags :demo-users)
- [:div.links.demo
- [:div.link-entry
- [:span (tr "auth.create-demo-profile") " "]
- [:& lk/link {:action #(st/emit! (du/create-demo-profile))
- :data-test "demo-account-link"}
- (tr "auth.create-demo-account")]]])]])
+ {::mf/wrap-props false}
+ [{:keys [params]}]
+ (let [nav-to-recovery (mf/use-fn #(st/emit! (rt/nav :auth-recovery-request)))
+ nav-to-register (mf/use-fn (mf/deps params) #(st/emit! (rt/nav :auth-register {} params)))
+ create-demo (mf/use-fn #(st/emit! (du/create-demo-profile)))]
+
+ [:div.generic-form.login-form
+ [:div.form-container
+ [:h1 {:data-test "login-title"} (tr "auth.login-title")]
+
+ [:& login-methods {:params params}]
+
+ [:div.links
+ (when (or (contains? cf/flags :login)
+ (contains? cf/flags :login-with-password))
+ [:div.link-entry
+ [:& lk/link {:on-click nav-to-recovery
+ :data-test "forgot-password"}
+ (tr "auth.forgot-password")]])
+
+ (when (contains? cf/flags :registration)
+ [:div.link-entry
+ [:span (tr "auth.register") " "]
+ [:& lk/link {:on-click nav-to-register
+ :data-test "register-submit"}
+ (tr "auth.register-submit")]])]
+
+ (when (contains? cf/flags :demo-users)
+ [:div.links.demo
+ [:div.link-entry
+ [:span (tr "auth.create-demo-profile") " "]
+ [:& lk/link {:on-click create-demo
+ :data-test "demo-account-link"}
+ (tr "auth.create-demo-account")]]])]]))
diff --git a/frontend/src/app/main/ui/auth/recovery_request.cljs b/frontend/src/app/main/ui/auth/recovery_request.cljs
@@ -21,7 +21,9 @@
  [rumext.v2 :as mf]))
 
 (s/def ::email ::us/email)
-(s/def ::recovery-request-form (s/keys :req-un [::email]))
+(s/def ::recovery-request-form
+ (s/keys :req-un [::email]))
+
 (defn handle-error-messages
  [errors _data]
  (d/update-when errors :email
@@ -31,24 +33,27 @@
  (assoc :message (tr "errors.email-invalid"))))))
 
 (mf/defc recovery-form
- [{:keys [on-success-callback] :as props}]
+ {::mf/wrap-props false}
+ [{:keys [on-success]}]
  (let [form (fm/use-form :spec ::recovery-request-form
  :validators [handle-error-messages]
  :initial {})
  submitted (mf/use-state false)
 
- default-success-finish #(st/emit! (dm/info (tr "auth.notifications.recovery-token-sent")))
+ default-on-success
+ (mf/use-fn #(st/emit! (dm/info (tr "auth.notifications.recovery-token-sent"))))
 
  on-success
- (mf/use-callback
+ (mf/use-fn
+ (mf/deps default-on-success on-success)
  (fn [cdata _]
  (reset! submitted false)
- (if (nil? on-success-callback)
- (default-success-finish)
- (on-success-callback (:email cdata)))))
+ (if (fn? on-success)
+ (on-success (:email cdata))
+ (default-on-success))))
 
  on-error
- (mf/use-callback
+ (mf/use-fn
  (fn [data {:keys [code] :as error}]
  (reset! submitted false)
  (case code
@@ -64,7 +69,7 @@
  (rx/throw error))))
 
  on-submit
- (mf/use-callback
+ (mf/use-fn
  (fn []
  (reset! submitted true)
  (let [cdata (:clean-data @form)
@@ -74,32 +79,34 @@
  (reset! form nil)
  (st/emit! (du/request-profile-recovery params)))))]
 
- [:& fm/form {:on-submit on-submit
- :form form}
+ [:& fm/form {:on-submit on-submit :form form}
  [:div.fields-row
- [:& fm/input {:name :email
- :label (tr "auth.email")
- :help-icon i/at
- :type "text"}]]
+ [:& fm/input
+ {:name :email
+ :label (tr "auth.email")
+ :help-icon i/at
+ :type "text"}]]
 
  [:> fm/submit-button*
  {:label (tr "auth.recovery-request-submit")
  :data-test "recovery-resquest-submit"}]]))
 
-
 ;; --- Recovery Request Page
 
 (mf/defc recovery-request-page
- [{:keys [params on-success-callback go-back-callback] :as props}]
- (let [default-go-back #(st/emit! (rt/nav :auth-login))
- go-back (or go-back-callback default-go-back)]
+ {::mf/wrap-props false}
+ [{:keys [params on-success on-go-back]}]
+ (let [default-go-back (mf/use-fn #(st/emit! (rt/nav :auth-login)))
+ on-go-back (or on-go-back default-go-back)]
  [:section.generic-form
  [:div.form-container
  [:h1 (tr "auth.recovery-request-title")]
  [:div.subtitle (tr "auth.recovery-request-subtitle")]
- [:& recovery-form {:params params :on-success-callback on-success-callback}]
+ [:& recovery-form
+ {:params params
+ :on-success on-success}]
  [:div.links
  [:div.link-entry
- [:& lk/link {:action go-back
+ [:& lk/link {:on-click on-go-back
  :data-test "go-back-link"}
  (tr "labels.go-back")]]]]]))