Merge pull request #1 from mcode/login-basics

add login page connected to keycloak

Author: KeeyanGhoreshi

package-lock.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"

package.json

@@ -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/App.tsx

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

src/config.json

@@ -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/styles/theme.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.css

@@ -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/DoctorOrders/DoctorOrders.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();
+});