Melhorias no formulário de cadastro e campo de data.

08 - Integrando frontend e backend/gerenciador-de-tarefas-completo/package.json

@@ -18,6 +18,7 @@
     "react-icons": "2.2.7",
     "react-router-dom": "4.2.2",
     "react-scripts": "1.1.0",
-    "universal-cookie": "2.1.2"
+    "universal-cookie": "2.1.2",
+    "vanilla-masker": "^1.2.0"
   }
 }

08 - Integrando frontend e backend/gerenciador-de-tarefas-completo/src/components/InputForm.js

@@ -1,36 +1,94 @@
 import React, { Component } from 'react';
 
-import { Form, Input, DatePicker } from 'antd';
+import 'rc-calendar/assets/index.css';
+import 'rc-time-picker/assets/index.css';
+import Calendar from 'rc-calendar';
+import DatePicker from 'rc-calendar/lib/Picker';
+import { Form, Input, Icon, Button } from 'antd';
+import locale from 'rc-calendar/lib/locale/pt_BR';
+import moment from 'moment';
 
+const InputGroup = Input.Group;
 const FormItem = Form.Item;
 
 export default class InputForm extends Component {
 
-    state = { valid: null };
+    state = {
+        valid: null,
+        opened: false,
+        focused: false,
+    };
 
     onChange = (event) => {
-        console.log(event.target.value);
-        const { validator, onChange } = this.props;
-        onChange(event);
+        const { validator, onChange, masker } = this.props;
+        if (masker) {
+            event.target.value = masker(event.target.value);
+        }
         if (validator) {
-            this.setState({ valid: validator(event.target.value) })
+            this.setState({ valid: !!validator(event.target.value) })
         }
+        onChange(event);
     }
 
-    onDateChange = (date, dateString) => {
-        console.log(date, dateString)
-        const { validator, id, onChange, } = this.props;
+    onDateChange = (date) => {
+        const { validator, id, onChange, dateFormat } = this.props;
+        const dateString = date.format(dateFormat);
+        if (validator) {
+            this.setState({ valid: !!validator(dateString) })
+        }
         onChange({
             target: {
                 value: dateString,
                 id: id,
             }
         });
-        if (validator) {
-            this.setState({ valid: !!validator(dateString) })
+    }
+
+    focus = () => {
+        this.refs.Input.focus();
+    }
+
+    blur = () => {
+        this.refs.Input.blur();
+    }
+
+    onFocus = () => {
+        console.log('onFocus')
+
+    }
+
+    onBlur = () => {
+        console.log('onBlur')
+    }
+
+    onFocusDatePicker = () => {
+        console.log('onFocusDatePicker')
+        if (this.props.autoOpen) {
+            this.setState({ opened: true });
+        }
+    }
+
+    onBlurDatePicker = () => {
+        console.log('onBlurDatePicker')
+    }
+
+    onOpenChange = (opened) => {
+        console.log('onOpenChange', opened)
+        this.setState({ opened });
+    }
+
+    onDateSelect = (date) => {
+        console.log('onDateSelect', date)
+        const { onDateSelect } = this.props;
+        if (onDateSelect) {
+            onDateSelect(date);
         }
     }
 
+    openDatePicker = () => {
+        this.setState({ opened: true });
+    }
+
     isValid = () => {
         if (!this.props.required)
             return true;
@@ -47,29 +105,68 @@ export default class InputForm extends Component {
     }
 
     render() {
-        const { label, id, errorMessage, type, dateFormat, validator, value, required, onChange, formItemLayout, ...others } = this.props;
-        const { valid } = this.state;
+        const { label, id, errorMessage, type, dateFormat, validator, masker, value,
+            required, onChange, formItemLayout, tabIndex, placeholder, ...others } = this.props;
+        const { valid, opened, focused } = this.state;
 
         let CustomInput;
         if (type === 'date') {
             CustomInput = (
-                <DatePicker id={id} onChange={this.onDateChange} format={dateFormat} />
+                // <DatePicker id={id} open={opened} onChange={this.onDateChange} format={dateFormat}
+                //     onOpenChange={this.onOpenChange}
+                //     onFocus={this.onFocusDatePicker} onBlur={this.onBlurDatePicker} />
+                <div>
+                    <InputGroup compact>
+                        <Input id={id} value={value}
+                            type="text"
+                            style={{ width: '50%' }}
+                            tabIndex={tabIndex}
+                            onChange={this.onChange}
+                            onFocus={this.onFocusDatePicker} onBlur={this.onBlurDatePicker} ref="Input" />
+                        <Button onClick={this.openDatePicker} type="primary" htmlType="button">
+                            <Icon type="calendar" style={{ color: '#fff' }} />
+                        </Button>
+                    </InputGroup>
+                    <DatePicker
+                        animation="slide-up"
+                        calendar={(
+                            <Calendar
+                                dateInputPlaceholder="please input"
+                                formatter={dateFormat}
+                                showDateInput={false}
+                                autoFocus={false}
+                                onSelect={this.onDateSelect}
+                                locale={locale}
+                            />
+                        )}
+                        onChange={this.onDateChange}
+                        open={opened}
+                        onOpenChange={this.onOpenChange}
+                        autoFocus={false}
+                        value={moment(value, dateFormat)}
+                    >
+                        {() => <span></span>}
+                    </DatePicker>
+                </div>
+
             )
         } else {
             CustomInput = (
-                <Input id={id} valid={valid} value={value} type={type} {...others} onChange={this.onChange} />
+                <Input id={id} value={value} type={type} {...others} onChange={this.onChange}
+                    placeholder={placeholder}
+                    onFocus={this.onFocus} onBlur={this.onBlur} tabIndex={tabIndex} ref="Input" />
             )
         }
 
         return (
             <FormItem
                 validateStatus={valid === null ? null : valid ? "success" : "error"}
                 help={valid === false ? errorMessage : null}
-                label={label}
+                label={label} placeholder={placeholder}
                 {...formItemLayout}
             >
                 {CustomInput}
             </FormItem>
         )
     }
-}
+}

08 - Integrando frontend e backend/gerenciador-de-tarefas-completo/src/layouts/MainLayout.js

@@ -8,7 +8,7 @@ import SideMenu from './SideMenu';
 import ContentRoutes from './ContentRoutes';
 import PrivateRoute from '../components/PrivateRoute';
 import LoginPage from '../pages/LoginPage';
-import UsuarioPage from '../pages/UsuarioPage';
+import CadastroPage from '../pages/CadastroPage';
 import { getUsuario } from '../utils/LoginManager';
 
 const { Header, Content } = Layout;
@@ -40,12 +40,12 @@ export default class MainLayout extends Component {
 
                 <Route path="/login" component={LoginPage} />
 
-                <Route path="/cadastro" component={UsuarioPage} />
+                <Route path="/cadastro" component={CadastroPage} />
 
                 <PrivateRoute path="/" render={this._renderContent} />
 
             </Switch>
         );
     }
 
-}
+}

