import React, { useState, useEffect } from "react"; import UpdateUserInfo from "../components/UpdateUserInfo"; import bannerimg from "../mysy_img/MYSY_banner_compte.png"; import profileimg from "../mysy_img/MYSY-profil-2.png"; import Button from '@mui/material/Button'; import { useHistory } from "react-router-dom"; import LogoutIcon from '@mui/icons-material/Logout'; import UserHistoryRecherche from "../components/UserHistoryRecherche"; import { confirmAlert } from 'react-confirm-alert'; // Import import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css import { Helmet } from "react-helmet"; import { useCookies } from "react-cookie"; import bannerimg2 from "../mysy_img/MYSY-LOGO-BLUE.png"; import axios from "axios"; import { getCookie, removeCookie } from 'react-use-cookie'; import logowhite from "../mysy_img/MYSY-LOGO-WHITE.png"; import Footer from "./Fotter"; import Header from "./Header"; import UpgradeToPro from "./UpgradeToPro" import Profil_Objectif from "./ProfilObjectif"; import { useLocation } from "react-router-dom"; function Account() { const [menu, setmenu] = useState("affichage"); const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']); const [result, setResult] = useState(""); const [myApiResponse, setmyApiResponse] = useState(""); const stored_user = getCookie('tokenmysych'); const history = useHistory(); const [country_code, setcountry_code] = useState(""); const [country_name, setcountry_name] = useState(""); const [city, setcity] = useState(""); const [postal, setpostal] = useState(""); const [latitude, setlatitude] = useState(""); const [longitude, setlongitude] = useState(""); const [IPv4, setIPv4] = useState(""); const [state, setstate] = useState(""); const [userimgprofil, setuserimgprofil] = useState(); const [userIp, setuserIp] = useState(""); const [username, setusername] = useState(""); const [migratedaccount, setmigratedaccount] = useState("0"); const apiUrl = process.env.REACT_APP_API_URL; const formData = new FormData(); //alert("stored_user = "+stored_user); const location = useLocation(); useEffect(() => { getImage(); if (typeof (stored_user) === "undefined" || String(stored_user) === '') { //alert(" debut puch"); history.push("/mysy-training-login/0/0"); } async function fetchData() { const result = await axios('https://geolocation-db.com/json/',); //alert(result.data.IPv4); setuserIp(result.data.IPv4); setcountry_code(result.data.country_code); setcountry_name(result.data.country_name); setcity(result.data.city); setpostal(result.data.postal); setlatitude(result.data.latitude); setlongitude(result.data.longitude); setIPv4(result.data.IPv4); setstate(result.data.state); setuserIp(result.data.IPv4); } GetUserNameFromToken(); fetchData(); if (location && location.state && location.state.menu) { displayProfil_Objectif(); } }, []); const [myimage, setmyimage] = useState(); const [isimage, setisimage] = useState(); function getImage(e) { var myurl = process.env.REACT_APP_API_URL + "myclass/api/getRecodedImage/"; var form = new FormData(); form.append("token", stored_user); form.append("type", "user"); axios.post(myurl, form).then(res => { if (res.data.status != "False") { console.log(" getImage : In test res.data.status = " + res.data.status); console.log(" getImage: res.data.message.img = " + res.data.message); if (res.data.message.img.length > 0) { setisimage("True"); } else { setisimage("False"); } setmyimage(res.data.message.img); var ch_img = "data:image/png;base64," + res.data.message.img; setuserimgprofil(ch_img); } else { //console.log(" In Erreur res.data.status = " + res.data.status); //console.log(" In Erreur res.data.message = " + res.data.message); setisimage("False"); setuserimgprofil(profileimg); } }).catch((error) => { console.warn('Not good man :( mysearchtext = '); setisimage("False"); setuserimgprofil(profileimg); }) } function logout_confirmation() { /* si c'est une connexion partner qui est active */ if (typeof (stored_user) != "undefined") { removeCookie('tokenmysych', { path: '/' }); history.push("/mysy-training-login/0/0"); } } function logout() { confirmAlert({ title: 'Deconnexion ?', message: 'Confirmez la deconnexion', buttons: [ { label: 'Yes', onClick: () => logout_confirmation() }, { label: 'No', onClick: () => { return } } ] }); } const displayHistory = () => { setmenu("recherche"); }; const displayProfil_Objectif = () => { setmenu("profil_objectif"); }; const upgradetopro = () => { setmenu("upgradecompte"); }; const displayPersoInfo = () => { setmenu("affichage"); }; function GetUserNameFromToken(event) { var form = new FormData(); form.append("token", stored_user); var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_user_account/"; axios.post(myurl, form).then(res => { if (String(res.data.status) === String("true")) { console.log(" In GetUserNameFromToken res.data.status = " + res.data.status); console.log(" In GetUserNameFromToken res.data.message = " + res.data.message); setusername(JSON.parse(res.data.message).email); if (JSON.parse(res.data.message).migrated && String(JSON.parse(res.data.message).migrated) === String("1")) { setmigratedaccount(String(JSON.parse(res.data.message).migrated)); } //setmyApiResponse("true"); //setResult(res.data.message) //setmyApimyApiMessage("OK") } else { console.log(" In GetUserNameFromToken res.data.status = " + res.data.status); console.log(" In GetUserNameFromToken res.data.message = " + res.data.message); //setmyApiResponse("false"); //setmyApimyApiMessage("") } }).catch((error) => { console.warn('In GetUserNameFromToken Not good man :( mysearchtext = '); //setmyApiResponse("false"); //setmyApimyApiMessage("") }) } function finaldeleteuseraccount(e) { var form = new FormData(); form.append("token", stored_user); // Ajout des info IP user form.append("user_ip", IPv4); form.append("user_country_code", country_code); form.append("user_country_name", country_name); form.append("user_city", city); form.append("user_postal", postal); form.append("user_latitude", latitude); form.append("user_longitude", longitude); form.append("user_state", state); var myurl = process.env.REACT_APP_API_URL + "myclass/api/send_mail_delete_user/"; axios.post(myurl, form).then(res => { if (String(res.data.status) != String("false")) { //console.log(" In test res.data.status = " + res.data.status); //console.log(" In test res.data.message = " + res.data.message); setmyApiResponse("true"); setResult(res.data.message) alert(res.data.message); } else { //console.log(" In test res.data.status = " + res.data.status); //console.log(" In test res.data.message = " + res.data.message); setmyApiResponse("false"); //setmyApimyApiMessage("") } }).catch((error) => { console.warn('Not good man :( mysearchtext = '); setmyApiResponse("false"); //setmyApimyApiMessage("") }) } function deletemyaccount(e) { confirmAlert({ title: 'Suppremier votre compte', message: 'Cette action va supprimer toutes vos données, Confirmez-vous la suppression du compte ?', buttons: [ { label: 'Yes', onClick: () => finaldeleteuseraccount() }, { label: 'No', onClick: () => { return } } ] }); } const [selectedFile, setSelectedFile] = useState(); const [isSelected, setIsSelected] = useState(false); const [isnewimage, setisnewimage] = useState(); const changeHandler = (event) => { let file_size = event.target.files[0].size; //or if you like to have name and type let file_name = event.target.files[0].name; let file_type = event.target.files[0].type; //alert("file_size = "+file_size+" file_type = "+file_type+" a = "+a); if (file_size > 100000) { alert("L'image doit faire moins de 100 Kilo Octets"); return; } setSelectedFile(event.target.files[0]); setIsSelected(true); setuserimgprofil(URL.createObjectURL(event.target.files[0])); }; function sendImage(e) { formData.append('File', selectedFile); formData.append("token", stored_user); formData.append("type", "user"); fetch( process.env.REACT_APP_API_URL + "myclass/api/recordImage/", { method: 'POST', body: formData, } ).then((response) => response.json()) .then((result) => { console.log('Success:', result['message']); setIsSelected(false); }) .catch((error) => { console.error('Error:'); setIsSelected(true); }); }; return (