Skip to content

Development #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nikhea wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Development #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8e8aee5
wip: added google recaptach
nikhea Jul 5, 2024
ea2a5ef
wip: added google recaptach
nikhea Jul 5, 2024
bab3743
wip: added password view
nikhea Jul 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4,439 changes: 4,439 additions & 0 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
"rc-menu": "^9.8.2",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-google-recaptcha": "^3.1.0",
"react-hook-form": "^7.43.5",
"react-hook-form-persist": "^3.0.0",
"react-icons": "^4.8.0",
Expand All @@ -51,6 +52,7 @@
"@types/node": "18.11.3",
"@types/react": "18.0.21",
"@types/react-dom": "18.0.6",
"@types/react-google-recaptcha": "^2.1.9",
"@types/react-modal": "^3.13.1",
"autoprefixer": "^10.4.12",
"postcss": "^8.4.18",
Expand Down
2 changes: 1 addition & 1 deletion pages/404/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const NotFound = () => {
return (
<>
<Head>
<title>404 NotFound | Hekto commerce</title>
<title>404 Not Found | Hekto commerce</title>
</Head>
<div className="container grid w-full h-full place-content-center">
<Image
Expand Down
2 changes: 1 addition & 1 deletion pages/shop/[shopId]/[shopSubId]/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const index = (props: any) => {
return (
<>
<Head>
<title>{capitalizeFirstLetter(subCategory.name)}| Hekto commerce</title>
<title>{capitalizeFirstLetter(subCategory.name)} | Hekto commerce</title>
</Head>
<Banner image={subCategory.coverPhoto} title={props.id} />
<div className="container">
Expand Down
2 changes: 1 addition & 1 deletion pages/shoppingCart/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const ShoppingCart = () => {
{isDesktopOrLaptop ? <ShoppingCartTable /> : <ShoppingCartMobile />}
<div className="flex flex-col justify-between w-full col-start-1 col-end-13 lg:col-start-9 lg:col-end-13 h-fit">
<ShippingSideTotal />
<CalulateShipping title="Calculate Shiping" />
{/* <CalulateShipping title="Calculate Shiping" /> */}
</div>
</div>
</div>
Expand Down
73 changes: 55 additions & 18 deletions src/components/AuthForm/LoginAccountForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { yupResolver } from "@hookform/resolvers/yup";
import { loginAccountFormData, loginAccountSchema } from "./AccountFormData";
import Input from "../FormElement/input/input";
import Button from "../FormElement/Button/Button";
import { FC } from "react";
import { FC, useState } from "react";
import { IAccountFormDefaultText } from "../../interface/AccountForm";
import Link from "next/link";
import { useLogin } from "../../auth/auth";
Expand All @@ -13,6 +13,9 @@ import { useRouter } from "next/router";
import { notify } from "../../utils/notify";
import { useQueryClient } from "@tanstack/react-query";
import { queryKey } from "../../Hooks/queryKeys";
import AuthReCAPTCHA from "../GoogleReCAPTCHA/GoogleRecaptcha";
import { HiOutlineEye } from "react-icons/hi";
import { HiEyeSlash } from "react-icons/hi2";

const AccountForm: FC<IAccountFormDefaultText> = ({
type,
Expand All @@ -23,6 +26,9 @@ const AccountForm: FC<IAccountFormDefaultText> = ({
ButtonSign,
FormInputData,
}) => {
const [view, setView] = useState(true);
const [captchaValue, setCaptchaValue] = useState<string | null>(null);
const [captchaError, setCaptchaError] = useState<boolean>(false);
const queryClient = useQueryClient();
const login = useLogin();
const router = useRouter();
Expand All @@ -36,16 +42,28 @@ const AccountForm: FC<IAccountFormDefaultText> = ({
handleSubmit,
formState: { errors },
} = methods;

const onCaptchaChange = (value: string | null) => {
setCaptchaValue(value);
};

const submitForm = (data: any) => {
if (!captchaValue) {
setCaptchaError(true);
notify({ type: "error", message: "complete the reCAPTCHA" });
return;
}
const formData = { ...data, recaptcha: captchaValue };
console.log(formData);
login.mutate(data, {
onSuccess: () => {
reset();
router.push("/");
queryClient.invalidateQueries([queryKey.carts]);
notify({
type: "success",
message: "Logged In Successfully",
});
// notify({
// type: "success",
// message: "Logged In Successfully",
// });
},
});
};
Expand All @@ -61,7 +79,9 @@ const AccountForm: FC<IAccountFormDefaultText> = ({
<form onSubmit={handleSubmit(submitForm)}>
<div className=" w-[90%] m-auto ">
<div className={style.inputContainer}>
<label className={style.label}>email</label>
<label className={style.label}>
email <span className="text-primary">*</span>
</label>
<Input
type="email"
placeholder="Email Address"
Expand All @@ -75,18 +95,35 @@ const AccountForm: FC<IAccountFormDefaultText> = ({
/>
</div>
<div className={style.inputContainer}>
<label className={style.label}>password</label>
<Input
type="password"
placeholder="Password"
name="password"
required
isWhiteBg
isCurve
errors={errors}
// Width="100%"
inputRef={register("password")}
/>
<label className={style.label}>
password <span className="text-primary">*</span>
</label>
<div className="relative ">
<Input
type={view ? "password" : "text"}
placeholder="Password"
name="password"
required
isWhiteBg
isCurve
errors={errors}
Width="100%"
inputRef={register("password")}
/>
<div
className="absolute cursor-pointer top-7 right-3"
onClick={() => setView(!view)}
>
{view ? (
<HiOutlineEye className="w-[20px] hover:text-primary " />
) : (
<HiEyeSlash className="w-[20px] hover:text-primary " />
)}
</div>
</div>
</div>
<div className={style.inputContainer}>
<AuthReCAPTCHA onChange={onCaptchaChange} />
</div>
<Button isCurve primary padding uppercase full>
{login.isLoading ? "signing in..." : ButtonSign}
Expand Down
87 changes: 70 additions & 17 deletions src/components/AuthForm/RegisterForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,15 @@ import {
} from "./AccountFormData";
import Input from "../FormElement/input/input";
import Button from "../FormElement/Button/Button";
import { FC } from "react";
import { FC, useState } from "react";
import { IAccountFormDefaultText } from "../../interface/AccountForm";
import Link from "next/link";
import { useRouter } from "next/router";
import { useRegister } from "../../auth/auth";
import { notify } from "../../utils/notify";
import AuthReCAPTCHA from "../GoogleReCAPTCHA/GoogleRecaptcha";
import { HiOutlineEye } from "react-icons/hi";
import { HiEyeSlash } from "react-icons/hi2";

const AccountForm: FC<IAccountFormDefaultText> = ({
type,
Expand All @@ -23,6 +26,10 @@ const AccountForm: FC<IAccountFormDefaultText> = ({
ButtonSign,
FormInputData,
}) => {
const [view, setView] = useState(true);
const [captchaValue, setCaptchaValue] = useState<string | null>(null);
const [captchaError, setCaptchaError] = useState<boolean>(false);

const router = useRouter();

const registers = useRegister();
Expand All @@ -35,8 +42,20 @@ const AccountForm: FC<IAccountFormDefaultText> = ({
handleSubmit,
formState: { errors },
} = methods;
console.log(errors);

const onCaptchaChange = (value: string | null) => {
setCaptchaValue(value);
};

const submitForm = (data: any) => {
if (!captchaValue) {
setCaptchaError(true);
notify({ type: "error", message: "complete the reCAPTCHA" });
return;
}
const formData = { ...data, recaptcha: captchaValue };
console.log(formData);

registers.mutate(data, {
onSuccess: () => {
reset();
Expand All @@ -48,6 +67,7 @@ const AccountForm: FC<IAccountFormDefaultText> = ({
},
});
};

return (
<div className={style.formMainContainer}>
<div className={style.formContainer}>
Expand All @@ -59,7 +79,9 @@ const AccountForm: FC<IAccountFormDefaultText> = ({
<form onSubmit={handleSubmit(submitForm)}>
<div className=" w-[90%] m-auto ">
<div className={style.inputContainer}>
<label className={style.label}>first name</label>
<label className={style.label}>
first name <span className="text-primary">*</span>
</label>
<Input
type="text"
placeholder="First Name"
Expand All @@ -73,7 +95,9 @@ const AccountForm: FC<IAccountFormDefaultText> = ({
/>
</div>
<div className={style.inputContainer}>
<label className={style.label}>last name</label>
<label className={style.label}>
last name <span className="text-primary">*</span>
</label>
<Input
type="text"
placeholder="Last Name"
Expand All @@ -87,7 +111,9 @@ const AccountForm: FC<IAccountFormDefaultText> = ({
/>
</div>
<div className={style.inputContainer}>
<label className={style.label}>email</label>
<label className={style.label}>
email <span className="text-primary">*</span>
</label>
<Input
type="email"
placeholder="Email Address"
Expand All @@ -101,18 +127,35 @@ const AccountForm: FC<IAccountFormDefaultText> = ({
/>
</div>
<div className={style.inputContainer}>
<label className={style.label}>password</label>
<Input
type="password"
placeholder="Password"
name="password"
required
isWhiteBg
isCurve
errors={errors}
// Width="100%"
inputRef={register("password")}
/>
<label className={style.label}>
password <span className="text-primary">*</span>
</label>
<div className="relative ">
<Input
type={view ? "password" : "text"}
placeholder="Password"
name="password"
required
isWhiteBg
isCurve
errors={errors}
Width="100%"
inputRef={register("password")}
/>
<div
className="absolute cursor-pointer top-7 right-3"
onClick={() => setView(!view)}
>
{view ? (
<HiOutlineEye className="w-[20px] hover:text-primary " />
) : (
<HiEyeSlash className="w-[20px] hover:text-primary " />
)}
</div>
</div>
</div>
<div className={style.inputContainer}>
<AuthReCAPTCHA onChange={onCaptchaChange} />
</div>
<Button isCurve primary padding uppercase full>
{registers.isLoading ? "signing up..." : ButtonSign}
Expand All @@ -132,3 +175,13 @@ const AccountForm: FC<IAccountFormDefaultText> = ({
};

export default AccountForm;
{
/* {captchaError && "Please complete the reCAPTCHA"} */
}
{
/* {captchaError && (
<p className={style.captchaError}>
Please complete the reCAPTCHA
</p>
)} */
}
9 changes: 9 additions & 0 deletions src/components/AuthForm/style/AccountForm.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,3 +33,12 @@
@apply text-center capitalize flex items-center justify-center mt-5 text-[#9096B2];
}
// 9096B2
.captchaContainer {
@apply w-full mb-5;
}

.captchaError {
color: red;
font-size: 0.9rem;
margin-top: 0.5rem;
}
31 changes: 31 additions & 0 deletions src/components/GoogleReCAPTCHA/GoogleRecaptcha.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { FC } from "react";

import ReCAPTCHA from "react-google-recaptcha";

interface Props {
onChange: (value: string | null) => void;
}

const AuthReCAPTCHA: FC<Props> = ({ onChange }) => {
function handleChange(value: string | null) {
onChange(value);
}

return (
// <div
// style={{ width: "100% !important", background: "#000", display: "flex" }}
// >
// <div
// className="captcha"
// style={{ transform: "scale(0.9)", transformOrigin: "0 0" }}
// >
<ReCAPTCHA
sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY || ""}
onChange={handleChange}
/>
// </div>
);
};
export default AuthReCAPTCHA;
// console.log("Captcha value:", value);
// class="rc-anchor rc-anchor-normal rc-anchor-light"
2 changes: 1 addition & 1 deletion src/components/Layout/header/mainNavMobile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const mainNavMobile = () => {
// background: "pink",
}}
>
<div className="flex justify-end mt-6 mx-7 text-end">
<div className="flex justify-end mt-6 mx-7 text-end">
<XMarkIcon
className="w-6 h-6 mr-2 cursor-pointer"
onClick={toggleDrawer}
Expand Down
2 changes: 1 addition & 1 deletion src/components/SingleroductPageView/components/ProductInfo/ProductInfoHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const ProductInfoHeader: FC<IHeaderProps> = ({ step, setStep }) => {
const [title] = useState([
"description",
"additional information",
"videos",
// "videos",
"reviews",
]);
const handleActiveTab = (index: any) => {
Expand Down
Loading