zowe
diff --git a/‎api-catalog-ui/frontend/cypress/integration/e2e/login/login-bad.test.js
Lines changed: 2 additions & 2 deletions b/‎api-catalog-ui/frontend/cypress/integration/e2e/login/login-bad.test.js
Lines changed: 2 additions & 2 deletions
diff --git a/‎api-catalog-ui/frontend/cypress/integration/mocked-e2e/login/login-bad.test.js
Lines changed: 1 addition & 1 deletion b/‎api-catalog-ui/frontend/cypress/integration/mocked-e2e/login/login-bad.test.js
Lines changed: 1 addition & 1 deletion
diff --git a/‎api-catalog-ui/frontend/package-lock.json
Lines changed: 41268 additions & 2191 deletions b/‎api-catalog-ui/frontend/package-lock.json
Lines changed: 41268 additions & 2191 deletions
diff --git a/‎api-catalog-ui/frontend/package.json
Lines changed: 20 additions & 12 deletions b/‎api-catalog-ui/frontend/package.json
Lines changed: 20 additions & 12 deletions
diff --git a/‎api-catalog-ui/frontend/src/assets/css/APIMReactToastify.css
Lines changed: 3 additions & 0 deletions b/‎api-catalog-ui/frontend/src/assets/css/APIMReactToastify.css
Lines changed: 3 additions & 0 deletions
diff --git a/‎api-catalog-ui/frontend/src/components/App/App.test.js
Lines changed: 1 addition & 1 deletion b/‎api-catalog-ui/frontend/src/components/App/App.test.js
Lines changed: 1 addition & 1 deletion
diff --git a/‎api-catalog-ui/frontend/src/components/Error/Error.test.jsx
Lines changed: 1 addition & 1 deletion b/‎api-catalog-ui/frontend/src/components/Error/Error.test.jsx
Lines changed: 1 addition & 1 deletion
diff --git a/‎api-catalog-ui/frontend/src/components/ErrorBoundary/Shield/Shield.test.jsx
Lines changed: 10 additions & 8 deletions b/‎api-catalog-ui/frontend/src/components/ErrorBoundary/Shield/Shield.test.jsx
Lines changed: 10 additions & 8 deletions
diff --git a/‎api-catalog-ui/frontend/src/components/Login/Login.css
Lines changed: 101 additions & 11 deletions b/‎api-catalog-ui/frontend/src/components/Login/Login.css
Lines changed: 101 additions & 11 deletions
@@ -21,8 +21,8 @@ describe('>>> Login bad test', () => {
 
         cy.url().should('contain', '/login');
 
-        cy.get('.error-message-content')
+        cy.get('#error-message')
             .should('exist')
-            .should('contain', '(ZWEAS120E) Invalid username or password');
+            .should('contain', 'Invalid username or password');
     });
 });
@@ -25,6 +25,6 @@ describe('>>> Login bad test', () => {
 
         cy.get('.error-message-content')
             .should('exist')
-            .should('contain', '(ZWEAS120E) Invalid username or password');
+            .should('contain', 'Invalid username or password');
     });
 });
@@ -6,7 +6,13 @@
     "dependencies": {
         "@emotion/core": "10.1.1",
         "@emotion/is-prop-valid": "1.1.0",
+        "@emotion/react": "11.5.0",
         "@emotion/styled": "10.0.27",
+        "@material-ui/core": "4.12.3",
+        "@material-ui/icons": "4.11.2",
+        "@mui/icons-material": "5.1.0",
+        "@mui/material": "5.1.0",
+        "@types/react": "17.0.31",
         "agentkeepalive": "4.1.4",
         "emotion-theming": "10.0.27",
         "eslint": "7.11.0",
@@ -20,24 +26,24 @@
         "mineral-ui": "0.58.0",
         "mineral-ui-icons": "0.5.0",
         "npm": "7.20.5",
-        "react": "16.14.0",
-        "react-app-polyfill": "0.1.3",
-        "react-dom": "16.14.0",
+        "react": "17.0.2",
+        "react-app-polyfill": "2.0.0",
+        "react-dom": "17.0.2",
         "react-loadable": "5.5.0",
-        "react-redux": "5.1.1",
+        "react-redux": "7.2.5",
         "react-render-html": "0.6.0",
-        "react-router-dom": "4.3.1",
-        "react-router-tabs": "1.2.0",
+        "react-router-dom": "5.3.0",
+        "react-router-tabs": "1.3.2",
         "react-scripts": "4.0.3",
-        "react-toastify": "4.4.3",
-        "redux": "4.0.1",
+        "react-toastify": "8.0.3",
+        "redux": "4.1.1",
         "redux-catch": "1.3.1",
         "redux-logger": "3.0.6",
         "redux-observable": "1.0.0",
-        "redux-persist": "5.10.0",
-        "redux-persist-transform-filter": "0.0.18",
+        "redux-persist": "6.0.0",
+        "redux-persist-transform-filter": "0.0.20",
         "redux-thunk": "2.3.0",
-        "rxjs": "6.3.3",
+        "rxjs": "7.4.0",
         "swagger-ui-react": "3.25.0",
         "uuid": "3.3.2"
     },
