Make credential dates editable

- Adds a lookup to verify the FreeID credential. Does not validate signature yet.
block-core · Oct 30, 2024 · 304fa9b · 304fa9b
1 parent c250d3a
commit 304fa9b
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 29 deletions.
diff --git a/app/src/app/apps/app/issuer/issuer.component.html b/app/src/app/apps/app/issuer/issuer.component.html
@@ -22,28 +22,44 @@ <h1>Choose Credential to issue</h1>
             <!-- @if (signed) { You have signed the Voluntaryist Covenant } @else { Issue Credential } -->
           </mat-card-title>
         </mat-card-header>
-        <mat-card-content>
-          <mat-form-field subscriptSizing="dynamic" class="did-input">
+        <mat-card-content class="credential-form">
+          <mat-form-field class="did-input">
+            <mat-label>Decentralized Identifier (DID)</mat-label>
             <input matInput placeholder="DID" [(ngModel)]="did" />
           </mat-form-field>
 
-          <mat-form-field subscriptSizing="dynamic" class="did-input">
-            <input matInput placeholder="Identifier" [(ngModel)]="identifier" />
+          <mat-form-field class="did-input">
+            <mat-label>Identifier (ISSUER-YEAR-IDENTIFIER-SEQUENCE)</mat-label>
+            <input matInput placeholder="Eg. LFID-07-0001-01" [(ngModel)]="identifier" />
+          </mat-form-field>
+
+          <mat-form-field class="did-input">
+            <mat-label>Date of issue</mat-label>
+            <input matInput [(ngModel)]="issueDate" />
+          </mat-form-field>
+
+          <mat-form-field class="did-input">
+            <mat-label>Date of expiry</mat-label>
+            <input matInput [(ngModel)]="expiryDate" />
           </mat-form-field>
 
-          <mat-form-field subscriptSizing="dynamic" class="did-input">
+          <mat-form-field class="did-input">
+            <mat-label>Name</mat-label>
             <input matInput placeholder="Name" [(ngModel)]="name" />
           </mat-form-field>
 
-          <mat-form-field subscriptSizing="dynamic" class="did-input">
+          <mat-form-field class="did-input">
+            <mat-label>Birthdate</mat-label>
             <input matInput placeholder="Birthdate" [(ngModel)]="birthdate" />
           </mat-form-field>
 
-          <mat-form-field subscriptSizing="dynamic" class="did-input">
-            <input matInput placeholder="Gender" [(ngModel)]="gender" />
-          </mat-form-field>
+          <mat-radio-group class="gender-input" [(ngModel)]="gender">
+            <mat-radio-button value="M">Male</mat-radio-button>
+            <mat-radio-button value="F">Female</mat-radio-button>
+          </mat-radio-group>
 
-          <mat-form-field subscriptSizing="dynamic" class="did-input">
+          <mat-form-field class="did-input">
+            <mat-label>Photograph (Base64)</mat-label>
             <input matInput placeholder="Photograph" [(ngModel)]="photograph" />
           </mat-form-field>
 
@@ -62,7 +78,9 @@ <h1>Choose Credential to issue</h1>
           }
         </mat-card-content>
         <mat-card-actions>
-          <button mat-flat-button (click)="sign()" [disabled]="loading">Sign Credential</button>
+          <button mat-flat-button (click)="sign()" [disabled]="loading">
+            Sign and Save Credential (Public Accessible)
+          </button>
           <!-- <button mat-flat-button (click)="sign()" [disabled]="loading || signed">
             @if (signed) { Sign Credential } @else { Sign Credential }</button
           >&nbsp; -->
@@ -71,11 +89,11 @@ <h1>Choose Credential to issue</h1>
       </mat-card>
     </div>
   </mat-tab>
-  <!-- <mat-tab>
-    <ng-template mat-tab-label> <mat-icon class="example-tab-icon">person_search</mat-icon>&nbsp; Search </ng-template>
+  <mat-tab>
+    <ng-template mat-tab-label> <mat-icon class="example-tab-icon">person_search</mat-icon>&nbsp; Validate</ng-template>
 
     <div class="padding">
-      <h2>Check signing status</h2>
+      <h2>Check verification status</h2>
 
       <mat-form-field subscriptSizing="dynamic" class="did-input">
         <input matInput placeholder="DID..." [(ngModel)]="did" (keydown.enter)="lookup()" />
@@ -98,14 +116,28 @@ <h2>Check signing status</h2>
               <mat-icon class="signature-icon" inline="true">gpp_bad</mat-icon>
               }
             </p>
-            <p>The identity with the following DID has @if (!lookupSigned) { not } signed the convenant:</p>
+            <p>The identity with the following DID has @if (!lookupSigned) { no } valid FreeID:</p>
             <p class="ellipsis">
               {{ did }}
             </p>
