Viewing File: /home/ubuntu/voice-assistant-frontend/src/components/Profile/ProfileIndex.jsx
import React, { useState, useEffect, useRef } from "react";
import { Container, Row, Col, InputGroup, Button, Form } from "react-bootstrap";
import { Formik, Form as FORM, Field, ErrorMessage } from "formik";
import Switch from "react-js-switch";
import ChangePasswordModal from "./ChangePasswordModal";
import DeleteAccountModal from "./DeleteAccountModal";
import { useTranslation } from "react-multi-lang";
import * as Yup from "yup";
import { updateProfileStart } from "../../store/slices/AdminSlice";
import { useDispatch, useSelector } from "react-redux";
import { ButtonLoader } from "../Helper/Loader";
import { profileStart } from "../../store/slices/AdminSlice";
import SomethingWentWrong from "../Helper/SomethingWentWrong";
import DashboardLoader from "../Helper/ProfileLoader";
import { updateEmailCodeStart } from "../../store/slices/AdminSlice";
import OTPVerificationModal from "../Auth/OtpVerificationModal";
import TwoFactorOnModal from "./TwoFactorOnModal";
import LandingFooterIndex from "../layouts/Footer/LandingFooterIndex";
const ProfileIndex = (props) => {
const t = useTranslation("profile");
const formRef = useRef();
const dispatch = useDispatch();
const profile = useSelector(state => state.admin.profile);
const updateProfile = useSelector(state => state.admin.updateProfile);
const updateEmail = useSelector(state => state.admin.updateEmailCode);
const [isSwitchOn, setIsSwitchOn] = useState();
const [skipRender, setSkipRender] = useState(true);
const [deleteAccount, setDeleteAccount] = useState(false);
const [twoFactorActivate, setTwoFactorActivate] = useState(false);
const [changePassword, setChangePassword] = useState(false);
const [showOTPVerifyModal, setShowOTPVerifyModal] = useState(false);
const [updateEmailButtonState, setupdateEmailButtonState] = useState(false);
const switch_onChange_handle = () => {
setIsSwitchOn(!isSwitchOn);
setTwoFactorActivate(true)
};
const closeChangePasswordModal = () => {
setChangePassword(false);
};
const closeDeleteAccountModal = () => {
setDeleteAccount(false);
};
const closeTwoFactorOnModal = () => {
setTwoFactorActivate(false);
setIsSwitchOn(!isSwitchOn);
};
const nameSchema = Yup.object().shape({
name: Yup.string()
.required(t("name.required"))
.min(5, t("name.invalid")),
});
const emailSchema = Yup.object().shape({
email: Yup.string().email(t("email.invalid")).required(t("email.required")),
});
const handleNameUpdate = (values) => {
dispatch(updateProfileStart(values))
}
const handleEmailUpdate = (values) => {
setupdateEmailButtonState(true)
dispatch(updateEmailCodeStart(values))
}
useEffect(() => {
if (!profile.buttonDisable && Object.keys(profile.data).length == 0) {
dispatch(profileStart());
}
if (
!skipRender &&
!updateEmail.loading &&updateEmailButtonState&&
Object.keys(updateEmail.data).length > 0
) {
setupdateEmailButtonState(false)
setShowOTPVerifyModal({
email: formRef.current.values.email,
type: "updateEmail"
});
}
setSkipRender(false);
setIsSwitchOn(profile.data.tfa_status == 1 ? true : false)
}, [updateEmail, profile]);
return (
profile.loading ? (<DashboardLoader />) :
Object.keys(profile.data).length > 0 ? (
<>
<div className="landing-page-sec">
<div className="profile-sec">
<Container>
<Row className="justify-content-md-center">
<Col md={12} lg={12} xl={8}>
<div className="profile-box">
<h3>{t("heading")}</h3>
<p>{t("message")}</p>
<Formik
initialValues={{
name: profile.data.name,
email: profile.data.email,
}}
validationSchema={nameSchema}
onSubmit={handleNameUpdate}
>
{({ setFieldValue, values }) => (
<FORM className="profile-form-sec">
<h5>{t("basic_info")}</h5>
<div className="profile-form-card">
<InputGroup className="mb-0">
<InputGroup.Text id="basic-addon1">
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-user"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="#878E96"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0" />
<path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
</svg>
</InputGroup.Text>
<Field
className="form-control"
placeholder={t("name.placeholder")}
type="text"
name="name"
/>
</InputGroup>
<Button className="default-outline-btn" type="submit" disabled={updateProfile.buttonDisable}>
{updateProfile.buttonDisable ? (
<ButtonLoader varient="black" />
) : (
t("update_name")
)}
</Button>
</div>
<ErrorMessage
component={"div"}
name="name"
className="errorMsg"
/>
</FORM>
)}
</Formik>
<Formik
initialValues={{
email: profile?.data.email,
}}
validationSchema={emailSchema}
onSubmit={handleEmailUpdate}
innerRef={formRef}
>
{({ setFieldValue, values }) => (
<FORM className="profile-form-sec mt-0">
<div className="profile-form-card">
<InputGroup className="mb-0">
<InputGroup.Text id="basic-addon1">
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-mail"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="#878E96"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z" />
<path d="M3 7l9 6l9 -6" />
</svg>
</InputGroup.Text>
<Field
className="form-control"
placeholder={t("email.placeholder")}
type="email"
name="email"
/>
</InputGroup>
<Button className="default-outline-btn" type="submit" disabled={updateEmail.buttonDisable && updateEmailButtonState}>
{updateEmail.buttonDisable && updateEmailButtonState ? (
<ButtonLoader varient="black" />
) : (
t("update_email")
)}
</Button>
</div>
<ErrorMessage
component={"div"}
name="email"
className="errorMsg"
/>
</FORM>
)}
</Formik>
<div className="change-password-sec mt-4">
<h5>{t("security")}</h5>
<h6>{t("password_settings")}</h6>
<Button
className="default-outline-btn "
onClick={() => setChangePassword(true)}
>
{t("change_password")}
</Button>
</div>
<div className="two-step-auth-sec d-flex justify-content-between align-items-center mt-4">
<h6>{t("two_factor")}</h6>
<div>
<Switch
value={isSwitchOn}
backgroundColor={{ on: "#65C174", off: "grey" }}
borderColor={{ on: "#65C174", off: "#e6e6e6" }}
onChange={switch_onChange_handle}
/>
</div>
</div>
<div className="delete-account-sec mt-2">
<h5>{t("delete_account")}</h5>
<Button
className="delete-btn"
onClick={() => setDeleteAccount(true)}
>
{t("delete_account")}
</Button>
</div>
</div>
</Col>
</Row>
</Container>
</div>
<LandingFooterIndex />
</div>
<ChangePasswordModal
changePassword={changePassword}
closeChangePasswordModal={closeChangePasswordModal}
setChangePassword={setChangePassword}
/>
<DeleteAccountModal
deleteAccount={deleteAccount}
closeDeleteAccountModal={closeDeleteAccountModal}
setDeleteAccount={setDeleteAccount}
/>
<TwoFactorOnModal
twoFactorActivate={twoFactorActivate}
closeTwoFactorOnModal={closeTwoFactorOnModal}
setTwoFactorActivate={setTwoFactorActivate}
/>
{showOTPVerifyModal ?
<OTPVerificationModal
OTPVerify={showOTPVerifyModal}
closeShowOTPVerify={() => setShowOTPVerifyModal(false)}
setShowOTPVerifyModal={setShowOTPVerifyModal}
buttonDisable={() => setupdateEmailButtonState(false)} />
: null}
</>
) : (
<SomethingWentWrong
buttonText="Retry"
handleClick={() => dispatch(profileStart())}
/>
)
)
};
export default ProfileIndex;
Back to Directory
File Manager