tachybase_todo/packages/client/src/user/SignupPage.tsx
2022-02-05 17:06:33 +08:00

102 lines
2.6 KiB
TypeScript

import { ISchema, useForm } from '@formily/react';
import { uid } from '@formily/shared';
import React from 'react';
import { useHistory } from 'react-router-dom';
import { SchemaComponent, useCurrentDocumentTitle } from '..';
const schema: ISchema = {
type: 'object',
name: uid(),
'x-component': 'Form',
properties: {
email: {
type: 'string',
required: true,
'x-component': 'Input',
'x-validator': 'email',
'x-decorator': 'FormItem',
'x-component-props': { placeholder: '{{t("Email")}}', style: {} },
},
password: {
type: 'string',
required: true,
'x-component': 'Password',
'x-decorator': 'FormItem',
'x-component-props': { placeholder: '{{t("Password")}}', checkStrength: true, style: {} },
'x-reactions': [
{
dependencies: ['.confirm_password'],
fulfill: {
state: {
selfErrors: '{{$deps[0] && $self.value && $self.value !== $deps[0] ? t("Password mismatch") : ""}}',
},
},
},
],
},
confirm_password: {
type: 'string',
required: true,
'x-component': 'Password',
'x-decorator': 'FormItem',
'x-component-props': { placeholder: '{{t("Confirm password")}}', checkStrength: true, style: {} },
'x-reactions': [
{
dependencies: ['.password'],
fulfill: {
state: {
selfErrors: '{{$deps[0] && $self.value && $self.value !== $deps[0] ? t("Password mismatch") : ""}}',
},
},
},
],
},
actions: {
type: 'void',
'x-component': 'div',
properties: {
submit: {
title: '{{t("Sign up")}}',
type: 'void',
'x-component': 'Action',
'x-component-props': {
block: true,
type: 'primary',
useAction: '{{ useSignup }}',
style: { width: '100%' },
},
},
},
},
link: {
type: 'void',
'x-component': 'div',
properties: {
link: {
type: 'void',
'x-component': 'Link',
'x-component-props': { to: '/signin' },
'x-content': '{{t("Log in with an existing account")}}',
},
},
},
},
};
const useSignup = () => {
const history = useHistory();
const form = useForm();
return {
async run() {
await form.submit();
console.log(form.values);
// history.push('/signin');
},
};
};
export const SignupPage = () => {
useCurrentDocumentTitle('Signup');
return <SchemaComponent schema={schema} scope={{ useSignup }} />;
};