File

src/lib/account-access-button/account-access-button.component.ts

Description

Account AccessButton Component
Dynamic component to easily handle User session

Example

<cryptr-account-access-button [auth]="auth">
</cryptr-account-access-button>

Metadata

selector cryptr-account-access-button[auth]
styleUrls account-access-button.component.scss
templateUrl account-access-button.component.html

Inputs

accountBtnClass

Class for user account access button.
It will define either button inside widget or
account button when chosing widget false

Type: string

accountBtnStyle

Style for user account access button.
It will define either button inside widget or
account button when chosing widget false

Type: any

accountLabel

Text for user account access button.
It will define either button inside widget or
account button when chosing widget false

Type: string

auth

Cryptr Auth service to use for this component

Type: AuthService

badgeClass

Class for initials badge in widget toggle button

Type: string

badgeStyle

Style for initials badge in widget toggle button

Type: any

buttonLabel

Text to show in widget button.
If none it will display tenant domain string

Type: string

childClass

Class for sign button when no active session

Type: string

childStyle

Desired style to apply arrount cryptrWidgetChild

Type: any

defaultSignText

Text to show inside sign button when no active session

Type: string

defaultSignType

Choose if Component should prompt sign in or sign up when
no active session

Default: Sign.In -> "signin"

Type: Sign

isWidget

Choose if component should behave like a widget.

Default: true

Type: boolean

locale

Chosen locale for this component.

If none, default_locale from config. Fallback: en

Type: string

logoSrc

Source of logo you want in widget button

Type: string

logOutBtnClass

Class for logout button

Type: string

logOutBtnStyle

Style for logout button

Type: any

logOutLabel

Text to show inside logout button

Type: string

popupHeight

Desired height(px) for user account popup.
Warning: If user is in full screen it will be a new tab of browser

Type: number

popupWidth

Desired width(px) for user account popup
Warning: If user is in full screen it will be a new tab of browser

Type: number

redirectUri

Chosen redirect URI for this component.

If none, default_redirect_uri from config. Fallback: current URI

Type: string

signBtnClass

Class for sign button when no active session

Type: string

signBtnStyle

Style for sign button when no active session

Type: any

targetUrl

Chosen target URL for SLO end process.

If none, window.location.href will be be used

Type: string

toggleBtnClass

Class for widget toggle button

Type: string

toggleBtnStyle

Style for widget toggle button

Type: any

unauthenticatedPath

Path to redirect after logout process

Type: string

Constructor

constructor(router: Router)

Methods

closeAccountPopup
closeAccountPopup()
Returns: void
currentLocale
currentLocale()
Returns: string
localizedString
localizedString(key: string)
Returns: string
setDefaults
setDefaults()
Returns: void
checkConfig
checkConfig()
Returns: void
toggleOpen
toggleOpen()
Returns: void
logOut
logOut()
Returns: void
popupParams
popupParams()
Returns: string
userAccountAccess
userAccountAccess()
Returns: void
isAuthenticated
isAuthenticated()
Returns: boolean
user
user()
Returns: User
cannotDisplayUser
cannotDisplayUser()
Returns: boolean
email
email()
Returns: string
initials
initials()
Returns: any
fullName
fullName()
Returns: any
widgetButtonText
widgetButtonText()
Returns: string
logOutText
logOutText()
Returns: string
manageAccountText
manageAccountText()
Returns: string
showSigninButton
showSigninButton()
Returns: boolean
showSignupButton
showSignupButton()
Returns: boolean
showWidgetBtn
showWidgetBtn()
Returns: boolean
showAccessButtonOnly
showAccessButtonOnly()
Returns: boolean
signInWithRedirect
signInWithRedirect()
Returns: void
signUpWithRedirect
signUpWithRedirect()
Returns: void
currentToggleBtnClass
currentToggleBtnClass()
Returns: string

Properties

accountPopup
accountPopup: Window
errorBtnClass
errorBtnClass: string
Default value: ERROR_BTN_CLASS
errorMessage
errorMessage: string
isOpened
isOpened: boolean
Default value: false
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { AuthService } from '../auth.service';
import {
  BADGE_CLASS,
  DEFAULT_SCOPE,
  ERROR_BTN_CLASS,
  LOG_OUT_BTN_CLASS,
  SIGN_BTN_CLASS,
  TOGGLE_CASS_CLOSED,
  TOGGLE_CASS_OPENED,
  USER_ACCOUNT_BTN_CLASS
} from '../utils/constants';
import { LocalizedStrings } from '../utils/enums';
import { Sign, User } from '../utils/types';

/**
 * Account AccessButton Component
 * Dynamic component to easily handle User session
 *
 * @example
 * <cryptr-account-access-button [auth]="auth">
 * </cryptr-account-access-button>
 */
