DistrictCentral/imports/ui/App.svelte

<script>
	import {Meteor} from "meteor/meteor";
	import {Route, router} from 'tinro';
	import {useTracker} from 'meteor/rdb:svelte-meteor-data';
	import {Roles} from 'meteor/alanning:roles';
	import Chromebooks from './Chromebooks.svelte';
	import Users from './Users.svelte';
	import Admin from './Admin.svelte';
	import Announcer from './Announcer.svelte';

	// When the URL changes, run the code... in this case to scroll to the top.
	router.subscribe(_ => window.scrollTo(0, 0));

	$: currentUser = useTracker(() => Meteor.user());
	$: canManageLaptops = false;
	$: isAdmin = false;

	Tracker.autorun(() => {
		// For some reason currentUser is always null here, and is not reactive (user changes and this does not get re-called).
		let user = Meteor.user();
		canManageLaptops = user && Roles.userIsInRole(user._id, 'laptop-management', 'global');
		isAdmin = user && Roles.userIsInRole(user._id, 'admin', 'global');
	});

	function performLogin() {
		//Login style can be "popup" or "redirect".  I am not sure we need to request and offline token.
		Meteor.loginWithGoogle({loginStyle: "popup", requestOfflineToken: true}, (err) => {
			if (err) {
				console.log(err);
			} else {
				//console.log("Logged in");
			}
		})
	}

	function performLogout() {
		Meteor.logout();
	}
</script>

<Announcer/>

<div class="container">
	<header class="row">
		<div class="col-12 logoContainer">
			<img class="logo" src="/images/logo.svg"/>
			<div class="login">
				{#if !$currentUser}
					<button type="button" role="button" on:click={performLogin}>Login</button>
				{:else}
					<button type="button" role="button" on:click={performLogout}>Logout</button>
				{/if}
			</div>
		</div>
		<div class="col-12 center" style="margin-bottom: 0"><h1 style="margin-bottom: 0">District Central</h1></div>
		<div class="col-12 center">
			<div class="nav-separator"></div>
		</div>
		<nav class="col-12 center">
			<a href="/">Home</a>
			{#if canManageLaptops}
				<a href="/chromebooks">Chromebooks</a>
			{/if}
			{#if canManageLaptops}
				<a href="/users">Users</a>
			{/if}
			{#if isAdmin}
				<a href="/admin">Admin</a>
			{/if}
		</nav>
	</header>
</div>

<Route path="/">
	<div class="container">
		<div class="row">
			TODO: Some statistics and such.
		</div>
	</div>
</Route>
<Route path="/admin">
	{#if isAdmin}
	<Admin/>
	{/if}
</Route>
<Route path="/chromebooks/*">
	{#if canManageLaptops}
		<Chromebooks/>
	{:else}
		<!-- User not authorized to use this UI.  Don't render anything because it is likely the user is still loading and will have access in a moment. -->
	{/if}
</Route>
<Route path="/users/*">
	{#if isAdmin}
		<Users/>
	{:else}
		<!-- User not authorized to use this UI.  Don't render anything because it is likely the user is still loading and will have access in a moment. -->
	{/if}
</Route>

<style>
    @font-face {
        font-family: 'KaushanScript-Regular';
        font-style: normal;
        font-weight: 400;
        src: url('/fonts/KaushanScript-Regular.ttf') format('truetype');
    }

    .nav-separator {
        height: 0.2rem;
        width: 40%;
        margin-left: 30%;
        background-color: white;
    }

    nav {
        font-size: 1.4rem;
    }

    nav a {
        display: inline-block;
        color: #a6a6ea;
        text-decoration: none;
    }

    nav a:hover {
        color: #6363ee;
        text-decoration: underline;
    }

    nav a + a {
        margin-left: 2rem;
    }

    html {
        background-color: #000121;
        font-family: 'Roboto', sans-serif;
    }

    header {
        background: #2c031c;
        color: white;
        /*background-image: linear-gradient(to bottom, #d0edf5, #e1e5f0 100%);*/
        padding: 20px 15px 15px 15px;
        position: relative;
    }

    h1 {
        color: white;
        font-family: "KaushanScript-Regular", sans-serif;
        font-size: 4rem;
    }

    .logo {
        position: absolute;
        left: 0;
        top: 0;
        width: 8rem;
    }

    .logoContainer {
        height: 0;
        position: relative;
    }

    .login {
        position: absolute;
        right: 0;
        top: 0;
    }

    .login button {
        background: #7171ec;
        border-radius: 999px;
        box-shadow: #5E5DF0 0 10px 20px -10px;
        box-sizing: border-box;
        color: #FFFFFF;
        cursor: pointer;
        font-family: Inter, Helvetica, "Apple Color Emoji", "Segoe UI Emoji", NotoColorEmoji, "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", EmojiSymbols, -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", sans-serif;
        font-weight: 700;
        line-height: 24px;
        opacity: 1;
        outline: 0 solid transparent;
        padding: 8px 18px;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
        width: fit-content;
        word-break: break-word;
        border: 0;
    }

    @media (max-width: 600px) {
        .logo {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            margin: 0 auto;
            width: 8rem;
        }
        .logoContainer {
            height: 6rem;
        }
    }
</style>