|
|
|
|
@ -1,5 +1,5 @@
|
|
|
|
|
import { BASE } from "../Constants"
|
|
|
|
|
import "../style/settings/settings.css"
|
|
|
|
|
|
|
|
|
|
import 'bootstrap/dist/css/bootstrap.min.css';
|
|
|
|
|
import { MainTitle, SecondTitle } from "./component/Title"
|
|
|
|
|
import { Header } from './template/Header'
|
|
|
|
|
@ -11,16 +11,11 @@ import Image from 'react-bootstrap/Image';
|
|
|
|
|
import Container from 'react-bootstrap/Container'
|
|
|
|
|
import Row from 'react-bootstrap/Row';
|
|
|
|
|
import Col from 'react-bootstrap/Col';
|
|
|
|
|
import { updateSourceFile } from "typescript";
|
|
|
|
|
import { fetchAPI } from "../Fetcher";
|
|
|
|
|
import { fetchPOST } from "../Fetcher";
|
|
|
|
|
import axios from "axios";
|
|
|
|
|
import Modal from 'react-bootstrap/Modal';
|
|
|
|
|
import { Stack } from "react-bootstrap";
|
|
|
|
|
import * as http from 'follow-redirects/http';
|
|
|
|
|
import * as https from 'follow-redirects/https';
|
|
|
|
|
// import fetch from 'node-fetch';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export default function Settings({ user }: { user: User }) {
|
|
|
|
|
return (
|
|
|
|
|
@ -28,14 +23,14 @@ export default function Settings({ user }: { user: User }) {
|
|
|
|
|
<Header username={user.name} />
|
|
|
|
|
<Body user={user} />
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function Body({ user }: { user: User }) {
|
|
|
|
|
return (
|
|
|
|
|
<div id="body">
|
|
|
|
|
<div id="content">
|
|
|
|
|
<MainTitle title="Paramètres" id={null} />
|
|
|
|
|
<MainTitle title="Paramètres" id="param" />
|
|
|
|
|
<AccountSettings user={user} />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -55,15 +50,16 @@ function ProfilSettings({ user }: { user: User }) {
|
|
|
|
|
const nameRef = useRef<HTMLInputElement>(null);
|
|
|
|
|
const emailRef = useRef<HTMLInputElement>(null);
|
|
|
|
|
const [modalShow, setModalShow] = useState(false);
|
|
|
|
|
const width = 140;
|
|
|
|
|
const width = 150;
|
|
|
|
|
const profilePicture = user.profilePicture;
|
|
|
|
|
console.log("profile :" + profilePicture);
|
|
|
|
|
return (
|
|
|
|
|
<Container>
|
|
|
|
|
<Row>
|
|
|
|
|
<Col>
|
|
|
|
|
<Stack>
|
|
|
|
|
<div id="img">
|
|
|
|
|
<Image src={profilePicture} width={width} height={width} roundedCircle />
|
|
|
|
|
</div>
|
|
|
|
|
<Button variant="outline-primary" onClick={() => setModalShow(true)}>Changer photo de profil</Button>
|
|
|
|
|
<MyVerticallyCenteredModal
|
|
|
|
|
show={modalShow}
|
|
|
|
|
@ -81,7 +77,6 @@ function ProfilSettings({ user }: { user: User }) {
|
|
|
|
|
<Form.Group className="mb-3" controlId="formEmail">
|
|
|
|
|
<Form.Label className="content">Adresse mail</Form.Label>
|
|
|
|
|
<Form.Control ref={emailRef} id="control" size="sm" defaultValue={user.email} type="email" placeholder="Password" />
|
|
|
|
|
{/* <Form.Control readOnly onClick={() => alert("En cours de développement...")} ref={emailRef} id="control" size="sm" defaultValue={user.email} type="email" placeholder="Password" /> */}
|
|
|
|
|
</Form.Group>
|
|
|
|
|
<Button variant="outline-primary" type="button" onClick={() => updateAccountInfos(nameRef.current!.value, emailRef.current!.value)}>Mettre à jour</Button>
|
|
|
|
|
</Form>
|
|
|
|
|
@ -114,7 +109,6 @@ function updateAccountPicture(lien: string) {
|
|
|
|
|
function MyVerticallyCenteredModal(props: any) {
|
|
|
|
|
const urlRef = useRef<HTMLInputElement>(null);
|
|
|
|
|
const [invalidShow, setInvalidShow] = useState(false);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<Modal
|
|
|
|
|
{...props}
|
|
|
|
|
@ -141,7 +135,6 @@ function MyVerticallyCenteredModal(props: any) {
|
|
|
|
|
|
|
|
|
|
async function handleNewImage(lien: string, invalidRef : React.Dispatch<React.SetStateAction<boolean>>) {
|
|
|
|
|
let exist = await testImage(lien);
|
|
|
|
|
console.log(exist);
|
|
|
|
|
if (exist) {
|
|
|
|
|
invalidRef(false);
|
|
|
|
|
updateAccountPicture(lien);
|
|
|
|
|
@ -154,10 +147,8 @@ async function handleNewImage(lien: string, invalidRef : React.Dispatch<React.Se
|
|
|
|
|
async function testImage(lien: string) {
|
|
|
|
|
try {
|
|
|
|
|
const response = await axios.head(lien);
|
|
|
|
|
console.log(response);
|
|
|
|
|
// Vérifier le statut de la réponse (200 OK est considéré comme valide)
|
|
|
|
|
|
|
|
|
|
if (response.status === 200) {
|
|
|
|
|
// Vérifier le type de contenu pour s'assurer qu'il s'agit d'une image
|
|
|
|
|
const contentType = response.headers['content-type'];
|
|
|
|
|
if (contentType && contentType.startsWith('image/')) {
|
|
|
|
|
return true;
|
|
|
|
|
@ -169,28 +160,4 @@ async function testImage(lien: string) {
|
|
|
|
|
console.error("Erreur lors de la requête HEAD: ", error);
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
// return true;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// async function testImage(imageUrl: string) {
|
|
|
|
|
// try {
|
|
|
|
|
// const response = await axios.head(`${BASE.PROXY}?url=${encodeURIComponent(imageUrl)}`);
|
|
|
|
|
|
|
|
|
|
// console.log(response);
|
|
|
|
|
|
|
|
|
|
// // Check the response status (200 OK is considered valid)
|
|
|
|
|
// if (response.status === 200) {
|
|
|
|
|
// // Check the content type to ensure it's an image
|
|
|
|
|
// const contentType = response.headers['content-type'];
|
|
|
|
|
// if (contentType && contentType.startsWith('image/')) {
|
|
|
|
|
// return true;
|
|
|
|
|
// }
|
|
|
|
|
// return false;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// return false;
|
|
|
|
|
// } catch (error) {
|
|
|
|
|
// console.error("Error during HEAD request: ", error);
|
|
|
|
|
// return false;
|
|
|
|
|
// }
|
|
|
|
|
// }
|
d_yanis
1 year ago