From ba19101db2d89dcdeb1fa9ed70e9e91fd46590ec Mon Sep 17 00:00:00 2001
From: Geir Thomas Andersen <andersen@runbox.com>
Date: Sat, 21 Oct 2023 13:30:15 +0200
Subject: [PATCH] feat(account-details): Show account details such as UID and
 location.

---
 .../account-app/account-app.component.html    |  6 ++--
 src/app/account-app/account-app.module.ts     | 10 +++---
 .../account-welcome.component.html            |  6 ++--
 ...nt.html => account-details.component.html} | 35 ++++++++++++++-----
 ...ponent.ts => account-details.component.ts} |  6 ++--
 5 files changed, 40 insertions(+), 23 deletions(-)
 rename src/app/account-details/{storage-data.component.html => account-details.component.html} (67%)
 rename src/app/account-details/{storage-data.component.ts => account-details.component.ts} (92%)

diff --git a/src/app/account-app/account-app.component.html b/src/app/account-app/account-app.component.html
index 82769a4f1..192c9ed79 100644
--- a/src/app/account-app/account-app.component.html
+++ b/src/app/account-app/account-app.component.html
@@ -90,14 +90,14 @@ <h3 class="sideNavHeader">Settings Menu</h3>
                         <mat-icon mat-list-icon svgIcon="account-cog"></mat-icon> <span>Account</span>
                     </p>
                 </mat-expansion-panel-header>
-                <mat-list-item routerLink="/account/details">
+                <mat-list-item routerLink="/account/personal_details">
                     <p mat-line>
                         <mat-icon mat-list-icon svgIcon="face"></mat-icon> <span>Personal Details</span>
                     </p>
                 </mat-list-item>
-                <mat-list-item routerLink="/account/storage">
+                <mat-list-item routerLink="/account/account_details">
                     <p mat-line>
-                        <mat-icon mat-list-icon svgIcon="view-list"></mat-icon> <span>Storage and Data</span>
+                        <mat-icon mat-list-icon svgIcon="view-list"></mat-icon> <span>Account Details</span>
                     </p>
                 </mat-list-item>
                 <mat-list-item routerLink="/account/preferences">
diff --git a/src/app/account-app/account-app.module.ts b/src/app/account-app/account-app.module.ts
index 98f190cc6..714a8bf9a 100644
--- a/src/app/account-app/account-app.module.ts
+++ b/src/app/account-app/account-app.module.ts
@@ -86,7 +86,7 @@ import { NoProductsForSubaccountsGuard } from './no-products-for-subaccounts.gua
 import { NoProductsForSubaccountsComponent } from './no-products-for-subaccounts.component';
 import { PersonalDetailsComponent } from '../account-details/personal-details.component';
 import { AccountSettingsComponent } from '../account-details/account-settings.component';
-import { StorageDataComponent } from '../account-details/storage-data.component';
+import { AccountDetailsComponent } from '../account-details/account-details.component';
 import { TwoFactorAuthenticationComponent } from '../account-security/two-factor-authentication.component';
 import { ManageServicesComponent } from '../account-security/manage-services.component';
 import { AppPasswordsComponent } from '../account-security/app-passwords.component';
@@ -101,7 +101,7 @@ import { DomainRegisterComponent } from '../domainregister/domainregister.compon
         AccountAppComponent,
         PersonalDetailsComponent,
         AccountSettingsComponent,
-        StorageDataComponent,
+        AccountDetailsComponent,
         AccountReceiptComponent,
         AccountRenewalsComponent,
         AccountRenewalsAutorenewToggleComponent,
