Add family acc

2023-05-09 11:59:49 +01:00
parent 872ba3e0cc
commit 4eee3a4683
19 changed files with 2056 additions and 1362 deletions
@@ -12,76 +12,153 @@ export default function InputCom({
  inputHandler,
  value,
  forgotPassword,
+  parentClass,
+  labelClass,
+  inputClass,
+  fieldClass,
  onClick,
  disable,
-  blurHandler
+  blurHandler,
 }) {
-  const inputRef = useRef(null)
+  const inputRef = useRef(null);
  // Entry Validation
  // for Min Length:
  const minLengthValidation = () => {
-    if (inputRef && inputRef?.current && inputRef?.current?.name === 'email') {
-      return 7
-    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'first_name') {
-      return 3
-    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'last_name') {
-      return 3
-    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'address') {
-      return 5
-    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'password') {
-      return 8
-    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'state') {
-      return 3
-    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'province') {
-      return 3
-    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'city') {
-      return 3
-    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'amount') {
-      return 1
+    if (inputRef && inputRef?.current && inputRef?.current?.name === "email") {
+      return 7;
+    } else if (
+      inputRef &&
+      inputRef?.current &&
+      inputRef?.current?.name === "first_name"
+    ) {
+      return 3;
+    } else if (
+      inputRef &&
+      inputRef?.current &&
+      inputRef?.current?.name === "last_name"
+    ) {
+      return 3;
+    } else if (
+      inputRef &&
+      inputRef?.current &&
+      inputRef?.current?.name === "address"
+    ) {
+      return 5;
+    } else if (
+      inputRef &&
+      inputRef?.current &&
+      inputRef?.current?.name === "password"
+    ) {
+      return 8;
+    } else if (
+      inputRef &&
+      inputRef?.current &&
+      inputRef?.current?.name === "state"
+    ) {
+      return 3;
+    } else if (
+      inputRef &&
+      inputRef?.current &&
+      inputRef?.current?.name === "province"
+    ) {
+      return 3;
+    } else if (
+      inputRef &&
+      inputRef?.current &&
+      inputRef?.current?.name === "city"
+    ) {
+      return 3;
+    } else if (
+      inputRef &&
+      inputRef?.current &&
+      inputRef?.current?.name === "amount"
+    ) {
+      return 1;
    }
-  }
+  };

  // for MaxLength
  const maxLengthValidation = () => {
-    if (inputRef && inputRef?.current && inputRef?.current?.name === 'email') {
-      return 35
-    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'first_name') {
-      return 25
-    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'last_name') {
-      return 25
-    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'address') {
-      return 49
-    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'password') {
-      return 15
-    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'state') {
-      return 25
-    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'province') {
-      return 25
-    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'city') {
-      return 25
-    } else if (inputRef && inputRef?.current && inputRef?.current?.name === 'amount') {
-      return 9  
+    if (inputRef && inputRef?.current && inputRef?.current?.name === "email") {
+      return 35;
+    } else if (
+      inputRef &&
+      inputRef?.current &&
+      inputRef?.current?.name === "first_name"
+    ) {
+      return 25;
+    } else if (
+      inputRef &&
+      inputRef?.current &&
+      inputRef?.current?.name === "last_name"
+    ) {
+      return 25;
+    } else if (
+      inputRef &&
+      inputRef?.current &&
+      inputRef?.current?.name === "address"
+    ) {
+      return 49;
+    } else if (
+      inputRef &&
+      inputRef?.current &&
+      inputRef?.current?.name === "password"
+    ) {
+      return 15;
+    } else if (
+      inputRef &&
+      inputRef?.current &&
+      inputRef?.current?.name === "state"
+    ) {
+      return 25;
+    } else if (
+      inputRef &&
+      inputRef?.current &&
+      inputRef?.current?.name === "province"
+    ) {
+      return 25;
+    } else if (
+      inputRef &&
+      inputRef?.current &&
+      inputRef?.current?.name === "city"
+    ) {
+      return 25;
+    } else if (
+      inputRef &&
+      inputRef?.current &&
+      inputRef?.current?.name === "amount"
+    ) {
+      return 9;
    }
-  }
+  };
  return (
-    <div className="input-com">
-      <div className="flex items-center justify-between">
-      {label && (
-        <label
-          className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block mb-2.5"
-          htmlFor={name}
-        >
-          {label}
-        </label>
-      )}
-      {forgotPassword && <Link to="/forgot-password" className="text-[13.975px] leading-[20.9625px] text-[#019ef7] hover:text-[#009ef7]">Forgot Password?</Link>}
+    <div className={`input-com ${parentClass}`}>
+      <div className={`flex items-center justify-between mb-2.5 ${labelClass}`}>
+        {label && (
+          <label
+            className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
+            htmlFor={name}
+          >
+            {label}
+          </label>
+        )}
+        {forgotPassword && (
+          <Link
+            to="/forgot-password"
+            className="text-[13.975px] leading-[20.9625px] text-[#019ef7] hover:text-[#009ef7]"
+          >
+            Forgot Password?
+          </Link>
+        )}
      </div>
-      <div className="input-wrapper border border-[#f5f8fa]] dark:border-[#5e6278] w-full rounded-[0.475rem] h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ">
+      <div
+        className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-[0.475rem] h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ${inputClass}`}
+      >
        <input
          placeholder={placeholder}
          value={value}
          onChange={inputHandler}
-          className="input-field placeholder:text-base px-6 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none"
+          className={`input-field placeholder:text-base text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F] focus:ring-0 focus:outline-none ${fieldClass}`}
          type={type}
          id={name}
          name={name}
@@ -97,7 +174,10 @@ export default function InputCom({
          </div>
        )}
        {passIcon && (
-          <div className="absolute right-6 bottom-[10px] z-10" onClick={onClick}>
+          <div
+            className="absolute right-6 bottom-[10px] z-10"
+            onClick={onClick}
+          >
            <Icons name={passIcon} />
          </div>
        )}