53 lines
1.7 KiB
TypeScript
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 {};
|