From 1301b4eecf6be79a74918ccf61cbf4a3de06d078 Mon Sep 17 00:00:00 2001
From: Martin Tan <martinwdtan@gmail.com>
Date: Sat, 26 Aug 2023 16:45:22 +0800
Subject: [PATCH] Format user-edit-dialog

---
 .../user-edit-dialog.component.html           | 137 ++++++++++++++----
 1 file changed, 105 insertions(+), 32 deletions(-)

diff --git a/src-ui/src/app/components/common/edit-dialog/user-edit-dialog/user-edit-dialog.component.html b/src-ui/src/app/components/common/edit-dialog/user-edit-dialog/user-edit-dialog.component.html
index ec9cceae9..f23d26d1e 100644
--- a/src-ui/src/app/components/common/edit-dialog/user-edit-dialog/user-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/edit-dialog/user-edit-dialog/user-edit-dialog.component.html
@@ -1,38 +1,111 @@
 <form [formGroup]="objectForm" (ngSubmit)="save()">
-    <div class="modal-header">
-      <h4 class="modal-title" id="modal-basic-title">{{getTitle()}}</h4>
-      <button type="button" [disabled]="!closeEnabled" class="btn-close" aria-label="Close" (click)="cancel()">
-      </button>
-    </div>
-    <div class="modal-body">
-      <div class="row">
-        <div class="col">
-          <app-input-text i18n-title title="Username" formControlName="username" [error]="error?.username"></app-input-text>
-          <app-input-text i18n-title title="Email" formControlName="email" [error]="error?.email"></app-input-text>
-          <app-input-password i18n-title title="Password" formControlName="password" [error]="error?.password"></app-input-password>
-          <app-input-text i18n-title title="First name" formControlName="first_name" [error]="error?.first_name"></app-input-text>
-          <app-input-text i18n-title title="Last name" formControlName="last_name" [error]="error?.first_name"></app-input-text>
+  <div class="modal-header">
+    <h4 class="modal-title" id="modal-basic-title">{{ getTitle() }}</h4>
+    <button
+      type="button"
+      [disabled]="!closeEnabled"
+      class="btn-close"
+      aria-label="Close"
+      (click)="cancel()"
+    ></button>
+  </div>
+  <div class="modal-body">
+    <div class="row">
+      <div class="col">
+        <app-input-text
+          i18n-title
+          title="Username"
+          formControlName="username"
+          [error]="error?.username"
+        ></app-input-text>
+        <app-input-text
+          i18n-title
+          title="Email"
+          formControlName="email"
+          [error]="error?.email"
+        ></app-input-text>
+        <app-input-password
+          i18n-title
+          title="Password"
+          formControlName="password"
+          [error]="error?.password"
+        ></app-input-password>
+        <app-input-text
+          i18n-title
+          title="First name"
+          formControlName="first_name"
+          [error]="error?.first_name"
+        ></app-input-text>
+        <app-input-text
+          i18n-title
+          title="Last name"
+          formControlName="last_name"
+          [error]="error?.first_name"
+        ></app-input-text>
 
-          <div class="mb-2">
-            <div class="form-check form-switch form-check-inline">
-              <input type="checkbox" class="form-check-input" id="is_active" formControlName="is_active">
-              <label class="form-check-label" for="is_active" i18n>Active</label>
-            </div>
-            <div class="form-check form-switch form-check-inline">
-              <input type="checkbox" class="form-check-input" id="is_superuser" formControlName="is_superuser" (change)="onToggleSuperUser()">
-              <label class="form-check-label" for="is_superuser"><ng-container i18n>Superuser</ng-container> <small class="form-text text-muted ms-1" i18n>(Grants all permissions and can view objects)</small></label>
-            </div>
+        <div class="mb-2">
+          <div class="form-check form-switch form-check-inline">
+            <input
+              type="checkbox"
+              class="form-check-input"
+              id="is_active"
+              formControlName="is_active"
+            />
+            <label class="form-check-label" for="is_active" i18n>Active</label>
           </div>
+          <div class="form-check form-switch form-check-inline">
+            <input
+              type="checkbox"
+              class="form-check-input"
+              id="is_superuser"
+              formControlName="is_superuser"
+              (change)="onToggleSuperUser()"
+            />
+            <label class="form-check-label" for="is_superuser"
+              ><ng-container i18n>Superuser</ng-container>
+              <small class="form-text text-muted ms-1" i18n
+                >(Grants all permissions and can view objects)</small
+              ></label
+            >
+          </div>
+        </div>
 
-          <app-input-select i18n-title title="Groups" [items]="groups" multiple="true" formControlName="groups"></app-input-select>
-        </div>
-        <div class="col">
-          <app-permissions-select i18n-title title="Permissions" formControlName="user_permissions" [error]="error?.user_permissions" [inheritedPermissions]="inheritedPermissions"></app-permissions-select>
-        </div>
+        <app-input-select
+          i18n-title
+          title="Groups"
+          [items]="groups"
+          multiple="true"
+          formControlName="groups"
+        ></app-input-select>
+      </div>
+      <div class="col">
+        <app-permissions-select
+          i18n-title
+          title="Permissions"
+          formControlName="user_permissions"
+          [error]="error?.user_permissions"
+          [inheritedPermissions]="inheritedPermissions"
+        ></app-permissions-select>
       </div>
     </div>
-    <div class="modal-footer">
-      <button type="button" class="btn btn-outline-secondary" (click)="cancel()" i18n [disabled]="networkActive">Cancel</button>
-      <button type="submit" class="btn btn-primary" i18n [disabled]="networkActive">Save</button>
-    </div>
-  </form>
+  </div>
+  <div class="modal-footer">
+    <button
+      type="button"
+      class="btn btn-outline-secondary"
+      (click)="cancel()"
+      i18n
+      [disabled]="networkActive"
+    >
+      Cancel
+    </button>
+    <button
+      type="submit"
+      class="btn btn-primary"
+      i18n
+      [disabled]="networkActive"
+    >
+      Save
+    </button>
+  </div>
+</form>