frontend/src/lib/components/layout/Overlay/AccountPending.svelte

<script lang="ts">
	import DOMPurify from "dompurify";
	import { marked } from "marked";

	import { getAdminDetails } from "$lib/apis/auths";
	import { onMount, tick, getContext } from "svelte";
	import { config } from "$lib/stores";

	const i18n = getContext("i18n");

	let adminDetails = null;

	onMount(async () => {
		adminDetails = await getAdminDetails(localStorage.token).catch(
			(err) => {
				console.error(err);
				return null;
			},
		);
	});
</script>

<div class="fixed w-full h-full flex z-999">
	<div
		class="absolute w-full h-full backdrop-blur-lg bg-white/10 dark:bg-gray-900/50 flex justify-center"
	>
		<div class="m-auto pb-10 flex flex-col justify-center">
			<div class="max-w-md">
				<div
					class="text-center dark:text-white text-2xl font-medium z-50"
					style="white-space: pre-wrap;"
				>
					{#if ($config?.ui?.pending_user_overlay_title ?? "").trim() !== ""}
						{$config.ui.pending_user_overlay_title}
					{:else}
						{$i18n.t("Account Activation Pending")}<br />
						{$i18n.t("Contact Admin for rexpro Access")}
					{/if}
				</div>

				<div
					class=" mt-4 text-center text-sm dark:text-gray-200 w-full"
					style="white-space: pre-wrap;"
				>
					{#if ($config?.ui?.pending_user_overlay_content ?? "").trim() !== ""}
						{@html DOMPurify.sanitize(
							marked.parse(
								(
									$config?.ui?.pending_user_overlay_content ??
									""
								).replace(/\n/g, "<br>"),
							),
						)}
					{:else}
						{$i18n.t(
							"Your account status is currently pending activation.",
						)}{"\n"}{$i18n.t(
							"To access the rexpro, please reach out to the administrator. Admins can manage user statuses from the Admin Panel.",
						)}
					{/if}
				</div>

				{#if adminDetails}
					<div class="mt-4 text-sm font-medium text-center">
						<div>
							{$i18n.t("Admin")}: {adminDetails.name} ({adminDetails.email})
						</div>
					</div>
				{/if}

				<div class=" mt-6 mx-auto relative group w-fit">
					<button
						class="relative z-20 flex px-5 py-2 rounded-full bg-white border border-gray-100 dark:border-none hover:bg-gray-100 text-gray-700 transition font-medium text-sm"
						on:click={async () => {
							location.href = "/";
						}}
					>
						{$i18n.t("Check Again")}
					</button>

					<button
						class="text-xs text-center w-full mt-2 text-gray-400 underline"
						on:click={async () => {
							localStorage.removeItem("token");
							location.href = "/auth";
						}}>{$i18n.t("Sign Out")}</button
					>
				</div>
			</div>
		</div>
	</div>
</div>