atsebay.t/ui/src/routes/__layout.svelte

<script context="module">
 import { user } from '../stores/user';
 let stop_refresh = false;

 let refresh_interval_auth = null;
 async function refresh_auth(cb=null, interval=null) {
     if (refresh_interval_auth)
         clearInterval(refresh_interval_auth);
     if (interval === null) {
         interval = Math.floor(Math.random() * 200000) + 200000;
     }
     if (stop_refresh) {
         return;
     }
     refresh_interval_auth = setInterval(refresh_auth, interval);

     const res = await fetch('api/auth', {headers: {'Accept': 'application/json'}})
     if (res.status == 200) {
         const auth = await res.json();
         user.set(auth);
     } else {
         user.set(null);
     }
 }

 export async function load({ props, stuff, url }) {
     refresh_auth();

     const rroutes = url.pathname.split('/');

     return {
         props: {
             ...props,
             rroute: rroutes.length>1?rroutes[1]:'',
         },
         stuff: {
             ...stuff,
             refresh_auth,
         }
     };
 }
</script>

<script>
 import AuthButton from '../components/AuthButton.svelte';
 import Toaster from '../components/Toaster.svelte';

 export let rroute = '';

 function switchAdminMode() {
     var tmp = $user.is_admin;
     $user.is_admin = $user.was_admin || false;
     $user.was_admin = tmp;
 }

 function disconnectCurrentUser() {
     fetch('api/auth/logout', {
         method: 'POST'
     }).then((response) => {
	 refresh_auth();
     });
 }

 let isSRS = false;
 $: {
     isSRS = window.location.host === 'srs.nemunai.re' || ($user && ($user.groups.includes('ing-srs') || $user.groups.includes('teachers')))
 }
</script>

<svelte:head>
    <title>ЕРІТА: MCQ and others courses related stuff</title>
</svelte:head>

{#if isSRS}
    <div style="position: fixed; bottom: 20px; right: 20px; z-index: -1; background-image: url('img/srstamps.png'); background-size: cover; width: 125px; height: 125px;"></div>
{/if}
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
    <div class="container">
        <a class="navbar-brand" href=".">
	   ЕРІТА
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#loggedMenu" aria-controls="loggedMenu" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="loggedMenu">
	    <ul class="navbar-nav mr-auto">
	        <li class="nav-item">
                    <a class="nav-link" href="adlin" target="_self">AdLin</a>
                </li>
                {#if isSRS}
	            <li class="nav-item">
                        <a class="nav-link" href="fic" target="_self">FIC</a>
                    </li>
                {/if}
	        <li class="nav-item">
                    <a class="nav-link" class:active={rroute === 'surveys'} href="surveys">
                        Questionnaires
                    </a>
                </li>
                {#if $user && $user.is_admin}
                    <li class="nav-item"><a class="nav-link" class:active={rroute === 'works'} href="works">Travaux</a></li>
                    <li class="nav-item"><a class="nav-link" class:active={rroute === 'users'} href="users">Étudiants</a></li>
                {/if}
	        <li class="nav-item"><a class="nav-link" href="virli" target="_self">VIRLI</a></li>
	    </ul>

	    <ul class="navbar-nav ms-auto">
                {#if $user}
                    {#if $user.was_admin}
                        <li class="nav-item">
                            <button class="btn btn-dark" on:click={switchAdminMode}>
	                        Vue admin
	                    </button>
                        </li>
                    {:else if $user.is_admin}
                        <li class="nav-item">
                            <button class="btn btn-light" on:click={switchAdminMode}>
	                        Vue étudiant
	                    </button>
                        </li>
                    {/if}
	            <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">
                            <img class="rounded-circle" src="//photos.cri.epita.fr/square/{$user.login}" alt="Menu" style="margin: -0.75em 0; max-height: 2.5em; border: 2px solid white;">
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end">
	                    <li><a class="dropdown-item" class:active={rroute === 'keys'} href="keys">Clef PGP</a></li>
	                    <li><a class="dropdown-item" class:active={rroute === 'help'} href="help">Besoin d'aide&nbsp;?</a></li>
	                    <li><a class="dropdown-item" class:active={rroute === 'bug-bounty'} href="bug-bounty">Bug Bounty</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li>
                                <button class="dropdown-item" on:click={disconnectCurrentUser}>
	                            Se déconnecter
	                        </button>
                            </li>
                        </ul>
                    </li>
                {:else if $user === undefined}
                    <li class="nav-item">
                        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                    </li>
                {:else}
                    <li class="nav-item">
                        <AuthButton class="btn btn-dark">
                            Se connecter
                        </AuthButton>
                    </li>
                {/if}
	    </ul>
        </div>
    </div>
</nav>

<div class="container mt-3">
    <slot></slot>
</div>

<Toaster />