site/membres.html at main · convergence-human-technology/site · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Espace Membres - Convergence</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 800px; margin: 50px auto; text-align: center; }
    #user-card { background: #f4f4f4; border-radius: 10px; padding: 30px; margin: 20px auto; }
    button { padding: 10px 20px; background: #dc3545; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; }
  </style>
</head>
<body>
  <h1>👥 Espace Membres</h1>
  <div id="user-card">Chargement...</div>
  <button id="btn-logout">🚪 Déconnexion</button>

  <script>
    const AUTH0_DOMAIN = "convergence-tech.eu.auth0.com";
    const CLIENT_ID = "ONtxpyovHGewrl4669n3Qz8RJYot27AS";
    const BASE_URL = "https://convergence-human-technology.github.io/site";

    const token = sessionStorage.getItem("auth_token");
    if (!token) {
      window.location.replace(BASE_URL + "/index.html");
    } else {
      fetch(`https://${AUTH0_DOMAIN}/userinfo`, {
        headers: { Authorization: `Bearer ${token}` }
      })
      .then(r => r.json())
      .then(user => {
        document.getElementById("user-card").innerHTML = `
          <img src="${user.picture}" width="80" style="border-radius:50%"><br>
          <h2>Bonjour <strong>${user.name}</strong> ! 👋</h2>
          <p>📧 ${user.email}</p>
          <p>✅ Vous êtes connecté à l'espace membres.</p>
        `;
      })
      .catch(() => {
        document.getElementById("user-card").innerHTML = "<p>✅ Vous êtes connecté !</p>";
      });
    }

    document.getElementById("btn-logout").onclick = () => {
      sessionStorage.clear();
      window.location.href = `https://${AUTH0_DOMAIN}/v2/logout?returnTo=${encodeURIComponent(BASE_URL + "/index.html")}&client_id=${CLIENT_ID}`;
    };
  </script>
</body>
</html>