feat: add providers support on authpage register component. (refinede…

…v#2551) * feat(antd): add providers prop on auth register * feat(ui-types): add providers prop on auth register * fix(antd-auth-example): remove unuse pages * feat(antd-auth-example): add provider config on register page * chore: changeset
euoia · Sep 21, 2022 · a65525d · a65525d
1 parent f8a39a4
commit a65525d
Show file tree

Hide file tree

Showing 9 changed files with 76 additions and 25 deletions.
diff --git a/.changeset/modern-donuts-end.md b/.changeset/modern-donuts-end.md
@@ -0,0 +1,6 @@
+---
+"@pankod/refine-antd": minor
+"@pankod/refine-ui-types": minor
+---
+
+Add `providers` support on AuthPage register page.
diff --git a/examples/authentication/antd/src/App.tsx b/examples/authentication/antd/src/App.tsx
@@ -83,7 +83,31 @@ const App: React.FC = () => {
                 routes: [
                     {
                         path: "/register",
-                        element: <AuthPage type="register" />,
+                        element: (
+                            <AuthPage
+                                type="register"
+                                providers={[
+                                    {
+                                        name: "google",
+                                        label: "Sign in with Google",
+                                        icon: (
+                                            <GoogleOutlined
+                                                style={{ fontSize: 24 }}
+                                            />
+                                        ),
+                                    },
+                                    {
+                                        name: "github",
+                                        label: "Sign in with GitHub",
+                                        icon: (
+                                            <GithubOutlined
+                                                style={{ fontSize: 24 }}
+                                            />
+                                        ),
+                                    },
+                                ]}
+                            />
+                        ),
                     },
                     {
                         path: "/reset-password",

diff --git a/examples/authentication/antd/src/pages/auth/forgotPassword/index.tsx b/examples/authentication/antd/src/pages/auth/forgotPassword/index.tsx
diff --git a/examples/authentication/antd/src/pages/auth/index.tsx b/examples/authentication/antd/src/pages/auth/index.tsx
diff --git a/examples/authentication/antd/src/pages/auth/login/index.tsx b/examples/authentication/antd/src/pages/auth/login/index.tsx
diff --git a/examples/authentication/antd/src/pages/auth/register/index.tsx b/examples/authentication/antd/src/pages/auth/register/index.tsx
diff --git a/examples/authentication/antd/src/pages/auth/updatePassword/index.tsx b/examples/authentication/antd/src/pages/auth/updatePassword/index.tsx
diff --git a/packages/antd/src/components/pages/auth/components/register/index.tsx b/packages/antd/src/components/pages/auth/components/register/index.tsx
@@ -15,6 +15,7 @@ import {
     LayoutProps,
     CardProps,
     FormProps,
+    Divider,
 } from "antd";
 import {
     useTranslate,
@@ -34,6 +35,7 @@ type RegisterProps = RefineRegisterPageProps<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,
@@ -53,13 +55,49 @@ export const RegisterPage: React.FC<RegisterProps> = ({
         </Title>
     );
 
+    const renderProviders = () => {
+        if (providers) {
+            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<RefineRegisterFormTypes>
                 layout="vertical"
                 form={form}

diff --git a/packages/ui-types/src/types/auth.tsx b/packages/ui-types/src/types/auth.tsx
@@ -16,6 +16,7 @@ export interface RefineLoginFormTypes {
 export interface RefineRegisterFormTypes {
     email?: string;
     password?: string;
+    providerName?: string;
 }
 
 export interface RefineForgotPasswordFormTypes {
@@ -74,6 +75,11 @@ export type RefineAuthPageProps<
            * @optional
            */
           loginLink?: React.ReactNode;
+          /**
+           * @description Providers array for login with third party auth services.
+           * @optional
+           */
+          providers?: IProvider[];
       }>
     | PropsWithChildren<{
           /**
@@ -143,6 +149,7 @@ export type RefineRegisterPageProps<
     TContentProps extends {} = Record<keyof any, unknown>,
     TFormProps extends {} = Record<keyof any, unknown>,
 > = PropsWithChildren<{
+    providers?: IProvider[];
     loginLink?: React.ReactNode;
     wrapperProps?: TWrapperProps;
     renderContent?: (content: React.ReactNode) => React.ReactNode;