Skip to content

Commit

Permalink
Merge pull request #201 from Shariq2003/SignUp_SignIn
Browse files Browse the repository at this point in the history
  • Loading branch information
@Vimall03
Vimall03 authored Nov 5, 2024
2 parents 366baf5 + 30d82d6 commit 6bb4a78
Show file tree
Hide file tree
Showing 4 changed files with 256 additions and 0 deletions.
112 changes: 112 additions & 0 deletions alimento-nextjs/app/(PublicRoutes)/Auth/Customer/SignIn/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
"use client";
import { useState, FormEvent } from "react";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import Image from "next/image";
import signinImage from "../../../../../public/signin.png";

const SignInPage: React.FC = () => {
const [email, setEmail] = useState<string>("");
const [isSignUp, setIsSignUp] = useState<boolean>(false);

const handleSendOTP = (e: FormEvent) => {
e.preventDefault();

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
toast.error("Please enter a valid email address.");
return;
}

console.log("OTP sent to:", email);
toast.success("OTP sent to your email!");
};

return (
<div className="min-h-screen flex items-center justify-center bg-gradient-to-r from-pink-200 to-pink-400">
<ToastContainer
position="top-center"
autoClose={5000}
hideProgressBar
newestOnTop
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
className="mt-16"
/>
<div className="w-full max-w-4xl grid grid-cols-1 md:grid-cols-2 bg-white shadow-lg rounded-lg overflow-hidden transform transition duration-500 ease-in-out hover:scale-105">
<div className="hidden md:flex items-center justify-center bg-blue-50 p-6">
<Image
src={signinImage}
alt="Signup Illustration"
layout="responsive"
width={350}
height={350}
className="rounded-lg"
/>
</div>
<div className="p-8 md:p-10 flex flex-col justify-center bg-white">
<h2 className="text-3xl font-semibold text-center text-blue-700 mb-3">
{isSignUp ? "Sign Up" : "Sign In"}
</h2>
<p className="text-center text-gray-600 mb-6">
Enter your email to{" "}
{isSignUp ? "create an account" : "receive an OTP"}
</p>
<form className="space-y-6" onSubmit={handleSendOTP}>
<div>
<label
htmlFor="email"
className="block text-sm font-medium text-blue-600 mb-1"
>
Email
</label>
<input
type="email"
id="email"
placeholder="[email protected]"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="w-full px-4 py-2 rounded-md bg-blue-50 border border-blue-200 text-blue-900 focus:ring-2 focus:ring-blue-400"
required
/>
</div>

<div>
<button
type="submit"
className="w-full py-2 bg-gradient-to-r from-green-500 to-blue-500 hover:from-blue-500 hover:to-green-500 text-white rounded-md font-semibold transition"
>
Send OTP
</button>
</div>
</form>
<div className="text-center mt-4 space-y-2">
<p className="text-sm">
<a
href="#"
className="text-blue-600 hover:underline"
>
Forgot Password?
</a>
</p>
<p className="text-sm text-black">
Don’t have an account?{" "}
<a
href="#"
onClick={() => setIsSignUp(true)}
className="text-green-500 hover:underline"
>
Sign Up
</a>
</p>
</div>
</div>
</div>
</div>
);
};

export default SignInPage;
143 changes: 143 additions & 0 deletions alimento-nextjs/app/(PublicRoutes)/Auth/Customer/SignUp/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
"use client"; // This should be the first line

import { useState } from "react";
import { useRouter } from "next/navigation"; // Use the correct import based on your Next.js version
import { toast, ToastContainer } from "react-toastify";
import Image from "next/image";
import signinImage from "../../../../../public/signin.png";

const SignUpPage: React.FC = () => {
const router = useRouter(); // Safe to call useRouter here
const [email, setEmail] = useState<string>("");
const [firstName, setFirstName] = useState<string>("");
const [otp, setOTP] = useState<string>("");

const handleSignUp = (e: React.FormEvent) => {
e.preventDefault();

if (!firstName || !email || !otp) {
toast.error("All fields are required.");
return;
}

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
toast.error("Please enter a valid email address.");
return;
}

console.log("User Data:", { firstName, email, otp });
toast.success("Form submitted successfully!");

router.push("/verify-email");
};

return (
<div className="min-h-screen flex items-center justify-center bg-gradient-to-r from-pink-200 to-pink-400">
<ToastContainer
position="top-center"
autoClose={5000}
hideProgressBar
newestOnTop
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
className="mt-16"
/>
<div className="w-full max-w-4xl grid grid-cols-1 md:grid-cols-2 bg-white shadow-lg rounded-lg overflow-hidden transform transition duration-500 ease-in-out hover:scale-105">
<div className="p-10 flex flex-col justify-center">
<h2 className="text-4xl font-bold text-center text-blue-600 mb-4">
Join Us Today!
</h2>
<p className="text-center text-gray-600 mb-8">
Create your account to get started
</p>
<form className="space-y-4" onSubmit={handleSignUp}>
<div>
<label
htmlFor="firstName"
className="block text-sm font-medium text-blue-600"
>
First Name
</label>
<input
type="text"
id="firstName"
placeholder="John"
value={firstName}
onChange={(e) => setFirstName(e.target.value)}
className="w-full px-4 py-2 mt-1 rounded-md bg-blue-100 text-blue-800 focus:ring focus:ring-blue-400"
required
/>
</div>
<div>
<label
htmlFor="email"
className="block text-sm font-medium text-blue-600"
>
Email
</label>
<input
type="email"
id="email"
placeholder="[email protected]"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="w-full px-4 py-2 mt-1 rounded-md bg-blue-100 text-blue-800 focus:ring focus:ring-blue-400"
required
/>
</div>
<div>
<label
htmlFor="otp"
className="block text-sm font-medium text-blue-600"
>
OTP
</label>
<input
type="text"
id="otp"
placeholder="Enter your OTP"
value={otp}
onChange={(e) => setOTP(e.target.value)}
className="w-full px-4 py-2 mt-1 rounded-md bg-blue-100 text-blue-800 focus:ring focus:ring-blue-400"
required
/>
</div>
<div>
<button
type="submit"
className="w-full py-2 bg-gradient-to-r from-green-500 to-blue-500 hover:from-blue-500 hover:to-green-500 text-white rounded-md font-bold"
>
Sign Up
</button>
</div>
</form>
<p className="text-center text-sm mt-4 text-black">
Already have an account?{" "}
<a
href="/login"
className="text-blue-500 hover:underline"
>
Log In
</a>
</p>
</div>
<div className="hidden md:flex items-center justify-center bg-blue-50 p-6">
<Image
src={signinImage}
alt="Signup Illustration"
layout="responsive"
width={350}
height={350}
className="rounded-lg"
/>
</div>
</div>
</div>
);
};

export default SignUpPage;
1 change: 1 addition & 0 deletions alimento-nextjs/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
"react-dom": "^18.3.1",
"react-hook-form": "^7.53.1",
"react-hot-toast": "^2.4.1",
"react-toastify": "^10.0.6",
"tailwind-merge": "^2.5.4",
"tailwindcss-animate": "^1.0.7",
"zod": "^3.23.8"
Expand Down
Binary file added alimento-nextjs/public/signin.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 6bb4a78

Please sign in to comment.