feat: sample-custom-signup-page (#893)

packages/core/client/src/user/SigninPage.tsx

@@ -120,30 +120,42 @@ export function usePhoneSignIn() {
   };
 }
 
-export const SigninPage = () => {
+export interface SigninPageProps {
+  schema?: ISchema;
+  components?: any;
+  scope?: any;
+}
+
+export const SigninPage = (props: SigninPageProps) => {
   const { t } = useTranslation();
   useCurrentDocumentTitle('Signin');
   const ctx = useSystemSettings();
   const { allowSignUp, smsAuthEnabled } = ctx?.data?.data || {};
+  const { schema, components, scope } = props;
   return (
     <div>
       {smsAuthEnabled ? (
         <Tabs defaultActiveKey="password">
           <Tabs.TabPane tab={t('Sign in via account')} key="password">
-            <SchemaComponent scope={{ usePasswordSignIn }} schema={passwordForm} />
+            <SchemaComponent scope={{ usePasswordSignIn }} schema={schema || passwordForm} />
           </Tabs.TabPane>
           <Tabs.TabPane tab={t('Sign in via phone')} key="phone">
             <SchemaComponent
               schema={phoneForm}
-              scope={{ usePhoneSignIn }}
+              scope={{ usePhoneSignIn, ...scope }}
               components={{
                 VerificationCode,
+                ...components,
               }}
             />
           </Tabs.TabPane>
         </Tabs>
       ) : (
-        <SchemaComponent scope={{ usePasswordSignIn }} schema={passwordForm} />
+        <SchemaComponent
+          components={{ ...components }}
+          scope={{ usePasswordSignIn, ...scope }}
+          schema={schema || passwordForm}
+        />
       )}
       {allowSignUp && (
         <div>

packages/core/client/src/user/SignupPage.tsx

@@ -7,7 +7,7 @@ import { Redirect, useHistory } from 'react-router-dom';
 import { SchemaComponent, useAPIClient, useCurrentDocumentTitle, useSystemSettings } from '..';
 import VerificationCode from './VerificationCode';
 
-const schema: ISchema = {
+const signupPageSchema: ISchema = {
   type: 'object',
   name: uid(),
   'x-component': 'FormV2',
@@ -126,20 +126,28 @@ export const useSignup = () => {
   };
 };
 
-export const SignupPage = () => {
+export interface SignupPageProps {
+  schema?: ISchema;
+  components?: any;
+  scope?: any;
+}
+
+export const SignupPage = (props: SignupPageProps) => {
   useCurrentDocumentTitle('Signup');
   const ctx = useSystemSettings();
   const { allowSignUp, smsAuthEnabled } = ctx?.data?.data || {};
   if (!allowSignUp) {
     return <Redirect to={'/signin'} />;
   }
+  const { schema, components, scope } = props;
   return (
     <SchemaComponent
-      schema={schema}
+      schema={schema || signupPageSchema}
       components={{
         VerificationCode,
+        ...components,
       }}
-      scope={{ useSignup, smsAuthEnabled }}
+      scope={{ useSignup, smsAuthEnabled, ...scope }}
     />
   );
 };

packages/samples/custom-signup-page/README.md

@@ -0,0 +1,28 @@
+# Custom sign up page
+
+## Register
+
+```ts
+yarn pm add sample-custom-signup-page
+```
+
+## Activate
+
+```bash
+yarn pm enable sample-custom-signup-page
+```
+
+## Launch the app
+
+```bash
+# for development
+yarn dev
+
+# for production
+yarn build
+yarn start
+```
+
+## Visit the custom page
+
+Open http://localhost:13000/hello-world in a web browser.

packages/samples/custom-signup-page/client.d.ts

@@ -0,0 +1,4 @@
+// @ts-nocheck
+export * from './lib/client';
+export { default } from './lib/client';
+

packages/samples/custom-signup-page/client.js

@@ -0,0 +1,30 @@
+"use strict";
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _index = _interopRequireWildcard(require("./lib/client"));
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _index.default;
+  }
+});
+
+Object.keys(_index).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _index[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _index[key];
+    }
+  });
+});

packages/samples/custom-signup-page/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@nocobase/plugin-sample-custom-signup-page",
+  "version": "0.7.4-alpha.7",
+  "main": "lib/server/index.js",
+  "dependencies": {},
+  "devDependencies": {
+    "@nocobase/client": "0.7.4-alpha.7",
+    "@nocobase/server": "0.7.4-alpha.7",
+    "@nocobase/test": "0.7.4-alpha.7"
+  }
+}

packages/samples/custom-signup-page/server.d.ts

@@ -0,0 +1,4 @@
+// @ts-nocheck
+export * from './lib/server';
+export { default } from './lib/server';
+

packages/samples/custom-signup-page/server.js

@@ -0,0 +1,30 @@
+"use strict";
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _index = _interopRequireWildcard(require("./lib/server"));
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _index.default;
+  }
+});
+
+Object.keys(_index).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _index[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _index[key];
+    }
+  });
+});

packages/samples/custom-signup-page/src/client/index.tsx

@@ -0,0 +1,33 @@
+import { useForm } from '@formily/react';
+import { RouteSwitchContext, SignupPage, useSignup } from '@nocobase/client';
+import React, { useContext } from 'react';
+
+const useCustomSignup = () => {
+  const { run } = useSignup();
+  const form = useForm();
+  return {
+    async run() {
+      console.log('useCustomSignup');
+      form.setValuesIn('url', 'bb');
+      await run();
+    },
+  };
+};
+
+const CustomSignupPage = (props) => {
+  return (
+    <div>
+      <div>Custom sign up page</div>
+      <SignupPage {...props} scope={{ useSignup: useCustomSignup }} />
+    </div>
+  );
+};
+
+export default React.memo((props) => {
+  const ctx = useContext(RouteSwitchContext);
+  return (
+    <RouteSwitchContext.Provider value={{ ...ctx, components: { ...ctx.components, SignupPage: CustomSignupPage } }}>
+      {props.children}
+    </RouteSwitchContext.Provider>
+  );
+});

packages/samples/custom-signup-page/src/index.ts

@@ -0,0 +1 @@
+export { default } from './server';

packages/samples/custom-signup-page/src/server/index.ts

@@ -0,0 +1,19 @@
+import { InstallOptions, Plugin } from '@nocobase/server';
+
+export class CustomSchemaScopePlugin extends Plugin {
+  getName(): string {
+    return this.getPackageName(__dirname);
+  }
+
+  beforeLoad() {
+    // TODO
+  }
+
+  async load() {}
+
+  async install(options: InstallOptions) {
+    // TODO
+  }
+}
+
+export default CustomSchemaScopePlugin;