l-min-components 1.0.598 → 1.0.601

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.598",
+  "version": "1.0.601",
   "type": "module",
   "files": [
     "src/assets",

package/src/components/AdminSecuritySettings/2fa/index.jsx

@@ -0,0 +1,221 @@
+import React, { useState } from "react";
+import { AdminTwoFaSecurityContainer } from "./index.styled";
+import img from "../assets/images/twofa.png";
+import qr from "../assets/images/qr_code.png";
+import shield from "../assets/images/shield.png";
+import ButtonComponent from "../../button";
+import Radio from "../../radio";
+import InputComponent from "../../input";
+import SecuritySuccessModal from "../modals/success-modal";
+import ToggleButtonComponent from "../../toggle button";
+import { useNavigate } from "react-router-dom";
+import OTPSecurityModal from "../modals/otp-password-modal";
+import SecurityQuestionModal from "../modals/security-question-modal";
+import SecurityOptOutModal from "../modals/opt-out-modal";
+
+const AdminTwoFaSecurity = () => {
+  const navigate = useNavigate();
+
+  const options = [
+    { value: "Authenticator apps", label: "Authenticator apps" },
+    { value: "Email", label: "Email" },
+  ];
+  const [type, setType] = useState("Authenticator apps");
+  const [modalOne, setModalOne] = useState(false);
+  const [otpModal, setOtpModal] = useState(false);
+  const [authCurrent, setAuthCurrent] = useState(false);
+  const [securityQuestionModal, setSecurityQuestionModal] = useState(false);
+  const [successModal, setSuccessModal] = useState(false);
+  const [optOutModal, setOptOutModal] = useState(false);
+  const [emailCurrent, setEmailCurrent] = useState(false);
+
+  const [checked, setChecked] = useState(false);
+
+  const handleChange = (newValue) => {
+    setChecked(newValue);
+  };
+
+  const handleOptionChange = (newValue) => {
+    console.log("New value:", newValue);
+    setType(newValue);
+  };
+
+  return (
+    <AdminTwoFaSecurityContainer>
+      <div className="twofa_banner_container">
+        <div className="twofa_bc_section">
+          <div className="twofa_img">
+            <img src={img} alt="" />
+          </div>
+
+          <div className="twofa_bc_details">
+            <p className="twofa_bc_title">Help Protect Your Account</p>
+
+            <p className="twofa_bc_subtitle">
+              To get started with your two factor authentication,
+              <br /> select your means of receiving code
+            </p>
+          </div>
+        </div>
+
+        <div className="twofa_bc_section_two">
+          <div className="twofa_radio">
+            <Radio
+              options={options}
+              color="#FEBF10"
+              defaultValue="Authenticator apps"
+              onChange={handleOptionChange}
+              direction="row"
+            />
+
+            <p className="twofa_note">Recommended.</p>
+          </div>
+        </div>
+      </div>
+
+      {/* for email 2fa  */}
+      {type === "Email" && (
+        <>
+          {emailCurrent ? (
+            <>
+              <p className="current_txt"> Current:</p>
+
+              <div className="current_auth_main">
+                <div className="auth_shield">
+                  <img src={shield} alt="" />
+                </div>
+
+                <p className="current_auth_txt">
+                  Email: **********oe@gmail.com{" "}
+                </p>
+
+                <div className="crr_toggle">
+                  <ToggleButtonComponent />
+                </div>
+              </div>
+            </>
+          ) : (
+            <ButtonComponent
+              text={"Setup"}
+              onClick={() => setOtpModal(true)}
+              styles={{ height: 44, marginLeft: 30 }}
+            />
+          )}
+          <OTPSecurityModal
+            isOpen={otpModal}
+            onRequestClose={() => {
+              setOtpModal(false);
+            }}
+            nextOpen={() => {
+              setOtpModal(false);
+              setSecurityQuestionModal(true);
+            }}
+            OTPvalue={"drp******@gmail.com "}
+            OTPtype={"email"}
+          />
+          <SecurityQuestionModal
+            isOpen={securityQuestionModal}
+            onRequestClose={() => setSecurityQuestionModal(false)}
+            nextOpen={() => {
+              setSecurityQuestionModal(false);
+              setSuccessModal(true);
+            }}
+          />
+          <SecuritySuccessModal
+            isOpen={successModal}
+            onRequestClose={() => {
+              setSuccessModal(false);
+              setEmailCurrent(true);
+            }}
+            title="Your Two factor authentication is setup successfully."
+          />
+          <SecurityOptOutModal
+            isOpen={optOutModal}
+            onRequestClose={() => {
+              setOptOutModal(false);
+              setOtpModal(true);
+            }}
+          />
+        </>
+      )}
+
+      {/* for Authenticator apps 2fa */}
+      {type === "Authenticator apps" && (
+        <>
+          {authCurrent ? (
+            <>
+              <p className="current_txt"> Current:</p>
+
+              <div className="current_auth_main">
+                <div className="auth_shield">
+                  <img src={shield} alt="" />
+                </div>
+
+                <p className="current_auth_txt"> Google Authenticator </p>
+
+                <div className="crr_toggle">
+                  <ToggleButtonComponent />
+                </div>
+              </div>
+            </>
+          ) : (
+            <div className="twofa_main">
+              <p className="twofa_apps_txt">
+                Set up via Third Party Authentication{" "}
+              </p>
+
+              <div className="twofa_apps_row">
+                <div className="twofa_apps_qr">
+                  <div className="taq_box">
+                    <img src={qr} alt="" />
+                  </div>
+
+                  <p className="twofa_apps_subtitle">
+                    Use your authentication app (such as Google Authenticator)
+                    to scan this QR code.
+                  </p>
+                </div>
+
+                <div className="auth_app_code">
+                  <div>
+                    <div className="app_code_txt"> TAHT ST5D TG7S 9872 </div>
+
+                    <div className="app_code_note">
+                      Or enter this code above into your authenticator app
+                    </div>
+                  </div>
+
+                  <div className="app_code_form">
+                    <div className="form_group">
+                      <InputComponent
+                        inputType="text"
+                        label="Verification Code"
+                        required
+                      />
+                      <ButtonComponent
+                        text={"Verify"}
+                        styles={{ width: "" }}
+                        onClick={() => setModalOne(true)}
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          <SecuritySuccessModal
+            isOpen={modalOne}
+            onRequestClose={() => {
+              setModalOne(false);
+              setAuthCurrent(true);
+            }}
+            title="Your Two factor authentication is setup successfully."
+          />
+        </>
+      )}
+    </AdminTwoFaSecurityContainer>
+  );
+};
+
+export default AdminTwoFaSecurity;

package/src/components/AdminSecuritySettings/2fa/index.styled.js

@@ -0,0 +1,198 @@
+import styled from "styled-components";
+
+export const AdminTwoFaSecurityContainer = styled.div`
+  background-color: #f5f7f7;
+
+  .current_txt {
+    color: #636666;
+    font-size: 14px;
+    font-weight: 400;
+    margin-bottom: 5px;
+  }
+
+  .current_auth_main {
+    padding: 15px;
+    border-radius: 15px;
+    background: #f5f7f7;
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    max-width: 400px;
+    width: 100%;
+
+    .crr_toggle {
+        margin-left: auto;
+    }
+
+    .auth_shield {
+      max-width: 35px;
+      width: 100%;
+
+      img {
+        width: 100%;
+      }
+    }
+
+    .current_auth_txt {
+      color: #636666;
+      font-size: 16px;
+      font-weight: 400;
+    }
+  }
+
+  .twofa_banner_container {
+    border-radius: 15px;
+    background: #f5f7f7;
+    padding: 16px 33px;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 18px;
+
+    .twofa_bc_section {
+      width: 45%;
+      display: flex;
+      gap: 31px;
+      .twofa_img {
+        max-width: 46px;
+        width: 100%;
+        img {
+          width: 100%;
+        }
+      }
+
+      .twofa_bc_details {
+        .twofa_bc_title {
+          color: #febf10;
+          font-size: 20px;
+          font-weight: 700;
+          margin-bottom: 10px;
+        }
+
+        .twofa_bc_subtitle {
+          color: #313333;
+          font-size: 16px;
+          font-weight: 400;
+          line-height: normal;
+        }
+      }
+    }
+
+    .twofa_bc_section_two {
+      width: 45%;
+      position: relative;
+      padding-top: 24px;
+
+      &::before {
+        content: "";
+        height: 91px;
+        width: 2px;
+        background-color: #dfe5e5;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: absolute;
+        left: -75px;
+        top: 0;
+        border-radius: 6px;
+      }
+
+      .twofa_radio {
+        .twofa_note {
+          color: #30d468;
+          font-size: 14px;
+          font-style: italic;
+          font-weight: 400;
+          margin-left: 25px;
+          margin-top: 4px;
+        }
+      }
+    }
+  }
+
+  .twofa_main {
+    .twofa_apps_txt {
+      color: #313333;
+      font-size: 18px;
+      font-weight: 700;
+      letter-spacing: 0.36px;
+      margin-bottom: 16px;
+    }
+
+    .twofa_apps_row {
+      display: flex;
+      gap: 35px;
+    }
+
+    .twofa_apps_qr {
+      border-radius: 15px;
+      border: 1px solid #dfe5e5;
+      padding: 16px;
+      background-color: #dfe5e5;
+      max-width: 250px;
+      width: 100%;
+
+      .taq_box {
+        max-width: 144px;
+        width: 100%;
+        margin: 0 auto;
+
+        img {
+          width: 100%;
+        }
+      }
+
+      .twofa_apps_subtitle {
+        margin-top: 10px;
+        color: #636666;
+        font-size: 14px;
+        font-weight: 400;
+        letter-spacing: 0.56px;
+      }
+    }
+
+    .auth_app_code {
+      display: flex;
+      justify-content: space-between;
+      flex-direction: column;
+      .app_code_txt {
+        padding: 10px 22px;
+        border-radius: 10px;
+        background: #f5f7f7;
+        color: #636666;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        font-size: 16px;
+        font-weight: 700;
+        line-height: normal;
+        letter-spacing: 0.64px;
+        margin-bottom: 15px;
+        max-width: 236px;
+        width: 100%;
+      }
+
+      .app_code_note {
+        max-width: 232px;
+        width: 100%;
+        color: #636666;
+        font-size: 16px;
+        font-weight: 600;
+        line-height: normal;
+        letter-spacing: 0.64px;
+      }
+
+      .app_code_form {
+        margin-top: auto;
+        max-width: 390px;
+        width: 100%;
+
+        .form_group {
+          display: flex;
+          align-items: end;
+          gap: 16px;
+        }
+      }
+    }
+  }
+`;

package/src/components/AdminSecuritySettings/assets/svg/backArrow.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+export const BackArrowIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="25"
+      viewBox="0 0 24 25"
+      fill="none"
+    >
+      <g clipPath="url(#clip0_3085_48537)">
+        <path
+          d="M20 11.5H7.83L13.42 5.91L12 4.5L4 12.5L12 20.5L13.41 19.09L7.83 13.5H20V11.5Z"
+          fill="#323232"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_3085_48537">
+          <rect
+            width="24"
+            height="24"
+            fill="white"
+            transform="translate(0 0.5)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

package/src/components/AdminSecuritySettings/index.jsx

@@ -0,0 +1,89 @@
+import React, { useState } from "react";
+import { AdminSecurityContainer } from "./index.styled";
+import { useNavigate } from "react-router-dom";
+import AdminSecurityPassword from "./password";
+import AdminSecurityChangePassword from "./password/change-password";
+import AdminTwoFaSecurity from "./2fa";
+import OTPSecurityModal from "./modals/otp-password-modal";
+import SecuritySuccessModal from "./modals/success-modal";
+
+const AdminSecurity = () => {
+  const navigate = useNavigate();
+  const [activeTab, setActiveTab] = useState(1);
+  const [modalIsOpen, setIsOpen] = useState(false);
+  const [passwordPage, setPasswordPage] = useState(false);
+  const [modalOne, setModalOne] = useState(false);
+
+  const closeModal = () => {
+    setIsOpen(false);
+  };
+  return (
+    <AdminSecurityContainer>
+      <>
+        {!passwordPage && (
+          <>
+            <div className="ass_header">
+              <p className="ass_title"> Security </p>
+              <p className="ass_ref">
+                Settings <span className="slash">/</span> <span>Profile</span>
+              </p>
+            </div>
+
+            <div className="ass_tab_row">
+              <div className="ass_tab_group">
+                <div
+                  className={`ass_tab ${activeTab === 1 ? "active" : ""}`}
+                  onClick={() => setActiveTab(1)}
+                >
+                  Password
+                </div>
+                <div
+                  className={`ass_tab ${activeTab === 2 ? "active" : ""}`}
+                  onClick={() => setActiveTab(2)}
+                >
+                  2F Authentication
+                </div>
+              </div>
+            </div>
+
+            {activeTab === 1 && (
+              <>
+                <AdminSecurityPassword onClick={() => setIsOpen(true)} />
+              </>
+            )}
+            {activeTab === 2 && (
+              <>
+                <AdminTwoFaSecurity />
+              </>
+            )}
+          </>
+        )}
+      </>
+
+      {passwordPage && (
+        <AdminSecurityChangePassword
+          modalOne={modalOne}
+          setModalOne={setModalOne}
+          nextOpen={() => setPasswordPage(false)}
+          onRequestClose={() => {
+            setPasswordPage(false);
+            setModalOne(false);
+          }}
+        />
+      )}
+
+      <OTPSecurityModal
+        isOpen={modalIsOpen}
+        onRequestClose={closeModal}
+        nextOpen={() => {
+          setPasswordPage(true);
+          setIsOpen(false);
+        }}
+        OTPvalue={"*****222"}
+        OTPtype={"phone"}
+      />
+    </AdminSecurityContainer>
+  );
+};
+
+export default AdminSecurity;

package/src/components/AdminSecuritySettings/index.styled.js

@@ -0,0 +1,97 @@
+import styled from "styled-components";
+
+export const AdminSecurityContainer = styled.div`
+  .ass_header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 20px;
+
+    .ass_title {
+      color: #1c2434;
+      font-size: 18px;
+      font-weight: 700;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      span {
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    .ass_ref {
+      color: #64748b;
+      font-size: 16px;
+      font-weight: 600;
+      line-height: normal;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      span {
+        color: #3c50e0;
+      }
+
+      .slash {
+        color: #64748b;
+      }
+    }
+  }
+
+  .ass_tab_row {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    justify-content: space-between;
+    width: 100%;
+    max-width: 420px;
+    border-radius: 11px;
+    background: #f5f7f7;
+    .ass_tab_group {
+      display: flex;
+      gap: 4px;
+      border-radius: 11px;
+      background: #f5f7f7;
+      padding: 4px;
+      width: 100%;
+      max-width: 420px;
+      .ass_tab {
+        width: 200px;
+        height: 36px;
+        padding: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 7px;
+        background: #dfe5e5;
+        color: #7c8080;
+        text-align: center;
+        font-size: 16px;
+        font-weight: 400;
+        cursor: pointer;
+        width: 50%;
+
+        .not_ify {
+          border-radius: 49px;
+          background: #febf10;
+          padding: 6px 8px;
+          color: #ffffff;
+          font-size: 10px;
+          font-weight: 600;
+          margin-left: 15px;
+          width: 22px;
+          height: 22px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        &.active {
+          color: #fff;
+          background-color: #00c2c2;
+        }
+      }
+    }
+  }
+`;