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="card-header">
         <div class="row no-gutters">
             <div class="col">
-            <div class="client-header">
                 <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,7 +24,6 @@
                     <i class="client-edit icon-pencil" (click)="toggleRename()"></i>
                 </ng-container>
             </div>
-        </div>
             <div class="col-auto">
                 <button class="btn btn-primary" (click)="createToken(client)">Connect</button>
             </div>
@@ -37,11 +36,14 @@
                 </button>
             </div>
         </div>
-    <div class="row no-gutters form-group">
-        <div class="col-4 col-form-label">
-            Client Id:
     </div>
-        <div class="col">
+    <div class="card-body">
+        <div class="container">
+            <div class="form-group row">
+                <label class="col-3 col-form-label">
+                    Client Id
+                </label>
+                <div class="col cell-input">
                     <input readonly class="form-control" value="{{appsState.appName}}:{{client.id}}" #inputName />
                 </div>
                 <div class="col-auto cell-actions">
@@ -50,11 +52,11 @@
                     </button>
                 </div>
             </div>
-    <div class="row no-gutters form-group">
+            <div class="form-group row">
-        <div class="col-4 col-form-label">
+                <label class="col-3 col-form-label">
-            Client Secret:
+                    Client Secret
-        </div>
+                </label>
-        <div class="col">
+                <div class="col cell-input">
                     <input readonly class="form-control" [attr.value]="client.secret" #inputSecret />
                 </div>
                 <div class="col-auto cell-actions">
@@ -63,20 +65,23 @@
                     </button>
                 </div>
             </div>
-    <div class="row no-gutters">
+            <div class="form-group row">
-        <div class="col-4 col-form-label">
+                <label class="col-3 col-form-label">
-            Role:
+                    Role
-        </div>
+                </label>
-        <div class="col">
+                <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 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

@@ -24,6 +24,8 @@ namespace Migrate_01.Migrations
         public async Task UpdateAsync()
         {
             foreach (var document in collection.Find(new BsonDocument()).ToEnumerable())
+            {
+                try
                 {
                     document["Job"]["actionData"] = document["Job"]["actionData"].ToBsonDocument().ToJson();
 
@@ -31,6 +33,11 @@ namespace Migrate_01.Migrations
 
                     await collection.ReplaceOneAsync(filter, document);
                 }
+                catch
+                {
+                    continue;
+                }
+            }
         }
     }
 }