Fix SID equality and WellKnownSid mappings

4 files changed, 79 insertions, 30 deletions

diff --git a/Pages/Component/AclDialog.razor b/Pages/Component/AclDialog.razor
index 8116f04..87fbd6e 100644
--- a/Pages/Component/AclDialog.razor
+++ b/Pages/Component/AclDialog.razor
@@ -2,35 +2,46 @@
 @inject IDbContextFactory<HBContext> dbFactory;
 @implements IDialog
 
-<Dialog Title="Edit permissions" @ref=dialog>
-    @if(obj?.Acl is not null) {
-        <table class="data-table">
-            <tr>
-                <th>Action</th>
-                <th>Subject</th>
-                <th>Permissions</th>
-                <th></th>
-            </tr>
-            @foreach(var rule in obj.Acl.Rules.OrderByDescending(r => r.Action)) {
-                <tr>
-                    <td><div><AclActionSwitch InitialValue=@(rule.Action == AclRuleAction.Allow)/></div></td>
-                    <td>@rule.Principal.ToString()</td>
-                    <td>@GetActivePermissions(rule)</td>
-                    <td>
-                        <a title="Edit" href="javascript:;">&#x1F589</a>
-                        <a title="Delete" href="javascript:;">&#x2716</a>
-                    </td>
-                </tr>
+<Dialog WidthPixels=900 Title="Edit permissions" @ref=dialog>
+    <div class="container">
+        <div>
+            @if(obj?.Acl is not null) {
+                <table class="data-table">
+                    <tr>
+                        <th>Action</th>
+                        <th>Subject</th>
+                        <th colspan="2">Permissions</th>
+                    </tr>
+                    @foreach(var rule in obj.Acl.Rules.OrderByDescending(r => r.Action)) {
+                        <tr>
+                            <td><div><AclActionSwitch InitialValue=@(rule.Action == AclRuleAction.Allow)/></div></td>
+                            <td>
+                                <a class="nondecorated" href="javascript:;">@(WellKnownSid.TranslateSid(rule.Principal) ?? rule.Principal.ToString())</a>
+                            </td>
+                            <td>@GetActivePermissions(rule)</td>
+                            <td>
+                                <a title="Edit" href="javascript:;">&#x1F589</a>
+                                <a title="Delete" href="javascript:;">&#x2716</a>
+                            </td>
+                        </tr>
+                    }
+                </table>
+                <br/>
+                <center><a href="javascript:;">Add new</a></center>
+            } else {
+                <center><i>This item does not have any permissions set!</i></center>
             }
-        </table>
-        <br/>
-        <center><a href="javascript:;">Add new</a></center>
+        </div>
+        <div>
+            <p><i>Click Edit next to an ACL to edit it's permissions</i></p>
+        </div>
+    </div>
+    @if(obj?.Acl is not null) {
         <ButtonContainer>
             <button class="secondary" @onclick=Hide>Cancel</button>
             <button data-keyboard-shortcut="a" @onclick=Hide><u>A</u>pply</button>
         </ButtonContainer>
     } else {
-        <center><i>This item does not have any permissions set!</i></center>
         <ButtonContainer>
             <button class="secondary" @onclick=Hide>Cancel</button>
         </ButtonContainer>
diff --git a/Pages/Component/AclDialog.razor.css b/Pages/Component/AclDialog.razor.css
index f1b7931..b98cc6d 100644
--- a/Pages/Component/AclDialog.razor.css
+++ b/Pages/Component/AclDialog.razor.css
@@ -1,4 +1,28 @@
-table p {
+div.container {
+    display:        flex;
+    flex-direction: row;
+}
+
+div.container > div {
+    width: 50%;
+}
+
+div.container > div:first-child {
+    border-right:  1px solid white;
+    padding-right: 15px;
+}
+
+div.container > div:last-child {
+    padding-left: 15px;
+    height: stretch;
+}
+
+div.container > div:last-child p {
+    vertical-align: middle;
+    text-align: center;
+}
+
+table p {
     margin: 8px 0 8px 0;
 }
 
@@ -17,6 +41,10 @@ table td:last-child {
     font-size: 12pt;
 }
 
+table td:nth-last-child(2) {
+    border-right: none !important;
+}
+
 table tr:nth-child(2n+1) td:not(:first-child) {
     background: rgba(255, 255, 255, 0.1);
 }
diff --git a/Pages/Component/Dialog.razor b/Pages/Component/Dialog.razor
index 673ec2f..8e8ddca 100644
--- a/Pages/Component/Dialog.razor
+++ b/Pages/Component/Dialog.razor
@@ -4,7 +4,7 @@
 <div
     class="dialog"
     onmousedown="dialogMouseDown(event)"
-    style="opacity:0;visibility:hidden;@(heightStyle)"
+    style="opacity:0;visibility:hidden;@(sizeStyle)"
     @ref=dialogDiv>
     @if(Title is not null) {
         <div class="titlebar" onmousedown="dialogTitleMouseDown(event)">
@@ -25,6 +25,8 @@
     public RenderFragment ChildContent { get; set; }
 
     [Parameter]
+    public int WidthPixels { set => width = $"{value}px"; }
+    [Parameter]
     public int HeightPixels  { set => height = $"{value}px"; }
     [Parameter]
     public int HeightPercent { set => height = $"{value}%"; }
@@ -41,6 +43,7 @@
 
     private bool visible = false;
 
+    private string? width;
     private string? height;
 
     private ElementReference dialogDiv;
@@ -53,7 +56,7 @@
             await jsRuntime.InvokeVoidAsync("dialogAddObjectReference", new object[] {
                 dialogDiv,
                 DotNetObjectReference.Create(this)
-            });
+    });
         }
     }
 
@@ -65,6 +68,11 @@
         }
     }
 
+    private string sizeStyle => widthStyle + heightStyle;
+
+    private string widthStyle =>
+        $"{(width is null ? "" : $"width:{width};")}";
+
     private string heightStyle =>
-    $"{(height is null ? "" : $"max-height:{height};")}";
+        $"{(height is null ? "" : $"max-height:{height};")}";
 }
diff --git a/Pages/Component/Switch.razor.css b/Pages/Component/Switch.razor.css
index 6b1f5d5..4c2d3a5 100644
--- a/Pages/Component/Switch.razor.css
+++ b/Pages/Component/Switch.razor.css
@@ -11,9 +11,11 @@
 div.switch-inner {
     background:    var(--col-switch-fg);
     border-radius: 20px;
-    height:        20px;
+    height:        18px;
     transition:    margin-left 0.1s linear;
-    width:         20px;
+    width:         18px;
+    margin-top:    1px;
+    margin-left:   1px;
 }
 
 input:checked + div.switch-outer {
@@ -21,5 +23,5 @@ input:checked + div.switch-outer {
 }
 
 input:checked + div.switch-outer > div.switch-inner {
-    margin-left: 20px;
+    margin-left: 21px;
 }