feat: More work on portal

5 files changed, 163 insertions, 5 deletions

diff --git a/apps/portal/src/app/pages/_layout.svelte b/apps/portal/src/app/pages/_layout.svelte
index d5af444..04cbdd3 100644
--- a/apps/portal/src/app/pages/_layout.svelte
+++ b/apps/portal/src/app/pages/_layout.svelte
@@ -1,5 +1,6 @@
 <script>
 	import ThemeSwitcher from "$shared/components/theme-switcher.svelte";
+	import {frontpage_base} from "$shared/lib/configuration";
 </script>
 
 <style>
@@ -26,7 +27,7 @@
         height: auto;
     }
 </style>
-
+                                                                                                                                                                                                                                                            
 <main class="container-fluid padding-x-xs padding-x-xxl@xs padding-y-md padding-y-lg@md max-width-sm">
     <div class="z-index-2 position-relative">
         <slot/>
diff --git a/apps/portal/src/app/pages/_layout@loggedin.svelte b/apps/portal/src/app/pages/_layout@loggedin.svelte
new file mode 100644
index 0000000..72515df
--- /dev/null
+++ b/apps/portal/src/app/pages/_layout@loggedin.svelte
@@ -0,0 +1,69 @@
+<script>
+	import ThemeSwitcher from "$shared/components/theme-switcher.svelte";
+	import UserMenu from "$app/components/user-menu.svelte";
+	import {get_session_data} from "$shared/lib/session";
+
+	const session = get_session_data();
+</script>
+
+<style>
+    #decoration {
+        position: absolute;
+        top: 0;
+        left: 0;
+        pointer-events: none;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        z-index: 1;
+    }
+
+    #decoration svg {
+        position: absolute;
+        top: 0;
+        left: 50%;
+        -webkit-transform: translateX(-50%);
+        transform: translateX(-50%);
+        width: 134%;
+        min-width: 1280px;
+        max-width: 1920px;
+        height: auto;
+    }
+</style>
+                                                                                                                                                                                                                                                            
+<main class="container-fluid padding-x-xs padding-x-xxl@xs padding-y-md padding-y-lg@md">
+    <div class="z-index-2 position-relative">
+        <slot/>
+    </div>
+    
+    <div class="flex flex-row gap-xs position-fixed right-0 top-0 margin-md z-index-2">
+        <UserMenu name="{session.profile?.username}"/>
+        <ThemeSwitcher/>
+    </div>
+
+    <figure id="decoration"
+            aria-hidden="true">
+        <svg class="color-contrast-higher opacity-10%"
+             viewBox="0 0 1920 450"
+             fill="none">
+            <g stroke="currentColor"
+               stroke-width="2"
+               stroke-linejoin="round"
+               stroke-linecap="round">
+                <path d="M1449 94.9993V3L1354 48.9995L1259 3V94.9993L1354 140.999L1449 94.9993Z"/>
+                <path d="M1639 94.9993V3L1544 48.9995L1449 3V94.9993L1544 140.999L1639 94.9993Z"/>
+                <path d="M1354 49.0002V141"/>
+                <path d="M1544 49.0002V141"/>
+                <path d="M1449 94.9995L1544 140.999L1449 186.999L1354 140.999L1449 94.9995Z"/>
+                <path d="M1544 141V232.999L1449 278.999L1354 232.999V141"/>
+                <path d="M1449 187V279"/>
+                <path d="M1544 264L1639 310L1544 355.999L1449 310L1544 264Z"/>
+                <path d="M1639 310V402L1544 447.999L1449 402V310"/>
+                <path d="M1544 356.001V448"/>
+                <path d="M1639 94.9995L1734 140.999L1639 186.999L1544 140.999L1639 94.9995Z"/>
+                <path d="M1734 141V232.999L1639 278.999L1544 232.999V141"/>
+                <path d="M1639 187V279"/>
+            </g>
+        </svg>
+    </figure>
+</main>
diff --git a/apps/portal/src/app/pages/home.svelte b/apps/portal/src/app/pages/home.svelte
new file mode 100644
index 0000000..b9b9829
--- /dev/null
+++ b/apps/portal/src/app/pages/home.svelte
@@ -0,0 +1,72 @@
+<script>
+	import {projects_base} from "$shared/lib/configuration";
+	import {get_session_data} from "$shared/lib/session";
+	import {push} from "svelte-spa-router";
+	import Layout from "./_layout@loggedin.svelte";
+	import LinkCard from "$shared/components/link-card.svelte";
+	import {UserIcon, UsersIcon, WatchIcon} from "svelte-feather-icons";
+
+	let showUsers = true;
+	const session = get_session_data();
+</script>
+
+<Layout>
+    <div class="grid gap-md">
+        <div class="row">
+            <h1 class="margin-bottom-xs">Hello {session.profile?.username}</h1>
+            <p>This is your portal to Greatoffice, here you will find all your great apps and management options.</p>
+        </div>
+        <div class="row">
+            <h2 class="margin-bottom-xs">Apps</h2>
+            <div class="grid-auto-md gap-sm">
+                <LinkCard name="Projects"
+                          description="The home for your projects"
+                          text="Open"
+                          target="_blank"
+                          title="Open Projects in a new tab"
+                          href="{projects_base()}">
+                    <figure slot="icon">
+                        <div class="bg-primary bg-opacity-10% padding-xs border-left border-primary border-2">
+                            <WatchIcon size="42"
+                                       class="color-primary"
+                                       strokeWidth="1.2"/>
+                        </div>
+                    </figure>
+                </LinkCard>
+            </div>
+        </div>
+        <div class="row">
+            <h2 class="margin-bottom-xs">Manage</h2>
+            <div class="grid-auto-md gap-sm">
+                <LinkCard name="Profile"
+                          description="Manage your profile information"
+                          text="Open"
+                          title="Go to your profile management page"
+                          on:click={() => push("/profile")}>
+                    <figure slot="icon">
+                        <div class="bg-primary bg-opacity-10% padding-xs border-left border-primary border-2">
+                            <UserIcon size="42"
+                                      class="color-primary"
+                                      strokeWidth="1.2"/>
+                        </div>
+                    </figure>
+                </LinkCard>
+                {#if showUsers}
+                    <LinkCard name="Users"
+                              description="Manage your users"
+                              title="Go to your users management page"
+                              text="Open"
+                              href="{projects_base()}">
+                        <figure slot="icon">
+                            <div class="bg-primary bg-opacity-10% padding-xs border-left border-primary border-2">
+                                <UsersIcon size="42"
+                                           class="color-primary"
+                                           strokeWidth="1.2"/>
+                            </div>
+                        </figure>
+                    </LinkCard>
+                {/if}
+            </div>
+        </div>
+    </div>
+</Layout>
diff --git a/apps/portal/src/app/pages/login.svelte b/apps/portal/src/app/pages/login.svelte
index 2822be0..db010d2 100644
--- a/apps/portal/src/app/pages/login.svelte
+++ b/apps/portal/src/app/pages/login.svelte
@@ -1,7 +1,7 @@
 <script>
 	import {onMount} from "svelte";
-	import {link, querystring} from "svelte-spa-router";
-	import {api_base, projects_base, IconNames} from "$shared/lib/configuration";
+	import {link, replace, querystring} from "svelte-spa-router";
+	import {api_base, projects_base, IconNames, frontpage_base} from "$shared/lib/configuration";
 	import Button from "$shared/components/button.svelte";
 	import Alert from "$shared/components/alert.svelte";
 	import Tile from "$shared/components/tile.svelte";
@@ -47,7 +47,7 @@
 				try {
 					const response = await login(loginForm.values);
 					if (response.ok) {
-						location.replace(projects_base("#/home"));
+						await replace("#/home");
 					} else {
 						if (response.data.title || response.data.text) {
 							loginForm.alert.show("error", {
@@ -62,7 +62,6 @@
 						}
 					}
 				} catch (e) {
-					console.error(e);
 					loginForm.alert.show("error", {
 						title: "An error occured",
 						text: "Could not connect to server, please check your internet connection",
@@ -93,6 +92,7 @@
 </script>
 
 <Layout>
+    <a href="{frontpage_base()}" class="block margin-bottom-xs">Go to {frontpage_base()}</a>
     <Tile>
         <form on:submit|preventDefault={loginForm.submit_form}
               class="max-width-xxs">
diff --git a/apps/portal/src/app/pages/profile/index.svelte b/apps/portal/src/app/pages/profile/index.svelte
new file mode 100644
index 0000000..0929c3c
--- /dev/null
+++ b/apps/portal/src/app/pages/profile/index.svelte
@@ -0,0 +1,16 @@
+<script>
+	import {push} from "svelte-spa-router";
+	import {Bread, Crumb} from "$shared/components/breadcrumb/index";
+	import Layout from "$app/pages/_layout@loggedin.svelte";
+</script>
+
+<Layout>
+    <Bread>
+        <Crumb name="Home"
+               withArrow="true"
+               isLink="true"
+               on:click={() => push("/")}/>
+        <Crumb name="Profile"/>
+    </Bread>
+    <h1>Profile</h1>
+</Layout>