fixes #186 update login-view for code service to submit the form

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

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
+```
+

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",

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 (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+      <Container component="main" maxWidth="xs">
+        <CssBaseline />
+        <div className={classes.paper}>
+          <Avatar className={classes.avatar}>
+            <LockOutlinedIcon />
+          </Avatar>
+          <Typography component="h1" variant="h5">
+            Sign in
+          </Typography>
+          <form className={classes.form} noValidate onSubmit={handleSubmit}>
+            <TextField
+                variant="outlined"
+                margin="normal"
+                required
+                fullWidth
+                id="j_username"
+                label="User Id"
+                name="j_username"
+                value={username}
+                autoComplete="username"
+                autoFocus
+                onChange={handleChangeUsername}
+            />
+            <TextField
+                variant="outlined"
+                margin="normal"
+                required
+                fullWidth
+                name="j_password"
+                value={password}
+                label="Password"
+                type="password"
+                id="j_password"
+                autoComplete="password"
+                onChange={handleChangePassword}
+            />
+            <TextField
+                name="state"
+                value={state}
+                type="hidden"
+                id="state"
+            />
+            <TextField
+                name="client_id"
+                value={clientId}
+                type="hidden"
+                id="client_id"
+            />
+            <TextField
+                name="user_type"
+                value={userType}
+                type="hidden"
+                id="user_type"
+            />
+            <TextField
+                name="redirect_uri"
+                value={redirectUri}
+                type="hidden"
+                id="redirect_uri"
+            />
+            <FormControlLabel
+                control={<Checkbox value="remember" color="primary" />}
+                label="Remember me"
+                onChange={handleChangeRemember}
+            />
+            <Button
+                type="submit"
+                fullWidth
+                variant="contained"
+                color="primary"
+                className={classes.submit}
+            >
+              Sign In
+            </Button>
+          </form>
+        </div>
+      </Container>
   );
 }
 

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