Fixed login structure

elevenpassin · Dec 24, 2017 · 401e3d6 · 401e3d6
1 parent 306a2af
commit 401e3d6
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 12 deletions.
diff --git a/client/src/App.js b/client/src/App.js
@@ -3,7 +3,6 @@ import 'antd/dist/antd.css';
 import logo from './logo.svg';
 import './App.css';
 
-import { Row, Col } from 'antd';
 import { Route } from 'react-router-dom';
 
 import Account from './pages/Account.jsx';
@@ -15,7 +14,7 @@ class App extends Component {
   render() {
     return (
       <div className="App">
-        <Navbar />
+        <Route path="/" component={Navbar} />
         <header className="App-header">
           <img src={logo} className="App-logo" alt="logo" />
           <h1 className="App-title">GraphQL Based blog</h1>

diff --git a/client/src/components/Navbar.jsx b/client/src/components/Navbar.jsx
@@ -14,7 +14,7 @@ export default class Navbar extends Component {
   constructor(props){
     super(props);
     this.state = {
-      current: 'home'
+      current: this.props.location.pathname
     }
   }
 
@@ -26,12 +26,12 @@ export default class Navbar extends Component {
         selectedKeys={[this.state.current]}
         onClick={this.handleClick}
       >
-        <Menu.Item key="home">
+        <Menu.Item key="/">
           <Link to="/">
             Home
           </Link>
         </Menu.Item>
-        <Menu.Item key="account">
+        <Menu.Item key="/account">
           <Link to="/account">
             Login / Signup
           </Link>

diff --git a/client/src/pages/Account.jsx b/client/src/pages/Account.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Form, Icon, Input, Button, Checkbox } from 'antd';
+import { Form, Icon, Input, Button, Checkbox, Row, Col } from 'antd';
 const FormItem = Form.Item;
 
 class NormalLoginForm extends React.Component {
@@ -14,32 +14,35 @@ class NormalLoginForm extends React.Component {
   render() {
     const { getFieldDecorator } = this.props.form;
     return (
-      <Form onSubmit={this.handleSubmit} className="login-form">
+      <Form onSubmit={this.handleSubmit} className="login-form" style={{
+        width: '300px',
+        margin: '1em auto'
+      }}>
         <FormItem>
           {getFieldDecorator('userName', {
             rules: [{ required: true, message: 'Please input your username!' }],
           })(
             <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
-          )}
+            )}
         </FormItem>
         <FormItem>
           {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" />
-          )}
+            )}
         </FormItem>
         <FormItem>
           {getFieldDecorator('remember', {
             valuePropName: 'checked',
             initialValue: true,
           })(
             <Checkbox>Remember me</Checkbox>
-          )}
-          <a className="login-form-forgot" href="">Forgot password</a>
+            )}<br/>
+          <a className="login-form-forgot" href="">Forgot password</a><br/>
           <Button type="primary" htmlType="submit" className="login-form-button">
             Log in
-          </Button>
+          </Button><br/>
           Or <a href="">register now!</a>
         </FormItem>
       </Form>