Login works

Author: marcodearaujo

.gitignore

@@ -1,3 +1,4 @@
 *.swp
 node_modules/**
-dist/**
+public/dist/**
+public/css/**

app/App.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Router, Route } from 'react-router'
+
+import iClientComponent from './components/iClient/iClientComponent';
+
+ReactDOM.render(
+    <Router>
+        <Route path="/" component={iClientComponent} />
+    </Router>,
+    document.getElementById('app')
+);

app/components/Client/ClientComponent.js

@@ -0,0 +1,40 @@
+import React from 'react';
+
+class ClientComponent extends React.Component{
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <div className="container hello">
+                <h1>{{ msg }}</h1>
+                <table className="table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Address</th>
+                            <th>City</th>
+                            <th></th>
+                            <th></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr v-for="client in clients">
+                            <td>{{ client.name }}</td>
+                            <td>{{ client.address }}</td>
+                            <td>{{ client.city }}</td>
+                            <td className="is-icon"> <a href="#"> <i className="fa fa-calendar"></i> </a>
+                            </td>
+                            <td className="is-icon"> <a href="#"> <i className="fa fa-search"></i>   </a>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        );
+    }
+}
+
+export default ClientComponent;
+

src/components/Home/HomeComponent.js renamed to app/components/Login/LoginComponent.js

@@ -1,8 +1,25 @@
 import React from 'react';
 
-class HomeComponent extends React.Component{
-    constructor(props) {
-        super(props);
+import iClientUser from './../../services/iClientUser';
+
+class LoginComponent extends React.Component{
+    constructor(props, context) {
+        super(props, context);
+        this.handleSubmit = this.handleSubmit.bind(this);
+    }
+
+    handleSubmit(e) {
+        e.preventDefault();
+
+        iClientUser.login(
+            this.refs.username.value,
+            this.refs.password.value
+        ).then((response) => {
+            localStorage.token = response.data.token;
+            window.location.href = "/";
+        });
+        console.log(this.refs.username.value);
+        console.log(this.refs.password.value);
     }
 
     render() {
@@ -17,18 +34,27 @@ class HomeComponent extends React.Component{
                                 </h1>
                                 <form onSubmit={this.handleSubmit}>
                                     <div className="box">
-                                        <label className="label">Email</label>
+                                        <label className="label">Username</label>
                                         <p className="control">
-                                            <input className="input" type="text" placeholder="[email protected]" />
+                                            <input
+                                                ref='username'
+                                                className="input"
+                                                type="text"
+                                                placeholder="Ex: jsmith" 
+                                            />
                                         </p>
                                         <label className="label">Password</label>
                                         <p className="control">
-                                            <input className="input" type="password" placeholder="●●●●●●●" />
+                                            <input
+                                                ref='password'
+                                                className="input"
+                                                type="password"
+                                                placeholder="●●●●●●●"
+                                            />
                                         </p>
                                         <hr />
                                         <p className="control">
                                             <button className="button is-primary">Login</button>
-                                            <button className="button is-default">Cancel</button>
                                         </p>
                                         <p className="has-text-centered">
                                             <a href="register.html">Register an Account</a>
@@ -46,4 +72,4 @@ class HomeComponent extends React.Component{
     }
 }
 
-export default HomeComponent;
+export default LoginComponent;

app/components/iClient/iClientComponent.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import LoginComponent from './../Login/LoginComponent';
+
+class iClientComponent extends React.Component{
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        let view = <h1>Teste</h1>;
+
+        if (!localStorage.token) {
+            view = <LoginComponent />;
+        }
+        return (
+            view
+        );
+    }
+}
+
+export default iClientComponent;
+

app/services/iClientUser.js

@@ -0,0 +1,14 @@
+import axios from 'axios';
+
+const host = 'http://localhost:3000';
+const iClientUser = {
+    login(username, password) {
+        let auth = {
+            username: username,
+            password: password
+        };
+        return axios.post(`${host}/authenticate`, auth);
+    }
+};
+
+export default iClientUser;

package.json

@@ -8,7 +8,8 @@
     "bulma": "^0.2.1",
     "font-awesome": "^4.6.3",
     "react": "^15.3.2",
-    "react-dom": "^15.3.2"
+    "react-dom": "^15.3.2",
+    "react-router": "^2.8.1"
   },
   "devDependencies": {
     "babel-core": "^6.17.0",

index.html renamed to public/index.html

@@ -3,8 +3,8 @@
     <head>
         <meta charset="utf-8">
         <title>React Client</title>
-        <link rel="stylesheet" href="node_modules/bulma/css/bulma.css">
-        <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
+        <link rel="stylesheet" href="css/bulma.css">
+        <link rel="stylesheet" href="css/font-awesome.min.css">
     </head>
     <body>
         <div id="app"></div>

src/main.js

@@ -1,7 +1,7 @@
 module.exports = {
-    entry: "./src/main.js",
+    entry: "./app/App.js",
     output: {
-        filename: "dist/bundle.js"
+        filename: "public/dist/bundle.js"
     },
     module: {
         loaders: [