[reclaim-ui] 361/459: authorization request dialog in identity list

[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 2a49fa6f37d8c61f0cb598c25d8ef4144aee002b
Author: anna wimbauer <anna.wibauer@gmx.de>
AuthorDate: Wed Oct 28 14:40:21 2020 +0100

    authorization request dialog in identity list
---
 .../authorization-request.component.html           |   4 +-
 src/app/identity-list/identity-list.component.html | 147 ++++++++++++++-------
 src/app/identity-list/identity-list.component.ts   |  14 +-
 src/locales/de/messages.json                       |   3 +-
 src/locales/en/messages.json                       |   3 +-
 5 files changed, 116 insertions(+), 55 deletions(-)

diff --git a/src/app/authorization-request/authorization-request.component.html 
b/src/app/authorization-request/authorization-request.component.html
index f9be209..15f801d 100644
--- a/src/app/authorization-request/authorization-request.component.html
+++ b/src/app/authorization-request/authorization-request.component.html
@@ -11,7 +11,9 @@
 <div class="card" *ngIf="isClientVerified()" style="margin-left:30%; 
width:40%;">
   <div class="card-body" >
     <strong>{{ oidcService.clientName }}</strong>
-    {{getMessage("authorization_request_html@chooseId")}}
+    {{getMessage("authorization_request_html@chooseId1")}}
+    <br/>
+    {{getMessage("authorization_request_html@chooseId1")}}
     <ul>
       <li *ngFor="let attribute of 
getRequestedStandardScopesWithDescription()"><strong>{{attribute}}</strong></li>
     </ul>
diff --git a/src/app/identity-list/identity-list.component.html 
b/src/app/identity-list/identity-list.component.html
index 563ac1d..572c7d4 100644
--- a/src/app/identity-list/identity-list.component.html
+++ b/src/app/identity-list/identity-list.component.html
@@ -1,6 +1,6 @@
 <!-- GNUnet not running -->
 <oid-modal id="GnunetInfo">
-  <div class="logo"><img src="assets/reclaim_icon.png"/></div>
+  <div class="logo"><img src="assets/reclaim_icon.png" /></div>
   <hr>
   <div style="text-align: center; font-size: 18px;">
     <strong> {{ getMessage("identity_list_html@unableToConnect") }} </strong>
@@ -8,25 +8,60 @@
 </oid-modal>
 
 
+
 <!-- Buttons -->
-<div *ngIf="canSearch()"  style="margin-top: 1em; text-align: center;">
+<div *ngIf="canSearch()" style="margin-top: 1em; text-align: center;">
   <!-- Identity search -->
   <div class="form-inline" style="display: table; margin: auto;">
     <div class="search-wrapper">
-    <input class="form-control mr-sm-2" type="search" [(ngModel)]="searchTerm" 
name="searchTerm" placeholder="{{ 
getMessage('identity_list_html@searchbarPlaceholder') }}" style="border-radius: 
2em;">
+      <input class="form-control mr-sm-2" type="search" 
[(ngModel)]="searchTerm" name="searchTerm"
+        placeholder="{{ getMessage('identity_list_html@searchbarPlaceholder') 
}}" style="border-radius: 2em;">
     </div>
-    <button class="btn btn-primary" [routerLink]="['/new-identity']" >
+    <button class="btn btn-primary" [routerLink]="['/new-identity']">
       <span class="fa fa-user-plus"></span> {{ 
getMessage("identity_list_html@newId") }}
     </button>
   </div>
-  <br/>
+  <br />
+</div>
+
+<!--Authorization Request-->
+<div class="alert alert-warning alert-dismissible fade show mb-1" role="alert" 
*ngIf="authorizationRequest">
+  <div  style="text-align: center;">
+    <i class="fa fa-2x fa-openid"></i>
+    <b class="fa-2x"> 
{{getMessage("authorization_request_html@personalInfo")}} </b>
+    <br />
+    <span *ngIf="isClientVerified() === undefined">
+      <i class="fa fa-2x fa-circle-o-notch fa-spin fa-fw"></i>
+      <b class="fa-2x"> 
{{getMessage("authorization_request_html@verifyRequest")}}</b>
+    </span>
+    <br />
+  </div>
+  <div *ngIf="isClientVerified()" style="text-align: center;">
+      <strong>{{ oidcService.clientName }}</strong>
+      {{getMessage("authorization_request_html@chooseId1")}}
+      <br/>
+      {{getMessage("authorization_request_html@chooseId2")}}
+  </div>
+  <div *ngIf="isClientVerified() !== undefined && !isClientVerified()" 
style="text-align: center;">
+    <div class="alert alert-danger show" role="alert">
+      <b>{{getMessage("authorization_request_html@authFailed")}}</b><br />
+      <button class="btn btn-primary mt-4" *ngIf="!isClientVerified()" 
(click)="retryVerify();">
+        <span class="fa fa-openid"></span> 
{{getMessage("authorization_request_html@retry")}}
+      </button>
+    </div>
+  </div>
+  <div *ngIf="isClientVerified() === undefined" style="text-align: center;">
+    <button class="btn btn-danger mt-4" *ngIf="isClientVerified() === 
undefined" (click)="cancelRequest()">
+      <span class="fa fa-ban"></span> 
{{getMessage("authorization_request_html@cancelRequest")}}
+    </button>
+  </div>
 </div>
 
 <!-- Cancel authorization -->
 <div style="margin-bottom: 1em; text-align: center;" *ngIf="inOpenIdFlow()">
