[FIX ISSUE] [Firebase] Login #1

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"
-    ]
-  }
-  
+  "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"
+  ]
+}

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))

src/components/FormLogin/index.js

@@ -0,0 +1,67 @@
+import React, { Component } from 'react';
+
+import { 
+  Form, 
+  Icon, 
+  Input, 
+  Button,
+  Checkbox
+} from 'antd';
+
+
+class NormalLoginForm  extends Component {
+
+    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 (
+        <Form onSubmit={this.handleSubmit} className="login-form login-form--adminPanel">
+            <Form.Item>
+            {getFieldDecorator('email', {
+                rules: [
+                { type: 'email', message: 'Email is not valid!' },
+                { required: true, message: 'Please input your email!' }],
+            })(
+                <Input prefix={<Icon type="mail" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="email" />
+            )}
+            </Form.Item>
+            <Form.Item>
+            {getFieldDecorator('password', {
+                rules: [{ required: true, message: 'Please input your Password!' }],
+            })(
+                <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
+            )}
+            </Form.Item>
+            <Form.Item>
+            <Button type="primary" htmlType="submit">
+                Log in
+            </Button>
+            <div>
+                Or <a href="/register">register now!</a>
+            </div>
+            </Form.Item>
+            <Form.Item>
+            <a className="login-form-forgot" href="#">Forgot password</a>          
+            </Form.Item>
+        </Form>
+        );
+    }
+}
+
+const WrappedNormalLoginForm  = Form.create({ name: 'normal_login' })(NormalLoginForm);
+
+
+export default WrappedNormalLoginForm;

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 (
+      <Form onSubmit={this.handleSubmit}>
+        <Form.Item
+          {...formItemLayout}
+          label="Username"
+        >
+          {getFieldDecorator('username', {
+            rules: [{
+              required: true, message: 'Please input a valid usernae!',
+            }],
+          })(
+            <Input />
+          )}
+        </Form.Item>
+        <Form.Item
+          {...formItemLayout}
+          label="E-mail"
+        >
+          {getFieldDecorator('email', {
+            rules: [{
+              type: 'email', message: 'The input is not valid E-mail!',
+            }, {
+              required: true, message: 'Please input your E-mail!',
+            }],
+          })(
+            <Input />
+          )}
+        </Form.Item>
+        <Form.Item
+          {...formItemLayout}
+          label="Password"
+        >
+          {getFieldDecorator('password', {
+            rules: [{
+              required: true, message: 'Please input your password!',
+            }, {
+              validator: this.validateToNextPassword,
+            }],
+          })(
+            <Input type="password" />
+          )}
+        </Form.Item>
+        <Form.Item
+          {...formItemLayout}
+          label="Confirm Password"
+        >
+          {getFieldDecorator('confirm', {
+            rules: [{
+              required: true, message: 'Please confirm your password!',
+            }, {
+              validator: this.compareToFirstPassword,
+            }],
+          })(
+            <Input type="password" onBlur={this.handleConfirmBlur} />
+          )}
+        </Form.Item>        
+
+        <Form.Item {...tailFormItemLayout}>
+          {getFieldDecorator('agreement', {
+            valuePropName: 'checked',
+            rules: [{required: true, message: 'Please confirm the agreement!b'}]
+          })(
+            <Checkbox>I have read the <a href="">agreement</a></Checkbox>
+          )}
+        </Form.Item>
+        <Form.Item {...tailFormItemLayout}>
+          <Button type="primary" htmlType="submit">Register</Button>
+        </Form.Item>
+      </Form>
+    );
+  }
+}
+
+const WrappedRegistrationForm = Form.create({ name: 'register' })(RegistrationForm);
+
+
+export default WrappedRegistrationForm;

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);
 }

src/index.js

@@ -8,6 +8,9 @@ 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';
 
 /** Removed due to test environment */
 // import * as serviceWorker from './serviceWorker';
@@ -18,6 +21,7 @@ ReactDOM.render(
             <React.Fragment>
                 <Route exact path={ROUTES.HOME} component={Home} />
                 <Route path={ROUTES.LOGIN} component={Login} />
+                <Route path={ROUTES.REGISTER} component={Register} />
             </React.Fragment>
         </BrowserRouter>
     </FirebaseContext.Provider>

src/pages/Login/index.js

@@ -4,13 +4,32 @@ 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 {
+    constructor(props){
+        super(props);
+        this.loginFormSubmit = this.loginFormSubmit.bind(this);
+    }
+    loginFormSubmit(){
+        //TODO: manage login;
+    }
     render() {
         return (
             <App title="Login">
                 <h1>
                     Login Page
-                </h1>  
+                </h1>
+                <div>
+                  <Row type="flex" justify="center" gutter={15} >
+                    <Col xs={{span:24}} className="admin-login-wrap" >
+                      <WrappedNormalLoginForm loginFormSubmit={this.loginFormSubmit} />
+                    </Col>
+                  </Row>
+                </div>
             </App>
         );
     }

src/pages/Login/style.css

@@ -0,0 +1,6 @@
+.admin-login-wrap{
+  max-width: 400px;
+}
+.admin-login-wrap .ant-btn-primary{
+  width: 100%;
+}