+
+            @if (lookupCredential) {
+            <h2>{{ lookupCredential.name }}</h2>
+            <p>
+              {{ lookupCredential.identifier }}
+            </p>
+            <p>
+              {{ lookupCredential.dateOfBirth }}
+            </p>
+            <p>@if (lookupCredential.gender == 'M') { Male } @else { Female }</p>
+            <p>
+              <img src="data:image/png;base64,{{ lookupCredential.photo }}" />
+            </p>
+            }
           </mat-card-content>
         </mat-card>
       </p>
       }
     </div>
-  </mat-tab> -->
+  </mat-tab>
 </mat-tab-group>
diff --git a/app/src/app/apps/app/issuer/issuer.component.scss b/app/src/app/apps/app/issuer/issuer.component.scss
@@ -1,7 +1,16 @@
 .did-input {
-  width: calc(100% - 40px);
+  width: calc(100%);
 }
 
 .signature-icon {
   font-size: 4em;
 }
+
+.gender-input {
+  margin-bottom: 1em;
+  display: inline-block;
+}
+
+.credential-form {
+  padding-top: 1em;
+}
diff --git a/app/src/app/apps/app/issuer/issuer.component.ts b/app/src/app/apps/app/issuer/issuer.component.ts
@@ -13,6 +13,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { UtilityService } from '../../../utility.service';
+import { MatRadioModule } from '@angular/material/radio';
 
 @Component({
   selector: 'app-issuer',
@@ -27,6 +28,7 @@ import { UtilityService } from '../../../utility.service';
     MatIconModule,
     MatButtonModule,
     MatTabsModule,
+    MatRadioModule,
   ],
   templateUrl: './issuer.component.html',
   styleUrl: './issuer.component.scss',
@@ -54,17 +56,30 @@ export class IssuerComponent {
 
   name = '';
 
-  gender = '';
+  gender = 'M';
 
   birthdate = '';
 
   photograph = '';
 
   credential = '';
 
+  issueDate = '';
+
+  expiryDate = '';
+
   constructor() {
     this.layout.marginOff();
 
+    const issueDate = new Date();
+    issueDate.setHours(24, 59, 59, 0);
+
+    const expirationDate = new Date(issueDate);
+    expirationDate.setFullYear(expirationDate.getFullYear() + 5);
+
+    this.issueDate = issueDate.toISOString();
+    this.expiryDate = expirationDate.toISOString();
+
     effect(() => {
       if (this.app.initialized()) {
         this.load();
@@ -96,6 +111,7 @@ export class IssuerComponent {
 
     const expirationDate = new Date();
     expirationDate.setFullYear(expirationDate.getFullYear() + 5);
+    expirationDate.setHours(24, 0, 0, 0);
 
     const vc = await VerifiableCredential.create({
       type: this.vcType,
@@ -127,21 +143,25 @@ export class IssuerComponent {
 
     this.credential = vc_jwt;
 
-    // const { record } = await this.identity.web5.dwn.records.create({
-    //   data: vc_jwt,
-    //   message: {
-    //     schema: this.vcType,
-    //     dataFormat: credential.format,
-    //     published: true,
-    //   },
-    // });
+    const { record } = await this.identity.web5.dwn.records.create({
+      data: vc_jwt,
+      message: {
+        tags: {
+          type: 'FreeID',
+        },
+        schema: this.vcType,
+        dataFormat: credential.format,
+        published: true,
+      },
+    });
 
-    // console.log('VC RECORD:', record);
+    console.log('VC RECORD:', record);
 
-    // const { status } = await record!.send(this.identity.did);
-    // console.log('Record sent:', status, record);
+    const { status } = await record!.send(this.identity.did);
+    console.log('Record sent:', status, record);
 
     this.signed = true;
+    this.loading = false;
   }
 
   async lookup() {
@@ -151,6 +171,9 @@ export class IssuerComponent {
       from: this.did,
       message: {
         filter: {
+          tags: {
+            type: 'FreeID',
+          },
           schema: this.vcType,
           dataFormat: credential.format,
         },
@@ -162,11 +185,21 @@ export class IssuerComponent {
     // TODO: Here we should actually validate the VC.
     if (records!.length > 0) {
       this.lookupSigned = true;
+
+      const jwt_vc = await records![0].data.text();
+      const vc = VerifiableCredential.parseJwt({ vcJwt: jwt_vc });
+
+      this.vc = vc;
+      this.lookupCredential = vc.vcDataModel.credentialSubject;
+      console.log('VC:', vc);
     } else {
       this.lookupSigned = false;
     }
   }
 
+  vc: VerifiableCredential | null = null;
+  lookupCredential: any = null;
+
   async withdraw() {
     var { records: vcRecords } = await this.identity.web5.dwn.records.query({
       message: {