-    <button *ngIf="inOpenIdFlow()" class="btn btn-danger mt-2" 
(click)="cancelRequest()">
-      <span class="fa fa-ban"></span> {{ 
getMessage("identity_list_html@declineRequest") }}
-    </button>
+  <button *ngIf="inOpenIdFlow() && isClientVerified() !== undefined && 
isClientVerified()" class="btn btn-danger mt-2" (click)="cancelRequest()">
+    <span class="fa fa-ban"></span> {{ 
getMessage("identity_list_html@declineRequest") }}
+  </button>
 </div>
 
 <!-- error infos -->
@@ -35,13 +70,14 @@
   <button class="btn btn-primary ml-4" 
(click)="errorInfos.splice(errorInfos.indexOf(err,0), 1)">
     <span>{{ getMessage("identity_list_html@dismiss") }}</span>
   </button>
-  <br/>
+  <br />
   {{err}}
 </div>
 
 <!-- No identities present -->
-<div *ngIf="isConnected() && 0 == identities.length" style="text-align: 
center;" class="alert alert-secondary alert-dismissible fade show" role="alert">
-  {{ getMessage("identity_list_html@noId") }}<br/><br/>
+<div *ngIf="isConnected() && 0 == identities.length" style="text-align: 
center;"
+  class="alert alert-secondary alert-dismissible fade show" role="alert">
+  {{ getMessage("identity_list_html@noId") }}<br /><br />
   <button class="btn btn-primary" [routerLink]="['/new-identity']">
     <span class="fa fa-plus"></span> {{ 
getMessage("identity_list_html@addFirstId") }}
   </button>
@@ -50,26 +86,31 @@
 <!-- Identity cards -->
 <!-- No match -->
 <div *ngIf="canSearch()">
-  <div *ngIf="(identities | search: searchTerm).length == 0" 
style="text-align: center;" class="alert alert-secondary alert-dismissible fade 
show" role="alert">{{ getMessage("identity_list_html@noMatchingIds") }}</div>
+  <div *ngIf="(identities | search: searchTerm).length == 0" 
style="text-align: center;"
+    class="alert alert-secondary alert-dismissible fade show" role="alert">
+    {{ getMessage("identity_list_html@noMatchingIds") }}</div>
 </div>
 <!-- Cards -->
-<div class="card-columns p-2 mr-5 ml-5" [ngStyle]="{'column-count': '1'}" 
style="display: flex; flex-direction:column; align-items:center">
-  <div class="card mb-5" *ngFor="let identity of identities | search: 
searchTerm" style="max-width: 50em; min-height: 20em;">
+<div class="card-columns p-2 mr-5 ml-5" [ngStyle]="{'column-count': '1'}"
+  style="display: flex; flex-direction:column; align-items:center">
+  <div class="card mb-5" *ngFor="let identity of identities | search: 
searchTerm"
+    style="max-width: 50em; min-height: 20em;">
     <div class="card-avatar card-img-top">
       <div class="card-avatar-character text-dark">
-      <img src="assets/reclaim_icon.png" style="width: 4em;opacity: 0.3;">
+        <img src="assets/reclaim_icon.png" style="width: 4em;opacity: 0.3;">
 
         <button class="btn btn-primary" *ngIf="showConfirmDelete != identity" 
(click)="confirmDelete(identity)">
           <i class="fa fa-trash"></i>
         </button>
-        <button class="btn btn-primary" *ngIf="showConfirmDelete != identity" 
[routerLink]="['/edit-identity', identity.name]">
+        <button class="btn btn-primary" *ngIf="showConfirmDelete != identity"
+          [routerLink]="['/edit-identity', identity.name]">
           <i class="fa fa-edit"></i>
         </button>
       </div>
     </div>
     <!-- Identity deletion confirmation -->
     <div class="alert alert-danger fade show" [hidden]="showConfirmDelete != 
