fix: Fix register modal button click handling and add mask state

Author: TigerInYourDream

src/register/register_screen.rs

@@ -50,6 +50,17 @@ live_design! {
     use crate::register::register_status_modal::RegisterStatusModal;
 
     IMG_APP_LOGO = dep("crate://self/resources/robrix_logo_alpha.png")
+    
+    MaskableButton = <RobrixIconButton> {
+        draw_bg: {
+            instance mask: 0.0
+            fn pixel(self) -> vec4 {
+                let base_color = mix(self.color, mix(self.color, self.color_hover, 0.2), self.hover);
+                let gray = dot(base_color.rgb, vec3(0.299, 0.587, 0.114));
+                return mix(base_color, vec4(gray, gray, gray, base_color.a), self.mask);
+            }
+        }
+    }
 
     pub RegisterScreen = {{RegisterScreen}} {
         width: Fill, height: Fill,
@@ -235,13 +246,14 @@ live_design! {
                         spacing: 10
                         visible: true
 
-                        sso_button = <RobrixIconButton> {
+                        sso_button = <MaskableButton> {
                             width: Fill, height: 40
                             padding: 10
                             margin: {top: 10}
                             align: {x: 0.5, y: 0.5}
                             draw_bg: {
                                 color: (COLOR_ACTIVE_PRIMARY)
+                                mask: 0.0
                             }
                             draw_text: {
                                 color: (COLOR_PRIMARY)
@@ -280,13 +292,14 @@ live_design! {
                             is_password: true,
                         }
 
-                        register_button = <RobrixIconButton> {
+                        register_button = <MaskableButton> {
                             width: Fill, height: 40
                             padding: 10
                             margin: {top: 5, bottom: 10}
                             align: {x: 0.5, y: 0.5}
                             draw_bg: {
                                 color: (COLOR_ACTIVE_PRIMARY)
+                                mask: 0.0
                             }
                             draw_text: {
                                 color: (COLOR_PRIMARY)
@@ -337,12 +350,13 @@ live_design! {
                         text: "Back to Login"
                     }
                 }
-            }
-        }
-        
-        status_modal = <Modal> {
-            content: {
-                status_modal_inner = <RegisterStatusModal> {}
+
+                // Modal for registration status (both password and SSO)
+                status_modal = <Modal> {
+                    content: {
+                        status_modal_inner = <RegisterStatusModal> {}
+                    }
+                }
             }
         }
     }
@@ -372,6 +386,20 @@ impl RegisterScreen {
         });
     }
 
+    fn update_button_mask(&self, button: &ButtonRef, cx: &mut Cx, mask: f32) {
+        button.apply_over(cx, live! {
+            draw_bg: { mask: (mask) }
+        });
+    }
+    
+    fn reset_modal_state(&mut self, cx: &mut Cx) {
+        let register_button = self.view.button(id!(register_button));
+        register_button.set_enabled(cx, true);
+        register_button.reset_hover(cx);
+        self.update_button_mask(&register_button, cx, 0.0);
+        self.redraw(cx);
+    }
+
     fn update_registration_mode(&mut self, cx: &mut Cx) {
         let is_matrix_org = self.selected_homeserver == "matrix.org" || self.selected_homeserver.is_empty();
 
@@ -421,9 +449,13 @@ impl MatchEvent for RegisterScreen {
         if edit_button.clicked(actions) {
             self.toggle_homeserver_options(cx);
         }
-        
+
         // Handle SSO button click for matrix.org
         if sso_button.clicked(actions) && !self.sso_pending {
+            // Mark SSO as pending for this screen
+            self.sso_pending = true;
+            self.update_button_mask(&sso_button, cx, 1.0);
+
             // Use the same SSO flow as login screen - spawn SSO server with Google provider
             // This follows Element's implementation where SSO login and registration share the same OAuth flow
             // The Matrix server will handle whether to create a new account or login existing user
@@ -520,6 +552,7 @@ impl MatchEvent for RegisterScreen {
 
             // Disable register button to prevent duplicate submissions
             register_button.set_enabled(cx, false);
+            self.update_button_mask(&register_button, cx, 1.0);
 
             // Show registration status modal
             self.view.modal(id!(status_modal)).open(cx);
@@ -539,20 +572,24 @@ impl MatchEvent for RegisterScreen {
         // Handle modal closing for both success and failure in one place
         for action in actions {
             // Handle RegisterStatusModal close action
-            if let Some(RegisterStatusModalAction::Close) = action.as_widget_action().cast() {
-                self.view.modal(id!(status_modal)).close(cx);
-                // Re-enable register button when modal is closed manually
-                let register_button = self.view.button(id!(register_button));
-                register_button.set_enabled(cx, true);
-                self.redraw(cx);
+            if let Some(RegisterStatusModalAction::Close { was_internal }) = action.downcast_ref::<RegisterStatusModalAction>() {
+                if *was_internal {
+                    self.view.modal(id!(status_modal)).close(cx);
+                }
+                self.reset_modal_state(cx);
+                // Reset SSO button state if it was SSO registration
+                if self.sso_pending {
+                    self.sso_pending = false;
+                    self.update_button_mask(&sso_button, cx, 0.0);
+                }
             }
-            
+
             // Handle SSO login actions
             match action.downcast_ref::<LoginAction>() {
                 Some(LoginAction::SsoPending(pending)) => {
                     self.sso_pending = *pending;
-                    // Update SSO button state
-                    sso_button.set_enabled(cx, !pending);
+                    // Update SSO button state with mask
+                    self.update_button_mask(&sso_button, cx, if *pending { 1.0 } else { 0.0 });
                     self.redraw(cx);
                 }
                 Some(LoginAction::Status { .. }) => {
@@ -569,7 +606,7 @@ impl MatchEvent for RegisterScreen {
                     }
                     self.view.modal(id!(status_modal)).close(cx);
                     self.sso_pending = false;
-                    sso_button.set_enabled(cx, true);
+                    self.update_button_mask(&sso_button, cx, 0.0);
                     self.redraw(cx);
                 }
                 _ => {}

src/register/register_status_modal.rs

@@ -38,14 +38,13 @@ live_design! {
                 },
                 text: "Registering account, please wait..."
             }
-            
+
             <View> {
                 width: Fill,
                 height: Fit,
                 flow: Right,
                 align: {x: 1.0},
                 margin: {top: 10}
-                
                 cancel_button = <RobrixIconButton> {
                     width: Fit, height: Fit,
                     padding: 10,
@@ -81,16 +80,31 @@ impl Widget for RegisterStatusModal {
 
 impl MatchEvent for RegisterStatusModal {
     fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
-        if self.view.button(id!(cancel_button)).clicked(actions) {
-            // Send action to close the modal
+        // Check if modal was dismissed (ESC key or click outside)
+        let modal_dismissed = actions
+            .iter()
+            .any(|a| matches!(a.downcast_ref(), Some(ModalAction::Dismissed)));
+
+        // Check if Abort button was clicked
+        let abort_clicked = self.view.button(id!(cancel_button)).clicked(actions);
+
+        if abort_clicked || modal_dismissed {
+            // Send action to close the modal with appropriate was_internal flag
             // Note: This doesn't actually cancel the registration request (still running in background)
-            cx.action(RegisterStatusModalAction::Close);
+            cx.action(RegisterStatusModalAction::Close {
+                was_internal: abort_clicked 
+            });
         }
     }
 }
 
 #[derive(Clone, DefaultNone, Debug)]
 pub enum RegisterStatusModalAction {
-    Close,
+    /// The modal requested to be closed
+    Close {
+        /// Whether the modal was closed by clicking an internal button (Abort)
+        /// or being dismissed externally (ESC or click outside)
+        was_internal: bool,
+    },
     None,
 }

src/sliding_sync.rs

@@ -626,7 +626,7 @@ async fn async_worker(
                             enqueue_popup_notification(PopupItem {
                                 message: error_msg.clone(),
                                 kind: PopupKind::Error,
-                                auto_dismissal_duration: Some(5.0),
+                                auto_dismissal_duration: None,
                             });
                             Cx::post_action(RegisterAction::RegistrationFailure(error_msg));
                         }