@refinedev/antd 5.37.3 → 5.37.5

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

@@ -1,41 +1,38 @@
 import React from "react";
 import {
-    UpdatePasswordPageProps,
-    UpdatePasswordFormTypes,
-    useActiveAuthProvider,
+  UpdatePasswordPageProps,
+  UpdatePasswordFormTypes,
+  useActiveAuthProvider,
 } from "@refinedev/core";
 import {
-    Row,
-    Col,
-    Layout,
-    Card,
-    Typography,
-    Form,
-    Input,
-    Button,
-    LayoutProps,
-    CardProps,
-    FormProps,
-    theme,
+  Row,
+  Col,
+  Layout,
+  Card,
+  Typography,
+  Form,
+  Input,
+  Button,
+  LayoutProps,
+  CardProps,
+  FormProps,
+  theme,
 } from "antd";
 import { useTranslate, useUpdatePassword } from "@refinedev/core";
 
 import {
-    layoutStyles,
-    containerStyles,
-    titleStyles,
-    headStyles,
-    bodyStyles,
+  layoutStyles,
+  containerStyles,
+  titleStyles,
+  headStyles,
+  bodyStyles,
 } from "../styles";
 import { ThemedTitleV2 } from "@components";
 
-const { Title } = Typography;
-const { useToken } = theme;
-
 type UpdatePasswordProps = UpdatePasswordPageProps<
