wise-white
wise-white15mo ago

Define customized Logo on default Loginpage

Hi, how can i set a logo on default Loginpage. (I am using refine V4)
No description
8 Replies
kapa.ai
kapa.ai15mo ago
Hey @eliot0801! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave: ---------------------- To set a custom logo on the default login page in refine, you can create a custom login page and use the LoginPage property in the <Refine> component. Here's how you can do it: 1. Create a custom login page component (e.g., CustomLoginPage.tsx) with your logo and the login form:
import React from "react";
import { useLogin } from "@refinedev/core";
import { Form, Input, Button } from "antd";

type LoginVariables = {
username: string;
password: string;
};

export const CustomLoginPage = () => {
const { mutate: login } = useLogin<LoginVariables>();

const onSubmit = (values: LoginVariables) => {
login(values);
};

return (
<div>
<img src="your-logo-url" alt="Your Logo" />
<Form onFinish={onSubmit}>
<Form.Item
name="username"
rules={[{ required: true, message: "Please input your username!" }]}
>
<Input placeholder="Username" />
</Form.Item>
<Form.Item
name="password"
rules={[{ required: true, message: "Please input your password!" }]}
>
<Input.Password placeholder="Password" />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
Log in
</Button>
</Form.Item>
</Form>
</div>
);
};
import React from "react";
import { useLogin } from "@refinedev/core";
import { Form, Input, Button } from "antd";

type LoginVariables = {
username: string;
password: string;
};

export const CustomLoginPage = () => {
const { mutate: login } = useLogin<LoginVariables>();

const onSubmit = (values: LoginVariables) => {
login(values);
};

return (
<div>
<img src="your-logo-url" alt="Your Logo" />
<Form onFinish={onSubmit}>
<Form.Item
name="username"
rules={[{ required: true, message: "Please input your username!" }]}
>
<Input placeholder="Username" />
</Form.Item>
<Form.Item
name="password"
rules={[{ required: true, message: "Please input your password!" }]}
>
<Input.Password placeholder="Password" />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
Log in
</Button>
</Form.Item>
</Form>
</div>
);
};
2. Import the CustomLoginPage component in your App.tsx file and set it as the LoginPage property in the <Refine> component:
import { CustomLoginPage } from "./CustomLoginPage";

const App: React.FC = () => (
<Refine
// ...
LoginPage={CustomLoginPage}
/>
);
import { CustomLoginPage } from "./CustomLoginPage";

const App: React.FC = () => (
<Refine
// ...
LoginPage={CustomLoginPage}
/>
);
Please note that the LoginPage property is deprecated in the new routing system, and you should create a route for the login page instead. However, since you mentioned you're using refine V4, the above solution should work for you. For more information on customizing the login page, you can refer to the Custom Login Page example (https://refine.dev/docs/examples/customization/customLogin). ----------------------
kapa.ai
kapa.ai15mo ago
<@244579825140891648> kapa.ai is still learning and improving, please let us how it did by reacting below
wise-white
wise-white15mo ago
Now the Loginform got eliminated :/
No description
Omer
Omer15mo ago
Please carefully review the document and our example. I think you forgot to render {content}. https://github.com/refinedev/refine/blob/next/examples/finefoods-mui/src/pages/auth/index.tsx#L27
grumpy-cyan
grumpy-cyan15mo ago
is there any way you can put the logo inside of the content box? So that the logo is not outside of this container:
No description
Omer
Omer15mo ago
Hey, Please wait for someone to help you instead of creating new posts for the same topics. Remember that the Refine Core team is providing you with free community support. We hope that you will pay attention to this so that we can manage this community support in a healthy and organized way. ❤️ Regarding your question, you can place the logo where you indicated by swizzling the AuthPage component. https://refine.dev/docs/packages/documentation/cli/#swizzle
CLI | refine
refine CLI is a command line application that allows you to interact with your refine project and perform some tasks. This includes creating a new resource, managing updates, swizzle components, and runs your project (build, start, dev).
wise-white
wise-white15mo ago
Hey Ömer, yeah you are totally right. Thx you for your Support 🙂