@refinedev/core 4.0.0

package/src/components/layoutWrapper/index.tsx

@@ -0,0 +1,121 @@
+import React, { useEffect } from "react";
+
+import {
+    useRefineContext,
+    useRouterContext,
+    useTranslate,
+    useWarnAboutChange,
+} from "@hooks";
+import { LayoutProps, TitleProps } from "../../interfaces";
+
+export interface LayoutWrapperProps {
+    /**
+     * Outer component that renders other components
+     * @default *
+     */
+    Layout?: React.FC<LayoutProps>;
+    /**
+     * [Custom sider to use](/api-reference/core/components/refine-config.md#sider)
+     * @default *
+     */
+    Sider?: React.FC;
+    /**
+     * [Custom header to use](/api-reference/core/components/refine-config.md#header)
+     * @default *
+     */
+    Header?: React.FC;
+    /**
+     * [Custom title to use](/api-reference/core/components/refine-config.md#title)
+     * @default *
+     */
+    Title?: React.FC<TitleProps>;
+    /**
+     * [Custom footer to use](/api-reference/core/components/refine-config.md#footer)
+     * @default *
+     */
+    Footer?: React.FC;
+    /**
+     * [Custom off layout area to use](/api-reference/core/components/refine-config.md#offlayoutarea)
+     * @default *
+     */
+    OffLayoutArea?: React.FC;
+    children: React.ReactNode;
+}
+
+/**
+ * `<LayoutWrapper>` wraps its contents in **refine's** layout with all customizations made in {@link https://refine.dev/docs/core/components/refine-config `<Refine>`} component.
+ * It is the default layout used in resource pages.
+ * It can be used in custom pages to use global layout.
+ *
+ * @see {@link https://refine.dev/docs/core/components/layout-wrapper} for more details.
+ *
+ * @deprecated This component is obsolete and only works with the legacy router providers.
+ */
+export const LayoutWrapper: React.FC<LayoutWrapperProps> = ({
+    children,
+    Layout: LayoutFromProps,
+    Sider: SiderFromProps,
+    Header: HeaderFromProps,
+    Title: TitleFromProps,
+    Footer: FooterFromProps,
+    OffLayoutArea: OffLayoutAreaFromProps,
+}) => {
+    const { Layout, Footer, Header, Sider, Title, OffLayoutArea } =
+        useRefineContext();
+
+    const LayoutToRender = LayoutFromProps ?? Layout;
+
+    return (
+        <LayoutToRender
+            Sider={SiderFromProps ?? Sider}
+            Header={HeaderFromProps ?? Header}
+            Footer={FooterFromProps ?? Footer}
+            Title={TitleFromProps ?? Title}
+            OffLayoutArea={OffLayoutAreaFromProps ?? OffLayoutArea}
+        >
+            {children}
+            <UnsavedPrompt />
+        </LayoutToRender>
+    );
+};
+
+const UnsavedPrompt: React.FC = () => {
+    const { Prompt } = useRouterContext();
+
+    const translate = useTranslate();
+
+    const { warnWhen, setWarnWhen } = useWarnAboutChange();
+
+    const warnWhenListener = (e: {
+        preventDefault: () => void;
+        returnValue: string;
+    }) => {
+        e.preventDefault();
+
+        e.returnValue = translate(
+            "warnWhenUnsavedChanges",
+            "Are you sure you want to leave? You have unsaved changes.",
+        );
+
+        return e.returnValue;
+    };
+
+    useEffect(() => {
+        if (warnWhen) {
+            window.addEventListener("beforeunload", warnWhenListener);
+        }
+
+        return window.removeEventListener("beforeunload", warnWhenListener);
+    }, [warnWhen]);
+
+    return (
+        <Prompt
+            when={warnWhen}
+            message={translate(
+                "warnWhenUnsavedChanges",
+                "Are you sure you want to leave? You have unsaved changes.",
+            )}
+            setWarnWhen={setWarnWhen}
+        />
+    );
+};

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

