tabexseriescomponents 0.0.706 → 0.0.708

package/srcoman/TabexComponents/StaticPages/Resetpassword/Resetpassword.jsx

@@ -0,0 +1,338 @@
+import React, { useEffect, useState, useContext } from 'react';
+import { CircularProgress } from 'react-cssfx-loading';
+import { css } from 'glamor';
+
+const Resetpassword = (props) => {
+    const StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
+    const lang = props.actions.lang;
+    const templatepropcontext = props.actions.templatepropcontext;
+    const langdetect = props.actions.langdetect;
+    const ForgetpasswordMutationContext = props.actions.ForgetpasswordMutationContext;
+    const NotificationManager = props.actions.NotificationManager;
+    const instapikey = props.actions.instapikey;
+    const [forgotpasswordpayload, setforgotpasswordpayload] = useState({
+        instapikey: instapikey,
+        email: '',
+        code: '',
+        newpassword: '',
+        confirmnewpassword: '',
+    });
+    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 == '65073ffd6239d');
+        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');
+                    window.open(window.location.origin + '/login', '_self');
+                }
+            }
+        }
+    }, [ForgetpasswordMutationContext.isSuccess]);
+
+    const loginstyles2 = {
+        loginbtn: css({
+            background: sectionproperties.generalbtn_bgColor,
+            color: sectionproperties.login_btn_color,
+            borderRadius: sectionproperties.generalbtnborderradius + 'px',
+            fontSize: sectionproperties.generalbtn_fontsize + 'px',
+            width: sectionproperties.generalbtn_width == 0 ? '100%' : sectionproperties.generalbtn_width + 'px',
+            height: sectionproperties.generalbtn_height + 'px',
+            fontWeight: sectionproperties.generalbtn_fontweight,
+            border: sectionproperties.generalbtn_borderwidth + 'px solid ' + sectionproperties.generalbtn_bordercolor,
+            color: sectionproperties.generalbtn_textColor,
+            transition: '.3s',
+            ':hover': {
+                background: sectionproperties.generalbtn_bgColoronhover,
+                color: sectionproperties.generalbtn_textColoronhover,
+                borderColor: sectionproperties.generalbtn_textColoronhover,
+            },
+        }),
+        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,
+        }),
+        forgetpwsignuptextstyles: css({
+            color: sectionproperties.signup_btn_color,
+            fontSize: sectionproperties.signup_btn_fontSize + 'px',
+            fontWeight: sectionproperties.signup_btn_fontweight,
+            transition: '.3s',
+            ':hover': {
+                cursor: 'pointer',
+                color: sectionproperties.signup_btn_coloronhover,
+            },
+        }),
+        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 LoginContent = () => {
+        return (
+            <div class="col-lg-12 p-0">
+                <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 d-flex align-items-center justify-content-center">
+                                <p
+                                    className="text-md-center"
+                                    style={{
+                                        fontSize: sectionproperties.prodCatFontSize + 'px',
+                                        color: sectionproperties.prodCatColor,
+                                        marginBottom: sectionproperties.descriptionMarginBottom + 'px',
+                                        fontWeight: sectionproperties.prodCatFontWeight,
+                                    }}
+                                >
+                                    {langdetect == 'en' ? sectionproperties.descriptionContentEn : sectionproperties.descriptionContentAr}
+                                </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={' 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">
+                                                    <div class="row m-0 w-100 d-flex p-2 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}` + ' text-transform-none 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: sectionproperties.input_bgcolor,
+                                                                }}
+                                                            />
+                                                        </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: sectionproperties.input_bgcolor,
+                                                                        }}
+                                                                    />
+                                                                </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: sectionproperties.input_bgcolor,
+                                                                        }}
+                                                                    />
+                                                                </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: sectionproperties.input_bgcolor,
+                                                                        }}
+                                                                    />
+                                                                </div>
+                                                            </>
+                                                        )}
+                                                        <div className="col-lg-12 col-md-12 col-sm-12 d-flex align-items-center justify-content-center mb-3 mt-4 p-sm-0">
+                                                            <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}
+                                                            >
+                                                                {ForgetpasswordMutationContext.isLoading && (
+                                                                    <CircularProgress color={sectionproperties.generalbtn_textColor} width="20px" height="20px" duration="1s" />
+                                                                )}
+                                                                {!ForgetpasswordMutationContext.isLoading && (
+                                                                    <span>
+                                                                        {forgetpasswordstage == 'verify'
+                                                                            ? langdetect == 'en'
+                                                                                ? 'Reset password'
+                                                                                : 'إعادة تعيين كلمة المرور'
+                                                                            : langdetect == 'en'
+                                                                            ? 'Send verification code'
+                                                                            : 'أرسل رمز التحقق'}
+                                                                    </span>
+                                                                )}
+                                                            </button>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                </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',
+                    minHeight: '70vh',
+                }}
+            >
+                {LoginContent()}
+            </div>
+            <div
+                class="row ml-0 mr-0 w-100 d-none d-md-flex"
+                style={{
+                    marginTop: sectionproperties.marginTopResp + 'px',
+                    minHeight: '70vh',
+                }}
+            >
+                {LoginContent()}
+            </div>
+        </div>
+    );
+};
+export default Resetpassword;