-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Signed-off-by: Mirko Mollik <[email protected]>
- Loading branch information
Showing
10 changed files
with
193 additions
and
174 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
125 changes: 52 additions & 73 deletions
125
libs/holder-shared/src/lib/credentials/credentials-list/credentials-list.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,77 +1,56 @@ | ||
| <div fxLayout="row" fxLayoutAlign="space-between center"> | ||
| <h3 *ngIf="type === 'all'">Credentials</h3> | ||
| <h3 *ngIf="type === 'archived'">Archived credentials</h3> | ||
| <button | ||
| id="menu" | ||
| mat-icon-button | ||
| [matMenuTriggerFor]="menu" | ||
| aria-label="Example icon-button with a menu" | ||
| > | ||
| <mat-icon>more_vert</mat-icon> | ||
| </button> | ||
| <mat-menu #menu="matMenu"> | ||
| <button mat-menu-item (click)="show('archived')" *ngIf="type === 'all'"> | ||
| <mat-icon>archive</mat-icon> | ||
| <span>Archived Credentials</span> | ||
| </button> | ||
| <button mat-menu-item (click)="show('all')" *ngIf="type === 'archived'"> | ||
| <mat-icon>verified</mat-icon> | ||
| <span>Valid Credentials</span> | ||
| </button> | ||
| <button mat-menu-item (click)="render = 'card'" *ngIf="render !== 'card'"> | ||
| <mat-icon>credit_card</mat-icon> | ||
| <span>Show list</span> | ||
| </button> | ||
| <button mat-menu-item (click)="render = 'image'" *ngIf="render !== 'image'"> | ||
| <mat-icon>list</mat-icon> | ||
| <span>Show cards</span> | ||
| </button> | ||
| </mat-menu> | ||
| </div> | ||
| <mat-form-field appearance="outline" id="search"> | ||
| <mat-label>Search</mat-label> | ||
| <input matInput type="text" [formControl]="search" /> | ||
| <mat-icon matSuffix>search</mat-icon> | ||
| </mat-form-field> | ||
| <div fxLayout="column" fxLayoutGap="16px"> | ||
| @for (credential of credentials; track credential) { | ||
| <img | ||
| *ngIf="render === 'image'" | ||
| [routerLink]="credential.id" | ||
| class="image" | ||
| [alt]="credential.display.background_image!.alt_text" | ||
| [src]="credential.display.background_image!.url" | ||
| /> | ||
| <div | ||
| *ngIf="render === 'card'" | ||
| [routerLink]="credential.id" | ||
| class="card" | ||
| fxLayout="row" | ||
| fxLayoutGap="16px" | ||
| fxLayoutAlign="start center" | ||
| [ngStyle]="{ | ||
| 'background-color': credential.display.background_color, | ||
| color: credential.display.text_color | ||
| }" | ||
| > | ||
| <div fxLayout="row" fxLayoutAlign="space-between start"> | ||
| <div fxFlex="100" fxFlex.gt-sm="30" *ngIf="!(mobile && credentialShown)"> | ||
| <div fxLayout="row" fxLayoutAlign="space-between center"> | ||
| <h3 *ngIf="type === 'all'">Credentials</h3> | ||
| <h3 *ngIf="type === 'archived'">Archived credentials</h3> | ||
| <button | ||
| id="menu" | ||
| mat-icon-button | ||
| [matMenuTriggerFor]="menu" | ||
| aria-label="Example icon-button with a menu" | ||
| > | ||
| <mat-icon>more_vert</mat-icon> | ||
| </button> | ||
| <mat-menu #menu="matMenu"> | ||
| <button mat-menu-item (click)="show('archived')" *ngIf="type === 'all'"> | ||
| <mat-icon>archive</mat-icon> | ||
| <span>Archived Credentials</span> | ||
| </button> | ||
| <button mat-menu-item (click)="show('all')" *ngIf="type === 'archived'"> | ||
| <mat-icon>verified</mat-icon> | ||
| <span>Valid Credentials</span> | ||
| </button> | ||
| </mat-menu> | ||
| </div> | ||
| <mat-form-field appearance="outline" id="search"> | ||
| <mat-label>Search</mat-label> | ||
| <input matInput type="text" [formControl]="search" /> | ||
| <mat-icon matSuffix>search</mat-icon> | ||
| </mat-form-field> | ||
| <div fxLayout="column" fxLayoutGap="16px"> | ||
| <mat-nav-list> | ||
| @for (credential of credentials; track credential) { | ||
| <a mat-list-item [routerLink]="credential.id"> | ||
| <img | ||
| [src]="credential.display.background_image!.url" | ||
| matListItemAvatar | ||
| alt="Credential" | ||
| /> | ||
| <div matListItemTitle>{{ credential.display.name }}</div> | ||
| <div matListItemLine>{{ credential.issuer.name }}</div> | ||
| </a> | ||
| } | ||
| </mat-nav-list> | ||
| </div> | ||
| <div | ||
| [ngStyle]="{ | ||
| 'background-image': | ||
| 'url(' + credential.display.background_image!.url + ')' | ||
| }" | ||
| class="icon" | ||
| ></div> | ||
| <div> | ||
| <h4>{{ credential.display.name }}</h4> | ||
| <span>{{ credential.issuer.name }}</span> | ||
| *ngIf="credentials.length === 0" | ||
| fxLayout="column" | ||
| fxLayoutAlign="center center" | ||
| > | ||
| <p>No credentials found</p> | ||
| </div> | ||
| </div> | ||
| } | ||
| </div> | ||
| <div | ||
| *ngIf="credentials.length === 0" | ||
| fxLayout="column" | ||
| fxLayoutAlign="center center" | ||
| > | ||
| <p>No credentials found</p> | ||
| <div fxShow.gt-sm="true" fxFlex.gt-sm="70" *ngIf="credentialShown"> | ||
| <router-outlet></router-outlet> | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
111 changes: 59 additions & 52 deletions
111
libs/holder-shared/src/lib/credentials/credentials-show/credentials-show.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,65 +1,72 @@ | ||
| <div *ngIf="credential" id="credential"> | ||
| <div fxLayout="row" fxLayoutAlign="space-between center"> | ||
| <div fxLayout="row" fxLayoutGap="16px" fxLayoutAlign="start center"> | ||
| <button mat-icon-button [routerLink]="'../'"> | ||
| <mat-icon>arrow_back</mat-icon> | ||
| </button> | ||
| <h3 *ngIf="metadata.display">{{ metadata.display![0].name }}</h3> | ||
| <div *ngIf="credential" id="credential" fxLayout="column" fxLayoutGap="16px"> | ||
| <div | ||
| fxLayout="column" | ||
| fxLayout.gt-sm="row" | ||
| fxLayoutAlign="start stretch" | ||
| fxLayoutGap="16px" | ||
| > | ||
| <img | ||
| *ngIf="metadata.display" | ||
| class="image" | ||
| [alt]="metadata.display![0].logo?.alt_text" | ||
| [src]="metadata.display![0].background_image!.url" | ||
| alt="Credential image" | ||
| /> | ||
| <div class="header" fxFlexOrder.lt-sm="-1"> | ||
| <div fxLayout="row" fxLayoutGap="16px" fxLayoutAlign="end center"> | ||
| <button mat-icon-button [matMenuTriggerFor]="menu"> | ||
| <mat-icon>more_vert</mat-icon> | ||
| </button> | ||
| <mat-menu #menu="matMenu"> | ||
| <button mat-menu-item (click)="copyRaw()"> | ||
| <mat-icon>content_copy</mat-icon> | ||
| <span>Raw credential</span> | ||
| </button> | ||
| <button mat-menu-item (click)="delete()"> | ||
| <mat-icon>delete</mat-icon> | ||
| <span>Delete</span> | ||
| </button> | ||
| </mat-menu> | ||
| </div> | ||
| <div> | ||
| <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px"> | ||
| <img | ||
| *ngIf="credential.issuer.logo" | ||
| [src]="credential.issuer.logo.url" | ||
| [alt]="credential.issuer.logo.alt_text" | ||
| class="issuer-image" | ||
| /> | ||
| <mat-card-title>{{ credential.issuer.name }}</mat-card-title> | ||
| </div> | ||
| <h3 *ngIf="metadata.display">{{ metadata.display![0].name }}</h3> | ||
| </div> | ||
| </div> | ||
| <button mat-icon-button [matMenuTriggerFor]="menu"> | ||
| <mat-icon>more_vert</mat-icon> | ||
| </button> | ||
| <mat-menu #menu="matMenu"> | ||
| <button mat-menu-item (click)="copyRaw()"> | ||
| <mat-icon>content_copy</mat-icon> | ||
| <span>Raw credential</span> | ||
| </button> | ||
| <button mat-menu-item (click)="delete()"> | ||
| <mat-icon>delete</mat-icon> | ||
| <span>Delete</span> | ||
| </button> | ||
| </mat-menu> | ||
| </div> | ||
| <img | ||
| *ngIf="metadata.display" | ||
| class="image" | ||
| [alt]="metadata.display![0].logo?.alt_text" | ||
| [src]="metadata.display![0].background_image!.url" | ||
| /> | ||
| <mat-card> | ||
| <mat-card-header> | ||
| <img | ||
| mat-card-avatar | ||
| *ngIf="credential.issuer.logo" | ||
| [src]="credential.issuer.logo.url" | ||
| [alt]="credential.issuer.logo.alt_text" | ||
| /> | ||
| <mat-card-title>{{ credential.issuer.name }}</mat-card-title> | ||
| <mat-card-subtitle *ngIf="status !== 'valid'" class="error-state">{{ | ||
| status | ||
| }}</mat-card-subtitle> | ||
| <mat-card-title>Claims</mat-card-title> | ||
| </mat-card-header> | ||
| <mat-list> | ||
| @for (claim of claims; track claim) { | ||
| <mat-list-item> | ||
| <span matListItemTitle>{{ claim.key }}</span> | ||
| <span matListItemLine>{{ claim.value }}</span> | ||
| <span matListItemTitle>{{ claim.value }}</span> | ||
| <span matListItemLine>{{ claim.key }}</span> | ||
| </mat-list-item> | ||
| } | ||
| <mat-divider></mat-divider> | ||
| <mat-list-item> | ||
| <span matListItemTitle>Issuance Date</span> | ||
| <span matListItemLine>{{ | ||
| getClaimAsNumber('iat') * 1000 | date : 'medium' | ||
| }}</span> | ||
| </mat-list-item> | ||
| <mat-list-item *ngIf="getClaim('exp')"> | ||
| <span matListItemTitle>Expiration Date</span> | ||
| <span matListItemLine>{{ | ||
| getClaimAsNumber('exp') * 1000 | date : 'medium' | ||
| }}</span> | ||
| </mat-list-item> | ||
| </mat-list> | ||
| </mat-card> | ||
| <!-- <pre>{{ metadata | json }}</pre> --> | ||
| <mat-list> | ||
| <mat-list-item> | ||
| <span matListItemTitle>{{ | ||
| getClaimAsNumber('iat') * 1000 | date : 'medium' | ||
| }}</span> | ||
| <span matListItemLine>Issuance Date</span> | ||
| </mat-list-item> | ||
| <mat-list-item *ngIf="getClaim('exp')"> | ||
| <span matListItemTitle>{{ | ||
| getClaimAsNumber('exp') * 1000 | date : 'medium' | ||
| }}</span> | ||
| <span matListItemLine>Expiration Date</span> | ||
| </mat-list-item> | ||
| </mat-list> | ||
| </div> |
Oops, something went wrong.