Configuration UI for creating an enum datum

[barafael]

I'm creating a UI for entering data for a configuration. It looks like this:

The first (URL) input field is just there to show there are other fields.
The remaining fields are intended to create an enum on the rust side:

enum Authentication {
    UserPassword { username: String, password: String },
    Token(String),
    CredentialsFile(PathBuf),
}

It works, but ideally I'd want to show only the input fields for the currently selected AuthenticationType.
I have tried doing that with if but that doesn't seem to be supported yet in GridLayout.

I'm OK with doing it by graying out the currently invalidated fields or with a small tabbed UI (though it seems cramped). How would I do it?

import { VerticalBox, Button, LineEdit, SpinBox, ComboBox } from "std-widgets.slint";

enum AuthenticationType {
    UserPassword,
    Token,
    CredentialsFile
}

struct Data {
    url: string,
    auth_type: AuthenticationType,
    username: string,
    password: string,
    token: string,
    credentials_path: string,
}

export component FormTab inherits VerticalBox {
    in-out property <Data> data;
    padding: 20px;
    Text {
        text: "THING Settings";
        font-weight: 700;
    }

    GridLayout {
        spacing-horizontal: 10px;
        spacing-vertical: 8px;
        Row {
            Text {
                text: "URL:";
                vertical-alignment: TextVerticalAlignment.center;
            }

            LineEdit {
                colspan: 2;
                placeholder-text: "Enter URL";
                text: root.data.url;
                edited(text) => {
                    root.data.url = text;
                }
            }
        }

        Row {
            Text {
                vertical-alignment: TextVerticalAlignment.center;
                text: "Authentication:";
            }

            ComboBox {
                colspan: 2;
                model: ["User/Password", "Token", "Credentials File"];
                selected(value) => {
                    if (value == "User/Password") {
                        root.data.auth-type = AuthenticationType.UserPassword;
                    } else if (value == "Token") {
                        root.data.auth-type = AuthenticationType.Token;
                    } else {
                        root.data.auth-type = AuthenticationType.CredentialsFile;
                    }
                }
            }
        }

        // if root.data.auth-type == AuthenticationType.UserPassword:
        Row {
            Text {
                vertical-alignment: TextVerticalAlignment.center;
                text: "Username:";
            }

            LineEdit {
                colspan: 2;
                placeholder-text: "Enter username";
                text: root.data.username;
                edited(text) => {
                    root.data.username = text;
                }
            }
        }
        // if root.data.auth-type == AuthenticationType.UserPassword:
        Row {
            Text {
                vertical-alignment: TextVerticalAlignment.center;
                text: "Password:";
            }

            LineEdit {
                colspan: 2;
                placeholder-text: "Enter password";
                text: root.data.password;
                input-type: InputType.password;
                edited(text) => {
                    root.data.password = text;
                }
            }
        }

        // if root.data.auth-type == AuthenticationType.Token:
        Row {
            Text {
                vertical-alignment: TextVerticalAlignment.center;
                text: "Token:";
            }

            LineEdit {
                colspan: 2;
                placeholder-text: "Enter Token";
                text: root.data.token;
                input-type: InputType.password;
                edited(text) => {
                    root.data.token = text;
                }
            }
        }

        // if root.data.auth-type == AuthenticationType.CredentialsFile:
        Row {
            Text {
                vertical-alignment: TextVerticalAlignment.center;
                text: "Credentials Path:";
            }

            Button {
                text: "Browse...";
                clicked => {
                }
            }

            LineEdit {
                placeholder-text: "Path to credentials file";
                text: root.data.credentials_path;
                edited(text) => {
                    root.data.credentials_path = text;
                }
            }
        }
    }
}

[barafael]

I've solved it for now using the enabled property of the line edit and button widgets, but it's not optimal - the user needs to understand why their widgets are disabled/enabled.

import { VerticalBox, Button, LineEdit, SpinBox, ComboBox } from "std-widgets.slint";

enum AuthenticationType {
    UserPassword,
    Token,
    CredentialsFile
}

struct Data {
    url: string,
    auth_type: AuthenticationType,
    username: string,
    password: string,
    token: string,
    credentials_path: string,
}

export component FormTab inherits VerticalBox {
    in-out property <Data> data;
    padding: 20px;
    Text {
        text: "THING Settings";
        font-weight: 700;
    }

    GridLayout {
        spacing-horizontal: 10px;
        spacing-vertical: 8px;
        Row {
            Text {
                text: "URL:";
                vertical-alignment: TextVerticalAlignment.center;
            }

            LineEdit {
                colspan: 2;
                placeholder-text: "Enter URL";
                text: root.data.url;
                edited(text) => {
                    root.data.url = text;
                }
            }
        }

        Row {
            Text {
                vertical-alignment: TextVerticalAlignment.center;
                text: "Authentication:";
            }

            ComboBox {
                colspan: 2;
                model: ["User/Password", "Token", "Credentials File"];
                selected(value) => {
                    if (value == "User/Password") {
                        root.data.auth-type = AuthenticationType.UserPassword;
                    } else if (value == "Token") {
                        root.data.auth-type = AuthenticationType.Token;
                    } else {
                        root.data.auth-type = AuthenticationType.CredentialsFile;
                    }
                }
            }
        }

        Row {
            Text {
                vertical-alignment: TextVerticalAlignment.center;
                text: "Username:";
            }

            LineEdit {
                colspan: 2;
                enabled: root.data.auth-type == AuthenticationType.UserPassword;
                placeholder-text: "Enter username";
                text: root.data.username;
                edited(text) => {
                    root.data.username = text;
                }
            }
        }
        Row {
            Text {
                vertical-alignment: TextVerticalAlignment.center;
                text: "Password:";
            }

            LineEdit {
                colspan: 2;
                enabled: root.data.auth-type == AuthenticationType.UserPassword;
                placeholder-text: "Enter password";
                text: root.data.password;
                input-type: InputType.password;
                edited(text) => {
                    root.data.password = text;
                }
            }
        }

        Row {
            Text {
                vertical-alignment: TextVerticalAlignment.center;
                text: "Token:";
            }

            LineEdit {
                colspan: 2;
                enabled: root.data.auth-type == AuthenticationType.Token;
                placeholder-text: "Enter Token";
                text: root.data.token;
                input-type: InputType.password;
                edited(text) => {
                    root.data.token = text;
                }
            }
        }

        Row {
            Text {
                vertical-alignment: TextVerticalAlignment.center;
                text: "Credentials Path:";
            }

            Button {
                text: "Browse...";
                enabled: root.data.auth-type == AuthenticationType.CredentialsFile;
                clicked => {
                }
            }

            LineEdit {
                placeholder-text: "Path to credentials file";
                enabled: root.data.auth-type == AuthenticationType.CredentialsFile;
                text: root.data.credentials_path;
                edited(text) => {
                    root.data.credentials_path = text;
                }
            }
        }
    }
}

[hunger]

The GridLayout does not let you use if yet :-/

You could use a VerticalLayout containing HorizontalLayouts: That way you can use if root.auth_type == Whatever: HorizontalLayout { ... }

You will then need to place the elments in the HorizontalLayout absolutely on the x axis then, which is not nice:-/

[barafael]

Thanks :) disabling the fields is good enough and I'm ok with it for now