Refreshing widget's view and data

[yikaifeng]

I'm building an interface for adding user on Linux server. So, I have DataTable with users' information. Then clicking "add" and show modal window with inputs: name, type password, retype password. All then has validation "on change".

1. When I 'type password' the border becomes red (because it doesn't much with the second empty input), then I 'retype password'. When it becomes equal with the first input, the border becomes normal, but the border of the 'type password' still red. How can I refresh view of both inputs simultaneously?
2. In examples I saw, that on success the border of input becomes green. But in my code it doesn't work. It's either neutral or red. I tried Function and subclass of Validator, both don't make border green. How to do that?
3. When eventually I add new user, how to update DataTable (delete all, and load new data)?

[TomJGooding]

When I 'type password' the border becomes red (because it doesn't much with the second empty input)

I'm not sure I understand why you want to validate both the password inputs - why not just the 'confirm password' input?

In examples I saw, that on success the border of input becomes green. But in my code it doesn't work.

You might have missed the CSS and annotation in the Validating Input code example?

When eventually I add new user, how to update DataTable (delete all, and load new data)?

Could you elaborate a bit and explain what exactly you're struggling with?

[yikaifeng]

Two password inputs is a standard way to avoid password's mistake. Both should match each other. So, when they don't match I'd like to show both inputs red border, when they match - green border. So, I need to validate and draw resume simultaneity.

About DataTable. There is a function, which query all users. The result I add to table rows. After adding new user, I want clear table and load new result to table. I don't know, where to put code. Now it's in "on_mount", but DataTable.refresh() doesn't really refresh data.

[TomJGooding]

Highlighting the password input as invalid when the confirmation input doesn't match seems like weird UX to me! But you raise an interesting point about cross-field validation (i.e. when validation depends on the value of other fields). It might help to understand how you're achieving this currently?

Regarding your users table, have you tried to simply clear the table and then using the same function to load the new data?

Without seeing any code, it is difficult to offer advice. Could you maybe try creating a minimal reproducible example?

[yikaifeng]

#===============================================================================
class _Errors: 
    
    empty_name: bool = True
    existed_name: bool = False
    empty_password: bool = True
    passwords_dont_match: bool = False
    
    def to_list(self) -> ty.List[bool]:
        return [self.empty_name, 
                self.existed_name, 
                self.empty_password, 
                self.passwords_dont_match]

#===============================================================================
class UsersAndGroupsAddDialog(ModalScreen[bool]):
    
    #---------------------------------------------------------------------------
    def __init__(self, *args, **kwargs) -> None:
        super().__init__(*args, **kwargs)
        self._errors = _Errors()
    
    
    def compose(self) -> ComposeResult:
        
        with Vertical(id="dialog"):
            
            with Horizontal():
                yield Label(f"Adding new user", id="caption")
            
            with Horizontal():
                yield Label(f"User *", classes="label")
                yield Input(id="name", classes="input", validators=[
                    Function(self.not_empty, "Field 'User' can't be empty"),
                    Function(self.correct_user, "User already exists"),
                ])
                
            with Horizontal():
                yield Label("Type password *", classes="label")
                yield Input(id="password_1", classes="input", password=True, validators=[
                    Function(self.not_empty, "Field 'Type password' can't be empty"),
                    Function(self.correct_password, "Passwords don't match"),
                ])
            
            with Horizontal():
                yield Label("Retype password *", classes="label")
                yield Input(id="password_2", classes="input", password=True, validators=[
                    Function(self.not_empty, "Retype 'Type password' can't be empty"),
                    Function(self.correct_password, "Passwords don't match"),
                ])
                
            with Horizontal():
                yield Label("", id="error")
            
            with Horizontal(id="buttons"):
                yield Button("OK", variant="success", id="ok", classes="button")
                yield Button("Cancel", variant="primary", id="cancel", classes="button")
                
        
    def on_mount(self):
        self.query_one("#ok", Button).disabled = True

    #---------------------------------------------------------------------------
    # Events
    #---------------------------------------------------------------------------
    def on_button_pressed(self, event: Button.Pressed) -> None:
        if event.button.id=="ok":
            self.dismiss((self.query_one("#name", Input).value,
                          self.query_one("#password_1", Input).value))
        else:
            self.dismiss(None)
        
    
    @on(Input.Changed)
    def check_inputs(self, event: Input.Changed) -> None:
        
        if any(self._errors.to_list()):
            self.query_one("#ok", Button).disabled = True
        else:
            self.query_one("#ok", Button).disabled = False
        
        if not event.validation_result.is_valid:  
            self.query_one("#error", Label).add_class("error")
            self.query_one("#error", Label).update("|".join(event.validation_result.failure_descriptions))
            
        else:
            self.query_one("#error", Label).remove_class("error")
            self.query_one("#error", Label).update("")
        
        
    #---------------------------------------------------------------------------
    # Validators
    #---------------------------------------------------------------------------
    def not_empty(self, value) -> bool:
        
        if self.query_one("#name", Input).value == "":
            self._errors.empty_name = True
        else:
            self._errors.empty_name = False
            
        if self.query_one("#password_1", Input).value == "" \
            or self.query_one("#password_2", Input).value == "":
            self._errors.empty_password = True
        else:
            self._errors.empty_password = False
            
        return str(value) != ""
    
    
    def correct_user(self, value) -> bool:
        
        if str(value) in users.get_users_names():
            self._errors.existed_name = True
            return False
        else:
            self._errors.existed_name = False
            return True
    
    
    def correct_password(self, value) -> bool:
        
        if self.query_one("#password_1", Input).value != self.query_one("#password_2", Input).value:
            self._errors.passwords_dont_match = True
            return False
        else:
            self._errors.passwords_dont_match = False
            return True
        

#===============================================================================
if __name__ == "__main__":
    pass

So, in yhis example, when i've typed the first password, the border becomes red (because it doesn't much the second empty password field). When i'm typing the second password field, it eventualy becomes correct, but the first field doesn't update view, still has red border. How can i update its view?

[TomJGooding]

Clever use of the Function validator! How about calling the validate method on the other input directly?

# After validating that the passwords match...
# ---snip---
# Call the `validate` method on the other password input
password_input = self.query_one("#password_1", Input)
password_input.validate(password_input.value)

[yikaifeng]

Thanks, i modifed code to prevent recursion:

def correct_password_1(self, value) -> bool:
        
        if not self._lock:
            self._lock = True
            password_input = self.query_one("#password_2", Input)
            password_input.validate(password_input.value)
            self._lock = False
        
        if self.query_one("#password_1", Input).value != self.query_one("#password_2", Input).value:
            self._errors.password_doesnt_match_1 = True
            return False
        else:
            self._errors.password_doesnt_match_1 = False
            return True
        
    
    def correct_password_2(self, value) -> bool:
        
        if not self._lock:
            self._lock = True
            password_input = self.query_one("#password_1", Input)
            password_input.validate(password_input.value)
            self._lock = False
        
        if self.query_one("#password_1", Input).value != self.query_one("#password_2", Input).value:
            self._errors.password_doesnt_match_2 = True
            return False
        else:
            self._errors.password_doesnt_match_2 = False
            return True