@refinedev/antd 5.0.0

package/src/components/pageHeader/index.tsx

@@ -0,0 +1,52 @@
+import React, { FC } from "react";
+import {
+    PageHeader as AntdPageHeader,
+    PageHeaderProps as AntdPageHeaderProps,
+} from "@ant-design/pro-layout";
+import { Button, Typography } from "antd";
+import { ArrowLeftOutlined } from "@ant-design/icons";
+
+export type PageHeaderProps = AntdPageHeaderProps;
+
+export const PageHeader: FC<AntdPageHeaderProps> = ({ children, ...props }) => {
+    const backIcon =
+        typeof props.backIcon === "undefined" ? (
+            <Button type="text" icon={<ArrowLeftOutlined />} />
+        ) : (
+            props.backIcon
+        );
+
+    const title =
+        typeof props.title === "string" ? (
+            <Typography.Title level={4} style={{ marginBottom: 0 }}>
+                {props.title}
+            </Typography.Title>
+        ) : (
+            props.title
+        );
+
+    const subtitle =
+        typeof props.title === "string" ? (
+            <Typography.Title
+                level={5}
+                type="secondary"
+                style={{ marginBottom: 0 }}
+            >
+                {props.subTitle}
+            </Typography.Title>
+        ) : (
+            props.subTitle
+        );
+
+    return (
+        <AntdPageHeader
+            {...props}
+            backIcon={backIcon}
+            title={title}
+            subTitle={subtitle}
+            style={{ padding: 0, ...props.style }}
+        >
+            {children}
+        </AntdPageHeader>
+    );
+};

package/src/components/pages/auth/components/forgotPassword/index.tsx

@@ -0,0 +1,167 @@
+import React from "react";
+import {
+    ForgotPasswordPageProps,
+    ForgotPasswordFormTypes,
+    useRouterType,
+    useLink,
+} from "@refinedev/core";
+import {
+    Row,
+    Col,
+    Layout,
+    Card,
+    Typography,
+    Form,
+    Input,
+    Button,
+    LayoutProps,
+    CardProps,
+    FormProps,
+} from "antd";
+import {
+    useTranslate,
+    useRouterContext,
+    useForgotPassword,
+} from "@refinedev/core";
+
+import { layoutStyles, containerStyles, titleStyles } from "../styles";
+
+type ResetPassworProps = ForgotPasswordPageProps<
+    LayoutProps,
+    CardProps,
+    FormProps
+>;
+
+const { Text, Title } = Typography;
+
+/**
+ * **refine** has forgot password page form which is served on `/forgot-password` route when the `authProvider` configuration is provided.
+ *
+ * @see {@link https://refine.dev/docs/ui-frameworks/antd/components/antd-auth-page/#forgot-password} for more details.
+ */
+export const ForgotPasswordPage: React.FC<ResetPassworProps> = ({
+    loginLink,
+    wrapperProps,
+    contentProps,
+    renderContent,
+    formProps,
+}) => {
+    const [form] = Form.useForm<ForgotPasswordFormTypes>();
+    const translate = useTranslate();
+    const routerType = useRouterType();
+    const Link = useLink();
+    const { Link: LegacyLink } = useRouterContext();
+
+    const ActiveLink = routerType === "legacy" ? LegacyLink : Link;
+
+    const { mutate: forgotPassword, isLoading } =
+        useForgotPassword<ForgotPasswordFormTypes>();
+
+    const CardTitle = (
+        <Title level={3} style={titleStyles}>
+            {translate("pages.forgotPassword.title", "Forgot your password?")}
+        </Title>
+    );
+    const CardContent = (
+        <Card
+            title={CardTitle}
+            headStyle={{ borderBottom: 0 }}
+            style={containerStyles}
+            {...(contentProps ?? {})}
+        >
+            <Form<ForgotPasswordFormTypes>
+                layout="vertical"
+                form={form}
+                onFinish={(values) => forgotPassword(values)}
+                requiredMark={false}
+                {...formProps}
+            >
+                <Form.Item
+                    name="email"
+                    label={translate(
+                        "pages.forgotPassword.fields.email",
+                        "Email",
+                    )}
+                    rules={[
+                        { required: true },
+                        {
+                            type: "email",
+                            message: translate(
+                                "pages.forgotPassword.errors.validEmail",
+                                "Invalid email address",
+                            ),
+                        },
+                    ]}
+                >
+                    <Input
+                        type="email"
+                        size="large"
+                        placeholder={translate(
+                            "pages.forgotPassword.fields.email",
+                            "Email",
+                        )}
+                    />
+                </Form.Item>
+                <div
+                    style={{
+                        display: "flex",
+                        justifyContent: "space-between",
+                        marginBottom: "12px",
+                    }}
+                >
+                    {loginLink ?? (
+                        <Text
+                            style={{
+                                fontSize: 12,
+                                marginLeft: "auto",
+                            }}
+                        >
+                            {translate(
+                                "pages.register.buttons.haveAccount",
+                                "Have an account? ",
+                            )}{" "}
+                            <ActiveLink
+                                style={{
+                                    fontWeight: "bold",
+                                }}
+                                to="/login"
+                            >
+                                {translate("pages.login.signin", "Sign in")}
+                            </ActiveLink>
+                        </Text>
+                    )}
+                </div>
+                <Form.Item>
+                    <Button
+                        type="primary"
+                        size="large"
+                        htmlType="submit"
+                        loading={isLoading}
+                        block
+                    >
+                        {translate(
+                            "pages.forgotPassword.buttons.submit",
+                            "Send reset instructions",
+                        )}
+                    </Button>
+                </Form.Item>
+            </Form>
+        </Card>
+    );
+
+    return (
+        <Layout style={layoutStyles} {...(wrapperProps ?? {})}>
+            <Row
+                justify="center"
+                align="middle"
+                style={{
+                    height: "100vh",
+                }}
+            >
+                <Col xs={22}>
+                    {renderContent ? renderContent(CardContent) : CardContent}
+                </Col>
+            </Row>
+        </Layout>
+    );
+};

