import React, { useState, useEffect } from "react";
import { Helmet } from "react-helmet";
import { useForm } from "react-hook-form";
import { useHistory } from "react-router-dom";
import { Button, FormGroup, Label, Input } from "reactstrap";


import { useCookies } from "react-cookie";
import { confirmAlert } from 'react-confirm-alert'; // Import
import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css

import 'reactjs-popup/dist/index.css';
import axios from "axios";
import { useParams } from 'react-router-dom'


import { useLocation } from "react-router-dom";
import Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff';
import 'react-tooltip/dist/react-tooltip.css'

import TextField from '@mui/material/TextField';

import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';

import { makeStyles } from "@material-ui/core/styles";
import Paper from '@material-ui/core/Paper';
import Draggable from 'react-draggable';
import { IconButton } from '@material-ui/core';
import CancelPresentationIcon from '@mui/icons-material/CancelPresentation';

import Module_Alert_Confirmation from "./Module_Alert_Confirmation";

import Sign_In_Logo_MySy_SVG from '../img_new_design_2025/Logo_MySy.svg';
import Sign_In_Line_Arrow_Left_SVG from '../img_new_design_2025/line-arrow-left.svg';


function PaperComponent(props) {
    return (
        <Draggable
            handle="#draggable-dialog-title"
            cancel={'[class*="MuiDialogContent-root"]'}
        >
            <Paper {...props} />
        </Draggable>
    );
}


const useStyles = makeStyles((theme) => ({

    dialog: {
        position: 'absolute',
        // left: 10,
        top: 400
    },

    paper: {
        overflowY: 'unset',
    },
    customizedButton: {
        position: 'absolute',
        left: '98%',
        top: '-3%',
        backgroundColor: 'lightgray',
        color: 'gray',
    },
}));


