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) => {
           //

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>
 

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>
 

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}

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,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"
@@ -156,12 +158,14 @@
                       <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>
@@ -179,3 +183,4 @@
       </span>
     </div>
   {/await}
+{/if}