[ES-1306] Implemented loading spinner during idToken redirection and …

…some UI fixes. (#766) Signed-off-by: GurukiranP <[email protected]>
mosip · Jun 12, 2024 · fa8e346 · fa8e346
1 parent f2ffbe9
commit fa8e346
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 22 deletions.
diff --git 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
@@ -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
@@ -115,7 +115,7 @@ function App() {
     case states.LOADING:
       el = (
         <div className="h-screen flex justify-center content-center">
-          <LoadingIndicator size="medium" />
+          <LoadingIndicator size="medium" message={"loading_msg"} className="align-loading-center"/>
         </div>
       );
       break;

diff --git 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
@@ -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
@@ -340,7 +340,7 @@ export default function Consent({
     return (
       <div className="flex items-center justify-center section-background">
         <div className="max-w-md w-full shadow mt-5 rounded loading-indicator px-4 py-4">
-          <LoadingIndicator size="medium" message="redirecting_msg" />
+          <LoadingIndicator size="medium" message="redirecting_msg" className="align-loading-center"/>
         </div>
       </div>
     );

diff --git 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
@@ -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"
             />
             <label
               htmlFor="remember-me"