🚀RELEASE v0.1.4

close #20

CHANGELOG.md

@@ -2,8 +2,46 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
+#### [0.1.4](https://git.odit.services/lfk/frontend/compare/0.1.3...0.1.4)
+
+- Merge commit '45ec97066f425ac2ac66914be649cbd5a1038e10' into dev [`#20`](https://git.odit.services/lfk/frontend/issues/20)
+- 🌎 add remaining translation keys for filepond [`45ec970`](https://git.odit.services/lfk/frontend/commit/45ec97066f425ac2ac66914be649cbd5a1038e10)
+- add basic i18n logic to filepond [`b08c0f1`](https://git.odit.services/lfk/frontend/commit/b08c0f145a13d295b2a51c7a6da76faceb80a90c)
+- 🌎 About - i18n [`692c906`](https://git.odit.services/lfk/frontend/commit/692c906cd26bdb7f7d730b90734d23748e0ab451)
+- ✨ About - change license modal icon to "legal" [`0e31ba2`](https://git.odit.services/lfk/frontend/commit/0e31ba212f99d90b133bc242e5b4d163aa99b93b)
+- new license file version [CI SKIP] [`4f3837a`](https://git.odit.services/lfk/frontend/commit/4f3837ac45a5df9a7476fd68ec9c069dc6b128cd)
+
+#### [0.1.3](https://git.odit.services/lfk/frontend/compare/0.1.2...0.1.3)
+
+> 10 January 2021
+
+- 🌎 improved i18n for AddUserModal and UserDetail [`1c356a4`](https://git.odit.services/lfk/frontend/commit/1c356a41f54a954afaa69ed524f62c1676f7bbee)
+- 🧹 simplified UsersOverview table [`e1d5d54`](https://git.odit.services/lfk/frontend/commit/e1d5d54cfb1fb20e56f0e971e2cfd196e9a913ac)
+- 🌎 added i18n for UsersOverview [`3754f09`](https://git.odit.services/lfk/frontend/commit/3754f09b2f395a82ff8c3a9c655ab8a782e7eb71)
+- 🖊 add basic UserDetail editing reactivity [`6012d05`](https://git.odit.services/lfk/frontend/commit/6012d0577e2ae6caf44aaee54335188bc767fff7)
+- AddUserModal - data validation [`264e0d7`](https://git.odit.services/lfk/frontend/commit/264e0d7ed98c5000da543af154d6e36a6b956e4a)
+- ✨ sample layout for advanced search [`5ec1dfa`](https://git.odit.services/lfk/frontend/commit/5ec1dfa8b0da4619f14e73794b9a9e22872aa330)
+- userdetail - dynamic buttons [`ded3198`](https://git.odit.services/lfk/frontend/commit/ded31980bfbf9f09afa2818bdcc8cc3e40748441)
+- 🚀RELEASE v0.1.3 [`ccb5125`](https://git.odit.services/lfk/frontend/commit/ccb5125a48486ef55709419eccd7d9e912a1e64c)
+- 🔍 UsersOverview table - basic fuzzy search [`b9e0be4`](https://git.odit.services/lfk/frontend/commit/b9e0be448398d087005e220d08e34461490be14e)
+
+#### [0.1.2](https://git.odit.services/lfk/frontend/compare/0.1.2-1...0.1.2)
+
+> 10 January 2021
+
+- 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)
+- 🚀RELEASE v0.1.2 [`242b5af`](https://git.odit.services/lfk/frontend/commit/242b5afbe93a6100826b0340f821ad2a2c4de343)
+- 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.4",
 	"scripts": {
 		"i18n-order": "node order.js",
 		"dev": "snowpack dev",
@@ -15,6 +15,7 @@
 		"filepond": "4.25.1",
 		"gridjs": "3.2.1",
 		"localforage": "1.9.0",
+		"lodash.isequal": "^4.5.0",
 		"svelte-filepond": "0.0.1",
 		"svelte-focus-trap": "1.0.1",
 		"svelte-i18n": "3.3.0",

src/components/About.svelte

@@ -50,14 +50,14 @@
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
               <svg
+                fill="currentColor"
                 class="h-6 w-6 text-blue-600"
-                fill="none"
-                width="24"
-                height="24"
                 xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 640 512"><path
-                  fill="currentColor"
-                  d="M635.7 167.2L556.1 31.7c-8.8-15-28.3-20.1-43.5-11.5l-69 39.1L503.3 161c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L416 75l-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L333.2 122 278 153.3 337.8 255c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-59.7-101.7-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-27.9-47.5-55.2 31.3 59.7 101.7c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L84.9 262.9l-69 39.1C.7 310.7-4.6 329.8 4.2 344.8l79.6 135.6c8.8 15 28.3 20.1 43.5 11.5L624.1 210c15.2-8.6 20.4-27.8 11.6-42.8z" /></svg>
+                viewBox="0 0 24 24"
+                width="24"
+                height="24"><path fill="none" d="M0 0h24v24H0z" />
+                <path
+                  d="M14 20v2H2v-2h12zM14.586.686l7.778 7.778L20.95 9.88l-1.06-.354L17.413 12l5.657 5.657-1.414 1.414L16 13.414l-2.404 2.404.283 1.132-1.415 1.414-7.778-7.778 1.415-1.414 1.13.282 6.294-6.293-.353-1.06L14.586.686z" /></svg>
             </div>
             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <h3 class="text-lg leading-6 font-medium">
@@ -79,7 +79,7 @@
             }}
             type="button"
             class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
-            Close
+            {$_('close')}
           </button>
         </div>
       </div>
@@ -112,13 +112,12 @@
     <h2 class="text-4xl font-display font-semibold md:text-5xl">
       {$_('credits')}
     </h2>
-    <div
-      class="max-w-3xl mx-auto text-xl leading-8 font-medium mt-8">
+    <div class="max-w-3xl mx-auto text-xl leading-8 font-medium mt-8">
       <p class="text-center">{$_('oss_credit_description')}</p>
     </div>
     <div class="w-screen leading-8 pl-5 mt-5">
       {#await license_promise}
-        <p class="text-center w-full">Licenses are being loaded...</p>
+        <p class="text-center w-full">{$_('licenses-are-being-loaded')}</p>
       {:then}
         <table>
           <thead>
@@ -164,9 +163,7 @@
         </div>
       {/await}
     </div>
-    <h2 class="text-4xl font-display font-semibold md:text-5xl">
-      Fragen
-    </h2>
+    <h2 class="text-4xl font-display font-semibold md:text-5xl">{$_('faq')}</h2>
     <div class="mt-6 border-t-2 border-gray-100 pt-10">
       <dl class="md:grid md:grid-cols-2 md:gap-8">
         <div>

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 = "";
@@ -137,33 +136,33 @@
                 <div class="col-span-6">
                   <label
                     for="firstname"
-                    class="block text-sm font-medium text-gray-700">First Name</label>
+                    class="block text-sm font-medium text-gray-700">{$_('first-name')}</label>
                   <input
                     use:focus
                     autocomplete="off"
-                    placeholder="First Name"
-                    class:border-red-500={isFirstnameValid}
-                    class:focus:border-red-500={isFirstnameValid}
-                    class:focus:ring-red-500={isFirstnameValid}
+                    placeholder={$_('first-name')}
+                    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
+                      {$_('first-name-is-required')}
                     </span>
                   {/if}
                 </div>
                 <div class="col-span-6">
                   <label
                     for="trackname"
-                    class="block text-sm font-medium text-gray-700">Middle Name</label>
+                    class="block text-sm font-medium text-gray-700">{$_('middle-name')}</label>
                   <input
                     autocomplete="off"
-                    placeholder="Middle Name"
+                    placeholder={$_('middle-name')}
                     bind:value={middlename_input_value}
                     bind:this={middlename_input}
                     type="text"
@@ -177,50 +176,50 @@
                   <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
+                      {$_('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>
+                    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}
+                    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}
+                  {#if !isPasswordValid}
                     <span
                       class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      Password is required
+                      {$_('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>
+                    class="block text-sm font-medium text-gray-700">{$_('e-mail-adress')}</label>
                   <input
                     autocomplete="off"
-                    placeholder="E-Mail"
+                    placeholder={$_('e-mail-adress')}
                     class:border-red-500={!isEmailValid}
                     class:focus:border-red-500={!isEmailValid}
                     class:focus:ring-red-500={!isEmailValid}
@@ -232,7 +231,7 @@
                   {#if !isEmailValid}
                     <span
                       class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      valid email is required
+                      {$_('valid-email-is-required')}
                     </span>
                   {/if}
                 </div>
@@ -247,7 +246,7 @@
             on:click={submit}
             type="button"
             class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
-            Create
+            {$_('create')}
           </button>
           <button
             on:click={() => {
@@ -255,7 +254,7 @@
             }}
             type="button"
             class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
-            Cancel
+            {$_('cancel')}
           </button>
         </div>
       </div>

src/components/FileUpload.svelte

@@ -1,6 +1,7 @@
 <script>
   import "filepond/dist/filepond.css";
   import FilePond from "svelte-filepond";
+  import { _ } from "svelte-i18n";
   let pond;
   // pond.getFiles() will return the active files
   // the name to use for the internal file input
@@ -11,12 +12,60 @@
   function handleAddFile(err, fileItem) {
     // console.log("A file has been added", fileItem);
   }
+  const labelInvalidField = $_("filepond__field-contains-invalid-files");
+  const labelFileWaitingForSize = $_("filepond__waiting-for-size");
+  const labelFileSizeNotAvailable = $_("filepond__size-not-available");
+  const labelFileLoading = $_("filepond__loading");
+  const labelFileLoadError = $_("filepond__error-during-load");
+  const labelFileProcessing = $_("filepond__uploading");
+  const labelFileProcessingComplete = $_("filepond__upload-complete");
+  const labelFileProcessingAborted = $_("filepond__upload-cancelled");
+  const labelFileProcessingError = $_("filepond__error-during-upload");
+  const labelFileProcessingRevertError = $_("filepond__error-during-revert");
+  const labelFileRemoveError = $_("filepond__error-during-remove");
+  const labelTapToCancel = $_("filepond__tap-to-cancel");
+  const labelTapToRetry = $_("filepond__tap-to-retry");
+  const labelTapToUndo = $_("filepond__tap-to-undo");
+  const labelButtonRemoveItem = $_("filepond__remove");
+  const labelButtonAbortItemLoad = $_("filepond__abort");
+  const labelButtonRetryItemLoad = $_("filepond__retry");
+  const labelButtonAbortItemProcessing = $_("filepond__cancel");
+  const labelButtonUndoItemProcessing = $_("filepond__undo");
+  const labelButtonRetryItemProcessing = $_("filepond__retry");
+  const labelButtonProcessItem = $_("filepond__upload");
+  const labelIdle =
+    $_("drag-and-drop-your-files-or") +
+    ` <span class="filepond--label-action"> ` +
+    $_("browse") +
+    ` </span>`;
 </script>
 
 <div class="app">
   <FilePond
     bind:this={pond}
     {name}
+    {labelFileWaitingForSize}
+    {labelFileSizeNotAvailable}
+    {labelFileLoading}
+    {labelFileLoadError}
+    {labelFileProcessing}
+    {labelFileProcessingComplete}
+    {labelFileProcessingAborted}
+    {labelFileProcessingError}
+    {labelFileProcessingRevertError}
+    {labelFileRemoveError}
+    {labelTapToCancel}
+    {labelTapToRetry}
+    {labelTapToUndo}
+    {labelButtonRemoveItem}
+    {labelButtonAbortItemLoad}
+    {labelButtonRetryItemLoad}
+    {labelButtonAbortItemProcessing}
+    {labelButtonUndoItemProcessing}
+    {labelButtonRetryItemProcessing}
+    {labelButtonProcessItem}
+    {labelIdle}
+    {labelInvalidField}
     server="/api"
     allowMultiple={false}
     credits={false}

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

@@ -1,15 +1,28 @@
 <script>
   import { _ } from "svelte-i18n";
+  import lodashIsEqual from "lodash.isequal";
   import { UserService } from "@odit/lfk-client-js";
   import "gridjs/dist/theme/mermaid.css";
-  import { tracks as tracksstore } from "../store.js";
   import PromiseError from "./PromiseError.svelte";
   export let params;
   const user_promise = UserService.userControllerGetOne(params.userid);
+  let data_loaded = false;
+  let original_data = undefined;
+  $: editable_userdata = undefined;
   user_promise.then((data) => {
-    console.log(data);
-    tracksstore.set(data);
+    data_loaded = true;
+    original_data = data;
+    editable_userdata = data;
   });
+  // $: changes_performed = lodashIsEqual(original_data, editable_userdata);
+  $: changes_performed = !lodashIsEqual({ test: 1 }, { test: 1 });
+  function submit() {
+    if (data_loaded === true && changes_performed === true) {
+      console.log("ok, submitting...");
+    } else {
+      console.log("no changes performed");
+    }
+  }
 </script>
 
 {#await user_promise}
@@ -58,14 +71,31 @@
         </nav>
       </div>
     </div>
-    <span
-      class="mb-4 text-3xl font-extrabold leading-tight">{user.firstname}
+    <div class="mb-8 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>
+      <span 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>
+        <button
+          disabled={!changes_performed}
+          class:opacity-50={!changes_performed}
+          type="button"
+          on:click={submit}
+          class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('save-changes')}</button>
+      </span>
+    </div>
+
     <!--  -->
     <div class="mt-2 flex items-center">
       <img
@@ -86,8 +116,13 @@
     <div class="mt-3 text-sm w-full">
       <input
         id="enabled"
+        on:change={() => {
+          editable_userdata.enabled = !editable_userdata.enabled;
+          // TODO: this reactive set does not work?
+        }}
         name="enabled"
         type="checkbox"
+        checked={editable_userdata.enabled}
         class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
       <label
         for="enabled"
@@ -95,34 +130,42 @@
       <p class="text-gray-500">set the user active/ inactive</p>
     </div>
     <div class="text-sm w-full">
-      <label for="firstname" class="font-medium text-gray-700">First name</label>
+      <label
+        for="firstname"
+        class="font-medium text-gray-700">{$_('first-name')}</label>
       <input
         autocomplete="off"
-        placeholder="First name"
+        placeholder={$_('first-name')}
         type="text"
+        bind:value={editable_userdata.firstname}
         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 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
     </div>
     <div class="text-sm w-full">
-      <label for="middlename" class="font-medium text-gray-700">Middle name</label>
+      <label
+        for="middlename"
+        class="font-medium text-gray-700">{$_('middle-name')}</label>
       <input
         autocomplete="off"
-        placeholder="Middle name"
+        placeholder={$_('middle-name')}
         type="text"
+        bind:value={editable_userdata.middlename}
         name="middlename"
         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 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
     </div>
     <div class="text-sm w-full">
-      <label for="lastname" class="font-medium text-gray-700">Last name</label>
+      <label
+        for="lastname"
+        class="font-medium text-gray-700">{$_('last-name')}</label>
       <input
         autocomplete="off"
-        placeholder="Last name"
+        placeholder={$_('last-name')}
         type="text"
+        bind:value={editable_userdata.lastname}
         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 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
     </div>
   </section>
 {:catch error}
-  <!-- promise was rejected -->
   <PromiseError {error} />
 {/await}

src/components/Users.svelte

@@ -7,19 +7,17 @@
 
 <section class="container p-5">
   <span class="mb-1 text-3xl font-extrabold leading-tight">
-    Users
+    {$_('users')}
     <button
       on:click={() => {
         modal_open = true;
       }}
       type="button"
       class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
-      Create User
+      {$_('create-user')}
     </button>
   </span>
-  <p class="mb-8 text-lg text-gray-500">
-    manage admin users
-  </p>
+  <p class="mb-8 text-lg text-gray-500">{$_('manage-admin-users')}</p>
   <UsersOverview />
 </section>
 <AddUserModal bind:modal_open />

src/components/UsersOverview.svelte

@@ -1,25 +1,20 @@
 <script>
-  import { _, json } from "svelte-i18n";
+  import { _ } from "svelte-i18n";
   import Toastify from "toastify-js";
-  import TracksEmptyState from "./TracksEmptyState.svelte";
-  import { TrackService, UserService } from "@odit/lfk-client-js";
+  import { UserService } from "@odit/lfk-client-js";
   const users_promise = UserService.userControllerGetAll();
-  import { getlang } from "./datatable_i18n";
-  import { Grid, html } from "gridjs";
   import "gridjs/dist/theme/mermaid.css";
-  import { tracks as tracksstore } from "../store.js";
+  import { users as usersstore } from "../store.js";
   import UsersEmptyState from "./UsersEmptyState.svelte";
+  $: searchvalue = "";
   $: userscache = [];
-  $: blocked = [];
-  let table;
-  let datatable;
-  let datatable_inited = false;
-  tracksstore.subscribe((val) => {
+  $: advanced_search = false;
+  usersstore.subscribe((val) => {
     userscache = val;
   });
   users_promise.then((data) => {
     console.log(data);
-    tracksstore.set(data);
+    usersstore.set(data);
   });
 </script>
 
@@ -34,6 +29,26 @@
   {#if userscache.length === 0}
     <UsersEmptyState />
   {:else}
+    {#if advanced_search}
+      advanced search
+    {:else}
+      <input
+        type="search"
+        bind:value={searchvalue}
+        placeholder={$_('datatable.search')}
+        aria-label={$_('datatable.search')}
+        class="gridjs-input gridjs-search-input mb-4" />
+    {/if}
+    <button
+      on:click={() => {
+        advanced_search = !advanced_search;
+      }}
+      type="button"
+      class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm">
+      {#if advanced_search}
+        toggle simple search
+      {:else}toggle advanced search{/if}
+    </button>
     <div
       class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
       <table class="divide-y divide-gray-200 w-full">
@@ -44,11 +59,6 @@
               class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
               Name
             </th>
-            <th
-              scope="col"
-              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-              Title
-            </th>
             <th
               scope="col"
               class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
@@ -66,145 +76,65 @@
         </thead>
         <tbody class="divide-y divide-gray-200">
           {#each users as u}
-            <tr>
-              <td class="px-6 py-4 whitespace-nowrap">
-                <div class="flex items-center">
-                  {#if u.profilePic}
-                    <div class="flex-shrink-0 h-10 w-10">
-                      <img
-                        class="h-10 w-10 rounded-full"
-                        src={u.profilePic}
-                        alt="" />
-                    </div>
-                  {/if}
-                  <div class="ml-4">
-                    <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}
+            {#if Object.values(u)
+              .toString()
+              .toLowerCase()
+              .includes(searchvalue)}
+              <tr>
+                <td class="px-6 py-4 whitespace-nowrap">
+                  <div class="flex items-center">
+                    {#if u.profilePic}
+                      <div class="flex-shrink-0 h-10 w-10">
+                        <img
+                          class="h-10 w-10 rounded-full"
+                          src={u.profilePic}
+                          alt="" />
+                      </div>
+                    {/if}
+                    <div class="ml-4">
+                      <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}
+                      </div>
                     </div>
                   </div>
-                </div>
-              </td>
-              <td class="px-6 py-4 whitespace-nowrap">
-                <div class="text-sm text-gray-900 dark:text-gray-100">
-                  Regional Paradigm Technician
-                </div>
-                <div class="text-sm text-gray-500">Optimization</div>
-              </td>
-              <td class="px-6 py-4 whitespace-nowrap">
-                {#if u.enabled}
-                  <span
-                    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span>
-                {:else}
-                  <span
-                    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Inactive</span>
-                {/if}
-              </td>
-              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                {#each u.groups as g}
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                  {#if u.enabled}
+                    <span
+                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span>
+                  {:else}
+                    <span
+                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Inactive</span>
+                  {/if}
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                  {#each u.groups as g}
+                    <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>
+                <td
+                  class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                   <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>
-              <td
-                class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                <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>
-              </td>
-            </tr>
+                    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>
+                </td>
+              </tr>
+            {/if}
           {/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" />
-        <!-- 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" />
-                  </svg>
-                </button>
-              </li>
-              <li>
-                <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">
-                  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">
-                  3
-                </button>
-              </li>
-              <li>
-                <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>
-                <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">
-                  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" />
-                  </svg>
-                </button>
-              </li>
-            </ul>
-          </nav>
-        </span>
-      </div>
     </div>
   {/if}
 {:catch error}

src/locales/en.json

@@ -6,12 +6,18 @@
     "add-your-first-track": "Add your first track",
     "application_name": "Lauf für Kaya! - Admin",
     "author": "Author",
+    "browse": "Browse",
     "by": "by",
+    "cancel": "Cancel",
     "cannot-reset-your-password-directly": "Bummer. We unfortunately cannot reset your password directly. Please send us a mail and confirm your identity",
     "changelog": "Changelog",
+    "close": "Close",
+    "confirm-delete": "Confirm Delete",
     "count_organizations": "# Organizations",
     "count_teams": "# Teams",
+    "create": "Create",
     "create-a-new-track": "Create a new Track",
+    "create-user": "Create User",
     "credits": "Credits",
     "dashboard-greeting": "hello there",
     "dashboard-title": "Dashboard",
@@ -30,13 +36,37 @@
         "no_matching_records_found": "No matching records found",
         "an_error_happened_while_fetching_the_data": "An error happened while fetching the data"
     },
+    "delete-user": "Delete User",
     "dependency_name": "Name",
     "dont-have-your-email-connected": "Don't have your email connected?",
     "dont-panic-were-resetting-it": "Don't panic, we're resetting it ✌",
+    "drag-and-drop-your-files-or": "Drag & Drop your files or",
     "e-mail-adress": "E-Mail Adress",
     "email_address_or_username": "Email / username",
     "error_on_login": "Error on login",
     "faq": "FAQ",
+    "filepond__abort": "Abort",
+    "filepond__cancel": "Cancel",
+    "filepond__error-during-load": "Error during load",
+    "filepond__error-during-remove": "Error during remove",
+    "filepond__error-during-revert": "Error during revert",
+    "filepond__error-during-upload": "Error during upload",
+    "filepond__field-contains-invalid-files": "Field contains invalid files",
+    "filepond__loading": "Loading",
+    "filepond__remove": "Remove",
+    "filepond__retry": "Retry",
+    "filepond__size-not-available": "Size not available",
+    "filepond__tap-to-cancel": "tap to cancel",
+    "filepond__tap-to-retry": "tap to retry",
+    "filepond__tap-to-undo": "tap to undo",
+    "filepond__undo": "Undo",
+    "filepond__upload": "Upload",
+    "filepond__upload-cancelled": "Upload cancelled",
+    "filepond__upload-complete": "Upload complete",
+    "filepond__uploading": "Uploading",
+    "filepond__waiting-for-size": "Waiting for size",
+    "first-name": "First name",
+    "first-name-is-required": "First Name is required",
     "forgot_password?": "Forgot your password?",
     "general-stats": "General Stats",
     "general_promise_error": "😢 Error",
@@ -44,19 +74,25 @@
     "hallo": "hello",
     "installed-version": "Installed version",
     "invalid-mail-reset": "the provided email is invalid",
+    "last-name": "Last name",
+    "last-name-is-required": "Last Name is required",
     "lfk-is-os": "The \"Lauf für Kaya!\" Frontend is (like all other projects for the \"LfK!\" Also) an open source project.",
     "license": "License",
+    "licenses-are-being-loaded": "Licenses are being loaded...",
     "log_in": "Log in",
     "log_in_to_your_account": "Log in to your account",
     "login_is_checked": "Login is being checked...",
     "logout": "Logout",
     "mail-validation-in-progress": "mail validation in progress...",
+    "manage-admin-users": "manage admin users",
+    "middle-name": "Middle name",
     "minimum-lap-time-in-s": "minimum lap time in s",
     "no-license-text-could-be-found": "No license text could be found 😢",
     "no-tracks-added-yet": "there are no tracks added yet.",
     "orgs": "Orgs",
     "oss_credit_description": "We use a lot of open source software on these projects, and would like to thank the following projects and contributors who help make open source great!",
     "password": "Password",
+    "password-is-required": "Password is required",
     "please-provide-the-required-information-to-add-a-new-track": "Please provide the required information to add a new track.",
     "profile-picture": "Profile Picture",
     "read-license": "Read License",
@@ -64,6 +100,7 @@
     "repo_link": "Link",
     "reset-my-password": "Reset my password",
     "runners": "Runners",
+    "save-changes": "Save Changes",
     "send-a-mail-to-lfk-odit-services": "send a mail to lfk@odit.services",
     "settings": "Settings",
     "signout": "Sign out",
@@ -80,6 +117,7 @@
     "track-name": "Track name",
     "tracks": "Tracks",
     "users": "Users",
+    "valid-email-is-required": "valid email is required",
     "welcome_wavinghand": "Welcome 👋",
     "your_profile": "Your Profile"
 }

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