@@ -47,7 +53,9 @@
         "test": "react-scripts test --silent --watchAll=false --env=jsdom components/* reducers/* epics/* actions/* selectors/* ErrorBoundary/* --reporters=default --reporters=jest-html-reporter --coverage",
         "cy:open": "cypress open",
         "cy:e2e:ci": "cypress run --spec \"cypress/integration/e2e/**/*.test.js\" --browser firefox --headless",
-        "cy:e2e:localhost": "cypress run --spec \"cypress/integration/e2e/**/*.test.js\" --browser firefox --headless",
+        "cy:e2e:localhost": "cypress run --spec \"cypress/integration/e2e/**/*.test.js\" --browser chrome --headless",
+        "cy:e2e:localhost-headful": "cypress run --spec \"cypress/integration/e2e/**/*.test.js\" --browser chrome",
+        "cy:e2e:localhost-firefox": "cypress run --spec \"cypress/integration/e2e/**/*.test.js\" --browser firefox --headless",
         "cy:e2e:mocked-backend": "cypress run --spec \"cypress/integration/mocked-e2e/**/*.test.js\" --env catalogHomePage=https://localhost:3000/ui/v1/apicagalog,username=user,password=user",
         "the-scripts-below-might-be-stale": "",
         "start": "cross-env HTTPS=true react-scripts start",
 
@@ -12,7 +12,7 @@ describe('>>> App component tests', () => {
     });
 
     it('should not show header on login route', () => {
-        const wrapper = mount(
+        const wrapper = shallow(
             <MemoryRouter initialEntries={['/login']}>
                 <App />
             </MemoryRouter>
 
@@ -1,7 +1,7 @@
 /* eslint-disable no-undef */
 
 import * as enzyme from 'enzyme';
-import { AjaxError } from 'rxjs/ajax/index';
+import { AjaxError } from 'rxjs/ajax';
 import Error from './Error';
 import { ApiError, MessageType } from '../../constants/error-constants';
 
 
@@ -1,6 +1,9 @@
 /* eslint-disable no-undef */
 import * as enzyme from 'enzyme';
 import Shield from './Shield';
+import React from "react";
+import { render } from "react-dom";
+import { act } from "react-dom/test-utils";
 
 const Child = () => {
     throw 'error';
@@ -17,13 +20,12 @@ const pauseErrorLogging = codeToRun => {
 describe('>>> Shield component tests', () => {
     it('Should catches error and renders message', () => {
         const errorMessage = 'Display the error stack';
-        pauseErrorLogging(() => {
-            const wrapper = enzyme.mount(
-                <Shield>
-                    <Child />
-                </Shield>
-            );
-            expect(wrapper.text()).toBe(errorMessage);
-        });
+        let container = document.createElement("div");
+        act(()=>{
+            render( <Shield>
+                <Child />
+            </Shield>,container)
+        })
+        expect(container.textContent).toBe(errorMessage);
     });
 });
@@ -1,5 +1,4 @@
 #login-form {
-    display: flex;
     flex-direction: column;
 }
 
@@ -33,27 +32,118 @@
     height: 100vh;
 }
 
-.error-message {
-    display: flex;
-    align-items: center;
-}
-
 .error-message-content {
     display: inline-flex;
     align-items: center;
 }
 
-.error-message > * {
-    padding: 0;
-    margin: 0;
-}
-
 @media only screen and (max-width: 1315px) {
     .picture {
         display: none;
     }
 }
 
 #error-message {
+    margin-bottom: 20px;
     align-self: baseline;
 }
+
+.w-form {
+    display: inline-table;
+    resize: inherit;
+    position: static;
+    margin-top: 60px;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: flex-end;
+    padding: 24px 24px 2px;
+    width: 344px;
+    height: 420px;
+    left: 428px;
+    top: calc(50% - 420px/2 - 0.29px);
+
+    background: #FFFFFF;
+    /* 16 dp */
+    box-shadow: 0px 16px 24px rgba(0, 0, 0, 0.14), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 8px 10px rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+}
+
+.username-input {
+    resize: inherit;
+    margin-left: 48px;
+}
+
+form#login-form {
+    width: 294px;
+}
+
+.product-title {
+    margin: 150px 0px;
+}
+
+
+.MuiButton-label {
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 6px 6px 6px 8px;
+    font-family: inherit;
+    font-style: normal;
+    font-weight: 500;
+    background: #0052CC;
+    font-size: 12px;
+    width: 50%;
+    height: 36px;
+    left: 218px;
+    ine-height: 16px;
+    /* identical to box height, or 114% */
+    letter-spacing: 1.25px;
+    text-transform: uppercase;
+    top: 0px;
+    color: #FFFFFF;
+    border-radius: 4px;
+    flex: none;
+    order: 0;
+    flex-grow: 0;
+    margin: 25px -14px 20px 0px;
+    position: static;
+}
+
+.MuiTypography-gutterBottom {
+    color: #57606E;
+}
+
+.login-typo {
+    color: black;
+}
+
+.text-block-4 {
+    color: black;
+}
+
+.loginButton {
+    display: inline-block;
+    width: 100px;
+    float: right;
+    margin-right: 10px;
+    position: relative;
+}
+
+#error-message {
+    padding: 20px;
+    display: inline-block;
+    color: #B71C1C;
+    background-color: #FCE4EC;
+}
+
+.login-inputs-container {
+    display: inline-block;
+}
+
+.errorIcon {
+    color: #de1b1b;
+}
+
+.logo-container {
+    margin: 24px;
+    width: 71px;
+}