-    LayoutProps,
-    CardProps,
-    FormProps
+  LayoutProps,
+  CardProps,
+  FormProps
 >;
 
 /**
@@ -44,161 +41,147 @@ type UpdatePasswordProps = UpdatePasswordPageProps<
  * @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,
-    title,
+  wrapperProps,
+  contentProps,
+  renderContent,
+  formProps,
+  title,
 }) => {
-    const { token } = useToken();
-    const [form] = Form.useForm<UpdatePasswordFormTypes>();
-    const translate = useTranslate();
-    const authProvider = useActiveAuthProvider();
-    const { mutate: updatePassword, isLoading } =
-        useUpdatePassword<UpdatePasswordFormTypes>({
-            v3LegacyAuthProviderCompatible: Boolean(authProvider?.isLegacy),
-        });
-
-    const PageTitle =
-        title === false ? null : (
-            <div
-                style={{
-                    display: "flex",
-                    justifyContent: "center",
-                    marginBottom: "32px",
-                    fontSize: "20px",
-                }}
-            >
-                {title ?? <ThemedTitleV2 collapsed={false} />}
-            </div>
-        );
+  const { token } = theme.useToken();
+  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={{
-                color: token.colorPrimaryTextHover,
-                ...titleStyles,
-            }}
-        >
-            {translate("pages.updatePassword.title", "Set New Password")}
-        </Title>
+  const PageTitle =
+    title === false ? null : (
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          marginBottom: "32px",
+          fontSize: "20px",
+        }}
+      >
+        {title ?? <ThemedTitleV2 collapsed={false} />}
+      </div>
     );
 
-    const CardContent = (
-        <Card
-            title={CardTitle}
-            headStyle={headStyles}
-            bodyStyle={bodyStyles}
-            style={{
-                ...containerStyles,
-                backgroundColor: token.colorBgElevated,
-            }}
-            {...(contentProps ?? {})}
+  const CardTitle = (
+    <Typography.Title
+      level={3}
+      style={{
+        color: token.colorPrimaryTextHover,
+        ...titleStyles,
+      }}
+    >
+      {translate("pages.updatePassword.title", "Set New Password")}
+    </Typography.Title>
+  );
+
+  const CardContent = (
+    <Card
+      title={CardTitle}
+      headStyle={headStyles}
+      bodyStyle={bodyStyles}
+      style={{
+        ...containerStyles,
+        backgroundColor: token.colorBgElevated,
+      }}
+      {...(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" }}
         >
-            <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",
-                                        ),
-                                    ),
-                                );
-                            },
-                        }),
-                    ]}
-                >
-                    <Input
-                        type="password"
-                        placeholder="●●●●●●●●"
-                        size="large"
-                    />
-                </Form.Item>
-                <Form.Item
-                    style={{
-                        marginBottom: 0,
-                    }}
-                >
-                    <Button
-                        type="primary"
-                        size="large"
-                        htmlType="submit"
-                        loading={isLoading}
-                        block
-                    >
-                        {translate(
-                            "pages.updatePassword.buttons.submit",
-                            "Update",
-                        )}
-                    </Button>
-                </Form.Item>
-            </Form>
-        </Card>
-    );
+          <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",
+                    ),
+                  ),
+                );
+              },
+            }),
+          ]}
+        >
+          <Input type="password" placeholder="●●●●●●●●" size="large" />
+        </Form.Item>
+        <Form.Item
+          style={{
+            marginBottom: 0,
+          }}
+        >
+          <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={{
-                    padding: "16px 0",
-                    minHeight: "100dvh",
-                }}
-            >
-                <Col xs={22}>
-                    {renderContent ? (
-                        renderContent(CardContent, PageTitle)
-                    ) : (
-                        <>
-                            {PageTitle}
-                            {CardContent}
-                        </>
-                    )}
-                </Col>
-            </Row>
-        </Layout>
-    );
+  return (
+    <Layout style={layoutStyles} {...(wrapperProps ?? {})}>
+      <Row
+        justify="center"
+        align="middle"
+        style={{
+          padding: "16px 0",
+          minHeight: "100dvh",
+        }}
+      >
+        <Col xs={22}>
+          {renderContent ? (
+            renderContent(CardContent, PageTitle)
+          ) : (
+            <>
+              {PageTitle}
+              {CardContent}
+            </>
+          )}
+        </Col>
+      </Row>
+    </Layout>
+  );
 };

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

@@ -3,18 +3,18 @@ import { CardProps, FormProps, LayoutProps } from "antd";
 import { AuthPageProps } from "@refinedev/core";
 
 import {
-    LoginPage,
-    RegisterPage,
-    ForgotPasswordPage,
-    UpdatePasswordPage,
+  LoginPage,
+  RegisterPage,
+  ForgotPasswordPage,
+  UpdatePasswordPage,
 } from "./components";
 
 export type AuthProps = AuthPageProps<LayoutProps, CardProps, FormProps> & {
-    renderContent?: (
-        content: React.ReactNode,
-        title: React.ReactNode,
-    ) => React.ReactNode;
-    title?: React.ReactNode;
+  renderContent?: (
+    content: React.ReactNode,
+    title: React.ReactNode,
+  ) => React.ReactNode;
+  title?: React.ReactNode;
 };
 
 /**
@@ -23,19 +23,19 @@ export type AuthProps = AuthPageProps<LayoutProps, CardProps, FormProps> & {
  * @see {@link https://refine.dev/docs/api-reference/antd/components/antd-auth-page/} 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} />;
-        }
-    };
+  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()}</>;
+  return <>{renderView()}</>;
 };

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

@@ -5,8 +5,6 @@ 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.
@@ -14,64 +12,64 @@ const { Text } = Typography;
  * @see {@link https://refine.dev/docs/packages/documentation/routers/} 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 [errorMessage, setErrorMessage] = useState<string>();
+  const translate = useTranslate();
+  const { push } = useNavigation();
+  const go = useGo();
+  const routerType = useRouterType();
 
-    const { resource, action } = useResource();
+  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]);
+  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>
-            }
-        />
-    );
+  return (
+    <Result
+      status="404"
+      title="404"
+      extra={
+        <Space direction="vertical" size="large">
+          <Space>
+            <Typography.Text>
+              {translate(
+                "pages.error.404",
+                "Sorry, the page you visited does not exist.",
+              )}
+            </Typography.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>
+      }
+    />
+  );
 };