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();
 | 
			
		||||
  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>
 | 
			
		||||
 | 
			
		||||
@ -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 }}
 | 
			
		||||
    />
 | 
			
		||||
  );
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
							
								
								
									
										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