File
Metadata
| selector |
tcla-live-apps-login-oauth |
| styleUrls |
./live-apps-login-oauth.component.css |
| templateUrl |
./live-apps-login-oauth.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
Outputs
|
loggedIn
|
Type : EventEmitter<undefined>
|
|
|
Methods
|
handleAuthorize
|
handleAuthorize()
|
|
|
|
|
|
handleChange
|
handleChange(event)
|
|
|
|
|
|
handleChangeLogin
|
handleChangeLogin()
|
|
|
|
|
|
handleCreate
|
handleCreate()
|
|
|
|
|
|
handleReturn
|
handleReturn()
|
|
|
|
|
|
handleSignUp
|
handleSignUp()
|
|
|
|
|
|
loading
|
Default value : false
|
|
|
import {Component, EventEmitter, Input, Output} from '@angular/core';
import {LiveAppsService} from '../../services/live-apps.service';
import {TcAppDefinitionService} from '../../services/tc-app-definition.service';
import {CredentialsService} from '../../services/credentials.service';
@Component({
selector: 'tcla-live-apps-login-oauth',
templateUrl: './live-apps-login-oauth.component.html',
styleUrls: ['./live-apps-login-oauth.component.css']
})
export class LiveAppsLoginOauthComponent {
@Input() appName: string;
@Output() loggedIn: EventEmitter<undefined> = new EventEmitter<undefined>();
/**
* Output useOauth event
*/
@Output() createOauthKey = new EventEmitter();
/**
* Output signUp event
*/
@Output() signUp = new EventEmitter();
/**
* Output changeLogin event
*/
@Output() changeLogin = new EventEmitter();
constructor(private liveAppsService: LiveAppsService, protected appDefinitionService: TcAppDefinitionService, protected credentialsService: CredentialsService) { }
accessKey: string;
error: string;
loading = false;
handleChange(event) {
this.accessKey = event.detail.value;
}
handleChangeLogin() {
this.changeLogin.emit();
}
handleCreate() {
this.createOauthKey.emit();
}
handleSignUp() {
this.signUp.emit();
}
handleAuthorize() {
this.loading = true;
this.error = undefined;
this.liveAppsService.checkAuth(this.accessKey)
.then(
response => {
console.log(response);
// save auth
this.credentialsService.setKey(this.accessKey);
console.log('Credentials Saved');
this.appDefinitionService.refresh().toPromise().then(
ok => {
this.credentialsService.setMode('oauth');
this.loggedIn.emit();
}
);
}
)
.catch(
error => {
console.error('Unable to check authorization: ', error);
this.loading = false;
this.error = 'Invalid activation key';
}
);
}
handleReturn() {
this.changeLogin.emit();
}
}
<div class="login-container">
<div class="login-screen">
<div class="login-container-box">
<div class="login-box">
<div class="login-inner-box">
<div class="welcome-text">Welcome to</div>
<div class="welcome-content">
<mat-icon svgIcon="ic-tibco-logo" class="tibco-logo"></mat-icon>
<div class="app-text">{{appName}}</div>
</div>
<div class="login-fields">
<mat-form-field>
<input matInput type="password" placeholder="Authorization key" [(ngModel)]="accessKey" name="authorizationKey" required>
<mat-hint align="start">Paste your authorization key to get started</mat-hint>
</mat-form-field>
</div>
<div class="sign-in-section">
<button style="width: 144px;" type="submit" mat-raised-button color="primary" (click)="handleAuthorize()" [disabled]="!this.accessKey || this.loading">Login</button>
</div>
<mat-spinner *ngIf="loading" class="spinner" diameter="40"></mat-spinner>
<div *ngIf="error" class="error-text">{{error}}</div>
<div class="sign-up-section">
<div class="sign-up-text">
<span>No oauth key? </span>
<a (click)="handleCreate()">Create oauth key</a>
<span> or </span>
<a (click)="handleReturn()">Return to login</a>
<br>
<span>Don’t have an account? </span><a (click)="handleSignUp()">Sign up</a>
</div>
</div>
</div>
</div>
</div>
<div class="copyright-text">
<span>Copyright © 2021 TIBCO Software Inc. All Rights Reserved.</span>
</div>
</div>
</div>
.login-container-box {
flex: 1;
align-items: center;
display: flex;
}
.login-container {
height: 100%;
display: flex;
flex-direction: column;
}
.login-screen {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.login-box {
height: 472px;
width: 424px;
border-radius: 10px;
background-color: #FFFFFF;
box-shadow: 0 2px 8px 0 rgba(221,221,221,0.88);
}
.login-inner-box {
padding: 32px;
height: 100%;
display: flex;
flex-direction: column;
}
.welcome-text {
color: #1774E5;
font-family: var(--app-font-extra-light, Source Sans Pro);
font-size: 18px;
letter-spacing: 0;
line-height: 21px;
align-self: center;
display: flex;
justify-content: center;
}
.welcome-content {
display: flex;
flex-direction: row;
justify-content: center;
padding-left: 10px;
padding-right: 10px;
margin-top: 8px;
align-items: center;
}
.tibco-logo {
display: flex;
margin-bottom: 3px;
flex-direction: row;
align-self: center;
width: 123px;
height: 32px;
}
.spinner {
display: flex;
flex-direction: row;
align-self: center;
margin-top: 15px;
margin-bottom: 15px;
}
.app-text {
color: #1774E5;
font-family: var(--app-font-extra-light, Source Sans Pro);
font-size: 36px;
letter-spacing: -1px;
line-height: 38px;
}
.login-fields {
margin-top: 50px;
width: 100%;
}
.login-fields > mat-form-field {
width: 100%;
}
.sign-in-section {
margin-top: 30px;
display: flex;
flex-direction: row;
justify-content: center;
}
.sign-up-section {
display: flex;
flex-direction: row;
flex: 1;
align-items: flex-end;
}
.sign-up-text {
display: inline-block;
width: 350px;
color: #212121;
font-family: var(--app-font-extra-light, Source Sans Pro);
font-size: 12px;
letter-spacing: 0;
line-height: 18px;
text-align: center;
}
.sign-up-text a {
color: #1774E5;
font-family: var(--app-font-extra-light, Source Sans Pro);
font-size: 12px;
letter-spacing: 0;
line-height: 18px;
text-align: center;
}
.error-text {
display: flex;
color: red;
font-family: var(--app-font-extra-light, Source Sans Pro);
font-size: 12px;
font-weight: 600;
letter-spacing: 0;
line-height: 27px;
justify-content: center;
}
.copyright-text {
display: flex;
color: #4A4A4A;
font-family: "Source Sans Pro";
font-size: 13px;
letter-spacing: 0;
line-height: 20px;
text-align: center;
align-items: flex-end;
margin-bottom: 20px;
}
a:hover {
cursor: pointer;
}
Legend
Html element with directive