AuthPage Login form validation

Hi how can i custom password form validation using AuthPage component ?
4 Replies
kapa.ai
kapa.ai2w ago
Hi @Léo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To customize the password form validation using the <AuthPage> component in refine, you can utilize the formProps to pass custom validation logic to the form component. Below is an example of how you can achieve this: 1. Define Custom Validation Logic: You can define your custom validation logic within the onSubmit function passed to formProps. 2. Use formProps in <AuthPage>: Pass the custom validation logic through formProps to the <AuthPage> component. Here is an example code snippet demonstrating how to customize the password form validation:
import React from "react";
import { AuthPage } from "@refinedev/ant-design";

const MyLoginPage = () => {
return (
<AuthPage
type="login"
formProps={{
onSubmit: (e) => {
e.preventDefault();

const email = e.target.email.value;
const password = e.target.password.value;

// Custom validation logic
if (password.length < 8) {
alert("Password must be at least 8 characters long.");
return;
}

alert(
JSON.stringify({
email,
password,
}),
);
},
}}
/>
);
};

export default MyLoginPage;
import React from "react";
import { AuthPage } from "@refinedev/ant-design";

const MyLoginPage = () => {
return (
<AuthPage
type="login"
formProps={{
onSubmit: (e) => {
e.preventDefault();

const email = e.target.email.value;
const password = e.target.password.value;

// Custom validation logic
if (password.length < 8) {
alert("Password must be at least 8 characters long.");
return;
}

alert(
JSON.stringify({
email,
password,
}),
);
},
}}
/>
);
};

export default MyLoginPage;
In this example, the custom validation logic checks if the password is at least 8 characters long. If the validation fails, an alert is shown, and the form submission is halted. For more details on how to use formProps with the <AuthPage> component, you can refer to the official documentation (https://refine.dev/docs/authentication/components/auth-page/#formprops). If you need to further customize the form fields or layout, you might consider swizzling the <AuthPage> component. Swizzling allows you to customize the component according to your needs. You can learn more about swizzling in the Refine CLI documentation (https://refine.dev/docs/packages/documentation/cli/#swizzle). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
correct-apricot
correct-apricot2w ago
How can i swizzling ? @kapa.ai How can i swizzling ? @kapa.ai
kapa.ai
kapa.ai2w ago
Let me check the knowledge base for you. One moment! :books: ---------------------- To swizzle the <AuthPage> component in refine, you can use the refine CLI. Swizzling allows you to export the component's source code to your project, enabling you to customize it as needed. Here are the steps to swizzle the <AuthPage> component: 1. Run the Swizzle Command: Open your terminal and run the following command to start the swizzling process.
npm run refine swizzle

npm run refine swizzle

2. Select the Package: You will be prompted to select the package you want to swizzle. Use the arrow keys to navigate and select the appropriate UI framework package. For example, if you are using Ant Design, select @refinedev/antd.
? Which package do you want to swizzle? (Use arrow keys or type to search)
Data Provider
@refinedev/simple-rest
UI Framework
@refinedev/antd

? Which package do you want to swizzle? (Use arrow keys or type to search)
Data Provider
@refinedev/simple-rest
UI Framework
@refinedev/antd

3. Select the Component: Next, you will be prompted to select the component you want to swizzle. Navigate to and select AuthPage.
? Which component do you want to swizzle?
Buttons
CreateButton
ShowButton
❯◉ EditButton
Pages
ErrorPage
AuthPage

? Which component do you want to swizzle?
Buttons
CreateButton
ShowButton
❯◉ EditButton
Pages
ErrorPage
AuthPage

4. Customize the Component: After selecting the component, the source code for the <AuthPage> component will be copied to your project's src directory. You can now customize the component as needed. Here is an example of what the swizzle command process might look like:
> npm run refine swizzle

? Which package do you want to swizzle? (Use arrow keys or type to search)

Data Provider
@refinedev/simple-rest
UI Framework
@refinedev/antd

? Which component do you want to swizzle?

TagField
TextField
UrlField
Other
Breadcrumb
❯◉ AuthPage
Pages
ErrorPage
(Move up and down to reveal more choices)
> npm run refine swizzle

? Which package do you want to swizzle? (Use arrow keys or type to search)

Data Provider
@refinedev/simple-rest
UI Framework
@refinedev/antd

? Which component do you want to swizzle?

TagField
TextField
UrlField
Other
Breadcrumb
❯◉ AuthPage
Pages
ErrorPage
(Move up and down to reveal more choices)
For more detailed information on using the swizzle command, you can refer to the CLI documentation (https://refine.dev/docs/packages/list-of-packages/#swizzle). By following these steps, you will be able to swizzle the <AuthPage> component and customize it according to your specific requirements. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai2w ago
<@519974783249547294> kapa.ai is still learning and improving, please let us know how it did by reacting below