@Component({
  selector: 'cryptr-account-access-button[auth]',
  templateUrl: './account-access-button.component.html',
  styleUrls: ['./account-access-button.component.scss']
})
export class AccountAccessButtonComponent implements OnChanges {
  /**
   * Cryptr Auth service to use for this component
   */
  @Input() auth: AuthService;
  /**
   * Choose if component should behave like a widget.
   *
   * **Default:** true
   */
  @Input() isWidget: boolean;
  /**
   * Choose if Component should prompt sign in or sign up when
   * no active session
   *
   * **Default:** Sign.In -> `"signin"`
   */
  @Input() defaultSignType: Sign.In | Sign.Up;
  /**
   * Text to show inside sign button when no active session
   */
  @Input() defaultSignText: string;
  /**
   * Path to redirect after logout process
   */
  @Input() unauthenticatedPath: string;
  /**
   * Chosen locale for this component.
   *
   * If none, `default_locale` from config. **Fallback:** `en`
   */
  @Input() locale: string;
  /**
   * Chosen redirect URI for this component.
   *
   * If none, `default_redirect_uri` from config. **Fallback:** current URI
   */
  @Input() redirectUri: string;
  /**
   * Chosen target URL for SLO end process.
   *
   * If none, `window.location.href` will be be used
   */
  @Input() targetUrl: undefined | string;
  /**
   * Source of logo you want in widget button
   */
  @Input() logoSrc: string;
  /**
   * Text to show in widget button.
   * If none it will display tenant domain string
   */
  @Input() buttonLabel: string;
  /**
   * Text to show inside logout button
   */
  @Input() logOutLabel: string;
  /**
   * Text for user account access button.
   * It will define either button inside widget or
   * account button when chosing widget `false`
   */
  @Input() accountLabel: string;
  /**
   * Desired height(px) for user account popup.
   * **Warning:** If user is in full screen it will be a new tab of browser
   */
  @Input() popupHeight: number;
  /**
   * Desired width(px) for user account popup
   * **Warning:** If user is in full screen it will be a new tab of browser
   */
  @Input() popupWidth: number;

  // STYLE config

  /**
   * Style for sign button when no active session
   */
  @Input() signBtnStyle: any;
  /**
   * Style for widget toggle button
   */
  @Input() toggleBtnStyle: any;
  /**
   * Style for initials badge in widget toggle button
   */
  @Input() badgeStyle: any;
  /**
   * Style for user account access button.
   * It will define either button inside widget or
   * account button when chosing widget `false`
   */
  @Input() accountBtnStyle: any;
  /**
   * Style for logout button
   */
  @Input() logOutBtnStyle: any;
  /**
   * Desired style to apply arrount `cryptrWidgetChild`
   */
  @Input() childStyle: any;

  // CLASS config

  /**
   * Class for sign button when no active session
   */
  @Input() signBtnClass: string;
  /**
   * Class for widget toggle button
   */
  @Input() toggleBtnClass: string;
  /**
   * Class for initials badge in widget toggle button
   */
  @Input() badgeClass: string;
  /**
   * Class for user account access button.
   * It will define either button inside widget or
   * account button when chosing widget `false`
   */
  @Input() accountBtnClass: string;
  /**
   * Class for logout button
   */
  @Input() logOutBtnClass: string;
  /**
   * Class for sign button when no active session
   */
  @Input() childClass: string;

  /** @ignore */
  isOpened = false;
  /** @ignore */
  accountPopup: Window;
  /** @ignore */
  errorMessage: string = null;
  /** @ignore */
  errorBtnClass = ERROR_BTN_CLASS;

  /** @ignore */
  closeAccountPopup(): void {
    if (typeof this.accountPopup !== 'undefined' && this.accountPopup !== null) {
      this.accountPopup.close();
    }
  }

  /** @ignore */
  constructor(private router: Router) {
    window.addEventListener('beforeunload', (e) => {
      this.closeAccountPopup();
    });

    this.router.events.subscribe((val) => {
      if (this.isOpened && (val instanceof NavigationEnd)) {
        this.isOpened = false;
      }
    });
  }

  /** @ignore */
  currentLocale(): string {
    try {
      return this.locale || this.auth.config().default_locale || 'en';
    } catch (e) {
      return 'en';
    }
  }

  /** @ignore */
  localizedString(key: string): string {
    return LocalizedStrings[this.currentLocale()][key];
  }

