From 9f260adb01cd80c71eeac0027567b4a27522a3f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Ricks?= Date: Thu, 25 Feb 2021 08:35:57 +0100 Subject: [PATCH 1/8] Remove the unused image for login label The svg label doesn't show the correct font. Therefore just use the png version. --- gsa/public/img/login-label.svg | 1 - 1 file changed, 1 deletion(-) delete mode 100644 gsa/public/img/login-label.svg diff --git a/gsa/public/img/login-label.svg b/gsa/public/img/login-label.svg deleted file mode 100644 index 5c8cffa348..0000000000 --- a/gsa/public/img/login-label.svg +++ /dev/null @@ -1 +0,0 @@ -Greenbone Security Assistant \ No newline at end of file From 4fd53dad7cf4c2c5f2e2facb18aef23b939eb625 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Ricks?= Date: Thu, 25 Feb 2021 08:37:54 +0100 Subject: [PATCH 2/8] Add new images for the login background --- gsa/public/img/login-bottom.svg | 3 +++ gsa/public/img/login-top.svg | 3 +++ 2 files changed, 6 insertions(+) create mode 100644 gsa/public/img/login-bottom.svg create mode 100644 gsa/public/img/login-top.svg diff --git a/gsa/public/img/login-bottom.svg b/gsa/public/img/login-bottom.svg new file mode 100644 index 0000000000..32692c92ee --- /dev/null +++ b/gsa/public/img/login-bottom.svg @@ -0,0 +1,3 @@ + + + diff --git a/gsa/public/img/login-top.svg b/gsa/public/img/login-top.svg new file mode 100644 index 0000000000..6960e4177d --- /dev/null +++ b/gsa/public/img/login-top.svg @@ -0,0 +1,3 @@ + + + From ddc99727d2fb2b034a0761a8c329438e88d51181 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Ricks?= Date: Thu, 25 Feb 2021 08:39:36 +0100 Subject: [PATCH 3/8] Add a new green background for the login page Use a new design for the login page background. --- gsa/src/web/pages/login/loginform.js | 1 + gsa/src/web/pages/login/loginpage.js | 22 +++++++++++++++++++++- 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/gsa/src/web/pages/login/loginform.js b/gsa/src/web/pages/login/loginform.js index 5860efcf10..5dff1a5bcb 100644 --- a/gsa/src/web/pages/login/loginform.js +++ b/gsa/src/web/pages/login/loginform.js @@ -39,6 +39,7 @@ const Paper = styled(Layout)` box-shadow: 0px 14px 22px ${Theme.mediumGray}; padding: 4rem; width: 30rem; + z-index: ${Theme.Layers.higher}; `; const Panel = styled.div` diff --git a/gsa/src/web/pages/login/loginpage.js b/gsa/src/web/pages/login/loginpage.js index be83f78330..78a136affe 100644 --- a/gsa/src/web/pages/login/loginpage.js +++ b/gsa/src/web/pages/login/loginpage.js @@ -38,6 +38,8 @@ import PropTypes from 'web/utils/proptypes'; import Theme from 'web/utils/theme'; import withGmp from 'web/utils/withGmp'; +import Img from 'web/components/img/img'; + import Layout from 'web/components/layout/layout'; import Footer from 'web/components/structure/footer'; @@ -56,13 +58,29 @@ import LoginForm from './loginform'; const log = logger.getLogger('web.login'); const StyledLayout = styled(Layout)` - background: ${Theme.lightGray}; + background: radial-gradient( + 51.84% 102.52% at 58.54% 44.97%, + #baed81 0%, + ${Theme.green} 67.26% + ); flex-direction: column; justify-content: center; align-items: center; height: 100vh; `; +const BackgroundTopImage = styled(Img)` + position: fixed; + top: 0; + right: 0; +`; + +const BackgroundBottomImage = styled(Img)` + position: fixed; + bottom: 0; + left: 0; +`; + const isIE11 = () => navigator.userAgent.match(/Trident\/([\d.]+)/) ? +navigator.userAgent.match(/Trident\/([\d.]+)/)[1] >= 7 @@ -157,6 +175,8 @@ class LoginPage extends React.Component { return ( + + Date: Thu, 25 Feb 2021 08:40:17 +0100 Subject: [PATCH 4/8] Change color of visited Greenbone homepage link Using the Greenbone green will hide the link at the login page now. Therefore just use same color as non-visited link (gray). --- gsa/src/web/components/structure/footer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gsa/src/web/components/structure/footer.js b/gsa/src/web/components/structure/footer.js index 5b6ebb5a19..5e4a1f3e5f 100644 --- a/gsa/src/web/components/structure/footer.js +++ b/gsa/src/web/components/structure/footer.js @@ -25,7 +25,7 @@ import Theme from 'web/utils/theme'; const Link = styled.a` color: ${Theme.mediumGray}; &:link { - color: ${Theme.green}; + color: ${Theme.mediumGray}; } `; From 30fdf52cfd73db94d7ae87de92d37c7a2a5f8168 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Ricks?= Date: Thu, 25 Feb 2021 10:34:26 +0100 Subject: [PATCH 5/8] Update CHANGELOG --- CHANGELOG.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1d71ebcf19..5dac8ec27f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,7 +13,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). ### Changed - Refactored useFormValidation hook [#2704](https://github.com/greenbone/gsa/pull/2704) - Updated copyright and footer layout [#2687](https://github.com/greenbone/gsa/pull/2687) -- New login page layout [#2683](https://github.com/greenbone/gsa/pull/2683), [#2736](https://github.com/greenbone/gsa/pull/2736) +- New login page layout + [#2683](https://github.com/greenbone/gsa/pull/2683), + [#2736](https://github.com/greenbone/gsa/pull/2736), + [#2756](https://github.com/greenbone/gsa/pull/2756) - CVE Tables Page can now be used with the updated xml-format and CVSSv3(.1). [#2583](https://github.com/greenbone/gsa/pull/2583) - The CVSS v2 BaseScore calculator calculates the score on the client side now. [#2536](https://github.com/greenbone/gsa/pull/2536) From de6f2c5b23b66d3e00fcba3d26f17d5c74127f18 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Ricks?= Date: Thu, 25 Feb 2021 10:35:01 +0100 Subject: [PATCH 6/8] Use slightly round borders for login form panel --- gsa/src/web/pages/login/loginform.js | 1 + 1 file changed, 1 insertion(+) diff --git a/gsa/src/web/pages/login/loginform.js b/gsa/src/web/pages/login/loginform.js index 5dff1a5bcb..98a931947d 100644 --- a/gsa/src/web/pages/login/loginform.js +++ b/gsa/src/web/pages/login/loginform.js @@ -37,6 +37,7 @@ import useFormValues from 'web/components/form/useFormValues'; const Paper = styled(Layout)` background: ${Theme.white}; box-shadow: 0px 14px 22px ${Theme.mediumGray}; + border-radius: 3px; padding: 4rem; width: 30rem; z-index: ${Theme.Layers.higher}; From 2e803788f6bbf1649a9f603d2f14bc5a070a5c80 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Ricks?= Date: Thu, 25 Feb 2021 10:53:40 +0100 Subject: [PATCH 7/8] Update snapshot for the footer The visited link color has changed. --- .../components/structure/__tests__/__snapshots__/footer.js.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gsa/src/web/components/structure/__tests__/__snapshots__/footer.js.snap b/gsa/src/web/components/structure/__tests__/__snapshots__/footer.js.snap index aa209e7730..04cdb7074e 100644 --- a/gsa/src/web/components/structure/__tests__/__snapshots__/footer.js.snap +++ b/gsa/src/web/components/structure/__tests__/__snapshots__/footer.js.snap @@ -6,7 +6,7 @@ exports[`Footer tests should render footer with copyright 1`] = ` } .c1:link { - color: #66c430; + color: #787878; } .c0 { From 5477759e1168e6a280f4b65bf9fa4e15b3c76eb5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Ricks?= Date: Thu, 25 Feb 2021 10:55:16 +0100 Subject: [PATCH 8/8] Update LoginForm tests Use screen instead of the returned query functions of render. Also remove the snapshot test which is very flacky. --- .../__tests__/__snapshots__/loginform.js.snap | 379 ------------------ .../web/pages/login/__tests__/loginform.js | 49 +-- 2 files changed, 25 insertions(+), 403 deletions(-) delete mode 100644 gsa/src/web/pages/login/__tests__/__snapshots__/loginform.js.snap diff --git a/gsa/src/web/pages/login/__tests__/__snapshots__/loginform.js.snap b/gsa/src/web/pages/login/__tests__/__snapshots__/loginform.js.snap deleted file mode 100644 index 0aa7784a74..0000000000 --- a/gsa/src/web/pages/login/__tests__/__snapshots__/loginform.js.snap +++ /dev/null @@ -1,379 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`LoginForm tests should render full LoginForm 1`] = ` -.c3 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; -} - -.c5 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: stretch; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; -} - -.c8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: start; - -webkit-justify-content: start; - -ms-flex-pack: start; - justify-content: start; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: stretch; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - margin-top: -10px; -} - -.c2 > * { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; -} - -.c2 > * { - margin-top: 10px; -} - -.c1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -webkit-box-pack: start; - -webkit-justify-content: start; - -ms-flex-pack: start; - justify-content: start; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; -} - -.c4 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - height: 180px; -} - -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: start; - -webkit-justify-content: start; - -ms-flex-pack: start; - justify-content: start; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - background: #fff; - box-shadow: 0px 14px 22px #787878; - padding: 4rem; - width: 30rem; -} - -.c9 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: stretch; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - min-height: 12rem; - -webkit-box-pack: space-evenly; - -webkit-justify-content: space-evenly; - -ms-flex-pack: space-evenly; - justify-content: space-evenly; -} - -.c7 { - color: #d83636; - font-weight: bold; - text-align: center; - margin: 10px; -} - -.c12 { - box-sizing: border-box; - color: white; - background-color: text:white; - background: #4c4c4d; - hover: #212121; - disabled: #c2c2c2; - border: none; - border-radius: 3px; - font-size: 1rem; - font-weight: normal; - min-height: 2.25rem; - margin: 0; - padding-right: 1.25rem; - padding-left: 1.25rem; - margin-top: 2rem; - width: 100%; -} - -.c12:hover { - cursor: pointer; - background-color: #212121; -} - -.c12 + .c11 { - margin-left: 1.25rem; -} - -.c6 { - margin: 5px auto; - padding-bottom: 10px; - font-size: 9pt; - border: 1px solid #c8d3d9; - padding: 10px; - margin-bottom: 10px; - margin-top: 20px; -} - -.c10 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; -} - - -
-
-
-
-
-
- Greenbone Security Assistant -
-
-
-

