[reclaim-ui] 173/459: various fixed and improvements

[gnunet]

This is an automated email from the git hooks/post-receive script.

martin-schanzenbach pushed a commit to branch master
in repository reclaim-ui.

commit 48c2294156f535956f5be8f7d260000271cb7a61
Author: Schanzenbach, Martin <mschanzenbach@posteo.de>
AuthorDate: Fri Jan 17 17:49:46 2020 +0100

    various fixed and improvements
---
 .../edit-attestations.component.html               | 12 ++-
 .../edit-attestations.component.ts                 | 33 +++++++-
 src/app/edit-identity/edit-identity.component.html | 89 +++++++---------------
 src/app/edit-identity/edit-identity.component.ts   | 53 ++++++++++++-
 4 files changed, 110 insertions(+), 77 deletions(-)

diff --git a/src/app/edit-attestations/edit-attestations.component.html 
b/src/app/edit-attestations/edit-attestations.component.html
index 6a8611f..7c739ee 100644
--- a/src/app/edit-attestations/edit-attestations.component.html
+++ b/src/app/edit-attestations/edit-attestations.component.html
@@ -7,7 +7,6 @@
   </div>
   <!-- Attestation management -->
   <div class="card-body">
-    <h6 class="card-subtitle mb-2">Attestations:</h6>
     <!-- Requested attestation -->
     <table class="table pb-1" style="">
       <thead>
@@ -15,12 +14,12 @@
           <th>Attestation Name</th>
           <th>Attestation Type</th>
           <th>Attestation Value</th>
-          <th>Isser</th>
+          <th>Issuer</th>
           <th>Attestation ID</th>
         </tr>
       </thead>
       <tbody>
-        <tr [class.alert-danger]="newAttestation.name === attestation.name" 
[class.alert-warning]="!isAttestationValid(attestation.id)" *ngFor="let 
attestation of attestations">
+        <tr [class.alert-danger]="newAttestation.name === attestation.name" 
[class.alert-warning]="!isAttestationValid(attestation)" *ngFor="let 
attestation of attestations">
           <td><div style="min-width: 15em">{{attestation.name}}</div></td>
           <td>
             <div>{{attestation.type}}</div>
@@ -30,7 +29,7 @@
           </td>
           <td>
             <div style="min-width: 15em">
-              {{attestation_val[attestation.id]['iss']}}
+              TODO <!--{{attestation_val[attestation.id]['iss']}}-->
             </div>
           </td>
           <td><div style="min-width: 15em">{{attestation.id}}</div></td>
@@ -40,9 +39,8 @@
             </button>
           </td>
           <td>
-              <div *ngIf= "isAttestationValid(attestation.id)"> Valid <span 
class="fa fa-check"></span> </div>
-              <div *ngIf= "!isAttestationValid(attestation.id)"> <span 
style="color:#f00"> Expired </span> <span class="fa fa-times"></span> </div>
-            </td>
+            <div *ngIf= "!isAttestationValid(attestation)"> <span 
style="color:#f00"> Expired </span> <span class="fa fa-times"></span> </div>
+          </td>
         </tr>
         <tr [class.alert-danger]="isAttestInConflict(newAttestation)">
           <td>
