login page formatted
This commit was merged in pull request #3.
This commit is contained in:
Ebube
@@ -12,8 +12,8 @@ export default function LoginLayout({ slogan, children }) {
|
||||
screen = "h-screen";
|
||||
}
|
||||
return (
|
||||
<div className="layout-wrapper">
|
||||
<div className={`main-wrapper w-full ${screen}`}>
|
||||
<div className="layout-wrapper login">
|
||||
<div className={`main-wrapper login-wrapper w-full ${screen}`}>
|
||||
<div className="flex w-full h-full">
|
||||
|
||||
<div className="flex-1 flex justify-center items-center">
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
import React, { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useNavigate, Link } from "react-router-dom";
|
||||
import { toast } from "react-toastify";
|
||||
import googleLogo from "../../../assets/images/google-logo.svg";
|
||||
import appleLogo from "../../../assets/images/apple-black.svg";
|
||||
import facebookLogo from "../../../assets/images/facebook-4.svg";
|
||||
// import titleShape from "../../../assets/images/shape/title-shape.svg";
|
||||
import titleShape from "../../../assets/images/shape/login_straight_underline.svg";
|
||||
import WrenchBoard from "../../../assets/images/wrenchboard.png"
|
||||
import usersService from "../../../services/UsersService";
|
||||
import InputCom from "../../Helpers/Inputs/InputCom";
|
||||
import AuthLayout from "../AuthLayout";
|
||||
@@ -41,7 +44,7 @@ export default function Login() {
|
||||
const loginResult = await userApi.logInUser(postData); // just for a test
|
||||
//debugger;
|
||||
// if (email === "support@mermsemr.com") {
|
||||
if (loginResult.data.status > 0 && loginResult.data.internal_return ==100 && loginResult.data.session !='') { // just for a start
|
||||
if (loginResult.data.status > 0 && loginResult.data.internal_return == 100 && loginResult.data.session != '') { // just for a start
|
||||
localStorage.setItem("email", `${loginResult.data.email}`);
|
||||
localStorage.setItem("member_id", `${loginResult.data.member_id}`);
|
||||
localStorage.setItem("uid", `${loginResult.data.uid}`);
|
||||
@@ -56,7 +59,7 @@ export default function Login() {
|
||||
localStorage.setItem("zip_code", `${loginResult.data.zip_code}`);
|
||||
localStorage.setItem("session", `${loginResult.data.session}`);
|
||||
setLoginLoading(true);
|
||||
// userApi.getUserReminders(); //testing
|
||||
// userApi.getUserReminders(); //testing
|
||||
setTimeout(() => {
|
||||
toast.success("Login Successfully");
|
||||
navigate("/", { replace: true });
|
||||
@@ -74,37 +77,47 @@ export default function Login() {
|
||||
<AuthLayout
|
||||
slogan="Welcome to WrenchBoard"
|
||||
>
|
||||
<div className="content-wrapper w-full flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px] xl:w-[500px] 2xl:h-[818px] xl:h-[600px] rounded-xl 2xl:px-[164px] xl:px-[56px] sm:px-7 px-5 ">
|
||||
<div className="w-full">
|
||||
<div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
|
||||
<h1 className="text-5xl font-bold leading-[74px] text-dark-gray dark:text-white">
|
||||
Log In
|
||||
</h1>
|
||||
</div>
|
||||
<div className="input-area">
|
||||
<div className="input-item mb-5">
|
||||
<InputCom
|
||||
value={email}
|
||||
inputHandler={handleEmail}
|
||||
placeholder="support@mermsemr.com"
|
||||
label="Email Address"
|
||||
name="email"
|
||||
type="email"
|
||||
iconName="message"
|
||||
/>
|
||||
<div className="w-full">
|
||||
<div className='mb-12'>
|
||||
<Link to='#'>
|
||||
<img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
|
||||
</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="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" style={{
|
||||
fontSize: 'calc(1rem + .6vw)'
|
||||
}}>
|
||||
Sign In to WrenchBoard
|
||||
</h1>
|
||||
<span className="text-gray-400 font-medium text-xl">New Here? <Link to='/signup' className='font-semibold text-[#4687ba] hover:text-[#009ef7] transition'>Create an Account</Link></span>
|
||||
</div>
|
||||
<div className="input-item mb-5">
|
||||
<InputCom
|
||||
value={password}
|
||||
inputHandler={handlePassword}
|
||||
placeholder="● ● ● ● ● ●"
|
||||
label="Password"
|
||||
name="password"
|
||||
type="password"
|
||||
iconName="password"
|
||||
/>
|
||||
</div>
|
||||
<div className="forgot-password-area flex justify-between items-center mb-7">
|
||||
<div className="input-area">
|
||||
<div className="input-item mb-5">
|
||||
<InputCom
|
||||
value={email}
|
||||
inputHandler={handleEmail}
|
||||
placeholder="support@mermsemr.com"
|
||||
label="Email"
|
||||
name="email"
|
||||
type="email"
|
||||
iconName="message"
|
||||
/>
|
||||
</div>
|
||||
<div className="input-item mb-5">
|
||||
<InputCom
|
||||
value={password}
|
||||
inputHandler={handlePassword}
|
||||
placeholder="● ● ● ● ● ●"
|
||||
label="Password"
|
||||
name="password"
|
||||
type="password"
|
||||
iconName="password"
|
||||
forgotPassword
|
||||
/>
|
||||
</div>
|
||||
{/* <div className="forgot-password-area flex justify-between items-center mb-7">
|
||||
<div className="remember-checkbox flex items-center space-x-2.5">
|
||||
<button
|
||||
onClick={rememberMe}
|
||||
@@ -136,64 +149,36 @@ export default function Login() {
|
||||
<a href="/forgot-password" className="text-base text-purple">
|
||||
Forgot Password
|
||||
</a>
|
||||
</div>
|
||||
<div className="signin-area mb-3.5">
|
||||
<div className="flex justify-center">
|
||||
<button
|
||||
onClick={doLogin}
|
||||
type="button"
|
||||
className={`btn-login rounded-[50px] mb-6 text-xl text-white font-bold flex justify-center bg-purple items-center ${loginLoading ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
{loginLoading ? (
|
||||
<div className="signup btn-loader"></div>
|
||||
) : (
|
||||
<span>Sign In</span>
|
||||
)}
|
||||
</button>
|
||||
</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 ${loginLoading ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
{loginLoading ? (
|
||||
<div className="signup btn-loader"></div>
|
||||
) : (
|
||||
<span>Continue</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
{loginError && <p class="text-center text-red-700 pb-4">Invalid username or password</p>}
|
||||
<BrandBtn link='#' imgSrc={googleLogo} brand='Google' />
|
||||
<BrandBtn link='#' imgSrc={facebookLogo} brand='Facebook' />
|
||||
<BrandBtn link='#' imgSrc={appleLogo} brand='Apple' />
|
||||
</div>
|
||||
{loginError && <p class="text-center text-red-700 pb-4">Invalid username or password</p>}
|
||||
<div className="flex justify-center bottomMargin">
|
||||
<a
|
||||
href="#"
|
||||
className="w-full border border-light-purple dark:border-[#5356fb29] rounded-[50px] h-[58px] flex justify-center bg-[#FAFAFA] dark:bg-[#11131F] items-center"
|
||||
>
|
||||
<img className="mr-3" src={googleLogo} alt="google logo" />
|
||||
<span className="text-lg text-thin-light-gray font-normal">
|
||||
Sign In with Google
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex justify-center bottomMargin">
|
||||
<a
|
||||
href="#"
|
||||
className="w-full border border-light-purple dark:border-[#5356fb29] rounded-[50px] h-[58px] flex justify-center bg-[#FAFAFA] dark:bg-[#11131F] items-center"
|
||||
>
|
||||
<img className="mr-3" src={googleLogo} alt="google logo" />
|
||||
<span className="text-lg text-thin-light-gray font-normal">
|
||||
Sign In with faceBook
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex justify-center bottomMargin">
|
||||
<a
|
||||
href="#"
|
||||
className="w-full border border-light-purple dark:border-[#5356fb29] rounded-[50px] h-[58px] flex justify-center bg-[#FAFAFA] dark:bg-[#11131F] items-center"
|
||||
>
|
||||
<img className="mr-3" src={googleLogo} alt="google logo" />
|
||||
<span className="text-lg text-thin-light-gray font-normal">
|
||||
Sign In with Apple
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="signup-area flex justify-center">
|
||||
{/* <div className="signup-area flex justify-center">
|
||||
<p className="sm:text-lg text-sm text-thin-light-gray font-normal">
|
||||
Don't have an account ?
|
||||
<a href="/signup" className="ml-2 text-dark-gray dark:text-white">
|
||||
Sign up free
|
||||
</a>
|
||||
</p>
|
||||
</div> */}
|
||||
<div className="pt-5 text-[#181c32] text-center font-semibold text-base">This site is protected by hCaptcha and the our Privacy Policy and Terms of Service apply.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -201,4 +186,24 @@ export default function Login() {
|
||||
</AuthLayout>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const BrandBtn = ({
|
||||
link,
|
||||
imgSrc,
|
||||
brand
|
||||
}) => {
|
||||
return (
|
||||
<div className="flex justify-center bottomMargin">
|
||||
<a
|
||||
href={link}
|
||||
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)" />
|
||||
<span className="text-lg text-thin-light-gray font-normal">
|
||||
Sign In with {brand}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
import React from "react";
|
||||
import Icons from "../../Icons";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
export default function InputCom({
|
||||
label,
|
||||
@@ -9,18 +10,22 @@ export default function InputCom({
|
||||
iconName,
|
||||
inputHandler,
|
||||
value,
|
||||
forgotPassword
|
||||
}) {
|
||||
return (
|
||||
<div className="input-com">
|
||||
<div className="flex items-center justify-between">
|
||||
{label && (
|
||||
<label
|
||||
className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5"
|
||||
className="input-label text-[#181c32] dark:text-white text-base font-semibold block mb-2.5"
|
||||
htmlFor={name}
|
||||
>
|
||||
{label}
|
||||
</label>
|
||||
)}
|
||||
<div className="input-wrapper border border-light-purple dark:border-[#5356fb29] dark:border-[#5356fb29] w-full rounded-[50px] h-[58px] overflow-hidden relative ">
|
||||
{forgotPassword && <Link href="/forgot-password" className="text-base text-[#4687ba] hover:text-[#009ef7]">Forgot Password?</Link>}
|
||||
</div>
|
||||
<div className="input-wrapper border border-[#f5f8fa]] dark:border-[#5e6278] w-full rounded-[0.475rem] h-[58px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ">
|
||||
<input
|
||||
placeholder={placeholder}
|
||||
value={value}
|
||||
|
||||
Reference in New Issue
Block a user