AuthPage Login form validation

Hi how can i custom password form validation using AuthPage component ?

4 Replies

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: ----------------------

adverse-sapphireOP•3mo ago

How can i swizzling ? @kapa.ai How can i swizzling ? @kapa.ai

kapa.ai•3mo 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•3mo ago

<@519974783249547294> kapa.ai is still learning and improving, please let us know how it did by reacting below