tmp

Dockerfile

@@ -0,0 +1,6 @@
+FROM fholzer/nginx-brotli:v1.19.1
+ENV APP_CONF="config={}"
+# TODO: buildstep
+COPY ./dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf.template
+# COPY ./nginx.conf /etc/nginx/nginx.conf

docker-compose.yml

@@ -0,0 +1,9 @@
+version: '3'
+services:
+    httpd:
+        build: .
+        environment:
+            - APP_CONF=config={"baseUrl":"http://localhost:8081"}
+        command: ["sh", "-c", "envsubst < /etc/nginx/conf.d/default.conf.template > /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'"]
+        ports:
+            - 4050:80

nginx.conf

@@ -0,0 +1,30 @@
+# http {
+    include mime.types;
+    # sendfile on;
+    server {
+        root /usr/share/nginx/html;
+        location / {
+            add_header "Set-Cookie" '${APP_CONF}';
+        }
+
+        location ~* \.(?:ico|css|js|gif|jpe?g|png)$ {
+            expires 1y;
+            add_header Pragma public;
+            add_header Cache-Control "public";
+        }
+        # --- Brotli
+        # brotli on;
+        # brotli_comp_level 6;
+        # 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;
+        # --- GZIP
+        gzip on;
+        gzip_disable "msie6";
+        gzip_vary on;
+        gzip_proxied any;
+        gzip_comp_level 6;
+        gzip_buffers 16 8k;
+        gzip_http_version 1.1;
+        gzip_types application/javascript application/rss+xml application/vnd.ms-fontobject application/x-font application/x-font-opentype application/x-font-otf application/x-font-truetype application/x-font-ttf application/x-javascript application/xhtml+xml application/xml font/opentype font/otf font/ttf image/svg+xml image/x-icon text/css text/javascript text/plain text/xml;
+    }
+# }

package.json

@@ -1,18 +1,19 @@
 {
-  "name": "my-first-svite-project",
+	"name": "my-first-svite-project",
-  "version": "0.0.0",
+	"version": "0.0.0",
-  "scripts": {
+	"scripts": {
-    "dev": "svite",
+		"dev": "svite",
-    "build": "svite build"
+		"build": "svite build",
-  },
+		"start": "svite serve"
-  "dependencies": {
+	},
-    "@odit/lfk-client-js": "^0.0.3",
+	"dependencies": {
-    "svelte-i18n": "^3.3.0",
+		"@odit/lfk-client-js": "^0.0.4",
-    "toastify-js": "^1.9.3"
+		"svelte-i18n": "^3.3.0",
-  },
+		"toastify-js": "^1.9.3"
-  "devDependencies": {
+	},
-    "svelte": "^3.29.7",
+	"devDependencies": {
-    "svelte-hmr": "^0.11.6",
+		"svelte": "^3.29.7",
-    "svite": "^0.8.1"
+		"svelte-hmr": "^0.11.6",
-  }
+		"svite": "^0.8.1"
+	}
 }

src/components/Login.svelte

@@ -1,9 +1,61 @@
 <script>
   import { _ } from "svelte-i18n";
   import store from "../store.js";
+  //
+  import { OpenAPI, AuthService, TrackService } from "@odit/lfk-client-js";
+  OpenAPI.BASE = "http://localhost:4010";
+  //
   store.init();
