basic ForgotPassword improvements

validation, steps towards error handlind

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/Footer.svelte

@@ -2,20 +2,14 @@
   import { _ } from "svelte-i18n";
 </script>
 
-<footer class="block py-4">
-  <div class="container mx-auto px-4">
-    <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
-            class="underline"
-            href="https://odit.services"
-            rel="noopener,noreferrer"
-            target="_blank">ODIT.Services</a>
-        </p>
-      </div>
-    </footer>
-  </div>
+<footer class="container">
+  <hr class="mt-2 mb-4 border-b-1 border-gray-300" />
+  <p class="text-sm text-gray-500 mt-4">
+    Lauf für Kaya! Läufersystem - Copyright © 2020 + proudly powered by
+    <a
+      class="underline"
+      href="https://odit.services"
+      rel="noopener,noreferrer"
+      target="_blank">ODIT.Services</a>
+  </p>
 </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)) {
-      Toastify({
-        text: $_("mail-validation-in-progress"),
-        duration: 3500,
-      }).showToast();
-      reset_mail_sent = true;
+      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
-        style="height:10rem;"
-        class="mx-auto"
-        src="/lfk-logo.png"
-        alt="" />
+      <img 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
-        style="height:10rem;"
-        class="mx-auto"
-        src="/lfk-logo.png"
-        alt="" />
+      <img 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";

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);
+}