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] 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