From 7111e81f11e682571a662a3db0ba85a2a08bbc7b Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Sat, 8 Jul 2023 19:22:00 +0100
Subject: [PATCH] added family account login input icon

---
 src/assets/images/icons/family-id.svg     |  1 +
 src/assets/images/icons/family-pin.svg    |  3 +++
 src/components/AuthPages/Login/index.jsx  | 30 ++++++++++++++---------
 src/components/AuthPages/SignUp/index.jsx | 12 ++++++---
 src/components/Helpers/Icons.jsx          |  6 ++++-
 5 files changed, 37 insertions(+), 15 deletions(-)
 create mode 100644 src/assets/images/icons/family-id.svg
 create mode 100644 src/assets/images/icons/family-pin.svg

diff --git a/src/assets/images/icons/family-id.svg b/src/assets/images/icons/family-id.svg
new file mode 100644
index 0000000..49ddcea
--- /dev/null
+++ b/src/assets/images/icons/family-id.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="identificationcard"><path fill="#4687ba" d="M0 6v13c0 1.103.897 2 2 2h20c1.103 0 2-.897 2-2V6" class="color2d98d4 svgShape"></path><path fill="#ff6699" d="M22 3H2a2 2 0 0 0-2 2v2h24V5a2 2 0 0 0-2-2z" class="color0377be svgShape"></path><path fill="#e6e7f9" d="M22 3H2C.897 3 0 3.897 0 5v.25c0-1.103.897-2 2-2h20c1.103 0 2 .897 2 2V5c0-1.103-.897-2-2-2z" opacity=".2" class="colorffffff svgShape"></path><path fill="#4687ba" d="M22 20.75H2c-1.103 0-2-.897-2-2V19c0 1.103.897 2 2 2h20c1.103 0 2-.897 2-2v-.25c0 1.103-.897 2-2 2z" opacity=".1" class="color010101 svgShape"></path><path fill="#e6e7f9" d="M13 17h8v1h-8zM13 14h8v1h-8zM13 11h8v1h-8z" class="colorffffff svgShape"></path><circle cx="7" cy="12" r="2" fill="#e6e7f9" class="colorffffff svgShape"></circle><path fill="#e6e7f9" d="M9.987 15.237C9.288 14.9 8.203 14.5 7 14.5s-2.288.4-2.987.737c-.625.3-1.013.9-1.013 1.566V18h8v-1.197c0-.665-.388-1.265-1.013-1.566z" class="colorffffff svgShape"></path><circle cx="17" cy="5" r="1" fill="#ff6699" class="color0a70b9 svgShape"></circle><path fill="#4687ba" d="M17 4.25a.99.99 0 0 1 .975.875C17.98 5.082 18 5.045 18 5a1 1 0 0 0-2 0c0 .044.02.082.025.125A.99.99 0 0 1 17 4.25z" opacity=".1" class="color010101 svgShape"></path><linearGradient id="a" x1="6.973" x2="21.55" y1="1.973" y2="16.55" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#010101" stop-opacity=".1" class="stopColor010101 svgShape"></stop><stop offset="1" stop-color="#010101" stop-opacity="0" class="stopColor010101 svgShape"></stop></linearGradient><path fill="url(#a)" d="M22 21c1.103 0 2-.897 2-2V7H0l14 14h8z"></path><circle cx="7" cy="5" r="1" fill="#ff6699" class="color0a70b9 svgShape"></circle><path fill="#4687ba" d="M7 4.25a.99.99 0 0 1 .975.875C7.98 5.082 8 5.045 8 5a1 1 0 0 0-2 0c0 .044.02.082.025.125A.99.99 0 0 1 7 4.25z" opacity=".1" class="color010101 svgShape"></path><linearGradient id="b" x1="-.708" x2="24.708" y1="6.074" y2="17.925" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffffff" stop-opacity=".2" class="stopColorffffff svgShape"></stop><stop offset="1" stop-color="#ffffff" stop-opacity="0" class="stopColorffffff svgShape"></stop></linearGradient><path fill="url(#b)" d="M22 3H2a2 2 0 0 0-2 2v14c0 1.103.897 2 2 2h20c1.103 0 2-.897 2-2V5a2 2 0 0 0-2-2z"></path></svg>
\ No newline at end of file
diff --git a/src/assets/images/icons/family-pin.svg b/src/assets/images/icons/family-pin.svg
new file mode 100644
index 0000000..aac8215
--- /dev/null
+++ b/src/assets/images/icons/family-pin.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 128 128" viewBox="0 0 128 128" id="Pin"><path fill="#4687ba" d="M106,13.8L91.7,4.6C86.2,1,78.9,2,74.5,7L41.9,46.9c-9.1,0.4-17.9,3.3-25.4,8.7c-0.7,0.5-0.7,1.6,0.1,2.1
+				l10.2,6.6l0,0L46.4,77l-24,41.4c-1.2,2.1-0.7,4.9,1.4,6.3c2.2,1.6,5.2,1.1,6.7-1.1l28-38.8L78,97.5l0,0l10.2,6.6
+				c0.7,0.5,1.7,0.1,1.9-0.8c1.8-9,0.9-18.3-2.5-26.8l23.1-46C113.6,24.5,111.5,17.4,106,13.8z" class="color2d3e50 svgShape"></path></svg>
\ No newline at end of file
diff --git a/src/components/AuthPages/Login/index.jsx b/src/components/AuthPages/Login/index.jsx
index 6bb64dd..87311d8 100644
--- a/src/components/AuthPages/Login/index.jsx
+++ b/src/components/AuthPages/Login/index.jsx
@@ -22,6 +22,8 @@ export default function Login() {
   const [checked, setValue] = useState(false);
   const [loginLoading, setLoginLoading] = useState(false);
 
+  const [showPassword, setShowPassword] = useState(false);
+
   //login error state
   const [loginError, setLoginError] = useState(false);
   // for the catch error
@@ -31,6 +33,11 @@ export default function Login() {
     setValue(!checked);
   };
 
+   // To Show and Hide Password
+   const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+
   //FUNCTION TO DETERMINE/CHANGE LOGIN COMPONENT
   const handleLoginType = ({ target: { name } }) => {
     setLoginType(name);
@@ -189,7 +196,7 @@ export default function Login() {
               />
             </Link>
           </div>
-          <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px]  rounded-[0.475rem] sm:p-7 p-5">
+          <div className="content-wrapper login shadow-md w-full lg:max-w-[530px] mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px]  rounded-[0.475rem] sm:p-7 p-5">
             <div className="w-full">
               <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
                 {/* <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
@@ -211,7 +218,7 @@ export default function Login() {
                 <button
                   name="full"
                   className={`login-type-btn px-4 py-1 rounded-t-2xl ${
-                    loginType=='full' ? "bg-white text-[#000] border-t-[2px]" : "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
+                    loginType=='full' ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" : "bg-white text-[#000] border-t-[2px]"
                   }`}
                   onClick={handleLoginType}
                 >
@@ -220,7 +227,7 @@ export default function Login() {
                 <button
                   name="family"
                   className={`login-type-btn px-4 py-1 rounded-t-2xl ${
-                    loginType=='family' ? "bg-white text-[#000] border-t-[2px]" : "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
+                    loginType=='family' ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" : "bg-white text-[#000] border-t-[2px]"
                   }`}
                   onClick={handleLoginType}
                 >
@@ -234,7 +241,7 @@ export default function Login() {
               {
                 loginType == 'full' ? (
                   //user login component
-                  <div className="p-2 input-area login-area border-2 border-[#4687ba] rounded-2xl">
+                  <div className="p-6 input-area login-area border-2 border-[#4687ba] rounded-2xl">
                     <div className="input-item mb-5">
                       <InputCom
                         labelClass="tracking-wider"
@@ -258,8 +265,9 @@ export default function Login() {
                         placeholder="● ● ● ● ● ●"
                         label="Password"
                         name="password"
-                        type="password"
-                        iconName="password"
+                        type={showPassword ? "text" : "password"}
+                        onClick={togglePasswordVisibility}
+                        passIcon={showPassword ? "password" : "password"}
                         forgotPassword
                       />
                     </div>
@@ -322,7 +330,7 @@ export default function Login() {
                 ) : (
                   // END of user login compoenent
                   // family login compoenent
-                  <div className="p-2 input-area login-area border-2 border-[#4687ba] rounded-2xl">
+                  <div className="p-6 input-area login-area border-2 border-[#4687ba] rounded-2xl">
                     <div className="input-item mb-5">
                       <InputCom
                         labelClass="tracking-wider"
@@ -333,7 +341,7 @@ export default function Login() {
                         label="Username"
                         name="email"
                         type="email"
-                        iconName="message"
+                        iconName="family-id"
                       />
                     </div>
 
@@ -346,9 +354,9 @@ export default function Login() {
                         placeholder="● ● ● ● ● ●"
                         label="Pin"
                         name="password"
-                        type="password"
-                        iconName="password"
-                        // forgotPassword
+                        type={showPassword ? "text" : "password"}
+                        onClick={togglePasswordVisibility}
+                        passIcon={showPassword ? "family-pin" : "family-pin"}
                       />
                     </div>
                     {loginError && (
diff --git a/src/components/AuthPages/SignUp/index.jsx b/src/components/AuthPages/SignUp/index.jsx
index 3848107..dcf28a8 100644
--- a/src/components/AuthPages/SignUp/index.jsx
+++ b/src/components/AuthPages/SignUp/index.jsx
@@ -72,6 +72,12 @@ export default function SignUp() {
           return setTimeout(()=>{setMsgError("");},3000)
         }
 
+        //checks if terms and condition is checked
+        if (!checked) {
+          setMsgError("Terms and condition required");
+          return setTimeout(()=>{setMsgError("");},3000)
+        }
+
         setSignUpLoading(true);
         const reqData = {
           country: country,
@@ -131,7 +137,7 @@ export default function SignUp() {
               />
             </Link>
           </div>
-          <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px]  rounded-[0.475rem] sm:p-7 p-5 mb-0">
+          <div className="content-wrapper login relative shadow-md w-full lg:max-w-[530px] mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px]  rounded-[0.475rem] sm:p-7 p-5 mb-0">
             <div>
               <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
                 <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
@@ -213,7 +219,7 @@ export default function SignUp() {
                   />
                 </div>
                 {msgError && (
-                  <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px]">
+                  <div className="p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px]">
                     {msgError}
                   </div>
                 )}
@@ -298,7 +304,7 @@ const SelectOption = ({
         <select
           name={name}
           id={name}
-          className="input-wrapper border border-[#f5f8fa]] dark:border-[#5e6278] w-full rounded-[0.475rem] h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent "
+          className="input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent "
           onChange={inputHandler}
           value={value}
         >
diff --git a/src/components/Helpers/Icons.jsx b/src/components/Helpers/Icons.jsx
index e12724c..a73d9a5 100644
--- a/src/components/Helpers/Icons.jsx
+++ b/src/components/Helpers/Icons.jsx
@@ -519,7 +519,11 @@ export default function Icons({ name }) {
         <img className="w-[17px] h-[17px]" src={localImgLoad('images/icons/market.svg')} alt="market" />
       ) : name === "new-mytask" ? (
         <img className="w-[17px] h-[17px]" src={localImgLoad('images/icons/my-task.svg')} alt="task" />
-      ) : (
+      ) : name === "family-id" ? (
+        <img className="w-[20px] h-[20px]" src={localImgLoad('images/icons/family-id.svg')} alt="family-id" />
+      ) : name === "family-pin" ? (
+        <img className="w-[20px] h-[20px]" src={localImgLoad('images/icons/family-pin.svg')} alt="family-pin" />
+      ): (
         ""
       )}
     </>