withFormik({ // Transform outer props into form values mapPropsToValues: props => ({ email: props.userEmail, password: '' }), validationSchema: Yup.object().shape({ email: Yup.string().email('This is not a valid email'), password: Yup.string().min(6, 'Your password has to be at least 6 characters') }), // Submission handler handleSubmit: (values, { props, setStatus }) => { const { email, password } = values; if (!password) { setStatus('No details changed'); return; } setStatus('Sending...'); props .changeUserDetails(email, password) .then(() => setStatus('Details successfully changed!')) .catch(error => setStatus('Problems... please log out and try again')); } })(InnerForm)
withFormik({ mapPropsToValues: props => ({ username: '', password: '' }), validationSchema: Yup.object().shape({ username: Yup.string().required(), password: Yup.string().required() }), handleSubmit: async (values, { props, setSubmitting, setStatus }) => { const action = await props.loginUser(values); setSubmitting(false); if (action.type === LOGIN_FAILURE) { setStatus({ error: 'Unable to login with the provided credentials.'}); } else if (action.type === LOGIN_SUCCESS) { props.history.push('/dashboard/statements'); } }, })(LoginForm)
withFormik({ validationSchema: loginSchema, validateOnChange: false, validateOnBlur: false, mapPropsToValues: () => ({ [fieldName.login]: '', [fieldName.password]: '', }), handleSubmit: (values, formikBag) => { setTimeout(() => { if (values[fieldName.login] === 'login') { formikBag.setStatus('success'); } else { formikBag.setStatus('error'); } formikBag.setSubmitting(false); }, 1000); }, })(App)
withFormik({ // Transform outer props into form values mapPropsToValues: props => ({ email: '', password: '' }), // Add a custom validation function (this can be async too!) validationSchema: Yup.object().shape({ email: Yup.string() .required('Email is required') .email('This is not a valid email'), password: Yup.string() .required('Password is required') .min(6, 'Your password has to be at least 6 characters') }), // Submission handler handleSubmit: (values, { props, setStatus }) => { props.onLoginSubmit(values.email, values.password); } })(InnerForm)
withFormik({ mapPropsToValues: () => ({ username: "",
withFormik({ validationSchema: Yup.object().shape({ email: Yup.string()
withFormik({ mapPropsToValues: () => ({ current_password: "", new_password: "", re_new_password: "" }), validationSchema: Yup.object().shape({ current_password: Yup.string() .min(6, "This field must be at least 6 characters") .required("This field is required"), new_password: Yup.string() .min(8, "The password must be at least 8 characters") .required("New Password is required"), re_new_password: Yup.string() .oneOf([Yup.ref("new_password"), null], "Passwords don't match.") .required("Password confirm is required") }), handleSubmit: ( { current_password, new_password, re_new_password }, { props, setSubmitting, setErrors, resetForm } ) => { props .changePassword({ current_password, new_password, re_new_password }) .then(() => window.scrollTo(0, 0)) .then(() => resetForm()); setSubmitting(false); }, displayName: "ChangePasswordForm" //hlps with react devtools })(InnerPwForm)
withFormik({ validationSchema: Yup.object().shape({ name: Yup.string().required('What\'s your name?'), email: Yup.string().email('Invalid email address').required('What\'s your email?'), }), handleSubmit: (values, { setSubmitting }) => { setTimeout(() => { console.log(JSON.stringify(values, null, 2)); setSubmitting(false); }, 1000); } })(styled(ContactForm)` padding: 20px; border: 1px solid blue; `)
withFormik({ mapPropsToValues: props => ({ username: '', password1: '', password2: '', firstName: '', lastName: '', email: '' }), validationSchema: Yup.object().shape({ email: Yup.string().required().email('Invalid email'), username: Yup.string().required(), firstName: Yup.string().required('First name is a required field'), password1: Yup.string().required(), password2: Yup.string().required(), }), handleSubmit: async (values, { props, setSubmitting, setStatus }) => { const action = await props.registerUser(values); setSubmitting(false); if (action.type === REGISTER_FAILURE) { setStatus({ error: 'Unable to register with the provided data.'}); } else if (action.type === REGISTER_SUCCESS) { props.history.push('/dashboard/statements'); } }, })(RegisterForm)
withFormik({ // Transform outer props into form values mapPropsToValues: props => ({ email: '', password: '' }), // Add a custom validation function (this can be async too!) validationSchema: Yup.object().shape({ email: Yup.string() .required('Email is required') .email('This is not a valid email'), password: Yup.string() .required('Password is required') .min(6, 'Your password has to be at least 6 characters') }), // Submission handler handleSubmit: (values, { props, setStatus }) => { props.onRegisterSubmit(values.email, values.password); } })(InnerForm)
withFormik({ validationSchema: Yup.object().shape({ email: Yup.string()