@@ -0,0 +1,122 @@
+import React, { useState } from "react";
+
+import {
+    useTranslate,
+    useRouterContext,
+    useLink,
+    useRouterType,
+    useForgotPassword,
+} from "@hooks";
+
+import { DivPropsType, FormPropsType } from "../..";
+import {
+    ForgotPasswordFormTypes,
+    ForgotPasswordPageProps,
+} from "../../../../../interfaces";
+
+type ForgotPasswordProps = ForgotPasswordPageProps<
+    DivPropsType,
+    DivPropsType,
+    FormPropsType
+>;
+
+export const ForgotPasswordPage: React.FC<ForgotPasswordProps> = ({
+    loginLink,
+    wrapperProps,
+    contentProps,
+    renderContent,
+    formProps,
+}) => {
+    const translate = useTranslate();
+    const routerType = useRouterType();
+    const Link = useLink();
+    const { Link: LegacyLink } = useRouterContext();
+
+    const ActiveLink = routerType === "legacy" ? LegacyLink : Link;
+
+    const [email, setEmail] = useState("");
+
+    const { mutate: forgotPassword, isLoading } =
+        useForgotPassword<ForgotPasswordFormTypes>();
+
+    const renderLink = (link: React.ReactNode, text?: string) => {
+        if (link) {
+            if (typeof link === "string") {
+                return <ActiveLink to={link}>{text}</ActiveLink>;
+            }
+            return link;
+        }
+        return null;
+    };
+
+    const content = (
+        <div {...contentProps}>
+            <h1 style={{ textAlign: "center" }}>
+                {translate(
+                    "pages.forgotPassword.title",
+                    "Forgot your password?",
+                )}
+            </h1>
+            <hr />
+            <form
+                onSubmit={(e) => {
+                    e.preventDefault();
+                    forgotPassword({ email });
+                }}
+                {...formProps}
+            >
+                <div
+                    style={{
+                        display: "flex",
+                        flexDirection: "column",
+                        padding: 25,
+                    }}
+                >
+                    <label>
+                        {translate(
+                            "pages.forgotPassword.fields.email",
+                            "Email",
+                        )}
+                    </label>
+                    <input
+                        name="email"
+                        type="mail"
+                        autoCorrect="off"
+                        spellCheck={false}
+                        autoCapitalize="off"
+                        required
+                        value={email}
+                        onChange={(e) => setEmail(e.target.value)}
+                    />
+                    <input
+                        type="submit"
+                        disabled={isLoading}
+                        value={translate(
+                            "pages.forgotPassword.buttons.submit",
+                            "Send reset instructions",
+                        )}
+                    />
+                    <br />
+                    {loginLink ?? (
+                        <span>
+                            {translate(
+                                "pages.register.buttons.haveAccount",
+                                "Have an account? ",
+                            )}{" "}
+                            {renderLink(
+                                "/login",
+                                translate("pages.login.signin", "Sign in"),
+                            )}
+                        </span>
+                    )}
+                </div>
+            </form>
+        </div>
+    );
+
+    return (
+        <div {...wrapperProps}>
+            {renderContent ? renderContent(content) : content}
+        </div>
+    );
+};

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

@@ -0,0 +1,4 @@
+export * from "./login";
+export * from "./register";
+export * from "./forgotPassword";
+export * from "./updatePassword";

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

