From a64b97deb3c0ab937fe4fe075b2f4c36016ec7eb Mon Sep 17 00:00:00 2001 From: stefano-tonanni Date: Thu, 7 Feb 2019 10:14:19 +0100 Subject: [PATCH 1/2] [FIX ISSUE] [Firebase] Login #1 - Added login form component with fields --- package.json | 54 +++++++++++++-------------- src/components/FormLogin/index.js | 61 +++++++++++++++++++++++++++++++ src/components/Logo/style.css | 20 ++-------- src/index.js | 2 + src/pages/Login/index.js | 15 +++++++- src/pages/Login/style.css | 6 +++ src/style.css | 3 ++ 7 files changed, 117 insertions(+), 44 deletions(-) create mode 100644 src/components/FormLogin/index.js create mode 100644 src/pages/Login/style.css create mode 100644 src/style.css diff --git a/package.json b/package.json index 46645fc..37ebddd 100644 --- a/package.json +++ b/package.json @@ -1,28 +1,28 @@ { - "name": "adminPanel", - "version": "0.1.0", - "private": true, - "dependencies": { - "firebase": "^5.8.2", - "react": "^16.7.0", - "react-dom": "^16.7.0", - "react-router-dom": "^4.3.1", - "react-scripts": "2.1.3" - }, - "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject" - }, - "eslintConfig": { - "extends": "react-app" - }, - "browserslist": [ - ">0.2%", - "not dead", - "not ie <= 11", - "not op_mini all" - ] - } - \ No newline at end of file + "name": "adminPanel", + "version": "0.1.0", + "private": true, + "dependencies": { + "antd": "^3.13.1", + "firebase": "^5.8.2", + "react": "^16.7.0", + "react-dom": "^16.7.0", + "react-router-dom": "^4.3.1", + "react-scripts": "2.1.3" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test", + "eject": "react-scripts eject" + }, + "eslintConfig": { + "extends": "react-app" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/src/components/FormLogin/index.js b/src/components/FormLogin/index.js new file mode 100644 index 0000000..9d53e11 --- /dev/null +++ b/src/components/FormLogin/index.js @@ -0,0 +1,61 @@ +import React, { Component } from 'react'; + +import { + Form, + Icon, + Input, + Button, + Checkbox +} from 'antd'; + + +class NormalLoginForm extends Component { + + handleSubmit = (e) => { + e.preventDefault(); + this.props.form.validateFields((err, values) => { + if (!err) { + console.log('Received values of form: ', values); + // this.props.loginFormSubmit(values); + } + }); + } + + render() { + const { getFieldDecorator } = this.props.form; + return ( +
+ + {getFieldDecorator('userName', { + rules: [{ required: true, message: 'Please input your username!' }], + })( + } placeholder="Username" /> + )} + + + {getFieldDecorator('password', { + rules: [{ required: true, message: 'Please input your Password!' }], + })( + } type="password" placeholder="Password" /> + )} + + + +
+ Or register now! +
+ + + Forgot password + +
+ ); + } +} + +const WrappedNormalLoginForm = Form.create({ name: 'normal_login' })(NormalLoginForm); + + +export default WrappedNormalLoginForm; \ No newline at end of file diff --git a/src/components/Logo/style.css b/src/components/Logo/style.css index 9558ca0..c68a24e 100644 --- a/src/components/Logo/style.css +++ b/src/components/Logo/style.css @@ -1,24 +1,12 @@ .App-logo-wrapper { position: absolute; - top: 0; - right: 0; + top: 5px; + right: 5px; overflow: hidden; - - width: 100px; - height: 100px; - overflow: hidden; - display: flex; - align-items: center; - justify-content: center; - height: 75px; -} -.App-logo-wrapper:hover img{ - transform:scale(1) rotate(45deg); } -.App-logo-wrapper img { +.App-logo-wrapper img { + display: flex; width: 100px; height: 75px; - transition: all .4s cubic-bezier(0.175, 0.885, 0.32, 1.275); - transform:scale(.8) rotate(0deg); } \ No newline at end of file diff --git a/src/index.js b/src/index.js index 4f5398a..6292697 100644 --- a/src/index.js +++ b/src/index.js @@ -8,6 +8,8 @@ import ROUTES from './pages/routes'; import Home from './pages/Home'; import Login from './pages/Login'; +import './style.css'; +import 'antd/dist/antd.css'; /** Removed due to test environment */ // import * as serviceWorker from './serviceWorker'; diff --git a/src/pages/Login/index.js b/src/pages/Login/index.js index 93255cc..76263db 100644 --- a/src/pages/Login/index.js +++ b/src/pages/Login/index.js @@ -4,13 +4,26 @@ import { withFirebase } from '../../firebase'; import App from '../../App'; +import { Row, Col } from 'antd'; + +import WrappedNormalLoginForm from '../../components/FormLogin'; + +import './style.css'; + class Login extends Component { render() { return (

Login Page -

+ +
+ + + + + +
); } diff --git a/src/pages/Login/style.css b/src/pages/Login/style.css new file mode 100644 index 0000000..de16280 --- /dev/null +++ b/src/pages/Login/style.css @@ -0,0 +1,6 @@ +.admin-login-wrap{ + max-width: 400px; +} +.admin-login-wrap .ant-btn-primary{ + width: 100%; +} diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..b6aed65 --- /dev/null +++ b/src/style.css @@ -0,0 +1,3 @@ +.main{ + padding: 0 10px; +} \ No newline at end of file From 612a5862a9a4a9a6e5748f2369ff21f932c77a02 Mon Sep 17 00:00:00 2001 From: stefano-tonanni Date: Thu, 7 Feb 2019 17:18:17 +0100 Subject: [PATCH 2/2] [FIX ISSUE] [Firebase] Login #1 - Added register Form with validation - Fixed login Form --- src/App.js | 1 + src/components/FormLogin/index.js | 90 ++++++++-------- src/components/FormRegister/index.js | 156 +++++++++++++++++++++++++++ src/index.js | 2 + src/pages/Login/index.js | 10 +- src/pages/Register/index.js | 39 +++++++ src/pages/Register/style.css | 6 ++ 7 files changed, 260 insertions(+), 44 deletions(-) create mode 100644 src/components/FormRegister/index.js create mode 100644 src/pages/Register/index.js create mode 100644 src/pages/Register/style.css diff --git a/src/App.js b/src/App.js index f1ef097..a7147cd 100644 --- a/src/App.js +++ b/src/App.js @@ -20,6 +20,7 @@ class App extends Component { } componentDidMount() { + console.log(this.props.firebase.database); this.props.firebase.auth.onAuthStateChanged(authUser => { authUser ? this.setState({ isAuth: authUser }, this.redirectToSecure(true)) diff --git a/src/components/FormLogin/index.js b/src/components/FormLogin/index.js index 9d53e11..80b5c8a 100644 --- a/src/components/FormLogin/index.js +++ b/src/components/FormLogin/index.js @@ -11,48 +11,54 @@ import { class NormalLoginForm extends Component { - handleSubmit = (e) => { - e.preventDefault(); - this.props.form.validateFields((err, values) => { - if (!err) { - console.log('Received values of form: ', values); - // this.props.loginFormSubmit(values); - } - }); - } - - render() { - const { getFieldDecorator } = this.props.form; - return ( -
- - {getFieldDecorator('userName', { - rules: [{ required: true, message: 'Please input your username!' }], - })( - } placeholder="Username" /> - )} - - - {getFieldDecorator('password', { - rules: [{ required: true, message: 'Please input your Password!' }], - })( - } type="password" placeholder="Password" /> - )} - - - -
- Or register now! -
- - - Forgot password - -
- ); - } + constructor (props){ + super(props) + } + + handleSubmit = (e) => { + e.preventDefault(); + this.props.form.validateFields((err, values) => { + if (!err) { + console.log('Received values of form: ', values); + this.props.loginFormSubmit(values); + } + }); + } + + render() { + const { getFieldDecorator } = this.props.form; + return ( +
+ + {getFieldDecorator('email', { + rules: [ + { type: 'email', message: 'Email is not valid!' }, + { required: true, message: 'Please input your email!' }], + })( + } placeholder="email" /> + )} + + + {getFieldDecorator('password', { + rules: [{ required: true, message: 'Please input your Password!' }], + })( + } type="password" placeholder="Password" /> + )} + + + +
+ Or register now! +
+ + + Forgot password + +
+ ); + } } const WrappedNormalLoginForm = Form.create({ name: 'normal_login' })(NormalLoginForm); diff --git a/src/components/FormRegister/index.js b/src/components/FormRegister/index.js new file mode 100644 index 0000000..3574b2c --- /dev/null +++ b/src/components/FormRegister/index.js @@ -0,0 +1,156 @@ +import React, { Component } from 'react'; + +import { + Form, + Input, + Select, + Checkbox, + Button, + AutoComplete +} from 'antd'; + + +const { Option } = Select; +const AutoCompleteOption = AutoComplete.Option; + +class RegistrationForm extends React.Component { + state = { + confirmDirty: false, + autoCompleteResult: [], + }; + + handleSubmit = (e) => { + e.preventDefault(); + this.props.form.validateFieldsAndScroll((err, values) => { + if (!err) { + console.log('Received values of form: ', values); + this.props.registerFormSubmit(values); + } + }); + } + + handleConfirmBlur = (e) => { + const value = e.target.value; + this.setState({ confirmDirty: this.state.confirmDirty || !!value }); + } + + compareToFirstPassword = (rule, value, callback) => { + const form = this.props.form; + if (value && value !== form.getFieldValue('password')) { + callback('Two passwords that you enter is inconsistent!'); + } else { + callback(); + } + } + + validateToNextPassword = (rule, value, callback) => { + const form = this.props.form; + if (value && this.state.confirmDirty) { + form.validateFields(['confirm'], { force: true }); + } + callback(); + } + + render() { + const { getFieldDecorator } = this.props.form; + + const formItemLayout = { + labelCol: { + xs: { span: 24 }, + sm: { span: 8 }, + }, + wrapperCol: { + xs: { span: 24 }, + sm: { span: 16 }, + }, + }; + const tailFormItemLayout = { + wrapperCol: { + xs: { + span: 24, + offset: 0, + }, + sm: { + span: 16, + offset: 8, + }, + }, + }; + + return ( +
+ + {getFieldDecorator('username', { + rules: [{ + required: true, message: 'Please input a valid usernae!', + }], + })( + + )} + + + {getFieldDecorator('email', { + rules: [{ + type: 'email', message: 'The input is not valid E-mail!', + }, { + required: true, message: 'Please input your E-mail!', + }], + })( + + )} + + + {getFieldDecorator('password', { + rules: [{ + required: true, message: 'Please input your password!', + }, { + validator: this.validateToNextPassword, + }], + })( + + )} + + + {getFieldDecorator('confirm', { + rules: [{ + required: true, message: 'Please confirm your password!', + }, { + validator: this.compareToFirstPassword, + }], + })( + + )} + + + + {getFieldDecorator('agreement', { + valuePropName: 'checked', + rules: [{required: true, message: 'Please confirm the agreement!b'}] + })( + I have read the agreement + )} + + + + +
+ ); + } +} + +const WrappedRegistrationForm = Form.create({ name: 'register' })(RegistrationForm); + + +export default WrappedRegistrationForm; \ No newline at end of file diff --git a/src/index.js b/src/index.js index 6292697..9c3fc6b 100644 --- a/src/index.js +++ b/src/index.js @@ -8,6 +8,7 @@ import ROUTES from './pages/routes'; import Home from './pages/Home'; import Login from './pages/Login'; +import Register from './pages/Register'; import './style.css'; import 'antd/dist/antd.css'; @@ -20,6 +21,7 @@ ReactDOM.render( + diff --git a/src/pages/Login/index.js b/src/pages/Login/index.js index 76263db..998ddd9 100644 --- a/src/pages/Login/index.js +++ b/src/pages/Login/index.js @@ -9,8 +9,14 @@ import { Row, Col } from 'antd'; import WrappedNormalLoginForm from '../../components/FormLogin'; import './style.css'; - class Login extends Component { + constructor(props){ + super(props); + this.loginFormSubmit = this.loginFormSubmit.bind(this); + } + loginFormSubmit(){ + //TODO: manage login; + } render() { return ( @@ -20,7 +26,7 @@ class Login extends Component {
- +
diff --git a/src/pages/Register/index.js b/src/pages/Register/index.js new file mode 100644 index 0000000..1e319a7 --- /dev/null +++ b/src/pages/Register/index.js @@ -0,0 +1,39 @@ +import React, { Component } from 'react'; + +import { withFirebase } from '../../firebase'; + +import App from '../../App'; + +import { Row, Col } from 'antd'; + +import WrappedRegistrationForm from '../../components/FormRegister'; + +import './style.css'; + +class Register extends Component { + constructor(props){ + super(props); + this.registerFormSubmit = this.registerFormSubmit.bind(this); + } + registerFormSubmit(){ + //TODO: manage register; + } + render() { + return ( + +

+ Register Page +

+
+ + + + + +
+ + ); + } +} + +export default withFirebase(Register); diff --git a/src/pages/Register/style.css b/src/pages/Register/style.css new file mode 100644 index 0000000..b3581e1 --- /dev/null +++ b/src/pages/Register/style.css @@ -0,0 +1,6 @@ +.admin-register-wrap{ + max-width: 450px; +} +.admin-register-wrap .ant-btn-primary{ + width: 100%; +}