Merge branch 'dev' into feature/12-user-management

ref #12

package.json

@@ -1,13 +1,11 @@
 {
 	"name": "@odit/lfk-frontend",
-	"version": "0.1.2-0",
+	"version": "0.0.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": {
@@ -26,31 +24,12 @@
 	"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/components/AddUserModal.svelte

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