From ef9fc596f57d63c1bf9c26614d746bf37394f832 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Thu, 14 Jan 2021 18:21:48 +0100
Subject: [PATCH 01/17] =?UTF-8?q?=F0=9F=99=8B=E2=80=8D=E2=99=82=EF=B8=8F?=
 =?UTF-8?q?=20UserDetail=20-=20disable=20profile=20picture=20edit?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #12
---
 src/components/UserDetail.svelte | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/UserDetail.svelte b/src/components/UserDetail.svelte
index fbe7687b..fcac0a38 100644
--- a/src/components/UserDetail.svelte
+++ b/src/components/UserDetail.svelte
@@ -171,14 +171,16 @@
         {/if}
       </span>
     </div>
-    <div class="mt-2 flex items-center">
+    <div class="mt-3 text-sm w-full">
+      <p
+        class="ml-1 font-medium text-gray-700">Profile Picture</p>
       <img
         alt={$_('profile-picture')}
-        class="inline-block h-20 w-20 rounded-full overflow-hidden bg-gray-100"
+        class="h-20 w-20 rounded-full overflow-hidden bg-gray-100"
         src={editable_userdata.profilePic} />
-      <button
+      <!-- <button
         type="button"
-        class="ml-5 bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Change</button>
+        class="ml-5 bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Change</button> -->
     </div>
     <!--  -->
     <div class="mt-3 text-sm w-full">
-- 
2.47.2


From 86c54e04a84917383d3726b324c416ca1bd74627 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Thu, 14 Jan 2021 18:22:09 +0100
Subject: [PATCH 02/17] =?UTF-8?q?=F0=9F=99=8B=E2=80=8D=E2=99=82=EF=B8=8F?=
 =?UTF-8?q?=20UserDetail=20-=20active/inactive=20user=20state=20edit?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #12
---
 src/components/UserDetail.svelte | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/UserDetail.svelte b/src/components/UserDetail.svelte
index fcac0a38..ac28a1e3 100644
--- a/src/components/UserDetail.svelte
+++ b/src/components/UserDetail.svelte
@@ -184,7 +184,11 @@
     </div>
     <!--  -->
     <div class="mt-3 text-sm w-full">
