Merge pull request #166 from numbersprotocol/feature-proof-details

Rebuild Proof Details Page with Angular-Material Library

src/app/app-routing.module.ts

@@ -33,14 +33,6 @@ const routes: Routes = [{
   path: 'about',
   loadChildren: () => import('./pages/about/about.module').then(m => m.AboutPageModule),
   canActivate: [AuthGuardService],
-}, {
-  path: 'proof',
-  loadChildren: () => import('./pages/proof/proof.module').then(m => m.ProofPageModule),
-  canActivate: [AuthGuardService],
-}, {
-  path: 'information',
-  loadChildren: () => import('./pages/information/information.module').then(m => m.InformationPageModule),
-  canActivate: [AuthGuardService],
 }, {
   path: 'publishers',
   redirectTo: 'settings',

src/app/app.component.ts

@@ -7,7 +7,7 @@ import { map } from 'rxjs/operators';
 import { CameraService } from './services/camera/camera.service';
 import { CollectorService } from './services/collector/collector.service';
 import { CapacitorProvider } from './services/collector/information/capacitor-provider/capacitor-provider';
-import { DefaultSignatureProvider } from './services/collector/signature/default-provider/default-provider';
+import { WebCryptoApiProvider } from './services/collector/signature/web-crypto-api-provider/web-crypto-api-provider';
 import { CaptionRepository } from './services/data/caption/caption-repository.service';
 import { InformationRepository } from './services/data/information/information-repository.service';
 import { ProofRepository } from './services/data/proof/proof-repository.service';
@@ -68,12 +68,12 @@ export class AppComponent {
   }
 
   initializeCollector() {
-    DefaultSignatureProvider.initialize$().pipe(untilDestroyed(this)).subscribe();
+    WebCryptoApiProvider.initialize$().pipe(untilDestroyed(this)).subscribe();
     this.collectorService.addInformationProvider(
       new CapacitorProvider(this.informationRepository, this.translocoService)
     );
     this.collectorService.addSignatureProvider(
-      new DefaultSignatureProvider(this.signatureRepository, this.serializationService)
+      new WebCryptoApiProvider(this.signatureRepository, this.serializationService)
     );
   }
 

src/app/pages/login/login.page.scss

@@ -1,10 +1,12 @@
 ion-title {
   color: #333;
 }
+
 ion-grid {
   height: 100%;
   background: #fff !important;
 }
+
 ion-button {
   &[disabled] {
     opacity: 1;
@@ -18,9 +20,11 @@ ion-button {
   --height: 50px !important;
   --background: #564dfc !important;
 }
+
 ion-title {
   width: 100%;
 }
+
 ion-input {
   width: calc(100vw - var(--ion-padding, 23px));
   text-align: left;
@@ -29,18 +33,22 @@ ion-input {
   margin-bottom: 10px !important;
   color: #000;
 }
+
 .input_msg {
   width: 100%;
   height: 40px;
   color: red !important;
   text-align: center;
 }
+
 .input_R {
   text-align: right;
 }
+
 .input_C {
   text-align: center;
 }
+
 .input {
   width: calc(100vw - var(--ion-padding, 23px)) !important;
   border-color: #564dfc !important;
@@ -50,9 +58,11 @@ ion-input {
   padding-left: 10px !important;
   padding-right: 10px !important;
 }
+
 .img {
   --height: 127.15px !important;
 }
+
 .logo {
   width: 100%;
   display: flex;
@@ -63,18 +73,21 @@ ion-input {
   justify-content: center;
   align-items: center;
 }
+
 .inputs {
   width: 100% !important;
   display: flex;
   flex: 1;
   height: 35vh;
 }
+
 .buttons {
   width: 100% !important;
   display: flex;
   flex: 1;
   bottom: 0px;
 }
+
 ion-content {
   display: flex;
   flex: 1;

src/app/pages/profile/profile.page.scss

@@ -7,7 +7,3 @@ mat-toolbar {
   width: 50%;
   margin: 10vw auto;
 }
-
-.expand {
-  width: 100%;
-}

src/app/pages/profile/profile.page.ts

@@ -8,7 +8,7 @@ import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { defer } from 'rxjs';
 import { catchError, concatMapTo } from 'rxjs/operators';
 import { BlockingActionService } from '../../services/blocking-action/blocking-action.service';
-import { DefaultSignatureProvider } from '../../services/collector/signature/default-provider/default-provider';
+import { WebCryptoApiProvider } from '../../services/collector/signature/web-crypto-api-provider/web-crypto-api-provider';
 import { NumbersStorageApi } from '../../services/publisher/numbers-storage/numbers-storage-api.service';
 
 const { Clipboard } = Plugins;
@@ -23,8 +23,8 @@ export class ProfilePage {
 
   readonly userName$ = this.numbersStorageApi.getUserName$();
   readonly email$ = this.numbersStorageApi.getEmail$();
-  readonly publicKey$ = DefaultSignatureProvider.getPublicKey$();
-  readonly privateKey$ = DefaultSignatureProvider.getPrivateKey$();
+  readonly publicKey$ = WebCryptoApiProvider.getPublicKey$();
+  readonly privateKey$ = WebCryptoApiProvider.getPrivateKey$();
 
   constructor(
     private readonly router: Router,

src/app/pages/signup/signup.page.scss

@@ -1,10 +1,12 @@
 ion-title {
   color: #333;
 }
+
 ion-grid {
   height: 100%;
   background: #fff !important;
 }
+
 ion-button {
   &[disabled] {
     opacity: 1;
@@ -22,6 +24,7 @@ ion-button {
 ion-title {
   width: 100%;
 }
+
 ion-input {
   color: #000;
   width: calc(100vw - var(--ion-padding, 23px));
@@ -32,6 +35,7 @@ ion-input {
   border-width: 10px !important;
   border-bottom: 10px !important;
 }
+
 .native-input.sc-ion-input-ios {
   text-align: left;
   border-color: gray !important;
@@ -40,17 +44,21 @@ ion-input {
   border-width: 10px !important;
   border-bottom: 10px !important;
 }
+
 .input_msg {
   width: 100%;
   height: 80px;
   text-align: center;
 }
+
 .input_R {
   text-align: right;
 }
+
 .input_C {
   text-align: center;
 }
+
 .input {
   width: calc(100vw - var(--ion-padding, 23px)) !important;
   border-color: #564dfc !important;
@@ -60,9 +68,11 @@ ion-input {
   padding-left: 10px !important;
   padding-right: 10px !important;
 }
+
 .img {
   --height: 127.15px !important;
 }
+
 .logo {
   width: 100%;
   display: flex;
@@ -73,18 +83,21 @@ ion-input {
   justify-content: center;
   align-items: center;
 }
+
 .inputs {
   width: 100% !important;
   display: flex;
   flex: 1;
   height: 35vh;
 }
+
 .buttons {
   width: 100% !important;
   display: flex;
   flex: 1;
   bottom: 0px;
 }
+
 ion-content {
   display: flex;
   flex: 1;

src/app/pages/information/information.page.html → src/app/pages/storage/proof/information/information.page.html

@@ -1,7 +1,7 @@
 <ion-header *transloco="let t">
   <ion-toolbar>
     <ion-buttons slot="start">
-      <ion-button [routerLink]="['/proof', {hash: (hash$ | async)}]" routerDirection="back">
+      <ion-button routerLink="../../../" routerDirection="back">
         <ion-icon slot="icon-only" name="arrow-back"></ion-icon>
       </ion-button>
     </ion-buttons>

src/app/pages/proof/proof-routing.module.ts → src/app/pages/storage/proof/proof-routing.module.ts

@@ -1,10 +1,15 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { AuthGuardService } from 'src/app/services/auth/auth-guard.service';
 import { ProofPage } from './proof.page';
 
 const routes: Routes = [{
   path: '',
   component: ProofPage
+}, {
+  path: 'information',
+  loadChildren: () => import('./information/information.module').then(m => m.InformationPageModule),
+  canActivate: [AuthGuardService],
 }];
 
 @NgModule({