Implementing Password Show/Hide functionality

[n-srinidhi]

I'm trying to implement the password show/hide option available in most login forms. Since the icon attribute of a textbox isnt clickable, is there any built in functionality or a workaround to implement it?

ui.textbox(name='login_pass',placeholder='Password',password=True,required=True,width='250px',icon='View'),

[marek-mihok]

@n-srinidhi, there is no built-in functionality right now, but you can use an icon button next to the textfield to toggle the password visibility.

from h2o_wave import main, app, Q, ui

password_hidden = True


@app('/demo')
async def serve(q: Q):
    global password_hidden
    if not q.client.initialized:
        q.page['meta'] = ui.meta_card(
            box='',
            layouts=[
                ui.layout(
                    breakpoint='xs',
                    zones=[ui.zone(name='main', size='1')])]
        )
        q.page['login_form'] = ui.form_card(
            box='main',
            items=[
                ui.inline(
                    direction='column',
                    items=[
                        ui.text(content='Login', size='l', name='login_label'),
                        ui.textbox(name='login_id', placeholder='Enter Login ID', required=True, width='240px'),
                        ui.inline(
                            items=[
                                ui.textbox(name='login_pass', placeholder='Password', password=password_hidden,
                                           required=True, width='200px'),
                                ui.button(name='toggle_password', icon='RedEye')
                            ])
                    ],
                    align='center',
                    justify='center',
                    height='1'
                ),
            ]
        )
        q.client.initialized = True
    elif q.args.toggle_password:
        password_hidden = not password_hidden
        q.page['login_form'].login_pass.password = password_hidden
        q.page['login_form'].toggle_password.icon = 'RedEye' if password_hidden else 'Hide'
    await q.page.save()

Screen.Recording.2023-05-16.at.11.32.23.mov

However if you need a built-in functionality, feel free to open a new feature request. It should be doable since FluentUI's Textfield supports canRevealPassword prop which handles the functionality (including the show/hide icons) for you.

[n-srinidhi]

@marek-mihok Thank you!