|
| 1 | +{% comment %} |
| 2 | + Perfil de usuario: datos de /api/account/profile (window.CodericAccountProfile) y Auth0 user. |
| 3 | + Requiere Auth0 (auth0-coderic.js). Uso: account/index.html con layout default. |
| 4 | +{% endcomment %} |
| 5 | +<div id="coderic-account-profile" class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-12"> |
| 6 | + <div id="coderic-account-guest" class="hidden"> |
| 7 | + <h1 class="text-2xl font-bold text-gray-900 mb-4">Cuenta</h1> |
| 8 | + <p class="text-gray-600 mb-4">Inicia sesión para ver tu perfil.</p> |
| 9 | + <a href="{{ '/' | relative_url }}" id="coderic-account-login-link" class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-orange-600 rounded-md hover:bg-orange-700">Iniciar sesión</a> |
| 10 | + </div> |
| 11 | + <div id="coderic-account-content" class="hidden"> |
| 12 | + <h1 class="text-2xl font-bold text-gray-900 mb-2">Perfil</h1> |
| 13 | + <p id="coderic-account-name" class="text-lg text-gray-700 mb-2"></p> |
| 14 | + <p class="mb-4"><a href="{{ '/logout' | relative_url }}" class="text-sm text-orange-600 hover:text-orange-700">Cerrar sesión</a></p> |
| 15 | + <section class="mb-6"> |
| 16 | + <h2 class="text-xl font-semibold text-gray-900 mb-2">Datos de cuenta (API)</h2> |
| 17 | + <p class="text-sm text-gray-500 mb-2">Payload de <code>/api/account/profile</code> (JWT).</p> |
| 18 | + <pre id="coderic-account-json" class="p-4 rounded-lg bg-gray-100 text-sm font-mono overflow-x-auto"></pre> |
| 19 | + </section> |
| 20 | + </div> |
| 21 | +</div> |
| 22 | +<script> |
| 23 | +(function () { |
| 24 | + function showProfile() { |
| 25 | + var guest = document.getElementById("coderic-account-guest"); |
| 26 | + var content = document.getElementById("coderic-account-content"); |
| 27 | + var nameEl = document.getElementById("coderic-account-name"); |
| 28 | + var jsonEl = document.getElementById("coderic-account-json"); |
| 29 | + if (!guest || !content) return; |
| 30 | + if (!window.CodericAuth0Client) { |
| 31 | + guest.classList.remove("hidden"); |
| 32 | + var link = document.getElementById("coderic-account-login-link"); |
| 33 | + if (link) link.addEventListener("click", function (e) { e.preventDefault(); window.CodericAuth0Client && window.CodericAuth0Client.loginWithRedirect(); }); |
| 34 | + return; |
| 35 | + } |
| 36 | + window.CodericAuth0Client.isAuthenticated().then(function (ok) { |
| 37 | + if (!ok) { |
| 38 | + guest.classList.remove("hidden"); |
| 39 | + var link = document.getElementById("coderic-account-login-link"); |
| 40 | + if (link) link.addEventListener("click", function (e) { e.preventDefault(); window.CodericAuth0Client.loginWithRedirect(); }); |
| 41 | + return; |
| 42 | + } |
| 43 | + guest.classList.add("hidden"); |
| 44 | + content.classList.remove("hidden"); |
| 45 | + window.CodericAuth0Client.getUser().then(function (u) { |
| 46 | + if (nameEl && u) nameEl.textContent = (u.name || u.nickname || u.email) || "Usuario"; |
| 47 | + }); |
| 48 | + if (jsonEl) { |
| 49 | + jsonEl.textContent = window.CodericAccountProfile ? JSON.stringify(window.CodericAccountProfile, null, 2) : "Cargando…"; |
| 50 | + window.CodericAuth0Client.getTokenSilently().then(function (token) { |
| 51 | + return fetch("/api/account/profile", { headers: { Authorization: "Bearer " + token } }); |
| 52 | + }).then(function (r) { return r.ok ? r.json() : null; }).then(function (data) { |
| 53 | + if (data) window.CodericAccountProfile = data; |
| 54 | + if (jsonEl) jsonEl.textContent = data ? JSON.stringify(data, null, 2) : jsonEl.textContent; |
| 55 | + }).catch(function () {}); |
| 56 | + } |
| 57 | + }); |
| 58 | + } |
| 59 | + document.addEventListener("coderic-auth0-ready", showProfile); |
| 60 | + if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", showProfile); |
| 61 | + else showProfile(); |
| 62 | +})(); |
| 63 | +</script> |
0 commit comments