Update Login

Author: zcmgyu

websocket-react/package.json

@@ -3,18 +3,22 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "base-64": "^0.1.0",
+    "material-ui": "^1.0.0-beta.23",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-scripts": "1.0.17",
+    "react-stomp": "^1.0.4",
     "react-websocket": "^2.0.0",
     "sockjs-client": "^1.1.4",
-    "stompjs": "^2.3.3"
+    "stompjs": "^2.3.3",
+    "typeface-roboto": "^0.0.45"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   },
-  "proxy": "http://localhost:8080"
+  "proxy": "http://localhost:9292"
 }

websocket-react/src/App.js

@@ -1,52 +1,15 @@
 import React, { Component } from 'react';
+import 'typeface-roboto'
 import logo from './logo.svg';
 import './App.css';
-// import EmployeeList from './EmployeeList'
-import SockJS from 'sockjs-client'
-import Stomp from 'stompjs'
-class App extends Component {
+import LoginFrom from './LoginForm'
+import SockJsClient from 'react-stomp'
 
-    constructor(props) {
-        super(props)
-        let socket = new SockJS("/gs-guide-websocket");
-        this.stompClient = Stomp.over(socket);
-        
-    }
 
+class App extends Component {
 
 
     handleClick() {
-        // Create stomp client over sockJS protocol (see Note 1)
-
-
-        // callback function to be called when stomp client is connected to server (see Note 2)
-        let connectCallback = function () {
-            alert("connected!");
-            this.stompClient.subscribe('/topic/greetings', function (greeting) {
-                alert(JSON.parse(greeting.body).content);
-            });
-        };
-
-        // callback function to be called when stomp client could not connect to server (see Note 3)
-        let errorCallback = function (error) {
-            // display the error's message header:
-            alert(error.headers.message);
-        };
-
-        // Connect as guest (Note 4)
-        this.stompClient.connect("guest", "guest", connectCallback, errorCallback);
-
-        // function showGreeting(message) {
-        //     alert(message);
-        // }
-
-        // // Connect as guest (Note 4)
-        // this.stompClient.connect({}, function (frame) {
-        //     console.log('Connected: ' + frame);
-        //     this.stompClient.subscribe('/topic/greetings', function (greeting) {
-        //         showGreeting(JSON.parse(greeting.body).content);
-        //     });
-        // });
 
     }
 
@@ -61,8 +24,11 @@ class App extends Component {
                     <img src={logo} className="App-logo" alt="logo" />
                     <h1 className="App-title">Welcome to React</h1>
                 </header>
-                <button onClick={this.handleClick.bind(this)}>Connect</button>
-                <button onClick={this.handleSendName.bind(this)}>Send Name</button>
+                <LoginFrom />
+                <div>
+                    <SockJsClient url='http://localhost:9292/ws' topics={['/user/queue/notify']}
+                        onMessage={(msg) => { console.log(msg); }} />
+                </div>
 
             </div>
         );

websocket-react/src/LoginForm.js

@@ -0,0 +1,96 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles'
+import TextField from 'material-ui/TextField'
+import Button from 'material-ui/Button'
+import base64 from 'base-64'
+
+
+
+const styles = theme => ({
+    container: {
+        display: 'flex',
+        flexWrap: 'wrap',
+    },
+    textField: {
+        marginLeft: theme.spacing.unit,
+        marginRight: theme.spacing.unit,
+        width: 200,
+    },
+    button: {
+        margin: theme.spacing.unit * 2,
+    }
+});
+
+class LoginForm extends Component {
+    state = {
+        username: '',
+        password: ''
+    };
+
+    handleLogin(e) {
+
+        const { username, password } = this.state
+        alert(username + password)
+
+        let headers = new Headers();
+        headers.append('Authorization', `Basic ${base64.encode('clientapp:123456')}`);
+
+        const body = {
+            
+            'username': username,
+            'password': password
+        }
+        fetch(`/oauth/token?grant_type=password&username=${username}&password=${password}`, {
+            method: "post",
+            headers: headers
+        })
+            .then(response => {
+                    return response.json()
+            })
+            .then(json => {
+                localStorage.setItem('result', JSON.stringify(json));
+            })
+            .catch(error => { throw error });
+    }
+
+    handleChange = name => event => {
+        this.setState({
+            [name]: event.target.value,
+        });
+    };
+
+    render() {
+        const { classes } = this.props
+        return (
+            <form className={classes.container}>
+                <TextField
+                    id="username"
+                    label="Username"
+                    className={classes.textField}
+                    value={this.state.name}
+                    onChange={this.handleChange('username')}
+                    margin="normal"
+                />
+                <TextField
+                    id="password"
+                    label="Password"
+                    type="password"
+                    className={classes.textField}
+                    value={this.state.name}
+                    onChange={this.handleChange('password')}
+                    margin="normal"
+                />
+                <Button raised color="primary" className={classes.button} onClick={this.handleLogin.bind(this)} >
+                    Login
+              </Button>
+            </form>
+        )
+    }
+}
+
+LoginForm.propTypes = {
+    classes: PropTypes.object.isRequired,
+}
+
+export default withStyles(styles)(LoginForm)