add login page connected to keycloak

package.json

@@ -3,21 +3,26 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@mui/icons-material": "^5.10.9",
+    "@mui/material": "^5.10.12",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.2",
     "@types/react": "^18.0.23",
     "@types/react-dom": "^18.0.7",
+    "axios": "^1.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
     "typescript": "^4.8.4",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "PORT=3006 react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

src/App.tsx

@@ -1,24 +1,16 @@
 import React from 'react';
-import logo from './logo.svg';
 import './App.css';
+import Login from './views/Login/Login';
+import { ThemeProvider } from '@mui/material/styles';
+import theme from './styles/theme'
 
 function App() {
   return (
+
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React!
-        </a>
-      </header>
+      <ThemeProvider theme={theme}>
+        <Login />
+      </ThemeProvider>
     </div>
   );
 }

src/config.json

@@ -0,0 +1,8 @@
+{
+    "realm": "ClientFhirServer",
+    "client": "pims-login",
+    "auth": "http://localhost:8180/auth",
+    "scopeId": "pims"
+
+  }
+

src/styles/theme.tsx

@@ -0,0 +1,42 @@
+import { createTheme } from '@mui/material/styles';
+const colors = {
+    white: '#fff',
+    black: '#222',
+    red: '#d95d77',
+    redLight: '#f50057',
+    blue: '#5d89a1',
+    green: '#28a745',
+    gray: '#4a4a4a',
+    grayLight: '#4e5258',
+    grayLighter: '#b5b6ba',
+    grayLightest: '#f2f3f9',
+};
+
+const paletteBase = {
+    primary: {
+        main: colors.blue
+    },
+    secondary: {
+        main: colors.redLight,
+        success: colors.green
+    },
+    error: {
+        main: colors.red
+    },
+    common: colors,
+    background: {
+        default: colors.grayLightest,
+        primary: colors.grayLight
+    },
+    text: {
+        primary: colors.black,
+        secondary: colors.black,
+        gray: colors.grayLighter
+    },
+};
+
+const theme = createTheme({
+    palette: { ...paletteBase },
+});
+
+export default theme;

src/views/DoctorOrders/DoctorOrders.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import DoctorOrders from './DoctorOrders';
+
+test('renders learn react link', () => {
+  render(<DoctorOrders />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

src/views/DoctorOrders/DoctorOrders.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import './DoctorOrders.css';
+
+function DoctorOrders() {
+  return (
+    <div className="DoctorOrders">
+        <h1>Doctor Orders</h1>
+    </div>
+  );
+}
+
+export default DoctorOrders;

src/views/Login/Login.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Login from './Login';
+
+test('renders learn react link', () => {
+  render(<Login />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

src/views/Login/Login.tsx

@@ -0,0 +1,109 @@
+
+
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+import Button from '@mui/material/Button';
+import CssBaseline from '@mui/material/CssBaseline';
+import TextField from '@mui/material/TextField';
+import Box from '@mui/material/Box';
+import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
+import LockOpenOutlinedIcon from '@mui/icons-material/LockOpenOutlined';
+import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
+import config from '../../config.json'
+import axios from 'axios';
+
+export default function Login() {
+  const [token, setToken] = React.useState<String | null>(null)
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const data = new FormData(event.currentTarget);
+    const user = data.get('username')?.toString()
+    const pass = data.get('password')?.toString()
+    if (user && pass) {
+      const params = new URLSearchParams();
+      params.append('username', user);
+      params.append('password', pass);
+      params.append('grant_type', 'password');
+      params.append('client_id', config.client);
+      axios
+        .post(
+          `${config.auth}/realms/${config.realm}/protocol/openid-connect/token`,
+          params,
+          { withCredentials: true }
+        )
+        .then((result) => {
+          // do something with the token
+          const scope = result.data.scope.split(' ').includes(config.scopeId)
+          if (scope) {
+            setToken(result.data.access_token)
+          } else {
+            console.error("Unauthorized User")
+          }
+        })
+        .catch(err => {
+          if (err.response.status === 401) {
+            console.error("Unknown user")
+          } else {
+            console.error(err)
+          }
+        });
+    }
+  };
+
+  return (
+
+    <Container component="main" maxWidth="xs">
+      <CssBaseline />
+      <Box
+        sx={{
+          marginTop: 8,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
+      >
+        {token ?
+          <Avatar sx={{ m: 1, bgcolor: 'secondary.success' }}>
+            <LockOpenOutlinedIcon />
+          </Avatar>
+          :
+          <Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
+            <LockOutlinedIcon />
+          </Avatar>
+        }
+        <Typography component="h1" variant="h5">
+          Sign in
+        </Typography>
+        <Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
+          <TextField
+            margin="normal"
+            fullWidth
+            id="email"
+            label="Username"
+            name="username"
+            autoComplete="username"
+            autoFocus
+          />
+          <TextField
+            margin="normal"
+            fullWidth
+            name="password"
+            label="Password"
+            type="password"
+            id="password"
+            autoComplete="current-password"
+          />
+          <Button
+            type="submit"
+            fullWidth
+            variant="contained"
+            sx={{ mt: 3, mb: 2 }}
+          >
+            Sign In
+          </Button>
+        </Box>
+      </Box>
+    </Container>
+  );
+}