From fa8e3460cd53b5ca2115725abb10b2458193d764 Mon Sep 17 00:00:00 2001 From: Gk <76690271+GurukiranP@users.noreply.github.com> Date: Wed, 12 Jun 2024 14:37:32 +0530 Subject: [PATCH] [ES-1306] Implemented loading spinner during idToken redirection and some UI fixes. (#766) Signed-off-by: GurukiranP --- oidc-ui/public/theme/variables.css | 18 ++++++++++++++++++ oidc-ui/src/App.css | 24 ++++++++++++++++++++++++ oidc-ui/src/App.js | 2 +- oidc-ui/src/components/Authorize.js | 7 +++++-- oidc-ui/src/components/ClaimDetails.js | 2 +- oidc-ui/src/components/Consent.js | 2 +- oidc-ui/src/components/OtpVerify.js | 16 ---------------- oidc-ui/src/components/Pin.js | 2 +- 8 files changed, 51 insertions(+), 22 deletions(-) diff --git a/oidc-ui/public/theme/variables.css b/oidc-ui/public/theme/variables.css index 9b46ad140..7998906e7 100644 --- a/oidc-ui/public/theme/variables.css +++ b/oidc-ui/public/theme/variables.css @@ -93,6 +93,12 @@ --consent-details-unavailable-color: #707070; --consent-details-message-color: #1262C9; --consent-details-message-background: #fff9f0 0% 0% no-repeat padding-box; + --otp-pin-input-width: 40px; + --otp-pin-input-height: 40px; + --otp-pin-input-margin: 0 5px; + --otp-pin-input-color: #1262C9; + --otp-pin-input-border-bottom: 2px solid #1262C9; + --checkbox-color: #1262C9; } [class="orange_theme"] { @@ -190,6 +196,12 @@ --consent-details-unavailable-color: #707070; --consent-details-message-color: #de7a24; --consent-details-message-background: #fff9f0 0% 0% no-repeat padding-box; + --otp-pin-input-width: 40px; + --otp-pin-input-height: 40px; + --otp-pin-input-margin: 0 5px; + --otp-pin-input-color: #eb6f2d; + --otp-pin-input-border-bottom: 2px solid #eb6f2d; + --checkbox-color: #eb6f2d; } [class="blue"] { @@ -295,4 +307,10 @@ --consent-details-unavailable-color: #707070; --consent-details-message-color: #004282; --consent-details-message-background: #fff9f0 0% 0% no-repeat padding-box; + --otp-pin-input-width: 40px; + --otp-pin-input-height: 40px; + --otp-pin-input-margin: 0 5px; + --otp-pin-input-color: #004282; + --otp-pin-input-border-bottom: 2px solid #004282; + --checkbox-color: #004282; } diff --git a/oidc-ui/src/App.css b/oidc-ui/src/App.css index b6102b70e..e023886f6 100644 --- a/oidc-ui/src/App.css +++ b/oidc-ui/src/App.css @@ -335,6 +335,7 @@ body { } .align-loading-center { + width: 100%; position: fixed; top: 50%; left: 50%; @@ -345,6 +346,23 @@ body { -ms-transform: translate(-50%, -50%); } +.pincode-input-text { + width: var(--otp-pin-input-width) !important; + height: var(--otp-pin-input-height) !important; + margin: var(--otp-pin-input-margin) !important; + color: var(--otp-pin-input-color) !important; + border: 0 !important; + border-bottom: var(--otp-pin-input-border-bottom) !important; +} + +input[type="checkbox"] { + accent-color: var(--checkbox-color); +} + +input[type="checkbox"]:hover { + cursor: pointer; +} + @media screen and (max-width: 768px) { .section-background .top_left_bg_logo, .section-background .top_right_bg_logo, @@ -539,6 +557,12 @@ input[type="number"] { padding-top: 10px; } +@media screen and (max-width: 375px) { + .pincode-input-text { + width: 2em !important; + } +} + @layer base { :root { --font-inter: var(--font-inter); diff --git a/oidc-ui/src/App.js b/oidc-ui/src/App.js index 88ad05cbe..ae6ffa69c 100644 --- a/oidc-ui/src/App.js +++ b/oidc-ui/src/App.js @@ -115,7 +115,7 @@ function App() { case states.LOADING: el = (
- +
); break; diff --git a/oidc-ui/src/components/Authorize.js b/oidc-ui/src/components/Authorize.js index ffbc13c5a..af45b47b9 100644 --- a/oidc-ui/src/components/Authorize.js +++ b/oidc-ui/src/components/Authorize.js @@ -29,6 +29,7 @@ export default function Authorize({ authService }) { useEffect(() => { const callAuthorize = async () => { try { + setStatus(states.LOADING); storeQueryParam(searchParams.toString()); const extractParam = (param) => searchParams.get(param); @@ -76,10 +77,8 @@ export default function Authorize({ authService }) { const handleResponse = async (oAuthDetailsResponse) => { if (oAuthDetailsResponse.errors.length === 0) { setOAuthDetailResponse(oAuthDetailsResponse); - setStatus(states.LOADED); if (request.idTokenHint) { - setStatus(states.LOADING); const base64UrlDecode = (str) => { return decodeURIComponent( atob(str.replace(/-/g, "+").replace(/_/g, "/")) @@ -150,6 +149,9 @@ export default function Authorize({ authService }) { } } } + else { + setStatus(states.LOADED); + } } }; @@ -159,6 +161,7 @@ export default function Authorize({ authService }) { await post_OauthDetails_v3(filteredRequest).then(handleResponse); } } catch (error) { + setStatus(states.LOADED); setOAuthDetailResponse(null); setError(error.message); setStatus(states.ERROR); diff --git a/oidc-ui/src/components/ClaimDetails.js b/oidc-ui/src/components/ClaimDetails.js index edd1681c2..b06888eb0 100644 --- a/oidc-ui/src/components/ClaimDetails.js +++ b/oidc-ui/src/components/ClaimDetails.js @@ -163,7 +163,7 @@ const ClaimDetails = ({ try { const { response, errors } = await authServices.prepareSignupRedirect( transactionId, - "" + window.location.href ); if (errors?.length) { redirectOnError(errors[0].errorCode, t2(errors[0].errorCode)); diff --git a/oidc-ui/src/components/Consent.js b/oidc-ui/src/components/Consent.js index 28e5b56e3..f9f82f53d 100644 --- a/oidc-ui/src/components/Consent.js +++ b/oidc-ui/src/components/Consent.js @@ -340,7 +340,7 @@ export default function Consent({ return (
- +
); diff --git a/oidc-ui/src/components/OtpVerify.js b/oidc-ui/src/components/OtpVerify.js index 8162c3792..599cd944e 100644 --- a/oidc-ui/src/components/OtpVerify.js +++ b/oidc-ui/src/components/OtpVerify.js @@ -252,19 +252,6 @@ export default function OtpVerify({ } }; - let styles = { - width: "40px", - height: "40px", - margin: "0 5px", - border: "", - borderBottom: "2px solid #0284c7", - color: "#0284c7" - }; - - if(window.screen.availWidth <= 375) { - styles = {...styles, width: "2em"} - } - const onCloseHandle = () => { setErrorBanner(null); }; @@ -313,9 +300,6 @@ export default function OtpVerify({ }} type="numeric" inputMode="number" - style={{ padding: "5px 0px" }} - inputStyle={styles} - inputFocusStyle={{ borderBottom: "2px solid #075985" }} onComplete={(value, index) => { //TO handle case when user pastes OTP setOtpValue(value); diff --git a/oidc-ui/src/components/Pin.js b/oidc-ui/src/components/Pin.js index d79ce2c2f..7df9cef11 100644 --- a/oidc-ui/src/components/Pin.js +++ b/oidc-ui/src/components/Pin.js @@ -199,7 +199,7 @@ export default function Pin({ id="remember-me" name="remember-me" type="checkbox" - className="h-4 w-4 text-cyan-600 focus:ring-cyan-500 border-gray-300 rounded" + className="h-4 w-4 rounded" />