First commit

src/lib/HeaderBar.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+    import { page } from "$app/stores";
+</script>
+
+<div id="header-bar">
+    <div id="logo-box">
+        <a href="/">
+            <img class="logo-img" src="/logo/logo-colour.svg" alt="FJLA Logo" width="50" height="50">
+            <!--<img class="logo-img" id="logo-black" src="/logo/logo-black.svg" alt="FJLA Logo" width="50" height="50">
+        --> </a>
+    </div>
+    {#if $page.data.session}
+      <a class="account-link" href="/logout">Sign out</a>
+    {/if}
+</div>
+<div id="spacer"></div>
+
+<style>
+    #header-bar {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        background-color: darkslategrey;
+        height: 60px;
+    }
+
+    #logo-box {
+        padding: 5px;
+        height: 50px;
+    }
+
+    .logo-img {
+        position: absolute;
+        left: 5px;
+    }
+
+    .account-link {
+    position: absolute;
+    right: 10px;
+    top: 0px;
+    height: 60px;
+    width: 140px;
+    color: white;
+    background-color: darkslategrey;
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+    font-weight: 900;
+    font-size: larger;
+    text-decoration: none;
+    text-align: center;
+    border-radius: 0px;
+
+    /* Flexbox styles for centering */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+
+    .account-link:hover {
+        background-color: rgb(54, 90, 90);
+    }
+
+    #spacer {
+        height: 90px;
+    }
+
+</style>

src/lib/app-cards/AppCardArray.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import MasterAppCard from "./MasterAppCard.svelte";
+</script>
+
+<div id="card-container">
+    <MasterAppCard appName={"My Account"} appDesc={"Manage your password and passkeys"} iconName={"myaccount"} sso={true} appUrl={"https://sso.fjla.uk/realms/FJLA.net/account"} />
+    <MasterAppCard appName={"Nextcloud"} appDesc={"Files, Email, Calendar, Chat"} iconName={"nextcloud"} sso={false} appUrl={"https://cloud.fjla.uk"} bgColor={"#0082c9"} />
+    <MasterAppCard appName={"Portainer"} appDesc={"Manage containerised workloads in Docker"} iconName={"portainer"} sso={true} appUrl={"https://swarm_nodes.fjla.net:9443"} nointernet={true} bgColor={"#3BBCED"} />
+    <MasterAppCard appName={"SpeedyF"} appDesc={"Online Compressor for PDF Files"} iconName={"speedyf"} sso={false} appUrl={"https://speedyf.fjla.uk"} bgColor={"#00001a"} />
+    <MasterAppCard appName={"Jellyfin"} appDesc={"Stream films and TV, watch Live TV"} iconName={"jellyfin"} sso={false} appUrl={"http://jf.fjla.net:8096"} nointernet={true} bgColor={"#AA5CC3"} />
+    <MasterAppCard appName={"Proxmox"} appDesc={"Manage virtual machines"} iconName={"proxmoxve"} sso={true} appUrl={"https://pve0124.fjla.net:8006"} nointernet={true} bgColor={"#e57000"} />
+    <MasterAppCard appName={"Home Assistant"} appDesc={"Smart Home Management"} iconName={"homeassistant"} sso={false} appUrl={"https://ha.fjla.uk"} bgColor={"#18BCF2"} />
+    <MasterAppCard appName={"Gitea"} appDesc={"Code & Package Repo"} iconName={"gitea"} sso={true} appUrl={"https://git.fjla.uk"} bgColor={"#609926"} />
+</div>
+
+<style>
+    #card-container {
+        width: 90%;
+        margin: 0 auto;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 1px;
+        padding: 0px;
+        box-sizing: border-box;
+    }
+</style>