identity">
-      {{ getMessage("identity_list_html@verifyDelete") }}<br/><br/>
+      {{ getMessage("identity_list_html@verifyDelete") }}<br /><br />
       <button class="btn btn-primary" (click)="deleteIdentity(identity)">
         <span class="fa fa-trash"></span> {{ getMessage("Delete") }}
       </button>
@@ -78,21 +119,21 @@
       </button>
     </div>
     <!-- Maybe add some info to identities? - dialog -->
-    <div class="alert alert-secondary fade show" 
[hidden]="hasAttributes(identity)" >
-      {{ getMessage("identity_list_html@noAttributes1") }} <a 
class="buttonlink" [routerLink]="['/edit-identity', identity.name]">{{ 
getMessage("identity_list_html@noAttributes2") }}</a>
+    <div class="alert alert-secondary fade show" 
[hidden]="hasAttributes(identity)">
+      {{ getMessage("identity_list_html@noAttributes1") }} <a 
class="buttonlink"
+        [routerLink]="['/edit-identity', identity.name]">{{ 
getMessage("identity_list_html@noAttributes2") }}</a>
     </div>
-    <div [hidden]="!isAnyRequestedClaimMissing(identity)"
-      class="alert alert-warning alert-dismissible fade show"
+    <div [hidden]="!isAnyRequestedClaimMissing(identity)" class="alert 
alert-warning alert-dismissible fade show"
       [class.alert-warning]="!isAnyRequiredClaimMissing(identity)"
-      [class.alert-danger]="isAnyRequiredClaimMissing(identity)"
-      role="alert" >
+      [class.alert-danger]="isAnyRequiredClaimMissing(identity)" role="alert">
       <span class="fa fa-openid"></span> {{ 
getMessage("identity_list_html@missingInformation") }}
       <ul>
         <li *ngIf="isProfileRequested() && isProfileMissing(identity)"><b>{{ 
getProfileDescription() }}</b></li>
         <li *ngIf="isEmailRequested() && isEmailMissing(identity)"><b>{{ 
getEmailDescription() }}</b></li>
         <li *ngIf="isPhoneRequested() && isPhoneMissing(identity)"><b>{{ 
getPhoneDescription() }}</b></li>
         <li *ngIf="isAddressRequested() && isAddressMissing(identity)"><b>{{ 
getAddressDescription() }}</b></li>
-        <li *ngFor="let attr of 
getMissingClaims(identity)"><b>{{attr.name}}</b><i *ngIf="!isOptional(attr)"> 
({{ getMessage("identity_list_html@required") }})</i></li>
+        <li *ngFor="let attr of 
getMissingClaims(identity)"><b>{{attr.name}}</b><i *ngIf="!isOptional(attr)">
+            ({{ getMessage("identity_list_html@required") }})</i></li>
       </ul>
       <button class="btn btn-primary" [routerLink]="['/edit-identity', 
identity.name]">
         <span class="fa fa-edit"></span> {{ 
getMessage("identity_list_html@editId") }}
@@ -100,55 +141,63 @@
     </div>
 
     <div class="fa-3x mt-2" style="text-align:center">
-      <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>
+      <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">
-    <!-- Attribute table -->
+      <!-- Attribute table -->
       <div class="table pb-1">
         <div class="container">
           <div class="row mb-1">
-          <div [class.text-primary]="isClaimRequested(identity, attribute)" 
class="col-sm-4 mb-4"
-             [class.text-secondary]="!isClaimRequested(identity, attribute)"
-             *ngFor="let attribute of getIdentityAttributes(identity)">
-            <div class="col-sm">
-              <span *ngIf="isClaimRequested(identity, attribute)" class="fa 
fa-openid mr-1"></span><b>{{getAttributeDescription(attribute)}}</b>
+            <div [class.text-primary]="isClaimRequested(identity, attribute)" 
class="col-sm-4 mb-4"
+              [class.text-secondary]="!isClaimRequested(identity, attribute)"
+              *ngFor="let attribute of getIdentityAttributes(identity)">
+              <div class="col-sm">
+                <span *ngIf="isClaimRequested(identity, attribute)"
+                  class="fa fa-openid 
mr-1"></span><b>{{getAttributeDescription(attribute)}}</b>
+              </div>
+              <div class="col-sm">
+                <div *ngIf="getAttributeValue(identity, attribute).length <= 
20" style="min-width: 15em">
+                  {{getAttributeValue(identity, attribute)}}</div>
+                <div *ngIf="getAttributeValue(identity, attribute).length > 
20" style="min-width: 15em">
+                  {{getAttributeValue(identity, attribute).substring(0, 
20)}}<span style="color:#eee">[...]</span></div>
+              </div>
             </div>
