diff --git a/src/app/pages/users/user-details/user-details.component.html b/src/app/pages/users/user-details/user-details.component.html
new file mode 100644
index 0000000..ab655c6
--- /dev/null
+++ b/src/app/pages/users/user-details/user-details.component.html
@@ -0,0 +1,64 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Platform:
+
+ -
+
Address: {{user.key.ethereum[1]}}
+
+ -
+
+ Selling: {{user.selling}}
+
+
+ -
+
Location:
+ Latitude: {{user.location.latitude}}
+ Longitude: {{user.location.longitude}}
+
+ -
+
Date registered: {{user.dateRegistered}}
+
+
+
+
+
V Card:
+
+ -
+
Name: {{parsedVcard['fn']}}
+
+ -
+
Version: {{parsedVcard['version']}}
+
+ -
+
Tel: {{parsedVcard['tel'][0]['meta']['TYP']}} : {{parsedVcard['tel'][0]['value'][0]}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/pages/users/user-details/user-details.component.scss b/src/app/pages/users/user-details/user-details.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/users/user-details/user-details.component.spec.ts b/src/app/pages/users/user-details/user-details.component.spec.ts
new file mode 100644
index 0000000..90bf27e
--- /dev/null
+++ b/src/app/pages/users/user-details/user-details.component.spec.ts
@@ -0,0 +1,76 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserDetailsComponent } from './user-details.component';
+import {ActivatedRouteStub, FooterStubComponent, SidebarStubComponent, TopbarStubComponent, UserServiceStub} from '../../../../testing';
+import {ActivatedRoute} from '@angular/router';
+import {HttpClient} from '@angular/common/http';
+import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
+import {UserService} from '../../../_services';
+
+
+describe('UserDetailsComponent', () => {
+ let component: UserDetailsComponent;
+ let fixture: ComponentFixture;
+ let httpClient: HttpClient;
+ let httpTestingController: HttpTestingController;
+ let route: ActivatedRouteStub;
+
+ beforeEach(async () => {
+ route = new ActivatedRouteStub();
+ route.setParamMap({ id: 'test' });
+ await TestBed.configureTestingModule({
+ declarations: [
+ UserDetailsComponent,
+ FooterStubComponent,
+ SidebarStubComponent,
+ TopbarStubComponent
+ ],
+ imports: [HttpClientTestingModule],
+ providers: [
+ { provide: ActivatedRoute, useValue: route },
+ { provide: UserService, useClass: UserServiceStub }
+ ]
+ })
+ .compileComponents();
+ httpClient = TestBed.inject(HttpClient);
+ httpTestingController = TestBed.inject(HttpTestingController);
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(UserDetailsComponent);
+ component = fixture.componentInstance;
+ component.user = {
+ dateRegistered: 1595537208,
+ key: {
+ ethereum: [
+ '0x51d3c8e2e421604e2b644117a362d589c5434739',
+ '0x9D7c284907acbd4a0cE2dDD0AA69147A921a573D'
+ ]
+ },
+ location: {
+ external: {},
+ latitude: '22.430670',
+ longitude: '151.002995'
+ },
+ selling: [
+ 'environment',
+ 'health',
+ 'transport'
+ ],
+ vcard: {
+ fn: 'Test User',
+ tel: [{
+ meta: {TYP: 'CELL'},
+ value: ['25412345678']
+ }],
+ version: '3.0'
+ }
+ };
+ component.parsedVcard = component.user.vcard;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/pages/users/user-details/user-details.component.ts b/src/app/pages/users/user-details/user-details.component.ts
new file mode 100644
index 0000000..8841959
--- /dev/null
+++ b/src/app/pages/users/user-details/user-details.component.ts
@@ -0,0 +1,45 @@
+import { Component, OnInit } from '@angular/core';
+import {ActivatedRoute, Params} from '@angular/router';
+import {User, Phone} from 'cic-client-meta';
+import {first} from 'rxjs/operators';
+import {User as UserModel} from '../../../_models';
+import {UserService} from '../../../_services';
+import {parse} from '../../../../assets/js/parse-vcard';
+
+@Component({
+ selector: 'app-user-details',
+ templateUrl: './user-details.component.html',
+ styleUrls: ['./user-details.component.scss']
+})
+export class UserDetailsComponent implements OnInit {
+ user: UserModel;
+ vcard: any;
+ parsedVcard: any;
+
+ constructor(
+ private route: ActivatedRoute,
+ private userService: UserService
+ ) {
+ this.route.paramMap.subscribe(
+ (params: Params) => {
+ this.getUser(params.get('id')).then();
+ // console.log(Phone.toKey(25412341234));
+ // console.log(User.toKey('0x9D7c284907acD0AA69147A9bd4a0cE2dD21a573D'));
+ }
+ );
+ }
+
+ ngOnInit(): void {
+ }
+
+ async getUser(address: string): Promise {
+ this.userService.getUser(await User.toKey(address)).pipe(first()).subscribe(res => {
+ console.log(res);
+ this.user = res;
+ this.vcard = atob(res.vcard);
+ this.parsedVcard = parse(this.vcard);
+ }, error => {
+ console.log(error);
+ });
+ }
+}
diff --git a/src/app/pages/users/users-routing.module.ts b/src/app/pages/users/users-routing.module.ts
new file mode 100644
index 0000000..7bb7f67
--- /dev/null
+++ b/src/app/pages/users/users-routing.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { UsersComponent } from './users.component';
+import {UserDetailsComponent} from './user-details/user-details.component';
+
+const routes: Routes = [
+ { path: '', component: UsersComponent },
+ { path: ':id', component: UserDetailsComponent }
+];
+
+@NgModule({
+ imports: [RouterModule.forChild(routes)],
+ exports: [RouterModule]
+})
+export class UsersRoutingModule { }
diff --git a/src/app/pages/users/users.component.html b/src/app/pages/users/users.component.html
new file mode 100644
index 0000000..fbd9200
--- /dev/null
+++ b/src/app/pages/users/users.component.html
@@ -0,0 +1,25 @@
+
+
+
diff --git a/src/app/pages/users/users.component.scss b/src/app/pages/users/users.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/users/users.component.spec.ts b/src/app/pages/users/users.component.spec.ts
new file mode 100644
index 0000000..2d6432f
--- /dev/null
+++ b/src/app/pages/users/users.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UsersComponent } from './users.component';
+
+describe('UsersComponent', () => {
+ let component: UsersComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ UsersComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(UsersComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/pages/users/users.component.ts b/src/app/pages/users/users.component.ts
new file mode 100644
index 0000000..c2b342b
--- /dev/null
+++ b/src/app/pages/users/users.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-users',
+ templateUrl: './users.component.html',
+ styleUrls: ['./users.component.scss']
+})
+export class UsersComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit(): void {
+ }
+
+}
diff --git a/src/app/pages/users/users.module.ts b/src/app/pages/users/users.module.ts
new file mode 100644
index 0000000..003fa13
--- /dev/null
+++ b/src/app/pages/users/users.module.ts
@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { UsersRoutingModule } from './users-routing.module';
+import { UsersComponent } from './users.component';
+import { UserDetailsComponent } from './user-details/user-details.component';
+import {SharedModule} from '../../shared/shared.module';
+
+
+@NgModule({
+ declarations: [UsersComponent, UserDetailsComponent],
+ imports: [
+ CommonModule,
+ UsersRoutingModule,
+ SharedModule
+ ]
+})
+export class UsersModule { }