package/src/components/pages/auth/components/index.tsx

@@ -0,0 +1,4 @@
+export { LoginPage } from "./login";
+export { RegisterPage } from "./register";
+export { ForgotPasswordPage } from "./forgotPassword";
+export { UpdatePasswordPage } from "./updatePassword";

package/src/components/pages/auth/components/login/index.tsx

@@ -0,0 +1,239 @@
+import React from "react";
+import {
+    LoginPageProps,
+    LoginFormTypes,
+    useLink,
+    useRouterType,
+    useActiveAuthProvider,
+} from "@refinedev/core";
+import {
+    Row,
+    Col,
+    Layout,
+    Card,
+    Typography,
+    Form,
+    Input,
+    Button,
+    Checkbox,
+    CardProps,
+    LayoutProps,
+    Divider,
+    FormProps,
+} from "antd";
+import { useLogin, useTranslate, useRouterContext } from "@refinedev/core";
+
+import { layoutStyles, containerStyles, titleStyles } from "../styles";
+
+const { Text, Title } = Typography;
+
+type LoginProps = LoginPageProps<LayoutProps, CardProps, FormProps>;
+
+/**
+ * **refine** has a default login page form which is served on `/login` route when the `authProvider` configuration is provided.
+ *
+ * @see {@link https://refine.dev/docs/ui-frameworks/antd/components/antd-auth-page/#login} for more details.
+ */
+export const LoginPage: React.FC<LoginProps> = ({
+    providers,
+    registerLink,
+    forgotPasswordLink,
+    rememberMe,
+    contentProps,
+    wrapperProps,
+    renderContent,
+    formProps,
+}) => {
+    const [form] = Form.useForm<LoginFormTypes>();
+    const translate = useTranslate();
+    const routerType = useRouterType();
+    const Link = useLink();
+    const { Link: LegacyLink } = useRouterContext();
+
+    const ActiveLink = routerType === "legacy" ? LegacyLink : Link;
+
+    const authProvider = useActiveAuthProvider();
+    const { mutate: login, isLoading } = useLogin<LoginFormTypes>({
+        v3LegacyAuthProviderCompatible: Boolean(authProvider?.isLegacy),
+    });
+
+    const CardTitle = (
+        <Title level={3} style={titleStyles}>
+            {translate("pages.login.title", "Sign in to your account")}
+        </Title>
+    );
+
+    const renderProviders = () => {
+        if (providers && providers.length > 0) {
+            return (
+                <>
+                    {providers.map((provider) => {
+                        return (
+                            <Button
+                                key={provider.name}
+                                type="default"
+                                block
+                                icon={provider.icon}
+                                style={{
+                                    display: "flex",
+                                    justifyContent: "center",
+                                    alignItems: "center",
+                                    width: "100%",
+                                    marginBottom: "8px",
+                                }}
+                                onClick={() =>
+                                    login({
+                                        providerName: provider.name,
+                                    })
+                                }
+                            >
+                                {provider.label}
+                            </Button>
+                        );
+                    })}
+                    <Divider>{translate("pages.login.divider", "or")}</Divider>
+                </>
+            );
+        }
+        return null;
+    };
+
+    const CardContent = (
+        <Card
+            title={CardTitle}
+            headStyle={{ borderBottom: 0 }}
+            style={containerStyles}
+            {...(contentProps ?? {})}
+        >
+            {renderProviders()}
+            <Form<LoginFormTypes>
+                layout="vertical"
+                form={form}
+                onFinish={(values) => login(values)}
+                requiredMark={false}
+                initialValues={{
+                    remember: false,
+                }}
+                {...formProps}
+            >
+                <Form.Item
+                    name="email"
+                    label={translate("pages.login.fields.email", "Email")}
+                    rules={[
+                        { required: true },
+                        {
+                            type: "email",
+                            message: translate(
+                                "pages.login.errors.validEmail",
+                                "Invalid email address",
+                            ),
+                        },
+                    ]}
+                >
+                    <Input
+                        size="large"
+                        placeholder={translate(
+                            "pages.login.fields.email",
+                            "Email",
+                        )}
+                    />
+                </Form.Item>
+                <Form.Item
+                    name="password"
+                    label={translate("pages.login.fields.password", "Password")}
+                    rules={[{ required: true }]}
+                    style={{ marginBottom: "12px" }}
+                >
+                    <Input
+                        type="password"
+                        placeholder="●●●●●●●●"
+                        size="large"
+                    />
+                </Form.Item>
+                <div
+                    style={{
+                        display: "flex",
+                        justifyContent: "space-between",
+                        marginBottom: "12px",
+                    }}
+                >
+                    {rememberMe ?? (
+                        <Form.Item
+                            name="remember"
+                            valuePropName="checked"
+                            noStyle
+                        >
+                            <Checkbox
+                                style={{
+                                    fontSize: "12px",
+                                }}
+                            >
+                                {translate(
+                                    "pages.login.buttons.rememberMe",
+                                    "Remember me",
+                                )}
+                            </Checkbox>
+                        </Form.Item>
+                    )}
+                    {forgotPasswordLink ?? (
+                        <ActiveLink
+                            style={{
+                                fontSize: "12px",
+                                marginLeft: "auto",
+                            }}
+                            to="/forgot-password"
+                        >
+                            {translate(
+                                "pages.login.buttons.forgotPassword",
+                                "Forgot password?",
+                            )}
+                        </ActiveLink>
+                    )}
+                </div>
+                <Form.Item>
+                    <Button
+                        type="primary"
+                        size="large"
+                        htmlType="submit"
+                        loading={isLoading}
+                        block
+                    >
+                        {translate("pages.login.signin", "Sign in")}
+                    </Button>
+                </Form.Item>
+            </Form>
+            <div style={{ marginTop: 8 }}>
+                {registerLink ?? (
+                    <Text style={{ fontSize: 12 }}>
+                        {translate(
+                            "pages.login.buttons.noAccount",
+                            "Don’t have an account?",
+                        )}{" "}
+                        <ActiveLink
+                            to="/register"
+                            style={{ fontWeight: "bold" }}
+                        >
+                            {translate("pages.login.signup", "Sign up")}
+                        </ActiveLink>
+                    </Text>
+                )}
+            </div>
+        </Card>
+    );
+
+    return (
+        <Layout style={layoutStyles} {...(wrapperProps ?? {})}>
+            <Row
+                justify="center"
+                align="middle"
+                style={{
+                    height: "100vh",
+                }}
+            >
+                <Col xs={22}>
+                    {renderContent ? renderContent(CardContent) : CardContent}
+                </Col>
+            </Row>
+        </Layout>
+    );
+};