-            <div class="col-sm">
-              <div *ngIf="getAttributeValue(identity, attribute).length <= 20" 
style="min-width: 15em">{{getAttributeValue(identity, attribute)}}</div>
-              <div *ngIf="getAttributeValue(identity, attribute).length > 20" 
style="min-width: 15em">{{getAttributeValue(identity, attribute).substring(0, 
20)}}<span style="color:#eee">[...]</span></div>
-            </div>
-          </div>
-          <div *ngIf="(openIdentity != identity) && 
hasLotsOfAttributes(identity)" class="ml-4">
-            <div>
-              <i>{{ getMessage("identity_list_html@moreAttributes", 
{ATTRIBUTENUMBER: attributes[identity.pubkey].length - 6}) }}</i><br/>
+            <div *ngIf="(openIdentity != identity) && 
hasLotsOfAttributes(identity)" class="ml-4">
+              <div>
+                <i>{{ getMessage("identity_list_html@moreAttributes", 
{ATTRIBUTENUMBER: attributes[identity.pubkey].length - 6}) }}</i><br />
+              </div>
             </div>
           </div>
         </div>
-        </div>
-        <button class="btn btn-primary mt-3" (click)="openIdentity = identity" 
*ngIf="(openIdentity != identity) && hasLotsOfAttributes(identity)">
+        <button class="btn btn-primary mt-3" (click)="openIdentity = identity"
+          *ngIf="(openIdentity != identity) && hasLotsOfAttributes(identity)">
           <i class="fa fa-expand"></i>
           {{ getMessage("identity_list_html@showAll") }}
         </button>
       </div>
     </div>
     <div *ngIf="inOpenIdFlow()">
-      <button [disabled]="!isClientVerified() || 
isAnyRequiredClaimMissing(identity)"
-        (click)="loginIdentity(identity)"
+      <button [disabled]="!isClientVerified() || 
isAnyRequiredClaimMissing(identity)" (click)="loginIdentity(identity)"
         class="btn btn-primary mr-1 openid-login">
-        <span *ngIf="isClientVerified()" >{{ 
getMessage("identity_list_html@shareInfo1") }} <i class="fa fa-openid 
text-primary"></i> {{ getMessage("identity_list_html@shareInfo2") }}</span>
-        <span *ngIf="!isClientVerified()" ><i class="fa 
fa-exclamation-circle"></i> {{ getMessage("identity_list_html@sharingDisabled") 
}}</span>
+        <span *ngIf="isClientVerified()">{{ 
getMessage("identity_list_html@shareInfo1") }} <i
+            class="fa fa-openid text-primary"></i> {{ 
getMessage("identity_list_html@shareInfo2") }}</span>
+        <span *ngIf="!isClientVerified()"><i class="fa 
fa-exclamation-circle"></i>
+          {{ getMessage("identity_list_html@sharingDisabled") }}</span>
       </button>
     </div>
   </div>
 
   <!-- New identity card -->
-  <div class="card identity-new" [routerLink]="['/new-identity']" *ngIf="0 != 
identities.length" style="max-width: 50em; min-height: 20em;">
+  <div class="card identity-new" [routerLink]="['/new-identity']" *ngIf="0 != 
identities.length"
+    style="max-width: 50em; min-height: 20em;">
     <div class="card-avatar card-img-top">
       <div class="card-avatar-character text-dark">
         <!--<div class="icon m-1 text-uppercase" 
[style.background-color]="intToRGB(identity.pubkey)">{{ 
identity.name[0]}}</div>-->
         <i class="fa fa-user-circle"></i>
-        <span class="m-1" style="display: inline-block" ><i>{{ 
getMessage("identity_list_html@newId") }}</i></span>
+        <span class="m-1" style="display: inline-block"><i>{{ 
getMessage("identity_list_html@newId") }}</i></span>
       </div>
     </div>
     <div class="card-body">
@@ -160,6 +209,4 @@
       </div>
     </div>
   </div>
