Refactor/remove index uni (#9)

* refactor: remove unused code * refactor: remove secondary session call * refactor: switch index based routing to hash based * fix: actually require fields in form * refactor: remove useless link --------- Co-authored-by: Korbinian Flietel <[email protected]>
nmshd · Feb 22, 2023 · 213e91a · 213e91a
1 parent 5f36a5e
commit 213e91a
Show file tree

Hide file tree

Showing 9 changed files with 69 additions and 160 deletions.
diff --git a/packages/demo-frontend/src/App.svelte b/packages/demo-frontend/src/App.svelte
@@ -34,9 +34,7 @@
             authorization: `Bearer ${keycloakTokens.access_token}`
           }
         });
-        // This call is needed to make the session persistant if the user imedatiely leaves the site and returns.
-        // TODO: Why do we need this/how do we fix this?
-        await axios.get("api/v1/session");
+
         userInfo.set(u.data);
         loggedIn.set(true);
         await push(`${parsed.redirect ?? "/"}`);

diff --git a/packages/school-frontend/src/App.svelte b/packages/school-frontend/src/App.svelte
@@ -2,11 +2,11 @@
   import axios from "axios";
   import { parse } from "qs";
   import { onMount } from "svelte";
-  import Router, { push, querystring } from "svelte-spa-router";
+  import Router, { querystring } from "svelte-spa-router";
   import { Styles } from "sveltestrap";
   import { io } from "./lib/realtime";
   import { routes } from "./lib/routes.svelte";
