Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /* eslint-disable no-template-curly-in-string */
- import React, { Component } from 'react';
- import { Formik } from 'formik';
- import * as Yup from 'yup';
- import { setLocale } from 'yup';
- import './AuthForm.css';
- import { Form, Col, Button, Container } from 'react-bootstrap';
- import FormInput from "../../../components/Form/Input";
- setLocale({
- mixed: {
- default: 'Não é válido',
- required: '${path} é necessário',
- },
- number: {
- min: 'Deve ser maior que ${min}',
- },
- string: {
- min: 'Mínimo de ${min} caracteres'
- }
- });
- export default class AuthForm extends Component {
- schema = Yup.object().shape({
- name: Yup.string().min(3).required().label("Nome"),
- email: Yup.string().email().required().label("Email"),
- password: Yup.string().min(6).required().label("Senha"),
- passwordConfirmation: Yup.string().required().label("Confirmação de Senha")
- .oneOf([Yup.ref('password')], 'Senhas devem coincidir')
- })
- render() {
- return (
- <Formik
- initialValues={{
- name: '',
- email: '',
- password: '',
- passwordConfirmation: ''
- }}
- validationSchema={this.schema}
- onSubmit={(values, actions) => {
- // same shape as initial values
- console.log(values);
- actions.setSubmitting(false);
- }}
- >
- {({ handleSubmit,
- isSubmitting,
- ...formik }) => (
- <Form onSubmit={handleSubmit}>
- <Container style={{ width: "100%", margin: "auto" }}>
- <Form.Row bsPrefix="row justify-content-center">
- <Form.Group as={Col} md={8} controlId="validationName">
- <Form.Label>Nome</Form.Label>
- <FormInput feedback="Belo Nome!" formik={formik}>
- <Form.Control
- type="text"
- name="name"
- placeholder="Seu Nome"
- />
- </FormInput>
- </Form.Group>
- </Form.Row>
- <Form.Row bsPrefix="row justify-content-center">
- <Form.Group as={Col} md={8} controlId="validationEmail">
- <Form.Label>Email</Form.Label>
- <FormInput feedback="Email Bonito!" formik={formik}>
- <Form.Control
- type="email"
- name="email"
- placeholder="Seu melhor Email"
- />
- </FormInput>
- </Form.Group>
- </Form.Row>
- <Form.Row bsPrefix="row justify-content-center">
- <Form.Group as={Col} md={4} controlId="validationPassword">
- <Form.Label>Senha</Form.Label>
- <FormInput feedback="Deveras Seguro!" formik={formik}>
- <Form.Control
- type="password"
- name="password"
- placeholder="Sua senha"
- />
- </FormInput>
- </Form.Group>
- <Form.Group as={Col} md={4} controlId="validationPasswordConfirmation">
- <Form.Label>Confirmar Senha</Form.Label>
- <FormInput feedback="Já vi isso antes!" formik={formik}>
- <Form.Control
- type="password"
- name="passwordConfirmation"
- placeholder="Sua senha - O Retorno"
- />
- </FormInput>
- </Form.Group>
- </Form.Row>
- <Form.Row bsPrefix="row justify-content-center">
- <Form.Group as={Col} md={8} controlId="authSubmissionButton">
- <Button
- block
- size="lg"
- variant="success"
- type="submit"
- disabled={isSubmitting}
- >
- Enviar
- </Button>
- </Form.Group>
- </Form.Row>
- </Container>
- </Form>
- )}
- </Formik>
- )
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement