@refinedev/antd 5.37.4 → 6.0.0

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

@@ -1,34 +1,34 @@
 import React from "react";
 import {
-    RegisterPageProps,
-    RegisterFormTypes,
-    useRouterType,
-    useLink,
-    useActiveAuthProvider,
+  RegisterPageProps,
+  RegisterFormTypes,
+  useRouterType,
+  useLink,
+  useActiveAuthProvider,
 } from "@refinedev/core";
 import {
-    Row,
-    Col,
-    Layout,
-    Card,
-    Typography,
-    Form,
-    Input,
-    Button,
-    LayoutProps,
-    CardProps,
-    FormProps,
-    Divider,
-    theme,
+  Row,
+  Col,
+  Layout,
+  Card,
+  Typography,
+  Form,
+  Input,
+  Button,
+  LayoutProps,
+  CardProps,
+  FormProps,
+  Divider,
+  theme,
 } from "antd";
 import { useTranslate, useRouterContext, useRegister } from "@refinedev/core";
 
 import {
-    layoutStyles,
-    containerStyles,
-    titleStyles,
-    headStyles,
-    bodyStyles,
+  layoutStyles,
+  containerStyles,
+  titleStyles,
+  headStyles,
+  bodyStyles,
 } from "../styles";
 import { ThemedTitleV2 } from "@components";
 
@@ -39,258 +39,242 @@ type RegisterProps = RegisterPageProps<LayoutProps, CardProps, FormProps>;
  * @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,
-    title,
-    hideForm,
+  providers,
+  loginLink,
+  wrapperProps,
+  contentProps,
+  renderContent,
+  formProps,
+  title,
+  hideForm,
 }) => {
-    const { token } = theme.useToken();
-    const [form] = Form.useForm<RegisterFormTypes>();
-    const translate = useTranslate();
-    const routerType = useRouterType();
-    const Link = useLink();
-    const { Link: LegacyLink } = useRouterContext();
+  const { token } = theme.useToken();
+  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 ActiveLink = routerType === "legacy" ? LegacyLink : Link;
 
-    const authProvider = useActiveAuthProvider();
-    const { mutate: register, isLoading } = useRegister<RegisterFormTypes>({
-        v3LegacyAuthProviderCompatible: Boolean(authProvider?.isLegacy),
-    });
+  const authProvider = useActiveAuthProvider();
+  const { mutate: register, isLoading } = useRegister<RegisterFormTypes>({
+    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 CardTitle = (
-        <Typography.Title
-            level={3}
-            style={{
-                color: token.colorPrimaryTextHover,
-                ...titleStyles,
-            }}
-        >
-            {translate("pages.register.title", "Sign up for your account")}
-        </Typography.Title>
+  const PageTitle =
+    title === false ? null : (
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          marginBottom: "32px",
+          fontSize: "20px",
+        }}
+      >
+        {title ?? <ThemedTitleV2 collapsed={false} />}
+      </div>
     );
 
-    const renderProviders = () => {
-        if (providers && providers.length > 0) {
+  const CardTitle = (
+    <Typography.Title
+      level={3}
+      style={{
+        color: token.colorPrimaryTextHover,
+        ...titleStyles,
+      }}
+    >
+      {translate("pages.register.title", "Sign up for your account")}
+    </Typography.Title>
+  );
+
+  const renderProviders = () => {
+    if (providers && providers.length > 0) {
+      return (
+        <>
+          {providers.map((provider) => {
             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={() =>
-                                    register({
-                                        providerName: provider.name,
-                                    })
-                                }
-                            >
-                                {provider.label}
-                            </Button>
-                        );
-                    })}
-                    {!hideForm && (
-                        <Divider>
-                            <Typography.Text
-                                style={{
-                                    color: token.colorTextLabel,
-                                }}
-                            >
-                                {translate("pages.login.divider", "or")}
-                            </Typography.Text>
-                        </Divider>
-                    )}
-                </>
+              <Button
+                key={provider.name}
+                type="default"
+                block
+                icon={provider.icon}
+                style={{
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  width: "100%",
+                  marginBottom: "8px",
+                }}
+                onClick={() =>
+                  register({
+                    providerName: provider.name,
+                  })
+                }
+              >
+                {provider.label}
+              </Button>
             );
-        }
-        return null;
-    };
+          })}
+          {!hideForm && (
+            <Divider>
+              <Typography.Text
+                style={{
+                  color: token.colorTextLabel,
+                }}
+              >
+                {translate("pages.login.divider", "or")}
+              </Typography.Text>
+            </Divider>
+          )}
+        </>
+      );
+    }
+    return null;
+  };
 
