Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | 3x 3x 3x 3x 3x 3x 3x 3x 27x 27x 27x 27x 3x 8x 1x 1x 9x 9x 9x | import { withFormik, FormikProps } from 'formik';
import React, { memo, FunctionComponent } from 'react';
import { object, ref, string } from 'yup';
import { PasswordRequirements } from '../customer';
import { withLanguage, TranslatedString, WithLanguageProps } from '../locale';
import { Button, ButtonVariant } from '../ui/button';
import { Fieldset, Form, Legend } from '../ui/form';
import SignUpPasswordField from './SignUpPasswordField';
export interface SignUpFormProps {
isSigningUp?: boolean;
customerCanBeCreated: boolean;
passwordRequirements: PasswordRequirements;
onSignUp(data: SignUpFormValues): void;
}
export interface SignUpFormValues {
password: string;
confirmPassword: string;
}
const GuestSignUpForm: FunctionComponent<SignUpFormProps & WithLanguageProps & FormikProps<SignUpFormValues>> = ({
isSigningUp,
customerCanBeCreated,
passwordRequirements: { minLength },
}) => (
<Fieldset
legend={
<Legend>
<TranslatedString id={ customerCanBeCreated ? 'customer.create_account_text' : 'customer.set_password_text' } />
</Legend>
}
>
{ !customerCanBeCreated &&
<p>
<TranslatedString id="customer.account_created_text" />
</p> }
<Form className="guest-signup form">
<SignUpPasswordField minLength={ minLength } />
<div className="form-actions">
<Button
id="createAccountButton"
isLoading={ isSigningUp }
type="submit"
variant={ ButtonVariant.Primary }
>
<TranslatedString id={ customerCanBeCreated ? 'customer.create_account_action' : 'customer.set_password_action' } />
</Button>
</div>
</Form>
</Fieldset>
);
export default withLanguage(withFormik<SignUpFormProps & WithLanguageProps, SignUpFormValues>({
mapPropsToValues: () => ({
password: '',
confirmPassword: '',
}),
handleSubmit: (values, { props: { onSignUp } }) => {
onSignUp(values);
},
validationSchema: ({
language,
passwordRequirements: { description, numeric, alpha, minLength },
}: SignUpFormProps & WithLanguageProps) => object({
password: string()
.required(description || language.translate('customer.password_required_error'))
.matches(numeric, description || language.translate('customer.password_number_required_error'))
.matches(alpha, description || language.translate('customer.password_letter_required_error'))
.min(minLength, description || language.translate('customer.password_under_minimum_length_error'))
.max(100, language.translate('customer.password_over_maximum_length_error')),
confirmPassword: string()
.required(language.translate('customer.password_confirmation_required_error'))
.oneOf([ref('password')], language.translate('customer.password_confirmation_error')),
}),
})(memo(GuestSignUpForm)));
|