  /** @ignore */
  setDefaults(): void {
    if (this.isWidget === undefined) {
      this.isWidget = true;
    }
    if (this.defaultSignType === undefined) {
      this.defaultSignType = Sign.In;
    }
    if (this.defaultSignText === undefined) {
      this.defaultSignText = this.localizedString(this.defaultSignType);
    }
    this.popupHeight = this.popupHeight || 935;
    this.popupWidth = this.popupWidth || 915;

    this.signBtnClass = this.signBtnClass || SIGN_BTN_CLASS;
    this.accountBtnClass = this.accountBtnClass || USER_ACCOUNT_BTN_CLASS;
    this.badgeClass = this.badgeClass || BADGE_CLASS;
    this.logOutBtnClass = this.logOutBtnClass || LOG_OUT_BTN_CLASS;
  }

  /** @ignore */
  ngOnChanges(_changes: SimpleChanges): void {
    this.checkConfig();
    this.setDefaults();
  }

  /** @ignore */
  checkConfig(): void {
    // const { config: routerConfig } = this.router;
    // if (this.redirectUri) {
    //   const redirectUriPath = new URL(this.redirectUri).pathname;
    //   let match = false;
    //   routerConfig.forEach(({ path, canActivate }) => {
    //     if (canActivate !== undefined && `/${path}` === redirectUriPath) {
    //       match = true;
    //     }
    //   });
    //   if (!match) {
    //     this.errorMessage = `The path '${redirectUriPath}' MUST BE Configured in your router with 'canActivate: [AuthGuard]'`;
    //     throw new Error(this.errorMessage);
    //   }
    // }
  }

  /** @ignore */
  toggleOpen(): void {
    this.isOpened = !this.isOpened;
  }

  /** @ignore */
  logOut(): void {
    this.toggleOpen();
    this.auth.logOut(() => {
      window.location.href = this.unauthenticatedPath || '/';
    }, window.location, this.targetUrl);
  }

  /** @ignore */
  popupParams(): string {
    return `location=yes,height=${this.popupHeight},width=${this.popupWidth},scrollbars=yes,status=yes`;
  }

  /** @ignore */
  userAccountAccess(): void {
    this.toggleOpen();
    this.auth.userAccountAccess().then(accountAccessData => {
      try {
        const { data: { data: { url } } } = accountAccessData;
        this.accountPopup = window.open(url, '_blank', this.popupParams());
      } catch (err) {
        console.error(err.message);
      }
    });
  }

  /** @ignore */
  isAuthenticated(): boolean {
    return this.auth.currentAuthenticationState();
  }

  /** @ignore */
  user(): User | undefined {
    return this.auth.getClientUser();
  }

  /** @ignore */
  cannotDisplayUser(): boolean {
    return !this.isAuthenticated() || typeof this.user() === 'undefined';
  }

  /** @ignore */
  email(): string | undefined {
    if (this.cannotDisplayUser()) {
      return;
    }
    return this.user().email;
  }

  /** @ignore */
  initials(): any {
    if (this.cannotDisplayUser()) {
      return;
    }
    return this.fullName().match(/\b(\w)/g).join('');
  }

  /** @ignore */
  fullName(): any {
    if (this.cannotDisplayUser()) {
      return;
    }
    const emailName = this.email().split('@')[0];
    return emailName.split('.').join(' ');
  }

  /** @ignore */
  widgetButtonText(): string {
    const tenantKey = 'tenant_domain';
    return this.buttonLabel || this.auth.config()[tenantKey].split('-').join(' ');
  }

  /** @ignore */
  logOutText(): string {
    return this.logOutLabel || this.localizedString('logOut');
  }

  /** @ignore */
  manageAccountText(): string {
    return this.accountLabel || this.localizedString('manageAccount');
  }

  /** @ignore */
  showSigninButton(): boolean {
    return !this.isAuthenticated() && this.defaultSignType === Sign.In;
  }

  /** @ignore */
  showSignupButton(): boolean {
    return !this.isAuthenticated() && this.defaultSignType === Sign.Up;
  }

  /** @ignore */
  showWidgetBtn(): boolean {
    return this.isWidget && this.isAuthenticated();
  }

  /** @ignore */
  showAccessButtonOnly(): boolean {
    return this.isAuthenticated() && !this.isWidget;
  }

  /** @ignore */
  signInWithRedirect(): void {
    this.auth.signInWithRedirect(DEFAULT_SCOPE, this.locale, this.redirectUri);
  }

  /** @ignore */
  signUpWithRedirect(): void {
    this.auth.signUpWithRedirect(DEFAULT_SCOPE, this.locale, this.redirectUri);
  }

  /** @ignore */
  currentToggleBtnClass(): string {
    let toggleClass = TOGGLE_CASS_CLOSED;
    if (this.toggleBtnClass !== undefined) {
      toggleClass = this.toggleBtnClass;
    } else if (this.isOpened) {
      toggleClass = TOGGLE_CASS_OPENED;
    }
    return toggleClass;
  }
}

results matching ""

    No results matching ""