tabexseriescomponents 0.0.706 → 0.0.708

package/srcoman/TabexComponents/StaticPages/Login/Login copy.jsx

@@ -0,0 +1,1060 @@
+// import React, { useEffect, useState, useContext } from 'react';
+// import loginstyles from '../../../styles/staticpages/login.module.css';
+// import { CircularProgress } from 'react-cssfx-loading';
+// import { css } from 'glamor';
+// import GoogleLogin from './GoogleLoginButton.jsx';
+// import FacebookLoginButton from './FacebookLoginButton.jsx';
+// import { AiOutlineUser } from '@react-icons/all-files/ai/AiOutlineUser';
+// import { IoMdClose } from '@react-icons/all-files/io/IoMdClose';
+// // import { MdOutlineAlternateEmail } from '@react-icons/all-files/md/MdOutlineAlternateEmail';
+// import { Modal } from 'react-bootstrap';
+
+// import { useQuery, useQueryClient, useMutation } from 'react-query';
+
+// const Login = (props) => {
+//     const StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
+//     const lang = props.actions.lang;
+//     const templatepropcontext = props.actions.templatepropcontext;
+//     const langdetect = props.actions.langdetect;
+//     const routingcountext = props.actions.routingcountext;
+//     const StaticPagesLinksContext = props.actions.StaticPagesLinksContext;
+//     const SocialLoginMutationContext = props.actions.SocialLoginMutationContext;
+//     const ForgetpasswordMutationContext = props.actions.ForgetpasswordMutationContext;
+//     const LoginMutation = props.actions.LoginMutationContext;
+//     const NotificationManager = props.actions.NotificationManager;
+//     const instapikey = props.actions.instapikey;
+//     const ikimagecredcontext = props.actions.ikimagecredcontext;
+
+//     const actions = props.actions;
+//     const [statusreason, setstatusreason] = useState('');
+//     const [showpassword, setshowpassword] = useState(false);
+
+//     const [forgotpasswordpayload, setforgotpasswordpayload] = useState({
+//         instapikey: instapikey,
+//         email: '',
+//         code: '',
+//         newpassword: '',
+//         confirmnewpassword: '',
+//     });
+//     const [payloadobj, setpayloadobj] = useState({
+//         instapikey: instapikey,
+//         email: '',
+//         password: '',
+//     });
+//     const [forgetpasswordstage, setforgetpasswordstage] = useState('send');
+//     const [forgetpasswordmodal, setforgetpasswordmodal] = useState(false);
+//     const [CurrentPageId, setCurrentPageId] = useState('');
+//     const [sectionproperties, setsectionproperties] = useState('');
+//     useEffect(() => {
+//         var cartindex = templatepropcontext.pagesnprop.findIndex((x) => x.staticpageid == '6218bccb77283');
+//         if (cartindex >= 0) {
+//             setCurrentPageId(templatepropcontext.pagesnprop[cartindex].pageid);
+//         }
+//     }, []);
+//     useEffect(() => {
+//         if (StatePagePropertiesContext != null && StatePagePropertiesContext != undefined && StatePagePropertiesContext.length != 0) {
+//             var secpropobj = {};
+//             StatePagePropertiesContext?.pageobj?.pageproperties?.forEach(function (arrayItem, arrayindex) {
+//                 secpropobj[arrayItem.property_css_name] = arrayItem.property_value;
+//             });
+//             setsectionproperties({ ...secpropobj });
+//         }
+//     }, [StatePagePropertiesContext]);
+//     useEffect(() => {
+//         if (ForgetpasswordMutationContext.isSuccess) {
+//             if (ForgetpasswordMutationContext.data.data.status) {
+//                 if (ForgetpasswordMutationContext.data.data.stage == 'send') {
+//                     setforgetpasswordstage('verify');
+//                 } else if (ForgetpasswordMutationContext.data.data.stage == 'verify') {
+//                     setforgetpasswordstage('send');
+//                     setforgotpasswordpayload({
+//                         instapikey: instapikey,
+//                         email: '',
+//                         code: '',
+//                         newpassword: '',
+//                         confirmnewpassword: '',
+//                     });
+//                     setforgetpasswordmodal(false);
+//                     NotificationManager.success('', 'Password changed successfully');
+//                 }
+//             }
+//         }
+//     }, [ForgetpasswordMutationContext.isSuccess]);
+
+//     const loginstyles2 = {
+//         loginbtn: css({
+//             background: sectionproperties.login_btn_backgroundtransparent == 'Transparent' ? 'transparent' : sectionproperties.login_btn_background,
+//             color: sectionproperties.login_btn_color,
+//             borderRadius: sectionproperties.login_btn_borderBottomLeftRadius + 'px',
+//             fontSize: sectionproperties.login_btn_fontSize + 'px',
+//             lineHeight: sectionproperties.login_btn_fontSize + 'px',
+//             width: sectionproperties.login_btn_width + 'px',
+//             height: sectionproperties.login_btn_height + 'px',
+//             fontWeight: sectionproperties.login_btn_fontweight,
+//             transition: '.3s',
+//             border: sectionproperties.login_btn_borderwidth + 'px solid ' + sectionproperties.login_btn_bordercolor,
+//             ':hover': {
+//                 background: sectionproperties.login_btn_backgroundonhover,
+//                 color: sectionproperties.login_btn_coloronhover,
+//                 borderColor: sectionproperties.login_btn_coloronhover,
+//             },
+//         }),
+//         logininputLabel: css({
+//             color: sectionproperties.form_labelcolor,
+//             textTransform: sectionproperties.form_labeltexttransform,
+//             fontWeight: sectionproperties.form_labelfontweight,
+//             fontSize: sectionproperties.form_labelfontsize + 'px',
+//             marginBottom: sectionproperties.inputfieldbordertype == 'All' ? 10 : 0,
+//         }),
+//         signupbtn: css({
+//             background: sectionproperties.signup_btnbgcolortransparent == 'Transparent' ? 'transparent' : sectionproperties.signup_btnbgcolor,
+//             width: sectionproperties.signup_btn_width + 'px',
+//             height: sectionproperties.signup_btn_height + 'px',
+//             borderRadius: sectionproperties.signup_btn_borderBottomLeftRadius + 'px',
+//             color: sectionproperties.signup_btn_color,
+//             fontSize: sectionproperties.signup_btn_fontSize + 'px',
+//             fontWeight: sectionproperties.signup_btn_fontweight,
+//             border: sectionproperties.signup_btn_borderwidth + 'px solid ' + sectionproperties.signupbtn_bordercolor,
+//             transition: '.3s',
+//             ':hover': {
+//                 color: sectionproperties.signup_btn_coloronhover,
+//                 borderColor: sectionproperties.signup_btn_coloronhover,
+//                 background: sectionproperties.signup_btnbgcoloroonhover,
+//             },
+//         }),
+//         form_control: css({
+//             position: 'relative',
+//             display: 'flex',
+//             alignItems: 'center',
+//             display: 'block',
+//             width: '100%',
+//             height: '35px',
+//             padding: '0 10px',
+//             transition: '.3s',
+//             fontWeight: 500,
+//             border: sectionproperties.inputfieldbordertype == 'All' ? sectionproperties.inputfieldborderWidth + 'px solid ' + sectionproperties.inputfieldborderColor : 0,
+//             borderBottom: sectionproperties.inputfieldborderWidth + 'px solid ' + sectionproperties.inputfieldborderColor,
+//             borderRadius: sectionproperties.inputfieldborderradius + 'px',
+//             height: sectionproperties.inputfieldheight + 'px',
+//             background: sectionproperties.input_bgcolor,
+//             color: sectionproperties.inputfieldcolor,
+//             ':focus': {
+//                 borderColor: sectionproperties.inputfeildbordercoloronfocus,
+//             },
+//             ':focus .login_input_icon': {
+//                 color: sectionproperties.inputfeildbordercoloronfocus,
+//             },
+//         }),
+//     };
+//     const RightContainerContent = () => {
+//         return (
+//             <div className="row m-0 w-100">
+//                 <div className="col-lg-12 col-md-12 col-sm-12 d-flex align-items-center justify-content-center mb-md-2">
+//                     <p
+//                         className={` ${loginstyles.rightContainerText}`}
+//                         style={{
+//                             color: sectionproperties.formRightTextColor1,
+//                             fontSize: sectionproperties.formRightTextFontSize1 + 'px',
+//                             fontWeight: sectionproperties.formRightTextFontWeight1,
+//                             marginBottom: sectionproperties.formRightTextMarginBottom1 + 'px',
+//                         }}
+//                     >
+//                         {langdetect == 'en' ? sectionproperties.formRightText1 : sectionproperties.formRightText1_ar}
+//                     </p>
+//                 </div>
+//                 <div className="col-lg-12 col-md-12 col-sm-12 d-flex align-items-center justify-content-center mb-md-2">
+//                     <p
+//                         className={` ${loginstyles.rightContainerText}`}
+//                         style={{
+//                             color: sectionproperties.formRightTextColor2,
+//                             fontSize: sectionproperties.formRightTextFontSize2 + 'px',
+//                             fontWeight: sectionproperties.formRightTextFontWeight2,
+//                             marginBottom: sectionproperties.formRightTextMarginBottom2 + 'px',
+//                         }}
+//                     >
+//                         {langdetect == 'en' ? sectionproperties.formRightText2 : sectionproperties.formRightText2_ar}
+//                     </p>
+//                 </div>
+
+//                 <div className="col-lg-12 col-md-12 col-sm-12 d-flex align-items-center justify-content-center">
+//                     <button
+//                         className={`${loginstyles2.signupbtn} ` + '  pl-4 pr-4 '}
+//                         onClick={() => {
+//                             routingcountext(StaticPagesLinksContext.Signup);
+//                         }}
+//                     >
+//                         {langdetect == 'en' ? sectionproperties.signupbtn_contenten : sectionproperties.signupbtn_contentar}
+//                     </button>
+//                 </div>
+//             </div>
+//         );
+//     };
+//     return (
+//         <div
+//             className="col-lg-12 d-flex align-items-center justify-content-center pt-md-3 pb-5"
+//             style={{
+//                 background: sectionproperties.backgroundColor,
+//                 marginBottom: sectionproperties.marginBottom + 'px',
+//             }}
+//         >
+//             {sectionproperties.length != 0 && (
+//                 <div className={'row m-0 w-100 pl-5 pr-5 d-flex align-items-center justify-content-center pl-md-3 pr-md-3 p-sm-0'}>
+//                     <div className="col-lg-12 col-md-12 col-sm-12 d-flex align-items-center justify-content-center">
+//                         <p
+//                             className="text-md-center"
+//                             style={{
+//                                 fontSize: sectionproperties.sectionTitleFontSize + 'px',
+//                                 color: sectionproperties.sectionTitleColor,
+//                                 marginTop: sectionproperties.sectionTitleMarginTop + 'px',
+//                                 marginBottom: sectionproperties.sectionTitleMarginBottom + 'px',
+//                                 marginLeft: sectionproperties.sectionTitleMarginLeft + 'px',
+//                                 marginRight: sectionproperties.sectionTitleMarginRight + 'px',
+//                                 textTransform: sectionproperties.sectionTitleTextTransform,
+//                                 fontWeight: sectionproperties.sectionTitleFontWeight,
+//                             }}
+//                         >
+//                             {langdetect == 'en' ? sectionproperties.sectionTitleContent : sectionproperties.sectionTitleContent_ar}
+//                         </p>
+//                     </div>
+//                     <div className="col-lg-12 col-md-12 col-sm-12 p-sm-0 d-flex justify-content-center">
+//                         <div className={' col-lg-10 col-md-12 col-sm-12 p-sm-0 '}>
+//                             <div className=" row m-0 w-100 ">
+//                                 <div
+//                                     className={
+//                                         sectionproperties.cardstyletype == 'Style 1'
+//                                             ? `${loginstyles.leftcontainer}` + ' col-lg-6 col-md-12 col-sm-12 pt-4 pb-4 d-flex align-items-stretch p-0 '
+//                                             : `${loginstyles.leftcontainer}` + ' col-lg-6 mx-auto col-md-12 col-sm-12 pt-4 pb-4 d-flex align-items-stretch p-0 '
+//                                     }
+//                                     style={{
+//                                         background: sectionproperties.formLeftbgColor,
+//                                         borderTopRightRadius: langdetect == 'en' ? sectionproperties.formLeft_bordertoprightradius + 'px' : sectionproperties.formLeft_bordertopleftradius + 'px',
+//                                         borderTopLeftRadius: langdetect == 'en' ? sectionproperties.formLeft_bordertopleftradius + 'px' : sectionproperties.formLeft_bordertoprightradius + 'px',
+//                                         borderBottomRightRadius:
+//                                             langdetect == 'en' ? sectionproperties.formLeft_borderbottomrightadius + 'px' : sectionproperties.formLeft_borderbottomleftadius + 'px',
+//                                         borderBottomLeftRadius: langdetect == 'en' ? sectionproperties.formLeft_borderbottomleftadius + 'px' : sectionproperties.formLeft_borderbottomrightadius + 'px',
+//                                     }}
+//                                 >
+//                                     <div class="row m-0 w-100">
+//                                         <div class="col-lg-12 p-0">
+//                                             <form class="row m-0 w-100 d-flex p-2 pl-sm-3 pr-sm-3">
+//                                                 {/* <div className="row m-0 w-100 d-block "> */}
+//                                                 <div className="col-lg-12 col-md-12 col-sm-12 mb-5 p-sm-0">
+//                                                     <label className={`${loginstyles2.logininputLabel}` + ' d-flex justify-content-start '}>
+//                                                         {langdetect == 'en' ? 'Email or Phone number' : 'البريد الإلكترونى او رقم الهاتف'}
+//                                                     </label>
+//                                                     <input
+//                                                         type="text"
+//                                                         className={`${loginstyles2.form_control}`}
+//                                                         value={payloadobj.email}
+//                                                         onChange={(event) => {
+//                                                             var temppayloadobj = { ...payloadobj };
+//                                                             temppayloadobj.email = event.target.value;
+//                                                             setpayloadobj({ ...temppayloadobj });
+//                                                         }}
+//                                                         style={{
+//                                                             background: 'transparent',
+//                                                         }}
+//                                                     />
+//                                                     {/* <span
+//                                                         className={langdetect == 'en' ? loginstyles.login_input_icon + ' login_input_icon ' : loginstyles.login_input_icontrans + ' login_input_icon '}
+//                                                     >
+//                                                         <i className="h-100 d-flex align-items-center justify-content-center">
+//                                                             <AiOutlineUser size={18} />
+//                                                         </i>
+//                                                     </span> */}
+//                                                 </div>
+//                                                 <div className="col-lg-12 col-md-12 col-sm-12 p-sm-0">
+//                                                     <label className={`${loginstyles2.logininputLabel}` + ' d-flex justify-content-start '}>{langdetect == 'en' ? 'Password' : 'كلمة السر'}</label>
+//                                                     <div
+//                                                         onClick={() => {
+//                                                             setshowpassword(!showpassword);
+//                                                         }}
+//                                                         className={langdetect == 'en' ? loginstyles.showpassword_input_icon : loginstyles.showpassword_input_icontrans}
+//                                                     >
+//                                                         <i className="fa fa-eye h-100 d-flex align-items-center justify-content-center"></i>
+//                                                     </div>
+//                                                     <input
+//                                                         className={`${loginstyles.form_control} ${loginstyles2.form_control}`}
+//                                                         type={showpassword ? 'text' : 'password'}
+//                                                         textplaceholder=""
+//                                                         value={payloadobj.password}
+//                                                         onChange={(event) => {
+//                                                             var temppayloadobj = { ...payloadobj };
+//                                                             temppayloadobj.password = event.target.value;
+//                                                             setpayloadobj({ ...temppayloadobj });
+//                                                         }}
+//                                                         style={{
+//                                                             background: 'transparent',
+//                                                         }}
+//                                                     />
+//                                                 </div>
+//                                                 <div
+//                                                     className="col-lg-12 col-md-12 col-sm-12  mb-3 d-flex justify-content-end mt-1 cursor-pointer text-light text-lighthover font-13 "
+//                                                     onClick={() => {
+//                                                         setforgetpasswordmodal(true);
+//                                                     }}
+//                                                 >
+//                                                     <p className={'m-0 p-0 '}>{langdetect == 'en' ? 'Forgot Password?' : 'هل نسيت كلمة السر؟'}</p>
+//                                                 </div>
+//                                                 <div className="col-lg-12 col-md-12 col-sm-12  d-flex justify-content-center font-13 mb-2">
+//                                                     <p style={{ color: 'red' }} className="m-0 p-0">
+//                                                         {statusreason}
+//                                                     </p>
+//                                                 </div>
+//                                                 <div className="col-lg-12 col-md-12 col-sm-12 d-flex align-items-center justify-content-center mb-3 mt-4">
+//                                                     <button
+//                                                         className={` ${loginstyles2.loginbtn}` + ' d-flex align-items-center justify-content-center '}
+//                                                         onClick={() => {
+//                                                             if (payloadobj.email.length != 0 && payloadobj.password.length != 0) {
+//                                                                 LoginMutation.mutate(payloadobj);
+//                                                             }
+//                                                         }}
+//                                                         type={'button'}
+//                                                         disabled={LoginMutation.isLoading == true ? true : false}
+//                                                     >
+//                                                         {!SocialLoginMutationContext.isLoading && (
+//                                                             <>
+//                                                                 {LoginMutation.isLoading && <CircularProgress color={sectionproperties.login_btn_color} width="20px" height="20px" duration="1s" />}
+
+//                                                                 {!LoginMutation.isLoading && (
+//                                                                     <span style={{ letterSpacing: langdetect == 'en' ? '1px' : '', textTransform: sectionproperties.login_btn_texttransform }}>
+//                                                                         {lang.login}
+//                                                                     </span>
+//                                                                 )}
+//                                                             </>
+//                                                         )}
+//                                                         {SocialLoginMutationContext.isLoading && <CircularProgress color="#fff" width="20px" height="20px" duration="1s" />}
+//                                                     </button>
+//                                                 </div>
+//                                                 <div className="col-lg-12 col-md-12 col-sm-12 d-flex align-items-center justify-content-center mb-2">
+//                                                     <FacebookLoginButton actions={actions} />
+//                                                 </div>
+//                                                 <div className="col-lg-12 col-md-12 col-sm-12 d-flex align-items-center justify-content-center">
+//                                                     <GoogleLogin actions={actions} />
+//                                                 </div>
+//                                                 {/* </div> */}
+//                                             </form>
+//                                         </div>
+//                                         {sectionproperties.cardstyletype == 'Style 2' && <div className={' col-lg-12 col-md-12 col-sm-12 allcentered p-0 '}>{RightContainerContent()}</div>}
+//                                     </div>
+//                                 </div>
+
+//                                 {sectionproperties.cardstyletype == 'Style 1' && (
+//                                     <div className={' col-lg-6 col-md-12 col-sm-12 d-flex align-items-stretch p-0 '}>
+//                                         <div
+//                                             className={`${loginstyles.rightContainer}` + ' p-2 row m-0 w-100 d-flex align-items-center justify-content-center pt-md-4 pb-md-4 '}
+//                                             style={{
+//                                                 background: sectionproperties.formRightbgColor,
+//                                                 borderTopRightRadius:
+//                                                     langdetect == 'en' ? sectionproperties.formRight_bordertoprightradius + 'px' : sectionproperties.formRight_bordertopleftradius + 'px',
+//                                                 borderTopLeftRadius:
+//                                                     langdetect == 'en' ? sectionproperties.formRight_bordertopleftradius + 'px' : sectionproperties.formRight_bordertoprightradius + 'px',
+//                                                 borderBottomRightRadius:
+//                                                     langdetect == 'en' ? sectionproperties.formRight_borderbottomrightadius + 'px' : sectionproperties.formRight_borderbottomleftadius + 'px',
+//                                                 borderBottomLeftRadius:
+//                                                     langdetect == 'en' ? sectionproperties.formRight_borderbottomleftadius + 'px' : sectionproperties.formRight_borderbottomrightadius + 'px',
+//                                             }}
+//                                         >
+//                                             {RightContainerContent()}
+//                                         </div>
+//                                     </div>
+//                                 )}
+//                             </div>
+//                         </div>
+//                     </div>
+//                     <form method="POST" action={'/surfer/login'} className="" id={'loginform'} style={{ display: 'none' }}>
+//                         <input type="hidden" name="email" value={payloadobj.email} />
+//                         <input type="hidden" name="password" value={payloadobj.password} />
+//                     </form>
+//                 </div>
+//             )}
+//             <Modal show={forgetpasswordmodal} onHide={() => setforgetpasswordmodal(false)} centered size={'md'}>
+//                 <Modal.Body>
+//                     <div
+//                         class="d-flex align-items-center justify-content-center bgdanger-hover"
+//                         style={{ position: 'absolute', right: -15, top: -15, width: '4vh', height: '4vh', background: '#000', borderRadius: '50%' }}
+//                         onClick={() => setforgetpasswordmodal(false)}
+//                     >
+//                         <IoMdClose size={15} color="white" />
+//                     </div>
+//                     <div class="row m-0 w-100 allcentered">
+//                         <div className="col-lg-12 col-md-12 col-sm-12 d-flex align-items-center mt-2 justify-content-center">
+//                             <p
+//                                 className="text-md-center m-0 p-0 mb-2"
+//                                 style={{
+//                                     fontSize: '19px',
+//                                     color: sectionproperties.sectionTitleColor,
+//                                     fontWeight: 600,
+//                                 }}
+//                             >
+//                                 {langdetect == 'en' ? 'Reset Password' : 'إعادة تعيين كلمة المرور'}
+//                             </p>
+//                         </div>
+//                         <div class="col-lg-12 p-0">
+//                             <hr class={'m-0 p-0'} />
+//                         </div>
+//                     </div>
+//                     <div class="row w-100 m-0 mb-3 pl-2 pr-2 pt-3 pb-3 pl-sm-3 pr-sm-3">
+//                         <div className="col-lg-12 col-md-12 col-sm-12 mb-2 p-sm-0">
+//                             <label className={`${loginstyles2.logininputLabel}` + ' d-flex justify-content-start '}>{langdetect == 'en' ? 'E-mail' : 'البريد الإلكترونى'}</label>
+//                             <input
+//                                 type="text"
+//                                 className={`${loginstyles2.form_control}`}
+//                                 value={forgotpasswordpayload.email}
+//                                 onChange={(event) => {
+//                                     var temppayloadobj = { ...forgotpasswordpayload };
+//                                     temppayloadobj.email = event.target.value;
+//                                     setforgotpasswordpayload({ ...temppayloadobj });
+//                                 }}
+//                                 disabled={forgetpasswordstage == 'verify' ? true : false}
+//                                 style={{
+//                                     background: 'transparent',
+//                                 }}
+//                             />
+//                         </div>
+//                         {forgetpasswordstage == 'verify' && (
+//                             <>
+//                                 <div className="col-lg-12 col-md-12 col-sm-12 mb-3 mt-3 p-sm-0">
+//                                     <label className={`${loginstyles2.logininputLabel}` + ' d-flex justify-content-start '}>{langdetect == 'en' ? 'Code' : ' كود البريد الاكتروني'}</label>
+//                                     <input
+//                                         type="text"
+//                                         className={`${loginstyles2.form_control}`}
+//                                         value={forgotpasswordpayload.code}
+//                                         onChange={(event) => {
+//                                             var temppayloadobj = { ...forgotpasswordpayload };
+//                                             temppayloadobj.code = event.target.value;
+//                                             setforgotpasswordpayload({ ...temppayloadobj });
+//                                         }}
+//                                         style={{
+//                                             background: 'transparent',
+//                                         }}
+//                                     />
+//                                 </div>
+//                                 <div className="col-lg-12 col-md-12 col-sm-12 mb-3 p-sm-0">
+//                                     <label className={`${loginstyles2.logininputLabel}` + ' d-flex justify-content-start '}>{lang.password}</label>
+//                                     <input
+//                                         type="password"
+//                                         className={`${loginstyles2.form_control}`}
+//                                         value={forgotpasswordpayload.newpassword}
+//                                         onChange={(event) => {
+//                                             var temppayloadobj = { ...forgotpasswordpayload };
+//                                             temppayloadobj.newpassword = event.target.value;
+//                                             setforgotpasswordpayload({ ...temppayloadobj });
+//                                         }}
+//                                         style={{
+//                                             background: 'transparent',
+//                                         }}
+//                                     />
+//                                 </div>
+//                                 <div className="col-lg-12 col-md-12 col-sm-12 mb-2 p-sm-0">
+//                                     <label className={`${loginstyles2.logininputLabel}` + ' d-flex justify-content-start '}>{lang.confirmpassword}</label>
+//                                     <input
+//                                         type="password"
+//                                         className={`${loginstyles2.form_control}`}
+//                                         value={forgotpasswordpayload.confirmnewpassword}
+//                                         onChange={(event) => {
+//                                             var temppayloadobj = { ...forgotpasswordpayload };
+//                                             temppayloadobj.confirmnewpassword = event.target.value;
+//                                             setforgotpasswordpayload({ ...temppayloadobj });
+//                                         }}
+//                                         style={{
+//                                             background: 'transparent',
+//                                         }}
+//                                     />
+//                                 </div>
+//                             </>
+//                         )}
+//                     </div>
+//                 </Modal.Body>
+//                 <Modal.Footer>
+//                     <div className="col-lg-12 col-md-12 col-sm-12 d-flex align-items-center justify-content-center mb-3 ">
+//                         <button
+//                             className={` ${loginstyles2.loginbtn}` + ' d-flex align-items-center justify-content-center '}
+//                             onClick={() => {
+//                                 if (forgotpasswordpayload.email.length != 0) {
+//                                     var runfunc = false;
+//                                     var tempforgotpasswordpayload = { ...forgotpasswordpayload };
+//                                     tempforgotpasswordpayload.functype = forgetpasswordstage;
+//                                     if (forgetpasswordstage == 'verify') {
+//                                         if (tempforgotpasswordpayload.newpassword.length != 0 && tempforgotpasswordpayload.code.length != 0) {
+//                                             if (tempforgotpasswordpayload.newpassword == tempforgotpasswordpayload.confirmnewpassword) {
+//                                                 runfunc = true;
+//                                             } else {
+//                                                 NotificationManager.warning('', 'Passwords do not match');
+//                                             }
+//                                         } else {
+//                                             NotificationManager.warning('', 'Please complete the missing fields');
+//                                         }
+//                                     } else {
+//                                         runfunc = true;
+//                                     }
+//                                     if (runfunc) {
+//                                         ForgetpasswordMutationContext.mutate(tempforgotpasswordpayload);
+//                                     }
+//                                 } else {
+//                                     NotificationManager.warning('', 'Please write your email');
+//                                 }
+//                             }}
+//                             type={'button'}
+//                             disabled={ForgetpasswordMutationContext.isLoading == true ? true : false}
+//                             style={{ width: '230px' }}
+//                         >
+//                             {ForgetpasswordMutationContext.isLoading && <CircularProgress color="#fff" width="20px" height="20px" duration="1s" />}
+//                             {!ForgetpasswordMutationContext.isLoading && (
+//                                 <span style={{ letterSpacing: langdetect == 'en' ? '1px' : '', textTransform: sectionproperties.login_btn_texttransform }}>
+//                                     {forgetpasswordstage == 'verify'
+//                                         ? langdetect == 'en'
+//                                             ? 'Reset password'
+//                                             : 'إعادة تعيين كلمة المرور'
+//                                         : langdetect == 'en'
+//                                         ? 'Send verification code'
+//                                         : 'أرسل رمز التحقق'}
+//                                 </span>
+//                             )}
+//                         </button>
+//                     </div>
+//                 </Modal.Footer>
+//             </Modal>
+//         </div>
+//     );
+// };
+// export default Login;
+
+import React, { useEffect, useState, useContext } from 'react';
+import loginstyles from '../../../styles/staticpages/login.module.css';
+import { CircularProgress } from 'react-cssfx-loading';
+import { css } from 'glamor';
+import GoogleLogin from './GoogleLoginButton.jsx';
+import FacebookLoginButton from './FacebookLoginButton.jsx';
+import { AiOutlineUser } from '@react-icons/all-files/ai/AiOutlineUser';
+import { IoMdClose } from '@react-icons/all-files/io/IoMdClose';
+import { Modal } from 'react-bootstrap';
+
+const Login = (props) => {
+    const StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
+    const lang = props.actions.lang;
+    const templatepropcontext = props.actions.templatepropcontext;
+    const langdetect = props.actions.langdetect;
+    const routingcountext = props.actions.routingcountext;
+    const StaticPagesLinksContext = props.actions.StaticPagesLinksContext;
+    const SocialLoginMutationContext = props.actions.SocialLoginMutationContext;
+    const ForgetpasswordMutationContext = props.actions.ForgetpasswordMutationContext;
+    const LoginMutation = props.actions.LoginMutationContext;
+    const NotificationManager = props.actions.NotificationManager;
+    const instapikey = props.actions.instapikey;
+    const actions = props.actions;
+    const [statusreason, setstatusreason] = useState('');
+    const [showpassword, setshowpassword] = useState(false);
+    const [forgotpasswordpayload, setforgotpasswordpayload] = useState({
+        instapikey: instapikey,
+        email: '',
+        code: '',
+        newpassword: '',
+        confirmnewpassword: '',
+    });
+    const [payloadobj, setpayloadobj] = useState({
+        instapikey: instapikey,
+        email: '',
+        password: '',
+    });
+    const [forgetpasswordstage, setforgetpasswordstage] = useState('send');
+    const [forgetpasswordmodal, setforgetpasswordmodal] = useState(false);
+    const [CurrentPageId, setCurrentPageId] = useState('');
+    const [sectionproperties, setsectionproperties] = useState('');
+    useEffect(() => {
+        var cartindex = templatepropcontext.pagesnprop.findIndex((x) => x.staticpageid == '6218bccb77283');
+        if (cartindex >= 0) {
+            setCurrentPageId(templatepropcontext.pagesnprop[cartindex].pageid);
+        }
+    }, []);
+    useEffect(() => {
+        if (StatePagePropertiesContext != null && StatePagePropertiesContext != undefined && StatePagePropertiesContext.length != 0) {
+            var secpropobj = {};
+            StatePagePropertiesContext?.pageobj?.pageproperties?.forEach(function (arrayItem, arrayindex) {
+                secpropobj[arrayItem.property_css_name] = arrayItem.property_value;
+            });
+            setsectionproperties({ ...secpropobj });
+        }
+    }, [StatePagePropertiesContext]);
+    useEffect(() => {
+        if (ForgetpasswordMutationContext.isSuccess) {
+            if (ForgetpasswordMutationContext.data.data.status) {
+                if (ForgetpasswordMutationContext.data.data.stage == 'send') {
+                    setforgetpasswordstage('verify');
+                } else if (ForgetpasswordMutationContext.data.data.stage == 'verify') {
+                    setforgetpasswordstage('send');
+                    setforgotpasswordpayload({
+                        instapikey: instapikey,
+                        email: '',
+                        code: '',
+                        newpassword: '',
+                        confirmnewpassword: '',
+                    });
+                    setforgetpasswordmodal(false);
+                    NotificationManager.success('', 'Password changed successfully');
+                }
+            }
+        }
+    }, [ForgetpasswordMutationContext.isSuccess]);
+
+    const loginstyles2 = {
+        loginbtn: css({
+            background: sectionproperties.login_btn_backgroundtransparent == 'Transparent' ? 'transparent' : sectionproperties.login_btn_background,
+            color: sectionproperties.login_btn_color,
+            borderRadius: sectionproperties.login_btn_borderBottomLeftRadius + 'px',
+            fontSize: sectionproperties.login_btn_fontSize + 'px',
+            lineHeight: sectionproperties.login_btn_fontSize + 'px',
+            width: sectionproperties.login_btn_width + 'px',
+            height: sectionproperties.login_btn_height + 'px',
+            fontWeight: sectionproperties.login_btn_fontweight,
+            transition: '.3s',
+            border: sectionproperties.login_btn_borderwidth + 'px solid ' + sectionproperties.login_btn_bordercolor,
+            ':hover': {
+                background: sectionproperties.login_btn_backgroundonhover,
+                color: sectionproperties.login_btn_coloronhover,
+                borderColor: sectionproperties.login_btn_coloronhover,
+            },
+        }),
+        logininputLabel: css({
+            color: sectionproperties.form_labelcolor,
+            textTransform: sectionproperties.form_labeltexttransform,
+            fontWeight: sectionproperties.form_labelfontweight,
+            fontSize: sectionproperties.form_labelfontsize + 'px',
+            marginBottom: sectionproperties.inputfieldbordertype == 'All' ? 10 : 0,
+        }),
+        signupbtn: css({
+            background: sectionproperties.signup_btnbgcolortransparent == 'Transparent' ? 'transparent' : sectionproperties.signup_btnbgcolor,
+            width: sectionproperties.signup_btn_width + 'px',
+            height: sectionproperties.signup_btn_height + 'px',
+            borderRadius: sectionproperties.signup_btn_borderBottomLeftRadius + 'px',
+            color: sectionproperties.signup_btn_color,
+            fontSize: sectionproperties.signup_btn_fontSize + 'px',
+            fontWeight: sectionproperties.signup_btn_fontweight,
+            border: sectionproperties.signup_btn_borderwidth + 'px solid ' + sectionproperties.signupbtn_bordercolor,
+            transition: '.3s',
+            ':hover': {
+                color: sectionproperties.signup_btn_coloronhover,
+                borderColor: sectionproperties.signup_btn_coloronhover,
+                background: sectionproperties.signup_btnbgcoloroonhover,
+            },
+        }),
+        form_control: css({
+            position: 'relative',
+            display: 'flex',
+            alignItems: 'center',
+            display: 'block',
+            width: '100%',
+            height: '35px',
+            padding: '0 10px',
+            transition: '.3s',
+            fontWeight: 500,
+            border: sectionproperties.inputfieldbordertype == 'All' ? sectionproperties.inputfieldborderWidth + 'px solid ' + sectionproperties.inputfieldborderColor : 0,
+            borderBottom: sectionproperties.inputfieldborderWidth + 'px solid ' + sectionproperties.inputfieldborderColor,
+            borderRadius: sectionproperties.inputfieldborderradius + 'px',
+            height: sectionproperties.inputfieldheight + 'px',
+            background: sectionproperties.input_bgcolor,
+            color: sectionproperties.inputfieldcolor,
+            ':focus': {
+                borderColor: sectionproperties.inputfeildbordercoloronfocus,
+            },
+            ':focus .login_input_icon': {
+                color: sectionproperties.inputfeildbordercoloronfocus,
+            },
+        }),
+    };
+    const RightContainerContent = () => {
+        return (
+            <div className="row m-0 w-100">
+                <div className="col-lg-12 col-md-12 col-sm-12 d-flex align-items-center justify-content-center mb-md-2">
+                    <p
+                        className={` ${loginstyles.rightContainerText}`}
+                        style={{
+                            color: sectionproperties.formRightTextColor1,
+                            fontSize: sectionproperties.formRightTextFontSize1 + 'px',
+                            fontWeight: sectionproperties.formRightTextFontWeight1,
+                            marginBottom: sectionproperties.formRightTextMarginBottom1 + 'px',
+                        }}
+                    >
+                        {langdetect == 'en' ? sectionproperties.formRightText1 : sectionproperties.formRightText1_ar}
+                    </p>
+                </div>
+                <div className="col-lg-12 col-md-12 col-sm-12 d-flex align-items-center justify-content-center mb-md-2">
+                    <p
+                        className={` ${loginstyles.rightContainerText}`}
+                        style={{
+                            color: sectionproperties.formRightTextColor2,
+                            fontSize: sectionproperties.formRightTextFontSize2 + 'px',
+                            fontWeight: sectionproperties.formRightTextFontWeight2,
+                            marginBottom: sectionproperties.formRightTextMarginBottom2 + 'px',
+                        }}
+                    >
+                        {langdetect == 'en' ? sectionproperties.formRightText2 : sectionproperties.formRightText2_ar}
+                    </p>
+                </div>
+
+                <div className="col-lg-12 col-md-12 col-sm-12 d-flex align-items-center justify-content-center">
+                    <button
+                        className={`${loginstyles2.signupbtn} ` + '  pl-4 pr-4 '}
+                        onClick={() => {
+                            routingcountext(StaticPagesLinksContext.Signup);
+                        }}
+                    >
+                        {langdetect == 'en' ? sectionproperties.signupbtn_contenten : sectionproperties.signupbtn_contentar}
+                    </button>
+                </div>
+            </div>
+        );
+    };
+    const LoginContent = () => {
+        return (
+            <div class="row m-0 w-100">
+                {sectionproperties.length != 0 && (
+                    <div className={'row m-0 w-100 pl-5 pr-5 d-flex align-items-center justify-content-center pl-md-3 pr-md-3 p-sm-0'}>
+                        <div className="col-lg-12 col-md-12 col-sm-12 d-flex align-items-center justify-content-center">
+                            <p
+                                className="text-md-center"
+                                style={{
+                                    fontSize: sectionproperties.sectionTitleFontSize + 'px',
+                                    color: sectionproperties.sectionTitleColor,
+                                    marginTop: sectionproperties.sectionTitleMarginTop + 'px',
+                                    marginBottom: sectionproperties.sectionTitleMarginBottom + 'px',
+                                    marginLeft: sectionproperties.sectionTitleMarginLeft + 'px',
+                                    marginRight: sectionproperties.sectionTitleMarginRight + 'px',
+                                    textTransform: sectionproperties.sectionTitleTextTransform,
+                                    fontWeight: sectionproperties.sectionTitleFontWeight,
+                                }}
+                            >
+                                {langdetect == 'en' ? sectionproperties.sectionTitleContent : sectionproperties.sectionTitleContent_ar}
+                            </p>
+                        </div>
+                        <div className="col-lg-12 col-md-12 col-sm-12 p-sm-0 d-flex justify-content-center">
+                            <div className={' col-lg-10 col-md-12 col-sm-12 p-sm-0 '}>
+                                <div className=" row m-0 w-100 ">
+                                    <div
+                                        className={
+                                            sectionproperties.cardstyletype == 'Style 1'
+                                                ? `${loginstyles.leftcontainer}` + ' col-lg-6 col-md-12 col-sm-12 pt-4 pb-4 d-flex align-items-stretch p-0 '
+                                                : `${loginstyles.leftcontainer}` + ' col-lg-6 mx-auto col-md-12 col-sm-12 pt-4 pb-4 d-flex align-items-stretch p-0 '
+                                        }
+                                        style={{
+                                            background: sectionproperties.formLeftbgColor,
+                                            borderTopRightRadius: langdetect == 'en' ? sectionproperties.formLeft_bordertoprightradius + 'px' : sectionproperties.formLeft_bordertopleftradius + 'px',
+                                            borderTopLeftRadius: langdetect == 'en' ? sectionproperties.formLeft_bordertopleftradius + 'px' : sectionproperties.formLeft_bordertoprightradius + 'px',
+                                            borderBottomRightRadius:
+                                                langdetect == 'en' ? sectionproperties.formLeft_borderbottomrightadius + 'px' : sectionproperties.formLeft_borderbottomleftadius + 'px',
+                                            borderBottomLeftRadius:
+                                                langdetect == 'en' ? sectionproperties.formLeft_borderbottomleftadius + 'px' : sectionproperties.formLeft_borderbottomrightadius + 'px',
+                                        }}
+                                    >
+                                        <div class="row m-0 w-100">
+                                            <div class="col-lg-12 p-0">
+                                                <form class="row m-0 w-100 d-flex p-2 pl-sm-3 pr-sm-3">
+                                                    {/* <div className="row m-0 w-100 d-block "> */}
+                                                    <div className="col-lg-12 col-md-12 col-sm-12 mb-5 p-sm-0">
+                                                        <label className={`${loginstyles2.logininputLabel}` + ' d-flex justify-content-start '}>
+                                                            {langdetect == 'en' ? 'Email or Phone number' : 'البريد الإلكترونى او رقم الهاتف'}
+                                                        </label>
+                                                        <input
+                                                            type="text"
+                                                            className={`${loginstyles2.form_control}`}
+                                                            value={payloadobj.email}
+                                                            onChange={(event) => {
+                                                                var temppayloadobj = { ...payloadobj };
+                                                                temppayloadobj.email = event.target.value;
+                                                                setpayloadobj({ ...temppayloadobj });
+                                                            }}
+                                                            style={{
+                                                                background: 'transparent',
+                                                            }}
+                                                        />
+                                                        {/* <span
+                                                        className={langdetect == 'en' ? loginstyles.login_input_icon + ' login_input_icon ' : loginstyles.login_input_icontrans + ' login_input_icon '}
+                                                    >
+                                                        <i className="h-100 d-flex align-items-center justify-content-center">
+                                                            <AiOutlineUser size={18} />
+                                                        </i>
+                                                    </span> */}
+                                                    </div>
+                                                    <div className="col-lg-12 col-md-12 col-sm-12 p-sm-0">
+                                                        <label className={`${loginstyles2.logininputLabel}` + ' d-flex justify-content-start '}>{langdetect == 'en' ? 'Password' : 'كلمة السر'}</label>
+                                                        <div
+                                                            onClick={() => {
+                                                                setshowpassword(!showpassword);
+                                                            }}
+                                                            className={langdetect == 'en' ? loginstyles.showpassword_input_icon : loginstyles.showpassword_input_icontrans}
+                                                        >
+                                                            <i className="fa fa-eye h-100 d-flex align-items-center justify-content-center"></i>
+                                                        </div>
+                                                        <input
+                                                            className={`${loginstyles.form_control} ${loginstyles2.form_control}`}
+                                                            type={showpassword ? 'text' : 'password'}
+                                                            textplaceholder=""
+                                                            value={payloadobj.password}
+                                                            onChange={(event) => {
+                                                                var temppayloadobj = { ...payloadobj };
+                                                                temppayloadobj.password = event.target.value;
+                                                                setpayloadobj({ ...temppayloadobj });
+                                                            }}
+                                                            style={{
+                                                                background: 'transparent',
+                                                            }}
+                                                        />
+                                                    </div>
+                                                    <div
+                                                        className="col-lg-12 col-md-12 col-sm-12  mb-3 d-flex justify-content-end mt-1 cursor-pointer text-light text-lighthover font-13 "
+                                                        onClick={() => {
+                                                            setforgetpasswordmodal(true);
+                                                        }}
+                                                    >
+                                                        <p className={'m-0 p-0 '}>{langdetect == 'en' ? 'Forgot Password?' : 'هل نسيت كلمة السر؟'}</p>
+                                                    </div>
+                                                    <div className="col-lg-12 col-md-12 col-sm-12  d-flex justify-content-center font-13 mb-2">
+                                                        <p style={{ color: 'red' }} className="m-0 p-0">
+                                                            {statusreason}
+                                                        </p>
+                                                    </div>
+                                                    <div className="col-lg-12 col-md-12 col-sm-12 d-flex align-items-center justify-content-center mb-3 mt-4">
+                                                        <button
+                                                            className={` ${loginstyles2.loginbtn}` + ' d-flex align-items-center justify-content-center '}
+                                                            onClick={() => {
+                                                                if (payloadobj.email.length != 0 && payloadobj.password.length != 0) {
+                                                                    LoginMutation.mutate(payloadobj);
+                                                                }
+                                                            }}
+                                                            type={'button'}
+                                                            disabled={LoginMutation.isLoading == true ? true : false}
+                                                        >
+                                                            {!SocialLoginMutationContext.isLoading && (
+                                                                <>
+                                                                    {LoginMutation.isLoading && <CircularProgress color={sectionproperties.login_btn_color} width="20px" height="20px" duration="1s" />}
+
+                                                                    {!LoginMutation.isLoading && (
+                                                                        <span style={{ letterSpacing: langdetect == 'en' ? '1px' : '', textTransform: sectionproperties.login_btn_texttransform }}>
+                                                                            {lang.login}
+                                                                        </span>
+                                                                    )}
+                                                                </>
+                                                            )}
+                                                            {SocialLoginMutationContext.isLoading && <CircularProgress color="#fff" width="20px" height="20px" duration="1s" />}
+                                                        </button>
+                                                    </div>
+                                                    <div className="col-lg-12 col-md-12 col-sm-12 d-flex align-items-center justify-content-center mb-2">
+                                                        <FacebookLoginButton actions={actions} />
+                                                    </div>
+                                                    <div className="col-lg-12 col-md-12 col-sm-12 d-flex align-items-center justify-content-center">
+                                                        <GoogleLogin actions={actions} />
+                                                    </div>
+                                                    {/* </div> */}
+                                                </form>
+                                            </div>
+                                            {sectionproperties.cardstyletype == 'Style 2' && <div className={' col-lg-12 col-md-12 col-sm-12 allcentered p-0 '}>{RightContainerContent()}</div>}
+                                        </div>
+                                    </div>
+
+                                    {sectionproperties.cardstyletype == 'Style 1' && (
+                                        <div className={' col-lg-6 col-md-12 col-sm-12 d-flex align-items-stretch p-0 '}>
+                                            <div
+                                                className={`${loginstyles.rightContainer}` + ' p-2 row m-0 w-100 d-flex align-items-center justify-content-center pt-md-4 pb-md-4 '}
+                                                style={{
+                                                    background: sectionproperties.formRightbgColor,
+                                                    borderTopRightRadius:
+                                                        langdetect == 'en' ? sectionproperties.formRight_bordertoprightradius + 'px' : sectionproperties.formRight_bordertopleftradius + 'px',
+                                                    borderTopLeftRadius:
+                                                        langdetect == 'en' ? sectionproperties.formRight_bordertopleftradius + 'px' : sectionproperties.formRight_bordertoprightradius + 'px',
+                                                    borderBottomRightRadius:
+                                                        langdetect == 'en' ? sectionproperties.formRight_borderbottomrightadius + 'px' : sectionproperties.formRight_borderbottomleftadius + 'px',
+                                                    borderBottomLeftRadius:
+                                                        langdetect == 'en' ? sectionproperties.formRight_borderbottomleftadius + 'px' : sectionproperties.formRight_borderbottomrightadius + 'px',
+                                                }}
+                                            >
+                                                {RightContainerContent()}
+                                            </div>
+                                        </div>
+                                    )}
+                                </div>
+                            </div>
+                        </div>
+                        <form method="POST" action={'/surfer/login'} className="" id={'loginform'} style={{ display: 'none' }}>
+                            <input type="hidden" name="email" value={payloadobj.email} />
+                            <input type="hidden" name="password" value={payloadobj.password} />
+                        </form>
+                    </div>
+                )}
+            </div>
+        );
+    };
+    return (
+        <div
+            className="col-lg-12 d-flex align-items-center justify-content-center pt-md-3 pb-5"
+            style={{
+                background: sectionproperties.backgroundColor,
+                marginBottom: sectionproperties.marginBottom + 'px',
+            }}
+        >
+            <div
+                class="row ml-0 mr-0 w-100 d-flex d-md-none"
+                style={{
+                    marginTop: sectionproperties.marginTop + 'px',
+                }}
+            >
+                {LoginContent()}
+            </div>
+            <div
+                class="row ml-0 mr-0 w-100 d-none d-md-flex"
+                style={{
+                    marginTop: sectionproperties.marginTopResp + 'px',
+                }}
+            >
+                {LoginContent()}
+            </div>
+            <Modal show={forgetpasswordmodal} onHide={() => setforgetpasswordmodal(false)} centered size={'md'}>
+                <Modal.Body>
+                    <div
+                        class="d-flex align-items-center justify-content-center bgdanger-hover"
+                        style={{ position: 'absolute', right: -15, top: -15, width: '4vh', height: '4vh', background: '#000', borderRadius: '50%' }}
+                        onClick={() => setforgetpasswordmodal(false)}
+                    >
+                        <IoMdClose size={15} color="white" />
+                    </div>
+                    <div class="row m-0 w-100 allcentered">
+                        <div className="col-lg-12 col-md-12 col-sm-12 d-flex align-items-center mt-2 justify-content-center">
+                            <p
+                                className="text-md-center m-0 p-0 mb-2"
+                                style={{
+                                    fontSize: '19px',
+                                    color: sectionproperties.sectionTitleColor,
+                                    fontWeight: 600,
+                                }}
+                            >
+                                {langdetect == 'en' ? 'Reset Password' : 'إعادة تعيين كلمة المرور'}
+                            </p>
+                        </div>
+                        <div class="col-lg-12 p-0">
+                            <hr class={'m-0 p-0'} />
+                        </div>
+                    </div>
+                    <div class="row w-100 m-0 mb-3 pl-2 pr-2 pt-3 pb-3 pl-sm-3 pr-sm-3">
+                        <div className="col-lg-12 col-md-12 col-sm-12 mb-2 p-sm-0">
+                            <label className={`${loginstyles2.logininputLabel}` + ' d-flex justify-content-start '}>{langdetect == 'en' ? 'E-mail' : 'البريد الإلكترونى'}</label>
+                            <input
+                                type="text"
+                                className={`${loginstyles2.form_control}`}
+                                value={forgotpasswordpayload.email}
+                                onChange={(event) => {
+                                    var temppayloadobj = { ...forgotpasswordpayload };
+                                    temppayloadobj.email = event.target.value;
+                                    setforgotpasswordpayload({ ...temppayloadobj });
+                                }}
+                                disabled={forgetpasswordstage == 'verify' ? true : false}
+                                style={{
+                                    background: 'transparent',
+                                }}
+                            />
+                        </div>
+                        {forgetpasswordstage == 'verify' && (
+                            <>
+                                <div className="col-lg-12 col-md-12 col-sm-12 mb-3 mt-3 p-sm-0">
+                                    <label className={`${loginstyles2.logininputLabel}` + ' d-flex justify-content-start '}>{langdetect == 'en' ? 'Code' : ' كود البريد الاكتروني'}</label>
+                                    <input
+                                        type="text"
+                                        className={`${loginstyles2.form_control}`}
+                                        value={forgotpasswordpayload.code}
+                                        onChange={(event) => {
+                                            var temppayloadobj = { ...forgotpasswordpayload };
+                                            temppayloadobj.code = event.target.value;
+                                            setforgotpasswordpayload({ ...temppayloadobj });
+                                        }}
+                                        style={{
+                                            background: 'transparent',
+                                        }}
+                                    />
+                                </div>
+                                <div className="col-lg-12 col-md-12 col-sm-12 mb-3 p-sm-0">
+                                    <label className={`${loginstyles2.logininputLabel}` + ' d-flex justify-content-start '}>{lang.password}</label>
+                                    <input
+                                        type="password"
+                                        className={`${loginstyles2.form_control}`}
+                                        value={forgotpasswordpayload.newpassword}
+                                        onChange={(event) => {
+                                            var temppayloadobj = { ...forgotpasswordpayload };
+                                            temppayloadobj.newpassword = event.target.value;
+                                            setforgotpasswordpayload({ ...temppayloadobj });
+                                        }}
+                                        style={{
+                                            background: 'transparent',
+                                        }}
+                                    />
+                                </div>
+                                <div className="col-lg-12 col-md-12 col-sm-12 mb-2 p-sm-0">
+                                    <label className={`${loginstyles2.logininputLabel}` + ' d-flex justify-content-start '}>{lang.confirmpassword}</label>
+                                    <input
+                                        type="password"
+                                        className={`${loginstyles2.form_control}`}
+                                        value={forgotpasswordpayload.confirmnewpassword}
+                                        onChange={(event) => {
+                                            var temppayloadobj = { ...forgotpasswordpayload };
+                                            temppayloadobj.confirmnewpassword = event.target.value;
+                                            setforgotpasswordpayload({ ...temppayloadobj });
+                                        }}
+                                        style={{
+                                            background: 'transparent',
+                                        }}
+                                    />
+                                </div>
+                            </>
+                        )}
+                    </div>
+                </Modal.Body>
+                <Modal.Footer>
+                    <div className="col-lg-12 col-md-12 col-sm-12 d-flex align-items-center justify-content-center mb-3 ">
+                        <button
+                            className={` ${loginstyles2.loginbtn}` + ' d-flex align-items-center justify-content-center '}
+                            onClick={() => {
+                                if (forgotpasswordpayload.email.length != 0) {
+                                    var runfunc = false;
+                                    var tempforgotpasswordpayload = { ...forgotpasswordpayload };
+                                    tempforgotpasswordpayload.functype = forgetpasswordstage;
+                                    if (forgetpasswordstage == 'verify') {
+                                        if (tempforgotpasswordpayload.newpassword.length != 0 && tempforgotpasswordpayload.code.length != 0) {
+                                            if (tempforgotpasswordpayload.newpassword == tempforgotpasswordpayload.confirmnewpassword) {
+                                                runfunc = true;
+                                            } else {
+                                                NotificationManager.warning('', 'Passwords do not match');
+                                            }
+                                        } else {
+                                            NotificationManager.warning('', 'Please complete the missing fields');
+                                        }
+                                    } else {
+                                        runfunc = true;
+                                    }
+                                    if (runfunc) {
+                                        ForgetpasswordMutationContext.mutate(tempforgotpasswordpayload);
+                                    }
+                                } else {
+                                    NotificationManager.warning('', 'Please write your email');
+                                }
+                            }}
+                            type={'button'}
+                            disabled={ForgetpasswordMutationContext.isLoading == true ? true : false}
+                            style={{ width: '230px' }}
+                        >
+                            {ForgetpasswordMutationContext.isLoading && <CircularProgress color="#fff" width="20px" height="20px" duration="1s" />}
+                            {!ForgetpasswordMutationContext.isLoading && (
+                                <span style={{ letterSpacing: langdetect == 'en' ? '1px' : '', textTransform: sectionproperties.login_btn_texttransform }}>
+                                    {forgetpasswordstage == 'verify'
+                                        ? langdetect == 'en'
+                                            ? 'Reset password'
+                                            : 'إعادة تعيين كلمة المرور'
+                                        : langdetect == 'en'
+                                        ? 'Send verification code'
+                                        : 'أرسل رمز التحقق'}
+                                </span>
+                            )}
+                        </button>
+                    </div>
+                </Modal.Footer>
+            </Modal>
+        </div>
+    );
+};
+export default Login;