eleven-solutions-common-website-unique-web 21.0.56 → 22.0.1

package/src/components/login/Login.tsx

@@ -1,277 +0,0 @@
-import React, { useState } from "react";
-import { loginApi, registerApi } from "../api/api";
-import Cookies from "universal-cookie";
-import GoogleButton from "./GoogleButton";
-interface LoginProps {
-  ModalOpen: boolean;
-  closeModal: () => void;
-  url: string;
-  isDarkMode: boolean;
-}
-const Login = ({ ModalOpen, closeModal, url, isDarkMode }: LoginProps) => {
-  const [isLoginMode, setIsLoginMode] = useState(true);
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [name, setName] = useState("");
-  const [mobile, setMobile] = useState("");
-  const [confirmPassword, setConfirmPassword] = useState("");
-  const [termsAccepted, setTermsAccepted] = useState(false);
-  const [loading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [successMessage, setSuccessMessage] = useState<string | null>(null);
-  const cookies = new Cookies();
-  const toggleMode = () => setIsLoginMode(!isLoginMode);
-
-  const handleLogin = async (e: React.FormEvent) => {
-    e.preventDefault();
-    try {
-      const response = await loginApi(url, email, password);
-      if (!response) {
-        console.log("please try again after some time");
-      } else {
-        if (response?.data?.token) {
-          cookies.set("authToken", response.data.token, { maxAge: 86400 });
-          window.location.href = "/home";
-        }
-      }
-      console.log(response.data.token);
-    } catch (err) {
-      console.error("Error during login:", err);
-      setError("Error during login");
-    }
-  };
-
-  const handleRegister = async (e: React.FormEvent) => {
-    e.preventDefault();
-
-    if (password !== confirmPassword) {
-      setError("Passwords do not match.");
-      return;
-    }
-
-    if (!termsAccepted) {
-      setError("You must accept the terms and conditions.");
-      return;
-    }
-                                                
-    const emailRegex = /^[a-zA-Z0-9._%+-]+@gmail\.com$/;
-    if (!emailRegex.test(email)) {
-      setError("Email must be a valid @gmail.com address.");
-      return;
-    }
-
-    try {
-      const response = await registerApi(
-        url,
-        name,
-        email,
-        mobile,
-        confirmPassword
-      );
-      console.log("res", response);
-
-      if (response) {
-        cookies.set("authToken", response, { maxAge: 86400 });
-        window.location.href = "/home";
-
-        setSuccessMessage("Registration successful!");
-      } else {
-        setError("Registration failed. Please try again.");
-      }
-    } catch (error) {
-      console.error("Error during registration:");
-      setError("An error occurred during registration.");
-    }
-  };
-
-  return (
-    <div
-      className={`${
-        isDarkMode ? "bg-[#2e2e2e] text-[#ffff]" : "bg-[#ffff] text-black"
-      }`}
-    >
-      {ModalOpen && (
-        <div className="fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-50 transition-opacity duration-75 ease-in-out ">
-          <div
-            className={`relative ${
-              isDarkMode ? "bg-[#2e2e2e]" : "bg-white"
-            } p-4 sm:p-6 lg:p-8 rounded-lg max-w-sm sm:max-w-md w-full shadow-lg transform transition-all duration-500 ease-in-out `}
-          >
-            <button
-              onClick={closeModal}
-              className={` absolute top-1 right-3 text-3xl ${
-                isDarkMode ? " text-[#ffff]" : " text-black"
-              }`}
-            >
-              &times;
-            </button>
-            <img
-              className="h-16 w-20 mx-auto animate-fadeIn"
-              src="images/BarelviLogo.png"
-              alt="Logo"
-            />
-            <h1
-              className={`mt-3 text-xl sm:text-2xl font-semibold capitalize text-center ${
-                isDarkMode ? "text-[#ffff]" : "text-black"
-              }`}
-            >
-              {isLoginMode ? "Sign In" : "Sign Up"}
-            </h1>
-
-            <form onSubmit={isLoginMode ? handleLogin : handleRegister}>
-              {!isLoginMode && (
-                <>
-                  <div className="relative flex items-center mt-4">
-                    <input
-                      type="text"
-                      value={name}
-                      onChange={(e) => setName(e.target.value)}
-                      className="block w-full py-2 text-gray-700 bg-white border rounded-lg px-3 sm:px-6 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40"
-                      placeholder="Full Name"
-                      required
-                    />
-                  </div>
-
-                  <div className="relative flex items-center mt-4">
-                    <input
-                      type="tel"
-                      value={mobile}
-                      onChange={(e) => setMobile(e.target.value)}
-                      className="block w-full py-2 text-gray-700 bg-white border rounded-lg px-3 sm:px-6 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40"
-                      placeholder="Mobile Number"
-                      required
-                    />
-                  </div>
-
-                  <div className="relative flex items-center mt-4">
-                    <input
-                      type="email"
-                      value={email}
-                      onChange={(e) => setEmail(e.target.value)}
-                      className="block w-full py-2 text-gray-700 bg-white border rounded-lg px-3 sm:px-6 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40"
-                      placeholder="Email address"
-                      required
-                    />
-                  </div>
-
-                  <div className="relative flex items-center mt-4">
-                    <input
-                      type="password"
-                      value={password}
-                      onChange={(e) => setPassword(e.target.value)}
-                      className="block w-full px-3 sm:px-6 py-2 text-gray-700 bg-white border rounded-lg dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40"
-                      placeholder="Password"
-                      required
-                    />
-                  </div>
-
-                  <div className="relative flex items-center mt-4">
-                    <input
-                      type="password"
-                      value={confirmPassword}
-                      onChange={(e) => setConfirmPassword(e.target.value)}
-                      className="block w-full py-2 text-gray-700 bg-white border rounded-lg px-3 sm:px-6 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40"
-                      placeholder="Confirm Password"
-                      required
-                    />
-                  </div>
-
-                  <div className="mt-4">
-                    <label className="flex items-center">
-                      <input
-                        type="checkbox"
-                        checked={termsAccepted}
-                        onChange={() => setTermsAccepted(!termsAccepted)}
-                        className="form-checkbox cursor-pointer"
-                      />
-                      <span className="ml-2 text-sm text-gray-600 dark:text-gray-300">
-                        I accept the{" "}
-                        <button className="text-blue-500 hover:underline">
-                          terms and conditions
-                        </button>
-                      </span>
-                    </label>
-                  </div>
-                </>
-              )}
-
-              {isLoginMode && (
-                <>
-                  <div className="relative flex items-center mt-4">
-                    <input
-                      type="email"
-                      value={email}
-                      onChange={(e) => setEmail(e.target.value)}
-                      className="block w-full py-2 text-gray-700 bg-white border rounded-lg px-3 sm:px-6 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40"
-                      placeholder="Email address"
-                      required
-                    />
-                  </div>
-
-                  <div className="relative flex items-center mt-4">
-                    <input
-                      type="password"
-                      value={password}
-                      onChange={(e) => setPassword(e.target.value)}
-                      className="block w-full px-3 sm:px-6 py-2 text-gray-700 bg-white border rounded-lg dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40"
-                      placeholder="Password"
-                      required
-                    />
-                  </div>
-                </>
-              )}
-
-              <div className="mt-6">
-                <button
-                  type="submit"
-                  disabled={loading}
-                  className="w-full px-6 py-2 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-300 transform bg-blue-500 rounded-lg hover:bg-blue-400 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-50"
-                >
-                  {loading
-                    ? isLoginMode
-                      ? "Logging in..."
-                      : "Registering..."
-                    : isLoginMode
-                    ? "Login"
-                    : "Register"}
-                </button>
-              </div>
-            </form>
-
-            <div className="flex items-center justify-center mt-2">
-              <hr className="w-1/4" />
-              <span className="mx-2 text-gray-500">or</span>
-              <hr className="w-1/4" />
-            </div>
-            <div className="">
-              <GoogleButton url={url} onClose={function (): void {
-                throw new Error("Function not implemented.");
-              } } />
-            </div>
-            <div className="mt-2 text-center">
-              <button
-                onClick={toggleMode}
-                className="text-sm text-blue-500 hover:underline"
-              >
-                {isLoginMode
-                  ? "Don't have an account? Sign Up"
-                  : "Already have an account? Sign In"}
-              </button>
-            </div>
-
-            {error && (
-              <p className="mt-2 w-full  text-center text-red-500">{error}</p>
-            )}
-            {successMessage && (
-              <p className="mt-2 text-center text-green-500">
-                {successMessage}
-              </p>
-            )}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default Login;

package/src/components/useraccount/AddUserDetails.tsx

@@ -1,136 +0,0 @@
-import React from "react";
-import { useState } from "react";
-import { getProfileApi } from "../api/updateuser";
-
-interface AddUserDetailsProps {
-  usermodalopen: boolean;
-  closeusermodal: () => void;
-  url: string;
-  isDarkMode: boolean;
-}
-
-interface UserProfile {
-  name: string;
-  mobile: string;
-  address: string;
-  // add any other fields that `userProfile` is expected to have
-}
-
-const AddUserDetails: React.FC<AddUserDetailsProps> = ({
-  usermodalopen,
-  closeusermodal,
-  url,
-  isDarkMode,
-}) => {
-  const [name, setName] = useState("");
-  const [mobile, setMobile] = useState("");
-  const [address, setAddress] = useState("");
-
-  return (
-    <div
-      className={`fixed inset-0 flex items-center justify-center ${
-        isDarkMode ? "bg-gray-800 bg-opacity-90" : "bg-gray-500 bg-opacity-75"
-      }`}
-    >
-      <div
-        className={`rounded-lg p-6 w-full max-w-md relative ${
-          isDarkMode
-            ? "border border-gray-300 bg-[#242424] text-white"
-            : "bg-white text-black"
-        }`}
-      >
-        <button
-          onClick={closeusermodal}
-          className={`absolute top-3 right-3 ${
-            isDarkMode
-              ? "text-gray-300 hover:text-gray-500"
-              : "text-gray-400 hover:text-gray-600"
-          } text-2xl`}
-        >
-          &times;
-        </button>
-
-        <h3 className="text-center text-xl font-bold mb-4">
-          Update User Details
-        </h3>
-
-        <div className="mb-4">
-          <label
-            className={`block text-sm font-medium mb-1 ${
-              isDarkMode ? "text-gray-300" : "text-gray-700"
-            }`}
-          >
-            Name
-          </label>
-          <input
-            type="text"
-            placeholder="Name"
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-            className={`w-full p-2 border rounded focus:outline-none focus:ring ${
-              isDarkMode
-                ? "bg-gray-800 border-gray-700 text-white "
-                : "border-gray-300 "
-            }`}
-          />
-        </div>
-
-        <div className="mb-4">
-          <label
-            className={`block text-sm font-medium mb-1 ${
-              isDarkMode ? "text-gray-300" : "text-gray-700"
-            }`}
-          >
-            Mobile
-          </label>
-          <input
-            type="tel"
-            placeholder="Mobile"
-            value={mobile}
-            onChange={(e) => setMobile(e.target.value)}
-            className={`w-full p-2 border rounded focus:outline-none focus:ring ${
-              isDarkMode
-                ? "bg-gray-800 border-gray-700 text-white "
-                : "border-gray-300 "
-            }`}
-          />
-        </div>
-
-        <div className="mb-4">
-          <label
-            className={`block text-sm font-medium mb-1 ${
-              isDarkMode ? "text-gray-300" : "text-gray-700"
-            }`}
-          >
-            Address
-          </label>
-          <input
-            type="text"
-            placeholder="Address"
-            value={address}
-            onChange={(e) => setAddress(e.target.value)}
-            className={`w-full p-2 border rounded focus:outline-none focus:ring ${
-              isDarkMode
-                ? "bg-gray-800 border-gray-700 text-white "
-                : "border-gray-300 "
-            }`}
-          />
-        </div>
-
-        <div className="flex justify-end">
-          <button
-            className={`px-4 py-2 rounded ${
-              isDarkMode
-                ? "bg-blue-500 hover:bg-blue-400 text-white"
-                : "bg-blue-500 hover:bg-blue-400 text-white"
-            }`}
-          >
-            Update Details
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default AddUserDetails;

package/src/components/useraccount/UpdateUserDetails.tsx

@@ -1,214 +0,0 @@
-import React, { useState, useEffect, ChangeEvent } from "react";
-import { updateProfileApi, getProfileApi } from "../api/updateuser";
-import Cookies from "universal-cookie";
-
-interface UpdateUserDetailsProps {
-  usermodalopen: boolean;
-  closeusermodal: () => void;
-  url: string;
-  isDarkMode: boolean;
-}
-interface UserProfile {
-  name: string;
-  mobile: string;
-  address: string;
-  // add any other fields that `userProfile` is expected to have
-}
-
-const UpdateUserDetails: React.FC<UpdateUserDetailsProps> = ({
-  usermodalopen,
-  closeusermodal,
-  url,
-  isDarkMode,
-}) => {
-  const [name, setName] = useState<string>("");
-  const [mobile, setMobile] = useState<string>("");
-  const [address, setAddress] = useState<string>("");
-
-  const [user, setUser] = useState<UserProfile | undefined>(undefined);
-
-  const cookies = new Cookies();
-  const token = cookies.get("authToken");
-
-  const userToken = token?.data?.token || token;
-
-  useEffect(() => {
-    const fetchUserProfile = async () => {
-      if (usermodalopen && userToken && !user) {
-        try {
-          const userProfile = await getProfileApi(userToken, url);
-          if (userProfile) {
-            setUser(userProfile);
-            setName(userProfile.name);
-            setMobile(userProfile.mobile);
-            setAddress(userProfile.address);
-          }
-        } catch (error) {
-          console.error("Error fetching user profile:", error);
-        }
-      }
-    };
-
-    fetchUserProfile();
-  }, [usermodalopen, userToken, user]);
-
-  const validateForm = () => {
-    if (!name || !mobile || !address) {
-      alert("Please fill in all required fields: Name, Mobile, and Address.");
-      return false;
-    }
-    return true;
-  };
-
-  const handleUpdate = async (event: React.MouseEvent<HTMLButtonElement>) => {
-    event.preventDefault();
-
-    if (!name.trim() || !mobile.trim() || !address.trim()) {
-      alert("Name ,Mobile and Address fields cannot be empty.");
-      return;
-    }
-
-    if (!validateForm()) return;
-    try {
-      const response = await updateProfileApi(
-        url,
-        userToken,
-        name,
-        mobile,
-        address
-      );
-      if (response.status === 200) {
-        alert("Updated Successfully");
-        closeusermodal();
-        window.location.reload();
-      } else {
-        console.error("Update failed:", response.statusText);
-      }
-    } catch (error) {
-      console.error("Error updating profile:", error);
-    }
-  };
-
-  const handleNameChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setName(event.target.value);
-  };
-
-  const handleMobileChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setMobile(event.target.value);
-  };
-
-  const handleAddressChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setAddress(event.target.value);
-  };
-
-  if (!usermodalopen) return null;
-
-  return (
-    <div
-      className={`fixed inset-0 flex items-center justify-center ${
-        isDarkMode ? "bg-gray-800 bg-opacity-90" : "bg-gray-500 bg-opacity-75"
-      }`}
-    >
-      <div
-        className={`rounded-lg p-6 w-full max-w-md relative ${
-          isDarkMode
-            ? "border border-gray-300 bg-[#242424] text-white"
-            : "bg-white text-black"
-        }`}
-      >
-        <button
-          onClick={closeusermodal}
-          className={`absolute top-3 right-3 ${
-            isDarkMode
-              ? "text-gray-300 hover:text-gray-500"
-              : "text-gray-400 hover:text-gray-600"
-          } text-2xl`}
-        >
-          &times;
-        </button>
-
-        <h3 className="text-center text-xl font-bold mb-4">
-          Update User Details
-        </h3>
-
-        <div className="mb-4">
-          <label
-            className={`block text-sm font-medium mb-1 ${
-              isDarkMode ? "text-gray-300" : "text-gray-700"
-            }`}
-          >
-            Name
-          </label>
-          <input
-            type="text"
-            placeholder="Name"
-            value={name}
-            onChange={handleNameChange}
-            className={`w-full p-2 border rounded focus:outline-none focus:ring ${
-              isDarkMode
-                ? "bg-gray-800 border-gray-700 text-white "
-                : "border-gray-300 "
-            }`}
-          />
-        </div>
-
-        <div className="mb-4">
-          <label
-            className={`block text-sm font-medium mb-1 ${
-              isDarkMode ? "text-gray-300" : "text-gray-700"
-            }`}
-          >
-            Mobile
-          </label>
-          <input
-            type="tel"
-            placeholder="Mobile"
-            value={mobile}
-            onChange={handleMobileChange}
-            className={`w-full p-2 border rounded focus:outline-none focus:ring ${
-              isDarkMode
-                ? "bg-gray-800 border-gray-700 text-white "
-                : "border-gray-300 "
-            }`}
-          />
-        </div>
-
-        <div className="mb-4">
-          <label
-            className={`block text-sm font-medium mb-1 ${
-              isDarkMode ? "text-gray-300" : "text-gray-700"
-            }`}
-          >
-            Address
-          </label>
-          <input
-            type="text"
-            placeholder="Address"
-            value={address}
-            onChange={handleAddressChange}
-            className={`w-full p-2 border rounded focus:outline-none focus:ring ${
-              isDarkMode
-                ? "bg-gray-800 border-gray-700 text-white "
-                : "border-gray-300 "
-            }`}
-          />
-        </div>
-
-        <div className="flex justify-end">
-          <button
-            onClick={handleUpdate}
-            className={`px-4 py-2 rounded ${
-              isDarkMode
-                ? "bg-blue-500 hover:bg-blue-400 text-white"
-                : "bg-blue-500 hover:bg-blue-400 text-white"
-            }`}
-          >
-            Update Details
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default UpdateUserDetails;

package/src/index.ts

@@ -1 +0,0 @@
-export * from "./components/index";

package/tsconfig.json

@@ -1,15 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2015",
-    "module": "ESNext",
-    "moduleResolution": "node",
-    "jsx": "react-jsx",
-    "declaration": true,
-    "outDir": "dist",
-    "lib": ["dom", "es2015"],
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true
-  },
-  "include": ["src/**/*"]
-}