WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

added account details 01

Browse Source
This commit is contained in:
Ebube
2023-05-21 22:59:14 +01:00
parent 87d1bbafef
commit 13bf86f370
5 changed files with 848 additions and 727 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AuthPages/Login/index.jsx
+159 -146
View File
@@ -16,7 +16,7 @@ import { updateUserDetails } from "../../../store/UserDetails";
export default function Login() { export default function Login() {
const dispatch = useDispatch(); const dispatch = useDispatch();
let [loginCom, setLoginCom] = useState({user: true, family: false}) let [loginCom, setLoginCom] = useState({ user: true, family: false });
const [checked, setValue] = useState(false); const [checked, setValue] = useState(false);
const [loginLoading, setLoginLoading] = useState(false); const [loginLoading, setLoginLoading] = useState(false);
@@ -31,13 +31,13 @@ export default function Login() {
}; };
//FUNCTION TO DETERMINE/CHANGE LOGIN COMPONENT //FUNCTION TO DETERMINE/CHANGE LOGIN COMPONENT
const handleLoginCom = ({target:{name}}) => { const handleLoginCom = ({ target: { name } }) => {
if(name == 'user'){ if (name == "user") {
setLoginCom({[name]: true, family: false}) setLoginCom({ [name]: true, family: false });
}else{ } else {
setLoginCom({[name]: false, family: true}) setLoginCom({ [name]: false, family: true });
} }
} };
// email // email
const [email, setMail] = useState(""); const [email, setMail] = useState("");
@@ -130,161 +130,175 @@ export default function Login() {
{/* switch login component */} {/* switch login component */}
<div className="flex justify-start items-end"> <div className="flex justify-start items-end">
<button <button
name='user' name="user"
className={`px-2 py-1 w-[100px] text-left h-[40px] text-lg font-bold text-[#4687ba] hover:text-[#009ef7] tracking-wide transition outline-none border-2 border-b-0 border-r-0 border-[#4687ba] ${loginCom.user && 'border-r-2 h-[45px]'}`} className={`px-2 py-1 w-[100px] text-left h-[40px] text-lg font-bold text-[#4687ba] hover:text-[#009ef7] tracking-wide transition outline-none border-2 border-b-0 border-r-0 border-[#4687ba] ${
loginCom.user && "border-r-2 h-[45px]"
}`}
onClick={handleLoginCom} onClick={handleLoginCom}
>Sign in >
Sign in
</button> </button>
<button <button
name='family' name="family"
className={`px-2 py-1 w-[100px] text-left h-[40px] text-lg font-bold text-[#4687ba] hover:text-[#009ef7] tracking-wide transition outline-none border-2 border-b-0 border-l-0 border-[#4687ba] ${loginCom.family && 'border-l-2 h-[45px]'}`} className={`px-2 py-1 w-[100px] text-left h-[40px] text-lg font-bold text-[#4687ba] hover:text-[#009ef7] tracking-wide transition outline-none border-2 border-b-0 border-l-0 border-[#4687ba] ${
loginCom.family && "border-l-2 h-[45px]"
}`}
onClick={handleLoginCom} onClick={handleLoginCom}
>Family >
Family
</button> </button>
</div> </div>
{/* END of switch login component */} {/* END of switch login component */}
{/* for login component */} {/* for login component */}
{loginCom.user ? {
//user login compoenent loginCom.user ? (
<div className="p-2 input-area border-2 border-[#4687ba]"> //user login compoenent
<div className="input-item mb-5"> <div className="p-2 input-area border-2 border-[#4687ba]">
<InputCom <div className="input-item mb-5">
labelClass='tracking-wider' <InputCom
fieldClass="px-6" labelClass="tracking-wider"
value={email} fieldClass="px-6"
inputHandler={handleEmail} value={email}
placeholder="support@mermsemr.com" inputHandler={handleEmail}
label="Email" placeholder="support@mermsemr.com"
name="email" label="Email"
type="email" name="email"
iconName="message" type="email"
/> iconName="message"
</div> />
</div>
<div className="input-item mb-5"> <div className="input-item mb-5">
<InputCom <InputCom
labelClass='tracking-wider' labelClass="tracking-wider"
fieldClass="px-6" fieldClass="px-6"
value={password} value={password}
inputHandler={handlePassword} inputHandler={handlePassword}
placeholder="● ● ● ● ● ●" placeholder="● ● ● ● ● ●"
label="Password" label="Password"
name="password" name="password"
type="password" type="password"
iconName="password" iconName="password"
forgotPassword forgotPassword
/> />
</div>
{loginError && (
<div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-thin leading-[19.5px] text-[13px]">
Invalid username or password- Please{" "}
<Link to="/#" className="text-[#009ef7]">
reset your password
</Link>{" "}
or{" "}
<Link to="/signup" className="text-[#009ef7]">
create a new account
</Link>
</div> </div>
)} {loginError && (
{msgError && ( <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-thin leading-[19.5px] text-[13px]">
<div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]"> Invalid username or password- Please{" "}
{msgError} <Link to="/#" className="text-[#009ef7]">
reset your password
</Link>{" "}
or{" "}
<Link to="/signup" className="text-[#009ef7]">
create a new account
</Link>
</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] text-[13px]">
{msgError}
</div>
)}
<div className="signin-area mb-3.5">
<div className="flex justify-center">
<button
onClick={doLogin}
type="button"
className={`btn-login rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
>
{loginLoading ? (
<div className="signup btn-loader"></div>
) : (
<span>Continue</span>
)}
</button>
</div>
<BrandBtn link="#" imgSrc={googleLogo} brand="Google" />
<BrandBtn
link="#"
imgSrc={facebookLogo}
brand="Facebook"
/>
<BrandBtn link="#" imgSrc={appleLogo} brand="Apple" />
</div> </div>
)} </div>
<div className="signin-area mb-3.5"> ) : (
<div className="flex justify-center"> // END of user login compoenent
<button // family login compoenent
onClick={doLogin} <div className="p-2 input-area border-2 border-[#4687ba]">
type="button" <div className="input-item mb-5">
className={`btn-login rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`} <InputCom
> labelClass="tracking-wider"
{loginLoading ? ( fieldClass="px-6"
<div className="signup btn-loader"></div> value={email}
) : ( inputHandler={handleEmail}
<span>Continue</span> placeholder="support@mermsemr.com"
)} label="Username"
</button> name="email"
type="email"
iconName="message"
/>
</div> </div>
<BrandBtn link="#" imgSrc={googleLogo} brand="Google" />
<BrandBtn link="#" imgSrc={facebookLogo} brand="Facebook" />
<BrandBtn link="#" imgSrc={appleLogo} brand="Apple" />
</div>
</div>
// END of user login compoenent
:
// family login compoenent
<div className="p-2 input-area border-2 border-[#4687ba]">
<div className="input-item mb-5">
<InputCom
labelClass='tracking-wider'
fieldClass="px-6"
value={email}
inputHandler={handleEmail}
placeholder="support@mermsemr.com"
label="Username"
name="email"
type="email"
iconName="message"
/>
</div>
<div className="input-item mb-5"> <div className="input-item mb-5">
<InputCom <InputCom
labelClass='tracking-wider' labelClass="tracking-wider"
fieldClass="px-6" fieldClass="px-6"
value={password} value={password}
inputHandler={handlePassword} inputHandler={handlePassword}
placeholder="● ● ● ● ● ●" placeholder="● ● ● ● ● ●"
label="Pin" label="Pin"
name="password" name="password"
type="password" type="password"
iconName="password" iconName="password"
// forgotPassword // forgotPassword
/> />
</div> </div>
{loginError && ( {loginError && (
<div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-thin leading-[19.5px] text-[13px]"> <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-thin leading-[19.5px] text-[13px]">
Invalid username or password{" "} Invalid username or password{" "}
{/* <Link to="/#" className="text-[#009ef7]"> {/* <Link to="/#" className="text-[#009ef7]">
reset your password reset your password
</Link>{" "} </Link>{" "}
or{" "} or{" "}
<Link to="/signup" className="text-[#009ef7]"> <Link to="/signup" className="text-[#009ef7]">
create a new account create a new account
</Link> */} </Link> */}
</div> </div>
)} )}
{msgError && ( {msgError && (
<div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]"> <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
{msgError} {msgError}
</div> </div>
)} )}
<div className="signin-area mb-1.5"> <div className="signin-area mb-1.5">
<div className="flex justify-center"> <div className="flex justify-center">
<button <button
onClick={()=>{console.log('working')}} onClick={() => {
type="button" console.log("working");
className={`btn-login rounded-[0.475rem] text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`} }}
> type="button"
{loginLoading ? ( className={`btn-login rounded-[0.475rem] text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
<div className="signup btn-loader"></div> >
) : ( {loginLoading ? (
<span>Continue</span> <div className="signup btn-loader"></div>
)} ) : (
</button> <span>Continue</span>
)}
</button>
</div>
</div> </div>
</div> </div>
</div> )
// END of family login compoenent // END of family login compoenent
} }
{/* END of login component */} {/* END of login component */}
<div className="pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]"> <div className="pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]">
This site is protected by hCaptcha and the our Privacy Policy This site is protected by hCaptcha and the our Privacy Policy
and Terms of Service apply. and Terms of Service apply.
</div> </div>
</div> </div>
</div> </div>
@@ -295,10 +309,9 @@ export default function Login() {
} }
const BrandBtn = ({ link, imgSrc, brand }) => { const BrandBtn = ({ link, imgSrc, brand }) => {
const doGoogle = async () => {
const doGoogle = async ()=>{ alert("start google");
alert('start google'); };
}
// onSuccess: (codeResponse) => setUser(codeResponse), // onSuccess: (codeResponse) => setUser(codeResponse),
@@ -307,19 +320,19 @@ const BrandBtn = ({ link, imgSrc, brand }) => {
// onError: (error) => console.log('Login Failed:', error) // onError: (error) => console.log('Login Failed:', error)
// }); // });
const doApple = async ()=>{ const doApple = async () => {
alert('start apple'); alert("start apple");
} };
const doFacebook = async ()=>{ const doFacebook = async () => {
alert('start facebook'); alert("start facebook");
} };
return ( return (
<div className="flex justify-center bottomMargin"> <div className="flex justify-center bottomMargin">
<a <a
// onClick={doGoogle} // onClick={doGoogle}
href="#dd" href="#dd"
className="w-full border border-light-purple dark:border-[#5356fb29] rounded-[0.475rem] h-[48px] flex justify-center bg-[#FAFAFA] hover:bg-[#eff2f5] hover:text-[#7e8299] transition duration-300 dark:bg-[#11131F] items-center font-medium cursor-pointer" className="w-full border border-light-purple dark:border-[#5356fb29] rounded-[0.475rem] h-[48px] flex justify-center bg-[#FAFAFA] hover:bg-[#eff2f5] hover:text-[#7e8299] transition duration-300 dark:bg-[#11131F] items-center font-medium cursor-pointer"
> >
<img className="mr-3 h-6" src={imgSrc} alt="logo-icon(s)" /> <img className="mr-3 h-6" src={imgSrc} alt="logo-icon(s)" />
src/components/FamilyAcc/FamilyManage.jsx
+1 -1
View File
@@ -69,7 +69,7 @@ export default function FamilyManage() {
memberList(); memberList();
}, [listReload, memberList]); }, [listReload, memberList]);
// console.log('Ebueb', familyList) console.log('Ebueb', familyList)
return ( return (
<Layout> <Layout>
src/components/FamilyAcc/FamilyManageTabs.jsx
+85 -2
View File
@@ -1,13 +1,23 @@
import React, { useRef, useState } from "react"; import React, {
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from "react";
import LoadingSpinner from "../Spinners/LoadingSpinner"; import LoadingSpinner from "../Spinners/LoadingSpinner";
import cover from "../../assets/images/profile-info-cover.png"; import cover from "../../assets/images/profile-info-cover.png";
import profile from "../../assets/images/profile-info-profile.png"; import profile from "../../assets/images/profile-info-profile.png";
import usersService from "../../services/UsersService";
export default function FamilyManageTabs({ export default function FamilyManageTabs({
className, className,
accountDetails, accountDetails,
loader, loader,
}) { }) {
const [familyDetails, setFamilyDetails] = useState(null);
const [errMsg, setErrMsg] = useState("");
// List of tabs
const tabs = [ const tabs = [
{ {
id: 1, id: 1,
@@ -23,9 +33,11 @@ export default function FamilyManageTabs({
}, },
]; ];
const [tab, setTab] = useState(tabs[0].name); const [tab, setTab] = useState(tabs[0].name);
const [manageLoader, setManageLoader] = useState(false);
const tabHandler = (value) => { const tabHandler = (value) => {
setTab(value); setTab(value);
}; };
// For profile uploads
const [profileImg, setProfileImg] = useState(profile); const [profileImg, setProfileImg] = useState(profile);
// profile img // profile img
const profileImgInput = useRef(null); const profileImgInput = useRef(null);
@@ -41,6 +53,30 @@ export default function FamilyManageTabs({
imgReader.readAsDataURL(e.target.files[0]); imgReader.readAsDataURL(e.target.files[0]);
} }
}; };
// Api call
const apiCall = useMemo(() => new usersService(), []);
// function for manage family
const familyManageHandler = useCallback(async () => {
setManageLoader(true);
try {
let { family_uid } = accountDetails;
let reqData = { family_uid };
let res = await apiCall.ManageFamily(reqData);
let { data } = await res;
if (data?.internal_return < 0) return;
setFamilyDetails(data);
setManageLoader(false);
} catch (error) {
setErrMsg("An error occurred");
throw new Error(error);
}
}, [apiCall, accountDetails]);
useEffect(() => {
familyManageHandler();
}, []);
console.log(familyDetails);
return ( return (
<div <div
className={`update-table w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] max-h-[600px] ${ className={`update-table w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] max-h-[600px] ${
@@ -80,7 +116,31 @@ export default function FamilyManageTabs({
</li> </li>
))} ))}
</ul> </ul>
<div className="flex-[0.9]">{/* Your content here */}</div> <div className="flex-[0.9] lg:min-h-[450px] h-full">
{/* Your content here */}
{tabs.map(({ name, id }) => {
return (
<div
className={`${
tab === name ? "block" : "hidden"
} h-full p-4 border border-[#dbd9d9]`}
key={id}
>
{manageLoader ? (
<LoadingSpinner size="8" color="sky-blue" />
) : (
<>
{name === "Tasks" && <Tasks />}
{name === "Account" && (
<Account familyDetails={familyDetails} />
)}
{name === "Profile" && <Profile />}
</>
)}
</div>
);
})}
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -150,3 +210,26 @@ function ProfileInfo({
</div> </div>
); );
} }
function Tasks() {
return <>Tasks</>;
}
function Account({ familyDetails }) {
return (
<div className="w-full lg:min-h-[400px] h-full flex items-center justify-center">
<div className="flex flex-col">
<h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
Username: <span className="ml-2 normal-case">{familyDetails?.username}</span>
</h2>
<h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
Pin: <span className="ml-2 normal-case">{familyDetails?.pin}</span>
</h2>
</div>
</div>
);
}
function Profile() {
return <>Profile</>;
}
src/components/FamilyAcc/FamilyTable.jsx
+2 -2
View File
@@ -41,14 +41,14 @@ export default function FamilyTable({ className, familyList, loader }) {
added, added,
last_login, last_login,
task_count, task_count,
uid, family_uid,
} = props; } = props;
let addedDate = added?.split(" ")[0]; let addedDate = added?.split(" ")[0];
let LoginDate = last_login?.split(" ")[0]; let LoginDate = last_login?.split(" ")[0];
return ( return (
<tr <tr
className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50" className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
key={uid} key={family_uid}
> >
<td className=" py-4"> <td className=" py-4">
<div className="flex space-x-2 items-center w-full"> <div className="flex space-x-2 items-center w-full">
src/services/UsersService.js
+599 -574
View File
File diff suppressed because it is too large Load Diff