src/lib/app-cards/MasterAppCard.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+    export let appName: string;
+    export let appDesc: string;
+    export let iconName: string;
+    export let sso: boolean;
+    export let nointernet: boolean = false;
+    export let appUrl: string = "#";
+    export let bgColor: string = "rgb(134, 134, 134)"
+</script>
+
+<div id="app-card" style="background-color:{bgColor}">
+    <a class="app-link" href={appUrl}>
+    <img src="/icons/{iconName}.svg" alt="{iconName}">
+    <div id="card-text">
+        <header id="app-name">{appName}</header>
+        <p id="app-desc">{appDesc}</p>
+    </div>
+    <div id="sign-on-type">
+        {#if sso}
+          <img src="/logo/logo-black.svg" alt="Single Sign-on" width=25 height=25>
+        {:else}
+          <img src="/icons/not-sso.svg" alt="Single Sign-on not supported" width=25 height=25>
+        {/if}
+        {#if nointernet}
+          <img src="/icons/nointernet.svg" alt="Not available when not connected to FJLA WiFi" width=25 height=25>
+        {/if}
+    </div>
+    </a>
+</div>
+
+
+<style>
+    #app-card {
+        width: calc(25% - 2px);
+        box-sizing: border-box;
+        text-align: center;
+        margin: auto;
+        margin-top: 0px;
+        margin-bottom: 0px;
+        text-decoration: none;
+        color: white;
+        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+        padding: 10px;
+        border-radius: 3px;
+        transition: all 0.2s;
+    }
+
+    /* Responsive styles for smaller screens */
+@media (max-width: 875px) {
+  #app-card {
+    width: calc(50% - 2px); /* 2 cards per row on smaller screens */
+  }
+}
+
+@media (max-width: 676px) {
+  #app-card {
+    width: calc(100% - 2px); /* 1 card per row on very small screens */
+  }
+}
+
+    #app-card:hover {
+        opacity: 75%;
+    }
+
+    #app-name {
+        font-weight: 600;
+        font-size: larger;
+    }
+
+    #app-desc {
+        margin-top: 10px;
+        margin-bottom: 4px;
+    }
+
+    .app-link{
+        text-decoration: none;
+        color: white;
+    }
+</style>

src/lib/buttons/Login.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import { SignIn } from "@auth/sveltekit/components";
+
+</script>
+
+<SignIn provider="keycloak" redirectTo="/">
+    <div slot="submitButton" class="buttonPrimary">Login</div>
+</SignIn>
+
+<style>
+</style>

src/lib/db.ts

@@ -0,0 +1,35 @@
+import { MongoClient, ServerApiVersion } from "mongodb";
+
+if (!process.env.MONGODB_URI) {
+    console.log(process.env.MONGODB_URI)
+    console.log("MONGODB_URI Not valid, auth will not work");
+}
+
+const uri = process.env.MONGODB_URI || "mongodb://localhost:27017";
+const options = {
+    serverApi: {
+        version: ServerApiVersion.v1,
+        strict: true,
+        deprecationErrors: true,
+    },
+};
+
+let client: MongoClient
+
+if (process.env.NODE_ENV !== "production") {
+    const globalWithMongo = global as typeof globalThis & {
+        _mongoClient?: MongoClient
+    }
+
+    if (!globalWithMongo._mongoClient) {
+        globalWithMongo._mongoClient = new MongoClient(uri, options)
+      }
+      client = globalWithMongo._mongoClient
+    } else {
+      // In production mode, it's best to not use a global variable.
+      client = new MongoClient(uri, options)
+    }
+     
+    // Export a module-scoped MongoClient. By doing this in a
+    // separate module, the client can be shared across functions.
+    export default client

src/lib/index.ts

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.

src/lib/notLoggedIn.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+    import Login from "./buttons/Login.svelte";
+</script>
+
+<div id="content-container">
+<img id="large-logo" src="/logo/logo-colour.svg" width=125 height=125 alt="Logo">
+
+<div id="bounding-box">
+    <header>You are not signed in</header>
+    <Login />
+
+    <p>When you login for the first time, you will have to verify your email address and register a passkey to enable your account, <a href="passkey">click here</a> for help.</p>
+    <p><a href="https://sso.fjla.uk/realms/FJLA.net/login-actions/reset-credentials" target="_blank">Forgot your password?</a></p>
+</div>
+</div>
+<style>
+    #content-container {
+        width: 100%;
+        text-align: center;
+        margin: 10 auto;
+        padding: 25px;
+        box-sizing: border-box;
+    }
+    #large-logo {
+        margin: 0 auto;
+    }
+    #bounding-box {
+        margin: auto;
+        text-align: center;
+        background-color: lightgrey;
+        width: 75%;
+        min-width: 200px;
+        max-width: 800px;
+        border-radius: 25px;
+        margin-top: 25px;
+    }
+
+    header {
+        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+        font-size: large;
+        padding: 15px;
+    }
+
+    p {
+        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+        padding: 15px;
+    }
+</style>