From 1d315018a48e1d7a4706edc4657f30617cc30f37 Mon Sep 17 00:00:00 2001
From: Ebube <ebube.ojinta@chiefsoft.com>
Date: Mon, 17 Jul 2023 17:47:03 +0100
Subject: [PATCH] Added error msg for card and updated password text display

---
 src/components/AuthPages/Login/index.jsx          | 4 ++--
 src/components/AuthPages/SignUp/index.jsx         | 4 ++--
 src/components/AuthPages/VerifyPassword/index.jsx | 8 ++++----
 src/components/MyWallet/Popup/AddFundDollars.jsx  | 8 +++++++-
 4 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/AuthPages/Login/index.jsx b/src/components/AuthPages/Login/index.jsx
index e188154..2cb79da 100644
--- a/src/components/AuthPages/Login/index.jsx
+++ b/src/components/AuthPages/Login/index.jsx
@@ -275,8 +275,8 @@ export default function Login() {
                     <div className="input-item mb-5">
                       <InputCom
                         labelClass="tracking-wider"
-                        fieldClass="sm:px-6 px-2"
-                        value={password}
+                        fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
+                        value={password.replace(/./g, "●")}
                         inputHandler={handlePassword}
                         placeholder="● ● ● ● ● ●"
                         label="Password"
diff --git a/src/components/AuthPages/SignUp/index.jsx b/src/components/AuthPages/SignUp/index.jsx
index dcf28a8..3accd56 100644
--- a/src/components/AuthPages/SignUp/index.jsx
+++ b/src/components/AuthPages/SignUp/index.jsx
@@ -205,7 +205,7 @@ export default function SignUp() {
                 </div>
                 <div className="input-item mb-5">
                   <InputCom
-                    fieldClass="px-6"
+                    fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
                     placeholder="● ● ● ● ● ●"
                     label="Password"
                     name="password"
@@ -214,7 +214,7 @@ export default function SignUp() {
                     passIcon={
                       showPassword ? "show-password" : "hide-password"
                     }
-                    value={formData.password}
+                    value={formData.password.replace(/./g, "●")}
                     inputHandler={handleInputChange}
                   />
                 </div>
diff --git a/src/components/AuthPages/VerifyPassword/index.jsx b/src/components/AuthPages/VerifyPassword/index.jsx
index 1e71678..f03509e 100644
--- a/src/components/AuthPages/VerifyPassword/index.jsx
+++ b/src/components/AuthPages/VerifyPassword/index.jsx
@@ -158,8 +158,8 @@ const SuccessfulComponent = ({
     {/* INPUT */}
     <div className="mb-5">
       <InputCom
-        fieldClass="px-6"
-        value={password}
+        fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
+        value={password?.replace(/./g, "●")}
         inputHandler={handlePassword}
         placeholder="● ● ● ● ● ●"
         label="Password"
@@ -171,8 +171,8 @@ const SuccessfulComponent = ({
     </div>
     <div className="mb-5">
       <InputCom
-        fieldClass="px-6"
-        value={confirmPassword}
+        fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
+        value={confirmPassword?.replace(/./g, "●")}
         inputHandler={handlePassword}
         placeholder="● ● ● ● ● ●"
         label="Confirm Password"
diff --git a/src/components/MyWallet/Popup/AddFundDollars.jsx b/src/components/MyWallet/Popup/AddFundDollars.jsx
index 44769ef..176dc10 100644
--- a/src/components/MyWallet/Popup/AddFundDollars.jsx
+++ b/src/components/MyWallet/Popup/AddFundDollars.jsx
@@ -71,6 +71,7 @@ function AddFundDollars(props) {
   const [prevCardDetails, setPrevCardDetails] = useState({});
   const [payListCards, setPayListCards] = useState({ loading: true, data: [] });
   const [cardIcons, setCardIcons] = useState("atm-card");
+  const [prevCardError, setPrevCardError] = useState("");
 
   const { firstname, lastname } = userDetails;
 
@@ -138,6 +139,8 @@ function AddFundDollars(props) {
     if (tab === "previous") {
       // To check if card is empty
       if (Object.keys(prevCardDetails).length === 0) {
+        setPrevCardError("No card selected!");
+        setTimeout(() => setPrevCardError(""), 5000);
         return;
       }
     }
@@ -250,7 +253,7 @@ function AddFundDollars(props) {
 
         {/* previous tab */}
         {tab === "previous" && (
-          <div className="p-4 previous-details w-full min-h-[16rem] flex flex-col justify-between items-center">
+          <div className="p-4 previous-details w-full min-h-[16rem] flex flex-col">
             {payListCards.loading ? (
               <LoadingSpinner size="10" color="sky-blue" />
             ) : payListCards?.data?.length ? (
@@ -295,6 +298,9 @@ function AddFundDollars(props) {
                 </button>
               </div>
             )}
+            <p className="text-base italic text-red-500 h-5">
+              {prevCardError && prevCardError}
+            </p>
           </div>
         )}