-    const CardContent = (
-        <Card
-            title={CardTitle}
-            headStyle={headStyles}
-            bodyStyle={bodyStyles}
+  const CardContent = (
+    <Card
+      title={CardTitle}
+      headStyle={headStyles}
+      bodyStyle={bodyStyles}
+      style={{
+        ...containerStyles,
+        backgroundColor: token.colorBgElevated,
+      }}
+      {...(contentProps ?? {})}
+    >
+      {renderProviders()}
+      {!hideForm && (
+        <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 }]}
+          >
+            <Input type="password" placeholder="●●●●●●●●" size="large" />
+          </Form.Item>
+          <div
             style={{
-                ...containerStyles,
-                backgroundColor: token.colorBgElevated,
+              display: "flex",
+              justifyContent: "space-between",
+              marginBottom: "24px",
             }}
-            {...(contentProps ?? {})}
-        >
-            {renderProviders()}
-            {!hideForm && (
-                <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 }]}
-                    >
-                        <Input
-                            type="password"
-                            placeholder="●●●●●●●●"
-                            size="large"
-                        />
-                    </Form.Item>
-                    <div
-                        style={{
-                            display: "flex",
-                            justifyContent: "space-between",
-                            marginBottom: "24px",
-                        }}
-                    >
-                        {loginLink ?? (
-                            <Typography.Text
-                                style={{
-                                    fontSize: 12,
-                                    marginLeft: "auto",
-                                }}
-                            >
-                                {translate(
-                                    "pages.login.buttons.haveAccount",
-                                    "Have an account?",
-                                )}{" "}
-                                <ActiveLink
-                                    style={{
-                                        fontWeight: "bold",
-                                        color: token.colorPrimaryTextHover,
-                                    }}
-                                    to="/login"
-                                >
-                                    {translate("pages.login.signin", "Sign in")}
-                                </ActiveLink>
-                            </Typography.Text>
-                        )}
-                    </div>
-                    <Form.Item
-                        style={{
-                            marginBottom: 0,
-                        }}
-                    >
-                        <Button
-                            type="primary"
-                            size="large"
-                            htmlType="submit"
-                            loading={isLoading}
-                            block
-                        >
-                            {translate(
-                                "pages.register.buttons.submit",
-                                "Sign up",
-                            )}
-                        </Button>
-                    </Form.Item>
-                </Form>
-            )}
-            {hideForm && loginLink !== false && (
-                <div
-                    style={{
-                        marginTop: hideForm ? 16 : 8,
-                    }}
-                >
-                    <Typography.Text
-                        style={{
-                            fontSize: 12,
-                        }}
-                    >
-                        {translate(
-                            "pages.login.buttons.haveAccount",
-                            "Have an account?",
-                        )}{" "}
-                        <ActiveLink
-                            style={{
-                                fontWeight: "bold",
-                                color: token.colorPrimaryTextHover,
-                            }}
-                            to="/login"
-                        >
-                            {translate("pages.login.signin", "Sign in")}
-                        </ActiveLink>
-                    </Typography.Text>
-                </div>
-            )}
-        </Card>
-    );
-
-    return (
-        <Layout style={layoutStyles} {...(wrapperProps ?? {})}>
-            <Row
-                justify="center"
-                align={hideForm ? "top" : "middle"}
+          >
+            {loginLink ?? (
+              <Typography.Text
                 style={{
-                    padding: "16px 0",
-                    minHeight: "100dvh",
-                    paddingTop: hideForm ? "15dvh" : "16px",
+                  fontSize: 12,
+                  marginLeft: "auto",
                 }}
+              >
+                {translate(
+                  "pages.login.buttons.haveAccount",
+                  "Have an account?",
+                )}{" "}
+                <ActiveLink
+                  style={{
+                    fontWeight: "bold",
+                    color: token.colorPrimaryTextHover,
+                  }}
+                  to="/login"
+                >
+                  {translate("pages.login.signin", "Sign in")}
+                </ActiveLink>
+              </Typography.Text>
+            )}
+          </div>
+          <Form.Item
+            style={{
+              marginBottom: 0,
+            }}
+          >
+            <Button
+              type="primary"
+              size="large"
+              htmlType="submit"
+              loading={isLoading}
+              block
             >
-                <Col xs={22}>
-                    {renderContent ? (
-                        renderContent(CardContent, PageTitle)
-                    ) : (
-                        <>
-                            {PageTitle}
-                            {CardContent}
-                        </>
-                    )}
-                </Col>
-            </Row>
-        </Layout>
-    );
+              {translate("pages.register.buttons.submit", "Sign up")}
+            </Button>
+          </Form.Item>
+        </Form>
+      )}
+      {hideForm && loginLink !== false && (
+        <div
+          style={{
+            marginTop: hideForm ? 16 : 8,
+          }}
+        >
+          <Typography.Text
+            style={{
+              fontSize: 12,
+            }}
+          >
+            {translate("pages.login.buttons.haveAccount", "Have an account?")}{" "}
+            <ActiveLink
+              style={{
+                fontWeight: "bold",
+                color: token.colorPrimaryTextHover,
+              }}
+              to="/login"
+            >
+              {translate("pages.login.signin", "Sign in")}
+            </ActiveLink>
+          </Typography.Text>
+        </div>
+      )}
+    </Card>
+  );
+
+  return (
+    <Layout style={layoutStyles} {...(wrapperProps ?? {})}>
+      <Row
+        justify="center"
+        align={hideForm ? "top" : "middle"}
+        style={{
+          padding: "16px 0",
+          minHeight: "100dvh",
+          paddingTop: hideForm ? "15dvh" : "16px",
+        }}
+      >
+        <Col xs={22}>
+          {renderContent ? (
+            renderContent(CardContent, PageTitle)
+          ) : (
+            <>
+              {PageTitle}
+              {CardContent}
+            </>
+          )}
+        </Col>
+      </Row>
+    </Layout>
+  );
 };

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