package/src/components/pages/auth/components/register/index.tsx

@@ -0,0 +1,210 @@
+import React from "react";
+import {
+    RegisterPageProps,
+    RegisterFormTypes,
+    useRouterType,
+    useLink,
+    useActiveAuthProvider,
+} from "@refinedev/core";
+import {
+    Row,
+    Col,
+    Layout,
+    Card,
+    Typography,
+    Form,
+    Input,
+    Button,
+    LayoutProps,
+    CardProps,
+    FormProps,
+    Divider,
+} from "antd";
+import { useTranslate, useRouterContext, useRegister } from "@refinedev/core";
+
+import { layoutStyles, containerStyles, titleStyles } from "../styles";
+
+const { Text, Title } = Typography;
+
+type RegisterProps = RegisterPageProps<LayoutProps, CardProps, FormProps>;
+
+/**
+ * **refine** has register page form which is served on `/register` route when the `authProvider` configuration is provided.
+ *
+ * @see {@link https://refine.dev/docs/ui-frameworks/antd/components/antd-auth-page/#register} for more details.
+ */
+export const RegisterPage: React.FC<RegisterProps> = ({
+    providers,
+    loginLink,
+    wrapperProps,
+    contentProps,
+    renderContent,
+    formProps,
+}) => {
+    const [form] = Form.useForm<RegisterFormTypes>();
+    const translate = useTranslate();
+    const routerType = useRouterType();
+    const Link = useLink();
+    const { Link: LegacyLink } = useRouterContext();
+
+    const ActiveLink = routerType === "legacy" ? LegacyLink : Link;
+
+    const authProvider = useActiveAuthProvider();
+    const { mutate: register, isLoading } = useRegister<RegisterFormTypes>({
+        v3LegacyAuthProviderCompatible: Boolean(authProvider?.isLegacy),
+    });
+
+    const CardTitle = (
+        <Title level={3} style={titleStyles}>
+            {translate("pages.register.title", "Sign up for your account")}
+        </Title>
+    );
+
+    const renderProviders = () => {
+        if (providers && providers.length > 0) {
+            return (
+                <>
+                    {providers.map((provider) => {
+                        return (
+                            <Button
+                                key={provider.name}
+                                type="ghost"
+                                block
+                                icon={provider.icon}
+                                style={{
+                                    display: "flex",
+                                    justifyContent: "center",
+                                    alignItems: "center",
+                                    width: "100%",
+                                    marginBottom: "8px",
+                                }}
+                                onClick={() =>
+                                    register({
+                                        providerName: provider.name,
+                                    })
+                                }
+                            >
+                                {provider.label}
+                            </Button>
+                        );
+                    })}
+                    <Divider>{translate("pages.login.divider", "or")}</Divider>
+                </>
+            );
+        }
+        return null;
+    };
+
+    const CardContent = (
+        <Card
+            title={CardTitle}
+            headStyle={{ borderBottom: 0 }}
+            style={containerStyles}
+            {...(contentProps ?? {})}
+        >
+            {renderProviders()}
+            <Form<RegisterFormTypes>
+                layout="vertical"
+                form={form}
+                onFinish={(values) => register(values)}
+                requiredMark={false}
+                {...formProps}
+            >
+                <Form.Item
+                    name="email"
+                    label={translate("pages.register.email", "Email")}
+                    rules={[
+                        { required: true },
+                        {
+                            type: "email",
+                            message: translate(
+                                "pages.register.errors.validEmail",
+                                "Invalid email address",
+                            ),
+                        },
+                    ]}
+                >
+                    <Input
+                        size="large"
+                        placeholder={translate(
+                            "pages.register.fields.email",
+                            "Email",
+                        )}
+                    />
+                </Form.Item>
+                <Form.Item
+                    name="password"
+                    label={translate(
+                        "pages.register.fields.password",
+                        "Password",
+                    )}
+                    rules={[{ required: true }]}
+                    style={{ marginBottom: "12px" }}
+                >
+                    <Input
+                        type="password"
+                        placeholder="●●●●●●●●"
+                        size="large"
+                    />
+                </Form.Item>
+                <div
+                    style={{
+                        display: "flex",
+                        justifyContent: "space-between",
+                        marginBottom: "12px",
+                    }}
+                >
+                    {loginLink ?? (
+                        <Text
+                            style={{
+                                fontSize: 12,
+                                marginLeft: "auto",
+                            }}
+                        >
+                            {translate(
+                                "pages.login.buttons.haveAccount",
+                                "Have an account?",
+                            )}{" "}
+                            <ActiveLink
+                                style={{
+                                    fontWeight: "bold",
+                                }}
+                                to="/login"
+                            >
+                                {translate("pages.login.signin", "Sign in")}
+                            </ActiveLink>
+                        </Text>
+                    )}
+                </div>
+
+                <Form.Item>
+                    <Button
+                        type="primary"
+                        size="large"
+                        htmlType="submit"
+                        loading={isLoading}
+                        block
+                    >
+                        {translate("pages.register.buttons.submit", "Sign up")}
+                    </Button>
+                </Form.Item>
+            </Form>
+        </Card>
+    );
+
+    return (
+        <Layout style={layoutStyles} {...(wrapperProps ?? {})}>
+            <Row
+                justify="center"
+                align="middle"
+                style={{
+                    height: "100vh",
+                }}
+            >
+                <Col xs={22}>
+                    {renderContent ? renderContent(CardContent) : CardContent}
+                </Col>
+            </Row>
+        </Layout>
+    );
+};

package/src/components/pages/auth/components/styles.ts

@@ -0,0 +1,23 @@
+import { CSSProperties } from "react";
+
+export const layoutStyles: CSSProperties = {
+    background: `radial-gradient(50% 50% at 50% 50%, #6813CB 0%, #2A2A42 100%)`,
+    backgroundSize: "cover",
+};
+
+export const containerStyles: CSSProperties = {
+    maxWidth: "408px",
+    margin: "auto",
+};
+
+export const titleStyles: CSSProperties = {
+    textAlign: "center",
+    color: "#626262",
+    marginBottom: 0,
+    fontSize: "24px",
+    letterSpacing: "-0.04em",
+    overflowWrap: "break-word",
+    hyphens: "manual",
+    textOverflow: "unset",
+    whiteSpace: "pre-wrap",
+};