added account details 01
This commit is contained in:
Ebube
@@ -16,7 +16,7 @@ import { updateUserDetails } from "../../../store/UserDetails";
|
||||
export default function Login() {
|
||||
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 [loginLoading, setLoginLoading] = useState(false);
|
||||
@@ -31,13 +31,13 @@ export default function Login() {
|
||||
};
|
||||
|
||||
//FUNCTION TO DETERMINE/CHANGE LOGIN COMPONENT
|
||||
const handleLoginCom = ({target:{name}}) => {
|
||||
if(name == 'user'){
|
||||
setLoginCom({[name]: true, family: false})
|
||||
}else{
|
||||
setLoginCom({[name]: false, family: true})
|
||||
const handleLoginCom = ({ target: { name } }) => {
|
||||
if (name == "user") {
|
||||
setLoginCom({ [name]: true, family: false });
|
||||
} else {
|
||||
setLoginCom({ [name]: false, family: true });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// email
|
||||
const [email, setMail] = useState("");
|
||||
@@ -129,162 +129,176 @@ export default function Login() {
|
||||
|
||||
{/* switch login component */}
|
||||
<div className="flex justify-start items-end">
|
||||
<button
|
||||
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]'}`}
|
||||
<button
|
||||
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]"
|
||||
}`}
|
||||
onClick={handleLoginCom}
|
||||
>Sign in
|
||||
>
|
||||
Sign in
|
||||
</button>
|
||||
<button
|
||||
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]'}`}
|
||||
<button
|
||||
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]"
|
||||
}`}
|
||||
onClick={handleLoginCom}
|
||||
>Family
|
||||
>
|
||||
Family
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* END of switch login component */}
|
||||
|
||||
{/* for login component */}
|
||||
{loginCom.user ?
|
||||
//user 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="Email"
|
||||
name="email"
|
||||
type="email"
|
||||
iconName="message"
|
||||
/>
|
||||
</div>
|
||||
{
|
||||
loginCom.user ? (
|
||||
//user 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="Email"
|
||||
name="email"
|
||||
type="email"
|
||||
iconName="message"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="input-item mb-5">
|
||||
<InputCom
|
||||
labelClass='tracking-wider'
|
||||
fieldClass="px-6"
|
||||
value={password}
|
||||
inputHandler={handlePassword}
|
||||
placeholder="● ● ● ● ● ●"
|
||||
label="Password"
|
||||
name="password"
|
||||
type="password"
|
||||
iconName="password"
|
||||
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 className="input-item mb-5">
|
||||
<InputCom
|
||||
labelClass="tracking-wider"
|
||||
fieldClass="px-6"
|
||||
value={password}
|
||||
inputHandler={handlePassword}
|
||||
placeholder="● ● ● ● ● ●"
|
||||
label="Password"
|
||||
name="password"
|
||||
type="password"
|
||||
iconName="password"
|
||||
forgotPassword
|
||||
/>
|
||||
</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}
|
||||
{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>
|
||||
)}
|
||||
{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 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>
|
||||
) : (
|
||||
// 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>
|
||||
<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">
|
||||
<InputCom
|
||||
labelClass='tracking-wider'
|
||||
fieldClass="px-6"
|
||||
value={password}
|
||||
inputHandler={handlePassword}
|
||||
placeholder="● ● ● ● ● ●"
|
||||
label="Pin"
|
||||
name="password"
|
||||
type="password"
|
||||
iconName="password"
|
||||
// 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{" "}
|
||||
{/* <Link to="/#" className="text-[#009ef7]">
|
||||
<div className="input-item mb-5">
|
||||
<InputCom
|
||||
labelClass="tracking-wider"
|
||||
fieldClass="px-6"
|
||||
value={password}
|
||||
inputHandler={handlePassword}
|
||||
placeholder="● ● ● ● ● ●"
|
||||
label="Pin"
|
||||
name="password"
|
||||
type="password"
|
||||
iconName="password"
|
||||
// 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{" "}
|
||||
{/* <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-1.5">
|
||||
<div className="flex justify-center">
|
||||
<button
|
||||
onClick={()=>{console.log('working')}}
|
||||
type="button"
|
||||
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]`}
|
||||
>
|
||||
{loginLoading ? (
|
||||
<div className="signup btn-loader"></div>
|
||||
) : (
|
||||
<span>Continue</span>
|
||||
)}
|
||||
</button>
|
||||
</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-1.5">
|
||||
<div className="flex justify-center">
|
||||
<button
|
||||
onClick={() => {
|
||||
console.log("working");
|
||||
}}
|
||||
type="button"
|
||||
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]`}
|
||||
>
|
||||
{loginLoading ? (
|
||||
<div className="signup btn-loader"></div>
|
||||
) : (
|
||||
<span>Continue</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
// END of family login compoenent
|
||||
}
|
||||
{/* END of login component */}
|
||||
|
||||
<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
|
||||
and Terms of Service apply.
|
||||
This site is protected by hCaptcha and the our Privacy Policy
|
||||
and Terms of Service apply.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -295,10 +309,9 @@ export default function Login() {
|
||||
}
|
||||
|
||||
const BrandBtn = ({ link, imgSrc, brand }) => {
|
||||
|
||||
const doGoogle = async ()=>{
|
||||
alert('start google');
|
||||
}
|
||||
const doGoogle = async () => {
|
||||
alert("start google");
|
||||
};
|
||||
|
||||
// onSuccess: (codeResponse) => setUser(codeResponse),
|
||||
|
||||
@@ -307,19 +320,19 @@ const BrandBtn = ({ link, imgSrc, brand }) => {
|
||||
// onError: (error) => console.log('Login Failed:', error)
|
||||
// });
|
||||
|
||||
const doApple = async ()=>{
|
||||
alert('start apple');
|
||||
}
|
||||
const doApple = async () => {
|
||||
alert("start apple");
|
||||
};
|
||||
|
||||
const doFacebook = async ()=>{
|
||||
alert('start facebook');
|
||||
}
|
||||
const doFacebook = async () => {
|
||||
alert("start facebook");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex justify-center bottomMargin">
|
||||
<a
|
||||
// onClick={doGoogle}
|
||||
href="#dd"
|
||||
// onClick={doGoogle}
|
||||
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"
|
||||
>
|
||||
<img className="mr-3 h-6" src={imgSrc} alt="logo-icon(s)" />
|
||||
|
||||
@@ -69,7 +69,7 @@ export default function FamilyManage() {
|
||||
memberList();
|
||||
}, [listReload, memberList]);
|
||||
|
||||
// console.log('Ebueb', familyList)
|
||||
console.log('Ebueb', familyList)
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
|
||||
@@ -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 cover from "../../assets/images/profile-info-cover.png";
|
||||
import profile from "../../assets/images/profile-info-profile.png";
|
||||
import usersService from "../../services/UsersService";
|
||||
|
||||
export default function FamilyManageTabs({
|
||||
className,
|
||||
accountDetails,
|
||||
loader,
|
||||
}) {
|
||||
const [familyDetails, setFamilyDetails] = useState(null);
|
||||
const [errMsg, setErrMsg] = useState("");
|
||||
// List of tabs
|
||||
const tabs = [
|
||||
{
|
||||
id: 1,
|
||||
@@ -23,9 +33,11 @@ export default function FamilyManageTabs({
|
||||
},
|
||||
];
|
||||
const [tab, setTab] = useState(tabs[0].name);
|
||||
const [manageLoader, setManageLoader] = useState(false);
|
||||
const tabHandler = (value) => {
|
||||
setTab(value);
|
||||
};
|
||||
// For profile uploads
|
||||
const [profileImg, setProfileImg] = useState(profile);
|
||||
// profile img
|
||||
const profileImgInput = useRef(null);
|
||||
@@ -41,6 +53,30 @@ export default function FamilyManageTabs({
|
||||
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 (
|
||||
<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] ${
|
||||
@@ -80,7 +116,31 @@ export default function FamilyManageTabs({
|
||||
</li>
|
||||
))}
|
||||
</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>
|
||||
@@ -150,3 +210,26 @@ function ProfileInfo({
|
||||
</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</>;
|
||||
}
|
||||
|
||||
@@ -41,14 +41,14 @@ export default function FamilyTable({ className, familyList, loader }) {
|
||||
added,
|
||||
last_login,
|
||||
task_count,
|
||||
uid,
|
||||
family_uid,
|
||||
} = props;
|
||||
let addedDate = added?.split(" ")[0];
|
||||
let LoginDate = last_login?.split(" ")[0];
|
||||
return (
|
||||
<tr
|
||||
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">
|
||||
<div className="flex space-x-2 items-center w-full">
|
||||
|
||||
+599
-574
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user