File
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
|
description
|
Type : string
|
Default value : 'OVERLAY_INFO_TEXT_COMMON'
|
|
|
|
source
|
Type : string
|
Default value : ''
|
|
|
|
title
|
Type : string
|
Default value : 'OVERLAY_LABEL_COMMON'
|
|
|
Outputs
|
valueChange
|
Type : EventEmitter
|
|
|
Methods
|
Async
signIn
|
signIn(skipNavigation?)
|
|
|
Parameters :
| Name |
Optional |
| skipNavigation |
Yes
|
|
|
appName
|
Type : string
|
Default value : ''
|
|
|
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Router } from '@angular/router';
import {RouterLinks} from '@app/app/app.constant';
import { AppVersion } from '@ionic-native/app-version/ngx';
import {Environment, InteractSubtype, InteractType, TelemetryGeneratorService} from '@app/services';
@Component({
selector: 'app-sign-in-card',
templateUrl: './sign-in-card.component.html',
styleUrls: ['./sign-in-card.component.scss'],
})
export class SignInCardComponent {
@Input() source = '';
@Input() title = 'OVERLAY_LABEL_COMMON';
@Input() description = 'OVERLAY_INFO_TEXT_COMMON';
@Output() valueChange = new EventEmitter();
appName = '';
constructor(
private appVersion: AppVersion,
private router: Router,
private telemetryGeneratorService: TelemetryGeneratorService
) {
this.appVersion.getAppName()
.then((appName: any) => {
this.appName = appName;
});
}
async signIn(skipNavigation?) {
if (this.source) {
skipNavigation['source'] = this.source;
}
this.telemetryGeneratorService.generateInteractTelemetry(
InteractType.TOUCH,
InteractSubtype.SIGNIN_OVERLAY_CLICKED,
Environment.HOME,
this.source, null
);
this.router.navigate([RouterLinks.SIGN_IN], {state: skipNavigation});
}
}
<div *ngIf="source != 'courses'">
<ion-card>
<ion-card-header>
<strong>{{ title | translate: {'%s': appName } }}</strong>
</ion-card-header>
<ion-card-content class="sign-in-card-text">
{{ description | translate: {'%s': appName } }}
<br />
<br />
<ion-button expand="block" (click)="signIn({})" class="sign-in-btn">{{ 'SIGN_IN' | translate }}</ion-button>
</ion-card-content>
</ion-card>
</div>
<div *ngIf="source == 'courses'">
<div class="sign-in-card-success">
<p class="sign-in-card-title">{{ 'WANT_TO_CHECK_FREE_TRAININGS' | translate }}</p>
<div class="sign-in-block">
<p>{{ 'LOGIN_TO_JOIN_TRAINING' | translate }}</p>
<ion-button expand="block" class="ion-text-capitalize" (click)="signIn({skipRootNavigation: true})">{{ 'OVERLAY_SIGN_IN' | translate | titlecase }}</ion-button>
</div>
</div>
</div>
@import "src/assets/styles/_variables.scss";
:host {
.sign-in-btn {
border-radius: 4px !important;
font-size: 0.875rem;
}
.sign-in-card-text {
font-weight: 600;
color: map-get($colors, primary_black) !important;
font-size: 0.875rem;
}
ion-card {
background-color: map-get($colors, white);
}
ion-card-header {
color: map-get($colors, primary_black) !important;
font-size: 1.1rem;
}
.sign-in-card-success{
.sign-in-card-title{
margin: 0 18px 8px;
padding-top: 16px;
font-family: "Noto Sans", sans-serif;
color: map-get($colors, white);
font-weight: bold;
font-size: 1rem;
}
.sign-in-block{
padding: 16px 12px 12px;
text-align: center;
margin: 8px;
background-color: map-get($colors, white);
border-radius: 1rem;
box-shadow: 0 20px 40px -10px map-get($colors, light_silver);
p{
margin-bottom: 8px;
font-family: "Noto Sans", sans-serif;
color: map-get($colors, primary_black);
}
ion-button{
--background: #{$green};
--background-hover: #{$green};
--background-activated: #{$green};
font-size: 1.125rem;
}
}
}
}
Legend
Html element with directive