File

C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-core-lib/src/lib/components/tibco-cloud-login/tibco-cloud-login.component.ts

Description

This component will attempt to log the user in.

alt-text

Implements

OnChanges

Example

<tc-tibco-cloud-login *ngIf="!loggedIn (loggedIn)="handleLoggedIn($event)"></tc-tibco-cloud-login>

Metadata

selector tc-tibco-cloud-login
styleUrls ./tibco-cloud-login.component.css
templateUrl ./tibco-cloud-login.component.html

Index

Properties
Methods
Inputs
Outputs
Accessors

Constructor

constructor(tcLogin: TcLoginService)

The Constructor creates the Login Dialog

Parameters :
Name Type Optional
tcLogin TcLoginService No

Inputs

appName
Type : string
loginPrefill
Type : LoginPrefill

Login Data

Outputs

loggedIn
Type : EventEmitter

Notify parent that user is logged in ok.

signUp
Type : EventEmitter

Output signUp event

useOauth
Type : EventEmitter

Output useOauth event

Methods

doLogin
doLogin()
Returns : void
handleSignUp
handleSignUp()
Returns : void
handleUseOauth
handleUseOauth()
Returns : void
ngOnChanges
ngOnChanges(changes: SimpleChanges)
Parameters :
Name Type Optional
changes SimpleChanges No
Returns : void

Properties

accountsInfo
Type : AccountsInfo
Public appName
Type : string
Default value : 'Cloud Starters'

App Name

auth
Type : Observable<AuthInfo>
authInfo
Type : AuthInfo
clientId
Type : string
error
Type : string
loading
Default value : false
matExpansionPanel
Type : MatExpansionPanel
Decorators :
@ViewChild(MatExpansionPanel, {static: false})
name
Type : string
password
Type : string
token
Type : AccessToken

Accessors

AppName
setAppName(appName: string)
Parameters :
Name Type Optional
appName string No
Returns : void
import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild} from '@angular/core';
import {AccountsInfo, LoginPrefill, Subscription} from '../../models/tc-login';
import {Observable, ObservableInput} from 'rxjs';
import {map, mergeMap} from 'rxjs/operators';
import {AccessToken, AuthInfo} from '../../models/tc-login';
import {TcLoginService} from '../../services/tc-login.service';
import {MatExpansionPanel} from '@angular/material/expansion';

/**
 * This component will attempt to log the user in.
 *
 * ![alt-text](../Cloud-Login.png "Image")
 *
 *  @example <tc-tibco-cloud-login *ngIf="!loggedIn (loggedIn)="handleLoggedIn($event)"></tc-tibco-cloud-login>
 */
@Component({
  selector: 'tc-tibco-cloud-login',
  templateUrl: './tibco-cloud-login.component.html',
  styleUrls: ['./tibco-cloud-login.component.css']
})

export class TibcoCloudLoginComponent implements OnChanges {

  /**
   * Notify parent that user is logged in ok.
   */
  @Output() loggedIn = new EventEmitter();
  /**
   * Output useOauth event
   */
  @Output() useOauth = new EventEmitter();
  /**
   * Output signUp event
   */
  @Output() signUp = new EventEmitter();
  /**
   * Login Data
   */
  @Input() loginPrefill: LoginPrefill;

  /**
   * App Name
   */
  public appName = 'Cloud Starters';

  @Input('appName') set AppName(appName: string) {
    if (appName) {
      this.appName = appName;
    }
  }

  @ViewChild(MatExpansionPanel, { static: false }) matExpansionPanel: MatExpansionPanel;

  name: string;
  password: string;
  clientId: string;
  loading = false;
  accountsInfo: AccountsInfo;
  error: string;
  token: AccessToken;
  authInfo: AuthInfo;
  auth: Observable<AuthInfo>;

  /**
   * The Constructor creates the Login Dialog
   */
  constructor(
    private tcLogin: TcLoginService
  ) {

  }

  doLogin() {
    if (this.matExpansionPanel && this.matExpansionPanel.expanded) {
      this.matExpansionPanel.expanded = false;
    }
    this.loading = true;
    this.error = undefined;

    this.auth = this.tcLogin.login(this.name, this.password, this.clientId).pipe(
      map((authInfo: AuthInfo) => {
          this.authInfo = authInfo;
          return authInfo;
        }
      )
    );

    this.auth.subscribe(authorize => {
        this.loading = false;
        // ok logged in
        console.log('User logged in...');
        // update claims
        this.loggedIn.emit({authInfo: authorize, accessToken: this.token});
      },
      error => {
        this.loading = false;
        if (error.error && error.error.errorMsg) {
          this.error = error.error.errorMsg;
        }
        console.error('Login Failed: ');
        console.error(error);
      });
  }

  handleUseOauth() {
    this.useOauth.emit();
  }

  handleSignUp() {
    this.signUp.emit();
  }

  ngOnChanges(changes: SimpleChanges): void {

    if (this.loginPrefill) {
      this.name = this.loginPrefill.emailId;
      this.clientId = this.loginPrefill.clientId;
    }
  }
}
<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-container-form">
            <form class="login-fields" #laLoginForm="ngForm" class="la-login-form" (submit)="doLogin()" fxLayout="column" fxFlex disabled="loading">
              <mat-form-field>
                <input matInput type="text" placeholder="Email Address" [(ngModel)]="name" name="email" required>
              </mat-form-field>
              <mat-form-field>
                <input matInput type="password" placeholder="Password" [(ngModel)]="password" name="password" required>
              </mat-form-field>
              <mat-accordion>
                <mat-expansion-panel [expanded]="!clientId">
                  <mat-expansion-panel-header>
                    <mat-panel-title>API Access Keys</mat-panel-title>
                  </mat-expansion-panel-header>
                  <div fxLayout="column">
                    <mat-form-field fxFlex>
                      <input matInput placeholder="Client Id" [(ngModel)]="clientId"  name="ClientID" required>
                    </mat-form-field>
                  </div>
                </mat-expansion-panel>
              </mat-accordion>
              <div class="sign-in-section">
                <button style="width: 144px;" type="submit" mat-raised-button color="primary" type="submit" [disabled]="(!laLoginForm.form.valid || !clientId) || loading">Login</button>
              </div>
            </form>
          </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>Have an oauth key? </span>
              <a (click)="handleUseOauth()">Use oauth authentication</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>

./tibco-cloud-login.component.css

.la-login-card {
}

.la-login-form {
}

.la-login-div {
  min-width: 300px;
}

.la-login-button {
  width: 50px;
}

.la-login-info-pane {
  min-height: 50px;
  height: 50px;
  max-height: 50px;
  margin-top: 10px;
}

.spacer {
  min-height: 0px;
}

.la-login-button-div {
  margin-top: 25px;
}



.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;
  overflow: hidden;
}

.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;
}

.spinner {
  display: flex;
  flex-direction: row;
  align-self: center;
  margin-top: 15px;
}

.tibco-logo {
  margin-bottom: 3px;
  display: flex;
  flex-direction: row;
  align-self: center;
  width: 123px;
  height: 32px;
}

.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: 20px;
  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;
}

.login-container-form {
  margin-top: 20px;
}

a:hover {
  cursor: pointer;
}

Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""