Pure Web Tutorial

cd frontend
npm run dev

cd compose
docker compose up [-d]

cd backend
quarkus dev --clean

import { Model } from "../types";

export class StoreService {
	private readonly _model: Model = {
		navigation: {
			pane: "/",
		},
		vehicles: undefined,
		vehicle: undefined,
		profile: undefined,
		realmAccess: undefined,
	};

	private subscribers: ((model: Model) => void)[] = [];

	private notify() {
		this.subscribers.forEach((s) => s(this.model));
	}

	// doesnt work with arrays (but with some hacks it does) (1)
	private proxyObject(object: Object) {
		return new Proxy(object, {
			get: (target, p) => {
				if (!(p in target)) {
					return undefined;
				}

				let value = target[p as keyof typeof target];
				if (typeof value === "object") {
					return this.proxyObject(value); (2)
				}
				return value;
			},
			set: (target, prop, value) => {
				if (!(prop in target)) {
					return false;
				}

				target[prop as keyof typeof target] = value;
				this.notify();
				return true;
			},
		});
	}

	get model() {
		return this.proxyObject(this._model) as Model;
	}

	public subscribe(fn: (model: Model) => void) {
		this.subscribers.push(fn);
	}

	public unsubscribe(fn: (model: Model) => void) {
		this.subscribers = this.subscribers.filter((s) => s !== fn);
	}
}

export const storeService = new StoreService();

import Keycloak from "keycloak-js";

export class KeycloakService {
	private readonly _keycloak = new Keycloak({
		url: "http://localhost:8000",
		realm: "demo",
		clientId: "frontend",
	});

	public async isReady() { (1)
		while (!keycloakService.keycloak.token) {
			await new Promise((f) => setTimeout(f, 100));
		}
	}

	public get keycloak() {
		return this._keycloak;
	}
}

export const keycloakService = new KeycloakService();

import { Vehicle } from "../types";
import { keycloakService } from "./keycloak-service";

export class VehicleService {
	private readonly url = "http://localhost:8080";

	// requires admin permissions
	public async getAll() {
		await keycloakService.isReady();

		const response = await fetch(`${this.url}/vehicle/`, {
			headers: {
				accept: "application/json",
				authorization: `Bearer ${keycloakService.keycloak.token}`,
			},
		});

		if (!response.ok) return;

		return (await response.json()) as Vehicle[];
	}

	// requires user permissions
	public async getById(id: number) {
		await keycloakService.isReady();

		const response = await fetch(`${this.url}/vehicle/${id}`, {
			headers: {
				accept: "application/json",
				authorization: `Bearer ${keycloakService.keycloak}`,
			},
		});

		if (!response.ok) return undefined;

		return (await response.json()) as Vehicle;
	}
}

export const vehicleService = new VehicleService();

export function html(content: string): HTMLTemplateElement {
	const template = document.createElement("template");
	template.innerHTML = content;
	return template;
}

export function element<T extends HTMLElement>(
	shadowRoot: ShadowRoot | null,
	id: string,
): T {
	const element = shadowRoot?.getElementById(id);
	if (!element) throw Error;
	return element as T;
}

<div>
	<a href="/">Home</a>
	<a href="/admin" data-roles='["admin"]'> Admin </a>
	<a href="/user" data-roles='["admin", "user"]'> User </a>
</div>

import { html, Store } from "../../utils";
import template from "./nav-template.html?raw"; (1)

export class Nav extends HTMLElement {
	constructor() {
		super();
		this.attachShadow({ mode: "open" }); (2)
	}