diff --git a/src/app/edit-attestations/edit-attestations.component.ts 
b/src/app/edit-attestations/edit-attestations.component.ts
index 77e23fd..a05b14a 100644
--- a/src/app/edit-attestations/edit-attestations.component.ts
+++ b/src/app/edit-attestations/edit-attestations.component.ts
@@ -17,6 +17,7 @@ export class EditAttestationsComponent implements OnInit {
   identity: Identity;
   attestations: Attestation[];
   newAttestation: Attestation;
+  attestationValues: {}; //FIXME fix bad API design
 
   constructor(private reclaimService: ReclaimService,
               private identityService: IdentityService,
@@ -26,6 +27,8 @@ export class EditAttestationsComponent implements OnInit {
   ngOnInit() {
     this.newAttestation = new Attestation('', '', '', '');
     this.identity = new Identity('','');
+    this.attestationValues = {};
+    this.attestations = [];
     this.activatedRoute.params.subscribe(p => {
       if (p['id'] === undefined) {
         return;
@@ -45,10 +48,16 @@ export class EditAttestationsComponent implements OnInit {
 
   private updateAttestation() {
     this.reclaimService.getAttestation(this.identity).subscribe(attestation => 
{
-      this.attestations = [];
-      let i;
-      for (i = 0; i < attestation.length; i++) {
-        this.attestations.push(attestation[i]);
+      this.attestations = attestation;
+      for (let i = 0; i < this.attestations.length; i++) {
+        this.reclaimService.parseAttest(this.attestations[i]).subscribe(values 
=>{
+          this.attestationValues[this.attestations[i].id] = values;
+        },
+        err => {
+          //this.errorInfos.push("Error parsing attestation ``" + 
attestation.name + "''");
+          console.log(err);
+        });
+
       }
     },
     err => {
@@ -179,4 +188,20 @@ export class EditAttestationsComponent implements OnInit {
     return true;
   }
 
+
+
+  isAttestationValid(attestation: Attestation) {
+    //FIXME JWT specific
+    //FIXME the expiration of the JWT should be a property of the attestation
+    //Not part of the values
+    const now = Date.now().valueOf() / 1000;
+    if (this.attestationValues[attestation.id] === undefined) {
+      return false;
+    }
+    if (this.attestationValues[attestation.id]['exp'] === 'undefined') {
+      return false;
+    }
+    return this.attestationValues[attestation.id]['exp'] > now;
+  }
+
 }
diff --git a/src/app/edit-identity/edit-identity.component.html 
b/src/app/edit-identity/edit-identity.component.html
index caf82ef..309d685 100644
--- a/src/app/edit-identity/edit-identity.component.html
+++ b/src/app/edit-identity/edit-identity.component.html
@@ -27,7 +27,7 @@
                 <option *ngFor="let claim of 
objectKeys(attestation_val[missing.ref_id])" value={{claim}}>
                   {{claim}}
                 </option>
-                <option 
value="">{{attestation_val[missing.ref_id]['iss']}}</option>
+                <option 
value="">{{attestationValues[missing.ref_id]['iss']}}</option>
               </select>
             </td>
             <td>
@@ -74,12 +74,16 @@
           <tr [class.openid]="inOpenIdFlow()" 
[class.text-primary]="isRequested(attribute)" 
[class.alert-danger]="newAttribute.name === attribute.name" 
[class.text-secondary]="isAttestation(attribute)" *ngFor="let attribute of 
attributes">
             <td><div style="min-width: 15em">{{ attribute.name }}</div></td>
             <td>
-              <input placeholder="Value" [(ngModel)]="attribute.value">
+              <input *ngIf="!isAttestation(attribute)" placeholder="Value" 
[(ngModel)]="attribute.value">
+              <span *ngIf="isAttestation(attribute)" >{{ attribute.value }} 
issued by {{ getIssuer(attribute) }} as ``{{ getReferencedName(attribute) 
}}''</span>
             </td>
             <td>
               <button class="btn btn-primary" 
(click)="deleteAttribute(attribute)" *ngIf="!isAttestation(attribute)">
                 <span class="fa fa-trash"></span>
               </button>
+              <button class="btn btn-primary"  
(click)="deleteReferenceByAttribute(attribute)" 
*ngIf="isAttestation(attribute)">
+                <span class="fa fa-trash"></span>
+              </button>
             </td>
           </tr>
           <tr [class.alert-danger]="isInConflict(newAttribute)">
@@ -95,78 +99,27 @@
               </button>
             </td>
           </tr>
-        </tbody>
-      </table>
-    </div>
-    <!-- Attribute creation warning -->
-    <div *ngIf="!attributeNameValid(newAttribute) || 
!attributeValueValid(newAttribute)" class="alert alert-primary 
alert-dismissible fade show" role="alert">
-      <span class="fa fa-warning"></span> Note:
-      <ul>
-        <li>Only use alphanumeric attribute names.</li>
-        <li>You cannot define the same name twice.</li>
-        <li>Attribute values may not be empty!</li>
-      </ul>
-    </div>
-    <div>
-      <button class="btn btn-primary" (click)="toggleShowRef()" 
[style.float]="'right'">
-        <span *ngIf="showReferences"> Hide</span>
-        <span *ngIf="!showReferences"> Show</span> 
-        reference management
-      </button>
-    </div>
-    <div style="margin-top: 1.5em;" *ngIf="showReferences">   
-      <h6 class="card-subtitle mb-2">References:</h6>
-      <!-- Requested references -->
-      <table class="table pb-1" style="">
-        <thead *ngIf="!isReferenceMissing()">
-          <tr>
-              <th>Attribute Name</th>
-              <th>Attribute Value</th>
-              <th>Attestation ID</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr [class.openid]="inOpenIdFlow()" 
[class.text-primary]="isRefRequested(reference)" 
[class.text-secondary]="isoptRefRequested(reference)" 
[class.alert-danger]="newReference.name === reference.name" 
[class.alert-warning]="!isAttestationValid(reference.ref_id)" *ngFor="let 
reference of references">
-            <td><div style="min-width: 15em">{{reference.name}}</div></td>
-            <td>
-              <input placeholder="Claim Name Attestation" 
[(ngModel)]="reference.ref_value">
-            </td>
-            <td>
-              <input placeholder="Attestation ID" 
[(ngModel)]="reference.ref_id">
-            </td>
-            <td>
-              <button class="btn btn-primary"  
(click)="deleteReference(reference)">
-                <span class="fa fa-trash"></span>
-              </button>
-            </td>
-            <td>
-              <div *ngIf= "isAttestationValid(reference.ref_id)"> Valid 
Reference <span class="fa fa-check"></span> </div>
-              <div *ngIf= "!isAttestationValid(reference.ref_id)"> <span 
style="color:#f00"> Expired Attestation </span><span class="fa 
fa-times"></span> </div>
-            </td>
-
-          </tr>
           <tr [class.alert-danger]="isRefInConflict(newReference)">
             <td>
               <input [class.text-danger]="!referenceNameValid(newReference)" 
placeholder="Reference" [(ngModel)]="newReference.name">
             </td>
             <td>
+              <select (change)="newReference.ref_id=$event.target.value; ">
+                <option value="">Attestation</option>
+                <option *ngFor="let attest of attestations" 
value={{attest.id}}>
+                {{attest.name}}
+                </option>
+              </select>
+
               <select *ngIf="newReference.ref_id !== ''" 
(change)="newReference.ref_value=$event.target.value">
-                <option value="">Select a Claim</option>
-                <option *ngFor="let claim of 
objectKeys(attestation_val[newReference.ref_id])" value={{claim}}>
+                <option value="">Source</option>
+                <option *ngFor="let claim of 
attestationValuesForReference(newReference)" value={{claim}}>
                   {{claim}}
                 </option>
-                <option 
value="">{{attestation_val[newReference.ref_id]['iss']}}</option>
+                <option 
value="">{{attestationValues[newReference.ref_id]['iss']}}</option>
               </select>
 
             </td>
-            <td>
-              <select (change)="newReference.ref_id=$event.target.value; ">
-              <option value="">Select an Attestation</option>
-              <option *ngFor="let attest of attestations" value={{attest.id}}>
-                {{attest.name}}
-              </option>
-            </select>
-            </td>
 
             <td>
               <button [disabled]="!canAddReference(newReference)" class="btn 
btn-primary"  (click)="addReference(newReference)">
@@ -174,9 +127,19 @@
               </button>
             </td>
           </tr>
+
         </tbody>
       </table>
     </div>
+    <!-- Attribute creation warning -->
+    <div *ngIf="!attributeNameValid(newAttribute) || 
!attributeValueValid(newAttribute)" class="alert alert-primary 
alert-dismissible fade show" role="alert">
+      <span class="fa fa-warning"></span> Note:
+      <ul>
+        <li>Only use alphanumeric attribute names.</li>
+        <li>You cannot define the same name twice.</li>
+        <li>Attribute values may not be empty!</li>
+      </ul>
+    </div>
     <!-- optional attributes information -->
     <div *ngIf="optionalReferences.length !== 0" class="text-primary">
       <span class="fa fa-openid"></span> Optionally requested is also:
diff --git a/src/app/edit-identity/edit-identity.component.ts 
b/src/app/edit-identity/edit-identity.component.ts
index 37f697d..0828128 100644
--- a/src/app/edit-identity/edit-identity.component.ts
+++ b/src/app/edit-identity/edit-identity.component.ts
@@ -382,8 +382,7 @@ export class EditIdentityComponent implements OnInit {
       this.attestations = attestations;
       //FIXME this is not how this API should work
       //The API should already return attributes which can be used...
-      let i;
-      for (i = 0; i < this.attestations.length; i++) {
+      for (let i = 0; i < this.attestations.length; i++) {
         this.reclaimService.parseAttest(this.attestations[i]).subscribe(values 
=>{
           this.attestationValues[this.attestations[i].id]=values;
         },
@@ -585,14 +584,25 @@ export class EditIdentityComponent implements OnInit {
   });
   }*/
 
+  isReferenceValid(reference: Reference) {
+    for (let i = 0; i < this.attestations.length; i++) {
+      if (reference.ref_id === this.attestations[i].id) {
+        return this.isAttestationValid(this.attestations[i]);
+      }
+    }
+    return false;
+  }
 
   isAttestationValid(attestation: Attestation) {
     //FIXME JWT specific
     //FIXME the expiration of the JWT should be a property of the attestation
     //Not part of the values
     const now = Date.now().valueOf() / 1000;
+    if (this.attestationValues[attestation.id] === undefined) {
+      return false;
+    }
     if (this.attestationValues[attestation.id]['exp'] === 'undefined') {
-      return true;
+      return false;
     }
     return this.attestationValues[attestation.id]['exp'] > now;
   }
@@ -613,4 +623,41 @@ export class EditIdentityComponent implements OnInit {
     return false;
   }
 
+  attestationValuesForReference(reference: Reference) {
+    return Object.keys(this.attestationValues[reference.ref_id]);
+  }
+
+  //FIXME JWT specific, this should be provided as part of API
+  private findReferenceForAttribute(attribute: Attribute) {
+    if (this.references === undefined) {
+      return null;
+    }
+    for (let i = 0; i < this.references.length; i++) {
+      if (this.references[i].ref_id === attribute.id) {
+        return this.references[i];
+      }
+    }
+    return null;
+  }
+  getIssuer(attribute: Attribute) {
+    let ref = this.findReferenceForAttribute(attribute);
+    if (null != ref && (this.attestationValues[ref.ref_id] !== undefined)) {
+      return this.attestationValues[ref.ref_id]['iss'];
+    }
+    return "UNKNOWN";
+  }
+  getReferencedName(attribute: Attribute) {
+    let ref = this.findReferenceForAttribute(attribute);
+    if (null != ref) {
+      return ref.ref_value;
+    }
+    return "UNKNOWN";
+  }
+  deleteReferenceByAttribute(attribute: Attribute) {
+    let ref = this.findReferenceForAttribute(attribute);
+    if (null != ref) {
+      this.deleteReference(ref);
+    }
+  }
+
 }

-- 
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.