@@ -3,28 +3,28 @@ import { CSSProperties } from "react";
 export const layoutStyles: CSSProperties = {};
 
 export const containerStyles: CSSProperties = {
-    maxWidth: "400px",
-    margin: "auto",
-    padding: "32px",
-    boxShadow:
-        "0px 2px 4px rgba(0, 0, 0, 0.02), 0px 1px 6px -1px rgba(0, 0, 0, 0.02), 0px 1px 2px rgba(0, 0, 0, 0.03)",
+  maxWidth: "400px",
+  margin: "auto",
+  padding: "32px",
+  boxShadow:
+    "0px 2px 4px rgba(0, 0, 0, 0.02), 0px 1px 6px -1px rgba(0, 0, 0, 0.02), 0px 1px 2px rgba(0, 0, 0, 0.03)",
 };
 
 export const headStyles: CSSProperties = {
-    borderBottom: 0,
-    padding: 0,
+  borderBottom: 0,
+  padding: 0,
 };
 
 export const bodyStyles: CSSProperties = { padding: 0, marginTop: "32px" };
 
 export const titleStyles: CSSProperties = {
-    textAlign: "center",
-    marginBottom: 0,
-    fontSize: "24px",
-    lineHeight: "32px",
-    fontWeight: 700,
-    overflowWrap: "break-word",
-    hyphens: "manual",
-    textOverflow: "unset",
-    whiteSpace: "pre-wrap",
+  textAlign: "center",
+  marginBottom: 0,
+  fontSize: "24px",
+  lineHeight: "32px",
+  fontWeight: 700,
+  overflowWrap: "break-word",
+  hyphens: "manual",
+  textOverflow: "unset",
+  whiteSpace: "pre-wrap",
 };