From 5937a0d7ce970d38ddb0e4c6a02d11f8c8b53e9b Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Mon, 11 Jan 2021 21:07:30 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=92=20added=20rendering=20based=20on?=
 =?UTF-8?q?=20permission=20level?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #12
---
 src/components/AddUserModal.svelte  |   6 +-
 src/components/Footer.svelte        |  11 +-
 src/components/UserDetail.svelte    |   9 +
 src/components/Users.svelte         |  25 ++-
 src/components/UsersOverview.svelte | 315 ++++++++++++++--------------
 5 files changed, 195 insertions(+), 171 deletions(-)

diff --git a/src/components/AddUserModal.svelte b/src/components/AddUserModal.svelte
index 8af83feb..5d9c3298 100644
--- 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) => {
           //
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
index 1ef90ea9..4669de93 100644
--- a/src/components/Footer.svelte
+++ b/src/components/Footer.svelte
@@ -1,9 +1,12 @@
 <script>
   import { _ } from "svelte-i18n";
-  const releaseinfo = document
-    .getElementById("buildinfo")
-    .textContent.replace("RELEASE_INFO-", "")
-    .replace("-RELEASE_INFO", "");
+  $: releaseinfo = "";
+  setTimeout(() => {
+    releaseinfo = document
+      .getElementById("buildinfo")
+      .textContent.replace("RELEASE_INFO-", "")
+      .replace("-RELEASE_INFO", "");
+  }, 1500);
   const year = new Date().getFullYear();
 </script>
 
diff --git a/src/components/UserDetail.svelte b/src/components/UserDetail.svelte
index 6d290e88..1fe9da1c 100644
--- a/src/components/UserDetail.svelte
+++ b/src/components/UserDetail.svelte
@@ -1,6 +1,7 @@
 <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";
@@ -97,6 +98,8 @@
       {original_data.middlename || ''}
       {original_data.lastname}
       <span data-id="user_actions_${editable_userdata.id}">
+        {#if store.state.jwtinfo.userdetails.permissions.includes('USER:DELETE')}
+          {#if delete_triggered}
             <button
               on:click={deleteUser}
               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>
@@ -105,18 +108,24 @@
                 delete_triggered = !delete_triggered;
               }}
               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>
 
diff --git a/src/components/Users.svelte b/src/components/Users.svelte
index 945905b5..0891d565 100644
--- a/src/components/Users.svelte
+++ b/src/components/Users.svelte
@@ -1,23 +1,30 @@
 <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')}
-    <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')}
-    </button>
+    {#if store.state.jwtinfo.userdetails.permissions.includes('USER:CREATE')}
+      <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')}
+      </button>
+    {/if}
   </span>
   <p class="mb-8 text-lg text-gray-500">{$_('manage-admin-users')}</p>
   <UsersOverview />
 </section>
-<AddUserModal bind:modal_open />
+
+{#if store.state.jwtinfo.userdetails.permissions.includes('USER:CREATE')}
+  <AddUserModal bind:modal_open />
+{/if}
diff --git a/src/components/UsersOverview.svelte b/src/components/UsersOverview.svelte
index 72296940..2bcf706d 100644
--- a/src/components/UsersOverview.svelte
+++ b/src/components/UsersOverview.svelte
@@ -5,6 +5,7 @@
   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 = [];
@@ -19,163 +20,167 @@
   });
 </script>
 
-{#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"
-    role="alert">
-    <p class="font-bold">users are being loaded...</p>
-    <p class="text-sm">{$_('this-might-take-a-moment')}</p>
-  </div>
-{:then users}
-  {#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>
+{#if store.state.jwtinfo.userdetails.permissions.includes('USER:GET')}
+  {#await users_promise}
     <div
-      class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
-      <table class="divide-y divide-gray-200 w-full">
-        <thead class="bg-gray-50">
-          <tr>
-            <th
-              scope="col"
-              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">
-              Status
-            </th>
-            <th
-              scope="col"
-              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-              Groups
-            </th>
-            <th scope="col" class="relative px-6 py-3">
-              <span class="sr-only">Action</span>
-            </th>
-          </tr>
-        </thead>
-        <tbody class="divide-y divide-gray-200">
-          {#each users as u}
-            {#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}
+      class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
+      role="alert">
+      <p class="font-bold">users are being loaded...</p>
+      <p class="text-sm">{$_('this-might-take-a-moment')}</p>
+    </div>
+  {:then users}
+    {#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">
+          <thead class="bg-gray-50">
+            <tr>
+              <th
+                scope="col"
+                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">
+                Status
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Groups
+              </th>
+              <th scope="col" class="relative px-6 py-3">
+                <span class="sr-only">Action</span>
+              </th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-200">
+            {#each users as u}
+              {#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">
-                  {#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>
-                {#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);
+                  </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>
+                  {#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
                             });
-                          })
-                          .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>
-                    <button
-                      on:click={() => {
-                        active_deletes[u.id] = true;
-                      }}
-                      tabindex="0"
-                      class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Delete</button>
-                  </td>
-                {/if}
-              </tr>
-            {/if}
-          {/each}
-        </tbody>
-      </table>
+                        }}
+                        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>
+                      {#if store.state.jwtinfo.userdetails.permissions.includes('USER:DELETE')}
+                        <button
+                          on:click={() => {
+                            active_deletes[u.id] = true;
+                          }}
+                          tabindex="0"
+                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Delete</button>
+                      {/if}
+                    </td>
+                  {/if}
+                </tr>
+              {/if}
+            {/each}
+          </tbody>
+        </table>
+      </div>
+    {/if}
+  {:catch error}
+    <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
+      <span class="inline-block align-middle mr-8">
+        <b class="capitalize">{$_('general_promise_error')}</b>
+        {error}
+      </span>
     </div>
-  {/if}
-{:catch error}
-  <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
-    <span class="inline-block align-middle mr-8">
-      <b class="capitalize">{$_('general_promise_error')}</b>
-      {error}
-    </span>
-  </div>
-{/await}
+  {/await}
+{/if}