ihealth-kit-registration/src/pages/activation/activate/pages/creation/Account.tsx

import React, { FC, useState } from 'react'
import { Form, Col, Row, Divider } from 'antd'
import { observer } from 'mobx-react-lite'
import { Link, Paragraph, Title } from 'components/Typography'
import { ErrorMessage, Input, LabelWithTooltip, Password } from 'components/FormControl'
import { StyledAccountForm, StyledAccountWrap, StyledHelp, StyledSubmitButton } from './styled'
import { ActivationStore } from 'stores/ActivationStore'
import { VerifyModal } from './VerifyModal'
import styled from 'styled-components'
import { Breakpoint } from 'components/Breakpoint'
import { ExternalPaths, Paths } from 'routes/Paths'

const StyledTitle = styled(Title)`
  ${props => props.theme.breakpoints.up('s')} {
	margin-bottom: 6px !important;
  }
`
export const Account: FC = observer(() => {
	const [store] = useState(ActivationStore.instance())
	const [showModal, setShowModal] = useState(false)
	const handleFinish = (values: any) => {
		// TODO: verify email
		console.log(values)
		setShowModal(true)
	}
	const handleClose = (success: boolean) => {
		setShowModal(false)
		if (success) {
			// TODO: register account
			store.handleNext()
		}
	}
	return (
		<StyledAccountWrap>
			<StyledTitle level={2}>Create an account to activate your kit</StyledTitle>
			<Paragraph style={{ marginBottom: 0 }}>If you already have an account, <Link inherit href={Paths.Login}>log
				in</Link> to continue.</Paragraph>
			<StyledAccountForm layout="vertical" onFinish={handleFinish}>
				<Row gutter={12}>
					<Col span={12}>
						<Form.Item name="firstName" label="First Name"
							rules={[
								{
									required: true, message: <ErrorMessage message="Please input your first name" />
								},
							]}
						>
							<Input />
						</Form.Item>
					</Col>
					<Col span={12}>
						<Form.Item name="lastName" label="Last Name" rules={[
							{
								required: true, message: <ErrorMessage message="Please input your last name" />
							},
						]}>
							<Input />
						</Form.Item>
					</Col>
				</Row>
				<Form.Item
					label="Email"
					name="email"
					rules={[
						{
							required: true, message: <ErrorMessage message="Please input your email" />
						},
						{ type: 'email', message: <ErrorMessage message="Invalid email" /> }
					]}
				>
					<Input placeholder="email@example.com" />
				</Form.Item>
				<Form.Item
					label="Confirm Email"
					name="repeatEmail"
					dependencies={['email']}
					rules={[
						{
							required: true, message: <ErrorMessage message="Please input your confirm email" />
						},
						{ type: 'email', message: <ErrorMessage message="Invalid email" /> },
						({ getFieldValue }) => ({
							validator(_, value) {
								if (!value || getFieldValue('email') === value) {
									return Promise.resolve();
								}
								return Promise.reject(new Error('The two email that you entered do not match'));
							},
						}),
					]}
				>
					<Input placeholder="email@example.com" />
				</Form.Item>
				<Form.Item
					label={
						<LabelWithTooltip
							primary
							title='The minimum password length is 8 characters and must contain at least 1 uppercase letter, 1 lowercase letter, 1 number, and 1 special character (!@#$%^&*).'
						>
							Please enter a new password
						</LabelWithTooltip>
					}
					name="password"
					rules={[
						{ required: true, message: <ErrorMessage message="Please input your password" /> },
						{
							pattern: /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/,
							message: <ErrorMessage message="Invalid password" />
						}
					]}
				>
					<Password placeholder="********" />
				</Form.Item>
				<Form.Item
					label="Confirm password"
					name="repeatPassword"
					dependencies={['password']}
					rules={[{ required: true, message: <ErrorMessage message="Please confirm your password" /> },
						({ getFieldValue }) => ({
							validator(_, value) {
								if (!value || getFieldValue('password') === value) {
									return Promise.resolve();
								}
								return Promise.reject(new Error('The two passwords that you entered do not match'));
							},
						}),
					]}
					extra={<StyledHelp>By clicking "Next" you acknowledge the <Link inherit href={ExternalPaths.PrivacyPolicy} target="_blank" rel="noopener noreferrer">Privacy Policy</Link> and agree to
						our <Link inherit href={ExternalPaths.TermsOfUse} target="_blank" rel="noopener noreferrer">Terms of Use</Link>.</StyledHelp>}
				>
					<Password placeholder="********" />
				</Form.Item>
				<Form.Item style={{ textAlign: 'center', marginTop: 28 }}>
					<StyledSubmitButton htmlType="submit">Next</StyledSubmitButton>
				</Form.Item>
			</StyledAccountForm>
			<Breakpoint s up>
				<div style={{ textAlign: "center", marginTop: 30 }}>
					<Link style={{ padding: '0 17px' }} href={ExternalPaths.Disclaimer} target="_blank" rel="noopener noreferrer">Disclaimer</Link>
					<Divider type="vertical" />
					<Link style={{ padding: '0 17px' }} href={ExternalPaths.PrivacyPolicy} target="_blank" rel="noopener noreferrer">Privacy</Link>
				</div>
			</Breakpoint>
			<VerifyModal open={showModal} onClose={handleClose} />
		</StyledAccountWrap>
	)
})