@@ -0,0 +1,182 @@
+import React, { useState } from "react";
+import { LoginPageProps, LoginFormTypes } from "../../../../../interfaces";
+
+import { useRouterContext, useLink, useRouterType, useLogin } from "@hooks";
+import { useTranslate } from "@hooks/translate";
+
+import { DivPropsType, FormPropsType } from "../..";
+import { useActiveAuthProvider } from "@definitions/helpers";
+
+type LoginProps = LoginPageProps<DivPropsType, DivPropsType, FormPropsType>;
+
+export const LoginPage: React.FC<LoginProps> = ({
+    providers,
+    registerLink,
+    forgotPasswordLink,
+    rememberMe,
+    contentProps,
+    wrapperProps,
+    renderContent,
+    formProps,
+}) => {
+    const routerType = useRouterType();
+    const Link = useLink();
+    const { Link: LegacyLink } = useRouterContext();
+
+    const ActiveLink = routerType === "legacy" ? LegacyLink : Link;
+
+    const [email, setEmail] = useState("");
+    const [password, setPassword] = useState("");
+    const [remember, setRemember] = useState(false);
+
+    const translate = useTranslate();
+
+    const authProvider = useActiveAuthProvider();
+    const { mutate: login } = useLogin<LoginFormTypes>({
+        v3LegacyAuthProviderCompatible: Boolean(authProvider?.isLegacy),
+    });
+
+    const renderLink = (link: React.ReactNode, text?: string) => {
+        if (link) {
+            if (typeof link === "string") {
+                return <ActiveLink to={link}>{text}</ActiveLink>;
+            }
+            return link;
+        }
+        return null;
+    };
+
+    const renderProviders = () => {
+        if (providers) {
+            return providers.map((provider) => (
+                <div
+                    key={provider.name}
+                    style={{
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        marginBottom: "1rem",
+                    }}
+                >
+                    <button
+                        onClick={() =>
+                            login({
+                                providerName: provider.name,
+                            })
+                        }
+                        style={{
+                            display: "flex",
+                            alignItems: "center",
+                        }}
+                    >
+                        {provider?.icon}
+                        {provider.label ?? <label>{provider.label}</label>}
+                    </button>
+                </div>
+            ));
+        }
+        return null;
+    };
+
+    const content = (
+        <div {...contentProps}>
+            <h1 style={{ textAlign: "center" }}>
+                {translate("pages.login.title", "Sign in to your account")}
+            </h1>
+            {renderProviders()}
+            <hr />
+            <form
+                onSubmit={(e) => {
+                    e.preventDefault();
+                    login({ email, password, remember });
+                }}
+                {...formProps}
+            >
+                <div
+                    style={{
+                        display: "flex",
+                        flexDirection: "column",
+                        padding: 25,
+                    }}
+                >
+                    <label>
+                        {translate("pages.login.fields.email", "Email")}
+                    </label>
+                    <input
+                        name="email"
+                        type="text"
+                        size={20}
+                        autoCorrect="off"
+                        spellCheck={false}
+                        autoCapitalize="off"
+                        required
+                        value={email}
+                        onChange={(e) => setEmail(e.target.value)}
+                    />
+                    <label>
+                        {translate("pages.login.fields.password", "Password")}
+                    </label>
+                    <input
+                        type="password"
+                        name="password"
+                        required
+                        size={20}
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                    />
+                    {rememberMe ?? (
+                        <>
+                            <label>
+                                {translate(
+                                    "pages.login.buttons.rememberMe",
+                                    "Remember me",
+                                )}
+                                <input
+                                    name="remember"
+                                    type="checkbox"
+                                    size={20}
+                                    checked={remember}
+                                    value={remember.toString()}
+                                    onChange={() => {
+                                        setRemember(!remember);
+                                    }}
+                                />
+                            </label>
+                        </>
+                    )}
+                    <br />
+                    {forgotPasswordLink ??
+                        renderLink(
+                            "/forgot-password",
+                            translate(
+                                "pages.login.buttons.forgotPassword",
+                                "Forgot password?",
+                            ),
+                        )}
+                    <input
+                        type="submit"
+                        value={translate("pages.login.signin", "Sign in")}
+                    />
+                    {registerLink ?? (
+                        <span>
+                            {translate(
+                                "pages.login.buttons.noAccount",
+                                "Don’t have an account?",
+                            )}{" "}
+                            {renderLink(
+                                "/register",
+                                translate("pages.login.register", "Sign up"),
+                            )}
+                        </span>
+                    )}
+                </div>
+            </form>
+        </div>
+    );
+
+    return (
+        <div {...wrapperProps}>
+            {renderContent ? renderContent(content) : content}
+        </div>
+    );
+};

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

@@ -0,0 +1,168 @@
+import React, { useState } from "react";
+import { RegisterPageProps } from "../../../../../interfaces";
+
+import {
+    useTranslate,
+    useRouterContext,
+    useLink,
+    useRouterType,
+    useRegister,
+} from "@hooks";
+
+import { DivPropsType, FormPropsType } from "../..";
+import { useActiveAuthProvider } from "@definitions/helpers";
+
+type RegisterProps = RegisterPageProps<
+    DivPropsType,
+    DivPropsType,
+    FormPropsType
+>;
+
+export const RegisterPage: React.FC<RegisterProps> = ({
+    providers,
+    loginLink,
+    wrapperProps,
+    contentProps,
+    renderContent,
+    formProps,
+}) => {
+    const routerType = useRouterType();
+    const Link = useLink();
+    const { Link: LegacyLink } = useRouterContext();
+
+    const ActiveLink = routerType === "legacy" ? LegacyLink : Link;
+
+    const [email, setEmail] = useState("");
+    const [password, setPassword] = useState("");
+
+    const translate = useTranslate();
+
+    const authProvider = useActiveAuthProvider();
+    const { mutate: register, isLoading } = useRegister({
+        v3LegacyAuthProviderCompatible: Boolean(authProvider?.isLegacy),
+    });
+
+    const renderLink = (link: React.ReactNode, text?: string) => {
+        if (link) {
+            if (typeof link === "string") {
+                return <ActiveLink to={link}>{text}</ActiveLink>;
+            }
+            return link;
+        }
+        return null;
+    };
+
+    const renderProviders = () => {
+        if (providers) {
+            return providers.map((provider) => (
+                <div
+                    key={provider.name}
+                    style={{
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        marginBottom: "1rem",
+                    }}
+                >
+                    <button
+                        onClick={() =>
+                            register({
+                                providerName: provider.name,
+                            })
+                        }
+                        style={{
+                            display: "flex",
+                            alignItems: "center",
+                        }}
+                    >
+                        {provider?.icon}
+                        {provider.label ?? <label>{provider.label}</label>}
+                    </button>
+                </div>
+            ));
+        }
+        return null;
+    };
+
+    const content = (
+        <div {...contentProps}>
+            <h1 style={{ textAlign: "center" }}>
+                {translate("pages.register.title", "Sign up for your account")}
+            </h1>
+            {renderProviders()}
+            <hr />
+            <form
+                onSubmit={(e) => {
+                    e.preventDefault();
+                    register({ email, password });
+                }}
+                {...formProps}
+            >
+                <div
+                    style={{
+                        display: "flex",
+                        flexDirection: "column",
+                        padding: 25,
+                    }}
+                >
+                    <label>
+                        {translate("pages.register.fields.email", "Email")}
+                    </label>
+                    <input
+                        name="email"
+                        type="email"
+                        size={20}
+                        autoCorrect="off"
+                        spellCheck={false}
+                        autoCapitalize="off"
+                        required
+                        value={email}
+                        onChange={(e) => setEmail(e.target.value)}
+                    />
+                    <label>
+                        {translate(
+                            "pages.register.fields.password",
+                            "Password",
+                        )}
+                    </label>
+                    <input
+                        name="password"
+                        type="password"
+                        required
+                        size={20}
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                    />
+                    <input
+                        type="submit"
+                        value={translate(
+                            "pages.register.buttons.submit",
+                            "Sign up",
+                        )}
+                        disabled={isLoading}
+                    />
+                    {loginLink ?? (
+                        <>
+                            <span>
+                                {translate(
+                                    "pages.login.buttons.haveAccount",
+                                    "Have an account?",
+                                )}{" "}
+                                {renderLink(
+                                    "/login",
+                                    translate("pages.login.signin", "Sign in"),
+                                )}
+                            </span>
+                        </>
+                    )}
+                </div>
+            </form>
+        </div>
+    );
+
+    return (
+        <div {...wrapperProps}>
+            {renderContent ? renderContent(content) : content}
+        </div>
+    );
+};

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

