From 29bff54cfdd4108a016c98ba086df55a37c6c7bf Mon Sep 17 00:00:00 2001 From: Razvan Georgescu Date: Thu, 11 Jul 2024 18:56:22 +0300 Subject: [PATCH] DTS-00000 Update logos, add toggle for credentials login, add copyrights footer --- .../central-login-ui-react/.env | 3 +- .../public/images/APGroup.svg | 12 +- .../public/images/KnowHOWGroup.svg | 18 +- .../public/images/RetrosGroup.svg | 10 +- .../central-login-ui-react/src/Routes.jsx | 7 +- .../src/components/Footer/index.css | 8 + .../src/components/Footer/index.jsx | 14 ++ .../src/components/FooterLayout/index.jsx | 13 ++ .../src/components/SuiteLogos/index.jsx | 2 +- .../src/pages/login/index.jsx | 156 +++++++++++------- 10 files changed, 157 insertions(+), 86 deletions(-) create mode 100644 central-auth-service/central-login-ui-react/src/components/Footer/index.css create mode 100644 central-auth-service/central-login-ui-react/src/components/Footer/index.jsx create mode 100644 central-auth-service/central-login-ui-react/src/components/FooterLayout/index.jsx diff --git a/central-auth-service/central-login-ui-react/.env b/central-auth-service/central-login-ui-react/.env index 83bb2d3977..164b19e89a 100644 --- a/central-auth-service/central-login-ui-react/.env +++ b/central-auth-service/central-login-ui-react/.env @@ -1,3 +1,4 @@ REACT_APP_PSKnowHOW= REACT_APP_DNS= -REACT_APP_SPEED_SUITE= \ No newline at end of file +REACT_APP_SPEED_SUITE= +REACT_APP_LOGIN_BUTTON_TEXT= \ No newline at end of file diff --git a/central-auth-service/central-login-ui-react/public/images/APGroup.svg b/central-auth-service/central-login-ui-react/public/images/APGroup.svg index 44403179c7..2c8a304e7c 100644 --- a/central-auth-service/central-login-ui-react/public/images/APGroup.svg +++ b/central-auth-service/central-login-ui-react/public/images/APGroup.svg @@ -1,7 +1,7 @@ - - - - - - + + + + + + diff --git a/central-auth-service/central-login-ui-react/public/images/KnowHOWGroup.svg b/central-auth-service/central-login-ui-react/public/images/KnowHOWGroup.svg index 6911fac4cc..862044384f 100644 --- a/central-auth-service/central-login-ui-react/public/images/KnowHOWGroup.svg +++ b/central-auth-service/central-login-ui-react/public/images/KnowHOWGroup.svg @@ -1,10 +1,10 @@ - - - - - - - - - + + + + + + + + + diff --git a/central-auth-service/central-login-ui-react/public/images/RetrosGroup.svg b/central-auth-service/central-login-ui-react/public/images/RetrosGroup.svg index 26159fa081..182e736f36 100644 --- a/central-auth-service/central-login-ui-react/public/images/RetrosGroup.svg +++ b/central-auth-service/central-login-ui-react/public/images/RetrosGroup.svg @@ -1,6 +1,6 @@ - - - - - + + + + + diff --git a/central-auth-service/central-login-ui-react/src/Routes.jsx b/central-auth-service/central-login-ui-react/src/Routes.jsx index 85f8c487df..943f38dcf5 100644 --- a/central-auth-service/central-login-ui-react/src/Routes.jsx +++ b/central-auth-service/central-login-ui-react/src/Routes.jsx @@ -1,7 +1,8 @@ import React from "react"; -import { Routes, Route, Navigate } from "react-router-dom"; +import {Routes, Route, Navigate} from 'react-router-dom'; import { Img } from "./components/Img"; import StatusPage from './pages/status'; +import FooterLayout from './components/FooterLayout'; const LoginPage = React.lazy(() => import("./pages/login")); const ForgotPasswordPage = React.lazy(() => import('./pages/forgot-password')); const ResetPasswordPage = React.lazy(() => import('./pages/reset-password')); @@ -10,11 +11,12 @@ const ProjectRoutes = () => { const search = window.location.href; return ( {`Spinner`}}> {/* */} + } /> } /> @@ -23,6 +25,7 @@ const ProjectRoutes = () => { } /> }> + {/* */} ); diff --git a/central-auth-service/central-login-ui-react/src/components/Footer/index.css b/central-auth-service/central-login-ui-react/src/components/Footer/index.css new file mode 100644 index 0000000000..90c3f41e6f --- /dev/null +++ b/central-auth-service/central-login-ui-react/src/components/Footer/index.css @@ -0,0 +1,8 @@ +footer { + color: #383838; + text-align: center; + padding: 1rem 0; + position: fixed; + bottom: 0; + width: 100%; +} \ No newline at end of file diff --git a/central-auth-service/central-login-ui-react/src/components/Footer/index.jsx b/central-auth-service/central-login-ui-react/src/components/Footer/index.jsx new file mode 100644 index 0000000000..98368259ef --- /dev/null +++ b/central-auth-service/central-login-ui-react/src/components/Footer/index.jsx @@ -0,0 +1,14 @@ +import React from 'react'; +import './index.css'; + +const _currentYear = new Date().getFullYear(); + +const Footer = () => { + return ( + + ); +}; + +export default Footer; \ No newline at end of file diff --git a/central-auth-service/central-login-ui-react/src/components/FooterLayout/index.jsx b/central-auth-service/central-login-ui-react/src/components/FooterLayout/index.jsx new file mode 100644 index 0000000000..ca3774ee57 --- /dev/null +++ b/central-auth-service/central-login-ui-react/src/components/FooterLayout/index.jsx @@ -0,0 +1,13 @@ +import React from 'react'; +import Footer from '../Footer'; + +const FooterLayout = ({ children }) => { + return ( +
+
{children}
+
+
+ ); +}; + +export default FooterLayout; \ No newline at end of file diff --git a/central-auth-service/central-login-ui-react/src/components/SuiteLogos/index.jsx b/central-auth-service/central-login-ui-react/src/components/SuiteLogos/index.jsx index 9af9e4865c..9882edba59 100644 --- a/central-auth-service/central-login-ui-react/src/components/SuiteLogos/index.jsx +++ b/central-auth-service/central-login-ui-react/src/components/SuiteLogos/index.jsx @@ -1,7 +1,7 @@ import React from 'react'; import BgItem from "../../components/BgItem"; -const bg = ['KnowHOWGroup', 'RetrosGroup', 'APGroup']; +const bg = ['APGroup', 'KnowHOWGroup', 'RetrosGroup']; const SuiteLogos = () => { const speedSuite = process.env.NODE_ENV === 'production' ? window.env['REACT_APP_SPEED_SUITE'] : process.env.REACT_APP_SPEED_SUITE; diff --git a/central-auth-service/central-login-ui-react/src/pages/login/index.jsx b/central-auth-service/central-login-ui-react/src/pages/login/index.jsx index c99ae992c6..e9a5af66af 100644 --- a/central-auth-service/central-login-ui-react/src/pages/login/index.jsx +++ b/central-auth-service/central-login-ui-react/src/pages/login/index.jsx @@ -10,13 +10,14 @@ import '../../App.css'; import SuiteLogos from '../../components/SuiteLogos'; import PSLogo from '../../components/PSLogo'; - +const _loginButtonText = process.env.NODE_ENV === 'production' ? window.env.REACT_APP_LOGIN_BUTTON_TEXT : process.env.REACT_APP_LOGIN_BUTTON_TEXT; const LoginPage = ({search}) => { const [error, setError] = useState(''); const [showLoader, setShowLoader] = useState(false); const [showSAMLLoader, setShowSAMLLoader] = useState(false); + const [showLoginWithCredentials, setShowLoginWithCredentials] = useState(false); const methods = useForm({ mode: 'all' }); const userNamePattern = /^[A-Za-z0-9]+$/; @@ -25,6 +26,10 @@ const LoginPage = ({search}) => { window.location.href = apiProvider.handleSamlLogin; } + const ShowLoginWithCredentials = () => { + setShowLoginWithCredentials(!showLoginWithCredentials); + } + const PerformCredentialLogin = (data) => { setShowLoader(true); apiProvider.handleUserStandardLogin({ @@ -84,9 +89,9 @@ const LoginPage = ({search}) => {
-
+
Welcome back! @@ -110,69 +115,96 @@ const LoginPage = ({search}) => { } clickFn={PerformSAMLLogin} > - Login with SSO + {_loginButtonText ? _loginButtonText : 'Login with SSO'} - Or login with credentials - -
- - - {(methods.formState.errors['userName']) &&

{methods.formState.errors['userName'].message}

} - - - {(methods.formState.errors['password']) &&

{methods.formState.errors['password'].message}

} - - - {error && error.length > 0 &&

{error}

} + + { + showLoginWithCredentials && + <> + + + + + {(methods.formState.errors['userName']) && +

{methods.formState.errors['userName'].message}

} + + + {(methods.formState.errors['password']) && +

{methods.formState.errors['password'].message}

} + + + {error && error.length > 0 &&

{error}

} -
-
- Forgot Password?
-

Dont have an account?

+ +
+ Forgot Password?
+

Dont have an account?

Sign up here. -
+
+ + + }
);