🚀RELEASE v0.1.1

ref #4

package.json

@@ -1,11 +1,13 @@
 {
 	"name": "@odit/lfk-frontend",
-	"version": "0.0.0",
+	"version": "0.1.1",
 	"scripts": {
 		"i18n-order": "node order.js",
 		"dev": "snowpack dev",
 		"build": "snowpack build",
 		"build:sw": "workbox generateSW workbox-config.js",
+		"release": "release-it",
+		"changelog": "npx auto-changelog --commit-limit false --template https://raw.githubusercontent.com/release-it/release-it/master/templates/changelog-compact.hbs",
 		"licenses:export": "license-exporter --json -o public"
 	},
 	"dependencies": {
@@ -24,12 +26,28 @@
 	"devDependencies": {
 		"@odit/license-exporter": "0.0.9",
 		"@snowpack/plugin-svelte": "3.4.1",
+		"auto-changelog": "^2.2.1",
 		"autoprefixer": "10.2.1",
 		"postcss": "8.2.4",
 		"postcss-load-config": "3.0.0",
+		"release-it": "^14.2.2",
 		"snowpack": "3.0.0-rc.2",
 		"svelte": "3.31.2",
 		"svelte-preprocess": "4.6.1",
 		"workbox-cli": "6.0.2"
+	},
+	"release-it": {
+		"git": {
+			"commit": true,
+			"requireCleanWorkingDir": false,
+			"commitMessage": "🚀RELEASE v${version}",
+			"push": false,
+			"tag": true,
+			"tagName": null,
+			"tagAnnotation": "v${version}"
+		},
+		"npm": {
+			"publish": false
+		}
 	}
 }

src/App.svelte

@@ -47,28 +47,11 @@
   import { OpenAPI, AuthService } from "@odit/lfk-client-js";
   import UserDetail from "./components/UserDetail.svelte";
   OpenAPI.BASE = config.baseurl;
+  import { register as registerSW } from "./swmodule";
   store.init();
-
-  if ("serviceWorker" in navigator) {
-    window.addEventListener("load", () => {
-      navigator.serviceWorker.register("/sw.js").then(
-        (registration) => {
-          // console.log(`sw successful with scope: ${registration.scope}`);
-        },
-        (err) => {
-          // console.log(`sw failed: ${err}`);
-        }
-      );
-    });
-  }
+  // registerSW();
 </script>
 
-<style>
-  .bg-gray-900 {
-    background-color: #121317;
-  }
-</style>
-
 <Route>
   {#if $router.path === '/forgot_password'}
     <Route path="/forgot_password">

src/components/AddUserModal.svelte

@@ -3,23 +3,33 @@
   import { clickOutside } from "./outsideclick";
   import { focusTrap } from "svelte-focus-trap";
   import { tracks as tracksstore } from "../store.js";
-  import { TrackService } from "@odit/lfk-client-js";
+  import { TrackService, UserService } from "@odit/lfk-client-js";
+  import isEmail from "validator/es/lib/isEmail";
   import Toastify from "toastify-js";
   import "toastify-js/src/toastify.css";
+  import About from "./About.svelte";
   export let modal_open;
-  let trackname_input;
+  let firstname_input;
+  let lastname_input;
+  let middlename_input;
+  let password_input;
+  let email_input;
   function focus(el) {
     el.focus();
   }
-  $: trackname_input_value = "";
+  $: middlename_input_value = "";
+  $: password_input_value = "";
+  $: email_input_value = "";
+  $: lastname_input_value = "";
+  $: firstname_input_value = "";
   $: track_min_duration = 0;
   $: tracklength = 0;
   $: processed_last_submit = true;
-  $: smart_track_min_duration_placeholder = parseInt(tracklength || 0) * 0.369;
-  $: isFirstnameValid = trackname_input_value.trim().length === 0;
-  $: isTracklengthValid = tracklength <= 0;
-  $: trackMintimevalid = track_min_duration >= 0;
-  $: createbtnenabled = !isFirstnameValid && !isTracklengthValid;
+  $: isPasswordValid = password_input_value.trim().length === 0;
+  $: isEmailValid = isEmail(email_input_value);
+  $: isLastnameValid = lastname_input_value.trim().length === 0;
+  $: isFirstnameValid = firstname_input_value.trim().length === 0;
+  $: createbtnenabled = !isFirstnameValid && !isLastnameValid;
   (function () {
     document.onkeydown = function (e) {
       e = e || window.event;
@@ -38,22 +48,23 @@
     if (processed_last_submit === true) {
       processed_last_submit = false;
       const toast = Toastify({
-        text: $_("track-is-being-added"),
+        text: "User is being added...",
         duration: -1,
       }).showToast();
-      TrackService.trackControllerPost({
-        distance: parseInt(tracklength),
-        name: trackname_input_value,
-        minimumLapTime: track_min_duration,
+      UserService.userControllerPost({
+        firstname: firstname_input_value,
+        lastname: lastname_input_value,
+        middlename: middlename_input_value,
+        email:email_input_value,password:password_input_value
       })
         .then((result) => {
-          trackname_input_value = "";
-          track_min_duration = 0;
-          tracklength = 0;
+          firstname_input_value = "";
+          lastname_input_value = "";
+          middlename_input_value = "";
           modal_open = false;
           //
           Toastify({
-            text: $_("track-added"),
+            text: "User added",
             duration: 500,
             backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
           }).showToast();
@@ -125,7 +136,7 @@
               <div class="grid grid-cols-6 gap-6">
                 <div class="col-span-6">
                   <label
-                    for="trackname"
+                    for="firstname"
                     class="block text-sm font-medium text-gray-700">First Name</label>
                   <input
                     use:focus
@@ -134,10 +145,10 @@
                     class:border-red-500={isFirstnameValid}
                     class:focus:border-red-500={isFirstnameValid}
                     class:focus:ring-red-500={isFirstnameValid}
-                    bind:value={trackname_input_value}
-                    bind:this={trackname_input}
+                    bind:value={firstname_input_value}
+                    bind:this={firstname_input}
                     type="text"
-                    name="trackname"
+                    name="firstname"
                     class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
                   {#if isFirstnameValid}
                     <span
@@ -146,6 +157,85 @@
                     </span>
                   {/if}
                 </div>
+                <div class="col-span-6">
+                  <label
+                    for="trackname"
+                    class="block text-sm font-medium text-gray-700">Middle Name</label>
+                  <input
+                    autocomplete="off"
+                    placeholder="Middle Name"
+                    bind:value={middlename_input_value}
+                    bind:this={middlename_input}
+                    type="text"
+                    name="trackname"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                </div>
+                <div class="col-span-6">
+                  <label
+                    for="lastname"
+                    class="block text-sm font-medium text-gray-700">Last Name</label>
+                  <input
+                    autocomplete="off"
+                    placeholder="Last Name"
+                    class:border-red-500={isLastnameValid}
+                    class:focus:border-red-500={isLastnameValid}
+                    class:focus:ring-red-500={isLastnameValid}
+                    bind:value={lastname_input_value}
+                    bind:this={lastname_input}
+                    type="text"
+                    name="lastname"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                  {#if isLastnameValid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      Last Name is required
+                    </span>
+                  {/if}
+                </div>
+                <div class="col-span-6">
+                  <label
+                    for="password"
+                    class="block text-sm font-medium text-gray-700">Password</label>
+                  <input
+                    autocomplete="off"
+                    placeholder="Password"
+                    class:border-red-500={isPasswordValid}
+                    class:focus:border-red-500={isPasswordValid}
+                    class:focus:ring-red-500={isPasswordValid}
+                    bind:value={password_input_value}
+                    bind:this={password_input}
+                    type="password"
+                    name="password"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                  {#if isPasswordValid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      Password is required
+                    </span>
+                  {/if}
+                </div>
+                <div class="col-span-6">
+                  <label
+                    for="email"
+                    class="block text-sm font-medium text-gray-700">E-Mail</label>
+                  <input
+                    autocomplete="off"
+                    placeholder="E-Mail"
+                    class:border-red-500={!isEmailValid}
+                    class:focus:border-red-500={!isEmailValid}
+                    class:focus:ring-red-500={!isEmailValid}
+                    bind:value={email_input_value}
+                    bind:this={email_input}
+                    type="email"
+                    name="email"
+                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                  {#if !isEmailValid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      valid email is required
+                    </span>
+                  {/if}
+                </div>
               </div>
             </div>
           </div>

src/components/Dashboard.svelte

@@ -6,6 +6,7 @@
 
   import store from "../store";
   import NoComponentLoaded from "./NoComponentLoaded.svelte";
+  import { AuthService, OpenAPI } from "@odit/lfk-client-js";
 
   let activePage = "dashboard";
   let dropdown1 = false;
@@ -273,6 +274,7 @@
         tabindex="0"
         class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
         on:click={() => {
+          AuthService.authControllerLogout();
           logout();
         }}>
         <svg

src/components/UsersOverview.svelte

@@ -78,8 +78,11 @@
                     </div>
                   {/if}
                   <div class="ml-4">
-                    <div class="text-sm font-medium text-gray-900 dark:text-gray-100">
+                    <div
+                      class="text-sm font-medium text-gray-900 dark:text-gray-100">
                       {u.firstname}
+                      {u.middlename || ''}
+                      {u.lastname}
                     </div>
                     <div class="text-sm text-gray-500">
                       {u.email || u.username}
@@ -104,7 +107,8 @@
               </td>
               <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                 {#each u.groups as g}
-                  <a href="../groups/{g.id}"
+                  <a
+                    href="../groups/{g.id}"
                     class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{g.name}</a>
                 {/each}
               </td>
@@ -113,65 +117,87 @@
                 <a
                   href="./{u.id}"
                   class="text-indigo-600 hover:text-indigo-900">Edit</a>
-                <span tabindex="0" href="#" class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Delete</span>
+                <span
+                  tabindex="0"
+                  href="#"
+                  class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Delete</span>
               </td>
             </tr>
           {/each}
         </tbody>
       </table>
-      <div class="grid px-4 py-3 text-xs font-semibold tracking-wide text-gray-500 uppercase border-t dark:border-gray-700 bg-gray-50 sm:grid-cols-9 dark:text-gray-400 dark:bg-gray-900">
-        <span class="flex items-center col-span-3">
-          Showing 21-30 of 100
-        </span>
-        <span class="col-span-2"></span>
+      <div
+        class="grid px-4 py-3 text-xs font-semibold tracking-wide text-gray-500 uppercase border-t dark:border-gray-700 bg-gray-50 sm:grid-cols-9 dark:text-gray-400 dark:bg-gray-900">
+        <span class="flex items-center col-span-3"> Showing 21-30 of 100 </span>
+        <span class="col-span-2" />
         <!-- Pagination -->
         <span class="flex col-span-4 mt-2 sm:mt-auto sm:justify-end">
           <nav aria-label="Table navigation">
             <ul class="inline-flex items-center">
               <li>
-                <button class="px-3 py-1 rounded-md rounded-l-lg focus:outline-none focus:shadow-outline-purple" aria-label="Previous">
-                  <svg aria-hidden="true" class="w-4 h-4 fill-current" viewBox="0 0 20 20">
-                    <path d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" fill-rule="evenodd"></path>
+                <button
+                  class="px-3 py-1 rounded-md rounded-l-lg focus:outline-none focus:shadow-outline-purple"
+                  aria-label="Previous">
+                  <svg
+                    aria-hidden="true"
+                    class="w-4 h-4 fill-current"
+                    viewBox="0 0 20 20">
+                    <path
+                      d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+                      clip-rule="evenodd"
+                      fill-rule="evenodd" />
                   </svg>
                 </button>
               </li>
               <li>
-                <button class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple">
+                <button
+                  class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple">
                   1
                 </button>
               </li>
               <li>
-                <button class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple">
+                <button
+                  class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple">
                   2
                 </button>
               </li>
               <li>
-                <button class="px-3 py-1 text-white transition-colors duration-150 bg-purple-600 border border-r-0 border-purple-600 rounded-md focus:outline-none focus:shadow-outline-purple">
+                <button
+                  class="px-3 py-1 text-white transition-colors duration-150 bg-purple-600 border border-r-0 border-purple-600 rounded-md focus:outline-none focus:shadow-outline-purple">
                   3
                 </button>
               </li>
               <li>
-                <button class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple">
+                <button
+                  class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple">
                   4
                 </button>
               </li>
+              <li><span class="px-3 py-1">...</span></li>
               <li>
-                <span class="px-3 py-1">...</span>
-              </li>
-              <li>
-                <button class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple">
+                <button
+                  class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple">
                   8
                 </button>
               </li>
               <li>
-                <button class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple">
+                <button
+                  class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple">
                   9
                 </button>
               </li>
               <li>
-                <button class="px-3 py-1 rounded-md rounded-r-lg focus:outline-none focus:shadow-outline-purple" aria-label="Next">
-                  <svg class="w-4 h-4 fill-current" aria-hidden="true" viewBox="0 0 20 20">
-                    <path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" fill-rule="evenodd"></path>
+                <button
+                  class="px-3 py-1 rounded-md rounded-r-lg focus:outline-none focus:shadow-outline-purple"
+                  aria-label="Next">
+                  <svg
+                    class="w-4 h-4 fill-current"
+                    aria-hidden="true"
+                    viewBox="0 0 20 20">
+                    <path
+                      d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                      clip-rule="evenodd"
+                      fill-rule="evenodd" />
                   </svg>
                 </button>
               </li>

src/swmodule.js

@@ -0,0 +1,14 @@
+export const register = () => {
+	if ('serviceWorker' in navigator) {
+		window.addEventListener('load', () => {
+			navigator.serviceWorker.register('/sw.js').then(
+				(registration) => {
+					// console.log(`sw successful with scope: ${registration.scope}`);
+				},
+				(err) => {
+					// console.log(`sw failed: ${err}`);
+				}
+			);
+		});
+	}
+};