🚀RELEASE v0.5.0

ref #13 #12

CHANGELOG.md

@@ -2,12 +2,82 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
+#### [0.5.0](https://git.odit.services/lfk/frontend/compare/0.4.0...0.5.0)
+
+- Merge pull request 'feature/12-user-management' (#39) from feature/12-user-management into dev [`#12`](https://git.odit.services/lfk/frontend/issues/12)
+- Merge pull request 'feature/13-runner-management' (#42) from feature/13-runner-management into dev [`#13`](https://git.odit.services/lfk/frontend/issues/13)
+- Merge pull request 'added permissions to dashboard sidebar' (#41) from feature/40-dynamic-sidebar-options into dev [`#41`](https://git.odit.services/lfk/frontend/issues/41)
+- basic UserPermissions view [`9c6dc5b`](https://git.odit.services/lfk/frontend/commit/9c6dc5b4247e76be63a92294556be1e4a9154256)
+- ✨ basic RunnerDetail [`03aa670`](https://git.odit.services/lfk/frontend/commit/03aa67034d5fc4ec64d5646a6583666301bb538e)
+- 👀 ImportRunnerModal - layout cleanup [`2cc9b3e`](https://git.odit.services/lfk/frontend/commit/2cc9b3e1ede47bb1a4b598afc260d0bc06ed0902)
+- ✨ basic ImportRunnerModal with CSV input [`b1e9f95`](https://git.odit.services/lfk/frontend/commit/b1e9f955b054cd17cb83f8364b6bc2b22159142f)
+- ✨ basic xlsx + csv parsing [`74d9b94`](https://git.odit.services/lfk/frontend/commit/74d9b94119b49a77ff3e787a84f76c1e2e13d9e4)
+- 🧹 darkmode classes cleanup [`259a76f`](https://git.odit.services/lfk/frontend/commit/259a76f46b9ac01b177100dfce0db367b517b3a0)
+- UserDetail - basic permission badges [`7d4e939`](https://git.odit.services/lfk/frontend/commit/7d4e93912c4e1fd8a875f42a0f11b906f1ca0091)
+- added permissions to dashboard sidebar [`acb86ae`](https://git.odit.services/lfk/frontend/commit/acb86ae2666ec3c336973184ec5cb1e2ffba9ebe)
+- UserPermissions - working edit [`10d7955`](https://git.odit.services/lfk/frontend/commit/10d7955f99b1a640eb1ac83764c114a25cfcc07b)
+- 🐞 ImportRunnerModal - table overflow fix [`dc1644e`](https://git.odit.services/lfk/frontend/commit/dc1644ed25b82afe6a51fbe0e1de69ddf54ef81d)
+- 🧹 general runner cleanup [`9240e0c`](https://git.odit.services/lfk/frontend/commit/9240e0c90380fc6b44a3dde480bd2d29476b2a0f)
+- ✨ formatting [`6e5a4bc`](https://git.odit.services/lfk/frontend/commit/6e5a4bcb39259fc376262c16ad95555fd9cf7a0b)
+- ✨ ImportRunnerModal usage in TeamDetail [`de0bd5f`](https://git.odit.services/lfk/frontend/commit/de0bd5fd57edba75faaa2ba097a2c7fb2f621f9a)
+- 💣 process breaking changes for lib v0.3.0 [`dadb806`](https://git.odit.services/lfk/frontend/commit/dadb80608a55980f7b647d41c91061055287a250)
+- 👀 basic ui interaction for ImportRunnerModal [`c382f77`](https://git.odit.services/lfk/frontend/commit/c382f770dc05f57a471389d3d4d012fd8439c014)
+- 🐞 [bugfix] RunnerDetail update [`ec4bcd0`](https://git.odit.services/lfk/frontend/commit/ec4bcd093b6c94f2e3597de6de98db5ca47c5876)
+- 🏃‍♂️ support for runner group edit [`8d92a75`](https://git.odit.services/lfk/frontend/commit/8d92a75ef03854397a7c01ed9ea22967b994f9f2)
+- AddRunnerModal - improved team select [`1694c71`](https://git.odit.services/lfk/frontend/commit/1694c71528f9114622daae1bd16aaed9f94fc4ee)
+- 🙋‍♂️🔒 UserDetail - permission layout ui [`65b36f8`](https://git.odit.services/lfk/frontend/commit/65b36f8e695479809566213ebcb64d51a7c6a52e)
+- 🌎 added locale based csv/xlsx header parsing [`b606037`](https://git.odit.services/lfk/frontend/commit/b606037890856c1115315bb61d8469ff66dc4289)
+- AddUserModal - username/email validation [`ff14f02`](https://git.odit.services/lfk/frontend/commit/ff14f024afda77e6f5f9e95a8f34e50cc8509790)
+- UserDetail - link to permission page [`aaab95d`](https://git.odit.services/lfk/frontend/commit/aaab95d41400629683d89ee16013b6b4328c582c)
+- UserDetail - add permission layout [`d65b463`](https://git.odit.services/lfk/frontend/commit/d65b463547a5cb4fb6f6de0f95795a66ebe92e31)
+- RunnerDetail - button text fixes [`5552055`](https://git.odit.services/lfk/frontend/commit/5552055b989313e8999e424b6ad26c4398e8c6fa)
+- 🧹 RunnerDetail cleanup + i18n 🌎 [`a871651`](https://git.odit.services/lfk/frontend/commit/a87165148a3ccdb4c4e10f2c6545d5fea9e78b30)
+- ↙ added default fallback parsing to ImportRunnerModal [`ecad1ea`](https://git.odit.services/lfk/frontend/commit/ecad1ea839dbcea396217cb18fe335694406cdb1)
+- 🌎 i18n [`366804a`](https://git.odit.services/lfk/frontend/commit/366804aa29eb0231e40017d1e5c3419486070174)
+- ✨ ImportRunnerModal - compatibility for multi-component access [`f8a5913`](https://git.odit.services/lfk/frontend/commit/f8a59133a2534efdc9e13104eb64157a9724e746)
+- ✨ use ImportRunnerModal in OrgDetail + Orgs [`8aa1d94`](https://git.odit.services/lfk/frontend/commit/8aa1d94a1aa976cc6cb4f7d3cc798822861676ad)
+- ✨ ImportRunnerModal - hide team when loading from TeamDetail [`819b02a`](https://git.odit.services/lfk/frontend/commit/819b02a204cd43baaaf85d82cf0209a38028e6ce)
+- 🚀 ImportRunnerModal - working demo [`6b91b22`](https://git.odit.services/lfk/frontend/commit/6b91b227136580180d5300b2614a6148995c4640)
+- 🌎 i18n [`ae8bc01`](https://git.odit.services/lfk/frontend/commit/ae8bc01d9bab994aad6407102f3a6ef0167d008b)
+- 🐞 fixed merge conflict errors [`cbc1d53`](https://git.odit.services/lfk/frontend/commit/cbc1d53cc257cbf60172dd4356831e43671ec626)
+- ✨ basic cancel event dispatch from ImportRunnerModal [`cde4ec1`](https://git.odit.services/lfk/frontend/commit/cde4ec13efef8423464ebe90a4f0212a3be6cf77)
+- 🧹 AddUserModal cleanup [`44f07ca`](https://git.odit.services/lfk/frontend/commit/44f07ca231307ebdbe38b822408c3965077053ef)
+- 🙋‍♂️ UserDetail - active/inactive user state edit [`86c54e0`](https://git.odit.services/lfk/frontend/commit/86c54e04a84917383d3726b324c416ca1bd74627)
+- UserDetail - update permission badges on change save [`358865d`](https://git.odit.services/lfk/frontend/commit/358865dc6a8e5a084078696048df99a67564a9e1)
+- i18n 🌍 [`415f340`](https://git.odit.services/lfk/frontend/commit/415f340a68078e86fcf28d24b069ca030e28fc82)
+- 👀 UsersOverview - disable advanced search [`b34e3ae`](https://git.odit.services/lfk/frontend/commit/b34e3aeed0f026308288fb568542cc0ba587b576)
+- 🙋‍♂️ UserDetail - disable profile picture edit [`ef9fc59`](https://git.odit.services/lfk/frontend/commit/ef9fc596f57d63c1bf9c26614d746bf37394f832)
+- 🌎 i18n [`2d48691`](https://git.odit.services/lfk/frontend/commit/2d4869128d2af5e7fa5e4bcf1d6b687fca6761e9)
+- 🌎 i18n in ImportRunnerModal headers [`e34c91b`](https://git.odit.services/lfk/frontend/commit/e34c91b2cc64221cd553e80974a14448e3afc340)
+- 🌎 last i18n keys [`6c2d13b`](https://git.odit.services/lfk/frontend/commit/6c2d13bd1721918f1ef847563cfad61284c40487)
+- Fixed User group update [`1a799dc`](https://git.odit.services/lfk/frontend/commit/1a799dc30a4f051305e5279bb3325e64ab08f323)
+- 🌎 UserDetail - more i18n keys [`e750c37`](https://git.odit.services/lfk/frontend/commit/e750c374739104c6aaac1abace9e9632b40342da)
+- ⏫ general dependency bump [`b30b673`](https://git.odit.services/lfk/frontend/commit/b30b6734a1f4cc384f06147dfc657f2a1a05b3c0)
+- 💻 updated VSCode recommended extensions [`fc21427`](https://git.odit.services/lfk/frontend/commit/fc214276859189c6e9b6fdc91eb440cf4afda7c0)
+- 🐞 improved version builder from template [`09fd73b`](https://git.odit.services/lfk/frontend/commit/09fd73b13086025a31b4c1363331230e1c91e593)
+- ⏫ general dependency bump [`9a1f7a1`](https://git.odit.services/lfk/frontend/commit/9a1f7a13f8669b690fb3f9533df7fdfa2f1bc093)
+- 🌎 added more i18n keys [`169ffc1`](https://git.odit.services/lfk/frontend/commit/169ffc1b0b76c74350060c97218643789e0ea4f7)
+- 😦 added missing dependencies [`822759a`](https://git.odit.services/lfk/frontend/commit/822759a6884eab81f62d96bd7e6f038fa8bc1926)
+- fixed runner permissions [`e0356fa`](https://git.odit.services/lfk/frontend/commit/e0356fa360b74f91b38dc09351930c8c0778f845)
+- Added friles to ignore [`9fbc1ba`](https://git.odit.services/lfk/frontend/commit/9fbc1ba0315fc0a2b7f3d95339cb17fc74e57903)
+- ✨ new UsersEmptyState [`959b32d`](https://git.odit.services/lfk/frontend/commit/959b32de1c6fc74bec585630b3025babc1a8edc4)
+- 🐞 fix package release for index template compatibility [`24bec66`](https://git.odit.services/lfk/frontend/commit/24bec66390bfddd57c0cd1d35de94a79bdbf477c)
+- new license file version [CI SKIP] [`3d30734`](https://git.odit.services/lfk/frontend/commit/3d30734dc2716a88d823fe7a7650f17d14a8f18d)
+- new license file version [CI SKIP] [`3281239`](https://git.odit.services/lfk/frontend/commit/3281239ff5b4968fb1dc8547e7c16f0789ec2b8c)
+- 🐞 alphabetically sort permission targets in UserDetail [`ffd88ff`](https://git.odit.services/lfk/frontend/commit/ffd88ffc666d9d3add43dfa4ec4b6e01ca7084b5)
+- new license file version [CI SKIP] [`e91e197`](https://git.odit.services/lfk/frontend/commit/e91e197873e524b93b2cf79286c66c8b776fbae2)
+- Deleted files to ignore [`6704c07`](https://git.odit.services/lfk/frontend/commit/6704c07db0a00b17327a4b693b3f74ed41a1a41d)
+- new license file version [CI SKIP] [`c6504c2`](https://git.odit.services/lfk/frontend/commit/c6504c2eaf1d0c5fb14a4035ccbf347d851068d9)
+
 #### [0.4.0](https://git.odit.services/lfk/frontend/compare/0.3.1...0.4.0)
 
+> 17 January 2021
+
 - Merge commit 'a284806d3cb769030a4e28d0403190b746f8fc61' into dev [`#37`](https://git.odit.services/lfk/frontend/issues/37)
 - ✨ AddRunnerModal [`66ffd8e`](https://git.odit.services/lfk/frontend/commit/66ffd8e936010960766e7f9021319d549e1d3e6b)
 - ✨ RunnersOverview [`66a07c6`](https://git.odit.services/lfk/frontend/commit/66a07c6a51674a92d5e8459f250de2ab5ff6d902)
 - ⚡ improved dev scripts for speed starts [`383f828`](https://git.odit.services/lfk/frontend/commit/383f82807f4090bdd2c3dcdc695b75093b854031)
+- 🚀RELEASE v0.4.0 [`7d104a1`](https://git.odit.services/lfk/frontend/commit/7d104a151422a7c8306ef4d9f0ab25d26f8eb78b)
 - ✨ dynamic contact info in AddRunnerModal [`d4579a9`](https://git.odit.services/lfk/frontend/commit/d4579a9a410a27676e0ed0285bd124696153aae4)
 - 🐞 fix cross-env logic for faster dev starts ⚡ [`2ce4199`](https://git.odit.services/lfk/frontend/commit/2ce41990bf9911db11eb556ce4c9aa3b3e5ca16c)
 - 👩‍💻 developer configs/ recommendations for VSCode [`5e02502`](https://git.odit.services/lfk/frontend/commit/5e02502a5c2b8ebf798cbc21856b4425f8510041)

index.template.html

@@ -14,7 +14,7 @@
 </head>
 
 <body>
-  <span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-0.4.0-RELEASE_INFO</span>
+  <span style="display: none;visibility: hidden;" id="buildinfo">RELEASE_INFO-0.5.0-RELEASE_INFO</span>
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <script src="/env.js"></script>
   <script defer type="module" src="/_dist_/index.js"></script>

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@odit/lfk-frontend",
-	"version": "0.4.0",
+	"version": "0.5.0",
 	"scripts": {
 		"i18n-order": "node order.js",
 		"dev:all": "yarn prebuild && snowpack dev",
@@ -22,7 +22,7 @@
 		"svelte-focus-trap": "1.0.1",
 		"svelte-i18n": "3.3.0",
 		"tailwindcss": "2.0.2",
-		"tinro": "0.5.8",
+		"tinro": "0.5.9",
 		"toastify-js": "1.9.3",
 		"validator": "13.5.2",
 		"xlsx": "^0.16.9"
@@ -37,7 +37,7 @@
 		"postcss-load-config": "3.0.0",
 		"release-it": "^14.2.2",
 		"snowpack": "3.0.11",
-		"svelte": "3.31.2",
+		"svelte": "3.32.0",
 		"svelte-preprocess": "4.6.3",
 		"workbox-cli": "6.0.2"
 	},
@@ -55,7 +55,7 @@
 			"publish": false
 		},
 		"hooks": {
-			"after:bump": "npx auto-changelog --commit-limit false -p -u --hide-credit && git add CHANGELOG.md && node versionbuilder.js  && git add public/index.html && node order.js  && git add src/locales"
+			"after:bump": "npx auto-changelog --commit-limit false -p -u --hide-credit && git add CHANGELOG.md && node versionbuilder.js  && git add index.template.html && node order.js  && git add src/locales"
 		}
 	}
 }

src/App.svelte

@@ -48,6 +48,7 @@
   OpenAPI.BASE = config.baseurl;
   import { register as registerSW } from "./swmodule";
   import TeamDetail from "./components/TeamDetail.svelte";
+  import UserPermissions from "./components/UserPermissions.svelte";
   import RunnerDetail from "./components/RunnerDetail.svelte";
   store.init();
   registerSW();
@@ -72,8 +73,13 @@
           <Route path="/">
             <Users />
           </Route>
-          <Route path="/:userid" let:params>
+          <Route path="/:userid/*" let:params>
-            <UserDetail {params} />
+            <Route path="/">
+              <UserDetail {params} />
+            </Route>
+            <Route path="/permissions/">
+              <UserPermissions {params} />
+            </Route>
           </Route>
         </Route>
         <Route path="/tracks/*">

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,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
+        password: password_input_value,
-      };
+        email: email_input_value,
-      if(email_input_value!==""){
+        username: username_input_value,
-        postdata.email=email_input_value;
+      })
-      }
-      if(username_input_value!==""){
-        postdata.username=username_input_value;
-      }
-      UserService.userControllerPost(postdata)
         .then((result) => {
           firstname_input_value = "";
           lastname_input_value = "";
@@ -77,7 +75,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 +236,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>

src/components/OrgDetail.svelte

@@ -72,6 +72,7 @@
   on:cancelDelete={(event) => {
     import_modal_open = false;
   }}
+  passed_team={{}}
   passed_orgs={[]}
   passed_org={orgdata}
   opened_from="OrgDetail"

src/components/Orgs.svelte

@@ -43,6 +43,7 @@
     on:cancelDelete={(event) => {
       import_modal_open = false;
     }}
+    passed_team={{}}
     passed_org={{}}
     passed_orgs={current_organizations}
     opened_from="OrgOverview"

src/components/RunnerDetail.svelte

@@ -69,7 +69,7 @@
 </script>
 
 {#await runner_promise}
-  <!--  -->
+  {$_('loading-runners')}
 {:then}
   <section class="container p-5 select-none">
     <div class="flex flex-row mb-4">

src/components/UserDetail.svelte

@@ -2,31 +2,63 @@
   import { _ } from "svelte-i18n";
   import lodashIsEqual from "lodash.isequal";
   import store from "../store";
-  import {
+  import { UserService, UserGroupService } from "@odit/lfk-client-js";
-    UserService,
-    UserGroupService,
-    PermissionService,
-  } 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 = [];
+  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_objects = [];
   $: usergroups_array = [];
-  let usergroups_array_original = [];
+  $: search_permission = "";
   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]) {
+        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;
     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) => {
@@ -36,37 +68,28 @@
   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])
-    });
-  });
   $: changes_performed = !lodashIsEqual(original_data, editable_userdata);
-  $: groups_changed = JSON.stringify(usergroups_array)===JSON.stringify(usergroups_array_original);
+  $: groups_changed =
-  $: save_enabled = changes_performed||!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) {
-      let tmp=[];
+      editable_userdata.groups = usergroups_array;
-      usergroups_array.forEach(g => {
-        const group=allgroups.find(obj=>obj.id===g);
-        tmp.push(group);
-      });
-      editable_userdata.groups=tmp;
       Toastify({
         text: $_("updating-user"),
         duration: 2500,
       }).showToast();
       UserService.userControllerPut(original_data.id, editable_userdata)
         .then((resp) => {
-          Object.assign(original_data, editable_userdata);
+          Object.assign(original_data, resp);
-          original_data = editable_userdata;
+          Object.assign(editable_userdata, resp);
-          Object.assign(original_data, editable_userdata);
+          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"),
@@ -74,9 +97,7 @@
             backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
           }).showToast();
         })
-        .catch((err) => {
+        .catch((err) => {});
-        });
-    } else {
     }
   }
   function deleteUser() {
@@ -84,8 +105,7 @@
       .then((resp) => {
         location.replace("./");
       })
-      .catch((err) => {
+      .catch((err) => {});
-      });
   }
 </script>
 
@@ -135,7 +155,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}
@@ -170,31 +190,30 @@
         {/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
-        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">
-      <input
-        id="enabled"
-        on:change={() => {
-          editable_userdata.enabled = !editable_userdata.enabled;
-          // TODO: this reactive set does not work?
-        }}
-        name="enabled"
-        type="checkbox"
-        checked={editable_userdata.enabled}
-        class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
       <label
         for="enabled"
         class="ml-1 font-medium text-gray-700">Active?</label>
-      <p class="text-gray-500">set the user active/ inactive</p>
+      <br />
+      <p class="text-gray-500">
+        <input
+          id="enabled"
+          on:change={() => {
+            editable_userdata.enabled = !editable_userdata.enabled;
+          }}
+          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
@@ -206,7 +225,7 @@
         type="text"
         bind:value={editable_userdata.firstname}
         name="firstname"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
     </div>
     <div class="text-sm w-full">
       <label
@@ -218,7 +237,7 @@
         type="text"
         bind:value={editable_userdata.middlename}
         name="middlename"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
     </div>
     <div class="text-sm w-full">
       <label
@@ -230,7 +249,7 @@
         type="text"
         bind:value={editable_userdata.lastname}
         name="lastname"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
     </div>
     <div class="text-sm w-full">
       <label
@@ -242,7 +261,7 @@
         type="email"
         bind:value={editable_userdata.email}
         name="email"
-        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
     </div>
     <div class="text-sm w-full">
       <label
@@ -254,14 +273,14 @@
         type="text"
         bind:value={editable_userdata.username}
         name="username"
-        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" />
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
     </div>
     <div class="text-sm w-full">
       <span class="font-medium">{$_('groups')}</span>
       <!-- svelte-ignore a11y-no-onchange -->
       <select
         bind:value={usergroups_array}
-        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"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2"
         multiple>
         {#each allgroups as g}
           {#if usergroups_array.includes(g.id)}
@@ -272,61 +291,29 @@
         {/each}
       </select>
     </div>
-    <div class="text-sm w-full">
+    <div class="text-sm w-full mt-8">
-      <span class="font-medium">Permissions</span>
+      <p class="font-medium mb-4">
-      <div class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
+        {$_('permissions')}
-        <!--  -->
+        <a
-        <div class="flex flex-wrap -mx-1 overflow-hidden">
+          class="px-4 py-2 bg-gray-500 rounded-md text-white"
-          <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
+          href="/users/{params.userid}/permissions/">{$_('edit-permissions')}</a>
-            verfügbare
+      </p>
-          </div>
+      <div class="w-full sm:my-px sm:px-px sm:w-1/2">
-          <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">erteilte</div>
+        <input
-        </div>
+          autocomplete="off"
-        <!--  -->
+          placeholder="Search for permission"
-        <div class="flex flex-wrap -mx-1 overflow-hidden">
+          type="text"
-          {#if allpermissions.length > 0}
+          bind:value={search_permission}
-            <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
+          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="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 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-input">
-                      {p}
-                      <button
-                        on:click={() => {
-                          editable_userdata.permissions.push(p);
-                          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>
-                  {/if}
-                {/each}
-              </div>
-            </div>
-            <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
-              <div
-                class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
-                {#each allpermissions as p}
-                  {#if editable_userdata.permissions.includes(p)}
-                    <p
-                      class="block w-full mt-1 text-sm bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-input">
-                      {p}
-                      <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>
-                  {/if}
-                {/each}
-              </div>
-            </div>
-          {/if}
-        </div>
       </div>
+      {#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}

src/components/UserPermissions.svelte

@@ -0,0 +1,241 @@
+<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,
+    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) => {
+      promises = promises.concat([
+        PermissionService.permissionControllerRemove(d, true),
+      ]);
+    });
+    to_add.forEach((a) => {
+      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();
+    });
+  }
+  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) => {
+    val.inherited.forEach((p) => {
+      inheritedPermissions = inheritedPermissions.concat([p]);
+    });
+    val.directlyGranted.forEach((p) => {
+      grantedPermissions = grantedPermissions.concat([p]);
+    });
+    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>
+        {#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>
+    <!--  -->
+    <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,
+                          },
+                        ]);
+                      }
+                    }}
+                    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]);
+                    }
+                  }}
+                  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}

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>

src/components/UsersOverview.svelte

@@ -29,17 +29,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}
+      <!-- {/if} -->
-      <button
+      <!-- <button
         on:click={() => {
           advanced_search = !advanced_search;
         }}
@@ -48,7 +48,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">

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",
@@ -102,6 +103,7 @@
     "lfk-is-os": "The \"Lauf für Kaya!\" Frontend is (like all other projects for the \"LfK!\" Also) an open source project.",
     "license": "License",
     "licenses-are-being-loaded": "Licenses are being loaded...",
+    "loading-runners": "loading runners...",
     "log_in": "Log in",
     "log_in_to_your_account": "Log in to your account",
     "login_is_checked": "Login is being checked...",
@@ -119,6 +121,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.",