Create accounts and account (empty) components

app/src/app/account/account.component.html

@@ -0,0 +1 @@
+<p>account works!</p>

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();
+  });
+});

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 {
+
+}

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

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);
+  }

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();
+  });
+});

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() {}
+}

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

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