From 75dec493bb3a271c5a9fcda520436c3ea307dab7 Mon Sep 17 00:00:00 2001
From: SondreB <sondre@outlook.com>
Date: Sun, 23 Jun 2024 23:09:08 +0200
Subject: [PATCH] Create accounts and account (empty) components

---
 app/src/app/account/account.component.html    |   1 +
 app/src/app/account/account.component.scss    |   0
 app/src/app/account/account.component.spec.ts |  23 ++++
 app/src/app/account/account.component.ts      |  12 ++
 app/src/app/accounts/accounts.component.html  | 116 ++++++++++++++++++
 app/src/app/accounts/accounts.component.scss  |  24 ++++
 .../app/accounts/accounts.component.spec.ts   |  23 ++++
 app/src/app/accounts/accounts.component.ts    |  32 +++++
 app/src/app/app.routes.ts                     |  24 +++-
 app/src/app/layout/layout.component.html      |  12 +-
 10 files changed, 261 insertions(+), 6 deletions(-)
 create mode 100644 app/src/app/account/account.component.html
 create mode 100644 app/src/app/account/account.component.scss
 create mode 100644 app/src/app/account/account.component.spec.ts
 create mode 100644 app/src/app/account/account.component.ts
 create mode 100644 app/src/app/accounts/accounts.component.html
 create mode 100644 app/src/app/accounts/accounts.component.scss
 create mode 100644 app/src/app/accounts/accounts.component.spec.ts
 create mode 100644 app/src/app/accounts/accounts.component.ts