-</div>
-
-
+</div>
\ No newline at end of file
diff --git a/src/app/identity-list/identity-list.component.ts 
b/src/app/identity-list/identity-list.component.ts
index 8c44d79..9ac3ff0 100644
--- a/src/app/identity-list/identity-list.component.ts
+++ b/src/app/identity-list/identity-list.component.ts
@@ -40,6 +40,7 @@ export class IdentityListComponent implements OnInit {
   showSharingInfo: any = '';
   sortAttributeByStandardClaim: any;
   openIdentity: any = '';
+  authorizationRequest: any;
 
   constructor(private route: ActivatedRoute, private oidcService: 
OpenIdService,
     private identityService: IdentityService,
@@ -60,6 +61,7 @@ export class IdentityListComponent implements OnInit {
     this.missingClaims = {};
     this.connected = false;
     this.modalOpened = false;
+    this.authorizationRequest = false;
     if (undefined !== this.route.snapshot.queryParams["code"]) {
       localStorage.setItem('credentialCode', 
this.route.snapshot.queryParams["code"]);
       localStorage.setItem('credentialState', 
this.route.snapshot.queryParams["state"]);
@@ -74,8 +76,10 @@ export class IdentityListComponent implements OnInit {
     if (!this.oidcService.inOpenIdFlow() && undefined == 
this.route.snapshot.queryParams["authz_request"]) {
       this.oidcService.parseRouteParams(this.route.snapshot.queryParams);
       if (this.oidcService.inOpenIdFlow()) {
-        this.router.navigate(['/authorization-request']);
-        return;
+        /**this.router.navigate(['/authorization-request']);
+        return;*/
+        this.retryVerify();
+        this.authorizationRequest = true;
       }
     }
     this.updateIdentities();
@@ -91,6 +95,7 @@ export class IdentityListComponent implements OnInit {
   }
 
   cancelRequest() {
+    this.authorizationRequest = false;
     this.oidcService.cancelAuthorization();
   }
 
@@ -499,4 +504,9 @@ export class IdentityListComponent implements OnInit {
   getMessage(key, sub?){
     return this.languageService.getMessage(key, sub);
   }
+
+  //Authorization Request
+  retryVerify() {
+    this.oidcService.getClientName();
+  }
 }
diff --git a/src/locales/de/messages.json b/src/locales/de/messages.json
index d79d5b4..f14d403 100644
--- a/src/locales/de/messages.json
+++ b/src/locales/de/messages.json
@@ -12,7 +12,8 @@
     "Value": "Wert",
     "authorization_request_html@personalInfo": "Persönliche Datenabfrage",
     "authorization_request_html@verifyRequest": "Verifiziere Anfrage, bitte 
warten…",
-    "authorization_request_html@chooseId": "frägt persönliche Daten an.\n 
Wähle eine Identität und erlaube damit den Zugriff die folgenden Daten:",
+    "authorization_request_html@chooseId1": "frägt persönliche Daten an.\n 
Wähle eine Identität und erlaube damit den Zugriff die folgenden Daten:",
+    "authorization_request_html@chooseId2": "Wähle eine Identität und erlaube 
damit Zugriff auf die blau markierten Daten",
     "authorization_request_html@attributes": "zudem werden die folgenden 
freiwilligen Angaben angefragt:",
     "authorization_request_html@personalDataWarning1": "Sei vorsichtig mit wem 
du deine persönlichen Daten teilst!",
     "authorization_request_html@personalDataWarning2": "Wenn du mit 
{{CLIENTNAME}} keine persönlichen Daten teilenwillst,\nkannst du die Anfrage 
ablehnen.\nDu hast die Möglichkeit Daten permanent von Identitäten zu löschen 
bevor\ndu der Anfrage zustimmst.",
diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json
index 49cd933..0feb9d0 100644
--- a/src/locales/en/messages.json
+++ b/src/locales/en/messages.json
@@ -12,7 +12,8 @@
     "Value": "Value",
     "authorization_request_html@personalInfo": "Personal information request",
     "authorization_request_html@verifyRequest": "Verifying request, please 
stand by…",
-    "authorization_request_html@chooseId": "asks you to share personal 
information.\nChoose an identity to let it access the following information:",
+    "authorization_request_html@chooseId1": "asks you to share personal 
information.",
+    "authorization_request_html@chooseId2": "Choose an identity to let it 
access the information marked in blue.",
     "authorization_request_html@attributes": "as well as the following 
additional attributes:",
     "authorization_request_html@personalDataWarning1": "Be careful when 
sharing personal data with third parties!",
     "authorization_request_html@personalDataWarning2": "If you do not want to 
share information from any of your identities with\n{{CLIENTNAME}}, you may 
decline the request.\nYou may also permanently remove or edit information from 
an identity before\nsharing.",

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