🐛 Fix email change validation

CHANGES.md

@@ -35,6 +35,7 @@
 - Fix issue with paths line to curve and concurrent editing [Taiga #5191](https://tree.taiga.io/project/penpot/issue/5191)
 - Fix problems with locked layers [Taiga #5139](https://tree.taiga.io/project/penpot/issue/5139)
 - Fix export from shared prototype [Taiga #5565](https://tree.taiga.io/project/penpot/issue/5565)
+- Fix email change: validation error displaying even after both fields are identical [Taiga #5514](https://tree.taiga.io/project/penpot/issue/5514)
 
 ### :arrow_up: Deps updates
 

frontend/src/app/main/ui/components/forms.cljs

@@ -24,7 +24,7 @@
 (def use-form fm/use-form)
 
 (mf/defc input
-  [{:keys [label help-icon disabled form hint trim children data-test] :as props}]
+  [{:keys [label help-icon disabled form hint trim children data-test on-change-value] :as props}]
   (let [input-type   (get props :type "text")
         input-name   (get props :name)
         more-classes (get props :class)
@@ -57,6 +57,8 @@
                        :else
                        help-icon)
 
+        on-change-value (or on-change-value (constantly nil))
+        
         klass (str more-classes " "
                    (dom/classnames
                     :focus          @focus?
@@ -80,7 +82,8 @@
         on-change (fn [event]
                     (let [value (-> event dom/get-target dom/get-input-value)]
                       (swap! form assoc-in [:touched input-name] true)
-                      (fm/on-input-change form input-name value trim)))
+                      (fm/on-input-change form input-name value trim)
+                      (on-change-value name value)))
 
         on-blur
         (fn [_]

frontend/src/app/main/ui/settings/change_email.cljs

@@ -6,6 +6,8 @@
 
 (ns app.main.ui.settings.change-email
   (:require
+   [app.common.data :as d]
+   [app.common.data.macros :as dma]
    [app.common.spec :as us]
    [app.main.data.messages :as dm]
    [app.main.data.modal :as modal]
@@ -29,7 +31,8 @@
         email-2 (:email-2 data)]
     (cond-> errors
       (and email-1 email-2 (not= email-1 email-2))
-      (assoc :email-2 {:message (tr "errors.email-invalid-confirmation")}))))
+      (assoc :email-2 {:message (tr "errors.email-invalid-confirmation")
+                       :code :different-emails}))))
 
 (s/def ::email-change-form
   (s/keys :req-un [::email-1 ::email-2]))
@@ -81,7 +84,17 @@
         on-submit
         (mf/use-callback
          (mf/deps profile)
-         (partial on-submit profile))]
+         (partial on-submit profile))
+                                     
+        on-email-change
+        (mf/use-callback
+          (fn [_ _]
+            (let [different-emails-error? (= (dma/get-in @form [:errors :email-2 :code]) :different-emails)
+                  email-1                 (dma/get-in @form [:clean-data :email-1])
+                  email-2                 (dma/get-in @form [:clean-data :email-2])]
+              (println "different-emails-error?" (and different-emails-error? (= email-1 email-2)))
+              (when (and different-emails-error? (= email-1 email-2))
+                (swap! form d/dissoc-in [:errors :email-2])))))]
 
     [:div.modal-overlay
      [:div.modal-container.change-email-modal.form-container
@@ -105,12 +118,14 @@
           [:& fm/input {:type "email"
                         :name :email-1
                         :label (tr "modals.change-email.new-email")
-                        :trim true}]]
+                        :trim true
+                        :on-change-value on-email-change}]]
          [:div.fields-row
           [:& fm/input {:type "email"
                         :name :email-2
                         :label (tr "modals.change-email.confirm-email")
-                        :trim true}]]]]
+                        :trim true
+                        :on-change-value on-email-change}]]]]
 
        [:div.modal-footer
         [:div.action-buttons {:data-test "change-email-submit"}