Update _RenderFormInput.tsx featue Ehancement #67
Conversation
implementation of Show password functionality on the auth page
|
|
| case "url": | ||
| case "color": | ||
| return <FormInput type={type} {...formProps} />; | ||
| case "password": | ||
| return ( |
There was a problem hiding this comment.
Can we move this to a new component, FormPasswordInput
| ...formProps.input, | ||
| onChange: (val) => { | ||
| formProps.input.onChange(val); | ||
| if (!formProps.input.value) isPasswordReveal.off(); |
There was a problem hiding this comment.
The switch should be intentional not hooked to the onChange handler
| action: () => { | ||
| isPasswordReveal.toggle(); | ||
| }, | ||
| label: msg`show Password`, |
There was a problem hiding this comment.
| label: msg`show Password`, | |
| label: msg`Show Password`, |
| formProps.input.value | ||
| ? [ | ||
| { | ||
| systemIcon: "Eye", |
There was a problem hiding this comment.
Add this
EyeOff: `<path d="M17.94 17.94A9.995 9.995 0 0112.009 20H12c-7 0-11-8-11-8a18.605 18.605 0 015.017-5.908l.043-.032M9.9 4.24A8.865 8.865 0 0111.979 4h.023-.001c7 0 11 8 11 8a18.62 18.62 0 01-2.182 3.217l.022-.027m-6.721-1.07a3 3 0 11-4.242-4.238l.002-.002M1 1l22 22" />`,
to src/shared/constants/Icons.tsx so that we have a EyeOff icon
| type={isPasswordReveal.isOn ? "text" : "password"} | ||
| {...formProps} | ||
| rightActions={ | ||
| formProps.input.value |
There was a problem hiding this comment.
As mentioned above the logic of the rightAction always be present and should be based on the isPasswordReveal.isOn so we should be having something like
rightActions: [showPassword.isOn ? {
systemIcon: 'EyeOff',
action: showPassword.toggle,
label: msg`Hide Password`,
}: {
systemIcon: 'Eye',
action: showPassword.toggle,
label: msg`Show Password`,
}]
re-design of the Update _RenderFormInput.tsx
| case "url": | ||
| case "color": | ||
| return <FormInput type={type} {...formProps} />; | ||
| case "number": | ||
| return <FormNumberInput {...formProps} />; | ||
|
|
||
| case "password": | ||
| return ( |
There was a problem hiding this comment.
Can you move all the logic here to the new password component
Like here it should just be
return <FormPasswordInput {...formProps} />;
everything else should be in the component
| import { Input } from "./Styles"; | ||
|
|
||
| interface IFormInput extends ISharedFormInput { | ||
| type?: "password" | "text"; |
There was a problem hiding this comment.
This is not needed, you can just pass ISharedFormInput as the component props
implementation of Show password functionality
on the auth page
Pull Request type
Please check the type of change your PR introduces:
What is the current behavior?
the current behavoir of the password field of the input field does not have the functionality that enables the user to see the password in plain text
i implemented the function that enables the user to show password in plain text
I
What is the new behavior?
Does this introduce a breaking change?
Other information