function New_C_Sign_In_2025() {

    const classes = useStyles();
    const [isconnected, setisconnected] = useState("");
    const [cookie_acces_right, setCookie_acces_right, removeCookie_acces_right] = useCookies(['mysy_user_access_right']);
    const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych'], { path: '/' });
    const [cookie_part, setCookie_part, removeCookie_part] = useCookies(['tokenmysypart'], { path: '/' });
    const [retval, setretval] = useState("0");
    const [myApimyApiMessage, setmyApimyApiMessage] = useState("");
    const [initpasswd, setinitpasswd] = useState();
    const [result, setResult] = useState("");
    const [myApiResponse, setmyApiResponse] = useState("false");
    const url_login = process.env.REACT_APP_API_URL + "myclass/api/login/";

    const random1 = Math.floor(Math.random() * 10);
    const random2 = Math.floor(Math.random() * 10);

    const [closepopup, setclosepopup] = useState(0);
    const { obj, objid } = useParams();
    const [menucompte, setmenucompte] = useState("partner");
    const [currentpawdvisible, setcurrentpawdvisible] = useState(false);
    const [typecompte, settypecompte] = useState("partner");

    const {
        register,
        formState: { errors },
        handleSubmit,
    } = useForm();


    const history = useHistory();

    function logout_partner_confirmation() {
        removeCookie_part('tokenmysypart', { path: '/' });
    }

    function retnull() {
        setretval("-1");
    }

    function Logout_Partenaire() {
        confirmAlert({
            title: '',
            message: 'Confirmez la deconnexion compte PRO',
            buttons: [
                {
                    label: 'Oui',
                    onClick: () => logout_partner_confirmation()
                },

            ]
        });
    }


    function logout_user_confirmation() {
        removeCookie_part('tokenmysych', { path: '/' });
    }

    function Logout_User() {
        confirmAlert({
            title: 'Deconnexion utilisateur ?',
            message: 'Confirmez la deconnexion utilisateur',
            buttons: [
                {
                    label: 'Oui',
                    onClick: () => logout_user_confirmation()
                },
                /* {
                   label: 'Non',
                   onClick: () => retnull()
         
                 }*/
            ]
        });
    }


    const onSubmit = async (data) => {

        //console.log(" CONNEXION DE = ",menucompte);
        var partner_connexion = "";
        var url_login = "";

        if (String(menucompte) === "partner") {
            url_login = process.env.REACT_APP_API_URL + "myclass/api/partner_login/";
            setmenucompte("partner");
            partner_connexion = "partner";
        }
        else if (String(menucompte) === "user") {
            url_login = process.env.REACT_APP_API_URL + "myclass/api/login/";
            setmenucompte("user");
            partner_connexion = "user";

        }

        //  console.log( " ### full url_login = ", url_login)

        // Gestion des Cookies
        const stored_partner = cookie_part.tokenmysypart;
        const stored_user = cookie.tokenmysych;

        const formData = new FormData();
        var mymail = document.getElementsByName("email")[0].value;


        var mypwd = login_pwd; //document.getElementsByName("pwd")[0].value;

        formData.append("email", mymail);
        formData.append("pwd", mypwd);

        var re = /\S+@\S+\.\S+/;
        if (re.test(mymail) === false) {
            // alert("l'adresse email est incorrecte");
            setdisplay_alert_mysy("1");
            setalert_message("L'adresse email est incorrecte");
            setalert_type("error");
            return;
        }

        if (mypwd.length <= 0) {
            // alert("Vous n'avez pas saisi de mot de passe");
            setdisplay_alert_mysy("1");
            setalert_message("Vous n'avez pas saisi de mot de passe");
            setalert_type("error");
            return;
        }


        // si c'est une connexion partner qui est active
        if (typeof (stored_partner) != "undefined" && String(stored_partner) !== String('')) {
            //alert(" c'est une connexion PARTTT  qui est active");
            Logout_Partenaire();

        }

        // si c'est une connexion user qui est active
        if (typeof (stored_user) != "undefined" && String(stored_user) !== String('')) {
            //alert(" c'est une connexion USERR  qui est active");
            Logout_User();
        }


        fetch(
            url_login,
            {
                method: 'POST',
                body: formData,
            }
        ).then((response) => response.json())
            .then((result) => {
                //console.log('Success:', result['message'], "result['status'] = ", result['status']);

                var val = result['status'];

                if (String(val) === String("true")) {

                    if (String(partner_connexion) === String("partner")) {

                        // recuperation et stockage des cookies sur les droit d'acces
                        setCookie("tokenmysypart", JSON.parse(result['message']).token, { path: '/' });

                        var acces_right_token_name = String(JSON.parse(result['message']).token) + "_uar";
                        var acces_right_token_val = JSON.parse(result['message']).user_access_right;


                        setCookie_acces_right(acces_right_token_name, acces_right_token_val, { path: '/' });

                        // recuperation et stockage des cookie sur les paramettres de connexion
                        var returned_connexion_data = JSON.parse(result['message'])
                        if (returned_connexion_data.list_connexion_context) {

                            const new_data = returned_connexion_data.list_connexion_context.map((x) => {
                                // recuperation et stockage des cookies sur les droit d'acces
                                if (x['code'] && x['code_value']) {
                                    setCookie(String(x['code']), String(x['code_value']), { path: '/' });
                                }

                            });
                        }

                        //setCookie("tokenmysypart", result['message']);
                        history.push("/Partner");

                    }

                    else if (String(partner_connexion) === String("user")) {
                        setCookie("tokenmysych", result['message']);



                        // Verification vers quelle page les renvoyer
                        if (obj === "training" && String(objid).length > 0) {
                            // redirection vers l'affichage d'une formation
                            history.push("/Display-Detail-formation/" + objid);
                        }
                        else {
                            // Redirection par defaut vers la compte utilisateur 
                            history.push({
                                pathname: "/mysy-user-account",
                                state: {
                                    firstconnexion: String(result['firstconnexion'])
                                }
                            });


                        }
                    }
                }
                else {
                    setisconnected("false");
                    // setmyApimyApiMessage(result['message']);
                    setdisplay_alert_mysy("1");
                    setalert_message(result['message']);
                    setalert_type("error");
                }
            })
            .catch((error) => {
                console.error('Error:', error);
                setisconnected("false");
                //setmyApimyApiMessage("Le service est momentanément indisponible, merci de ressayer plus tard. ");
                setdisplay_alert_mysy("1");
                setalert_message("Le service est momentanément indisponible, merci de ressayer plus tard.");
                setalert_type("error");

            });
    }

    const location = useLocation();

    useEffect(() => {
        setmenucompte("partner");

        const listener = event => {
            if (event.code === "Enter" || event.code === "NumpadEnter") {

                event.preventDefault();

                onSubmit();
            }
        };
        document.addEventListener("keydown", listener);

        if (String(menucompte) === String("user")) {
            menu_user_account();
        }
        else {
            menu_parter_account();
        }

        if (location && location.state && location.state.mysy_arg && String(location.state.mysy_arg) === "partner") {
            menu_parter_account();
        }


    }, []);



    function menu_parter_account() {
        //alert(" menu_parter_account  =  "+String(menucompte));
        setmenucompte("partner");

        if (document.getElementsByName("partner_account") && document.getElementsByName("partner_account")[0])
            document.getElementsByName("partner_account")[0].style.backgroundColor = "#81BC3A";

        if (document.getElementsByName("user_account") && document.getElementsByName("user_account")[0])
            document.getElementsByName("user_account")[0].style.backgroundColor = "#ffffff";


    }

    function menu_user_account() {

        setmenucompte("user");

        if (document.getElementsByName("user_account") && document.getElementsByName("user_account")[0])
            document.getElementsByName("user_account")[0].style.backgroundColor = "#81BC3A";

        if (document.getElementsByName("partner_account") && document.getElementsByName("partner_account")[0])
            document.getElementsByName("partner_account")[0].style.backgroundColor = "#ffffff";
    }


    function resetpasswd_ok(e) {

        // Controle du mail
        var mymail = reset_login_email;
        //alert(" le mail de reset  = "+mymail);
        var re = /\S+@\S+\.\S+/;
        if (re.test(mymail) === false) {
            //  alert("l'adresse email est incorrecte");
            document.getElementsByName("zoneemail")[0].style.border = "1px solid red";
            var txt = "L'adresse email est incorrecte"

            setdisplay_alert_mysy("1");
            setalert_message(txt);
            setalert_type("error");

            return;
        }


        var total = " ?? ";
        if (document.getElementsByName("sommerandom")[0].value) {
            total = document.getElementsByName("sommerandom")[0].value;
        }

        var calcul_total = parseInt(random1) + parseInt(random2);

        //  console.log("### total = ", total);

        if (parseInt(total) != parseInt(calcul_total)) {
            document.getElementsByName("pasrobot")[0].style.border = "1px solid red";

            // alert(" Le total dans la zone 'je ne suis pas un robot' est incohérent. Recommencez svp :) !!!");

            var txt = "Le total dans la zone 'je ne suis pas un robot' est incohérent. Recommencez svp :) !!!"
            //  alert(res.data.message);
            setdisplay_alert_mysy("1");
            setalert_message(txt);
            setalert_type("error");

            return;
        }



        var form = new FormData();

        form.append("email", mymail);
        form.append("account_type", typecompte);


        var myurl = process.env.REACT_APP_API_URL + "myclass/api/InitUserPasswd/";

        //alert("myurl = "+myurl);
        axios.post(myurl, form).then(res => {
            setclosepopup(1);
            setinitpasswd("true");
            if (String(res.data.status) != String("false")) {
                setmyApiResponse("true");
                setResult(res.data.message);
                // alert(res.data.message);
                setdisplay_alert_mysy("1");
                setalert_message(res.data.message);
                setalert_type("success");
                Dialog_reset_pwd_open_handleClose();

            }
            else {

                setmyApiResponse("false");
                setResult(res.data.message);
                //  alert(res.data.message);
                setdisplay_alert_mysy("1");
                setalert_message(res.data.message);
                setalert_type("error");

            }


        }).catch((error) => {
            console.warn('Not good man :( mysearchtext = ', error);
            setmyApiResponse("false");
            setinitpasswd("false");
            //setmyApimyApiMessage("")

            //  alert(res.data.message);
            var txt = " Impossible de prendre en compte la demande de réinitialisation"
            setdisplay_alert_mysy("1");
            setalert_message(txt);
            setalert_type("error");

        })


    }

    function resetpasswd(e) {
        confirmAlert({
            title: 'Reinitialisation Mot de Passe?',
            message: 'Confirmez la reinitialisation',
            buttons: [
                {
                    label: 'Oui',
                    onClick: () => resetpasswd_ok()
                },
                {
                    label: 'Non',
                    onClick: () => { return }

                },

            ],
            closeOnEscape: false,
            closeOnClickOutside: false,
            keyCodeForClose: [8, 32],
            willUnmount: () => { },
            afterClose: () => { },
            onClickOutside: () => { },
            onKeypress: () => { },
            onKeypressEscape: () => { },
        });

    }
    const [PartnerMenu, setPartnerMenu] = React.useState(null);
    const [AccountMenu, setAccountMenu] = React.useState(null);



    // Cette fonction permet de cacher le mot de passer et eviter les 
    // autocompletion
    const [realpwdvalue, setrealpwdvalue] = useState("");
    const [realpwdhidenvalue, setrealpwdhidenvalue] = useState("");
    function realpwd(e) {
        const val = e.target.value;
        const last = val.charAt(val.length - 1);
        var new_val = realpwdvalue;
        var new_val_hiden = realpwdhidenvalue;

        //alert(" new_val avant saisie= "+new_val);
        new_val = new_val + last;
        new_val_hiden = new_val_hiden + "*";

        //alert("  - new_val apres sisie = "+new_val+"  new_val_hiden = "+new_val_hiden);
        setrealpwdhidenvalue(new_val_hiden);
        setrealpwdvalue(new_val);

        //setrealpwdvalue(val);
        //document.getElementById("cle_secrete").value = new_val_hiden;

    }

    /*  function displayvlaue(){
          alert(" la valeur secrete = "+realpwdvalue);
      }*/


    const handleClickShowPassword_desktop = () => {
        if (currentpawdvisible == false) {
            document.getElementsByName("pwd_desktop")[0].type = "text";
            setcurrentpawdvisible(true);
           
        }
        else if (currentpawdvisible == true) {
            document.getElementsByName("pwd_desktop")[0].type = "password";
            setcurrentpawdvisible(false);
           
        }
    };

    const handleClickShowPassword_mobile = () => {
        if (currentpawdvisible == false) {
            document.getElementsByName("pwd_mobile")[0].type = "text";
            setcurrentpawdvisible(true);
           
        }
        else if (currentpawdvisible == true) {
            document.getElementsByName("pwd_mobile")[0].type = "password";
            setcurrentpawdvisible(false);
           
        }
    };

    const [login_email, setlogin_email] = useState("");
    const [login_pwd, setlogin_pwd] = useState("");


    const [reset_login_email, setreset_login_email] = useState("");
    const [reset_somme_random, setreset_somme_random] = useState("");

    const [Dialog_reset_pwd_open, setDialog_reset_pwd_open] = React.useState(false);
    const Dialog_reset_pwd_open_handleClose = () => {

        setDialog_reset_pwd_open(false)
        setreset_login_email("");

    };


    const [display_alert_mysy, setdisplay_alert_mysy] = useState("");
    const [alert_message, setalert_message] = useState("");
    const [alert_type, setalert_type] = useState("");

    function clear_alert_message() {
        setalert_message("");
    }
    function clear_alert_type() {
        setalert_type("");
    }

    function clear_display_alert_mysy() {
        setdisplay_alert_mysy("");
    }


    return (
        <div className="new_s_sign_in_2025">

            {/***  Affichage des messages d'alerte*/}
            {display_alert_mysy && String(display_alert_mysy) === "1" &&
                <Module_Alert_Confirmation alert_message={alert_message}
                    alert_type={alert_type}
                    clear_alert_message={clear_alert_message}
                    clear_alert_type={clear_alert_type}
                    clear_display_alert_mysy={clear_display_alert_mysy}
                />
            }
            {/*** FIN Affichage des messages d'alerte*/}

            {/***   GESTION RESET PWD */}
            <Dialog
                open={Dialog_reset_pwd_open}
                className="displaypartnersession"

                static
                onClose={() => null}

                PaperProps={{


                    className: classes.paper, // Apply the paper style
                    style: {
                        overflowY: 'unset',
                        position: 'absolute',
                        top: '5rem',
                        margin: "2px",
                    },
                }}
                hideBackdrop={true}
                disableScrollLock
                classes={{
                    paper: classes.dialog
                }}

                PaperComponent={PaperComponent}
                aria-labelledby="draggable-dialog-title"

            >
                <DialogTitle style={{ cursor: 'move', fontWeight: '700', fontFamily: "DM Sans-Bold, Helvetica" }} id="draggable-dialog-title" > &nbsp; Réinitialiser votre mot de passe </DialogTitle>

                <DialogContent className="DialogContent_width" >


                    <div className="session_caract_Dialog" name="zoneemail"> <b> Votre email </b>
                        <TextField
                            autoFocus
                            margin="dense"
                            id="new_login"

                            fullWidth
                            //variant="standard"
                            onChange={(e) => {
                                setreset_login_email(e.target.value);
                            }
                            }
                            placeholder="Votre email"
                        />



                    </div>


                    <div className="session_caract_Dialog" name="pasrobot" > <b>Je ne suis un robot</b>  :  {random1} + {random2} =
                        <TextField
                            // autoFocus
                            margin="dense"
                            id="sommerandom"
                            name="sommerandom"
                            fullWidth
                            //variant="standard"

                            /* onChange={(e) => {
                                 setreset_somme_random(e.target.value);
                             }
                             }*/
                            placeholder="Calculez la sommes des valeurs"

                        />


                    </div>


                </DialogContent>

                <DialogActions>

                    <IconButton
                        //  autoFocus
                        onClick={Dialog_reset_pwd_open_handleClose}
                        color="primary"
                        className={classes.customizedButton}
                    >
                        <CancelPresentationIcon />
                    </IconButton>


                    <Button color="success" onClick={resetpasswd_ok}>
                        Envoyer
                    </Button>

                    <Button outline onClick={Dialog_reset_pwd_open_handleClose}>
                        Annuler
                    </Button>



                </DialogActions>


            </Dialog>
            {/***  FIN GESTION RESET PWD */}


            <Helmet>
                <title>Connexion</title>
                <meta name="description" content="Éditeur Français de logiciels pour organisme de formation. Avec solutions de E-Learning, gestion administrative et gestion relation client nous accompagnons les organismes de formation à réaliser l’audit QUALIOPI en toute sérénité. Nous sommes les moins cher du marché. Nous vous accompagnons automatiser vos process : inscription, évaluation, émargement (qr-code), Check-list QUALIOPI, Personnalisation et édition documents, Gestion formateurs, Catalogue formations personnalisé" />
                <meta name="robots" content="index,follow" />
                <meta name="title" content="Création compte MySy Trainig Technology" />
                <link rel="canonical" href={window.location.href} />
            </Helmet>

            <div className="log-in-page-mobile">
                <div className="div">
                    <div className="sign-in">
                        <div className="sign-in-content">
                            <div className="text">
                                <div className="text-wrapper">Connectez-vous</div>

                            </div>
                            <div className="info">
                                <div className="inputs">

                                    <div className="input"><div className="text-wrapper-2">
                                        <TextField
                                            required
                                            name="email"
                                            InputLabelProps={{
                                                shrink: true,
                                            }}
                                            disabled={false}
                                            fullWidth
                                            placeholder="Votre email"
                                            InputProps={{
                                                style: {

                                                },
                                                disableUnderline: true,
                                            }}

                                            variant="standard"

                                            value={login_email}
                                            onChange={(event) => {
                                                setlogin_email(event.target.value);

                                            }}

                                        />
                                    </div></div>
                                    <div className="input"><div className="text-wrapper-2">
                                        <TextField
                                            required
                                            type="password"
                                            autoComplete="current-password"
                                            name="pwd_mobile"
                                            InputLabelProps={{
                                                shrink: true,
                                            }}
                                            disabled={false}
                                            fullWidth
                                            placeholder="Mot de passe"
                                            InputProps={{
                                                style: {

                                                },
                                                disableUnderline: true,
                                            }}

                                            variant="standard"

                                            value={login_pwd}
                                            onChange={(event) => {
                                                setlogin_pwd(event.target.value);

                                            }}

                                        />
                                    </div>
                                    </div>
                                    <div style={{
                                        "textAlign": "right",
                                        width: "100%",
                                        paddingRight: '10px'
                                    }} >
                                        <nav style={{
                                            width: "10%",
                                            float: "right"
                                        }}
                                            onClick={handleClickShowPassword_mobile}>
                                            {currentpawdvisible ? <Visibility style={{ fontSize: '15px' }} /> : <VisibilityOff style={{ fontSize: '15px' }} />}
                                        </nav>
                                    </div>

                                </div>
                                <footer className="footer">
                                    <div style={{
                                        "textAlign": "right",
                                        width: "100%",
                                        paddingRight: '10px'
                                    }} >
                                        <nav style={{
                                            float: "right"
                                        }}
                                            onClick={(e) => {
                                                setDialog_reset_pwd_open(true);
                                            }}>
                                            <p className="text-wrapper-5_v2">Mot de passe oublié ?</p>
                                        </nav>
                                    </div>


                                </footer>


                            </div>
                        </div>
                        <div className="log-in">
                            <div className="button-text" onClick={onSubmit}>
                                <div className="div-wrapper"><div className="text-2">Se connecter</div></div>
                            </div>
                            <div className="create-account">
                                <p className="text-wrapper-4">Vous n'avez pas de compte ?</p>
                                <div className="text-wrapper-5" style={{ cursor: 'pointer' }} onClick={(e) => {
                                    history.push("/signup");
                                }}>Créez un compte</div>
                            </div>
                        </div>
                    </div>
                    <div className="logo-mysy">
                        <div className="logo-mysy-2">
                            <div className="overlap">
                                <img className="vector" />
                                <img className="img" />
                                <img className="vector-2" />
                            </div>
                            <div className="overlap-group">
                                <img src={Sign_In_Logo_MySy_SVG} />
                            </div>
                        </div>
                        <div className="text-wrapper-6">TRAINING</div>
                    </div>
                    <div className="back">
                        <img className="line-arrow-left" src={Sign_In_Line_Arrow_Left_SVG} />
                        <div className="text-wrapper-7" style={{ cursor: 'pointer' }} onClick={(e) => {
                            history.push("/");
                        }}>Retour à l'accueil</div>
                    </div>
                    <div className="status-bar-mini">
                        <div className="status-mini">
                            &nbsp;

                        </div>

                    </div>
                    <div className="URL-bar-scroll-mini">
                        <div className="home"></div>
                        <div className="domain">
                            <img className="trust" src="img/trust.svg" />
                            <div className="domain-2">{window.location.host} </div>
                        </div>
                    </div>
                </div>
            </div>

            <div className="log-in-page-desktop">
                <div className="div">
                    <div className="back">
                        <img className="line-arrow-left" src={Sign_In_Line_Arrow_Left_SVG} />
                        <div className="text-wrapper" style={{ cursor: 'pointer' }} onClick={(e) => {
                            history.push("/");
                        }}>Retour à l'accueil</div>
                    </div>
                    <div className="sign-in">
                        <div className="sign-in-content">
                            <div className="text">
                                <div className="text-wrapper-2">Connectez-vous</div>
                            </div>
                            <div className="info">
                                <div className="inputs">
                                    <div className="input"><div className="text-wrapper-3">
                                        <TextField
                                            required
                                            name="email"
                                            InputLabelProps={{
                                                shrink: true,
                                            }}
                                            disabled={false}
                                            fullWidth
                                            placeholder="Votre email"
                                            InputProps={{
                                                style: {

                                                },
                                                disableUnderline: true,
                                            }}

                                            variant="standard"

                                            value={login_email}
                                            onChange={(event) => {
                                                setlogin_email(event.target.value);

                                            }}

                                        />
                                    </div>
                                    </div>
                                    <div className="input"><div className="text-wrapper-3">
                                        <TextField
                                            required
                                            type="password"
                                            autoComplete="current-password"
                                            name="pwd_desktop"
                                            InputLabelProps={{
                                                shrink: true,
                                            }}
                                            disabled={false}
                                            fullWidth
                                            placeholder="Mot de passe"
                                            InputProps={{
                                                style: {

                                                },
                                                disableUnderline: true,
                                            }}

                                            variant="standard"

                                            value={login_pwd}
                                            onChange={(event) => {
                                                setlogin_pwd(event.target.value);

                                            }}

                                        />


                                    </div>

                                    </div>

                                    <div style={{
                                        "textAlign": "right",
                                        width: "100%",
                                        paddingRight: '10px'
                                    }} >
                                        <nav style={{
                                            width: "10%",
                                            float: "right"
                                        }}
                                            onClick={handleClickShowPassword_desktop}>
                                            {currentpawdvisible ? <Visibility style={{ fontSize: '15px' }} /> : <VisibilityOff style={{ fontSize: '15px' }} />}
                                        </nav>
                                    </div>
                                </div>
                                <footer className="footer">
                                    <div style={{
                                        "textAlign": "right",
                                        width: "100%",
                                        paddingRight: '10px'
                                    }} >
                                        <nav style={{
                                            float: "right"
                                        }}
                                            onClick={(e) => {
                                                setDialog_reset_pwd_open(true);
                                            }}>
                                            <p className="text-wrapper-5_v2">Mot de passe oublié ?</p>
                                        </nav>
                                    </div>


                                </footer>
                            </div>
                        </div>
                        <div className="log-in">
                            <div className="button-text" onClick={onSubmit}>
                                <div className="div-wrapper"><div className="text-2"  >Se connecter</div></div>
                            </div>
                            <div className="create-account">
                                <p className="text-wrapper-6">Vous n'avez pas de compte ?</p>
                                <div className="text-wrapper-7" style={{ cursor: 'pointer' }} onClick={(e) => {
                                    history.push("/signup");
                                }}>Créez un compte</div>
                            </div>
                        </div>
                    </div>
                    <div className="logo-mysy">
                        <div className="logo-mysy-2">
                            <div className="overlap-group">
                                <img className="vector" />
                                <img className="img" />
                                <img className="vector-2" />
                            </div>
                            <div className="overlap">
                                <img src={Sign_In_Logo_MySy_SVG} />
                            </div>
                        </div>
                        <div className="text-wrapper-8">TRAINING</div>
                    </div>
                </div>
            </div>


        </div>
    );
}

export default New_C_Sign_In_2025;
