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

🕕 set manual refresh time to 2min
ℹ update jwtinfo store on token refresh
2021-01-11 21:08:44 +01:00 · 2021-01-11 21:08:39 +01:00 · 2021-01-11 21:08:14 +01:00 · 2021-01-11 21:07:30 +01:00 · 2021-01-11 21:06:47 +01:00 · 2021-01-11 20:41:57 +01:00
10 changed files with 339 additions and 170 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,9 +2,20 @@
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 #### [0.1.6](https://git.odit.services/lfk/frontend/compare/0.1.5...0.1.6)
 - ✨ UsersOverview - user delete [`f0c100a`](https://git.odit.services/lfk/frontend/commit/f0c100aee47d6a5aeb0995db79b268f33bf316e9)
 - 🔒 UserDetail - added basic layout for permission change [`81c1537`](https://git.odit.services/lfk/frontend/commit/81c1537bada2c87127385d9110d48459cd1b505f)
 - 📧 UserDetail - email input [`f856c6a`](https://git.odit.services/lfk/frontend/commit/f856c6ae3792c93aee148339d89e3978db6e9293)
 - ✨ UserDetail multiselect layout for groups [`98ecfab`](https://git.odit.services/lfk/frontend/commit/98ecfab0325e35c5418775f7162049b56e5f332f)
 - UserDetail - placeholder for permission picker 🔒 [`b948b8c`](https://git.odit.services/lfk/frontend/commit/b948b8c1a48e5b4bc6a083139d26100ef4499970)
 #### [0.1.5](https://git.odit.services/lfk/frontend/compare/0.1.4...0.1.5)
 > 10 January 2021
 - Merge commit '16f572480ad55425890061f9dad65fe85f2f39ad' into dev [`#30`](https://git.odit.services/lfk/frontend/issues/30)
 - 🚀RELEASE v0.1.5 [`330755c`](https://git.odit.services/lfk/frontend/commit/330755c63e3405533a5da79c84ef4f379eb43e1c)
 - ⤵ load dynamic build info in Footer component [`c089bb3`](https://git.odit.services/lfk/frontend/commit/c089bb39298fb1067093c2fa81101130c214947c)
 - 📅 dynamic copyright year in Footer component [`b8a9e4f`](https://git.odit.services/lfk/frontend/commit/b8a9e4f272f925999b9a032dd009f7498acbfae0)
 - 👀 improved Footer layout + display on Login component [`43b4065`](https://git.odit.services/lfk/frontend/commit/43b406592ebe115cea04a8dbf36874c0a5bdd7e9)
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@odit/lfk-frontend",
-	"version": "0.1.5",
+	"version": "0.1.6",
 	"scripts": {
 		"i18n-order": "node order.js",
 		"dev": "snowpack dev",
--- a/public/index.html
+++ b/public/index.html
@@ -13,7 +13,7 @@
 </head>
 <body>
-  <span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-0.1.5-RELEASE_INFO</span>
+  <span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-0.1.6-RELEASE_INFO</span>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <script src="/env.js"></script>
  <script defer type="module" src="/_dist_/index.js"></script>
--- a/src/components/AddUserModal.svelte
+++ b/src/components/AddUserModal.svelte
@@ -2,7 +2,7 @@
  import { _ } from "svelte-i18n";
  import { clickOutside } from "./outsideclick";
  import { focusTrap } from "svelte-focus-trap";
-  import { tracks as tracksstore } from "../store.js";
+  import { tracks as usersstore } from "../store.js";
  import { UserService } from "@odit/lfk-client-js";
  import isEmail from "validator/es/lib/isEmail";
  import Toastify from "toastify-js";
@@ -68,11 +68,11 @@
            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
          }).showToast();
          let storeval = [];
-          tracksstore.subscribe((val) => {
+          usersstore.subscribe((val) => {
            storeval = val;
          });
          storeval.push(result);
-          tracksstore.set(storeval);
+          usersstore.set(storeval);
        })
        .catch((err) => {
          //
--- a/src/components/Footer.svelte
+++ b/src/components/Footer.svelte
@@ -1,9 +1,12 @@
 <script>
  import { _ } from "svelte-i18n";
-  const releaseinfo = document
+  $: releaseinfo = "";
  setTimeout(() => {
    releaseinfo = document
      .getElementById("buildinfo")
      .textContent.replace("RELEASE_INFO-", "")
      .replace("-RELEASE_INFO", "");
  }, 1500);
  const year = new Date().getFullYear();
 </script>
--- a/src/components/UserDetail.svelte
+++ b/src/components/UserDetail.svelte
@@ -1,28 +1,50 @@
 <script>
  import { _ } from "svelte-i18n";
  import lodashIsEqual from "lodash.isequal";
  import store from "../store";
  import { UserService } from "@odit/lfk-client-js";
  import "gridjs/dist/theme/mermaid.css";
  import PromiseError from "./PromiseError.svelte";
  export let params;
  const user_promise = UserService.userControllerGetOne(params.userid);
  let data_loaded = false;
-  let original_data = undefined;
+  $: delete_triggered = false;
  $: original_data = {};
  $: editable_userdata = undefined;
  user_promise.then((data) => {
    data_loaded = true;
-    original_data = data;
+    original_data = Object.assign(original_data, data);
    editable_userdata = data;
  });
-  // $: changes_performed = lodashIsEqual(original_data, editable_userdata);
+  $: 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...");
      console.log(editable_userdata);
      UserService.userControllerPut(original_data.id, editable_userdata)
        .then((resp) => {
          console.log(resp);
          Object.assign(original_data, editable_userdata);
          original_data = editable_userdata;
          Object.assign(original_data, editable_userdata);
        })
        .catch((err) => {
          console.log(err);
        });
    } else {
      console.log("no changes performed");
    }
  }
  function deleteUser() {
    UserService.userControllerRemove(original_data.id, true)
      .then((resp) => {
        console.log(resp);
        location.replace("./");
      })
      .catch((err) => {
        console.log(err);
      });
  }
 </script>
 {#await user_promise}
@@ -63,36 +85,47 @@
                <polyline points="12 5 19 12 12 19" /></svg>
            </li>
            <li class="flex items-center">
-              <span class="mr-2">{user.firstname}
+              <span class="mr-2">{original_data.firstname}
-                {user.middlename || ''}
+                {original_data.middlename || ''}
-                {user.lastname}</span>
+                {original_data.lastname}</span>
            </li>
          </ol>
        </nav>
      </div>
    </div>
    <div class="mb-8 text-3xl font-extrabold leading-tight">
-      {user.firstname}
+      {original_data.firstname}
-      {user.middlename || ''}
+      {original_data.middlename || ''}
-      {user.lastname}
+      {original_data.lastname}
-      <span data-id="user_actions_${user.id}">
+      <span data-id="user_actions_${editable_userdata.id}">
        {#if store.state.jwtinfo.userdetails.permissions.includes('USER:DELETE')}
          {#if delete_triggered}
            <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"
+              on:click={deleteUser}
-          data-userid="${user.id}"
+              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">{$_('confirm-delete')}</button>
          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"
+              on:click={() => {
-          data-userid="${user.id}"
+                delete_triggered = !delete_triggered;
-          onclick="user__delete_confirm()">{$_('confirm-delete')}</button>
+              }}
              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm">{$_('cancel')}</button>
          {/if}
          {#if !delete_triggered}
            <button
              on:click={() => {
                delete_triggered = true;
              }}
              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>
          {/if}
        {/if}
        {#if !delete_triggered}
          <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>
        {/if}
      </span>
    </div>
@@ -101,7 +134,7 @@
      <img
        alt={$_('profile-picture')}
        class="inline-block h-20 w-20 rounded-full overflow-hidden bg-gray-100"
-        src={user.profilePic} />
+        src={editable_userdata.profilePic} />
      <!-- <span
        class="inline-block h-12 w-12 rounded-full overflow-hidden bg-gray-100"><svg
          class="h-full w-full text-gray-300"
@@ -165,6 +198,79 @@
        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>
    <div class="text-sm w-full">
      <label
        for="email"
        class="font-medium text-gray-700">{$_('e-mail-adress')}</label>
      <input
        autocomplete="off"
        placeholder={$_('e-mail-adress')}
        type="email"
        bind:value={editable_userdata.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 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
    </div>
    <div class="text-sm w-full">
      <span class="font-medium">{$_('groups')}</span>
      <select
        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"
        multiple>
        <option>Admins</option>
        <option>Finanzen</option>
        <option>...</option>
      </select>
    </div>
    <div class="text-sm w-full">
      <span class="font-medium">Permissions</span>
      <div
        class="border-4 border-dashed rounded h-96 mb-4 p-5 text-lg text-center">
        <!--  -->
        <div class="flex flex-wrap -mx-1 overflow-hidden">
          <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
            <button
              type="button"
              class="w-full 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">&gt;</button>
          </div>
          <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
            <button
              type="button"
              class="w-full 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">&lt;</button>
          </div>
        </div>
        <!--  -->
        <div class="flex flex-wrap -mx-1 overflow-hidden">
          <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
            <div
              class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
              <p
                class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input">
                DEMO_PERMISSION
              </p>
              <p
                class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input">
                DEMO_PERMISSION
              </p>
            </div>
          </div>
          <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
            <div
              class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
              <p
                class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input">
                DEMO_PERMISSION
              </p>
              <p
                class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input">
                DEMO_PERMISSION
              </p>
            </div>
          </div>
        </div>
        TODO: permission picker 🔒
      </div>
    </div>
  </section>
 {:catch error}
  <PromiseError {error} />
--- a/src/components/Users.svelte
+++ b/src/components/Users.svelte
@@ -1,13 +1,16 @@
 <script>
  import { _ } from "svelte-i18n";
  import store from "../store";
  import AddUserModal from "./AddUserModal.svelte";
  export let modal_open = false;
  import UsersOverview from "./UsersOverview.svelte";
  console.log(store.state.jwtinfo.userdetails.permissions);
 </script>
 <section class="container p-5">
  <span class="mb-1 text-3xl font-extrabold leading-tight">
    {$_('users')}
    {#if store.state.jwtinfo.userdetails.permissions.includes('USER:CREATE')}
      <button
        on:click={() => {
          modal_open = true;
@@ -16,8 +19,12 @@
        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')}
      </button>
    {/if}
  </span>
  <p class="mb-8 text-lg text-gray-500">{$_('manage-admin-users')}</p>
  <UsersOverview />
 </section>
 {#if store.state.jwtinfo.userdetails.permissions.includes('USER:CREATE')}
  <AddUserModal bind:modal_open />
 {/if}
--- a/src/components/UsersOverview.svelte
+++ b/src/components/UsersOverview.svelte
@@ -5,8 +5,10 @@
  const users_promise = UserService.userControllerGetAll();
  import "gridjs/dist/theme/mermaid.css";
  import { users as usersstore } from "../store.js";
  import store from "../store";
  import UsersEmptyState from "./UsersEmptyState.svelte";
  $: searchvalue = "";
  $: active_deletes = [];
  $: userscache = [];
  $: advanced_search = false;
  usersstore.subscribe((val) => {
@@ -18,6 +20,7 @@
  });
 </script>
 {#if store.state.jwtinfo.userdetails.permissions.includes('USER:GET')}
  {#await users_promise}
    <div
      class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
@@ -120,16 +123,51 @@
                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{g.name}</a>
                    {/each}
                  </td>
                  {#if active_deletes[u.id] === true}
                    <td
                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                      <button
                        on:click={() => {
                          active_deletes[u.id] = false;
                        }}
                        tabindex="0"
                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">Cancel
                        Delete</button>
                      <button
                        on:click={() => {
                          UserService.userControllerRemove(u.id, true)
                            .then((resp) => {
                              console.log(resp);
                              // user deleted
                              users_promise.then((data) => {
                                console.log(data);
                                usersstore.set(data);
                              });
                            })
                            .catch((err) => {
                              // error deleting user
                            });
                        }}
                        tabindex="0"
                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Confirm
                        Delete</button>
                    </td>
                  {:else}
                    <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
+                      {#if store.state.jwtinfo.userdetails.permissions.includes('USER:DELETE')}
                        <button
                          on:click={() => {
                            active_deletes[u.id] = true;
                          }}
                          tabindex="0"
-                    href="#"
+                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Delete</button>
-                    class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Delete</span>
+                      {/if}
                    </td>
                  {/if}
                </tr>
              {/if}
            {/each}
@@ -145,3 +183,4 @@
      </span>
    </div>
  {/await}
 {/if}
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -71,6 +71,7 @@
    "general-stats": "General Stats",
    "general_promise_error": "😢 Error",
    "goback": "Go Home",
    "groups": "Groups",
    "hallo": "hello",
    "installed-version": "Installed version",
    "invalid-mail-reset": "the provided email is invalid",
--- a/src/store.js
+++ b/src/store.js
@@ -27,6 +27,8 @@ const store = () => {
 			AuthService.authControllerRefresh({ token: state.auth.refresh_token }).then((auth) => {
 				console.log('got new auth');
 				OpenAPI.TOKEN = auth.access_token;
 				const jwtinfo = JSON.parse(atob(auth.access_token.split('.')[1]));
 				state.jwtinfo = jwtinfo;
 				localForage.setItem('logindata', auth);
 			});
 		},
@@ -39,8 +41,8 @@ const store = () => {
 				//
 				state.refreshInterval = setInterval(() => {
 					this.refreshAuth();
-					// 4min
+					// 2min
-				}, 4 * 60000);
+				}, 2 * 60000);
 				//
 				return state;
 			});
Author	SHA1	Message	Date
Philipp Dormann	8c4b595c30	Merge branch 'dev' into feature/12-user-management	2021-01-11 21:08:44 +01:00
Philipp Dormann	be629e5c6b	🕕 set manual refresh time to 2min Some checks failed continuous-integration/drone/push Build was killed Details	2021-01-11 21:08:39 +01:00
Philipp Dormann	63569684a3	ℹ update jwtinfo store on token refresh	2021-01-11 21:08:14 +01:00
Philipp Dormann	5937a0d7ce	🔒 added rendering based on permission level ref #12	2021-01-11 21:07:30 +01:00
Philipp Dormann	4512272c1c	❌ UserDetail - delete ref #12	2021-01-11 21:06:47 +01:00
Philipp Dormann	ce1f3842e0	🖊 UserDetail - reactivity on edit + update functionality ref #12	2021-01-11 20:41:57 +01:00
Philipp Dormann	ee01c3a059	🚀RELEASE v0.1.6 All checks were successful continuous-integration/drone/push Build is passing Details	2021-01-10 18:19:45 +01:00
Philipp Dormann	81c1537bad	🔒 UserDetail - added basic layout for permission change ref #12	2021-01-10 18:14:11 +01:00
Philipp Dormann	98ecfab032	✨ UserDetail multiselect layout for groups ref #12	2021-01-10 18:02:36 +01:00
Philipp Dormann	b948b8c1a4	UserDetail - placeholder for permission picker 🔒 ref #12	2021-01-10 17:55:13 +01:00
Philipp Dormann	f856c6ae37	📧 UserDetail - email input ref #12	2021-01-10 17:54:50 +01:00
Philipp Dormann	2dd2580530	Merge branch 'dev' into feature/12-user-management	2021-01-10 17:34:12 +01:00
Philipp Dormann	f0c100aee4	✨ UsersOverview - user delete ref #12	2021-01-10 15:16:02 +01:00