Fix inputs with show/hide password icon

[samaradel]

Description

• Remove password input wrapper
• Create a prepend inner icon for inputs with type password
• Fix show/hide icon selection when pressing tab
• Fix the order of dialog actions tabindex

Changes

Screencast from 26-06-24 17:10:30.webm

Related Issues

• https://github.com/threefoldtech/tfgrid-sdk-ts/issues/3016

Checklist

• [ ] Tests included
• [x] Build pass
• [ ] Documentation
• [x] Code format and docstrings
• [x] Screenshots/Video attached (needed for UI changes)

[MohamedElmdary]

@samaradel

PasswordInputWrapper component was created to avoid multiple define of showX variables. however this is not only the case but also to avoid defined v-slot:append-inner over and over. Also it's not only used in profile manager but also in multiple solution/apps for example k8s and it's currently broken.

I would suggest extend usePasswordInput hook to get a ref from password input itself then use that ref in onMounted to append tabindex="-1" attribute in icon which should fix the issue in the entire app without any breaks.

Also Currently if we click on input then tab it will popup to the manual > Login > input again > the manual > So on... won't focus any button which definitely not fixing this issue at all

[MohamedElmdary]