rojects/source/components/project-home/project-home.ts

53 lines
1.7 KiB
TypeScript

const AUTH_HOST = 'https://account.rokojori.com';
const APP_URL = 'https://roject.rokojori.com';
interface JwtUser {
userId: string;
email: string;
roles: string[];
products: string[];
}
class ProjectHome extends HTMLElement {
async connectedCallback(): Promise<void> {
const res = await fetch( '/api/auth/me' );
if ( !res.ok ) {
const loginHref = `${ AUTH_HOST }/login.html?redirect=${ encodeURIComponent( APP_URL ) }`;
this.innerHTML = `
<div class="ph-hero">
<h1 class="ph-brand">Roject</h1>
<a class="ph-login" href="${ loginHref }">Log in</a>
</div>
`;
return;
}
const user = await res.json() as JwtUser;
const settingsRes = await fetch( '/api/user/settings' );
const settings = settingsRes.ok ? await settingsRes.json() as Record<string, unknown> : {};
const theme = ( settings[ 'theme' ] as string | undefined ) ?? 'default';
await this.loadTheme( theme, user );
}
private async loadTheme( theme: string, user: JwtUser ): Promise<void> {
if ( theme === 'italic-neon' ) {
const italicNeonPath = '../project-list-italic-neon/project-list-italic-neon.js';
await import( italicNeonPath );
const el = document.createElement( 'project-list-italic-neon' ) as HTMLElement & { user: JwtUser };
el.user = user;
this.appendChild( el );
} else {
await import( '../project-list-default/project-list-default.js' );
const el = document.createElement( 'project-list-default' ) as HTMLElement & { user: JwtUser };
el.user = user;
this.appendChild( el );
}
}
}
customElements.define( 'project-home', ProjectHome );
export {};