Client UI improved

src/Squidex/app/features/settings/pages/clients/client.component.html

@@ -1,7 +1,7 @@
-<div class="table-items-row">
+<div class="card">
-    <div class="row no-gutters">
+    <div class="card-header">
-        <div class="col">
+        <div class="row no-gutters">
-            <div class="client-header">
+            <div class="col">
                 <form *ngIf="isRenaming" class="form-inline" [formGroup]="renameForm.form" (ngSubmit)="rename()">
                     <div class="form-group mr-1">
                         <sqx-control-errors for="name"></sqx-control-errors>
@@ -24,59 +24,64 @@
                     <i class="client-edit icon-pencil" (click)="toggleRename()"></i>
                 </ng-container>
             </div>
-        </div>
+            <div class="col-auto">
-        <div class="col-auto">
+                <button class="btn btn-primary" (click)="createToken(client)">Connect</button>
-            <button class="btn btn-primary" (click)="createToken(client)">Connect</button>
+            </div>
-        </div>
+            <div class="col-auto cell-actions">
-        <div class="col-auto cell-actions">
+                <button type="button" class="btn btn-text-danger"
-            <button type="button" class="btn btn-text-danger"
+                    (sqxConfirmClick)="revoke()"
-                (sqxConfirmClick)="revoke()"
+                    confirmTitle="Revoke client" 
-                confirmTitle="Revoke client" 
+                    confirmText="Do you really want to revoke the client?">
-                confirmText="Do you really want to revoke the client?">
+                    <i class="icon-bin2"></i>
-                <i class="icon-bin2"></i>
+                </button>
-            </button>
+            </div>
-        </div>
-    </div>
-    <div class="row no-gutters form-group">
-        <div class="col-4 col-form-label">
-            Client Id:
-        </div>
-        <div class="col">
-            <input readonly class="form-control" value="{{appsState.appName}}:{{client.id}}" #inputName />
-        </div>
-        <div class="col-auto cell-actions">
-            <button type="button" class="btn btn-text" [sqxCopy]="inputName">
-                <i class="icon-copy"></i>
-            </button>
-        </div>
-    </div>
-    <div class="row no-gutters form-group">
-        <div class="col-4 col-form-label">
-            Client Secret:
-        </div>
-        <div class="col">
-            <input readonly class="form-control" [attr.value]="client.secret" #inputSecret />
-        </div>
-        <div class="col-auto cell-actions">
-            <button type="button" class="btn btn-text" [sqxCopy]="inputSecret">
-                <i class="icon-copy"></i>
-            </button>
         </div>
     </div>
-    <div class="row no-gutters">
+    <div class="card-body">
-        <div class="col-4 col-form-label">
+        <div class="container">
-            Role:
+            <div class="form-group row">
-        </div>
+                <label class="col-3 col-form-label">
-        <div class="col">
+                    Client Id
-            <select class="form-control" [ngModel]="client.role" (ngModelChange)="update($event)">
+                </label>
-                <option *ngFor="let role of clientRoles" [ngValue]="role.name">{{role.name}}</option>
+                <div class="col cell-input">
-            </select>
+                    <input readonly class="form-control" value="{{appsState.appName}}:{{client.id}}" #inputName />
-        </div>
+                </div>
-        <div class="col-auto cell-actions">
+                <div class="col-auto cell-actions">
+                    <button type="button" class="btn btn-text" [sqxCopy]="inputName">
+                        <i class="icon-copy"></i>
+                    </button>
+                </div>
+            </div>
+            <div class="form-group row">
+                <label class="col-3 col-form-label">
+                    Client Secret
+                </label>
+                <div class="col cell-input">
+                    <input readonly class="form-control" [attr.value]="client.secret" #inputSecret />
+                </div>
+                <div class="col-auto cell-actions">
+                    <button type="button" class="btn btn-text" [sqxCopy]="inputSecret">
+                        <i class="icon-copy"></i>
+                    </button>
+                </div>
+            </div>
+            <div class="form-group row">
+                <label class="col-3 col-form-label">
+                    Role
+                </label>
+                <div class="col cell-input">
+                    <select class="form-control" [ngModel]="client.role" (ngModelChange)="update($event)">
+                        <option *ngFor="let role of clientRoles" [ngValue]="role.name">{{role.name}}</option>
+                    </select>
+                </div>
+                <div class="col-auto cell-actions"></div>
+            </div>
         </div>
     </div>
 </div>
 
+        
+
 <sqx-modal-dialog *sqxModalView="connectDialog;onRoot:true" large="true" (closed)="connectDialog.hide()">
     <ng-container title>
         Connect

src/Squidex/app/features/settings/pages/clients/client.component.scss

@@ -3,6 +3,26 @@
 
 $color-editor: #eceeef;
 
+.card {
+    & {
+        @include border-radius(0);
+        border-bottom-width: 2px;
+        border-top-width: 1px;
+    }
+
+    &-header {
+        & {
+            margin-bottom: .5rem;
+        }
+
+        &:hover {
+            .client-edit {
+                display: inline-block;
+            }
+        }
+    }
+}
+
 .client {
     &-info {
         margin: 0;
@@ -34,30 +54,15 @@ $color-editor: #eceeef;
         display: inline-block;
         margin: 0;
     }
-
-    &-header {
-        & {
-            margin-bottom: .5rem;
-        }
-
-        &:hover {
-            .client-edit {
-                display: inline-block;
-            }
-        }
-    }
 }
 
-.col-form-label {
+.cell-actions {
-    text-align: left;
+    width: 3.2rem;
-}
+    padding: 0;
-
-.form-check {
-    padding: .5rem 0 0;
 }
 
-.form-check-label {
+.cell-input {
-    padding: 0;
+    padding-right: 0;
 }
 
 .access-token {

tools/Migrate_01/Migrations/ConvertRuleEventsJson.cs

@@ -25,11 +25,18 @@ namespace Migrate_01.Migrations
         {
             foreach (var document in collection.Find(new BsonDocument()).ToEnumerable())
             {
-                document["Job"]["actionData"] = document["Job"]["actionData"].ToBsonDocument().ToJson();
+                try
+                {
+                    document["Job"]["actionData"] = document["Job"]["actionData"].ToBsonDocument().ToJson();
 
-                var filter = Builders<BsonDocument>.Filter.Eq("_id", document["_id"].ToString());
+                    var filter = Builders<BsonDocument>.Filter.Eq("_id", document["_id"].ToString());
 
-                await collection.ReplaceOneAsync(filter, document);
+                    await collection.ReplaceOneAsync(filter, document);
+                }
+                catch
+                {
+                    continue;
+                }
             }
         }
     }