diff --git a/app/src/app/account/account.component.html b/app/src/app/account/account.component.html
new file mode 100644
index 00000000..2d5fa188
--- /dev/null
+++ b/app/src/app/account/account.component.html
@@ -0,0 +1 @@
+<p>account works!</p>
diff --git a/app/src/app/account/account.component.scss b/app/src/app/account/account.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/app/src/app/account/account.component.spec.ts b/app/src/app/account/account.component.spec.ts
new file mode 100644
index 00000000..1ec4ce5f
--- /dev/null
+++ b/app/src/app/account/account.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccountComponent } from './account.component';
+
+describe('AccountComponent', () => {
+  let component: AccountComponent;
+  let fixture: ComponentFixture<AccountComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AccountComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AccountComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/app/src/app/account/account.component.ts b/app/src/app/account/account.component.ts
new file mode 100644
index 00000000..d13db0c6
--- /dev/null
+++ b/app/src/app/account/account.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-account',
+  standalone: true,
+  imports: [],
+  templateUrl: './account.component.html',
+  styleUrl: './account.component.scss'
+})
+export class AccountComponent {
+
+}
diff --git a/app/src/app/accounts/accounts.component.html b/app/src/app/accounts/accounts.component.html
new file mode 100644
index 00000000..d8acf8fc
--- /dev/null
+++ b/app/src/app/accounts/accounts.component.html
@@ -0,0 +1,116 @@
+<h1>All Accounts</h1>
+
+<mat-list>
+    <a [routerLink]="['/account', 'did:dht:umj7apgmkodtrb7mdpjo4h7xinqdnatzgy38j7wi67k9c7sdns1o']" mat-list-item class="selectable-list-item">
+        <mat-icon matListItemIcon>account_circle</mat-icon>
+        <span matListItemTitle>SondreB (Voluntaryist)</span>
+        <span matListItemLine>did:dht:umj7apgmkodtrb7mdpjo4h7xinqdnatzgy38j7wi67k9c7sdns1o</span>
+        <!--<div class="account-action-button" matListItemMeta>
+            <button mat-icon-button [matMenuTriggerFor]="menuActions">
+                <mat-icon>more_vert</mat-icon>
+            </button>
+        </div>-->
+    </a>
+    <a [routerLink]="['/account', 'did:dht:umj7apgmkodtrb7mdpjo4h7xinqdnatzgy38j7wi67k9c7sdns1o']" mat-list-item class="selectable-list-item">
+        <mat-icon matListItemIcon>account_circle</mat-icon>
+        <span matListItemTitle>Joe</span>
+        <span matListItemLine>did:dht:umj7apgmkodtrb7mdpjo4h7xinqdnatzgy38j7wi67k9c7sdns1o</span>
+        <!--<div class="account-action-button" matListItemMeta>
+            <button mat-icon-button [matMenuTriggerFor]="menuActions">
+                <mat-icon>more_vert</mat-icon>
+            </button>
+        </div>-->
+    </a>
+    <a [routerLink]="['/account', 'did:dht:umj7apgmkodtrb7mdpjo4h7xinqdnatzgy38j7wi67k9c7sdns1o']" mat-list-item class="selectable-list-item">
+        <mat-icon matListItemIcon>account_circle</mat-icon>
+        <span matListItemTitle>Luba</span>
+        <span matListItemLine>did:dht:umj7apgmkodtrb7mdpjo4h7xinqdnatzgy38j7wi67k9c7sdns1o</span>
+        <!--<div class="account-action-button" matListItemMeta>
+            <button mat-icon-button [matMenuTriggerFor]="menuActions">
+                <mat-icon>more_vert</mat-icon>
+            </button>
+        </div>-->
+    </a>
+</mat-list>
+
+<mat-menu #menuActions="matMenu">
+    <button mat-menu-item [routerLink]="['/settings']">
+      <mat-icon>settings</mat-icon>
+      <span>View</span>
+    </button>
+
+      <mat-divider></mat-divider>
+      <button mat-menu-item>
+        <mat-icon>person_remove</mat-icon>
+        <span>Remove Account from device</span>
+      </button>
+  </mat-menu>
+
+<!--
+  <mat-accordion class="example-headers-align" multi>
+    <mat-expansion-panel>
+      <mat-expansion-panel-header>
+        <mat-panel-title>SondreB (Voluntaryist)</mat-panel-title>
+        <mat-panel-description>
+            did:dht:umj7apgmkodtrb7mdpjo4h7xinqdnatzgy38j7wi67k9c7sdns1o
+          <mat-icon>account_circle</mat-icon>
+        </mat-panel-description>
+      </mat-expansion-panel-header>
+  
+      <mat-tab-group>
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <mat-icon class="example-tab-icon">thumb_up</mat-icon>
+            First
+          </ng-template>
+          Content 1
+        </mat-tab>
+      
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <mat-icon class="example-tab-icon">thumb_up</mat-icon>
+            Second
+          </ng-template>
+          Content 2
+        </mat-tab>
+      
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <mat-icon class="example-tab-icon">thumb_up</mat-icon>
+            Third
+          </ng-template>
+      
+          Content 3
+        </mat-tab>
+      </mat-tab-group>
+    </mat-expansion-panel>
+    <mat-expansion-panel disabled>
+      <mat-expansion-panel-header>
+        <mat-panel-title> did:dht:umj7apgmkodtrb7mdpjo4h7xinqdnatzgy38j7wi67k9c7sdns1o </mat-panel-title>
+        <mat-panel-description>
+          Type the country name
+          <mat-icon>map</mat-icon>
+        </mat-panel-description>
+      </mat-expansion-panel-header>
+  
+      <mat-form-field>
+        <mat-label>Country</mat-label>
+        <input matInput />
+      </mat-form-field>
+    </mat-expansion-panel>
+  
+    <mat-expansion-panel>
+      <mat-expansion-panel-header>
+        <mat-panel-title> Day of the trip </mat-panel-title>
+        <mat-panel-description>
+          Inform the date you wish to travel
+          <mat-icon>date_range</mat-icon>
+        </mat-panel-description>
+      </mat-expansion-panel-header>
+  
+      <mat-form-field>
+        <mat-label>Date</mat-label>
+        <input matInput readonly />
+      </mat-form-field>
+    </mat-expansion-panel>
+  </mat-accordion>-->
\ No newline at end of file
diff --git a/app/src/app/accounts/accounts.component.scss b/app/src/app/accounts/accounts.component.scss
new file mode 100644
index 00000000..faba34ee
--- /dev/null
+++ b/app/src/app/accounts/accounts.component.scss
@@ -0,0 +1,24 @@
+.account-action-button {
+  padding-top: 1.2em;
+}
+
+.example-action-buttons {
+    padding-bottom: 20px;
+  }
+  
+  .example-headers-align .mat-expansion-panel-header-description {
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .example-headers-align .mat-mdc-form-field + .mat-mdc-form-field {
+    margin-left: 8px;
+  }
+
+  .selectable-list-item {
+    cursor: pointer;
+  }
+
+  .selectable-list-item:hover {
+    background-color: var(--mdc-list-list-item-leading-avatar-color);
+  }
\ No newline at end of file
diff --git a/app/src/app/accounts/accounts.component.spec.ts b/app/src/app/accounts/accounts.component.spec.ts
new file mode 100644
index 00000000..ecb26f61
--- /dev/null
+++ b/app/src/app/accounts/accounts.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccountsComponent } from './accounts.component';
+
+describe('AccountsComponent', () => {
+  let component: AccountsComponent;
+  let fixture: ComponentFixture<AccountsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AccountsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AccountsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/app/src/app/accounts/accounts.component.ts b/app/src/app/accounts/accounts.component.ts
new file mode 100644
index 00000000..a02ea3d5
--- /dev/null
+++ b/app/src/app/accounts/accounts.component.ts
@@ -0,0 +1,32 @@
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { MatMenuModule } from '@angular/material/menu';
+import { RouterLink } from '@angular/router';
+import { MatExpansionModule} from '@angular/material/expansion';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatTabsModule } from '@angular/material/tabs';
+
+@Component({
+  selector: 'app-accounts',
+  standalone: true,
+  imports: [
+    MatExpansionModule, 
+    MatTabsModule,
+    MatFormFieldModule, 
+    MatListModule, 
+    MatIconModule, 
+    MatInputModule,
+    MatButtonModule, 
+    MatMenuModule, 
+    RouterLink],
+  templateUrl: './accounts.component.html',
+  styleUrl: './accounts.component.scss'
+})
+export class AccountsComponent {
+  save() {}
+
+  undo() {}
+}
diff --git a/app/src/app/app.routes.ts b/app/src/app/app.routes.ts
index 72fefce8..e5e117fb 100644
--- a/app/src/app/app.routes.ts
+++ b/app/src/app/app.routes.ts
@@ -101,8 +101,22 @@ export const routes: Routes = [
     path: 'profile/:id',
     loadComponent: () =>
       import('./profile/profile.component').then((c) => c.ProfileComponent),
-    title: 'Identity',
-    data: { icon: 'account_circle' },
+    title: 'Profile',
+    data: { hide: true, icon: 'account_circle' },
+  },
+  {
+    path: 'accounts',
+    loadComponent: () =>
+      import('./accounts/accounts.component').then((c) => c.AccountsComponent),
+    title: 'Accounts',
+    data: { hide: true, icon: 'account_circle' },
+  },
+  {
+    path: 'account/:id',
+    loadComponent: () =>
+      import('./account/account.component').then((c) => c.AccountComponent),
+    title: 'Account',
+    data: { hide: true, icon: 'account_circle' },
   },
   {
     path: 'identity',
@@ -116,7 +130,7 @@ export const routes: Routes = [
     loadComponent: () =>
       import('./settings/settings.component').then((c) => c.SettingsComponent),
     title: 'Settings',
-    data: { icon: 'settings' },
+    data: { hide: true, icon: 'settings' },
   },
   {
     path: 'address',
@@ -132,14 +146,14 @@ export const routes: Routes = [
     loadComponent: () =>
       import('./table/table.component').then((c) => c.TableComponent),
     title: 'Table',
-    data: { hide: false, icon: 'folder' },
+    data: { hide: true, icon: 'folder' },
   },
   {
     path: 'tree',
     loadComponent: () =>
       import('./tree/tree.component').then((c) => c.TreeComponent),
     title: 'Tree',
-    data: { hide: false, icon: 'folder' },
+    data: { hide: true, icon: 'folder' },
   },
   {
     path: 'drag-drop',
diff --git a/app/src/app/layout/layout.component.html b/app/src/app/layout/layout.component.html
index b0595310..b2ba5963 100644
--- a/app/src/app/layout/layout.component.html
+++ b/app/src/app/layout/layout.component.html
@@ -94,7 +94,7 @@
 
           <button mat-menu-item [matMenuTriggerFor]="menuAccounts">
               <mat-icon>switch_account</mat-icon>
-              <span>Switch account</span>
+              <span>Accounts</span>
             </button>
 
           <button mat-menu-item>
@@ -120,6 +120,11 @@
         </mat-menu>
 
         <mat-menu #menuAccounts="matMenu">
+          <button [routerLink]="['/accounts']" mat-menu-item>
+            <mat-icon>manage_accounts</mat-icon>
+            <span>Manage Accounts</span>
+          </button>
+          <mat-divider></mat-divider>
           <button mat-menu-item>
             <mat-icon>account_circle</mat-icon>
             <span>Account 1</span>
@@ -132,6 +137,11 @@
             <mat-icon>account_circle</mat-icon>
             <span>Account 3</span>
           </button>
+          <mat-divider></mat-divider>
+          <button [routerLink]="['/accounts/add']" mat-menu-item>
+            <mat-icon>person_add</mat-icon>
+            <span>Add account</span>
+          </button>
         </mat-menu>
 
         <mat-menu #menuLanguages="matMenu">