diff options
Diffstat (limited to 'src/app/identity-list/identity-list.component.html')
-rw-r--r-- | src/app/identity-list/identity-list.component.html | 147 |
1 files changed, 97 insertions, 50 deletions
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 @@ | |||
1 | <!-- GNUnet not running --> | 1 | <!-- GNUnet not running --> |
2 | <oid-modal id="GnunetInfo"> | 2 | <oid-modal id="GnunetInfo"> |
3 | <div class="logo"><img src="assets/reclaim_icon.png"/></div> | 3 | <div class="logo"><img src="assets/reclaim_icon.png" /></div> |
4 | <hr> | 4 | <hr> |
5 | <div style="text-align: center; font-size: 18px;"> | 5 | <div style="text-align: center; font-size: 18px;"> |
6 | <strong> {{ getMessage("identity_list_html@unableToConnect") }} </strong> | 6 | <strong> {{ getMessage("identity_list_html@unableToConnect") }} </strong> |
@@ -8,25 +8,60 @@ | |||
8 | </oid-modal> | 8 | </oid-modal> |
9 | 9 | ||
10 | 10 | ||
11 | |||
11 | <!-- Buttons --> | 12 | <!-- Buttons --> |
12 | <div *ngIf="canSearch()" style="margin-top: 1em; text-align: center;"> | 13 | <div *ngIf="canSearch()" style="margin-top: 1em; text-align: center;"> |
13 | <!-- Identity search --> | 14 | <!-- Identity search --> |
14 | <div class="form-inline" style="display: table; margin: auto;"> | 15 | <div class="form-inline" style="display: table; margin: auto;"> |
15 | <div class="search-wrapper"> | 16 | <div class="search-wrapper"> |
16 | <input class="form-control mr-sm-2" type="search" [(ngModel)]="searchTerm" name="searchTerm" placeholder="{{ getMessage('identity_list_html@searchbarPlaceholder') }}" style="border-radius: 2em;"> | 17 | <input class="form-control mr-sm-2" type="search" [(ngModel)]="searchTerm" name="searchTerm" |
18 | placeholder="{{ getMessage('identity_list_html@searchbarPlaceholder') }}" style="border-radius: 2em;"> | ||
17 | </div> | 19 | </div> |
18 | <button class="btn btn-primary" [routerLink]="['/new-identity']" > | 20 | <button class="btn btn-primary" [routerLink]="['/new-identity']"> |
19 | <span class="fa fa-user-plus"></span> {{ getMessage("identity_list_html@newId") }} | 21 | <span class="fa fa-user-plus"></span> {{ getMessage("identity_list_html@newId") }} |
20 | </button> | 22 | </button> |
21 | </div> | 23 | </div> |
22 | <br/> | 24 | <br /> |
25 | </div> | ||
26 | |||
27 | <!--Authorization Request--> | ||
28 | <div class="alert alert-warning alert-dismissible fade show mb-1" role="alert" *ngIf="authorizationRequest"> | ||
29 | <div style="text-align: center;"> | ||
30 | <i class="fa fa-2x fa-openid"></i> | ||
31 | <b class="fa-2x"> {{getMessage("authorization_request_html@personalInfo")}} </b> | ||
32 | <br /> | ||
33 | <span *ngIf="isClientVerified() === undefined"> | ||
34 | <i class="fa fa-2x fa-circle-o-notch fa-spin fa-fw"></i> | ||
35 | <b class="fa-2x"> {{getMessage("authorization_request_html@verifyRequest")}}</b> | ||
36 | </span> | ||
37 | <br /> | ||
38 | </div> | ||
39 | <div *ngIf="isClientVerified()" style="text-align: center;"> | ||
40 | <strong>{{ oidcService.clientName }}</strong> | ||
41 | {{getMessage("authorization_request_html@chooseId1")}} | ||
42 | <br/> | ||
43 | {{getMessage("authorization_request_html@chooseId2")}} | ||
44 | </div> | ||
45 | <div *ngIf="isClientVerified() !== undefined && !isClientVerified()" style="text-align: center;"> | ||
46 | <div class="alert alert-danger show" role="alert"> | ||
47 | <b>{{getMessage("authorization_request_html@authFailed")}}</b><br /> | ||
48 | <button class="btn btn-primary mt-4" *ngIf="!isClientVerified()" (click)="retryVerify();"> | ||
49 | <span class="fa fa-openid"></span> {{getMessage("authorization_request_html@retry")}} | ||
50 | </button> | ||
51 | </div> | ||
52 | </div> | ||
53 | <div *ngIf="isClientVerified() === undefined" style="text-align: center;"> | ||
54 | <button class="btn btn-danger mt-4" *ngIf="isClientVerified() === undefined" (click)="cancelRequest()"> | ||
55 | <span class="fa fa-ban"></span> {{getMessage("authorization_request_html@cancelRequest")}} | ||
56 | </button> | ||
57 | </div> | ||
23 | </div> | 58 | </div> |
24 | 59 | ||
25 | <!-- Cancel authorization --> | 60 | <!-- Cancel authorization --> |
26 | <div style="margin-bottom: 1em; text-align: center;" *ngIf="inOpenIdFlow()"> | 61 | <div style="margin-bottom: 1em; text-align: center;" *ngIf="inOpenIdFlow()"> |
27 | <button *ngIf="inOpenIdFlow()" class="btn btn-danger mt-2" (click)="cancelRequest()"> | 62 | <button *ngIf="inOpenIdFlow() && isClientVerified() !== undefined && isClientVerified()" class="btn btn-danger mt-2" (click)="cancelRequest()"> |
28 | <span class="fa fa-ban"></span> {{ getMessage("identity_list_html@declineRequest") }} | 63 | <span class="fa fa-ban"></span> {{ getMessage("identity_list_html@declineRequest") }} |
29 | </button> | 64 | </button> |
30 | </div> | 65 | </div> |
31 | 66 | ||
32 | <!-- error infos --> | 67 | <!-- error infos --> |
@@ -35,13 +70,14 @@ | |||
35 | <button class="btn btn-primary ml-4" (click)="errorInfos.splice(errorInfos.indexOf(err,0), 1)"> | 70 | <button class="btn btn-primary ml-4" (click)="errorInfos.splice(errorInfos.indexOf(err,0), 1)"> |
36 | <span>{{ getMessage("identity_list_html@dismiss") }}</span> | 71 | <span>{{ getMessage("identity_list_html@dismiss") }}</span> |
37 | </button> | 72 | </button> |
38 | <br/> | 73 | <br /> |
39 | {{err}} | 74 | {{err}} |
40 | </div> | 75 | </div> |
41 | 76 | ||
42 | <!-- No identities present --> | 77 | <!-- No identities present --> |
43 | <div *ngIf="isConnected() && 0 == identities.length" style="text-align: center;" class="alert alert-secondary alert-dismissible fade show" role="alert"> | 78 | <div *ngIf="isConnected() && 0 == identities.length" style="text-align: center;" |
44 | {{ getMessage("identity_list_html@noId") }}<br/><br/> | 79 | class="alert alert-secondary alert-dismissible fade show" role="alert"> |
80 | {{ getMessage("identity_list_html@noId") }}<br /><br /> | ||
45 | <button class="btn btn-primary" [routerLink]="['/new-identity']"> | 81 | <button class="btn btn-primary" [routerLink]="['/new-identity']"> |
46 | <span class="fa fa-plus"></span> {{ getMessage("identity_list_html@addFirstId") }} | 82 | <span class="fa fa-plus"></span> {{ getMessage("identity_list_html@addFirstId") }} |
47 | </button> | 83 | </button> |
@@ -50,26 +86,31 @@ | |||
50 | <!-- Identity cards --> | 86 | <!-- Identity cards --> |
51 | <!-- No match --> | 87 | <!-- No match --> |
52 | <div *ngIf="canSearch()"> | 88 | <div *ngIf="canSearch()"> |
53 | <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> | 89 | <div *ngIf="(identities | search: searchTerm).length == 0" style="text-align: center;" |
90 | class="alert alert-secondary alert-dismissible fade show" role="alert"> | ||
91 | {{ getMessage("identity_list_html@noMatchingIds") }}</div> | ||
54 | </div> | 92 | </div> |
55 | <!-- Cards --> | 93 | <!-- Cards --> |
56 | <div class="card-columns p-2 mr-5 ml-5" [ngStyle]="{'column-count': '1'}" style="display: flex; flex-direction:column; align-items:center"> | 94 | <div class="card-columns p-2 mr-5 ml-5" [ngStyle]="{'column-count': '1'}" |
57 | <div class="card mb-5" *ngFor="let identity of identities | search: searchTerm" style="max-width: 50em; min-height: 20em;"> | 95 | style="display: flex; flex-direction:column; align-items:center"> |
96 | <div class="card mb-5" *ngFor="let identity of identities | search: searchTerm" | ||
97 | style="max-width: 50em; min-height: 20em;"> | ||
58 | <div class="card-avatar card-img-top"> | 98 | <div class="card-avatar card-img-top"> |
59 | <div class="card-avatar-character text-dark"> | 99 | <div class="card-avatar-character text-dark"> |
60 | <img src="assets/reclaim_icon.png" style="width: 4em;opacity: 0.3;"> | 100 | <img src="assets/reclaim_icon.png" style="width: 4em;opacity: 0.3;"> |
61 | 101 | ||
62 | <button class="btn btn-primary" *ngIf="showConfirmDelete != identity" (click)="confirmDelete(identity)"> | 102 | <button class="btn btn-primary" *ngIf="showConfirmDelete != identity" (click)="confirmDelete(identity)"> |
63 | <i class="fa fa-trash"></i> | 103 | <i class="fa fa-trash"></i> |
64 | </button> | 104 | </button> |
65 | <button class="btn btn-primary" *ngIf="showConfirmDelete != identity" [routerLink]="['/edit-identity', identity.name]"> | 105 | <button class="btn btn-primary" *ngIf="showConfirmDelete != identity" |
106 | [routerLink]="['/edit-identity', identity.name]"> | ||
66 | <i class="fa fa-edit"></i> | 107 | <i class="fa fa-edit"></i> |
67 | </button> | 108 | </button> |
68 | </div> | 109 | </div> |
69 | </div> | 110 | </div> |
70 | <!-- Identity deletion confirmation --> | 111 | <!-- Identity deletion confirmation --> |
71 | <div class="alert alert-danger fade show" [hidden]="showConfirmDelete != identity"> | 112 | <div class="alert alert-danger fade show" [hidden]="showConfirmDelete != identity"> |
72 | {{ getMessage("identity_list_html@verifyDelete") }}<br/><br/> | 113 | {{ getMessage("identity_list_html@verifyDelete") }}<br /><br /> |
73 | <button class="btn btn-primary" (click)="deleteIdentity(identity)"> | 114 | <button class="btn btn-primary" (click)="deleteIdentity(identity)"> |
74 | <span class="fa fa-trash"></span> {{ getMessage("Delete") }} | 115 | <span class="fa fa-trash"></span> {{ getMessage("Delete") }} |
75 | </button> | 116 | </button> |
@@ -78,21 +119,21 @@ | |||
78 | </button> | 119 | </button> |
79 | </div> | 120 | </div> |
80 | <!-- Maybe add some info to identities? - dialog --> | 121 | <!-- Maybe add some info to identities? - dialog --> |
81 | <div class="alert alert-secondary fade show" [hidden]="hasAttributes(identity)" > | 122 | <div class="alert alert-secondary fade show" [hidden]="hasAttributes(identity)"> |
82 | {{ getMessage("identity_list_html@noAttributes1") }} <a class="buttonlink" [routerLink]="['/edit-identity', identity.name]">{{ getMessage("identity_list_html@noAttributes2") }}</a> | 123 | {{ getMessage("identity_list_html@noAttributes1") }} <a class="buttonlink" |
124 | [routerLink]="['/edit-identity', identity.name]">{{ getMessage("identity_list_html@noAttributes2") }}</a> | ||
83 | </div> | 125 | </div> |
84 | <div [hidden]="!isAnyRequestedClaimMissing(identity)" | 126 | <div [hidden]="!isAnyRequestedClaimMissing(identity)" class="alert alert-warning alert-dismissible fade show" |
85 | class="alert alert-warning alert-dismissible fade show" | ||
86 | [class.alert-warning]="!isAnyRequiredClaimMissing(identity)" | 127 | [class.alert-warning]="!isAnyRequiredClaimMissing(identity)" |
87 | [class.alert-danger]="isAnyRequiredClaimMissing(identity)" | 128 | [class.alert-danger]="isAnyRequiredClaimMissing(identity)" role="alert"> |
88 | role="alert" > | ||
89 | <span class="fa fa-openid"></span> {{ getMessage("identity_list_html@missingInformation") }} | 129 | <span class="fa fa-openid"></span> {{ getMessage("identity_list_html@missingInformation") }} |
90 | <ul> | 130 | <ul> |
91 | <li *ngIf="isProfileRequested() && isProfileMissing(identity)"><b>{{ getProfileDescription() }}</b></li> | 131 | <li *ngIf="isProfileRequested() && isProfileMissing(identity)"><b>{{ getProfileDescription() }}</b></li> |
92 | <li *ngIf="isEmailRequested() && isEmailMissing(identity)"><b>{{ getEmailDescription() }}</b></li> | 132 | <li *ngIf="isEmailRequested() && isEmailMissing(identity)"><b>{{ getEmailDescription() }}</b></li> |
93 | <li *ngIf="isPhoneRequested() && isPhoneMissing(identity)"><b>{{ getPhoneDescription() }}</b></li> | 133 | <li *ngIf="isPhoneRequested() && isPhoneMissing(identity)"><b>{{ getPhoneDescription() }}</b></li> |
94 | <li *ngIf="isAddressRequested() && isAddressMissing(identity)"><b>{{ getAddressDescription() }}</b></li> | 134 | <li *ngIf="isAddressRequested() && isAddressMissing(identity)"><b>{{ getAddressDescription() }}</b></li> |
95 | <li *ngFor="let attr of getMissingClaims(identity)"><b>{{attr.name}}</b><i *ngIf="!isOptional(attr)"> ({{ getMessage("identity_list_html@required") }})</i></li> | 135 | <li *ngFor="let attr of getMissingClaims(identity)"><b>{{attr.name}}</b><i *ngIf="!isOptional(attr)"> |
136 | ({{ getMessage("identity_list_html@required") }})</i></li> | ||
96 | </ul> | 137 | </ul> |
97 | <button class="btn btn-primary" [routerLink]="['/edit-identity', identity.name]"> | 138 | <button class="btn btn-primary" [routerLink]="['/edit-identity', identity.name]"> |
98 | <span class="fa fa-edit"></span> {{ getMessage("identity_list_html@editId") }} | 139 | <span class="fa fa-edit"></span> {{ getMessage("identity_list_html@editId") }} |
@@ -100,55 +141,63 @@ | |||
100 | </div> | 141 | </div> |
101 | 142 | ||
102 | <div class="fa-3x mt-2" style="text-align:center"> | 143 | <div class="fa-3x mt-2" style="text-align:center"> |
103 | <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> | 144 | <img style="border-radius: 50%; width: 1em" [src]="getIdentityProfilePicture(identity)" |
145 | *ngIf="identityHasProfilePicture(identity)"><i class="fa fa-user-circle" | ||
146 | *ngIf="!identityHasProfilePicture(identity)"></i><i> {{identity.name}}</i> | ||
104 | </div> | 147 | </div> |
105 | 148 | ||
106 | <div class="card-body"> | 149 | <div class="card-body"> |
107 | <!-- Attribute table --> | 150 | <!-- Attribute table --> |
108 | <div class="table pb-1"> | 151 | <div class="table pb-1"> |
109 | <div class="container"> | 152 | <div class="container"> |
110 | <div class="row mb-1"> | 153 | <div class="row mb-1"> |
111 | <div [class.text-primary]="isClaimRequested(identity, attribute)" class="col-sm-4 mb-4" | 154 | <div [class.text-primary]="isClaimRequested(identity, attribute)" class="col-sm-4 mb-4" |
112 | [class.text-secondary]="!isClaimRequested(identity, attribute)" | 155 | [class.text-secondary]="!isClaimRequested(identity, attribute)" |
113 | *ngFor="let attribute of getIdentityAttributes(identity)"> | 156 | *ngFor="let attribute of getIdentityAttributes(identity)"> |
114 | <div class="col-sm"> | 157 | <div class="col-sm"> |
115 | <span *ngIf="isClaimRequested(identity, attribute)" class="fa fa-openid mr-1"></span><b>{{getAttributeDescription(attribute)}}</b> | 158 | <span *ngIf="isClaimRequested(identity, attribute)" |
159 | class="fa fa-openid mr-1"></span><b>{{getAttributeDescription(attribute)}}</b> | ||
160 | </div> | ||
161 | <div class="col-sm"> | ||
162 | <div *ngIf="getAttributeValue(identity, attribute).length <= 20" style="min-width: 15em"> | ||
163 | {{getAttributeValue(identity, attribute)}}</div> | ||
164 | <div *ngIf="getAttributeValue(identity, attribute).length > 20" style="min-width: 15em"> | ||
165 | {{getAttributeValue(identity, attribute).substring(0, 20)}}<span style="color:#eee">[...]</span></div> | ||
166 | </div> | ||
116 | </div> | 167 | </div> |
117 | <div class="col-sm"> | 168 | <div *ngIf="(openIdentity != identity) && hasLotsOfAttributes(identity)" class="ml-4"> |
118 | <div *ngIf="getAttributeValue(identity, attribute).length <= 20" style="min-width: 15em">{{getAttributeValue(identity, attribute)}}</div> | 169 | <div> |
119 | <div *ngIf="getAttributeValue(identity, attribute).length > 20" style="min-width: 15em">{{getAttributeValue(identity, attribute).substring(0, 20)}}<span style="color:#eee">[...]</span></div> | 170 | <i>{{ getMessage("identity_list_html@moreAttributes", {ATTRIBUTENUMBER: attributes[identity.pubkey].length - 6}) }}</i><br /> |
120 | </div> | 171 | </div> |
121 | </div> | ||
122 | <div *ngIf="(openIdentity != identity) && hasLotsOfAttributes(identity)" class="ml-4"> | ||
123 | <div> | ||
124 | <i>{{ getMessage("identity_list_html@moreAttributes", {ATTRIBUTENUMBER: attributes[identity.pubkey].length - 6}) }}</i><br/> | ||
125 | </div> | 172 | </div> |
126 | </div> | 173 | </div> |
127 | </div> | 174 | </div> |
128 | </div> | 175 | <button class="btn btn-primary mt-3" (click)="openIdentity = identity" |
129 | <button class="btn btn-primary mt-3" (click)="openIdentity = identity" *ngIf="(openIdentity != identity) && hasLotsOfAttributes(identity)"> | 176 | *ngIf="(openIdentity != identity) && hasLotsOfAttributes(identity)"> |
130 | <i class="fa fa-expand"></i> | 177 | <i class="fa fa-expand"></i> |
131 | {{ getMessage("identity_list_html@showAll") }} | 178 | {{ getMessage("identity_list_html@showAll") }} |
132 | </button> | 179 | </button> |
133 | </div> | 180 | </div> |
134 | </div> | 181 | </div> |
135 | <div *ngIf="inOpenIdFlow()"> | 182 | <div *ngIf="inOpenIdFlow()"> |
136 | <button [disabled]="!isClientVerified() || isAnyRequiredClaimMissing(identity)" | 183 | <button [disabled]="!isClientVerified() || isAnyRequiredClaimMissing(identity)" (click)="loginIdentity(identity)" |
137 | (click)="loginIdentity(identity)" | ||
138 | class="btn btn-primary mr-1 openid-login"> | 184 | class="btn btn-primary mr-1 openid-login"> |
139 | <span *ngIf="isClientVerified()" >{{ getMessage("identity_list_html@shareInfo1") }} <i class="fa fa-openid text-primary"></i> {{ getMessage("identity_list_html@shareInfo2") }}</span> | 185 | <span *ngIf="isClientVerified()">{{ getMessage("identity_list_html@shareInfo1") }} <i |
140 | <span *ngIf="!isClientVerified()" ><i class="fa fa-exclamation-circle"></i> {{ getMessage("identity_list_html@sharingDisabled") }}</span> | 186 | class="fa fa-openid text-primary"></i> {{ getMessage("identity_list_html@shareInfo2") }}</span> |
187 | <span *ngIf="!isClientVerified()"><i class="fa fa-exclamation-circle"></i> | ||
188 | {{ getMessage("identity_list_html@sharingDisabled") }}</span> | ||
141 | </button> | 189 | </button> |
142 | </div> | 190 | </div> |
143 | </div> | 191 | </div> |
144 | 192 | ||
145 | <!-- New identity card --> | 193 | <!-- New identity card --> |
146 | <div class="card identity-new" [routerLink]="['/new-identity']" *ngIf="0 != identities.length" style="max-width: 50em; min-height: 20em;"> | 194 | <div class="card identity-new" [routerLink]="['/new-identity']" *ngIf="0 != identities.length" |
195 | style="max-width: 50em; min-height: 20em;"> | ||
147 | <div class="card-avatar card-img-top"> | 196 | <div class="card-avatar card-img-top"> |
148 | <div class="card-avatar-character text-dark"> | 197 | <div class="card-avatar-character text-dark"> |
149 | <!--<div class="icon m-1 text-uppercase" [style.background-color]="intToRGB(identity.pubkey)">{{ identity.name[0]}}</div>--> | 198 | <!--<div class="icon m-1 text-uppercase" [style.background-color]="intToRGB(identity.pubkey)">{{ identity.name[0]}}</div>--> |
150 | <i class="fa fa-user-circle"></i> | 199 | <i class="fa fa-user-circle"></i> |
151 | <span class="m-1" style="display: inline-block" ><i>{{ getMessage("identity_list_html@newId") }}</i></span> | 200 | <span class="m-1" style="display: inline-block"><i>{{ getMessage("identity_list_html@newId") }}</i></span> |
152 | </div> | 201 | </div> |
153 | </div> | 202 | </div> |
154 | <div class="card-body"> | 203 | <div class="card-body"> |
@@ -160,6 +209,4 @@ | |||
160 | </div> | 209 | </div> |
161 | </div> | 210 | </div> |
162 | </div> | 211 | </div> |
163 | </div> | 212 | </div> \ No newline at end of file |
164 | |||
165 | |||