-      <input
+      <label
+        for="enabled"
+        class="ml-1 font-medium text-gray-700">Active?</label>
+        <br>
+      <p class="text-gray-500"> <input
         id="enabled"
         on:change={() => {
           editable_userdata.enabled = !editable_userdata.enabled;
@@ -193,11 +197,7 @@
         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"
-        class="ml-1 font-medium text-gray-700">Active?</label>
-      <p class="text-gray-500">set the user active/ inactive</p>
+        class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />  set the user active/ inactive</p>
     </div>
     <div class="text-sm w-full">
       <label
-- 
2.47.2


From b34e3aeed0f026308288fb568542cc0ba587b576 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Thu, 14 Jan 2021 18:24:37 +0100
Subject: [PATCH 03/17] =?UTF-8?q?=F0=9F=91=80=20UsersOverview=20-=20disabl?=
 =?UTF-8?q?e=20advanced=20search?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #12
---
 src/components/UsersOverview.svelte | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/UsersOverview.svelte b/src/components/UsersOverview.svelte
index db80fabb..9a43fb05 100644
--- a/src/components/UsersOverview.svelte
+++ b/src/components/UsersOverview.svelte
@@ -33,17 +33,17 @@
     {#if current_users.length === 0}
       <UsersEmptyState />
     {:else}
-      {#if advanced_search}
+      <!-- {#if advanced_search}
         advanced search
-      {:else}
+      {:else} -->
         <input
           type="search"
           bind:value={searchvalue}
           placeholder={$_('datatable.search')}
           aria-label={$_('datatable.search')}
           class="gridjs-input gridjs-search-input mb-4" />
-      {/if}
-      <button
+      <!-- {/if} -->
+      <!-- <button
         on:click={() => {
           advanced_search = !advanced_search;
         }}
@@ -52,7 +52,7 @@
         {#if advanced_search}
           toggle simple search
         {:else}toggle advanced search{/if}
-      </button>
+      </button> -->
       <div
         class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
         <table class="divide-y divide-gray-200 w-full">
-- 
2.47.2


From 65b36f8e695479809566213ebcb64d51a7c6a52e Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Thu, 14 Jan 2021 18:56:28 +0100
Subject: [PATCH 04/17] =?UTF-8?q?=F0=9F=99=8B=E2=80=8D=E2=99=82=EF=B8=8F?=
 =?UTF-8?q?=F0=9F=94=92=20UserDetail=20-=20permission=20layout=20ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #12
---
 src/components/UserDetail.svelte | 34 ++++++++++++++++++++++----------
 1 file changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/components/UserDetail.svelte b/src/components/UserDetail.svelte
index ac28a1e3..a8fd61ab 100644
--- a/src/components/UserDetail.svelte
+++ b/src/components/UserDetail.svelte
@@ -43,6 +43,20 @@
       allpermissions=allpermissions.concat([p.target + ":" + p.action])
     });
   });
+  // editable_userdata.permissions=[];
+  const user_permissions = UserService.userControllerGetPermissions(params.userid).then((val) => {
+  // console.log(val);
+  editable_userdata.permissions=[]
+  val.directlyGranted.forEach(p => {
+    editable_userdata.permissions=editable_userdata.permissions.concat([p.target + ":" + p.action])
+  });
+  val.inherited.forEach(p => {
+    editable_userdata.permissions=editable_userdata.permissions.concat([p.target + ":" + p.action])
+  });
+  // editable_userdata.permissions.push()
+  // console.log(val.directlyGranted);
+  // console.log(val.inherited);
+  })
   $: changes_performed = !lodashIsEqual(original_data, editable_userdata);
   $: groups_changed = JSON.stringify(usergroups_array)===JSON.stringify(usergroups_array_original);
   $: save_enabled = changes_performed||!groups_changed;
@@ -293,8 +307,8 @@
                 class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
                 {#each allpermissions as p}
                   {#if !editable_userdata.permissions.includes(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">
+                    <div
+                      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 text-right">
                       {p}
                       <button
                         on:click={() => {
@@ -302,8 +316,8 @@
                           editable_userdata.permissions = editable_userdata.permissions;
                         }}
                         type="button"
-                        class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-200 text-base font-medium text-black hover:bg-green-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:ml-3 sm:w-auto sm:text-sm">+</button>
-                    </p>
+                        class="w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-200 font-medium text-black hover:bg-green-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:ml-3 sm:w-auto sm:text-sm">+</button>
+                    </div>
                   {/if}
                 {/each}
               </div>
@@ -313,16 +327,16 @@
                 class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
                 {#each allpermissions as p}
                   {#if editable_userdata.permissions.includes(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">
-                      {p}
-                      <button
+                    <div
+                      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 text-left">
+                        <button
                         on:click={() => {
                           editable_userdata.permissions = editable_userdata.permissions.filter((obj) => obj !== p);
                         }}
                         type="button"
-                        class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-300 text-base font-medium text-black hover:bg-red-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm">-</button>
-                    </p>
+                        class="w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-400 font-medium text-black hover:bg-red-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm">-</button>
+                      {p}
+                    </div>
                   {/if}
                 {/each}
               </div>
-- 
2.47.2


From 1a799dc30a4f051305e5279bb3325e64ab08f323 Mon Sep 17 00:00:00 2001
From: Nicolai Ort <info@nicolai-ort.com>
Date: Sat, 16 Jan 2021 17:17:56 +0100
Subject: [PATCH 05/17] Fixed User group update

ref #12
---
 src/components/UserDetail.svelte | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/UserDetail.svelte b/src/components/UserDetail.svelte
index 900bb599..f035a831 100644
--- a/src/components/UserDetail.svelte
+++ b/src/components/UserDetail.svelte
@@ -66,12 +66,7 @@
       // TODO: add+delete permissions
     }
     if (data_loaded === true && save_enabled) {
-      let tmp=[];
-      usergroups_array.forEach(g => {
-        const group=allgroups.find(obj=>obj.id===g);
-        tmp.push(group);
-      });
-      editable_userdata.groups=tmp;
+      editable_userdata.groups=usergroups_array;
       Toastify({
         text: $_("updating-user"),
         duration: 2500,
-- 
2.47.2


From 6e5a4bcb39259fc376262c16ad95555fd9cf7a0b Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Sat, 16 Jan 2021 17:19:03 +0100
Subject: [PATCH 06/17] =?UTF-8?q?=E2=9C=A8=20formatting?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #12
---
 src/components/UserDetail.svelte | 74 ++++++++++++++++----------------
 1 file changed, 37 insertions(+), 37 deletions(-)

diff --git a/src/components/UserDetail.svelte b/src/components/UserDetail.svelte
index f035a831..e3f8423c 100644
--- a/src/components/UserDetail.svelte
+++ b/src/components/UserDetail.svelte
@@ -18,7 +18,6 @@
   $: allpermissions = [];
   $: allgroups = [];
   $: allgroups_ids = [];
-  $: usergroups_array_objects = [];
   $: usergroups_array = [];
   let usergroups_array_original = [];
   user_promise.then((data) => {
@@ -26,7 +25,7 @@
     original_data = Object.assign(original_data, data);
     editable_userdata = data;
     data.groups.forEach((g) => {
-      usergroups_array=usergroups_array.concat([g.id]);
+      usergroups_array = usergroups_array.concat([g.id]);
     });
     usergroups_array_original = usergroups_array;
     allgroups.forEach((g) => {
@@ -39,26 +38,27 @@
   const permissions_promise = PermissionService.permissionControllerGetAll();
   permissions_promise.then((data) => {
     data.forEach((p) => {
-      allpermissions=allpermissions.concat([p.target + ":" + p.action])
+      allpermissions = allpermissions.concat([p.target + ":" + p.action]);
     });
   });
-  // editable_userdata.permissions=[];
-  const user_permissions = UserService.userControllerGetPermissions(params.userid).then((val) => {
-  // console.log(val);
-  editable_userdata.permissions=[]
-  val.directlyGranted.forEach(p => {
-    editable_userdata.permissions=editable_userdata.permissions.concat([p.target + ":" + p.action])
+  UserService.userControllerGetPermissions(params.userid).then((val) => {
+    editable_userdata.permissions = [];
+    val.directlyGranted.forEach((p) => {
+      editable_userdata.permissions = editable_userdata.permissions.concat([
+        p.target + ":" + p.action,
+      ]);
+    });
+    val.inherited.forEach((p) => {
+      editable_userdata.permissions = editable_userdata.permissions.concat([
+        p.target + ":" + p.action,
+      ]);
+    });
   });
-  val.inherited.forEach(p => {
-    editable_userdata.permissions=editable_userdata.permissions.concat([p.target + ":" + p.action])
-  });
-  // editable_userdata.permissions.push()
-  // console.log(val.directlyGranted);
-  // console.log(val.inherited);
-  })
   $: changes_performed = !lodashIsEqual(original_data, editable_userdata);
-  $: groups_changed = JSON.stringify(usergroups_array)===JSON.stringify(usergroups_array_original);
-  $: save_enabled = changes_performed||!groups_changed;
+  $: groups_changed =
+    JSON.stringify(usergroups_array) ===
+    JSON.stringify(usergroups_array_original);
+  $: save_enabled = changes_performed || !groups_changed;
   function submit() {
     if (
       !lodashIsEqual(original_data.permissions, editable_userdata.permissions)
@@ -66,7 +66,7 @@
       // TODO: add+delete permissions
     }
     if (data_loaded === true && save_enabled) {
-      editable_userdata.groups=usergroups_array;
+      editable_userdata.groups = usergroups_array;
       Toastify({
         text: $_("updating-user"),
         duration: 2500,
@@ -83,8 +83,7 @@
             backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
           }).showToast();
         })
-        .catch((err) => {
-        });
+        .catch((err) => {});
     } else {
     }
   }
@@ -93,8 +92,7 @@
       .then((resp) => {
         location.replace("./");
       })
-      .catch((err) => {
-      });
+      .catch((err) => {});
   }
 </script>
 
@@ -180,8 +178,7 @@
       </span>
     </div>
     <div class="mt-3 text-sm w-full">
-      <p
-        class="ml-1 font-medium text-gray-700">Profile Picture</p>
+      <p class="ml-1 font-medium text-gray-700">Profile Picture</p>
       <img
         alt={$_('profile-picture')}
         class="h-20 w-20 rounded-full overflow-hidden bg-gray-100"
@@ -195,17 +192,20 @@
       <label
         for="enabled"
         class="ml-1 font-medium text-gray-700">Active?</label>
-        <br>
-      <p class="text-gray-500"> <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" />  set the user active/ inactive</p>
+      <br />
+      <p class="text-gray-500">
+        <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" />
+        set the user active/ inactive
+      </p>
     </div>
     <div class="text-sm w-full">
       <label
@@ -323,7 +323,7 @@
                   {#if editable_userdata.permissions.includes(p)}
                     <div
                       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 text-left">
-                        <button
+                      <button
                         on:click={() => {
                           editable_userdata.permissions = editable_userdata.permissions.filter((obj) => obj !== p);
                         }}
-- 
2.47.2


From d65b463547a5cb4fb6f6de0f95795a66ebe92e31 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Sat, 16 Jan 2021 17:31:17 +0100
Subject: [PATCH 07/17] UserDetail - add permission layout

ref #12
---
 src/components/UserDetail.svelte | 31 +++++++++++++++++++++++--------
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/components/UserDetail.svelte b/src/components/UserDetail.svelte
index e3f8423c..2dc3e7d7 100644
--- a/src/components/UserDetail.svelte
+++ b/src/components/UserDetail.svelte
@@ -12,6 +12,8 @@
   export let params;
   const user_promise = UserService.userControllerGetOne(params.userid);
   let data_loaded = false;
+  let usergroups_array_original = [];
+  let vererbte = [];
   $: delete_triggered = false;
   $: original_data = {};
   $: editable_userdata = {};
@@ -19,7 +21,6 @@
   $: allgroups = [];
   $: allgroups_ids = [];
   $: usergroups_array = [];
-  let usergroups_array_original = [];
   user_promise.then((data) => {
     data_loaded = true;
     original_data = Object.assign(original_data, data);
@@ -42,6 +43,7 @@
     });
   });
   UserService.userControllerGetPermissions(params.userid).then((val) => {
+    console.log(val);
     editable_userdata.permissions = [];
     val.directlyGranted.forEach((p) => {
       editable_userdata.permissions = editable_userdata.permissions.concat([
@@ -49,9 +51,7 @@
       ]);
     });
     val.inherited.forEach((p) => {
-      editable_userdata.permissions = editable_userdata.permissions.concat([
-        p.target + ":" + p.action,
-      ]);
+      vererbte = vererbte.concat([p.target + ":" + p.action]);
     });
   });
   $: changes_performed = !lodashIsEqual(original_data, editable_userdata);
@@ -288,15 +288,16 @@
       <div class="border-4 border-dashed rounded 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">
+          <div class="my-1 px-1 w-full overflow-hidden sm:w-1/3">
             verfügbare
           </div>
-          <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">erteilte</div>
+          <div class="my-1 px-1 w-full overflow-hidden sm:w-1/3">erteilte</div>
+          <div class="my-1 px-1 w-full overflow-hidden sm:w-1/3">vererbte</div>
         </div>
         <!--  -->
         <div class="flex flex-wrap -mx-1 overflow-hidden">
           {#if allpermissions.length > 0}
-            <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
+            <div class="my-1 px-1 w-full overflow-hidden sm:w-1/3">
               <div
                 class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
                 {#each allpermissions as p}
@@ -316,7 +317,7 @@
                 {/each}
               </div>
             </div>
-            <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
+            <div class="my-1 px-1 w-full overflow-hidden sm:w-1/3">
               <div
                 class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
                 {#each allpermissions as p}
@@ -335,6 +336,20 @@
                 {/each}
               </div>
             </div>
+            <div class="my-1 px-1 w-full overflow-hidden sm:w-1/3">
+              <div
+                class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
+                {#each vererbte as p}
+                  <div
+                    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 text-left">
+                    <button
+                      type="button"
+                      class="w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-400 font-medium text-black hover:bg-red-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm">-</button>
+                    {p}
+                  </div>
+                {/each}
+              </div>
+            </div>
           {/if}
         </div>
       </div>
-- 
2.47.2


From 7d4e93912c4e1fd8a875f42a0f11b906f1ca0091 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Sat, 16 Jan 2021 18:23:28 +0100
Subject: [PATCH 08/17] UserDetail - basic permission badges

ref #12
---
 src/components/UserDetail.svelte | 158 +++++++++++--------------------
 1 file changed, 57 insertions(+), 101 deletions(-)

diff --git a/src/components/UserDetail.svelte b/src/components/UserDetail.svelte
index 2dc3e7d7..502f4136 100644
--- a/src/components/UserDetail.svelte
+++ b/src/components/UserDetail.svelte
@@ -2,26 +2,56 @@
   import { _ } from "svelte-i18n";
   import lodashIsEqual from "lodash.isequal";
   import store from "../store";
-  import {
-    UserService,
-    UserGroupService,
-    PermissionService,
-  } from "@odit/lfk-client-js";
+  import { UserService, UserGroupService } from "@odit/lfk-client-js";
   import Toastify from "toastify-js";
   import PromiseError from "./PromiseError.svelte";
   export let params;
   const user_promise = UserService.userControllerGetOne(params.userid);
   let data_loaded = false;
   let usergroups_array_original = [];
-  let vererbte = [];
+  const colors = [
+    "#f3558e",
+    "#17b978",
+    "#3498db",
+    "#3f3b3b",
+    "#775ada",
+    "#7ed6df_#000000",
+    "#000000",
+    "#21e6c1_#000000",
+    "#c0392b",
+    "#d35400",
+    "#7f8c8d",
+    "#6ab04c",
+    "#4834d4",
+    "#ff1f5a",
+    "#eac100",
+  ];
+  let matched_colors = [];
   $: delete_triggered = false;
   $: original_data = {};
   $: editable_userdata = {};
-  $: allpermissions = [];
   $: allgroups = [];
   $: allgroups_ids = [];
   $: usergroups_array = [];
+  $: search_permission = "";
   user_promise.then((data) => {
+    let current_target = "";
+    let colorindex = -1;
+    data.permissions.forEach((p) => {
+      const target = p.split(":")[0];
+      if (current_target !== p.split(":")[0]) {
+        colorindex++;
+        current_target = p.split(":")[0];
+      }
+      let background = colors[colorindex];
+      let foreground = "#fff";
+      if (background.includes("_")) {
+        foreground = background.split("_")[1];
+        background = background.split("_")[0];
+      }
+      matched_colors[target] = [background, foreground];
+    });
+    //
     data_loaded = true;
     original_data = Object.assign(original_data, data);
     editable_userdata = data;
@@ -36,35 +66,12 @@
   UserGroupService.userGroupControllerGetAll().then((data) => {
     allgroups = data;
   });
-  const permissions_promise = PermissionService.permissionControllerGetAll();
-  permissions_promise.then((data) => {
-    data.forEach((p) => {
-      allpermissions = allpermissions.concat([p.target + ":" + p.action]);
-    });
-  });
-  UserService.userControllerGetPermissions(params.userid).then((val) => {
-    console.log(val);
-    editable_userdata.permissions = [];
-    val.directlyGranted.forEach((p) => {
-      editable_userdata.permissions = editable_userdata.permissions.concat([
-        p.target + ":" + p.action,
-      ]);
-    });
-    val.inherited.forEach((p) => {
-      vererbte = vererbte.concat([p.target + ":" + p.action]);
-    });
-  });
   $: changes_performed = !lodashIsEqual(original_data, editable_userdata);
   $: groups_changed =
     JSON.stringify(usergroups_array) ===
     JSON.stringify(usergroups_array_original);
   $: save_enabled = changes_performed || !groups_changed;
   function submit() {
-    if (
-      !lodashIsEqual(original_data.permissions, editable_userdata.permissions)
-    ) {
-      // TODO: add+delete permissions
-    }
     if (data_loaded === true && save_enabled) {
       editable_userdata.groups = usergroups_array;
       Toastify({
@@ -84,7 +91,6 @@
           }).showToast();
         })
         .catch((err) => {});
-    } else {
     }
   }
   function deleteUser() {
@@ -142,7 +148,7 @@
         </nav>
       </div>
     </div>
-    <div class="mb-8 text-3xl font-extrabold leading-tight">
+    <div class="mb-8 text-3xl font-extrabold">
       {original_data.firstname}
       {original_data.middlename || ''}
       {original_data.lastname}
@@ -284,75 +290,25 @@
       </select>
     </div>
     <div class="text-sm w-full">
-      <span class="font-medium">Permissions</span>
-      <div class="border-4 border-dashed rounded 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/3">
-            verfügbare
-          </div>
-          <div class="my-1 px-1 w-full overflow-hidden sm:w-1/3">erteilte</div>
-          <div class="my-1 px-1 w-full overflow-hidden sm:w-1/3">vererbte</div>
-        </div>
-        <!--  -->
-        <div class="flex flex-wrap -mx-1 overflow-hidden">
-          {#if allpermissions.length > 0}
-            <div class="my-1 px-1 w-full overflow-hidden sm:w-1/3">
-              <div
-                class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
-                {#each allpermissions as p}
-                  {#if !editable_userdata.permissions.includes(p)}
-                    <div
-                      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 text-right">
-                      {p}
-                      <button
-                        on:click={() => {
-                          editable_userdata.permissions.push(p);
-                          editable_userdata.permissions = editable_userdata.permissions;
-                        }}
-                        type="button"
-                        class="w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-200 font-medium text-black hover:bg-green-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:ml-3 sm:w-auto sm:text-sm">+</button>
-                    </div>
-                  {/if}
-                {/each}
-              </div>
-            </div>
-            <div class="my-1 px-1 w-full overflow-hidden sm:w-1/3">
-              <div
-                class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
-                {#each allpermissions as p}
-                  {#if editable_userdata.permissions.includes(p)}
-                    <div
-                      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 text-left">
-                      <button
-                        on:click={() => {
-                          editable_userdata.permissions = editable_userdata.permissions.filter((obj) => obj !== p);
-                        }}
-                        type="button"
-                        class="w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-400 font-medium text-black hover:bg-red-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm">-</button>
-                      {p}
-                    </div>
-                  {/if}
-                {/each}
-              </div>
-            </div>
-            <div class="my-1 px-1 w-full overflow-hidden sm:w-1/3">
-              <div
-                class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
-                {#each vererbte as p}
-                  <div
-                    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 text-left">
-                    <button
-                      type="button"
-                      class="w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-400 font-medium text-black hover:bg-red-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm">-</button>
-                    {p}
-                  </div>
-                {/each}
-              </div>
-            </div>
-          {/if}
-        </div>
-      </div>
+      <p class="font-medium mb-4">Permissions</p>
+      <a
+        href="/users/{params.userid}/permissions/"
+        class="rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 font-medium text-black hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm">Edit
+        Permissions</a>
+      <input
+        autocomplete="off"
+        placeholder="Search for permission"
+        type="text"
+        bind:value={search_permission}
+        class="mt-4 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" />
+      {#each original_data.permissions as p}
+        {#if p.toLowerCase().includes(search_permission.toLowerCase())}
+          <span
+            style="background:{matched_colors[p.split(':')[0]][0]};color:{matched_colors[p.split(':')[0]][1]};"
+            class="mt-1 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-indigo-100 rounded">{p}</span>
+          <!--  -->
+        {/if}
+      {/each}
     </div>
   </section>
 {:catch error}
-- 
2.47.2


From aaab95d41400629683d89ee16013b6b4328c582c Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Sat, 16 Jan 2021 18:30:35 +0100
Subject: [PATCH 09/17] UserDetail - link to permission page

ref #12
---
 src/components/UserDetail.svelte | 32 +++++++++++++++-----------------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/src/components/UserDetail.svelte b/src/components/UserDetail.svelte
index 502f4136..eb1e9a6d 100644
--- a/src/components/UserDetail.svelte
+++ b/src/components/UserDetail.svelte
@@ -189,11 +189,7 @@
         alt={$_('profile-picture')}
         class="h-20 w-20 rounded-full overflow-hidden bg-gray-100"
         src={editable_userdata.profilePic} />
-      <!-- <button
-        type="button"
-        class="ml-5 bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Change</button> -->
     </div>
-    <!--  -->
     <div class="mt-3 text-sm w-full">
       <label
         for="enabled"
@@ -204,7 +200,6 @@
           id="enabled"
           on:change={() => {
             editable_userdata.enabled = !editable_userdata.enabled;
-            // TODO: this reactive set does not work?
           }}
           name="enabled"
           type="checkbox"
@@ -289,18 +284,21 @@
         {/each}
       </select>
     </div>
-    <div class="text-sm w-full">
-      <p class="font-medium mb-4">Permissions</p>
-      <a
-        href="/users/{params.userid}/permissions/"
-        class="rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 font-medium text-black hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm">Edit
-        Permissions</a>
-      <input
-        autocomplete="off"
-        placeholder="Search for permission"
-        type="text"
-        bind:value={search_permission}
-        class="mt-4 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 class="text-sm w-full mt-8">
+      <p class="font-medium mb-4">
+        Permissions
+        <a
+          class="px-4 py-2 bg-gray-500 rounded-md text-white"
+          href="/users/{params.userid}/permissions/">edit permissions</a>
+      </p>
+      <div class="w-full sm:my-px sm:px-px sm:w-1/2">
+        <input
+          autocomplete="off"
+          placeholder="Search for permission"
+          type="text"
+          bind:value={search_permission}
+          class="mt-4 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>
       {#each original_data.permissions as p}
         {#if p.toLowerCase().includes(search_permission.toLowerCase())}
           <span
-- 
2.47.2


From 9c6dc5b4247e76be63a92294556be1e4a9154256 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Sat, 16 Jan 2021 20:33:34 +0100
Subject: [PATCH 10/17] basic UserPermissions view

ref #12
---
 src/App.svelte                        |  10 +-
 src/components/UserPermissions.svelte | 249 ++++++++++++++++++++++++++
 2 files changed, 257 insertions(+), 2 deletions(-)
 create mode 100644 src/components/UserPermissions.svelte

diff --git a/src/App.svelte b/src/App.svelte
index c5548087..6c4c2626 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -50,6 +50,7 @@
   OpenAPI.BASE = config.baseurl;
   import { register as registerSW } from "./swmodule";
   import TeamDetail from "./components/TeamDetail.svelte";
+  import UserPermissions from "./components/UserPermissions.svelte";
   store.init();
   // registerSW();
 </script>
@@ -73,8 +74,13 @@
           <Route path="/">
             <Users />
           </Route>
-          <Route path="/:userid" let:params>
-            <UserDetail {params} />
+          <Route path="/:userid/*" let:params>
+            <Route path="/">
+              <UserDetail {params} />
+            </Route>
+            <Route path="/permissions/">
+              <UserPermissions {params} />
+            </Route>
           </Route>
         </Route>
         <Route path="/tracks/*">
diff --git a/src/components/UserPermissions.svelte b/src/components/UserPermissions.svelte
new file mode 100644
index 00000000..be72504c
--- /dev/null
+++ b/src/components/UserPermissions.svelte
@@ -0,0 +1,249 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import {
+    UserService,
+    PermissionService,
+    CreatePermission,
+  } from "@odit/lfk-client-js";
+  import Toastify from "toastify-js";
+  import PromiseError from "./PromiseError.svelte";
+  export let params;
+  let grantedPermissions_initial = [];
+  let grantedPermissions = [];
+  let inheritedPermissions = [];
+  let to_add = [];
+  let to_delete = [];
+  $: original_data = {};
+  $: save_enabled =
+    JSON.stringify(grantedPermissions) ===
+    JSON.stringify(grantedPermissions_initial);
+
+  const user_promise = UserService.userControllerGetOne(params.userid);
+  user_promise.then((data) => {
+    original_data = Object.assign(original_data, data);
+  });
+  function submit() {
+    to_delete.forEach((d) => {
+      console.log("processing...");
+      console.log(d);
+      console.log("api-calling...");
+      PermissionService.permissionControllerRemove(d, true)
+        .then((res) => {
+          console.log(res);
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    });
+    to_add.forEach((a) => {
+      console.log("processing...");
+      console.log(a);
+      console.log("api-calling...");
+      PermissionService.permissionControllerPost(a)
+        .then((res) => {
+          console.log(res);
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    });
+    // Toastify({
+    //   text: $_("updating-user"),
+    //   duration: 2500,
+    // }).showToast();
+    // UserService.userControllerPut(original_data.id, editable_userdata)
+    //   .then((resp) => {
+    //     Object.assign(original_data, editable_userdata);
+    //     original_data = editable_userdata;
+    //     Object.assign(original_data, editable_userdata);
+    //     //
+    //     Toastify({
+    //       text: $_("user-updated"),
+    //       duration: 2500,
+    //       backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+    //     }).showToast();
+    //   })
+    //   .catch((err) => {});
+  }
+  let allpermissions = [];
+  console.log(CreatePermission.target);
+  Object.values(CreatePermission.target).forEach((t) => {
+    Object.values(CreatePermission.action).forEach((a) => {
+      allpermissions = allpermissions.concat([{ target: t, action: a }]);
+    });
+  });
+  UserService.userControllerGetPermissions(params.userid).then((val) => {
+    console.log(val);
+    val.inherited.forEach((p) => {
+      inheritedPermissions = inheritedPermissions.concat([p]);
+    });
+    val.directlyGranted.forEach((p) => {
+      grantedPermissions = grantedPermissions.concat([
+        p.target + ":" + p.action,
+      ]);
+    });
+    grantedPermissions_initial = grantedPermissions;
+  });
+</script>
+
+{#await user_promise}
+  <!--  -->
+{:then user}
+  <section class="container p-5 select-none">
+    <div class="flex flex-row mb-4">
+      <div class="w-full">
+        <nav class="w-full flex">
+          <ol class="list-none flex flex-row items-center justify-start">
+            <li class="flex items-center">
+              <svg
+                class="flex-shrink-0 w-5 h-5 mr-2"
+                fill="currentColor"
+                width="24"
+                height="24"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 640 512"><path
+                  fill="currentColor"
+                  d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z" /></svg>
+            </li>
+            <li class="flex items-center">
+              <a class="mr-2" href="./">{$_('users')}</a><svg
+                stroke="currentColor"
+                fill="none"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="h-3 w-3 mr-2 stroke-current"
+                height="1em"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"><line
+                  x1="5"
+                  y1="12"
+                  x2="19"
+                  y2="12" />
+                <polyline points="12 5 19 12 12 19" /></svg>
+            </li>
+            <li class="flex items-center">
+              <span class="mr-2"><a href="../">{original_data.firstname}
+                  {original_data.middlename || ''}
+                  {original_data.lastname}</a></span>
+            </li>
+            <li class="flex items-center">
+              <svg
+                stroke="currentColor"
+                fill="none"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="h-3 w-3 mr-2 stroke-current"
+                height="1em"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"><line
+                  x1="5"
+                  y1="12"
+                  x2="19"
+                  y2="12" />
+                <polyline points="12 5 19 12 12 19" /></svg>
+            </li>
+            <li class="flex items-center">
+              <span class="mr-2">Permissions</span>
+            </li>
+          </ol>
+        </nav>
+      </div>
+    </div>
+    <div class="mb-8 text-3xl font-extrabold">
+      Permissions:
+      {original_data.firstname}
+      {original_data.middlename || ''}
+      {original_data.lastname}
+      <span>
+        <button
+          disabled={save_enabled}
+          class:opacity-50={save_enabled}
+          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="flex flex-wrap -mx-1 overflow-hidden">
+      <div class="my-1 px-1 w-full overflow-hidden sm:w-1/3">verfügbare</div>
+      <div class="my-1 px-1 w-full overflow-hidden sm:w-1/3">erteilte</div>
+      <div class="my-1 px-1 w-full overflow-hidden sm:w-1/3">geerbte</div>
+    </div>
+    <!--  -->
+    <div class="flex flex-wrap -mx-1 overflow-hidden">
+      {#if allpermissions.length > 0}
+        <div class="my-1 px-1 w-full overflow-hidden sm:w-1/3">
+          <div
+            class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
+            {#each allpermissions as p}
+              {#if !grantedPermissions.includes(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">
+                  {p.target + ':' + p.action}
+                  <button
+                    on:click={() => {
+                      grantedPermissions = grantedPermissions.concat([p]);
+                      if (to_delete.some((o) => o === p.id)) {
+                        to_delete = to_delete.filter((o) => o !== p.id);
+                      } else {
+                        to_add = to_add.concat([
+                          {
+                            action: p.action,
+                            target: p.target,
+                            principal: original_data.id,
+                          },
+                        ]);
+                      }
+                      console.log({ to_delete, to_add });
+                    }}
+                    type="button"
+                    class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-200 text-base font-medium text-black hover:bg-green-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:ml-3 sm:w-auto sm:text-sm">+</button>
+                </p>
+              {/if}
+            {/each}
+          </div>
+        </div>
+        <div class="my-1 px-1 w-full overflow-hidden sm:w-1/3">
+          <div
+            class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
+            {#each grantedPermissions as 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">
+                {p.target + ':' + p.action}
+                <button
+                  on:click={() => {
+                    grantedPermissions = grantedPermissions.filter((o) => o.target + ':' + o.action !== p.target + ':' + p.action);
+                    if (to_add.some((o) => o.target + ':' + o.action === p.target + ':' + p.action)) {
+                      to_add = to_add.filter((o) => o.target + ':' + o.action !== p.target + ':' + p.action);
+                    } else {
+                      to_delete = to_delete.concat([p.id]);
+                    }
+                    console.log({ to_delete, to_add });
+                  }}
+                  type="button"
+                  class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-300 text-base font-medium text-black hover:bg-red-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm">-</button>
+              </p>
+            {/each}
+          </div>
+        </div>
+        <div class="my-1 px-1 w-full overflow-hidden sm:w-1/3">
+          <div
+            class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
+            {#each inheritedPermissions as 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">
+                {p.target + ':' + p.action}
+              </p>
+            {/each}
+          </div>
+        </div>
+      {/if}
+    </div>
+  </section>
+{:catch error}
+  <PromiseError {error} />
+{/await}
-- 
2.47.2


From 959b32de1c6fc74bec585630b3025babc1a8edc4 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Sat, 16 Jan 2021 20:48:45 +0100
Subject: [PATCH 11/17] =?UTF-8?q?=E2=9C=A8=20new=20UsersEmptyState?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #12
---
 src/components/UsersEmptyState.svelte | 2 ++
 src/components/users_empty.svg        | 1 +
 2 files changed, 3 insertions(+)
 create mode 100644 src/components/users_empty.svg

diff --git a/src/components/UsersEmptyState.svelte b/src/components/UsersEmptyState.svelte
index a4bd3ba7..9229ec8d 100644
--- a/src/components/UsersEmptyState.svelte
+++ b/src/components/UsersEmptyState.svelte
@@ -1,11 +1,13 @@
 <script>
   import { _ } from "svelte-i18n";
   import AddUserModal from "./AddUserModal.svelte";
+  import users_empty from "./users_empty.svg";
   let modal_open = false;
 </script>
 
 <div class="text-center items-center justify-center">
   <p class="mb-16 text-lg text-gray-500">
+    <img class="w-full h-44" src={users_empty} alt="" />
     <span class="font-bold">There are no users added yet.</span><br />
     <span>Add your first user</span>
   </p>
diff --git a/src/components/users_empty.svg b/src/components/users_empty.svg
new file mode 100644
index 00000000..c387dd47
--- /dev/null
+++ b/src/components/users_empty.svg
@@ -0,0 +1 @@
+<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1066.106 824.2"><path fill="#f2f2f2" d="M962.551 394.71l-15.879 71.42-12.89 57.94-10.274 46.21-12.882 57.94-42.095 189.29-521.617-241.03-38.342-17.72-48.533-22.43-38.356-17.72-46.132-21.32 26.153-38.05 21.748-31.64 27.513-40.03 21.742-31.62L517.369 0 776.55 229.8l46.153 40.92 36.802 32.63 46.161 40.92 56.885 50.44z"/><path d="M204.354 604.831c-34.88-19.444-56.594-45.991-64.54-78.902-5.899-24.436-4.204-51.933 5.039-81.728a218.888 218.888 0 0130.439-61.484c70.638-99.986 77.013-165.138 69.923-202.187-7.774-40.623-33.031-57.494-33.286-57.66l1.09-1.676c.261.17 26.184 17.433 34.145 58.88 4.59 23.894 2.43 51.14-6.417 80.98-11.012 37.139-32.485 78.46-63.822 122.817a216.904 216.904 0 00-30.162 60.922c-15.158 48.867-17.303 115.997 58.564 158.292z" fill="#2f2e41"/><path d="M221.127 604.831c34.88-19.444 56.594-45.991 64.54-78.902 5.898-24.436 4.203-51.933-5.039-81.728a218.888 218.888 0 00-30.439-61.484c-70.638-99.986-77.014-165.138-69.923-202.187 7.774-40.623 33.03-57.494 33.285-57.66l-1.09-1.676c-.26.17-26.184 17.433-34.145 58.88-4.589 23.894-2.43 51.14 6.418 80.98 11.012 37.139 32.484 78.46 63.821 122.817a216.904 216.904 0 0130.163 60.922c15.158 48.867 17.303 115.997-58.565 158.292zM981.354 520.831c-34.88-19.444-56.594-45.991-64.54-78.902-5.899-24.436-4.204-51.933 5.039-81.728a218.888 218.888 0 0130.439-61.484c70.638-99.986 77.013-165.138 69.923-202.187-7.774-40.623-33.031-57.494-33.286-57.66l1.09-1.676c.261.17 26.184 17.433 34.145 58.88 4.59 23.894 2.43 51.14-6.417 80.98-11.012 37.139-32.485 78.46-63.822 122.817a216.904 216.904 0 00-30.162 60.922c-15.158 48.867-17.303 115.997 58.564 158.292z" fill="#2f2e41"/><path d="M998.127 520.831c34.88-19.444 56.594-45.991 64.54-78.902 5.898-24.436 4.203-51.933-5.039-81.728a218.888 218.888 0 00-30.439-61.484c-70.638-99.986-77.014-165.138-69.923-202.187 7.774-40.623 33.03-57.494 33.285-57.66l-1.09-1.676c-.26.17-26.184 17.433-34.145 58.88-4.589 23.894-2.43 51.14 6.418 80.98 11.012 37.139 32.484 78.46 63.821 122.817a216.904 216.904 0 0130.163 60.922c15.158 48.867 17.303 115.997-58.565 158.292zM467.815 299.945c-26.207-44.282-78.055-46.346-78.055-46.346s-50.523-6.46-82.934 60.98c-30.209 62.862-71.9 123.555-6.712 138.27L311.89 416.2l7.293 39.378a255.068 255.068 0 0027.892.477c69.812-2.254 136.297.659 134.157-24.393-2.846-33.302 11.8-89.11-13.416-131.717z" fill="#2f2e41"/><path d="M360.247 392.622c9.03 19.975 14.725 43.786 18.125 70.234l72.5-4.531c-16.669-23.62-22.203-50.729-15.86-81.562z" fill="#ffb8b8"/><path d="M360.247 392.622c9.03 19.975 14.725 43.786 18.125 70.234l72.5-4.531c-16.669-23.62-22.203-50.729-15.86-81.562z" opacity=".2"/><path d="M23.872 772.944S-13.65 793.042 5.39 810.202s44.193-22.714 44.193-22.714z" fill="#ffb8b8"/><path fill="#2f2e41" d="M482.591 714.334l-.586 27.458-1.251 59.33v.01l-.364 17.182H240.438l9.752-54.151.01-.04 8.732-48.467 3.897-21.705v-.01l197.108-27.186 22.654 47.579z"/><path d="M482.59 714.337l-.59 27.46c-69.735-1.79-177.826-18.624-223.07-26.146l3.896-21.704 197.107-27.188z" fill="#3f3d56"/><circle cx="395.364" cy="355.24" r="56.64" fill="#ffb8b8"/><path d="M504.113 744.923s6.796 61.17-33.984 56.64l-6.797-61.172-36.25-36.25-101.952-2.265-74.764 70.234s-2.266-72.5 6.796-79.296 29.453-22.656 29.453-22.656V658.83l-61.17-124.608s36.249-74.765 65.701-77.03l38.516-2.266s13.593-6.797 13.593-9.062-2.265-20.39 9.063-15.86c0 0 1.019-23.245 12.959-16.153 0 0 37.586 29.453 75.739 1.291 0 0 17.785-3.262 15.519 5.8s0 15.86 4.531 15.86 24.922 6.796 24.922 11.327c0 .975 1.473 10.354 3.783 24.469v.022c8.406 51.452 27.935 165.82 27.935 165.82s20.39 29.452-13.593 106.483z" fill="#dfe5ee"/><path d="M241.303 522.894l-15.859 11.328-144.998 185.78-77.03 61.17s43.046-6.797 33.983 29.453L302.474 658.83z" fill="#dfe5ee"/><path d="M489.771 472.598v.022c-3.013 17.717-101.204 14.024-114.797 14.024s-24.922-2.265-38.516-11.328-6.796-20.39-6.796-20.39 11.574-8.816 11.574-11.081-2.265-20.39 9.063-15.86c0 0 1.019-23.245 12.959-16.153 0 0 39.605 31.472 77.758 3.31 0 0 17.785-3.262 15.519 5.8s0 15.86 4.531 15.86 24.922 6.796 24.922 11.327c0 .975 1.473 10.354 3.783 24.469z" fill="#3f3d56"/><path d="M478.058 388.091s-18.125-38.515-36.25-20.39 20.391 45.312 20.391 45.312z" fill="#ffb8b8"/><path d="M478.058 379.029s-27.987 35.37-36.65 38.075c0 0 25.322 100.126 57.04 127.313l18.125 92.89s77.03-31.719 58.906-83.827l-.541-1.554a513.985 513.985 0 00-62.099-122.409z" fill="#dfe5ee"/><path opacity=".2" d="M463.102 483.933l55.737 153.374-20.39-92.89-35.347-60.484z"/><path fill="#2f2e41" d="M456.229 295.676l-51.224-26.831-70.737 10.976-14.636 64.639 36.432-1.401 10.178-23.748v23.357l16.81-.647 9.757-37.808 6.098 40.247 59.761-1.219-2.439-47.565z"/><path d="M940.129 644.338l29.062 103.67s-5.989 91.828 21.959 73.862c28.6-18.386 17.966-95.82 17.966-95.82l-16.752-93.007z" fill="#a0616a"/><path d="M955.658 353.515l24 24v114.352s14.118 21.177 11.294 26.824-5.647 5.647-2.823 9.882 5.647 7.059 2.823 9.882-2.823 9.883 0 12.706 8.47 7.06 4.235 11.294-9.882 1.412-4.235 16.942 15.53 19.764 12.706 25.411-2.823 19.765-2.823 19.765l-60.706 8.47-12.706-159.529z" fill="#d0cde1"/><path fill="#3f3d56" d="M1003.658 623.161l-70.588 2.824 2.823 29.647 62.118-11.294 5.647-21.177z"/><path fill="#a0616a" d="M809.541 205.986l-8.471 84.705 86.118 12.706 6.353-48.705 6.353-48.706h-90.353z"/><path opacity=".1" d="M809.541 205.527l-8.471 84.706 86.118 12.706 6.353-48.706 6.353-48.706h-90.353z"/><path d="M622.483 609.044l48 103.058s8.47 48 21.176 49.412 25.412-49.412 25.412-49.412l-16.942-26.823-19.764-76.235z" fill="#a0616a"/><path d="M951.056 819.314H679.687c2.15-34.01 3.503-54.979 3.503-54.979l3.604-5.673 17.475-27.459 12.478-19.605 4.35-6.844 1.616-2.534 17.091-3.12 176.323-32.173a215.426 215.426 0 0012.326 38.11 154.098 154.098 0 003.876 8.176c4.432 8.652 9.843 16.85 16.274 22.886 1.464 1.373 2.524 5.038 3.21 10.67 1.696 13.801 1.211 39.463-.757 72.545z" fill="#2f2e41"/><circle cx="856.835" cy="165.751" r="67.765" fill="#a0616a"/><path d="M705.776 304.103l-9.882-5.647s-43.764 29.647-57.882 96-24 83.294-24 83.294-14.118 2.823-4.235 12.706 9.882 8.47 1.411 14.117-14.117-5.647-8.47 5.647 12.706 8.47 7.059 15.53-15.53 7.058-9.883 12.705-5.647 18.353 1.412 24 9.882 7.06 9.882 16.942a49.993 49.993 0 002.824 16.94h73.412s-14.118-26.823-9.883-32.47 5.647-11.294 2.824-14.117-11.294 2.823-2.824-4.236 11.294-2.823 8.47-11.294-8.47-4.235-2.823-8.47 9.883-2.824 7.06-7.06-8.471-4.234-2.824-7.058 9.882 0 8.47-7.059-2.823-4.235 0-7.059 32.47-98.823 32.47-101.646-22.588-91.765-22.588-91.765z" fill="#d0cde1"/><path fill="#3f3d56" d="M691.659 590.691l-88.941 5.647 22.588 21.176 62.118 1.412 4.235-28.235zM717.07 696.573l-18.352 33.882s55.058 7.059 74.823 14.118 70.588 16.94 70.588 16.94l12.706-49.41zM878.011 712.102l15.53 46.588 62.117-12.706-7.059-43.764-70.588 9.882z"/><path d="M903.423 256.103s-4.235-2.823-14.118 2.824-42.352 8.47-57.882-8.47-26.823-31.06-31.059-28.236-7.058 35.294-7.058 35.294l-14.118 11.294-83.294 29.647 7.059 190.588 12.706 43.764s-9.883 33.883 2.823 53.647-7.058 26.824-7.058 26.824-4.236 5.647-1.412 19.764-2.824 66.353-2.824 66.353 120 53.647 245.647 7.06l-14.118-53.648-7.059-120s7.059-19.764 5.647-28.235 42.353-127.058 42.353-127.058-7.059-59.294-43.764-72-42.353-25.412-42.353-25.412 16.94-18.353 9.882-24z" fill="#d0cde1"/><path d="M788.6 174.431s-7.037-10.555-4.33-21.923a66.444 66.444 0 001.895-19.757s5.683-18.405 11.367-28.69 2.977-14.615 20.84-17.863 10.556-26.524 57.65-1.353a13.811 13.811 0 0014.344 5.413c9.744-1.894 13.262 11.638 13.262 11.638s6.496-3.789 8.932 1.624 19.804-3.249 19.804 33.29-19.765 69.176-19.765 69.176 1.45-61.462-30.758-67.687-66.852-24.359-75.242-1.083-17.999 37.215-17.999 37.215z" fill="#2f2e41"/><ellipse cx="913.305" cy="180.574" rx="6.353" ry="8.471" fill="#a0616a"/></svg>
\ No newline at end of file
-- 
2.47.2


From 10d7955f99b1a640eb1ac83764c114a25cfcc07b Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Sat, 16 Jan 2021 21:42:09 +0100
Subject: [PATCH 12/17] UserPermissions - working edit

ref #12
---
 src/components/UserPermissions.svelte | 106 ++++++++++++--------------
 1 file changed, 49 insertions(+), 57 deletions(-)

diff --git a/src/components/UserPermissions.svelte b/src/components/UserPermissions.svelte
index be72504c..1ae23e20 100644
--- a/src/components/UserPermissions.svelte
+++ b/src/components/UserPermissions.svelte
@@ -8,79 +8,66 @@
   import Toastify from "toastify-js";
   import PromiseError from "./PromiseError.svelte";
   export let params;
-  let grantedPermissions_initial = [];
-  let grantedPermissions = [];
-  let inheritedPermissions = [];
-  let to_add = [];
-  let to_delete = [];
+  let [
+    grantedPermissions_initial,
+    grantedPermissions,
+    inheritedPermissions,
+    to_add,
+    to_delete,
+    allpermissions,
+    promises,
+  ] = [[], [], [], [], [], [], []];
   $: original_data = {};
   $: save_enabled =
     JSON.stringify(grantedPermissions) ===
     JSON.stringify(grantedPermissions_initial);
-
   const user_promise = UserService.userControllerGetOne(params.userid);
   user_promise.then((data) => {
     original_data = Object.assign(original_data, data);
   });
   function submit() {
+    Toastify({
+      text: "updating permissions...",
+      duration: 2500,
+    }).showToast();
     to_delete.forEach((d) => {
-      console.log("processing...");
-      console.log(d);
-      console.log("api-calling...");
-      PermissionService.permissionControllerRemove(d, true)
-        .then((res) => {
-          console.log(res);
-        })
-        .catch((err) => {
-          console.log(err);
-        });
+      promises = promises.concat([
+        PermissionService.permissionControllerRemove(d, true),
+      ]);
     });
     to_add.forEach((a) => {
-      console.log("processing...");
-      console.log(a);
-      console.log("api-calling...");
-      PermissionService.permissionControllerPost(a)
-        .then((res) => {
-          console.log(res);
-        })
-        .catch((err) => {
-          console.log(err);
-        });
+      promises = promises.concat([
+        PermissionService.permissionControllerPost(a),
+      ]);
+    });
+    Promise.all(promises).then((values) => {
+      promises = [];
+      to_delete.forEach((d) => {
+        to_delete = to_delete.filter((o) => o !== d);
+      });
+      to_add.forEach((a) => {
+        to_add = to_add.filter(
+          (o) => o.target + ":" + o.action !== a.target + ":" + a.action
+        );
+      });
+      Toastify({
+        text: "Permissions updated!",
+        duration: 2500,
+        backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+      }).showToast();
     });
-    // Toastify({
-    //   text: $_("updating-user"),
-    //   duration: 2500,
-    // }).showToast();
-    // UserService.userControllerPut(original_data.id, editable_userdata)
-    //   .then((resp) => {
-    //     Object.assign(original_data, editable_userdata);
-    //     original_data = editable_userdata;
-    //     Object.assign(original_data, editable_userdata);
-    //     //
-    //     Toastify({
-    //       text: $_("user-updated"),
-    //       duration: 2500,
-    //       backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-    //     }).showToast();
-    //   })
-    //   .catch((err) => {});
   }
-  let allpermissions = [];
-  console.log(CreatePermission.target);
   Object.values(CreatePermission.target).forEach((t) => {
     Object.values(CreatePermission.action).forEach((a) => {
       allpermissions = allpermissions.concat([{ target: t, action: a }]);
     });
   });
   UserService.userControllerGetPermissions(params.userid).then((val) => {
-    console.log(val);
     val.inherited.forEach((p) => {
       inheritedPermissions = inheritedPermissions.concat([p]);
     });
     val.directlyGranted.forEach((p) => {
-      grantedPermissions = grantedPermissions.concat([
-        p.target + ":" + p.action,
-      ]);
+      grantedPermissions = grantedPermissions.concat([p]);
     });
     grantedPermissions_initial = grantedPermissions;
   });
@@ -159,12 +146,19 @@
       {original_data.middlename || ''}
       {original_data.lastname}
       <span>
-        <button
-          disabled={save_enabled}
-          class:opacity-50={save_enabled}
-          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 promises.length === 0}
+          <button
+            disabled={save_enabled}
+            class:opacity-50={save_enabled}
+            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>
+        {:else}
+          <button
+            type="button"
+            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-yellow-600 text-base font-medium text-white hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 sm:ml-3 sm:w-auto sm:text-sm">Applying
+            Changes</button>
+        {/if}
       </span>
     </div>
     <!--  -->
@@ -198,7 +192,6 @@
                           },
                         ]);
                       }
-                      console.log({ to_delete, to_add });
                     }}
                     type="button"
                     class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-200 text-base font-medium text-black hover:bg-green-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:ml-3 sm:w-auto sm:text-sm">+</button>
@@ -222,7 +215,6 @@
                     } else {
                       to_delete = to_delete.concat([p.id]);
                     }
-                    console.log({ to_delete, to_add });
                   }}
                   type="button"
                   class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-300 text-base font-medium text-black hover:bg-red-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm">-</button>
-- 
2.47.2


From ff14f024afda77e6f5f9e95a8f34e50cc8509790 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Sun, 17 Jan 2021 17:14:34 +0100
Subject: [PATCH 13/17] AddUserModal - username/email validation

ref #12
---
 src/components/AddUserModal.svelte | 32 ++++++++++++++++++------------
 1 file changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/components/AddUserModal.svelte b/src/components/AddUserModal.svelte
index c8b232fe..4f1c6690 100644
--- a/src/components/AddUserModal.svelte
+++ b/src/components/AddUserModal.svelte
@@ -28,7 +28,10 @@
   $: isLastnameValid = lastname_input_value.trim().length !== 0;
   $: isFirstnameValid = firstname_input_value.trim().length !== 0;
   $: createbtnenabled =
-    isFirstnameValid && isLastnameValid && isEmailValid && isPasswordValid;
+    isFirstnameValid &&
+    isLastnameValid &&
+    isPasswordValid &&
+    !(!isEmailValid && username_input_value.trim().length === 0);
   (function () {
     document.onkeydown = function (e) {
       e = e || window.event;
@@ -50,17 +53,17 @@
         text: "User is being added...",
         duration: -1,
       }).showToast();
-      let postdata={
+      let postdata = {
         firstname: firstname_input_value,
         lastname: lastname_input_value,
         middlename: middlename_input_value,
-        password: password_input_value
+        password: password_input_value,
       };
-      if(email_input_value!==""){
-        postdata.email=email_input_value;
+      if (email_input_value !== "") {
+        postdata.email = email_input_value;
       }
-      if(username_input_value!==""){
-        postdata.username=username_input_value;
+      if (username_input_value !== "") {
+        postdata.username = username_input_value;
       }
       UserService.userControllerPost(postdata)
         .then((result) => {
@@ -77,7 +80,7 @@
             backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
           }).showToast();
           current_users.push(result);
-          current_users=current_users;
+          current_users = current_users;
         })
         .catch((err) => {
           //
@@ -238,18 +241,21 @@
                   <input
                     autocomplete="off"
                     placeholder={$_('e-mail-adress')}
-                    class:border-red-500={!isEmailValid}
-                    class:focus:border-red-500={!isEmailValid}
-                    class:focus:ring-red-500={!isEmailValid}
                     bind:value={email_input_value}
                     bind:this={email_input}
                     type="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 rounded-md p-2" />
-                  {#if !isEmailValid}
+                  <!-- {#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 or username is required
+                    </span>
+                  {/if} -->
+                  {#if !isEmailValid && username_input_value.trim().length === 0}
+                    <span
+                      class="mt-8 flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      valid email or username is required
                     </span>
                   {/if}
                 </div>
-- 
2.47.2


From 44f07ca231307ebdbe38b822408c3965077053ef Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Sun, 17 Jan 2021 17:23:26 +0100
Subject: [PATCH 14/17] =?UTF-8?q?=F0=9F=A7=B9=20AddUserModal=20cleanup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AddUserModal.svelte | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/components/AddUserModal.svelte b/src/components/AddUserModal.svelte
index 4f1c6690..6298e61a 100644
--- a/src/components/AddUserModal.svelte
+++ b/src/components/AddUserModal.svelte
@@ -53,19 +53,14 @@
         text: "User is being added...",
         duration: -1,
       }).showToast();
-      let postdata = {
+      UserService.userControllerPost({
         firstname: firstname_input_value,
         lastname: lastname_input_value,
         middlename: middlename_input_value,
         password: password_input_value,
-      };
-      if (email_input_value !== "") {
-        postdata.email = email_input_value;
-      }
-      if (username_input_value !== "") {
-        postdata.username = username_input_value;
-      }
-      UserService.userControllerPost(postdata)
+        email: email_input_value,
+        username: username_input_value,
+      })
         .then((result) => {
           firstname_input_value = "";
           lastname_input_value = "";
-- 
2.47.2


From ffd88ffc666d9d3add43dfa4ec4b6e01ca7084b5 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Mon, 25 Jan 2021 20:56:20 +0100
Subject: [PATCH 15/17] =?UTF-8?q?=F0=9F=90=9E=20alphabetically=20sort=20pe?=
 =?UTF-8?q?rmission=20targets=20in=20UserDetail?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #39 ref #12
---
 src/components/UserDetail.svelte | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/UserDetail.svelte b/src/components/UserDetail.svelte
index eb1e9a6d..77c0928d 100644
--- a/src/components/UserDetail.svelte
+++ b/src/components/UserDetail.svelte
@@ -37,6 +37,8 @@
   user_promise.then((data) => {
     let current_target = "";
     let colorindex = -1;
+    // alphabetically sort permissions for color compatibility for target
+    data.permissions = data.permissions.sort();
     data.permissions.forEach((p) => {
       const target = p.split(":")[0];
       if (current_target !== p.split(":")[0]) {
-- 
2.47.2


From e750c374739104c6aaac1abace9e9632b40342da Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Tue, 26 Jan 2021 17:27:44 +0100
Subject: [PATCH 16/17] =?UTF-8?q?=F0=9F=8C=8E=20UserDetail=20-=20more=20i1?=
 =?UTF-8?q?8n=20keys?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #12
---
 src/components/UserDetail.svelte | 4 ++--
 src/locales/en.json              | 2 ++
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/UserDetail.svelte b/src/components/UserDetail.svelte
index 77c0928d..82206b13 100644
--- a/src/components/UserDetail.svelte
+++ b/src/components/UserDetail.svelte
@@ -288,10 +288,10 @@
     </div>
     <div class="text-sm w-full mt-8">
       <p class="font-medium mb-4">
-        Permissions
+        {$_('permissions')}
         <a
           class="px-4 py-2 bg-gray-500 rounded-md text-white"
-          href="/users/{params.userid}/permissions/">edit permissions</a>
+          href="/users/{params.userid}/permissions/">{$_('edit-permissions')}</a>
       </p>
       <div class="w-full sm:my-px sm:px-px sm:w-1/2">
         <input
diff --git a/src/locales/en.json b/src/locales/en.json
index 884bf58e..c0c7a88a 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -60,6 +60,7 @@
     "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",
+    "edit-permissions": "edit permissions",
     "email_address_or_username": "Email / username",
     "error_on_login": "Error on login",
     "faq": "FAQ",
@@ -119,6 +120,7 @@
     "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",
+    "permissions": "Permissions",
     "phone": "Phone",
     "please-provide-the-required-csv-xlsx-file": "Please provide the required csv/ xlsx file",
     "please-provide-the-required-information-to-add-a-new-runner": "Please provide the required information to add a new runner.",
-- 
2.47.2


From 358865dc6a8e5a084078696048df99a67564a9e1 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Tue, 26 Jan 2021 17:28:07 +0100
Subject: [PATCH 17/17] UserDetail - update permission badges on change save

ref #12
---
 src/components/UserDetail.svelte | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/UserDetail.svelte b/src/components/UserDetail.svelte
index 82206b13..e60db298 100644
--- a/src/components/UserDetail.svelte
+++ b/src/components/UserDetail.svelte
@@ -82,9 +82,14 @@
       }).showToast();
       UserService.userControllerPut(original_data.id, editable_userdata)
         .then((resp) => {
-          Object.assign(original_data, editable_userdata);
-          original_data = editable_userdata;
-          Object.assign(original_data, editable_userdata);
+          Object.assign(original_data, resp);
+          Object.assign(editable_userdata, resp);
+          original_data.permissions = resp.permissions;
+          usergroups_array = [];
+          resp.groups.forEach((g) => {
+            usergroups_array = usergroups_array.concat([g.id]);
+          });
+          usergroups_array_original = usergroups_array;
           //
           Toastify({
             text: $_("user-updated"),
-- 
2.47.2