- Warning: Connection unencrypted -

-

- The connection to this GSA is not encrypted, allowing anyone listening to the traffic to steal your credentials. -

-

- Please configure a TLS certificate for the HTTPS service or ask your administrator to do so as soon as possible. -

-
-
-
-
-

- Sign in to your account -

-
-
- -
- -
-
-
-
-
- -
- -
-
-
- -
-

- An Error Occurred -

-
- -
-
- - Powered By Greenbone Networks - -
-
-
-
-
- -`; diff --git a/gsa/src/web/pages/login/__tests__/loginform.js b/gsa/src/web/pages/login/__tests__/loginform.js index fe11af4269..307cccd23b 100644 --- a/gsa/src/web/pages/login/__tests__/loginform.js +++ b/gsa/src/web/pages/login/__tests__/loginform.js @@ -17,7 +17,7 @@ */ import React from 'react'; -import {rendererWith, fireEvent} from 'web/utils/testing'; +import {rendererWith, fireEvent, screen} from 'web/utils/testing'; import LoginForm from '../loginform'; @@ -30,7 +30,7 @@ describe('LoginForm tests', () => { const {render} = rendererWith({gmp}); - const {baseElement} = render( + const {getByName} = render( { />, ); - expect(baseElement).toMatchSnapshot(); + expect(getByName('username')).toBeInTheDocument(); + expect(getByName('password')).toBeInTheDocument(); }); test('should display error', () => { @@ -50,7 +51,7 @@ describe('LoginForm tests', () => { const {render} = rendererWith({gmp}); - const {getByTestId} = render( + render( { />, ); - expect(getByTestId('error')).toHaveTextContent('An Error Occurred'); + expect(screen.getByTestId('error')).toHaveTextContent('An Error Occurred'); }); test('should not display error by default', () => { @@ -67,11 +68,11 @@ describe('LoginForm tests', () => { const {render} = rendererWith({gmp}); - const {queryByTestId} = render( + render( , ); - expect(queryByTestId('error')).not.toBeInTheDocument(); + expect(screen.queryByTestId('error')).not.toBeInTheDocument(); }); test('should display insecure protocol message', () => { @@ -80,7 +81,7 @@ describe('LoginForm tests', () => { const {render} = rendererWith({gmp}); - const {getByTestId} = render( + render( { />, ); - expect(getByTestId('protocol-insecure')).toBeInTheDocument(); + expect(screen.getByTestId('protocol-insecure')).toBeInTheDocument(); }); test('should not display insecure protocol message by default', () => { @@ -110,7 +111,7 @@ describe('LoginForm tests', () => { const {render} = rendererWith({gmp}); - const {getByTestId} = render( + render( { />, ); - expect(getByTestId('IE11')).toBeInTheDocument(); + expect(screen.getByTestId('IE11')).toBeInTheDocument(); }); test('should not display IE11 message by default', () => { @@ -140,12 +141,12 @@ describe('LoginForm tests', () => { const {render} = rendererWith({gmp}); - const {queryByName} = render( + const {getByName} = render( , ); - expect(queryByName('username')).toBeInTheDocument(); - expect(queryByName('password')).toBeInTheDocument(); + expect(getByName('username')).toBeInTheDocument(); + expect(getByName('password')).toBeInTheDocument(); }); test('should allow to disable login fields', () => { @@ -172,7 +173,7 @@ describe('LoginForm tests', () => { const {render} = rendererWith({gmp}); - const {getByName, getByTestId} = render( + const {getByName} = render( , ); @@ -182,7 +183,7 @@ describe('LoginForm tests', () => { fireEvent.change(usernameField, {target: {value: 'foo'}}); fireEvent.change(passwordField, {target: {value: 'bar'}}); - const button = getByTestId('login-button'); + const button = screen.getByTestId('login-button'); fireEvent.click(button); expect(handleSubmit).toBeCalledWith('foo', 'bar'); @@ -194,12 +195,12 @@ describe('LoginForm tests', () => { const {render} = rendererWith({gmp}); - const {queryByTestId} = render( + render( , ); - expect(queryByTestId('guest-login')).not.toBeInTheDocument(); - expect(queryByTestId('guest-login-button')).not.toBeInTheDocument(); + expect(screen.queryByTestId('guest-login')).not.toBeInTheDocument(); + expect(screen.queryByTestId('guest-login-button')).not.toBeInTheDocument(); }); test('should allow to display guest login', () => { @@ -208,7 +209,7 @@ describe('LoginForm tests', () => { const {render} = rendererWith({gmp}); - const {getByTestId} = render( + render( { />, ); - expect(getByTestId('guest-login')).toBeInTheDocument(); - expect(getByTestId('guest-login-button')).toBeInTheDocument(); + expect(screen.getByTestId('guest-login')).toBeInTheDocument(); + expect(screen.getByTestId('guest-login-button')).toBeInTheDocument(); }); test('should allow to login as guest', () => { @@ -226,7 +227,7 @@ describe('LoginForm tests', () => { const {render} = rendererWith({gmp}); - const {getByTestId} = render( + render( { />, ); - const button = getByTestId('guest-login-button'); + const button = screen.getByTestId('guest-login-button'); fireEvent.click(button); expect(handleClick).toHaveBeenCalled();