useful-bronze•2y ago

How to dynamically change page titles and adapt login background design? (in v4)

Hello everyone, I cant find anything about that for the newest version online. Did anybody figure this out already? Login Page from Inferencer

42 Replies

kapa.ai•2y ago

Hey @l0zz1! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave:

kapa.ai•2y ago

---------------------- To dynamically change page titles in refine v4, you can use the <Title> component from @pankod/refine. Unfortunately, there is no specific example in the provided extracts for v4. However, you can refer to the refine documentation (https://refine.dev/docs) for more information. For adapting the login background design, you can customize the login page by overriding the default login page and applying your own styles. Here's an example from the extracts:

import { useLogin } from "@refinedev/core";  
import { Layout, Button, Row, Col } from "antd";  
import Icon from "@ant-design/icons";  
  
export const Login: React.FC = () => {  
 const { mutate: login, isLoading } = useLogin();  
  
 return (  
 <Layout  
 style={{  
 background: `radial-gradient(50% 50% at 50% 50%, #63386A 0%, #310438 100%)`,  
 backgroundSize: "cover",  
 }}  
 >  
 <Row  
 justify="center"  
 align="middle"  
 style={{  
 height: "100vh",  
 }}  
 >  
 <Col xs={22}>  
 <div  
 style={{  
 display: "flex",  
 alignItems: "center",  
 justifyContent: "center",  
 marginBottom: "28px",  
 }}  
 >  
 <img src="./refine.svg" alt="Refine" />  
 </div>  
 <div style={{ display: "flex", justifyContent: "center" }}>  
 <Button  
 type="primary"  
 size="large"  
 icon={  
 <Icon  
 component={() => (  
 <img  
 alt={"ethereum.png"}  
 src="./ethereum.png"  
 />  
 )}  
 />  
 }  
 loading={isLoading}  
 onClick={() => login({})}  
 >  
 SIGN-IN WITH ETHEREUM  
 </Button>  
 </div>  
 </Col>  
 </Row>  
 </Layout>  
 );  
};

import { useLogin } from "@refinedev/core";  
import { Layout, Button, Row, Col } from "antd";  
import Icon from "@ant-design/icons";  
  
export const Login: React.FC = () => {  
 const { mutate: login, isLoading } = useLogin();  
  
 return (  
 <Layout  
 style={{  
 background: `radial-gradient(50% 50% at 50% 50%, #63386A 0%, #310438 100%)`,  
 backgroundSize: "cover",  
 }}  
 >  
 <Row  
 justify="center"  
 align="middle"  
 style={{  
 height: "100vh",  
 }}  
 >  
 <Col xs={22}>  
 <div  
 style={{  
 display: "flex",  
 alignItems: "center",  
 justifyContent: "center",  
 marginBottom: "28px",  
 }}  
 >  
 <img src="./refine.svg" alt="Refine" />  
 </div>  
 <div style={{ display: "flex", justifyContent: "center" }}>  
 <Button  
 type="primary"  
 size="large"  
 icon={  
 <Icon  
 component={() => (  
 <img  
 alt={"ethereum.png"}  
 src="./ethereum.png"  
 />  
 )}  
 />  
 }  
 loading={isLoading}  
 onClick={() => login({})}  
 >  
 SIGN-IN WITH ETHEREUM  
 </Button>  
 </div>  
 </Col>  
 </Row>  
 </Layout>  
 );  
};

In this example, the login page background is customized using the style prop of the <Layout> component. You can modify the styles according to your design preferences. ----------------------

Overview | refine

What is refine?

kapa.ai•2y ago

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

useful-bronze•2y ago

The title worked. But do I really have to copy the login page? cant I use the old one, but change the radiant color?

fair-rose•2y ago

You need to swizzle AuthPage to customize https://refine.dev/docs/api-reference/mui/components/mui-auth-page/ Unfortunately you cant change radiant color with props.

useful-bronze•2y ago

npm run refine swizzle

npm run refine swizzle

fair-rose•2y ago

sorry wrong link https://refine.dev/docs/packages/documentation/cli/#swizzle bono im sorry you can customize AuthPage background like this

<AuthPage
    type="updatePassword"
    wrapperProps={{
        style: {
            background: "green",
        },
    }}
/>;

<AuthPage
    type="updatePassword"
    wrapperProps={{
        style: {
            background: "green",
        },
    }}
/>;

@l0zz1

useful-bronze•2y ago

😂 😂 😂 😂 😂 😂 dont be sorry man you are always sorry u r doing this in ur free time, helping me out you are great! Thanks man, I'll test it in a bit

fair-rose•2y ago

🙏🏻 thanks 😄

useful-bronze•2y ago

works! Is there also any way to disable register? And how do you create a forgot password screen?

fair-rose•2y ago

you can give registerLink={false}

useful-bronze•2y ago

worked! I've also seen that in the docs... but the one thing I cant find is how to connect the forgot-password page to our supabase database, so that it sends out a reset password email. Is there any predefined prop for AuthPage or something like that? Or do we need to swizzle to do such thing?

fair-rose•2y ago

what you mean when you say "connect" when forgot password page is submitted. its call authProvider's forgotPassword method

useful-bronze•2y ago

well, it is already connected to our database, the login works. But we never defined a route or a function that tells supabase to send out a recovery email oh, let me check it wasnt defined, but I defined it:

forgotPassword: async ({ email }) => {
    const { error } = await supabaseClient.auth.resetPasswordForEmail(
      email, { redirectTo: "http://localhost:3000/update-password" }
    );

    if (error) {
      return {
        success: false,
        error,
      };
    }

    return {
      success: true,
    };
  },
  updatePassword: async ({newPassword}) => {
    const { data, error } = await supabaseClient.auth.updateUser({password: newPassword,});

    if (error) {
      return {
        success: false,
        error,
      };
    }

    return {
      success: true,
    };
  }

forgotPassword: async ({ email }) => {
    const { error } = await supabaseClient.auth.resetPasswordForEmail(
      email, { redirectTo: "http://localhost:3000/update-password" }
    );

    if (error) {
      return {
        success: false,
        error,
      };
    }

    return {
      success: true,
    };
  },
  updatePassword: async ({newPassword}) => {
    const { data, error } = await supabaseClient.auth.updateUser({password: newPassword,});

    if (error) {
      return {
        success: false,
        error,
      };
    }

    return {
      success: true,
    };
  }

Everything is working, but the updatePassword isnt. The page is loading and there are no undefined errors or such, but the password isnt changed. AND also, there are no success notifications, not even on the resetPasswordEmail 😄

fair-rose•2y ago

hmm. i'm not familiar with this feature of supabase. i will debug and return you when is possible.