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

close #29

CHANGELOG.md

@@ -2,8 +2,20 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
+#### [0.1.2](https://git.odit.services/lfk/frontend/compare/0.1.2-1...0.1.2)
+
+- Merge commit '2a37dfafa426e070aa136d171a1a01aa7f609d18' into dev [`#29`](https://git.odit.services/lfk/frontend/issues/29)
+- Merge commit '5810b4ec4396ad650d90493fb48e2a8320865b42' into dev [`#4`](https://git.odit.services/lfk/frontend/issues/4)
+- 🔒 added basic manual refresh every 4mins [`d92c6c0`](https://git.odit.services/lfk/frontend/commit/d92c6c0de9d6b72027b8aa27b22e3dc7b5116af1)
+- dropped redundant console.log [`2a37dfa`](https://git.odit.services/lfk/frontend/commit/2a37dfafa426e070aa136d171a1a01aa7f609d18)
+- 💾 save new auth data to localstorage [`2cbb431`](https://git.odit.services/lfk/frontend/commit/2cbb431acc0fe1aa333ddedb76510486a5fcf191)
+- new license file version [CI SKIP] [`519ba79`](https://git.odit.services/lfk/frontend/commit/519ba79e1d5d97e2f59f769ef952a649481b55c0)
+
 #### [0.1.2-1](https://git.odit.services/lfk/frontend/compare/0.1.2-0...0.1.2-1)
 
+> 10 January 2021
+
+- 🚀RELEASE v0.1.2-1 [`5810b4e`](https://git.odit.services/lfk/frontend/commit/5810b4ec4396ad650d90493fb48e2a8320865b42)
 - 🧪 modified auto-changelog to commit CHANGELOG.md [`52aa996`](https://git.odit.services/lfk/frontend/commit/52aa99681bb02472e0433cb32b89dde814cd9467)
 
 #### [0.1.2-0](https://git.odit.services/lfk/frontend/compare/0.1.1...0.1.2-0)

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@odit/lfk-frontend",
-	"version": "0.1.2-1",
+	"version": "0.1.2",
 	"scripts": {
 		"i18n-order": "node order.js",
 		"dev": "snowpack dev",

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;
+  $: isLastnameValid = lastname_input_value.trim().length !== 0;
-  $: isFirstnameValid = firstname_input_value.trim().length === 0;
+  $: isFirstnameValid = firstname_input_value.trim().length !== 0;
-  $: createbtnenabled = !isFirstnameValid && !isLastnameValid;
+  $: 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: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
@@ -177,15 +176,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
@@ -199,15 +198,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/Login.svelte

@@ -17,7 +17,7 @@
         is_blocked_by_autologin = true;
         OpenAPI.TOKEN = value.access_token;
         const jwtinfo = JSON.parse(atob(OpenAPI.TOKEN.split(".")[1]));
-        store.login(value.access_token, jwtinfo);
+        store.login(value, jwtinfo);
         Toastify({
           text: $_("welcome_wavinghand"),
           duration: 500,

src/components/UserDetail.svelte

@@ -58,14 +58,25 @@
         </nav>
       </div>
     </div>
-    <span
+    <span class="mb-4 text-3xl font-extrabold leading-tight">{user.firstname}
-      class="mb-4 text-3xl font-extrabold leading-tight">{user.firstname}
       {user.middlename || ''}
       {user.lastname}
-      <button
+      <div data-id="user_actions_${user.id}">
-        type="button"
+        <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
+          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"
-        User</button></span>
+          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

src/store.js

@@ -1,12 +1,16 @@
 import { writable } from 'svelte/store';
+import { OpenAPI, AuthService } from '@odit/lfk-client-js';
+import localForage from 'localforage';
 
 export let users = writable([]);
 export let tracks = writable([]);
 const store = () => {
 	const state = {
+		auth: undefined,
 		access_token: undefined,
 		jwtinfo: undefined,
-		isLoggedIn: false
+		isLoggedIn: false,
+		refreshInterval: undefined
 	};
 
 	const { subscribe, set, update } = writable(state);
@@ -18,17 +22,36 @@ const store = () => {
 				return state;
 			});
 		},
-		login(access_token, jwtinfo) {
+		refreshAuth() {
+			console.log('refreshing auth');
+			AuthService.authControllerRefresh({ token: state.auth.refresh_token }).then((auth) => {
+				console.log('got new auth');
+				OpenAPI.TOKEN = auth.access_token;
+				localForage.setItem('logindata', auth);
+			});
+		},
+		login(auth, jwtinfo) {
 			update((state) => {
-				state.access_token = access_token;
+				state.auth = auth;
+				state.access_token = auth.access_token;
 				state.jwtinfo = jwtinfo;
 				state.isLoggedIn = true;
+				//
+				state.refreshInterval = setInterval(() => {
+					this.refreshAuth();
+					// 4min
+				}, 4 * 60000);
+				//
 				return state;
 			});
 		},
 		logout() {
 			update((state) => {
 				state.isLoggedIn = false;
+				//
+				clearInterval(state.refreshInterval);
+				state.refreshInterval = undefined;
+				//
 				return state;
 			});
 		}