[reclaim-ui] 283/459: fix claim display; better style

[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 3ab52a2109f113e29ae9da619256310c45d23441
Author: Martin Schanzenbach <mschanzenbach@posteo.de>
AuthorDate: Fri Aug 7 19:38:22 2020 +0200

    fix claim display; better style
---
 src/app/edit-identity/edit-identity.component.ts   |  9 ++++-
 src/app/identity-list/identity-list.component.html | 25 ++++++------
 src/app/identity-list/identity-list.component.ts   | 45 ++++++++++++++++++++++
 3 files changed, 67 insertions(+), 12 deletions(-)

diff --git a/src/app/edit-identity/edit-identity.component.ts 
b/src/app/edit-identity/edit-identity.component.ts
index fb0d575..4ff758b 100644
--- a/src/app/edit-identity/edit-identity.component.ts
+++ b/src/app/edit-identity/edit-identity.component.ts
@@ -166,7 +166,14 @@ export class EditIdentityComponent implements OnInit {
   }
 
   updateMissingAttributes() {
-    var claims = this.oidcService.getClaimNamesForRequest();
+    /**
+     * The original set of claim names here consists of all possible
+     * standard claim names and all currently REQUESTED non-standard
+     * claims (if any)
+     */
+    var sClaims = this.oidcService.getStandardClaimNames();
+    var nsClaims = this.oidcService.getRequestedClaimNames();
+    var claims = [...sClaims, ...nsClaims];
     for (let attr of this.attributes) {
       const j =
         claims.indexOf(attr.name);
diff --git a/src/app/identity-list/identity-list.component.html 
b/src/app/identity-list/identity-list.component.html
index 23edc50..426f173 100644
--- a/src/app/identity-list/identity-list.component.html
+++ b/src/app/identity-list/identity-list.component.html
@@ -95,17 +95,17 @@
     </div>
 
     <div class="fa-3x mt-2" style="text-align:center">
-      <span class="fa fa-user-circle"></span><i> {{identity.name}}</i>
+      <img style="border-radius: 50%; width: 1em" 
[src]="getIdentityProfilePicture(identity)" 
*ngIf="identityHasProfilePicture(identity)"><i class="fa fa-user-circle" 
*ngIf="!identityHasProfilePicture(identity)"></i><i> {{identity.name}}</i>
     </div>
 
-    <div class="card-body" *ngIf="openIdentity == identity">
+    <div class="card-body">
       <!-- Attribute table -->
       <div>
         <table class="table pb-1">
           <tbody>
             <tr [class.openid]="inOpenIdFlow()" 
[class.text-primary]="isClaimRequested(identity, attribute)"
                [class.text-secondary]="!isClaimRequested(identity, attribute)"
-               *ngFor="let attribute of attributes[identity.pubkey]">
+               *ngFor="let attribute of getIdentityAttributes(identity)">
               <td>
                 <div style="min-width: 15em">
                   <span *ngIf="isClaimRequested(identity, attribute)" 
class="fa fa-openid mr-1"></span><b>{{getAttributeDescription(attribute)}}</b>
@@ -116,6 +116,17 @@
                 <div *ngIf="attribute.value.length > 20" style="min-width: 
15em">{{attribute.value.substring(0, 15)}}<span 
style="color:#eee">[...]</span></div>
               </td>
             </tr>
+            <tr *ngIf="(openIdentity != identity) && 
hasLotsOfAttributes(identity)">
+              <td>
+              <i>... and {{ attributes[identity.pubkey].length - 5 }} more 
attributes</i><br/>
+              <button class="btn btn-primary mt-3" (click)="openIdentity = 
identity">
+                <i class="fa fa-expand"></i>
+                Show all attributes
+              </button>
+              </td>
+              <td>
+              </td>
+            </tr>
           </tbody>
         </table>
       </div>
@@ -132,14 +143,6 @@
 
       </div>
     </div>
-    <div style="text-align:center" class="mb-4" (click)="openIdentity = ''" 
*ngIf="openIdentity == identity">
-      <i class="fa fa-chevron-up"></i><br/>
-      <span>Click to hide attributes</span>
-    </div>
-    <div style="text-align:center" class="mb-4 mt-4" (click)="openIdentity = 
identity" *ngIf="(openIdentity != identity) && hasAttributes(identity)">
-      <span>Click to show attributes</span><br/>
-          <i class="fa fa-chevron-down"></i>
-    </div>
     <div>
       <button *ngIf="inOpenIdFlow()" [disabled]="!isClientVerified()" 
(click)="loginIdentity(identity)" class="btn btn-primary mr-1 openid-login">
         <span *ngIf="isClientVerified()"><i class="fa fa-openid"></i> Share 
information from this identity</span>
diff --git a/src/app/identity-list/identity-list.component.ts 
b/src/app/identity-list/identity-list.component.ts
index cff5cd3..2ea6e97 100644
--- a/src/app/identity-list/identity-list.component.ts
+++ b/src/app/identity-list/identity-list.component.ts
@@ -211,9 +211,54 @@ export class IdentityListComponent implements OnInit {
 
   getScopes() { return this.oidcService.getRequestedScope(); }
 
+  getIdentityAttributes(identity: Identity): Attribute[] {
+    var res = [];
+    var i = 0;
+    if (undefined === this.attributes[identity.pubkey]) {
+      return res;
+    }
+    for (let attr of this.attributes[identity.pubkey]) {
+      res.push(attr);
+      i++;
+      if ((i >= 5) && (this.openIdentity !== identity)) {
+        return res;
+      }
+    }
+    return res;
+  }
+
+  hasLotsOfAttributes(identity: Identity) {
+    if (undefined === this.attributes[identity.pubkey]) { return false };
+    if (!this.hasAttributes(identity)) { return false; }
+    return this.attributes[identity.pubkey].length > 5;
+  }
+
+  identityHasProfilePicture(identity: Identity): boolean {
+    if (undefined === this.attributes[identity.pubkey]) { return false };
+    for (let attr of this.attributes[identity.pubkey]) {
+      if (attr.name === 'picture') {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  getIdentityProfilePicture(identity: Identity): string {
+    if (undefined === this.attributes[identity.pubkey]) { return '' };
+    for (let attr of this.attributes[identity.pubkey]) {
+      if (attr.name === 'picture') {
+        return attr.value;
+      }
+    }
+    return '';
+  }
+
   getMissingClaims(identity) {
     const arr = [];
     let i = 0;
+    if (undefined === this.missingClaims[identity.pubkey]) {
+      return arr;
+    }
     for (i = 0; i < this.missingClaims[identity.pubkey].length; i++) {
       arr.push(this.missingClaims[identity.pubkey][i].name);
     }

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