import { Typography , withStyles , WithStyles } from "@material-ui/core" ; import * as React from "react" ; import { compose , pure , setDisplayName } from "recompose" ; import { RegisterRequest } from "common" ; import { Dialog , Form , FormButton , FormInput , FormPassword , Header , Notification , TextLink } from "components" ; import { WithForm , withForm } from "enhancers" ; import { Styles , styles } from "./Register.styles" ; /**
 * Render properties
 */ export type RenderProps = WithStyles < Styles > & WithForm < RegisterRequest > ; param props return export const Render = ( { classes , form , request , handleChange , handleSubmit } ) => < Dialog > < Header primary = { window . env . COGNITO_IDENTITY_POOL_NAME } secondary = "Register for a new account" / > < Notification /> < Form onSubmit = { handleSubmit } > < FormInput name = "email" label = "Email address" required disabled = { form . success } value = { request . email } InputProps = { { readOnly : form . pending } } onChange = { handleChange } autoComplete = "email" / > < FormPassword name = "password" label = "Password" required disabled = { form . success } value = { request . password } InputProps = { { readOnly : form . pending } } onChange = { handleChange } autoComplete = "new-password" / > < FormButton className = { classes . button } disabled = { form . pending || form . success } > Register < /FormButton> < Typography className = { classes . authenticate } > Already have an account ? < TextLink to = "/" > Sign in < /TextLink> < /Typography> < /Form> < /Dialog>; return export function enhance ( ) { return compose < RenderProps , { } > ( withStyles ( styles ) , withForm < RegisterRequest > ( { message : "We just sent a verification link to your email address. " + "Please click on the link to complete your registration" , initial : { email : "" , password : "" } } ) , pure , setDisplayName ( "Register" ) ) ; } /**
 * Registration component
 */ export const Register = enhance ( ) ( Render ) ;