@@ -262,12 +262,12 @@ import { DomainRegisterComponent } from '../domainregister/domainregister.compon
                                 component: DomainRegisterComponent,
                             },
                             {
-                                path: 'details',
+                                path: 'personal_details',
                                 component: PersonalDetailsComponent,
                             },
                             {
-                                path: 'storage',
-                                component: StorageDataComponent,
+                                path: 'account_details',
+                                component: AccountDetailsComponent,
                             },
                             {
                                 path: 'preferences',
diff --git a/src/app/account-app/account-welcome.component.html b/src/app/account-app/account-welcome.component.html
index 5803b1c29..0da6eb891 100644
--- a/src/app/account-app/account-welcome.component.html
+++ b/src/app/account-app/account-welcome.component.html
@@ -115,7 +115,7 @@ <h3 class="themePaletteBlack">
     </div>
     <div class="settingsRow">
       <mat-card class="settingsItem">
-        <a routerLink="/account/details">
+        <a routerLink="/account/personal_details">
           <h4>
             <mat-icon svgIcon="face"></mat-icon> Personal Details
           </h4>
@@ -123,9 +123,9 @@ <h4>
         </a>
       </mat-card>
       <mat-card class="settingsItem">
-        <a routerLink="/account/storage">
+        <a routerLink="/account/account_details">
           <h4>
-            <mat-icon svgIcon="view-list"></mat-icon> Storage and Data
+            <mat-icon svgIcon="view-list"></mat-icon> Account Details
           </h4>
           <p>Show the details for your account's email and files storage space and bandwidth usage.</p>
         </a>
diff --git a/src/app/account-details/storage-data.component.html b/src/app/account-details/account-details.component.html
similarity index 67%
rename from src/app/account-details/storage-data.component.html
rename to src/app/account-details/account-details.component.html
index f21d0a348..ce329a8c4 100644
--- a/src/app/account-details/storage-data.component.html
+++ b/src/app/account-details/account-details.component.html
@@ -1,6 +1,30 @@
 <section class="mat-typography">
     <div class="container">
-        <h1>Data Usage</h1>
+        <h2>Account Details</h2>
+        <h3>General</h3>
+        <table mat-table *ngIf="storageDetails | async as storageDetails" [dataSource]="storageDetails">
+            <!-- Item Column -->
+            <ng-container matColumnDef="item">
+                <th mat-header-cell *matHeaderCellDef> Item </th>
+                <td> UID </td>
+                <td> Location </td>
+                <td> Home directory </td>
+                <td> Backup interval </td>
+            </ng-container>
+
+            <!-- Value Column -->
+            <ng-container matColumnDef="value">
+                <th mat-header-cell *matHeaderCellDef> Value </th>
+                <td> 12345 </td>
+                <td> Oslo, Norway </td>
+                <td> Home directory </td>
+                <td> Backup interval </td>
+            </ng-container>
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+        </table>
+
+        <h3>Data Usage</h3>
         <table mat-table *ngIf="dataUsage | async as dataUsage" [dataSource]="dataUsage">
             <!-- Type Column -->
             <ng-container matColumnDef="type">
@@ -39,11 +63,4 @@ <h1>Data Usage</h1>
             <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
         </table>
     </div>
-
-    <!-- <div class="container">
-        <h2>Storage Details</h2>
-        <p>Location: //LOCATION//</p>
-        <p>Home directory: //DIRECTORY//</p>
-        <p>Backup: //BACKUP INTERVAL//</p>
-    </div> -->
-</section>
\ No newline at end of file
+</section>
diff --git a/src/app/account-details/storage-data.component.ts b/src/app/account-details/account-details.component.ts
similarity index 92%
rename from src/app/account-details/storage-data.component.ts
rename to src/app/account-details/account-details.component.ts
index 50d827f5e..9b0c7e072 100644
--- a/src/app/account-details/storage-data.component.ts
+++ b/src/app/account-details/account-details.component.ts
@@ -29,11 +29,11 @@ export interface DataUsage {
 }
 
 @Component({
-    selector: 'app-storage-data-component',
-    templateUrl: './storage-data.component.html',
+    selector: 'app-account-details-component',
+    templateUrl: './account-details.component.html',
     styleUrls: ['account-details.component.scss'],
 })
-export class StorageDataComponent {
+export class AccountDetailsComponent {
     dataUsage = new AsyncSubject<DataUsage[]>();
     displayedColumns: string[] = ['type', 'quota', 'usage', 'percentage_used'];