08 - Integrando frontend e backend/gerenciador-de-tarefas-completo/src/pages/UsuarioPage.js → 08 - Integrando frontend e backend/gerenciador-de-tarefas-completo/src/pages/CadastroPage.js

@@ -4,9 +4,10 @@ import { Form, Button } from 'antd';
 import axios from 'axios';
 import moment from 'moment';
 
-import './UsuarioPage.css';
+import './CadastroPage.css';
 import InputForm from '../components/InputForm';
 import { validateEmail, validateSenha, validateCPF, checkFormIsValid } from '../utils/Validator';
+import { maskCPF, maskDate } from '../utils/Masker';
 
 const FormItem = Form.Item;
 const DATE_FORMAT = 'DD/MM/YYYY';
@@ -35,7 +36,7 @@ const tailFormItemLayout = {
     },
 };
 
-export default class UsuarioPage extends Component {
+export default class CadastroPage extends Component {
 
     state = {
         nome: '',
@@ -61,7 +62,6 @@ export default class UsuarioPage extends Component {
             cpf,
             nascimento: moment(nascimento, DATE_FORMAT).format("YYYY-MM-DD")
         }).then(response => {
-            console.log(response.status);
             if (response.status === 201) {
                 alert('Usuário cadastrado com sucesso!');
                 this.props.history.push('/login');
@@ -108,36 +108,38 @@ export default class UsuarioPage extends Component {
                 <h3>Informe seus dados para cadastro.</h3>
 
                 <InputForm label="Nome" id="nome" ref="nome" value={nome} onChange={this.onInputChange} required={true}
-                    validator={value => !!value && value.length >= 3} errorMessage="O nome é obrigatório."
+                    validator={value => !!value && value.length >= 3} errorMessage="O nome é obrigatório." tabIndex="1"
                 />
 
-                <InputForm label="E-mail" id="email" ref="email" value={email} onChange={this.onInputChange} required={true}
-                    validator={validateEmail} errorMessage="Informe um e-mail válido."
+                <InputForm label="CPF" id="cpf" ref="cpf" value={cpf} onChange={this.onInputChange} required={true}
+                    validator={validateCPF} masker={maskCPF} errorMessage="O CPF deve conter 11 dígitos." tabIndex="2"
                 />
 
-                <InputForm label="Senha" id="senha" ref="senha" value={senha} onChange={this.onInputChange} required={true}
-                    type="password"
-                    validator={validateSenha} errorMessage="A senha deve conter no mínimo 6 e no máximo 8 caracteres."
+                <InputForm label="Nascimento" id="nascimento" ref="nascimento" value={nascimento} onChange={this.onInputChange} required={true}
+                    type="date" dateFormat={DATE_FORMAT} tabIndex="3"
+                    validator={this.validateNascimento} errorMessage="Informe a data de nascimento no formato dd/mm/aaaa."
+                    onDateSelect={() => this.refs.email.focus()} masker={maskDate}
                 />
 
-                <InputForm label="CPF" id="cpf" ref="cpf" value={cpf} onChange={this.onInputChange} required={true}
-                    validator={validateCPF} errorMessage="O CPF deve conter 11 dígitos."
+                <InputForm label="E-mail" id="email" ref="email" type="email" value={email} onChange={this.onInputChange} required={true}
+                    validator={validateEmail} errorMessage="Informe um e-mail válido." tabIndex="4"
                 />
 
-                <InputForm label="Nascimento" id="nascimento" ref="nascimento" value={nascimento} onChange={this.onInputChange} required={true}
-                    type="date" dateFormat={DATE_FORMAT}
-                    validator={this.validateNascimento} errorMessage="Informe a data de nascimento no formato dd/mm/aaaa."
+                <InputForm label="Senha" id="senha" ref="senha" value={senha} onChange={this.onInputChange} required={true}
+                    type="password"
+                    validator={validateSenha} errorMessage="A senha deve conter no mínimo 6 e no máximo 8 caracteres."
+                    tabIndex="5"
                 />
 
                 <FormItem>
 
                     <Button type="danger" onClick={this.onCancelarClick} tabIndex={-1} >Cancelar</Button>
                     {' '}
-                    <Button htmlType="submit" type="primary" default>Salvar</Button>
+                    <Button htmlType="submit" type="primary" default tabIndex="6">Salvar</Button>
 
                 </FormItem>
 
             </Form>
         );
     }
-}
+}

08 - Integrando frontend e backend/gerenciador-de-tarefas-completo/src/pages/LoginPage.js

@@ -72,7 +72,7 @@ export default class LoginPage extends PureComponent {
             <Form onSubmit={this.onFormSubmit} className="login-page-form">
                 <h3>Efetue login para iniciar.</h3>
 
-                <InputForm label="E-mail" id="email" ref="email" value={email} onChange={this.onInputChange} required={true}
+                <InputForm label="E-mail" id="email" ref="email" type="email" value={email} onChange={this.onInputChange} required={true}
                     validator={validateEmail} errorMessage="Informe um e-mail válido." />
 
                 <InputForm label="Senha" id="senha" ref="senha" value={senha} onChange={this.onInputChange} type="password" required={true}
@@ -87,4 +87,4 @@ export default class LoginPage extends PureComponent {
             </Form>
         )
     }
-}
+}

