41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
|
interface AuthUser {
|
||
|
|
id: number;
|
||
|
|
username: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
class AppNav extends HTMLElement {
|
||
|
|
async connectedCallback(): Promise<void> {
|
||
|
|
const res = await fetch('/api/auth/me');
|
||
|
|
if (!res.ok) { location.href = '/login.html'; return; }
|
||
|
|
const user = await res.json() as AuthUser;
|
||
|
|
|
||
|
|
this.innerHTML = `
|
||
|
|
<nav>
|
||
|
|
<span class="nav-brand">Roject</span>
|
||
|
|
<div class="nav-links">
|
||
|
|
<a href="/dashboard.html">Dashboard</a>
|
||
|
|
<a href="/groups.html">Groups</a>
|
||
|
|
<a href="/projects.html">Projects</a>
|
||
|
|
</div>
|
||
|
|
<div class="nav-user">
|
||
|
|
<span>${user.username}</span>
|
||
|
|
<button class="btn-logout">Logout</button>
|
||
|
|
<button class="btn-delete">Delete Account</button>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
`;
|
||
|
|
|
||
|
|
this.querySelector('.btn-logout')!.addEventListener('click', async () => {
|
||
|
|
await fetch('/api/auth/logout', { method: 'POST' });
|
||
|
|
location.href = '/login.html';
|
||
|
|
});
|
||
|
|
|
||
|
|
this.querySelector('.btn-delete')!.addEventListener('click', async () => {
|
||
|
|
if (!confirm('Delete your account? This cannot be undone.')) return;
|
||
|
|
await fetch('/api/auth/me', { method: 'DELETE' });
|
||
|
|
location.href = '/login.html';
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
customElements.define('app-nav', AppNav);
|