family login component added
This commit was merged in pull request #87.
This commit is contained in:
victorAnumudu
@@ -16,6 +16,8 @@ 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})
|
||||||
|
|
||||||
const [checked, setValue] = useState(false);
|
const [checked, setValue] = useState(false);
|
||||||
const [loginLoading, setLoginLoading] = useState(false);
|
const [loginLoading, setLoginLoading] = useState(false);
|
||||||
|
|
||||||
@@ -28,6 +30,15 @@ export default function Login() {
|
|||||||
setValue(!checked);
|
setValue(!checked);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
//FUNCTION TO DETERMINE/CHANGE LOGIN COMPONENT
|
||||||
|
const handleLoginCom = ({target:{name}}) => {
|
||||||
|
if(name == 'user'){
|
||||||
|
setLoginCom({[name]: true, family: false})
|
||||||
|
}else{
|
||||||
|
setLoginCom({[name]: false, family: true})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// email
|
// email
|
||||||
const [email, setMail] = useState("");
|
const [email, setMail] = useState("");
|
||||||
const handleEmail = (e) => {
|
const handleEmail = (e) => {
|
||||||
@@ -102,9 +113,9 @@ export default function Login() {
|
|||||||
<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-[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="w-full">
|
<div className="w-full">
|
||||||
<div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
|
<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]">
|
{/* <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
|
||||||
Sign In to WrenchBoard
|
Sign In to WrenchBoard
|
||||||
</h1>
|
</h1> */}
|
||||||
<span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
|
<span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
|
||||||
New Here?{" "}
|
New Here?{" "}
|
||||||
<Link
|
<Link
|
||||||
@@ -115,80 +126,165 @@ export default function Login() {
|
|||||||
</Link>
|
</Link>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="input-area">
|
|
||||||
<div className="input-item mb-5">
|
|
||||||
<InputCom
|
|
||||||
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">
|
{/* switch login component */}
|
||||||
<InputCom
|
<div className="flex justify-start items-end">
|
||||||
fieldClass="px-6"
|
<button
|
||||||
value={password}
|
name='user'
|
||||||
inputHandler={handlePassword}
|
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]'}`}
|
||||||
placeholder="● ● ● ● ● ●"
|
onClick={handleLoginCom}
|
||||||
label="Password"
|
>Sign in
|
||||||
name="password"
|
</button>
|
||||||
type="password"
|
<button
|
||||||
iconName="password"
|
name='family'
|
||||||
forgotPassword
|
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
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
)}
|
||||||
|
{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>
|
||||||
{loginError && (
|
// END of user login compoenent
|
||||||
<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{" "}
|
// family login compoenent
|
||||||
<Link to="/#" className="text-[#009ef7]">
|
<div className="p-2 input-area border-2 border-[#4687ba]">
|
||||||
reset your password
|
<div className="input-item mb-5">
|
||||||
</Link>{" "}
|
<InputCom
|
||||||
or{" "}
|
labelClass='tracking-wider'
|
||||||
<Link to="/signup" className="text-[#009ef7]">
|
fieldClass="px-6"
|
||||||
create a new account
|
value={email}
|
||||||
</Link>
|
inputHandler={handleEmail}
|
||||||
|
placeholder="support@mermsemr.com"
|
||||||
|
label="Username"
|
||||||
|
name="email"
|
||||||
|
type="email"
|
||||||
|
iconName="message"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
{msgError && (
|
<div className="input-item mb-5">
|
||||||
<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]">
|
<InputCom
|
||||||
{msgError}
|
labelClass='tracking-wider'
|
||||||
|
fieldClass="px-6"
|
||||||
|
value={password}
|
||||||
|
inputHandler={handlePassword}
|
||||||
|
placeholder="● ● ● ● ● ●"
|
||||||
|
label="Pin"
|
||||||
|
name="password"
|
||||||
|
type="password"
|
||||||
|
iconName="password"
|
||||||
|
// forgotPassword
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
{loginError && (
|
||||||
<div className="signin-area mb-3.5">
|
<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="flex justify-center">
|
Invalid username or password{" "}
|
||||||
<button
|
{/* <Link to="/#" className="text-[#009ef7]">
|
||||||
onClick={doLogin}
|
reset your password
|
||||||
type="button"
|
</Link>{" "}
|
||||||
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]`}
|
or{" "}
|
||||||
>
|
<Link to="/signup" className="text-[#009ef7]">
|
||||||
{loginLoading ? (
|
create a new account
|
||||||
<div className="signup btn-loader"></div>
|
</Link> */}
|
||||||
) : (
|
</div>
|
||||||
<span>Continue</span>
|
)}
|
||||||
)}
|
{msgError && (
|
||||||
</button>
|
<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>
|
||||||
<BrandBtn link="#" imgSrc={googleLogo} brand="Google" />
|
|
||||||
<BrandBtn link="#" imgSrc={facebookLogo} brand="Facebook" />
|
|
||||||
<BrandBtn link="#" imgSrc={appleLogo} brand="Apple" />
|
|
||||||
</div>
|
</div>
|
||||||
{/* <div className="signup-area flex justify-center">
|
// END of family login compoenent
|
||||||
<p className="sm:text-lg text-sm text-thin-light-gray font-normal">
|
}
|
||||||
Don't have an account ?
|
{/* END of login component */}
|
||||||
<a href="/signup" className="ml-2 text-dark-gray dark:text-white">
|
|
||||||
Sign up free
|
<div className="pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]">
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
</div> */}
|
|
||||||
<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>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user