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
<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
3 Replies
Hi @bellix5959. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
It seems you're trying to customize the password input field in the
<AuthPage> component from refine's Ant Design integration to show/hide the password with an icon.
The issue you're experiencing is because the <AuthPage> component has its own predefined form structure. When you're trying to add your custom <Input.Password> component inside the <AuthPage>, it's not being applied because the component already has its own internal form implementation.
Instead of trying to add form items directly inside the <AuthPage> component, you should use the formProps property to customize the form fields. However, for more extensive customization like changing the password input behavior, you would need to create your own custom authentication page.
Here are your options:
1. Swizzle the component: Refine allows you to customize built-in components through swizzling with the Refine CLI. This is mentioned in the documentation:
Ant Design Auth Page notes: "You can swizzle this component to customize it with the Refine CLI"
2. Create a custom auth page: Instead of using the built-in <AuthPage>, you can create your own authentication page component with your desired styling and functionality.
The reason your <Input.Password> works outside of <AuthPage> but not inside is because when you place it inside the <AuthPage> component, it's not actually being used - the component has its own internal form structure that takes precedence.
If you need to fully customize the authentication form, I recommend creating your own authentication page component that uses Refine's authentication hooks but with your own UI components and layout.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@804049447972634706> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
puzzled-coralOP•2w ago
so, u suggest to use the authentication form withoutnusing authpage tag ?