Show account details such as UID and location.

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">

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',

src/app/account-app/account-welcome.component.html

@@ -115,17 +115,17 @@ <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>
           <p>View and update your name, address, alternative email address, and other details.</p>
         </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>

src/app/account-details/storage-data.component.html → 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>
+</section>

src/app/account-details/storage-data.component.ts → 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'];