🚀RELEASE v0.1.2-0

ref #4

package.json

@@ -1,11 +1,13 @@
 {
 	"name": "@odit/lfk-frontend",
-	"version": "0.0.0",
+	"version": "0.1.2-0",
 	"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,31 @@
 	"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
+		},
+		"hooks": {
+			"after:bump": "npx auto-changelog -p"
+		}
 	}
 }

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();
-
+  // registerSW();
-  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}`);
-        }
-      );
-    });
-  }
 </script>
 
-<style>
-  .bg-gray-900 {
-    background-color: #121317;
-  }
-</style>
-
 <Route>
   {#if $router.path === '/forgot_password'}
     <Route path="/forgot_password">

src/components/AddUserModal.svelte

@@ -3,10 +3,11 @@
   import { clickOutside } from "./outsideclick";
   import { focusTrap } from "svelte-focus-trap";
   import { tracks as tracksstore } from "../store.js";
-  import { UserService } 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 firstname_input;
   let lastname_input;
@@ -21,13 +22,14 @@
   $: email_input_value = "";
   $: lastname_input_value = "";
   $: firstname_input_value = "";
+  $: track_min_duration = 0;
+  $: tracklength = 0;
   $: processed_last_submit = true;
-  $: isPasswordValid = password_input_value.trim().length !== 0;
+  $: isPasswordValid = password_input_value.trim().length === 0;
   $: isEmailValid = isEmail(email_input_value);
-  $: isLastnameValid = lastname_input_value.trim().length !== 0;
+  $: isLastnameValid = lastname_input_value.trim().length === 0;
-  $: isFirstnameValid = firstname_input_value.trim().length !== 0;
+  $: isFirstnameValid = firstname_input_value.trim().length === 0;
-  $: createbtnenabled =
+  $: createbtnenabled = !isFirstnameValid && !isLastnameValid;
-    isFirstnameValid && isLastnameValid && isEmailValid && isPasswordValid;
   (function () {
     document.onkeydown = function (e) {
       e = e || window.event;
@@ -53,8 +55,7 @@
         firstname: firstname_input_value,
         lastname: lastname_input_value,
         middlename: middlename_input_value,
-        email: email_input_value,
+        email:email_input_value,password:password_input_value
-        password: password_input_value,
       })
         .then((result) => {
           firstname_input_value = "";
@@ -141,15 +142,15 @@
                     use:focus
                     autocomplete="off"
                     placeholder="First Name"
-                    class:border-red-500={!isFirstnameValid}
+                    class:border-red-500={isFirstnameValid}
-                    class:focus:border-red-500={!isFirstnameValid}
+                    class:focus:border-red-500={isFirstnameValid}
-                    class:focus:ring-red-500={!isFirstnameValid}
+                    class:focus:ring-red-500={isFirstnameValid}
                     bind:value={firstname_input_value}
                     bind:this={firstname_input}
                     type="text"
                     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}
+                  {#if isFirstnameValid}
                     <span
                       class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
                       First Name is required
@@ -176,15 +177,15 @@
                   <input
                     autocomplete="off"
                     placeholder="Last Name"
-                    class:border-red-500={!isLastnameValid}
+                    class:border-red-500={isLastnameValid}
-                    class:focus:border-red-500={!isLastnameValid}
+                    class:focus:border-red-500={isLastnameValid}
-                    class:focus:ring-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}
+                  {#if isLastnameValid}
                     <span
                       class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
                       Last Name is required
@@ -198,15 +199,15 @@
                   <input
                     autocomplete="off"
                     placeholder="Password"
-                    class:border-red-500={!isPasswordValid}
+                    class:border-red-500={isPasswordValid}
-                    class:focus:border-red-500={!isPasswordValid}
+                    class:focus:border-red-500={isPasswordValid}
-                    class:focus:ring-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}
+                  {#if isPasswordValid}
                     <span
                       class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
                       Password is required

src/components/UserDetail.svelte

@@ -58,25 +58,14 @@
         </nav>
       </div>
     </div>
-    <span class="mb-4 text-3xl font-extrabold leading-tight">{user.firstname}
+    <span
+      class="mb-4 text-3xl font-extrabold leading-tight">{user.firstname}
       {user.middlename || ''}
       {user.lastname}
-      <div data-id="user_actions_${user.id}">
+      <button
-        <button
+        type="button"
-          class="hidden w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-400 text-base font-medium text-white sm:w-auto sm:text-sm"
+        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">Delete
-          data-userid="${user.id}"
+        User</button></span>
-          onclick="user__delete_cancel()">Cancel</button>
-        <button
-          class="hidden w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-500 text-base font-medium text-white sm:w-auto sm:text-sm"
-          data-userid="${user.id}"
-          onclick="user__delete_confirm()">Confirm Delete</button>
-        <button
-          type="button"
-          class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">Delete
-          User</button>
-      </div>
-    </span>
-
     <!--  -->
     <div class="mt-2 flex items-center">
       <img

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