08 - Integrando frontend e backend/gerenciador-de-tarefas-completo/src/utils/Masker.js

@@ -0,0 +1,9 @@
+import VMasker from 'vanilla-masker';
+
+export const maskCPF = (text) => {
+    return VMasker.toPattern(text, '999.999.999-99');
+}
+
+export const maskDate = (text) => {
+    return VMasker.toPattern(text, '99/99/9999');
+}

08 - Integrando frontend e backend/gerenciador-de-tarefas-completo/src/utils/Validator.js

@@ -9,8 +9,9 @@ export const validateSenha = (value) => {
     return !!value && value.length >= 6 && value.length <= 8;
 }
 
-export const validateCPF = (value) => {
-    return !!value && value.length == 11;
+export const validateCPF = (value = '') => {
+    const cpf = value.replace(/[^0-9]/g, '');
+    return !!cpf && cpf.length == 11;
 }
 
 export const checkFormIsValid = (refs) => {
@@ -20,4 +21,4 @@ export const checkFormIsValid = (refs) => {
         .reduce(((previousValid, input) => {
             return input.isValid() && previousValid;
         }), true)
-}
+}

08 - Integrando frontend e backend/gerenciador-de-tarefas-completo/yarn.lock

@@ -6984,6 +6984,10 @@ value-equal@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-0.4.0.tgz#c5bdd2f54ee093c04839d71ce2e4758a6890abc7"
 
+vanilla-masker@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/vanilla-masker/-/vanilla-masker-1.2.0.tgz#c2830e9d994a5fecd2261506477c2707fe589756"
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"