-  import { loggedIn, siteConfig, userInfo } from "./store";
+  import { siteConfig } from "./store";
   $: parsed = parse($querystring!);
 
   onMount(async () => {
@@ -15,20 +15,6 @@
 
       siteConfig.set(config.data);
 
-      io.on("register", async (keycloakTokens) => {
-        const u = await axios.post("api/v1/auth/login", null, {
-          headers: {
-            authorization: `Bearer ${keycloakTokens.access_token}`
-          }
-        });
-        // This call is needed to make the session persistant if the user imedatiely leaves the site and returns.
-        // TODO: Why do we need this/how do we fix this?
-        await axios.get("api/v1/session");
-        userInfo.set(u.data);
-        loggedIn.set(true);
-        await push(`${parsed.redirect ?? "/"}`);
-      });
-
       io.on("error", (e) => {
         alert(e);
       });

diff --git a/packages/university-frontend/src/App.svelte b/packages/university-frontend/src/App.svelte
@@ -3,10 +3,8 @@
   import axios from "axios";
   import { parse } from "qs";
   import { onMount } from "svelte";
-  import Router, { push, querystring } from "svelte-spa-router";
+  import Router, { location, push, querystring, replace } from "svelte-spa-router";
   import { Container, Styles } from "sveltestrap";
-  import Index from "./components/index.svelte";
-  import State from "./components/state.svelte";
   import { io } from "./lib/realtime";
   import { routes } from "./lib/routes.svelte";
   import {
@@ -20,7 +18,7 @@
   } from "./store";
   $: parsed = parse($querystring!);
 
-  let stateIndex = 0;
+  console.log($location);
 
   onMount(async () => {
     try {
@@ -46,9 +44,7 @@
             authorization: `Bearer ${keycloakTokens.access_token}`
           }
         });
-        // This call is needed to make the session persistant if the user imedatiely leaves the site and returns.
-        // TODO: Why do we need this/how do we fix this?
-        await axios.get("api/v1/session");
+
         userInfo.set(u.data);
         loggedIn.set(true);
         await push(`${parsed.redirect ?? "/"}`);
@@ -87,22 +83,31 @@
 
 <main>
   <div class="story-container">
-    <div class="sidebar" style="width:25%"><Index index={stateIndex} /></div>
     <div class="story-content">
       {#if $siteConfig && $userInfo}
         {#if $loggedIn !== undefined}
           <Container>
             {#if $loggedIn}
               <NavbarLoggedIn userName={$userInfo.preferred_username} {siteConfig} />
-              <div class="row align-self-center">
-                <State bind:stateIndex />
-              </div>
             {:else}
               <NavbarLoggedOut {siteConfig} />
-              <div class="row align-self-center">
-                <Router {routes} />
-              </div>
             {/if}
+            <div class="row align-self-center">
+              <div class={$location !== "/login" && $location !== "/register" ? "story" : ""}>
+                <div class={$location !== "/login" && $location !== "/register" ? "story-content" : ""}>
+                  <Router
+                    {routes}
+                    on:conditionsFailed={async (event) => {
+                      if (event.detail.route === "/login" || event.detail.route === "/register") {
+                        await replace("/");
+                      } else {
+                        await replace(`/login?redirect=${event.detail.route !== "*" ? event.detail.route : "/"}`);
+                      }
+                    }}
+                  />
+                </div>
+              </div>
+            </div>
           </Container>
         {/if}
       {/if}
@@ -117,11 +122,18 @@
     height: 100%;
   }
 
-  .sidebar {
-    border-right: 6px solid black;
-    flex: 15%;
-    background-color: lightgray;
-    padding: 2em;
+  .story {
+    position: relative;
+    min-height: 800px;
+    height: 100%;
+  }
+
+  .story-content {
+    position: relative;
+    max-height: 90%;
+    height: 90%;
+    display: flex;
+    justify-content: center;
   }
 
   .story-container {
@@ -137,12 +149,6 @@
     padding: 0 2em;
   }
 
-  .story-state {
-    height: 95%;
-    min-height: 800px;
-    min-width: 600px;
-  }
-
   @media (min-width: 640px) {
     main {
       max-width: none;

diff --git a/packages/university-frontend/src/components/application.svelte b/packages/university-frontend/src/components/application.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
   import axios from "axios";
   import { onMount } from "svelte";
+  import { replace } from "svelte-spa-router";
   import { Button, FormGroup, Image, Input, Progress } from "sveltestrap";
   import { application, applicationRequestStatus, Status, userInfo } from "../store";
-  export let stateIndex: number;
 
   let imageBuffer: string;
 
@@ -53,7 +53,7 @@
     <h2 class="display-1">Daten zur Person</h2>
     <hr />
 
-    <form>
+    <form on:submit|preventDefault={async () => await replace("/final")}>
       <h3>Persönlicher Daten</h3>
       <br />
       <FormGroup floating label="Vorname*">
@@ -72,13 +72,14 @@
                 $application.birthDate.day
               )}`
             : ""}
+          required
         />
       </FormGroup>
       <FormGroup floating label="Geburtsland*">
-        <Input id="birth_country" name="Geburtsland" value={$application.birthPlace?.country ?? ""} />
+        <Input id="birth_country" name="Geburtsland" value={$application.birthPlace?.country ?? ""} required />
       </FormGroup>
       <FormGroup floating label="Staatsangehörigkeit*">
-        <Input id="nationality" name="Staatsangehörigkeit" value={$application.nationality ?? ""} />
+        <Input id="nationality" name="Staatsangehörigkeit" value={$application.nationality ?? ""} required />
       </FormGroup>
       <FormGroup floating label="Geschlecht*">
         <select id="gender" class="form-select form-select-sm" aria-label=".form-select-sm example" required>
@@ -93,24 +94,24 @@
 
       <h3>Addresse</h3>
       <FormGroup floating label="Straße, Hausnummer*">
-        <Input id="street_num" name="StraßeNummer" value={$application.streetAddress?.houseNumber ?? ""} />
+        <Input id="street_num" name="StraßeNummer" value={$application.streetAddress?.houseNumber ?? ""} required />
       </FormGroup>
       <FormGroup floating label="PLZ*">
-        <Input id="zip" name="PLZ" value={$application.streetAddress?.zipCode ?? ""} />
+        <Input id="zip" name="PLZ" value={$application.streetAddress?.zipCode ?? ""} required />
       </FormGroup>
       <FormGroup floating label="Ort*">
-        <Input id="place" name="Ort" value={$application.streetAddress?.city ?? ""} />
+        <Input id="place" name="Ort" value={$application.streetAddress?.city ?? ""} required />
       </FormGroup>
       <FormGroup floating label="Land*">
-        <Input id="country" name="Land" value={$application.streetAddress?.country ?? ""} />
+        <Input id="country" name="Land" value={$application.streetAddress?.country ?? ""} required />
       </FormGroup>
       <FormGroup floating label="Telefon">
         <Input id="telefone" name="Telefon" value={$application.phoneNumber ?? ""} />
       </FormGroup>
       <br />
 
       <FormGroup>
-        <Button type="submit" color="primary" block on:click={() => stateIndex++}>Weiter</Button>
+        <Button type="submit" color="primary" block>Weiter</Button>
       </FormGroup>
     </form>
   </div>

diff --git a/packages/university-frontend/src/components/final.svelte b/packages/university-frontend/src/components/final.svelte
@@ -3,7 +3,6 @@
   import { onMount } from "svelte";
   import { Button, Container, Image } from "sveltestrap";
   import { userInfo } from "../store";
-  export let stateIndex: number;
 
   let imageBuffer: string;
 
@@ -73,11 +72,6 @@
     font-weight: bold;
   }
 
-  h3 {
-    color: #0158ab;
-    font-size: 20px;
-  }
-
   .update {
     padding: 24px;
     top: 10vh;
@@ -90,8 +84,4 @@
     padding: 0 18px;
     margin: auto;
   }
-
-  a {
-    color: white;
-  }
 </style>
diff --git a/packages/university-frontend/src/components/index.svelte b/packages/university-frontend/src/components/index.svelte
diff --git a/packages/university-frontend/src/components/landing.svelte b/packages/university-frontend/src/components/landing.svelte
@@ -1,24 +1,18 @@
 <script lang="ts">
+  import { replace } from "svelte-spa-router";
   import { Button, Container } from "sveltestrap";
   import { userInfo } from "../store";
-  export let stateIndex: number;
 </script>
 
 <Container>
   <h1 class="display-1">Hello {$userInfo.given_name ? $userInfo.given_name : $userInfo.preferred_username}</h1>
   <div>
     Starte deine Bewerbung zur Immatrikulation für das Fach Bachelor of Science Informatik an der Muster Hochschule.
-    <br /><Button color="primary" on:click={() => stateIndex++}>Start</Button>
+    <br /><Button color="primary" on:click={async () => await replace("/application")}>Start</Button>
   </div></Container
 >
 
 <style>
-  code:hover {
-    cursor: pointer;
-  }
-  mark:hover {
-    cursor: pointer;
-  }
   div {
     text-align: left;
   }

diff --git a/packages/university-frontend/src/components/state.svelte b/packages/university-frontend/src/components/state.svelte