#TRAPWLS-19 Popup shown intially in Login screen

Author: MohamedRizwan399

src/loginAuthentication/LoginPage.css

@@ -143,4 +143,35 @@ input:focus{
     align-items: center;
     background-color: rgba(255, 255, 255, 0.8);
     z-index: 1;
+}
+
+/* Styling for Popup*/
+.popup-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+  
+.popup {
+    background: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+    text-align: center;
+    max-width: 500px; /* Limit the max width */
+    width: 100%;
+    box-sizing: border-box;
+    overflow-wrap: break-word;
+}
+  
+.popup button {
+    margin-top: 10px;
+    padding: 8px 16px;
+    cursor: pointer;
 }

src/loginAuthentication/LoginPage.jsx

@@ -9,6 +9,7 @@ import {auth, provider} from "./firebase/FirebaseConfig";
 import {signInWithPopup } from "firebase/auth";
 import {handleCreateUserWithEmailAndPassword, handleSignInWithEmailAndPassword} from './firebase/LoginAuthCreation';
 import ClipLoader from 'react-spinners/ClipLoader';
+import Popup from "../popup/Popup";
 
 // for each time show the google accounts in the dialog
 provider.setCustomParameters({
@@ -24,7 +25,9 @@ function LoginPage(props) {
     const navigateToNextPage = useNavigate();
     const {setLoggedInUser} = props;
     const [isLoading, setIsLoading] = useState(false);
+    const [showPopup, setShowPopup] = useState(false);
     const [isRegisterClicked, setRegisterClicked] = useState(false);
+    const isReadInfoOnce = localStorage.getItem('isInfoRead') || false;
 
     //password requirement
     const [isPwdFeedbackHint, setPwdFeedbackHint] = useState(null);
@@ -92,6 +95,16 @@ function LoginPage(props) {
     }, [input.password, handlePasswordErrorFeedback])
 
 
+    // For show the popup initially
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setShowPopup(true);
+        }, 1500)
+
+        return () => clearTimeout(timer);
+    }, [])
+
+
     // Login via username/password
     async function loginClicked(e) {
         e.preventDefault();
@@ -128,7 +141,6 @@ function LoginPage(props) {
 
     // Register via username/password
     const registerClicked = async () => {
-    
         // validate username/email and password
         const isValidated = handleValidationForUserInput(input.username, input.password);
         if (!isValidated) return;
@@ -185,11 +197,10 @@ function LoginPage(props) {
     function googleLogin() {
         //signInWithRedirect(auth, provider) // alternative for Glogin
         signInWithPopup(auth, provider).then((data) => {
-            storeLoginSuccessAndNavigate(data?.user)
+            storeLoginSuccessAndNavigate(data?.user);
         }).catch((e) => {
-            console.error("signinpopup catch--",e)
+            console.error("signinpopup catch--", e);
         })
-
     }
 
     // Stored LoginStatus in localStorage and navigate to home
@@ -202,8 +213,8 @@ function LoginPage(props) {
             loggedInPhotoUrl: user?.photoURL || ""
         }
         localStorage.setItem("loggedInData", JSON.stringify(loginObj));
-        setLoggedInUser(true)
-        navigateToNextPage('/home')
+        setLoggedInUser(true);
+        navigateToNextPage('/home');
     }
 
     // To show toast
@@ -215,10 +226,20 @@ function LoginPage(props) {
         }
         return;
     }
+
+    const closePopupInfo = (isRead = false) => {
+        if(isRead) {
+            setShowPopup(false);
+            localStorage.setItem('isInfoRead', true);
+        }
+    }
 
     return(
 
         <div className="cover">
+            {/* Popup shown initially */}
+            {showPopup && !isReadInfoOnce  && (<Popup setClosePopup={closePopupInfo}/>)}
+
             <u><h2>{isRegisterClicked ?  "Register Here " : "Login Here "}</h2></u>
             <p>{!isRegisterClicked ? "Sign in" : "Register here"} & let's get started</p>
             {errorMessageEmail.length > 0 && (<div className="error1">{errorMessageEmail}</div>)}

src/popup/Popup.jsx

@@ -0,0 +1,21 @@
+import { APP_INITIAL_POPUP_MSG } from "../utility/constants";
+
+
+const Popup = (props) => {
+    const { setClosePopup } = props;
+
+    const closePopup = () => {
+        setClosePopup(true);
+    }
+
+    return(
+        <div className="popup-overlay">
+            <div className="popup">
+                <img src="favicon1.ico" alt='' />
+                <p dangerouslySetInnerHTML={{__html: APP_INITIAL_POPUP_MSG}}></p>
+                <button onClick={closePopup}>OK</button>
+            </div>
+        </div>
+    );
+}
+export default Popup;