File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
Accessors
|
|
|
Outputs
|
close
|
Type : EventEmitter
|
|
|
Methods
|
Private
getGuestUserDetails
|
getGuestUserDetails()
|
|
|
|
Returns : Observable<any>
|
|
Private
getRoleFromDesktopGuestUser
|
getRoleFromDesktopGuestUser()
|
|
|
|
Returns : Observable<string | null>
|
|
Private
getRoleFromLocalStorage
|
getRoleFromLocalStorage()
|
|
|
|
Returns : Observable<string | null>
|
|
Private
isDesktopApp
|
isDesktopApp()
|
|
|
|
|
|
locationSubmit
|
locationSubmit()
|
|
|
|
|
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
|
|
selectStage
|
selectStage()
|
|
|
|
|
|
userTypeSubmit
|
userTypeSubmit()
|
|
|
|
|
|
isIGotSlug
|
Default value : false
|
|
|
|
modal
|
Decorators :
@ViewChild('modal')
|
|
|
|
Private
unsubscribe$
|
Default value : new Subject<void>()
|
|
|
import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
import { ResourceService, ToasterService, UtilService } from '@sunbird/shared';
import * as _ from 'lodash-es';
import { PopupControlService } from '../../../../service/popup-control.service';
import { Observable, of, Subject } from 'rxjs';
import { TenantService, UserService } from '@sunbird/core';
import { catchError, map, takeUntil, tap } from 'rxjs/operators';
import { IDeviceProfile } from '../../interfaces';
import { ITenantData } from './../../../core/services/tenant/interfaces/tenant';
import { CacheService } from '../../../shared/services/cache-service/cache.service';
export enum Stage {
USER_SELECTION = 'user',
LOCATION_SELECTION = 'location'
}
@Component({
selector: 'app-user-onboarding',
templateUrl: './user-onboarding.component.html',
styleUrls: ['./user-onboarding.component.scss']
})
export class UserOnboardingComponent implements OnInit {
@Input() deviceProfile: IDeviceProfile;
@Input() isCustodianOrgUser: boolean;
@Output() close = new EventEmitter<void>();
@ViewChild('modal') modal;
get Stage() { return Stage; }
stage;
tenantInfo: ITenantData;
isIGotSlug = false;
private unsubscribe$ = new Subject<void>();
isGuestUser: boolean;
constructor(
public resourceService: ResourceService,
public toasterService: ToasterService,
public popupControlService: PopupControlService,
public tenantService: TenantService,
private cacheService: CacheService,
private userService: UserService,
private utilService: UtilService
) {
}
ngOnInit() {
this.deviceProfile = { ipLocation: _.get(this.deviceProfile, 'ipLocation') };
this.tenantService.tenantData$
.pipe(takeUntil(this.unsubscribe$))
.subscribe(data => {
/* istanbul ignore else*/
if (_.get(data, 'tenantData')) {
this.tenantInfo = data.tenantData;
this.tenantInfo.titleName = data.tenantData.titleName || this.resourceService.instance;
const orgDetailsFromSlug = this.cacheService.get('orgDetailsFromSlug');
// /* istanbul ignore else */
// if (_.get(orgDetailsFromSlug, 'slug') === this.tenantService.slugForIgot) {
// this.tenantInfo.titleName = _.upperCase(orgDetailsFromSlug.slug);
// this.stage = Stage.LOCATION_SELECTION;
// }
}
});
this.selectStage().subscribe();
}
selectStage() {
const loggedIn = _.get(this.userService, 'loggedIn');
this.isGuestUser = !loggedIn;
let role$: Observable<string | null>;
if (!loggedIn && this.isDesktopApp()) {
role$ = this.getRoleFromDesktopGuestUser();
} else {
role$ = this.getRoleFromLocalStorage();
}
return role$.pipe(
takeUntil(this.unsubscribe$),
tap(userType => {
const showUserSelectionPopup = _.get(this.userService, 'loggedIn') ? (!_.get(this.userService, 'userProfile.profileUserType.type') || !userType) : !userType;
this.stage = showUserSelectionPopup ? Stage.USER_SELECTION : Stage.LOCATION_SELECTION;
}, _ => {
this.stage = Stage.USER_SELECTION;
})
);
}
private getRoleFromDesktopGuestUser(): Observable<string | null> {
const guestUserDetails$ = this.getGuestUserDetails();
const role$ = guestUserDetails$.pipe(
map(guestUser => _.get(guestUser, 'role')),
catchError(_ => of(null))
);
return role$;
}
private getRoleFromLocalStorage(): Observable<string | null> {
return of(localStorage.getItem('userType'));
}
private getGuestUserDetails(): Observable<any> {
return this.userService.getGuestUser();
}
private isDesktopApp(): boolean {
return this.utilService.isDesktopApp;
}
userTypeSubmit() {
if(this.isGuestUser) {
this.close.emit();
this.modal.deny();
} else {
this.stage = Stage.LOCATION_SELECTION;
}
}
locationSubmit() {
this.popupControlService.changePopupStatus(true);
this.close.emit();
}
ngOnDestroy() {
this.unsubscribe$.next();
this.unsubscribe$.complete();
}
}
<app-modal-wrapper *ngIf="stage === Stage.USER_SELECTION" [config]="{disableClose: true, panelClass: 'material-modal'}" #modal>
<ng-template sbModalContent>
<app-onboarding-user-selection [tenantInfo]="tenantInfo" (userSelect)="userTypeSubmit()">
</app-onboarding-user-selection>
</ng-template>
</app-modal-wrapper>
<app-location-selection *ngIf="stage === Stage.LOCATION_SELECTION" [deviceProfile]="deviceProfile" [isClosable]="false"
(close)="locationSubmit()">
<div slot="popup-header" class="w-100 text-center">
<img [src]="tenantInfo?.logo" class="brand-logo" height="40" alt="{{resourceService?.frmelmnts?.lbl?.welcomeToInstance | interpolate:'{instance}': tenantInfo?.titleName}}" />
<h1 class="mb-0 header-text">{{resourceService?.frmelmnts?.lbl?.welcomeToInstance | interpolate:'{instance}': tenantInfo?.titleName}}</h1>
</div>
<div slot="popup-sub-header">
<p class="subtitle" role="heading" aria-level="1">{{resourceService?.messages?.imsg?.m0075}}</p>
</div>
<div slot="popup-footer">
<p>{{resourceService?.messages?.imsg?.m0074}}</p>
</div>
</app-location-selection>
@use "@project-sunbird/sb-styles/assets/mixins/mixins" as *;
.sb-onboard {
&__container {
width: 100%;
height: 100vh;
background: var(--primary-100);
padding: calculateRem(24px);
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
position: relative;
@include respond-above(sm) {
border-radius: calculateRem(8px);
max-width: calculateRem(800px);
min-height: calculateRem(610px);
height: auto;
}
}
&__header {
width: 100%;
text-align: center;
max-width: calculateRem(328px);
h1 {
color: var(--primary-400);
font-size: calculateRem(24px);
font-weight: bold;
letter-spacing: 0;
line-height: calculateRem(32px);
text-align: center;
margin: calculateRem(8px) 0px;
}
}
&__content {
width: calculateRem(648px);
max-width: 100%;
margin-bottom: auto;
overflow: hidden;
overflow-y: auto;
}
&__footer {
margin-top: calculateRem(16px);
width: 100%;
text-align: center;
max-width: calculateRem(328px);
}
.arrow-icon {
float: right;
html[dir="rtl"] & {
float: left;
}
}
.close-modal {
position: absolute;
right: calculateRem(16px);
top: calculateRem(16px);
z-index: 9;
min-width: auto;
}
.back-btn {
position: absolute;
left: calculateRem(8px);
top: calculateRem(16px);
min-width: auto;
}
}
::ng-deep {
p.subtitle {
color: var(--gray-800);
font-size: calculateRem(18px);
font-weight: bold;
letter-spacing: 0;
line-height: calculateRem(26px);
text-align: center;
}
.header-text{
color: var(--primary-400);
font-size: 1.5rem;
font-weight: 700;
letter-spacing: 0;
line-height: 2rem;
text-align: center;
margin: 0.5rem 0;
margin-bottom: 0;
}
}
.animation {
&.start {
transform: translateX(-999px);
transition: all 0.75s ease;
}
}
.sb-onbrd-g-box {
&__language-select {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(144px, auto));
grid-auto-rows: minmax(auto, 88px);
grid-column-gap: calculateRem(24px);
grid-row-gap: calculateRem(16px);
.check-icon {
position: absolute;
top: calculateRem(8px);
right: calculateRem(8px);
}
&__item {
border-radius: calculateRem(4px);
background-color: var(--white);
box-shadow: 0 calculateRem(20px) calculateRem(40px) calculateRem(-10px) var(--rc-d0d0d0);
display: flex;
align-items: center;
justify-content: center;
position: relative;
span {
color: var(--gray-800);
font-size: calculateRem(20px);
}
&:hover,
&.active {
background-color: var(--primary-color);
box-shadow: 0 calculateRem(20px) calculateRem(40px) calculateRem(-10px) rgba(var(--rc-rgba-primary), 0.3);
cursor: pointer;
span {
color: var(--white);
}
}
}
}
&__guest {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(12.5rem, 12.5rem));
grid-auto-rows: minmax(auto, auto);
grid-column-gap: 1rem;
grid-row-gap: 1rem;
align-items: center;
justify-content: center;
.check-icon {
position: absolute;
top: calculateRem(8px);
right: calculateRem(8px);
display: none;
}
&__item {
border-radius: calculateRem(4px);
background-color: var(--white);
box-shadow: 0 calculateRem(20px) calculateRem(40px) calculateRem(-10px) var(--rc-d0d0d0);
text-align: center;
position: relative;
border: calculateRem(2px) solid var(--white);
height: 100%;
.title {
color: var(--gray-800);
font-size: calculateRem(16px);
font-weight: bold;
line-height: normal;
}
&:hover,
&.active {
border: calculateRem(2px) solid var(--primary-color);
border-radius: calculateRem(4px);
background-color: var(--white);
box-shadow: 0 calculateRem(4px) calculateRem(7px) 0 rgba(var(--rc-rgba-primary), 0.3);
cursor: pointer;
.check-icon {
display: block;
}
}
}
}
}
.fields-selection {
display: flex;
flex-direction: column;
@include respond-above(sm) {
flex-direction: row;
}
.sb-field .ui.selection.active.dropdown {
border-color: var(--rc-add8e6);
}
.sb-field .ui.selection.active.dropdown .text {
color: var(--rc-007AFF) !important;
}
.sb-field {
margin-bottom: calculateRem(16px) 0px;
width: 100%;
label {
font-size: calculateRem(14px);
}
}
.onboard-content {
@include respond-above(sm) {
margin-left: 2rem;
html[dir="rtl"] & {
margin-right: 2rem;
}
}
}
.textColorChange {
color: var(--rc-007AFF);
}
}
.field-focus {
display: flex;
flex-direction: column-reverse;
align-items: flex-start;
}
.ui.selection.dropdown.fields-dropdown {
height: 2rem !important;
&:focus {
border: calculateRem(1px) solid var(--rc-007AFF);
color: var(--rc-007AFF) !important;
}
}
.ui.selection.dropdown.fields-dropdown:focus~label {
border: 0px;
color: var(--rc-007AFF);
font-weight: normal;
}
.ui.selection.dropdown.fields-dropdown option {
background: var(--white);
color: var(--black);
}
::ng-deep {
.sb-onbrd-modal {
@include respond-below(sm) {
.ui.modal {
width: 95%;
margin: 0 0 0 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
}
.ui.modal.scroll {
position: fixed !important;
margin-top: o !important;
margin-bottom: 0px !important;
top: 0;
width: 100%;
left: 0px;
right: 0px;
margin: 0 !important;
}
}
}
}
Legend
Html element with directive