@@ -0,0 +1,104 @@
+import React, { useState } from "react";
+import {
+    UpdatePasswordFormTypes,
+    UpdatePasswordPageProps,
+} from "../../../../../interfaces";
+
+import { useTranslate, useUpdatePassword } from "@hooks";
+
+import { DivPropsType, FormPropsType } from "../..";
+import { useActiveAuthProvider } from "@definitions/helpers";
+
+type UpdatePasswordProps = UpdatePasswordPageProps<
+    DivPropsType,
+    DivPropsType,
+    FormPropsType
+>;
+
+export const UpdatePasswordPage: React.FC<UpdatePasswordProps> = ({
+    wrapperProps,
+    contentProps,
+    renderContent,
+    formProps,
+}) => {
+    const translate = useTranslate();
+
+    const authProvider = useActiveAuthProvider();
+    const { mutate: updatePassword, isLoading } =
+        useUpdatePassword<UpdatePasswordFormTypes>({
+            v3LegacyAuthProviderCompatible: Boolean(authProvider?.isLegacy),
+        });
+
+    const [newPassword, setNewPassword] = useState("");
+    const [confirmPassword, setConfirmPassword] = useState("");
+
+    const content = (
+        <div {...contentProps}>
+            <h1 style={{ textAlign: "center" }}>
+                {translate("pages.updatePassword.title", "Update Password")}
+            </h1>
+            <hr />
+            <form
+                onSubmit={(e) => {
+                    e.preventDefault();
+                    updatePassword({
+                        password: newPassword,
+                        confirmPassword,
+                    });
+                }}
+                {...formProps}
+            >
+                <div
+                    style={{
+                        display: "flex",
+                        flexDirection: "column",
+                        padding: 25,
+                    }}
+                >
+                    <label>
+                        {translate(
+                            "pages.updatePassword.fields.password",
+                            "New Password",
+                        )}
+                    </label>
+                    <input
+                        name="password"
+                        type="password"
+                        required
+                        size={20}
+                        value={newPassword}
+                        onChange={(e) => setNewPassword(e.target.value)}
+                    />
+                    <label>
+                        {translate(
+                            "pages.updatePassword.fields.confirmPassword",
+                            "Confirm New Password",
+                        )}
+                    </label>
+                    <input
+                        name="confirmPassword"
+                        type="password"
+                        required
+                        size={20}
+                        value={confirmPassword}
+                        onChange={(e) => setConfirmPassword(e.target.value)}
+                    />
+                    <input
+                        type="submit"
+                        disabled={isLoading}
+                        value={translate(
+                            "pages.updatePassword.buttons.submit",
+                            "Update",
+                        )}
+                    />
+                </div>
+            </form>
+        </div>
+    );
+
+    return (
+        <div {...wrapperProps}>
+            {renderContent ? renderContent(content) : content}
+        </div>
+    );
+};