From 62f5744b7b8a441ab4799a70f56ca950c9cbbec3 Mon Sep 17 00:00:00 2001 From: Steve Hu Date: Mon, 8 Jul 2019 21:45:50 -0400 Subject: [PATCH] fixes #186 update login-view for code service to submit the form --- code/Dockerfile-Debug | 4 + login-view/README.old.md | 6 ++ login-view/package.json | 1 + login-view/src/App.js | 196 +++++++++++++++++++++++++++++++---- login-view/src/setupProxy.js | 5 + 5 files changed, 193 insertions(+), 19 deletions(-) create mode 100644 code/Dockerfile-Debug create mode 100644 login-view/src/setupProxy.js diff --git a/code/Dockerfile-Debug b/code/Dockerfile-Debug new file mode 100644 index 00000000..2f64e7f0 --- /dev/null +++ b/code/Dockerfile-Debug @@ -0,0 +1,4 @@ +FROM openjdk:11.0.3-slim +EXPOSE 5005 +ADD /target/oauth2-code.jar server.jar +CMD ["/bin/sh","-c","java -agentlib:jdwp=transport=dt_socket,server=y,suspend=y,address=5005 -Dlight-4j-config-dir=/config -Dlogback.configurationFile=/config/logback.xml -Djava.security.krb5.conf=/config/krb5.conf -jar /server.jar"] diff --git a/login-view/README.old.md b/login-view/README.old.md index 83d89482..a410786d 100644 --- a/login-view/README.old.md +++ b/login-view/README.old.md @@ -14,3 +14,9 @@ or npm start ``` +To test it. + +``` +http://localhost:3000/?client_id=f7d42348-c647-4efb-a52d-4c5787421e72&user_type=employee&redirect_uri=http://localhost:8080/authorization&state=1222 +``` + diff --git a/login-view/package.json b/login-view/package.json index 6a891675..c17f4aca 100644 --- a/login-view/package.json +++ b/login-view/package.json @@ -5,6 +5,7 @@ "dependencies": { "@material-ui/core": "^4.1.3", "@material-ui/icons": "^4.2.1", + "http-proxy-middleware": "^0.19.1", "react": "^16.8.6", "react-dom": "^16.8.6", "react-redux": "^7.1.0", diff --git a/login-view/src/App.js b/login-view/src/App.js index ce9cbd29..e1dac87a 100644 --- a/login-view/src/App.js +++ b/login-view/src/App.js @@ -1,25 +1,183 @@ -import React from 'react'; -import logo from './logo.svg'; -import './App.css'; +import React, {useState} from 'react'; +import Avatar from '@material-ui/core/Avatar'; +import Button from '@material-ui/core/Button'; +import CssBaseline from '@material-ui/core/CssBaseline'; +import TextField from '@material-ui/core/TextField'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; +import Checkbox from '@material-ui/core/Checkbox'; +import LockOutlinedIcon from '@material-ui/icons/LockOutlined'; +import Typography from '@material-ui/core/Typography'; +import { makeStyles } from '@material-ui/core/styles'; +import Container from '@material-ui/core/Container'; + +const useStyles = makeStyles(theme => ({ + '@global': { + body: { + backgroundColor: theme.palette.common.white, + }, + }, + paper: { + marginTop: theme.spacing(8), + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + }, + avatar: { + margin: theme.spacing(1), + backgroundColor: theme.palette.secondary.main, + }, + form: { + width: '100%', // Fix IE 11 issue. + marginTop: theme.spacing(1), + }, + submit: { + margin: theme.spacing(3, 0, 2), + }, +})); + function App() { + const classes = useStyles(); + + let search = window.location.search; + let params = new URLSearchParams(search); + const [username, setUsername] = useState(''); + const [password, setPassword] = useState(''); + const [remember, setRemember] = useState(false); + const [state] = useState(params.get('state') == null ? '' : params.get('state')); + const [clientId] = useState(params.get('client_id') == null ? '' : params.get('client_id')); + const [userType] = useState(params.get('user_type') == null ? '' : params.get('user_type')); + const [redirectUri] = useState(params.get('redirect_uri') == null ? '' : params.get('redirect_uri')); + + const handleChangeUsername = e => { + setUsername(e.target.value) + }; + + const handleChangePassword = e => { + setPassword(e.target.value) + }; + + const handleChangeRemember = e => { + setRemember(e.target.value) + }; + + const handleSubmit = event => { + console.log("username = " + username + " password = " + password + " remember = " + remember); + console.log("state = " + state + " clientId = " + clientId + " userType = " + userType + " redirectUri = " + redirectUri); + event.preventDefault(); + + let data = { + j_username: username, + j_password: password, + state: state, + client_id: clientId, + user_type: userType, + redirect_uri: redirectUri + }; + + const formData = Object.keys(data).map(key => encodeURIComponent(key) + '=' + encodeURIComponent(data[key])).join('&'); + + console.log(formData); + // const formData = new URLSearchParams(); + // formData.append('j_username', {username}); + // formData.append('j_password', {password}); + + // var formData = new FormData(); + // for (var k in data) { + // formData.append(k, data[k]); + // } + + fetch("/oauth2/code", { + method: 'POST', + headers: { + 'Content-Type': 'application/x-www-form-urlencoded', + }, + body: formData + }) + .then(response => response.json()) + .then(data => console.log(data)) + .catch(error => console.log(error)); + }; + + return ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
-
+ + +
+ + + + + Sign in + +
+ + + + + + + } + label="Remember me" + onChange={handleChangeRemember} + /> + + +
+ ); } diff --git a/login-view/src/setupProxy.js b/login-view/src/setupProxy.js new file mode 100644 index 00000000..8fc502a1 --- /dev/null +++ b/login-view/src/setupProxy.js @@ -0,0 +1,5 @@ +const proxy = require('http-proxy-middleware'); + +module.exports = function(app) { + app.use(proxy('/oauth2/code', { target: 'https://localhost:6881', secure: false })); +};