I can't show the Hide/Show icon in input.password form inside authPage tag
used refine antd for authpage, and i wanna show the icon of show/hide password
<Input.Password
placeholder="Password"
iconRender={(visible) => (visible ? <EyeOutlined /> : <EyeInvisibleOutlined />)}
/>
this this a part code for login page:
<AuthPage
type="login"
title={false}
.....
<Form.Item
name="email"
rules={[
{ type: 'email', message: 'The input is not valid E-mail!' },
{ required: true, message: 'Please input your E-mail!' },
]}
>
<Input
placeholder="Email"
className="w-full p-3 border rounded-lg bg-gray-100 dark:bg-gray-700 dark:text-white focus:ring-2 focus:ring-blue-500"
/>
</Form.Item>
<Form.Item
name="password"
rules={[{ required: true, message: 'Please input your password!' }]}
>
<Input.Password
placeholder="Password"
iconRender={(visible) => (visible ? <EyeOutlined /> : <EyeInvisibleOutlined />)}
/>
</Form.Item>
<Form.Item>
<Button
type="primary"
htmlType="submit"
className="w-full bg-blue-600 hover:bg-blue-700 text-white p-3 rounded-lg transition-all"
>
Login
</Button>
</Form.Item>
{errorMessage && (
<div className="mt-4 text-red-500 text-center">{errorMessage}</div>
)}
</AuthPage>
but nothing is changed, is there a predifined prop in authpage for that ? and thanks
PS: i used the same Input.Password outside the authPage tag and it icon is displayed normal
#ant-design #refine-jobs
<Input.Password
placeholder="Password"
iconRender={(visible) => (visible ? <EyeOutlined /> : <EyeInvisibleOutlined />)}
/>
this this a part code for login page:
<AuthPage
type="login"
title={false}
.....
<Form.Item
name="email"
rules={[
{ type: 'email', message: 'The input is not valid E-mail!' },
{ required: true, message: 'Please input your E-mail!' },
]}
>
<Input
placeholder="Email"
className="w-full p-3 border rounded-lg bg-gray-100 dark:bg-gray-700 dark:text-white focus:ring-2 focus:ring-blue-500"
/>
</Form.Item>
<Form.Item
name="password"
rules={[{ required: true, message: 'Please input your password!' }]}
>
<Input.Password
placeholder="Password"
iconRender={(visible) => (visible ? <EyeOutlined /> : <EyeInvisibleOutlined />)}
/>
</Form.Item>
<Form.Item>
<Button
type="primary"
htmlType="submit"
className="w-full bg-blue-600 hover:bg-blue-700 text-white p-3 rounded-lg transition-all"
>
Login
</Button>
</Form.Item>
{errorMessage && (
<div className="mt-4 text-red-500 text-center">{errorMessage}</div>
)}
</AuthPage>
but nothing is changed, is there a predifined prop in authpage for that ? and thanks
PS: i used the same Input.Password outside the authPage tag and it icon is displayed normal
#ant-design #refine-jobs
