feat: sample-custom-signup-page (#893)
This commit is contained in:
		
							parent
							
								
									d2411f5b63
								
							
						
					
					
						commit
						dce6558b55
					
				@ -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();
 | 
					  const { t } = useTranslation();
 | 
				
			||||||
  useCurrentDocumentTitle('Signin');
 | 
					  useCurrentDocumentTitle('Signin');
 | 
				
			||||||
  const ctx = useSystemSettings();
 | 
					  const ctx = useSystemSettings();
 | 
				
			||||||
  const { allowSignUp, smsAuthEnabled } = ctx?.data?.data || {};
 | 
					  const { allowSignUp, smsAuthEnabled } = ctx?.data?.data || {};
 | 
				
			||||||
 | 
					  const { schema, components, scope } = props;
 | 
				
			||||||
  return (
 | 
					  return (
 | 
				
			||||||
    <div>
 | 
					    <div>
 | 
				
			||||||
      {smsAuthEnabled ? (
 | 
					      {smsAuthEnabled ? (
 | 
				
			||||||
        <Tabs defaultActiveKey="password">
 | 
					        <Tabs defaultActiveKey="password">
 | 
				
			||||||
          <Tabs.TabPane tab={t('Sign in via account')} key="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>
 | 
				
			||||||
          <Tabs.TabPane tab={t('Sign in via phone')} key="phone">
 | 
					          <Tabs.TabPane tab={t('Sign in via phone')} key="phone">
 | 
				
			||||||
            <SchemaComponent
 | 
					            <SchemaComponent
 | 
				
			||||||
              schema={phoneForm}
 | 
					              schema={phoneForm}
 | 
				
			||||||
              scope={{ usePhoneSignIn }}
 | 
					              scope={{ usePhoneSignIn, ...scope }}
 | 
				
			||||||
              components={{
 | 
					              components={{
 | 
				
			||||||
                VerificationCode,
 | 
					                VerificationCode,
 | 
				
			||||||
 | 
					                ...components,
 | 
				
			||||||
              }}
 | 
					              }}
 | 
				
			||||||
            />
 | 
					            />
 | 
				
			||||||
          </Tabs.TabPane>
 | 
					          </Tabs.TabPane>
 | 
				
			||||||
        </Tabs>
 | 
					        </Tabs>
 | 
				
			||||||
      ) : (
 | 
					      ) : (
 | 
				
			||||||
        <SchemaComponent scope={{ usePasswordSignIn }} schema={passwordForm} />
 | 
					        <SchemaComponent
 | 
				
			||||||
 | 
					          components={{ ...components }}
 | 
				
			||||||
 | 
					          scope={{ usePasswordSignIn, ...scope }}
 | 
				
			||||||
 | 
					          schema={schema || passwordForm}
 | 
				
			||||||
 | 
					        />
 | 
				
			||||||
      )}
 | 
					      )}
 | 
				
			||||||
      {allowSignUp && (
 | 
					      {allowSignUp && (
 | 
				
			||||||
        <div>
 | 
					        <div>
 | 
				
			||||||
 | 
				
			|||||||
@ -7,7 +7,7 @@ import { Redirect, useHistory } from 'react-router-dom';
 | 
				
			|||||||
import { SchemaComponent, useAPIClient, useCurrentDocumentTitle, useSystemSettings } from '..';
 | 
					import { SchemaComponent, useAPIClient, useCurrentDocumentTitle, useSystemSettings } from '..';
 | 
				
			||||||
import VerificationCode from './VerificationCode';
 | 
					import VerificationCode from './VerificationCode';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const schema: ISchema = {
 | 
					const signupPageSchema: ISchema = {
 | 
				
			||||||
  type: 'object',
 | 
					  type: 'object',
 | 
				
			||||||
  name: uid(),
 | 
					  name: uid(),
 | 
				
			||||||
  'x-component': 'FormV2',
 | 
					  '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');
 | 
					  useCurrentDocumentTitle('Signup');
 | 
				
			||||||
  const ctx = useSystemSettings();
 | 
					  const ctx = useSystemSettings();
 | 
				
			||||||
  const { allowSignUp, smsAuthEnabled } = ctx?.data?.data || {};
 | 
					  const { allowSignUp, smsAuthEnabled } = ctx?.data?.data || {};
 | 
				
			||||||
  if (!allowSignUp) {
 | 
					  if (!allowSignUp) {
 | 
				
			||||||
    return <Redirect to={'/signin'} />;
 | 
					    return <Redirect to={'/signin'} />;
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					  const { schema, components, scope } = props;
 | 
				
			||||||
  return (
 | 
					  return (
 | 
				
			||||||
    <SchemaComponent
 | 
					    <SchemaComponent
 | 
				
			||||||
      schema={schema}
 | 
					      schema={schema || signupPageSchema}
 | 
				
			||||||
      components={{
 | 
					      components={{
 | 
				
			||||||
        VerificationCode,
 | 
					        VerificationCode,
 | 
				
			||||||
 | 
					        ...components,
 | 
				
			||||||
      }}
 | 
					      }}
 | 
				
			||||||
      scope={{ useSignup, smsAuthEnabled }}
 | 
					      scope={{ useSignup, smsAuthEnabled, ...scope }}
 | 
				
			||||||
    />
 | 
					    />
 | 
				
			||||||
  );
 | 
					  );
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
 | 
				
			|||||||
							
								
								
									
										28
									
								
								packages/samples/custom-signup-page/README.md
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										28
									
								
								packages/samples/custom-signup-page/README.md
									
									
									
									
									
										Normal file
									
								
							@ -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.
 | 
				
			||||||
							
								
								
									
										4
									
								
								packages/samples/custom-signup-page/client.d.ts
									
									
									
									
										vendored
									
									
										Executable file
									
								
							
							
						
						
									
										4
									
								
								packages/samples/custom-signup-page/client.d.ts
									
									
									
									
										vendored
									
									
										Executable file
									
								
							@ -0,0 +1,4 @@
 | 
				
			|||||||
 | 
					// @ts-nocheck
 | 
				
			||||||
 | 
					export * from './lib/client';
 | 
				
			||||||
 | 
					export { default } from './lib/client';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
							
								
								
									
										30
									
								
								packages/samples/custom-signup-page/client.js
									
									
									
									
									
										Executable file
									
								
							
							
						
						
									
										30
									
								
								packages/samples/custom-signup-page/client.js
									
									
									
									
									
										Executable file
									
								
							@ -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];
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					  });
 | 
				
			||||||
 | 
					});
 | 
				
			||||||
							
								
								
									
										11
									
								
								packages/samples/custom-signup-page/package.json
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										11
									
								
								packages/samples/custom-signup-page/package.json
									
									
									
									
									
										Normal file
									
								
							@ -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"
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
							
								
								
									
										4
									
								
								packages/samples/custom-signup-page/server.d.ts
									
									
									
									
										vendored
									
									
										Executable file
									
								
							
							
						
						
									
										4
									
								
								packages/samples/custom-signup-page/server.d.ts
									
									
									
									
										vendored
									
									
										Executable file
									
								
							@ -0,0 +1,4 @@
 | 
				
			|||||||
 | 
					// @ts-nocheck
 | 
				
			||||||
 | 
					export * from './lib/server';
 | 
				
			||||||
 | 
					export { default } from './lib/server';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
							
								
								
									
										30
									
								
								packages/samples/custom-signup-page/server.js
									
									
									
									
									
										Executable file
									
								
							
							
						
						
									
										30
									
								
								packages/samples/custom-signup-page/server.js
									
									
									
									
									
										Executable file
									
								
							@ -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];
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					  });
 | 
				
			||||||
 | 
					});
 | 
				
			||||||
							
								
								
									
										33
									
								
								packages/samples/custom-signup-page/src/client/index.tsx
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										33
									
								
								packages/samples/custom-signup-page/src/client/index.tsx
									
									
									
									
									
										Normal file
									
								
							@ -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>
 | 
				
			||||||
 | 
					  );
 | 
				
			||||||
 | 
					});
 | 
				
			||||||
							
								
								
									
										1
									
								
								packages/samples/custom-signup-page/src/index.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										1
									
								
								packages/samples/custom-signup-page/src/index.ts
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1 @@
 | 
				
			|||||||
 | 
					export { default } from './server';
 | 
				
			||||||
							
								
								
									
										19
									
								
								packages/samples/custom-signup-page/src/server/index.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										19
									
								
								packages/samples/custom-signup-page/src/server/index.ts
									
									
									
									
									
										Normal file
									
								
							@ -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;
 | 
				
			||||||
		Loading…
	
		Reference in New Issue
	
	Block a user