	connectedCallback() { (3)
		this.render();

		const links = Array.from(this.shadowRoot?.querySelectorAll("a") ?? []);
		const model = Store.store.model;

		links.forEach((a) => {
			a.onclick = (e: MouseEvent) => {
				e.preventDefault(); (4)

				const pane = new URL(a.href).pathname;

				if (model.navigation.pane === pane) {
					return;
				}

				if (a.hasAttribute("data-roles")) {
					const roles = JSON.parse(
						a.getAttribute("data-roles")!,
					) as string[];

					if (
						!roles.some((r) => model.realmAccess?.roles.includes(r)) (5)
					) {
						return;
					}
				}

				model.navigation.pane = pane;
				history.pushState(
					{ pane: model.navigation.pane },
					"",
					model.navigation.pane,
				);
			};
		});
	}

	render() {
		const nav = html(template).content.cloneNode(true); (6)
		this.shadowRoot?.append(nav);
	}
}

customElements.define("app-nav", Nav); (7)

<div>
	<div hidden data-pane="/admin" data-roles='["admin"]'>
		<app-admin-view></app-admin-view>
	</div>
	<div hidden data-pane="/user" data-roles='["admin", "user"]'>
		<app-user-view></app-user-view>
	</div>
</div>

import { html, Store } from "../../utils";
import template from "./app-template.html?raw";

export class App extends HTMLElement {
	constructor() {
		super();
		this.attachShadow({ mode: "open" });
	}

	connectedCallback() {
		this.render();

		Store.store.subscribe((model) => (1)
			this.renderPane(model.navigation.pane),
		);
	}

	render() {
		const app = html(template).content.cloneNode(true);
		this.shadowRoot?.append(app);
	}

	renderPane(pane: string) {
		const panes = this.shadowRoot?.querySelectorAll("[data-pane]");
		const model = Store.store.model;

		panes?.forEach((p) => {
			p.getAttribute("data-pane") === pane &&
			(p.hasAttribute("data-roles")
				? (JSON.parse(p.getAttribute("data-roles")!) as string[]).some(
						(r) => model.realmAccess?.roles.includes(r),
					)
				: true)
				? p.removeAttribute("hidden")
				: p.setAttribute("hidden", ""); (2)
		});
	}
}

customElements.define("app-outlet", App);

<p>Admin</p>

<pre id="vehicles"></pre>

import { element, html } from "../../utils";
import template from "./admin-template.html?raw";

import { vehicleService, storeService } from "../../services";

export class AdminView extends HTMLElement {
	constructor() {
		super();
		this.attachShadow({ mode: "open" });
	}

	async connectedCallback() {
		this.render();

		storeService.model.vehicles = await vehicleService.getAll();
	}

	render() {
		const admin = html(template).content.cloneNode(true);
		this.shadowRoot?.append(admin);

		const vehicles = element(this.shadowRoot, "vehicles");

		storeService.subscribe((model) => {
			vehicles.innerHTML = JSON.stringify(model.vehicles, null, "\t");
		});
	}
}

customElements.define("app-admin-view", AdminView);

<p>User</p>

<button id="logout">Logout</button>

<pre id="vehicle"></pre>
<pre id="profile"></pre>
<pre id="roles"></pre>

import { keycloakService, vehicleService, storeService } from "../../services";
import { element, html } from "../../utils";
import template from "./user-template.html?raw";

export class UserView extends HTMLElement {
	constructor() {
		super();
		this.attachShadow({ mode: "open" });
	}

	async connectedCallback() {
		this.render();

		storeService.model.vehicle = await vehicleService.getById(1);
	}

	render() {
		const user = html(template).content.cloneNode(true);
		this.shadowRoot?.append(user);

		const logoutBtn = element(this.shadowRoot, "logout");
		const vehicle = element(this.shadowRoot, "vehicle");
		const profile = element(this.shadowRoot, "profile");
		const roles = element(this.shadowRoot, "roles");

		logoutBtn.onclick = () => keycloakService.keycloak.logout();

		storeService.subscribe((model) => {
			profile.innerText = JSON.stringify(model.profile, null, "\t");
			roles.innerText = JSON.stringify(model.realmAccess, null, "\t");
			vehicle.innerHTML = JSON.stringify(model.vehicle, null, "\t");
		});
	}
}

customElements.define("app-user-view", UserView);