Implemented sign in & sign up (with token storage)

2025-04-18 16:33:40 +05:30
parent 5391410609
commit 76f9b00624
6 changed files with 487 additions and 260 deletions
@@ -1,14 +1,76 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { FiEye, FiEyeOff } from "react-icons/fi";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
+import toast from "react-hot-toast"; // Import React Hot Toast
+
+
+const API_URL = import.meta.env.VITE_API_URL; // Using .env variable

 const Login = () => {
-  const [showPassword, setShowPassword] = React.useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+  const navigate = useNavigate(); // For navigation
+
+  useEffect(() => {
+    // Check if token is present in localStorage and redirect to Dashboard
+    if (localStorage.getItem("token")) {
+      navigate("/dashboard"); // Redirect to Dashboard
+    }
+  }, [navigate]);

  const togglePassword = () => {
    setShowPassword(!showPassword);
  };

+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+
+    // Show loading toast
+    const toastId = toast.loading("Logging in...");
+
+    try {
+      const response = await fetch(`${API_URL}/api/login`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          email,
+          password,
+        }),
+      });
+
+      const data = await response.json();
+
+      // Dismiss the loading toast after the response
+      toast.dismiss(toastId);
+
+      if (response.ok) {
+        // On success, store the token in localStorage
+        localStorage.setItem("token", data.token);
+        localStorage.setItem("expiresIn", data.expiresIn);
+
+        // Show success toast
+        toast.success("Login successful!");
+
+        // Redirect to Dashboard
+        navigate("/dashboard");
+      } else {
+        // Show error toast if login fails
+        toast.error(data.message || "Login failed.");
+      }
+    } catch (error) {
+      // Dismiss the loading toast and show error
+      toast.dismiss(toastId);
+      toast.error("An error occurred. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center p-4">
      <div className="w-full max-w-md bg-white rounded-4xl shadow-lg p-8">
@@ -16,44 +78,56 @@ const Login = () => {
          Log in
        </h1>

-        <div className="mb-4">
-          <div className="flex items-center">
-            <input
-              type="email"
-              id="email"
-              placeholder="Enter your email"
-              className="w-full border border-gray-300 rounded-l-lg px-4 py-4 focus:outline-none focus:border-blue-500"
-            />
+        <form onSubmit={handleSubmit}>
+          <div className="mb-4">
+            <div className="flex items-center">
+              <input
+                type="email"
+                id="email"
+                placeholder="Enter your email"
+                className="w-full border border-gray-300 rounded-l-lg px-4 py-4 focus:outline-none focus:border-blue-500"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+              />
+            </div>
          </div>
-        </div>
-        <div className="mb-1">
-          <div className="relative">
-            <input
-              type={showPassword ? "text" : "password"}
-              id="password"
-              placeholder="Enter your password"
-              className="w-full border border-gray-300 rounded-lg px-4 py-4 focus:outline-none focus:border-blue-500 pr-10"
-            />
-            <button
-              type="button"
-              onClick={togglePassword}
-              className="absolute right-2 top-4 text-2xl text-gray-500 hover:text-gray-700"
+          <div className="mb-1">
+            <div className="relative">
+              <input
+                type={showPassword ? "text" : "password"}
+                id="password"
+                placeholder="Enter your password"
+                className="w-full border border-gray-300 rounded-lg px-4 py-4 focus:outline-none focus:border-blue-500 pr-10"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+              />
+              <button
+                type="button"
+                onClick={togglePassword}
+                className="absolute right-2 top-4 text-2xl text-gray-500 hover:text-gray-700"
+              >
+                {showPassword ? <FiEyeOff /> : <FiEye />}
+              </button>
+            </div>
+          </div>
+          <div className="mb-6 ">
+            <Link
+              to="#!"
+              className="text-sm text-blue-600 hover:underline inline-block"
            >
-              {showPassword ? <FiEyeOff /> : <FiEye />}
-            </button>
+              Forgot password?
+            </Link>
          </div>
-        </div>
-        <div className="mb-6 ">
-          <Link
-            to="#!"
-            className="text-sm text-blue-600 hover:underline inline-block"
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full py-3 bg-gradient-to-r from-[#1877F2] to-[#0E458C] hover:from-[#0E458C] hover:to-[#1877F2] text-white font-semibold rounded-full shadow-md transition duration-300"
          >
-            Forgot password?
-          </Link>
-        </div>
-        <button className="w-full py-3 bg-gradient-to-r from-[#1877F2] to-[#0E458C] hover:from-[#0E458C] hover:to-[#1877F2] text-white font-semibold rounded-full shadow-md transition duration-300">
-          Login
-        </button>
+            {loading ? "Logging In..." : "Login"}
+          </button>
+        </form>
        <div className="text-center mt-6">
          <p className="text-gray-700">
            Don’t have an account?{" "}
@@ -70,4 +144,4 @@ const Login = () => {
  );
 };

-export default Login;
+export default Login;
@@ -1,41 +1,115 @@
-// eslint-disable-next-line no-unused-vars
 import React, { useState } from "react";
 import { FiEye, FiEyeOff } from "react-icons/fi";
 import { Link } from "react-router-dom";
+import toast, { Toaster } from "react-hot-toast";
+
+// const API_BASE_URL = process.env.REACT_APP_API_URL;
+const API_BASE_URL = import.meta.env.VITE_API_URL;
+

 const SignUp = () => {
+  const [formData, setFormData] = useState({
+    firstname: "",
+    lastname: "",
+    email: "",
+    password: "",
+    confirmPassword: "",
+  });
+
  const [showPassword, setShowPassword] = useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const handleChange = (e) => {
+    setFormData((prev) => ({
+      ...prev,
+      [e.target.name]: e.target.value,
+    }));
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    if (formData.password !== formData.confirmPassword) {
+      toast.error("Passwords do not match.");
+      return;
+    }
+
+    try {
+      setLoading(true);
+      const toastId = toast.loading("Registering...");
+
+      const response = await fetch(`${API_BASE_URL}/api/signup`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          firstname: formData.firstname,
+          lastname: formData.lastname,
+          email: formData.email,
+          password: formData.password,
+        }),
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        toast.success("Successfully registered!", { id: toastId });
+        // Optionally redirect to login
+      } else {
+        toast.error(data.message || "Signup failed.", { id: toastId });
+      }
+    } catch (error) {
+      toast.error("An error occurred. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  };

  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center p-6">
+      <Toaster position="top-right" />
      <div className="w-full max-w-md bg-white rounded-2xl shadow-lg p-8">
-        <h1 className="text-2xl font-bold text-gray-900  mb-6">Sign Up</h1>
+        <h1 className="text-2xl font-bold text-gray-900 mb-6">Sign Up</h1>

-        {/* Form Fields */}
-        <div className="space-y-4">
+        <form className="space-y-4" onSubmit={handleSubmit}>
          <input
            type="text"
+            name="firstname"
            placeholder="First Name"
+            value={formData.firstname}
+            onChange={handleChange}
            className="w-full border border-gray-300 rounded-lg px-4 py-4 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            required
          />
          <input
            type="text"
+            name="lastname"
            placeholder="Last Name"
+            value={formData.lastname}
+            onChange={handleChange}
            className="w-full border border-gray-300 rounded-lg px-4 py-4 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            required
          />
          <input
            type="email"
+            name="email"
            placeholder="Enter your email"
+            value={formData.email}
+            onChange={handleChange}
            className="w-full border border-gray-300 rounded-lg px-4 py-4 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            required
          />

          {/* Password Field */}
          <div className="relative">
            <input
              type={showPassword ? "text" : "password"}
+              name="password"
              placeholder="Enter your password"
+              value={formData.password}
+              onChange={handleChange}
              className="w-full border border-gray-300 rounded-lg px-4 py-4 focus:outline-none focus:ring-2 focus:ring-blue-500 pr-10"
+              required
            />
            <button
              type="button"
@@ -50,8 +124,12 @@ const SignUp = () => {
          <div className="relative">
            <input
              type={showConfirmPassword ? "text" : "password"}
+              name="confirmPassword"
              placeholder="Confirm your password"
+              value={formData.confirmPassword}
+              onChange={handleChange}
              className="w-full border border-gray-300 rounded-lg px-4 py-4 focus:outline-none focus:ring-2 focus:ring-blue-500 pr-10"
+              required
            />
            <button
              type="button"
@@ -61,12 +139,20 @@ const SignUp = () => {
              {showConfirmPassword ? <FiEyeOff /> : <FiEye />}
            </button>
          </div>
-        </div>

-        {/* Sign Up Button */}
-        <button className="w-full mt-6 py-3 bg-gradient-to-r from-[#10B981] to-[#07533A] hover:from-[#0E458C] hover:to-[#1877F2] text-white font-semibold rounded-lg shadow-md transition duration-300">
-          Sign Up
-        </button>
+          {/* Sign Up Button */}
+          <button
+            type="submit"
+            disabled={loading}
+            className={`w-full mt-4 py-3 ${
+              loading
+                ? "bg-gray-400 cursor-not-allowed"
+                : "bg-gradient-to-r from-[#10B981] to-[#07533A] hover:from-[#0E458C] hover:to-[#1877F2]"
+            } text-white font-semibold rounded-lg shadow-md transition duration-300`}
+          >
+            {loading ? "Signing Up..." : "Sign Up"}
+          </button>
+        </form>

        {/* Redirect to Login */}
        <p className="text-center mt-4 text-gray-700">
@@ -84,3 +170,92 @@ const SignUp = () => {
 };

 export default SignUp;
+
+
+
+// // eslint-disable-next-line no-unused-vars
+// import React, { useState } from "react";
+// import { FiEye, FiEyeOff } from "react-icons/fi";
+// import { Link } from "react-router-dom";
+
+// const SignUp = () => {
+//   const [showPassword, setShowPassword] = useState(false);
+//   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+
+//   return (
+//     <div className="min-h-screen bg-gray-100 flex items-center justify-center p-6">
+//       <div className="w-full max-w-md bg-white rounded-2xl shadow-lg p-8">
+//         <h1 className="text-2xl font-bold text-gray-900  mb-6">Sign Up</h1>
+
+//         {/* Form Fields */}
+//         <div className="space-y-4">
+//           <input
+//             type="text"
+//             placeholder="First Name"
+//             className="w-full border border-gray-300 rounded-lg px-4 py-4 focus:outline-none focus:ring-2 focus:ring-blue-500"
+//           />
+//           <input
+//             type="text"
+//             placeholder="Last Name"
+//             className="w-full border border-gray-300 rounded-lg px-4 py-4 focus:outline-none focus:ring-2 focus:ring-blue-500"
+//           />
+//           <input
+//             type="email"
+//             placeholder="Enter your email"
+//             className="w-full border border-gray-300 rounded-lg px-4 py-4 focus:outline-none focus:ring-2 focus:ring-blue-500"
+//           />
+
+//           {/* Password Field */}
+//           <div className="relative">
+//             <input
+//               type={showPassword ? "text" : "password"}
+//               placeholder="Enter your password"
+//               className="w-full border border-gray-300 rounded-lg px-4 py-4 focus:outline-none focus:ring-2 focus:ring-blue-500 pr-10"
+//             />
+//             <button
+//               type="button"
+//               onClick={() => setShowPassword(!showPassword)}
+//               className="absolute right-3 top-4 text-2xl text-gray-500 hover:text-gray-700"
+//             >
+//               {showPassword ? <FiEyeOff /> : <FiEye />}
+//             </button>
+//           </div>
+
+//           {/* Confirm Password Field */}
+//           <div className="relative">
+//             <input
+//               type={showConfirmPassword ? "text" : "password"}
+//               placeholder="Confirm your password"
+//               className="w-full border border-gray-300 rounded-lg px-4 py-4 focus:outline-none focus:ring-2 focus:ring-blue-500 pr-10"
+//             />
+//             <button
+//               type="button"
+//               onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+//               className="absolute right-3 top-4 text-2xl text-gray-500 hover:text-gray-700"
+//             >
+//               {showConfirmPassword ? <FiEyeOff /> : <FiEye />}
+//             </button>
+//           </div>
+//         </div>
+
+//         {/* Sign Up Button */}
+//         <button className="w-full mt-6 py-3 bg-gradient-to-r from-[#10B981] to-[#07533A] hover:from-[#0E458C] hover:to-[#1877F2] text-white font-semibold rounded-lg shadow-md transition duration-300">
+//           Sign Up
+//         </button>
+
+//         {/* Redirect to Login */}
+//         <p className="text-center mt-4 text-gray-700">
+//           Already have an account?{" "}
+//           <Link
+//             to="/login"
+//             className="text-blue-500 hover:underline font-medium"
+//           >
+//             Login
+//           </Link>
+//         </p>
+//       </div>
+//     </div>
+//   );
+// };
+
+// export default SignUp;