@refinedev/antd 5.0.0

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

@@ -0,0 +1,158 @@
+import React from "react";
+import {
+    UpdatePasswordPageProps,
+    UpdatePasswordFormTypes,
+    useActiveAuthProvider,
+} from "@refinedev/core";
+import {
+    Row,
+    Col,
+    Layout,
+    Card,
+    Typography,
+    Form,
+    Input,
+    Button,
+    LayoutProps,
+    CardProps,
+    FormProps,
+} from "antd";
+import { useTranslate, useUpdatePassword } from "@refinedev/core";
+
+import { layoutStyles, containerStyles, titleStyles } from "../styles";
+
+const { Title } = Typography;
+
+type UpdatePasswordProps = UpdatePasswordPageProps<
+    LayoutProps,
+    CardProps,
+    FormProps
+>;
+
+/**
+ * **refine** has update password page form which is served on `/update-password` route when the `authProvider` configuration is provided.
+ *
+ * @see {@link https://refine.dev/docs/ui-frameworks/antd/components/antd-auth-page/#update-password} for more details.
+ */
+export const UpdatePasswordPage: React.FC<UpdatePasswordProps> = ({
+    wrapperProps,
+    contentProps,
+    renderContent,
+    formProps,
+}) => {
+    const [form] = Form.useForm<UpdatePasswordFormTypes>();
+    const translate = useTranslate();
+    const authProvider = useActiveAuthProvider();
+    const { mutate: updatePassword, isLoading } =
+        useUpdatePassword<UpdatePasswordFormTypes>({
+            v3LegacyAuthProviderCompatible: Boolean(authProvider?.isLegacy),
+        });
+
+    const CardTitle = (
+        <Title level={3} style={titleStyles}>
+            {translate("pages.updatePassword.title", "Set New Password")}
+        </Title>
+    );
+
+    const CardContent = (
+        <Card
+            title={CardTitle}
+            headStyle={{ borderBottom: 0 }}
+            style={containerStyles}
+            {...(contentProps ?? {})}
+        >
+            <Form<UpdatePasswordFormTypes>
+                layout="vertical"
+                form={form}
+                onFinish={(values) => updatePassword(values)}
+                requiredMark={false}
+                {...formProps}
+            >
+                <Form.Item
+                    name="password"
+                    label={translate(
+                        "pages.updatePassword.fields.password",
+                        "New Password",
+                    )}
+                    rules={[{ required: true }]}
+                    style={{ marginBottom: "12px" }}
+                >
+                    <Input
+                        type="password"
+                        placeholder="●●●●●●●●"
+                        size="large"
+                    />
+                </Form.Item>
+                <Form.Item
+                    name="confirmPassword"
+                    label={translate(
+                        "pages.updatePassword.fields.confirmPassword",
+                        "Confirm New Password",
+                    )}
+                    hasFeedback
+                    dependencies={["password"]}
+                    rules={[
+                        {
+                            required: true,
+                        },
+                        ({ getFieldValue }) => ({
+                            validator(_, value) {
+                                if (
+                                    !value ||
+                                    getFieldValue("password") === value
+                                ) {
+                                    return Promise.resolve();
+                                }
+                                return Promise.reject(
+                                    new Error(
+                                        translate(
+                                            "pages.updatePassword.errors.confirmPasswordNotMatch",
+                                            "Passwords do not match",
+                                        ),
+                                    ),
+                                );
+                            },
+                        }),
+                    ]}
+                    style={{ marginBottom: "12px" }}
+                >
+                    <Input
+                        type="password"
+                        placeholder="●●●●●●●●"
+                        size="large"
+                    />
+                </Form.Item>
+                <Form.Item>
+                    <Button
+                        type="primary"
+                        size="large"
+                        htmlType="submit"
+                        loading={isLoading}
+                        block
+                    >
+                        {translate(
+                            "pages.updatePassword.buttons.submit",
+                            "Update",
+                        )}
+                    </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/index.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { CardProps, FormProps, LayoutProps } from "antd";
+import { AuthPageProps } from "@refinedev/core";
+
+import {
+    LoginPage,
+    RegisterPage,
+    ForgotPasswordPage,
+    UpdatePasswordPage,
+} from "./components";
+
+export type AuthProps = AuthPageProps<LayoutProps, CardProps, FormProps>;
+
+/**
+ * **refine** has a default auth page form served on the `/login` route when the `authProvider` configuration is provided.
+ *
+ * @see {@link https://refine.dev/docs/ui-frameworks/antd/components/authpage/} for more details.
+ */
+export const AuthPage: React.FC<AuthProps> = (props) => {
+    const { type } = props;
+    const renderView = () => {
+        switch (type) {
+            case "register":
+                return <RegisterPage {...props} />;
+            case "forgotPassword":
+                return <ForgotPasswordPage {...props} />;
+            case "updatePassword":
+                return <UpdatePasswordPage {...props} />;
+            default:
+                return <LoginPage {...props} />;
+        }
+    };
+
+    return <>{renderView()}</>;
+};

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

@@ -0,0 +1,77 @@
+import React, { useEffect, useState } from "react";
+import { useGo, useResource, useRouterType } from "@refinedev/core";
+import { RefineErrorPageProps } from "@refinedev/ui-types";
+import { Button, Result, Typography, Space, Tooltip } from "antd";
+import { InfoCircleOutlined } from "@ant-design/icons";
+import { useNavigation, useTranslate } from "@refinedev/core";
+
+const { Text } = Typography;
+
+/**
+ * When the app is navigated to a non-existent route, refine shows a default error page.
+ * A custom error component can be used for this error page.
+ *
+ * @see {@link https://refine.dev/docs/api-references/components/refine-config#catchall} for more details.
+ */
+export const ErrorComponent: React.FC<RefineErrorPageProps> = () => {
+    const [errorMessage, setErrorMessage] = useState<string>();
+    const translate = useTranslate();
+    const { push } = useNavigation();
+    const go = useGo();
+    const routerType = useRouterType();
+
+    const { resource, action } = useResource();
+
+    useEffect(() => {
+        if (resource) {
+            if (action) {
+                setErrorMessage(
+                    translate(
+                        "pages.error.info",
+                        {
+                            action: action,
+                            resource: resource?.name,
+                        },
+                        `You may have forgotten to add the "${action}" component to "${resource?.name}" resource.`,
+                    ),
+                );
+            }
+        }
+    }, [resource, action]);
+
+    return (
+        <Result
+            status="404"
+            title="404"
+            extra={
+                <Space direction="vertical" size="large">
+                    <Space>
+                        <Text>
+                            {translate(
+                                "pages.error.404",
+                                "Sorry, the page you visited does not exist.",
+                            )}
+                        </Text>
+                        {errorMessage && (
+                            <Tooltip title={errorMessage}>
+                                <InfoCircleOutlined data-testid="error-component-tooltip" />
+                            </Tooltip>
+                        )}
+                    </Space>
+                    <Button
+                        type="primary"
+                        onClick={() => {
+                            if (routerType === "legacy") {
+                                push("/");
+                            } else {
+                                go({ to: "/" });
+                            }
+                        }}
+                    >
+                        {translate("pages.error.backHome", "Back Home")}
+                    </Button>
+                </Space>
+            }
+        />
+    );
+};

package/src/components/pages/index.tsx

@@ -0,0 +1,6 @@
+export { ErrorComponent } from "./error";
+export { LoginPage } from "./login";
+export { ReadyPage } from "./ready";
+export { WelcomePage } from "./welcome";
+export { AuthPage } from "./auth";
+export type { AuthProps } from "./auth";

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

@@ -0,0 +1,172 @@
+import React from "react";
+import { LoginPageProps, useActiveAuthProvider } from "@refinedev/core";
+import {
+    Row,
+    Col,
+    Layout,
+    Card,
+    Typography,
+    Form,
+    Input,
+    Button,
+    Checkbox,
+} from "antd";
+import { useLogin, useTranslate } from "@refinedev/core";
+
+import {
+    layoutStyles,
+    containerStyles,
+    titleStyles,
+    imageContainer,
+} from "./styles";
+
+const { Text, Title } = Typography;
+export interface ILoginForm {
+    username: string;
+    password: string;
+    remember: boolean;
+}
+
+/**
+ * @deprecated LoginPage is deprecated. Use AuthPage instead. @see {@link https://refine.dev/docs/api-reference/antd/components/antd-auth-page} for more details.
+ * **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/api-references/components/refine-config#loginpage} for more details.
+ */
+export const LoginPage: React.FC<LoginPageProps> = () => {
+    const [form] = Form.useForm<ILoginForm>();
+    const translate = useTranslate();
+
+    const authProvider = useActiveAuthProvider();
+    const { mutate: login, isLoading } = useLogin<ILoginForm>({
+        v3LegacyAuthProviderCompatible: Boolean(authProvider?.isLegacy),
+    });
+
+    const CardTitle = (
+        <Title level={3} style={titleStyles}>
+            {translate("pages.login.title", "Sign in your account")}
+        </Title>
+    );
+
+    return (
+        <Layout style={layoutStyles}>
+            <Row
+                justify="center"
+                align="middle"
+                style={{
+                    height: "100vh",
+                }}
+            >
+                <Col xs={22}>
+                    <div style={containerStyles}>
+                        <div style={imageContainer}>
+                            <img
+                                src="https://refine.ams3.cdn.digitaloceanspaces.com/logo/refine.svg"
+                                alt="Refine Logo"
+                            />
+                        </div>
+                        <Card title={CardTitle} headStyle={{ borderBottom: 0 }}>
+                            <Form<ILoginForm>
+                                layout="vertical"
+                                form={form}
+                                onFinish={(values) => {
+                                    login(values);
+                                }}
+                                requiredMark={false}
+                                initialValues={{
+                                    remember: false,
+                                }}
+                            >
+                                <Form.Item
+                                    name="username"
+                                    label={translate(
+                                        "pages.login.username",
+                                        "Username",
+                                    )}
+                                    rules={[{ required: true }]}
+                                >
+                                    <Input
+                                        size="large"
+                                        placeholder={translate(
+                                            "pages.login.username",
+                                            "Username",
+                                        )}
+                                    />
+                                </Form.Item>
+                                <Form.Item
+                                    name="password"
+                                    label={translate(
+                                        "pages.login.password",
+                                        "Password",
+                                    )}
+                                    rules={[{ required: true }]}
+                                    style={{ marginBottom: "12px" }}
+                                >
+                                    <Input
+                                        type="password"
+                                        placeholder="●●●●●●●●"
+                                        size="large"
+                                    />
+                                </Form.Item>
+                                <div style={{ marginBottom: "12px" }}>
+                                    <Form.Item
+                                        name="remember"
+                                        valuePropName="checked"
+                                        noStyle
+                                    >
+                                        <Checkbox
+                                            style={{
+                                                fontSize: "12px",
+                                            }}
+                                        >
+                                            {translate(
+                                                "pages.login.remember",
+                                                "Remember me",
+                                            )}
+                                        </Checkbox>
+                                    </Form.Item>
+
+                                    <a
+                                        style={{
+                                            float: "right",
+                                            fontSize: "12px",
+                                        }}
+                                        href="#"
+                                    >
+                                        {translate(
+                                            "pages.login.forgotPassword",
+                                            "Forgot password?",
+                                        )}
+                                    </a>
+                                </div>
+                                <Button
+                                    type="primary"
+                                    size="large"
+                                    htmlType="submit"
+                                    loading={isLoading}
+                                    block
+                                >
+                                    {translate("pages.login.signin", "Sign in")}
+                                </Button>
+                            </Form>
+                            <div style={{ marginTop: 8 }}>
+                                <Text style={{ fontSize: 12 }}>
+                                    {translate(
+                                        "pages.login.noAccount",
+                                        "Don’t have an account?",
+                                    )}{" "}
+                                    <a href="#" style={{ fontWeight: "bold" }}>
+                                        {translate(
+                                            "pages.login.signup",
+                                            "Sign up",
+                                        )}
+                                    </a>
+                                </Text>
+                            </div>
+                        </Card>
+                    </div>
+                </Col>
+            </Row>
+        </Layout>
+    );
+};

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

@@ -0,0 +1,25 @@
+import { CSSProperties } from "react";
+
+export const layoutStyles: CSSProperties = {
+    background: `radial-gradient(50% 50% at 50% 50%, #63386A 0%, #310438 100%)`,
+    backgroundSize: "cover",
+};
+
+export const containerStyles: CSSProperties = {
+    maxWidth: "408px",
+    margin: "auto",
+};
+
+export const titleStyles: CSSProperties = {
+    textAlign: "center",
+    color: "#626262",
+    fontSize: "30px",
+    letterSpacing: "-0.04em",
+};
+
+export const imageContainer: CSSProperties = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: "28px",
+};

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

@@ -0,0 +1,96 @@
+import * as React from "react";
+import { RefineReadyPageProps } from "@refinedev/ui-types";
+import { Row, Col, Typography, Space, Button } from "antd";
+import { ReadOutlined, FolderOutlined, TeamOutlined } from "@ant-design/icons";
+
+const styles: { [key: string]: React.CSSProperties } = {
+    root: {
+        height: "100vh",
+        backgroundImage:
+            "url('https://refine.ams3.cdn.digitaloceanspaces.com/login-background/background.png')",
+        backgroundSize: "cover",
+        backgroundColor: "#331049",
+    },
+    title: {
+        color: "white",
+        fontWeight: 800,
+        fontSize: "64px",
+        marginBottom: "8px",
+    },
+    p1: {
+        color: "white",
+        marginBottom: 0,
+        fontSize: "20px",
+        fontWeight: "bold",
+    },
+    p2: {
+        color: "white",
+        fontSize: "20px",
+    },
+    code: {
+        backgroundColor: "white",
+        color: "#331049",
+    },
+};
+
+const { Title } = Typography;
+
+/**
+ * **refine** shows a default ready page on root route when no `resources` is passed to the `<Refine>` component as a property.
+ *
+ * @see {@link https://refine.dev/docs/api-references/components/refine-config#readypage} for more details.
+ * @deprecated `ReadyPage` is deprecated and will be removed in the next major release.
+ */
+export const ReadyPage: React.FC<RefineReadyPageProps> = () => {
+    return (
+        <Row align="middle" justify="center" style={styles.root}>
+            <Col style={{ textAlign: "center" }}>
+                <img
+                    style={{ marginBottom: "48px" }}
+                    src="https://refine.ams3.cdn.digitaloceanspaces.com/logo/refine.svg"
+                    alt="Refine Logo"
+                />
+                <Title style={styles.title}>Welcome on board</Title>
+                <p style={styles.p1}>Your configuration is completed.</p>
+                <p style={styles.p2}>
+                    Now you can get started by adding your resources to the{" "}
+                    <code style={styles.code}>{`resources`}</code> property of{" "}
+                    <code style={styles.code}>{`<Refine>`}</code>
+                </p>
+                <Space
+                    size="large"
+                    wrap
+                    style={{ marginTop: "70px", justifyContent: "center" }}
+                >
+                    <a
+                        href="https://refine.dev"
+                        target="_blank"
+                        rel="noreferrer"
+                    >
+                        <Button size="large" icon={<ReadOutlined />}>
+                            Documentation
+                        </Button>
+                    </a>
+                    <a
+                        href="https://refine.dev/examples"
+                        target="_blank"
+                        rel="noreferrer"
+                    >
+                        <Button size="large" icon={<FolderOutlined />}>
+                            Examples
+                        </Button>
+                    </a>
+                    <a
+                        href="https://discord.gg/refine"
+                        target="_blank"
+                        rel="noreferrer"
+                    >
+                        <Button size="large" icon={<TeamOutlined />}>
+                            Community
+                        </Button>
+                    </a>
+                </Space>
+            </Col>
+        </Row>
+    );
+};

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

@@ -0,0 +1,87 @@
+import * as React from "react";
+import { Row, Col, Typography, Space, Button } from "antd";
+import { ReadOutlined, FolderOutlined, TeamOutlined } from "@ant-design/icons";
+
+const styles: { [key: string]: React.CSSProperties } = {
+    root: {
+        height: "100vh",
+        backgroundImage:
+            "url('https://refine.ams3.cdn.digitaloceanspaces.com/login-background/background.png')",
+        backgroundSize: "cover",
+        backgroundColor: "#331049",
+    },
+    title: {
+        color: "white",
+        fontWeight: 800,
+        fontSize: "64px",
+        marginBottom: "8px",
+    },
+    p1: {
+        color: "white",
+        marginBottom: 0,
+        fontSize: "20px",
+        fontWeight: "bold",
+    },
+    p2: {
+        color: "white",
+        fontSize: "20px",
+    },
+    code: {
+        backgroundColor: "white",
+        color: "#331049",
+    },
+};
+
+const { Title } = Typography;
+
+/**
+ * It is a page that welcomes you after the configuration is completed.
+ */
+export const WelcomePage: React.FC = () => {
+    return (
+        <Row align="middle" justify="center" style={styles.root}>
+            <Col style={{ textAlign: "center" }}>
+                <img
+                    style={{ marginBottom: "48px" }}
+                    src="https://refine.ams3.cdn.digitaloceanspaces.com/logo/refine.svg"
+                    alt="Refine Logo"
+                />
+                <Title style={styles.title}>Welcome on board</Title>
+                <p style={styles.p1}>Your configuration is completed.</p>
+                <Space
+                    size="large"
+                    wrap
+                    style={{ marginTop: "70px", justifyContent: "center" }}
+                >
+                    <a
+                        href="https://refine.dev"
+                        target="_blank"
+                        rel="noreferrer"
+                    >
+                        <Button size="large" icon={<ReadOutlined />}>
+                            Documentation
+                        </Button>
+                    </a>
+                    <a
+                        href="https://refine.dev/examples"
+                        target="_blank"
+                        rel="noreferrer"
+                    >
+                        <Button size="large" icon={<FolderOutlined />}>
+                            Examples
+                        </Button>
+                    </a>
+                    <a
+                        href="https://discord.gg/refine"
+                        target="_blank"
+                        rel="noreferrer"
+                    >
+                        <Button size="large" icon={<TeamOutlined />}>
+                            Community
+                        </Button>
+                    </a>
+                </Space>
+            </Col>
+        </Row>
+    );
+};