siva kumar 974929e76d [ADF-3666] User Profile - Provide a way to show SSO Logged-In User (#3976)
* * Created IdentityUserService
* Created IdentityUserModel
* Added JWT lib into package.json

* * Provided a way to show SSO user info

* * Added  condition to check sso login

* * Refactored userInfo component* Updated unit tests to the recent changes

* * Created IdenityUser model
* Refactored userInfoComponent

* * Modified userInfoComponent
* Modified unit tests

* * Used Fullname pipe* Removed the logic that we had to display fullname in the ecm/bpm/identity model* Created JwtHelperService* Modified ecm/bpm services * added test cases to the identity service

* * Moved jwt service to core/service

* * Updated userInfo doc

* * Added missing return types

* * Created a mockToken* Added unit tests to the JwtHelperService* Updated identityUserService unit test

* Update jwt-helper.service.spec.ts

* * Updated bpm/ecm/identity services
2018-11-22 10:03:19 +00:00

125 lines
8.2 KiB
HTML

<div id="userinfo_container" [class.adf-userinfo-name-right]="showOnRight()"
class="adf-userinfo-container" *ngIf="isLoggedIn()">
<ng-container *ngIf="showName">
<span *ngIf="identityUser$ | async as identityUser; else showBpmAndEcmUserFullNames" id="adf-userinfo-identity-name-display"
class="adf-userinfo-name">{{identityUser | fullName}}</span>
<ng-template #showBpmAndEcmUserFullNames>
<span *ngIf="ecmUser$ | async as ecmUser; else showBpmUserFullName" id="adf-userinfo-ecm-name-display"
class="adf-userinfo-name">{{ecmUser | fullName}}</span>
<ng-template #showBpmUserFullName>
<span *ngIf="bpmUser$ | async as bpmUser" id="adf-userinfo-bpm-name-display"
class="adf-userinfo-name">{{bpmUser | fullName}}</span>
</ng-template>
</ng-template>
</ng-container>
<button mat-button [matMenuTriggerFor]="menu" class="adf-userinfo-menu_button" data-automation-id="adf-user-profile">
<div class="adf-userinfo-button-profile" id="user-profile">
<div *ngIf="identityUser$ | async as identityUser; else showBpmAndEcmUserImage" id="identity-user-image">
<div [outerHTML]="identityUser | usernameInitials:'adf-userinfo-pic'"></div>
</div>
<ng-template #showBpmAndEcmUserImage>
<div *ngIf="ecmUser$ | async as ecmUser; else showBpmUserImage" id="ecm-user-image">
<div *ngIf="ecmUser.avatarId; else initialTemplate" class="adf-userinfo-profile-container">
<img id="logged-user-img" [src]="getEcmAvatar(ecmUser.avatarId)" alt="user-info-profile-button"
class="adf-userinfo-profile-image"/>
</div>
<ng-template #initialTemplate>
<div [outerHTML]="ecmUser | usernameInitials:'adf-userinfo-pic'"></div>
</ng-template>
</div>
<ng-template #showBpmUserImage>
<div *ngIf="bpmUser$ | async as bpmUser" id="bpm-user-image">
<div *ngIf="bpmUser.pictureId; else initialTemplate" class="adf-userinfo-profile-container">
<img id="logged-user-img" [src]="getBpmUserImage()" alt="user-info-profile-button"
class="adf-userinfo-profile-image"/>
</div>
<ng-template #initialTemplate>
<div [outerHTML]="bpmUser | usernameInitials:'adf-userinfo-pic'"></div>
</ng-template>
</div>
</ng-template>
</ng-template>
</div>
</button>
<mat-menu #menu="matMenu" id="user-profile-lists" [xPosition]="menuPositionX" [yPosition]="menuPositionY" [overlapTrigger]="false" class="adf-userinfo-menu">
<mat-tab-group id="tab-group-env" (click)="stopClosing($event)"
class="adf-userinfo-tab" [class.adf-hide-tab]="!(bpmUser$ | async) || !(ecmUser$ | async)">
<mat-tab id="ecm-panel" label="{{ 'USER_PROFILE.TAB.CS' | translate }}" *ngIf="ecmUser$ | async as ecmUser">
<mat-card class="adf-userinfo-card">
<mat-card-header class="adf-userinfo-card-header" [style.background-image]="'url(' + ecmBackgroundImage + ')'">
<div *ngIf="ecmUser.avatarId; else initialTemplate" class="adf-userinfo-profile-container adf-hide-small">
<img class="adf-userinfo-profile-picture" id="ecm-user-detail-image"
alt="ecm-profile-image" [src]="getEcmAvatar(ecmUser.avatarId)" />
</div>
<ng-template #initialTemplate>
<div [outerHTML]="ecmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
</ng-template>
<div class="adf-userinfo-title" id="ecm-username">{{ecmUser | fullName}}</div>
</mat-card-header>
<mat-card-content>
<div class="adf-userinfo-supporting-text">
<div class="adf-userinfo-detail">
<span id="ecm-full-name" class="adf-userinfo__detail-title">{{ecmUser | fullName}}</span>
<span class="adf-userinfo__detail-profile" id="ecm-email"> {{ecmUser.email}} </span>
</div>
<div class="adf-userinfo-detail">
<span class="adf-userinfo__secondary-info" id="ecm-job-title-label">
{{ 'USER_PROFILE.LABELS.ECM.JOB_TITLE' | translate }}
<span id="ecm-job-title" class="adf-userinfo__detail-profile"> {{ ecmUser.jobTitle ? ecmUser.jobTitle : 'N/A' }} </span>
</span>
</div>
</div>
</mat-card-content>
</mat-card>
</mat-tab>
<mat-tab id="bpm-panel" label="{{ 'USER_PROFILE.TAB.PS' | translate }}" *ngIf="bpmUser$ | async as bpmUser">
<mat-card class="adf-userinfo-card">
<mat-card-header class="adf-userinfo-card-header" [style.background-image]="'url(' + bpmBackgroundImage + ')'">
<img *ngIf="bpmUser.pictureId; else initialTemplate" class="adf-userinfo-profile-picture adf-hide-small" id="bpm-user-detail-image"
alt="bpm-profile-image" [src]="getBpmUserImage()"/>
<ng-template #initialTemplate>
<div [outerHTML]="bpmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
</ng-template>
<div class="adf-userinfo-title" id="bpm-username">{{bpmUser | fullName}}</div>
</mat-card-header>
<mat-card-content>
<div class="adf-userinfo-supporting-text">
<div class="adf-userinfo-detail">
<span id="bpm-full-name" class="adf-userinfo__detail-title">{{ bpmUser | fullName }}</span>
<span class="adf-userinfo__detail-profile" id="bpm-email"> {{bpmUser.email}} </span>
</div>
<div class="adf-userinfo-detail">
<span id="bpm-tenant" class="adf-userinfo__secondary-info">
{{ 'USER_PROFILE.LABELS.BPM.TENANT' | translate }}
<span class="adf-userinfo__detail-profile">{{ bpmUser.tenantName ? bpmUser.tenantName : '' }}</span>
</span>
</div>
</div>
</mat-card-content>
</mat-card>
</mat-tab>
<mat-tab id="identity-panel" *ngIf="identityUser$ | async as identityUser">
<mat-card class="adf-userinfo-card">
<mat-card-header class="adf-userinfo-card-header" [style.background-image]="'url(' + bpmBackgroundImage + ')'">
<div
[outerHTML]="identityUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'">
</div>
<div class="adf-userinfo-title" id="identity-username">{{identityUser | fullName}}</div>
</mat-card-header>
<mat-card-content>
<div class="adf-userinfo-supporting-text">
<div class="adf-userinfo-detail">
<span id="identity-full-name" class="adf-userinfo__detail-title">{{identityUser | fullName}}</span>
<span class="adf-userinfo__detail-profile" id="identity-email"> {{identityUser.email}} </span>
</div>
</div>
</mat-card-content>
</mat-card>
</mat-tab>
</mat-tab-group>
</mat-menu>
</div>