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

Add family acc

Browse Source
This commit is contained in:
Ebube
2023-05-09 11:59:49 +01:00
parent 872ba3e0cc
commit 4eee3a4683
19 changed files with 2056 additions and 1362 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AuthPages/ForgotPassword/index.jsx
+71 -40
View File
@@ -1,17 +1,17 @@
import React, { useEffect, useState } from "react";
import { Link, useNavigate } from 'react-router-dom';
import WrenchBoard from "../../../assets/images/wrenchboard.png"
import React, { useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import WrenchBoard from "../../../assets/images/wrenchboard.png";
import usersService from "../../../services/UsersService";
import InputCom from "../../Helpers/Inputs/InputCom";
import AuthLayout from "../AuthLayout";
import usersService from "../../../services/UsersService";
export default function ForgotPassword() {
const [checked, setValue] = useState(false);
const [resetLoading, setResetLoading] = useState(false)
const [resetLoading, setResetLoading] = useState(false);
// email
const [email, setMail] = useState("");
const [msgError, setMsgError] = useState('');
const [msgSuccess, setMsgSuccess] = useState(false)
const [msgError, setMsgError] = useState("");
const [msgSuccess, setMsgSuccess] = useState(false);
const navigate = useNavigate();
const userApi = new usersService();
@@ -21,52 +21,54 @@ export default function ForgotPassword() {
};
const humanChecker = () => {
setValue(!checked)
}
setValue(!checked);
};
const resetHandler = async () => {
if (email == '') {
setMsgError('An email is required')
if (email == "") {
setMsgError("An email is required");
} else if (!checked) {
setMsgError('Check if you are human')
setMsgError("Check if you are human");
}
if (email !== '' && checked) {
const reqData = { email }
setResetLoading(true)
if (email !== "" && checked) {
const reqData = { email };
setResetLoading(true);
try {
const res = await userApi.StartResetPassword(reqData)
const res = await userApi.StartResetPassword(reqData);
if (res.status === 200) {
setMsgSuccess(true)
setMail("")
setValue(false)
setResetLoading(false)
setMsgSuccess(true);
setMail("");
setValue(false);
setResetLoading(false);
}
} catch (error) {
setResetLoading(false)
setMail("")
setMsgError('An error occurred')
throw new Error(error)
setResetLoading(false);
setMail("");
setMsgError("An error occurred");
throw new Error(error);
} finally {
setTimeout(() => {
setMsgError(null)
}, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT)
setMsgError(null);
}, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
}
}
setTimeout(() => {
setMsgError(null)
}, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT)
}
setMsgError(null);
}, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
};
return (
<>
<AuthLayout
slogan="Welcome to WrenchBoard"
>
<AuthLayout slogan="Welcome to WrenchBoard">
<div className="w-full">
<div className='mb-12'>
<Link to='#'>
<img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
<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">
@@ -75,11 +77,14 @@ export default function ForgotPassword() {
<h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
Forget Password
</h1>
<span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">Enter your email to reset your password.</span>
<span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
Enter your email to reset your password.
</span>
</div>
<div className="input-area">
<div className="input-item mb-10">
<InputCom
fieldClass="px-6"
placeholder="Your Username/Email"
label="Email"
name="email"
@@ -98,7 +103,14 @@ export default function ForgotPassword() {
<div className="relative table top-0 h-full">
<div className="table-cell align-middle">
<div className="relative w-[30px] h-[30px] mx-[15px]">
<input type="checkbox" name="human-checkbox" id="human-checkbox" className="w-[28px] h-[28px] border-[1px] rounded border-gray-400 checked:bg-white" checked={checked} onChange={humanChecker} />
<input
type="checkbox"
name="human-checkbox"
id="human-checkbox"
className="w-[28px] h-[28px] border-[1px] rounded border-gray-400 checked:bg-white"
checked={checked}
onChange={humanChecker}
/>
</div>
</div>
</div>
@@ -106,7 +118,10 @@ export default function ForgotPassword() {
<div className="h-full relative inline-block w-[170px]">
<label className="relative table top-0 h-full">
<label className="table-cell align-middle">
<label className="text-800 text-sm" htmlFor="human-checkbox">
<label
className="text-800 text-sm"
htmlFor="human-checkbox"
>
I am human
</label>
</label>
@@ -116,8 +131,24 @@ export default function ForgotPassword() {
</div>
</div>
</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>}
{msgSuccess && <div className="relative p-4 text-[#44228c] bg-[#e3d7fb] border-[#d5c4f9] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">If we find your email, you will receive a link to reset your password. Please use or <Link to='/contact' className="text-[#4687ba] hover:text-[#009ef7]">contact form</Link> if you did not get our message after few minutes.</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>
)}
{msgSuccess && (
<div className="relative p-4 text-[#44228c] bg-[#e3d7fb] border-[#d5c4f9] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
If we find your email, you will receive a link to reset your
password. Please use or{" "}
<Link
to="/contact"
className="text-[#4687ba] hover:text-[#009ef7]"
>
contact form
</Link>{" "}
if you did not get our message after few minutes.
</div>
)}
<div className="signin-area mb-3.5">
<div className="flex justify-center items-center gap-2">
src/components/AuthPages/Login/index.jsx
+6 -38
View File
@@ -1,15 +1,14 @@
import React, { useState } from "react";
import { useNavigate, Link } from "react-router-dom";
import { toast } from "react-toastify";
import googleLogo from "../../../assets/images/google-logo.svg";
import { Link, useNavigate } from "react-router-dom";
import appleLogo from "../../../assets/images/apple-black.svg";
import facebookLogo from "../../../assets/images/facebook-4.svg";
import googleLogo from "../../../assets/images/google-logo.svg";
import WrenchBoard from "../../../assets/images/wrenchboard.png";
import usersService from "../../../services/UsersService";
import InputCom from "../../Helpers/Inputs/InputCom";
import AuthLayout from "../AuthLayout";
import { useDispatch, useSelector } from "react-redux";
import { useDispatch } from "react-redux";
import { updateUserDetails } from "../../../store/UserDetails";
export default function Login() {
@@ -73,7 +72,7 @@ export default function Login() {
setLoginError(true);
}
} else {
setMsgError("Please fill in fields");
setMsgError("Please fill in the fields");
}
} catch (error) {
setMsgError("An error occurred");
@@ -117,6 +116,7 @@ export default function Login() {
<div className="input-area">
<div className="input-item mb-5">
<InputCom
fieldClass="px-6"
value={email}
inputHandler={handleEmail}
placeholder="support@mermsemr.com"
@@ -129,6 +129,7 @@ export default function Login() {
<div className="input-item mb-5">
<InputCom
fieldClass="px-6"
value={password}
inputHandler={handlePassword}
placeholder="● ● ● ● ● ●"
@@ -139,39 +140,6 @@ export default function Login() {
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}
type="button"
className="w-5 h-5 text-dark-gray dark:text-white flex justify-center items-center border border-light-gray"
>
{checked && (
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clipRule="evenodd"
/>
</svg>
)}
</button>
<span
onClick={rememberMe}
className="text-base text-dark-gray dark:text-white"
>
Remember Me
</span>
</div>
<a href="/forgot-password" className="text-base text-purple">
Forgot Password
</a>
</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{" "}
src/components/AuthPages/SignUp/index.jsx
+5 -1
View File
@@ -1,5 +1,5 @@
import React, { useCallback, useEffect, useState } from "react";
import { useNavigate, Link } from "react-router-dom";
import { Link, useNavigate } from "react-router-dom";
import facebookLogo from "../../../assets/images/facebook-4.svg";
import WrenchBoard from "../../../assets/images/wrenchboard.png";
import usersService from "../../../services/UsersService";
@@ -171,6 +171,7 @@ export default function SignUp() {
<div className="input-fl-name mb-5 sm:flex w-full sm:space-x-6 ">
<div className="input-item sm:w-1/2 w-full mb-5 sm:mb-0">
<InputCom
fieldClass="px-6"
placeholder="Firstname"
label="First Name"
name="first_name"
@@ -181,6 +182,7 @@ export default function SignUp() {
</div>
<div className="input-item flex-1">
<InputCom
fieldClass="px-6"
placeholder="Lastname"
label="Last Name"
name="last_name"
@@ -192,6 +194,7 @@ export default function SignUp() {
</div>
<div className="input-item mb-5">
<InputCom
fieldClass="px-6"
placeholder="support@mermsemr.com"
label="Email"
name="email"
@@ -202,6 +205,7 @@ export default function SignUp() {
</div>
<div className="input-item mb-5">
<InputCom
fieldClass="px-6"
placeholder="● ● ● ● ● ●"
label="Password"
name="password"
src/components/AuthPages/UpdatePassword/index.jsx
+4 -3
View File
@@ -16,9 +16,7 @@ export default function UpdatePassword() {
return (
<>
<AuthLayout
slogan="Welcome to myFit"
>
<AuthLayout slogan="Welcome to myFit">
{updated === false ? (
<div className="content-wrapper update-password-section xl:bg-white dark:bg-dark-white w-full 2xl:h-[818px] xl:h-[600px] sm:w-auto sm:px-[70px] px-5 2xl:px-[100px] rounded-xl flex flex-col justify-center">
<div>
@@ -34,6 +32,7 @@ export default function UpdatePassword() {
<div className="input-area">
<div className="input-item mb-5">
<InputCom
fieldClass="px-6"
placeholder="*********"
label="Old Password"
name="password"
@@ -43,6 +42,7 @@ export default function UpdatePassword() {
</div>
<div className="input-item mb-5">
<InputCom
fieldClass="px-6"
placeholder="*********"
label="New Password"
name="password"
@@ -52,6 +52,7 @@ export default function UpdatePassword() {
</div>
<div className="input-item mb-5">
<InputCom
fieldClass="px-6"
placeholder="*********"
label="Re-enter Password"
name="password"
src/components/AuthPages/VerifyLink/index.jsx
+7 -5
View File
@@ -1,10 +1,10 @@
import { useState, useEffect, useCallback } from "react";
import { useLocation, Link, useNavigate } from "react-router-dom";
import AuthLayout from "../AuthLayout";
import InputCom from "../../Helpers/Inputs/InputCom";
import usersService from "../../../services/UsersService";
import { useCallback, useEffect, useState } from "react";
import { Link, useLocation, useNavigate } from "react-router-dom";
import WrenchBoard from "../../../assets/images/wrenchboard.png";
import debounce from "../../../hooks/debounce";
import usersService from "../../../services/UsersService";
import InputCom from "../../Helpers/Inputs/InputCom";
import AuthLayout from "../AuthLayout";
export default function VerifyLink() {
const [email, setEmail] = useState("");
@@ -173,6 +173,7 @@ const SuccessfulComponent = ({
{/* INPUT */}
<div className="mb-5">
<InputCom
fieldClass="px-6"
value={email}
inputHandler={handleEmail}
placeholder="support@mermsemr.com"
@@ -184,6 +185,7 @@ const SuccessfulComponent = ({
</div>
<div className="mb-5">
<InputCom
fieldClass="px-6"
value={password}
inputHandler={handlePassword}
placeholder="● ● ● ● ● ●"
src/components/AuthPages/VerifyPassword/index.jsx
+8 -8
View File
@@ -1,9 +1,9 @@
import { useState, useEffect, useCallback } from "react";
import { useLocation, Link, useNavigate } from "react-router-dom";
import AuthLayout from "../AuthLayout";
import InputCom from "../../Helpers/Inputs/InputCom";
import usersService from "../../../services/UsersService";
import { useState } from "react";
import { Link, useLocation, useNavigate } from "react-router-dom";
import WrenchBoard from "../../../assets/images/wrenchboard.png";
import usersService from "../../../services/UsersService";
import InputCom from "../../Helpers/Inputs/InputCom";
import AuthLayout from "../AuthLayout";
const VerifyPassword = () => {
const [password, setPassword] = useState("");
@@ -158,6 +158,7 @@ const SuccessfulComponent = ({
{/* INPUT */}
<div className="mb-5">
<InputCom
fieldClass="px-6"
value={password}
inputHandler={handlePassword}
placeholder="● ● ● ● ● ●"
@@ -165,13 +166,12 @@ const SuccessfulComponent = ({
name="password"
type={showPassword ? "text" : "password"}
onClick={onClick}
passIcon={
showPassword ? "show-password" : "hide-password"
}
passIcon={showPassword ? "show-password" : "hide-password"}
/>
</div>
<div className="mb-5">
<InputCom
fieldClass="px-6"
value={confirmPassword}
inputHandler={handlePassword}
placeholder="● ● ● ● ● ●"