Skip to content

Commit 54a5a77

Browse files
Account, Console, Logout: includes y botones Login/Logout/Console en header
Co-authored-by: Cursor <cursoragent@cursor.com>
1 parent 7bd3aa6 commit 54a5a77

File tree

4 files changed

+109
-5
lines changed

4 files changed

+109
-5
lines changed
Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
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>

_includes/console-coderic.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{% comment %}
2+
Consola: panel de enlaces para usuarios. Uso: console/index.html con layout default.
3+
{% endcomment %}
4+
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-12">
5+
<h1 class="text-2xl font-bold text-gray-900 mb-2">Console</h1>
6+
<p class="text-gray-600 mb-8">Panel de acceso rápido del ecosistema Coderic.</p>
7+
<nav class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3" aria-label="Console">
8+
<a href="{{ '/account/' | relative_url }}" class="block p-4 rounded-lg border border-gray-200 hover:border-orange-500 hover:bg-orange-50 transition-colors">
9+
<span class="font-medium text-gray-900">Cuenta</span>
10+
<p class="text-sm text-gray-500 mt-1">Ver perfil y datos de sesión</p>
11+
</a>
12+
<a href="{{ '/test.html' | relative_url }}" class="block p-4 rounded-lg border border-gray-200 hover:border-orange-500 hover:bg-orange-50 transition-colors">
13+
<span class="font-medium text-gray-900">Test API</span>
14+
<p class="text-sm text-gray-500 mt-1">Health, Auth0 y endpoints</p>
15+
</a>
16+
<a href="{{ '/' | relative_url }}" class="block p-4 rounded-lg border border-gray-200 hover:border-orange-500 hover:bg-orange-50 transition-colors">
17+
<span class="font-medium text-gray-900">Inicio</span>
18+
<p class="text-sm text-gray-500 mt-1">Volver al inicio</p>
19+
</a>
20+
</nav>
21+
</div>
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{% comment %}
2+
Página /logout: cierra sesión Auth0 y redirige a la raíz.
3+
Incluir en logout.html con layout: default.
4+
{% endcomment %}
5+
<script>
6+
(function () {
7+
if (window.CodericAuth0Client) {
8+
var baseurl = (window.CodericAuth0Config && window.CodericAuth0Config.baseurl) || "";
9+
var returnTo = window.location.origin + (baseurl ? baseurl + "/" : "/");
10+
window.CodericAuth0Client.logout({ logoutParams: { returnTo: returnTo } });
11+
} else {
12+
window.location.href = "{{ '/' | relative_url }}";
13+
}
14+
})();
15+
</script>
16+
<p class="mx-auto max-w-7xl px-4 py-8 text-gray-600">Cerrando sesión…</p>

_layouts/default.html

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -99,16 +99,20 @@
9999
<div id="coderic-auth-buttons" class="flex items-center gap-2" aria-label="Autenticación"
100100
x-data="codericAuth()" x-init="init()">
101101
<template x-if="!loading">
102-
<div class="flex items-center gap-2">
102+
<div class="flex items-center gap-2 flex-wrap">
103103
<template x-if="!loggedIn">
104-
<button type="button" @click="login()"
105-
class="px-4 py-2 text-sm font-medium text-white bg-orange-600 rounded-md hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500">Iniciar sesión</button>
104+
<span class="flex items-center gap-2">
105+
<button type="button" @click="login()"
106+
class="px-4 py-2 text-sm font-medium text-white bg-orange-600 rounded-md hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500">Iniciar sesión</button>
107+
<a href="{{ '/console/' | relative_url }}" class="px-4 py-2 text-sm font-medium text-orange-600 border border-orange-600 rounded-md hover:bg-orange-50 focus:outline-none focus:ring-2 focus:ring-orange-500">Console</a>
108+
</span>
106109
</template>
107110
<template x-if="loggedIn">
108-
<span class="flex items-center gap-2">
109-
<span class="text-sm text-gray-600" x-text="userName"></span>
111+
<span class="flex items-center gap-2 flex-wrap">
112+
<a href="{{ '/account/' | relative_url }}" class="text-sm text-gray-600 hover:text-orange-600" x-text="userName"></a>
110113
<button type="button" @click="logout()"
111114
class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-orange-500">Cerrar sesión</button>
115+
<a href="{{ '/console/' | relative_url }}" class="px-4 py-2 text-sm font-medium text-orange-600 border border-orange-600 rounded-md hover:bg-orange-50 focus:outline-none focus:ring-2 focus:ring-orange-500">Console</a>
112116
</span>
113117
</template>
114118
</div>

0 commit comments

Comments
 (0)