-  const login = () => {
+  //
-    store.login();
+  import Toastify from "toastify-js";
+  import "toastify-js/src/toastify.css";
+  let usersUsername = "";
+  let usersPassword = "";
+  let last_loginclick_processed = true;
+
+  const login = async () => {
+    // prevent login button spamming
+    if (last_loginclick_processed) {
+      last_loginclick_processed = false;
+      Toastify({
+        text: $_("login_is_checked"),
+        duration: 1500,
+      }).showToast();
+      console.log(usersUsername);
+      console.log(usersPassword);
+      AuthService.authControllerLogin({
+        username: usersUsername,
+        password: usersPassword,
+      })
+        .then((result) => {
+          OpenAPI.TOKEN = result.access_token;
+          store.login(result.access_token);
+          Toastify({
+            text: $_("welcome_wavinghand"),
+            duration: 1500,
+            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+          }).showToast();
+        })
+        .catch((err) => {
+          Toastify({
+            text: $_("error_on_login"),
+            duration: 1500,
+            backgroundColor:
+              "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
+          }).showToast();
+        })
+        .finally(() => {
+          last_loginclick_processed = true;
+        });
+      // last login was not processed yet
+    } else {
+      Toastify({
+        text: "chill...",
+        duration: 1500,
+        backgroundColor:
+          "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
+      }).showToast();
+    }
   };
 </script>
 
@@ -13,6 +65,9 @@
       class="mx-auto h-20 w-auto"
       src="https://lauf-fuer-kaya.de/Bilder/kaya-logo-quadrat.png"
       alt="" />
+    <p class="mt-6 text-lg text-center font-bold text-gray-900">
+      {$_('log_in_to_your_account')}
+    </p>
     <p class="mt-6 text-sm text-center text-gray-900">
       {$_('log_in_to_your_account')}
     </p>
@@ -26,22 +81,17 @@
             required=""
             class="border-gray-300 placeholder-gray-500 appearance-none rounded-none relative block w-full px-3 py-2 border text-gray-900 rounded-t-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
             placeholder={$_('email_address')}
-            value="" />
+            bind:value={usersUsername} />
         </div>
         <div class="-mt-px relative">
           <input
-            aria-label="Password"
+            aria-label={$_('password')}
             name="password"
             type="password"
             required=""
+            bind:value={usersPassword}
             class="border-gray-300 placeholder-gray-500 appearance-none rounded-none relative block w-full px-3 py-2 border text-gray-900 rounded-b-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
-            placeholder="Password" />
+            placeholder={$_('password')} />
-          <div
-            class="absolute inset-y-0 right-0 pr-3 flex items-center text-sm">
-            <a
-              href="https://tailwindui.com/password/reset"
-              class="text-gray-900 underline">{$_('forgot_password?')}</a>
-          </div>
         </div>
       </div>
 
@@ -65,23 +115,12 @@
         </button>
       </div>
     </div>
-    <div class="mt-6">
+    <div class="mt-2">
-      <div class="relative">
+      <a
-        <div class="absolute inset-0 flex items-center">
+        href="/forgot_password"
-          <div class="w-full border-t border-gray-300" />
+        class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md text-gray-900 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm">
-        </div>
+        {$_('forgot_password?')}
-        <div class="relative flex justify-center text-sm">
+      </a>
-          <span class="px-2 bg-gray-100 text-gray-500">Don't have an account?</span>
-        </div>
-      </div>
-
-      <div class="mt-6">
-        <a
-          href="/pricing"
-          class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md text-gray-900 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm">
-          Register
-        </a>
-      </div>
     </div>
   </div>
 </div>

src/components/Tracks.svelte

@@ -15,15 +15,11 @@
 {:then tracks}
   <h4>{tracks.length}</h4>
   <hr />
-  {#if tracks.length % 2 == 0}
+  <ul>
-    <ul>
+    {#each tracks as item}
-      {#each tracks as item}
+      <li>{item.distance}</li>
-        <li>{item.distance}</li>
+    {/each}
-      {/each}
+  </ul>
-    </ul>
-  {:else}
-    {#each tracks as item}<span>{item.distance}</span><br />{/each}
-  {/if}
 {:catch error}
   <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
     <span class="inline-block align-middle mr-8">

src/locales/de.json

@@ -1,5 +1,8 @@
 {
-	"forgot_password?": "Passwort vergessen?",
+  "forgot_password?": "Passwort vergessen?",
-	"log_in": "Anmelden",
+  "log_in": "Anmelden",
-	"log_in_to_your_account": "Bitte melde dich an"
+  "log_in_to_your_account": "Bitte melde dich an",
+  "login_is_checked": "Login wird überprüft",
+  "welcome_wavinghand": "Willkommen 👋",
+  "error_on_login": "😢Fehler beim Login"
 }

src/locales/en.json

@@ -1,6 +1,11 @@
 {
-	"forgot_password?": "Forgot your password?",
+  "forgot_password?": "Forgot your password?",
-	"log_in": "Log in",
+  "register": "Register",
-	"email_address": "Email address",
+  "log_in": "Log in",
-	"log_in_to_your_account": "Log in to your account"
+  "password": "Password",
+  "email_address": "Email address",
+  "log_in_to_your_account": "Log in to your account",
+  "welcome_wavinghand": "Welcome 👋",
+  "login_is_checked": "Login is being checked...",
+  "error_on_login": "Error on login"
 }

src/store.js

@@ -2,6 +2,7 @@ import { writable } from 'svelte/store';
 
 const store = () => {
 	const state = {
+		access_token: undefined,
 		isLoggedIn: false
 	};
 
@@ -16,8 +17,9 @@ const store = () => {
 			});
 		},
 
-		login() {
+		login(access_token) {
 			update((state) => {
+				state.access_token = access_token;
 				state.isLoggedIn = true;
 				console.log('login performed');
 				return state;