🐛 Fix UI bugs in account settings forms (#8997)

Closes #8977
Closes #8979

Signed-off-by: Dexterity <173429049+Dexterity104@users.noreply.github.com>
Co-authored-by: Andrey Antukh <niwi@niwi.nz>

CHANGES.md

@@ -70,6 +70,8 @@
 - Fix app crash when selecting shapes with one hidden [Taiga #13959](https://tree.taiga.io/project/penpot/issue/13959)
 - Fix opacity mixed value [Taiga #13960](https://tree.taiga.io/project/penpot/issue/13960)
 - Fix gap input throwing an error [Github #8984](https://github.com/penpot/penpot/pull/8984)
+- Fix non-functional clear icon in change email modal inputs (by @Dexterity104) [Github #8977](https://github.com/penpot/penpot/issues/8977)
+- Disable save button after saving account profile settings (by @Dexterity104) [Github #8979](https://github.com/penpot/penpot/issues/8979)
 - Fix copy to be more specific [Taiga #13990](https://tree.taiga.io/project/penpot/issue/13990)
 - Allow deleting the profile avatar after uploading [Github #9067](https://github.com/penpot/penpot/issues/9067)
 - Fix incorrect rendering when exporting text as SVG, PNG and JPG (by @edwin-rivera-dev) [Github #8516](https://github.com/penpot/penpot/issues/8516)

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

@@ -92,6 +92,15 @@
           (when-not (get-in @form [:touched input-name])
             (swap! form assoc-in [:touched input-name] true)))
 
+        on-clear
+        (fn [event]
+          (dom/prevent-default event)
+          (swap! form (fn [state]
+                        (-> state
+                            (assoc-in [:data input-name] "")
+                            (assoc-in [:touched input-name] false))))
+          (some-> (mf/ref-val input-ref) (dom/focus!)))
+
         on-key-press
         (mf/use-fn
          (mf/deps input-ref)
@@ -158,7 +167,10 @@
                deprecated-icon/tick])
 
             (when show-invalid?
-              [:span {:class (stl/css :invalid-icon)}
+              [:button {:class (stl/css :invalid-icon)
+                        :type "button"
+                        :tab-index "-1"
+                        :on-click on-clear}
                deprecated-icon/close])])]
 
         (some? children)

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

@@ -123,6 +123,8 @@
 .invalid-icon {
   inline-size: $sz-16;
   block-size: $sz-16;
+  padding: 0;
+  border: none;
   background: var(--input-border-color-error);
   border-radius: $br-circle;
   display: flex;
@@ -131,6 +133,7 @@
   position: absolute;
   inset-inline-end: var(--input-icon-padding);
   inset-block-start: calc(50% - var(--sp-s));
+  cursor: pointer;
 
   svg {
     inline-size: $sz-12;

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

@@ -26,13 +26,12 @@
    [:fullname [::sm/text {:max 250}]]
    [:email ::sm/email]])
 
-(defn- on-success
-  [_]
-  (st/emit! (ntf/success (tr "notifications.profile-saved"))))
-
 (defn- on-submit
   [form _event]
-  (let [data  (:clean-data @form)]
+  (let [data       (:clean-data @form)
+        on-success (fn [_]
+                     (swap! form assoc :touched {})
+                     (st/emit! (ntf/success (tr "notifications.profile-saved"))))]
     (st/emit! (du/update-profile data)
               (du/persist-profile {:on-success on-success}))))