dependency bump ⏫

ref #12

nginx.conf

@@ -6,16 +6,19 @@ http {
     server {
         error_page 404 /index.html;
         root /usr/share/nginx/html;
+        location / {
+            try_files $uri $uri/ /index.html;
+        }
         location ~* \.(?:ico|css|js|gif|jpe?g|png)$ {
             expires 1y;
             add_header Pragma public;
             add_header Cache-Control "public";
         }
         # --- Brotli
-        # brotli on;
+        brotli on;
-        # brotli_comp_level 6;
+        brotli_comp_level 6;
-        # brotli_static on;
+        brotli_static on;
-        # brotli_types application/atom+xml application/javascript application/json application/rss+xml application/vnd.ms-fontobject application/x-font-opentype application/x-font-truetype application/x-font-ttf application/x-javascript application/xhtml+xml application/xml font/eot font/opentype font/otf font/truetype image/svg+xml image/vnd.microsoft.icon image/x-icon image/x-win-bitmap text/css text/javascript text/plain text/xml;
+        brotli_types application/atom+xml application/javascript application/json application/rss+xml application/vnd.ms-fontobject application/x-font-opentype application/x-font-truetype application/x-font-ttf application/x-javascript application/xhtml+xml application/xml font/eot font/opentype font/otf font/truetype image/svg+xml image/vnd.microsoft.icon image/x-icon image/x-win-bitmap text/css text/javascript text/plain text/xml;
         # --- GZIP
         gzip on;
         gzip_disable "msie6";

package.json

@@ -9,7 +9,7 @@
 		"licenses:export": "license-exporter --md"
 	},
 	"dependencies": {
-		"@odit/lfk-client-js": "0.0.8",
+		"@odit/lfk-client-js": "0.0.9",
 		"filepond": "^4.25.1",
 		"gridjs": "^3.2.1",
 		"localforage": "^1.9.0",

src/App.svelte

@@ -47,6 +47,8 @@
   import TracksOverview from "./components/TracksOverview.svelte";
   import OrgDetail from "./components/OrgDetail.svelte";
   import Teams from "./components/Teams.svelte";
+  import { OpenAPI, AuthService } from "@odit/lfk-client-js";
+  OpenAPI.BASE = config.baseurl;
   store.init();
 
   if ("serviceWorker" in navigator) {

src/components/AddTrackModal.svelte

@@ -1,5 +1,6 @@
 <script>
   import { _ } from "svelte-i18n";
+  import { clickOutside } from "./outsideclick";
   import { focusTrap } from "svelte-focus-trap";
   import { tracks as tracksstore } from "../store.js";
   import { TrackService } from "@odit/lfk-client-js";
@@ -76,11 +77,19 @@
 </script>
 
 {#if modal_open}
-  <div class="fixed z-10 inset-0 overflow-y-auto" use:focusTrap>
+  <div
+    class="fixed z-10 inset-0 overflow-y-auto"
+    use:focusTrap
+    use:clickOutside
+    on:click_outside={() => {
+      modal_open = false;
+    }}>
     <div
       class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
-        <div class="absolute inset-0 bg-gray-500 opacity-75" />
+        <div
+          class="absolute inset-0 bg-gray-500 opacity-75"
+          data-id="modal_backdrop" />
       </div>
       <span
         class="hidden sm:inline-block sm:align-middle sm:h-screen"

src/components/Dash.svelte

@@ -538,7 +538,7 @@
               stroke-linejoin="round" size="18" height="18" width="18" xmlns="http://www.w3.org/2000/svg">
               <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
             </svg><span
-              class="absolute uppercase font-bold inline-flex text-center p-0 leading-none text-2xs h-4 w-4 inline-flex items-center justify-center rounded-full bg-blue-500 text-white"
+              class="absolute uppercase font-bold inline-flex text-center p-0 leading-none text-2xs h-4 w-4 items-center justify-center rounded-full bg-blue-500 text-white"
               style="top:14px;right:8px">5</span></button>
           <div class="dropdown absolute top-0 right-0 mt-16 ">
             <div class="dropdown-content w-64 bottom-start">
@@ -659,7 +659,7 @@
         <div class="relative"><button class="flex h-16 w-8 rounded-full ml-2 relative"><span
               class="absolute top-0 left-0 pt-4"><img class="h-8 w-8 rounded-full shadow" src="/images/faces/m1.png"
                 alt="avatar"><span
-                class="absolute uppercase font-bold inline-flex text-center p-0 leading-none text-2xs h-4 w-4 inline-flex items-center justify-center rounded-full bg-red-500 text-white shadow-outline-white"
+                class="absolute uppercase font-bold inline-flex text-center p-0 leading-none text-2xs h-4 w-4 items-center justify-center rounded-full bg-red-500 text-white shadow-outline-white"
                 style="top:10px;right:-4px">2</span></span></button>
           <div class="dropdown absolute top-0 right-0 mt-16 ">
             <div class="dropdown-content w-48 bottom-end">
@@ -672,7 +672,7 @@
                         <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                         <polyline points="22,6 12,13 2,6"></polyline>
                       </svg><span class="mx-2">Inbox</span><span
-                        class="uppercase font-bold inline-flex text-center p-0 leading-none text-2xs h-4 w-4 inline-flex items-center justify-center rounded-full bg-red-500 text-white ml-auto">2</span></a>
+                        class="uppercase font-bold inline-flex text-center p-0 leading-none text-2xs h-4 w-4 items-center justify-center rounded-full bg-red-500 text-white ml-auto">2</span></a>
                   </li>
                   <li class="dropdown-item"><a class="flex flex-row items-center justify-start h-10 w-full px-2"
                       href="/"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24"
@@ -682,7 +682,7 @@
                           points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
                         </polygon>
                       </svg><span class="mx-2">Messages</span><span
-                        class="uppercase font-bold inline-flex text-center p-0 leading-none text-2xs h-4 w-4 inline-flex items-center justify-center rounded-full bg-blue-500 text-white ml-auto">3</span></a>
+                        class="uppercase font-bold inline-flex text-center p-0 leading-none text-2xs h-4 w-4 items-center justify-center rounded-full bg-blue-500 text-white ml-auto">3</span></a>
                   </li>
                   <li class="dropdown-item"><a class="flex flex-row items-center justify-start h-10 w-full px-2"
                       href="/extras/user-profile"><svg stroke="currentColor" fill="none" stroke-width="2"

src/components/Footer.svelte

@@ -2,11 +2,8 @@
   import { _ } from "svelte-i18n";
 </script>
 
-<footer class="block py-4">
+<footer class="container">
-  <div class="container mx-auto px-4">
+  <hr class="mt-2 mb-4 border-b-1 border-gray-300" />
-    <hr class="mb-4 border-b-1 border-gray-300" />
-    <footer class="text-gray-700 body-font">
-      <div class="container mx-auto flex items-center sm:flex-row flex-col">
   <p class="text-sm text-gray-500 mt-4">
     Lauf für Kaya! Läufersystem - Copyright © 2020 + proudly powered by
     <a
@@ -15,7 +12,4 @@
       rel="noopener,noreferrer"
       target="_blank">ODIT.Services</a>
   </p>
-      </div>
-    </footer>
-  </div>
 </footer>

src/components/ForgotPassword.svelte

@@ -1,23 +1,28 @@
 <script>
+  import { ApiError, AuthService } from "@odit/lfk-client-js";
   import { _ } from "svelte-i18n";
-  import store from "../store.js";
-  store.init();
-  //
-  import { OpenAPI, AuthService } from "@odit/lfk-client-js";
-  import isEmail from "validator/es/lib/isEmail";
-
-  //
   import Toastify from "toastify-js";
   import "toastify-js/src/toastify.css";
+  import isEmail from "validator/es/lib/isEmail";
+
   let reset_mail_sent = false;
   let usersEmail = "";
   function reset() {
     if (isEmail(usersEmail)) {
+      AuthService.authControllerGetResetToken({ email: usersEmail })
+        .then((resp) => {
+          console.log(resp);
+          console.log(resp.resetToken);
           Toastify({
             text: $_("mail-validation-in-progress"),
             duration: 3500,
           }).showToast();
           reset_mail_sent = true;
+        })
+        .catch((err) => {
+          console.log(err.body.name);
+          console.log(err.body.message);
+        });
     } else {
       Toastify({
         text: $_("invalid-mail-reset"),
@@ -30,11 +35,7 @@
 {#if reset_mail_sent}
   <div class="min-h-screen flex items-center justify-center bg-gray-100">
     <div class="max-w-md w-full py-12 px-6">
-      <img
+      <img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
-        style="height:10rem;"
-        class="mx-auto"
-        src="/lfk-logo.png"
-        alt="" />
       <p class="mt-6 text-lg text-center font-bold text-gray-900">
         {$_('application_name')}
       </p>
@@ -57,11 +58,7 @@
 {:else}
   <div class="min-h-screen flex items-center justify-center bg-gray-100">
     <div class="max-w-md w-full py-12 px-6">
-      <img
+      <img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
-        style="height:10rem;"
-        class="mx-auto"
-        src="/lfk-logo.png"
-        alt="" />
       <p class="mt-6 text-lg text-center font-bold text-gray-900">
         {$_('application_name')}
       </p>

src/components/Login.svelte

@@ -4,7 +4,6 @@
   import { _ } from "svelte-i18n";
   store.init();
   import { OpenAPI, AuthService } from "@odit/lfk-client-js";
-  OpenAPI.BASE = config.baseurl;
   import Toastify from "toastify-js";
   // ------
   let username = "demo";
@@ -82,12 +81,8 @@
 
 <div
   class="min-h-screen flex items-center justify-center bg-gray-100 text-gray-900">
-  <div class="max-w-md w-full py-12 px-6">
+  <div class="max-w-md w-full py-12 px-6" role="main">
-    <img
+    <img style="height:10rem;" class="mx-auto" src="/lfk-logo.png" alt="" />
-      style="height:10rem;"
-      class="mx-auto"
-      src="/lfk-logo.png"
-      alt="" />
     <p class="mt-6 text-lg text-center font-bold">{$_('application_name')}</p>
     <p class="mt-6 text-sm text-center">{$_('log_in_to_your_account')}</p>
     <div>

src/components/outsideclick.js

@@ -0,0 +1,10 @@
+/** Dispatch event on click outside of node */
+export function clickOutside(node) {
+	const handleClick = (event) => {
+		if (event.target.getAttribute('data-id') === 'modal_backdrop') {
+			node.dispatchEvent(new CustomEvent('click_outside', node));
+		}
+	};
+	document.removeEventListener('click', handleClick, true);
+	document.addEventListener('click', handleClick, true);
+}