/**
 * -------------------------------------------------------------------------------------------
 * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
 * See License in the project root for license information.
 * -------------------------------------------------------------------------------------------
 */ import { customElement , html , property } from 'lit-element' ; import { classMap } from 'lit-html/directives/class-map' ; import { Providers , ProviderState , MgtTemplatedComponent } from '@microsoft/mgt-element' ; import { IDynamicPerson , ViewType } from '../../graph/types' ; import { MgtFlyout } from '../sub-components/mgt-flyout/mgt-flyout' ; import { getUserWithPhoto } from '../../graph/graph.userWithPhoto' ; import { MgtPerson , PersonViewType } from '../mgt-person/mgt-person' ; import { styles } from './mgt-login-css' ; import { strings } from './strings' ; import '../../styles/style-helper' ; export class extends MgtBaseComponent fires fires fires fires fires template signed-in-button-content template signed-out-button-content template flyout-commands template flyout-person-details cssprop cssprop cssprop cssprop cssprop cssprop cssprop cssprop cssprop cssprop cssprop cssprop @ customElement ( 'mgt-login' ) export class MgtLogin extends MgtTemplatedComponent { /**
     * Array of styles to apply to the element. The styles should be defined
     * using the `css` tag function.
     */ static get styles ( ) { return styles ; } protected get strings ( ) { return strings ; } type { IDynamicPerson } @ property ( { attribute : 'user-details' , type : Object } ) public userDetails : IDynamicPerson ; protected type { MgtFlyout } memberof protected get flyout ( ) : MgtFlyout { return this . renderRoot . querySelector ( '.flyout' ) ; } static return { * } memberof public static get requiredScopes ( ) : string [ ] { return [ ... new Set ( [ 'user.read' , ... MgtPerson . requiredScopes ] ) ] ; } type { boolean } @ property ( { attribute : false } ) private _isFlyoutOpen : boolean ; private _image : string ; constructor ( ) { super ( ) ; this . _isFlyoutOpen = false ; } memberof public connectedCallback ( ) { super . connectedCallback ( ) ; this . addEventListener ( 'click' , e => e . stopPropagation ( ) ) ; } returns { Promise < void > } memberof public async login ( ) { if ( this . userDetails || ! this . fireCustomEvent ( 'loginInitiated' ) ) { return ; } const provider = Providers . globalProvider ; if ( provider && provider . login ) { await provider . login ( ) ; if ( provider . state === ProviderState . SignedIn ) { this . fireCustomEvent ( 'loginCompleted' ) ; } else { this . fireCustomEvent ( 'loginFailed' ) ; } } } returns { Promise < void > } memberof public async logout ( ) { if ( ! this . fireCustomEvent ( 'logoutInitiated' ) ) { return ; } const provider = Providers . globalProvider ; if ( provider && provider . logout ) { await provider . logout ( ) ; this . userDetails = null ; this . hideFlyout ( ) ; this . fireCustomEvent ( 'logoutCompleted' ) ; } } /**
     * Invoked on each update to perform rendering tasks. This method must return
     * a lit-html TemplateResult. Setting properties inside this method will *not*
     * trigger the element to update.
     */ protected render ( ) { return html `
      <div class="root" dir=${ this . direction }>
        <div>
          ${ this . renderButton ( ) }
        </div>
        ${ this . renderFlyout ( ) }
      </div>
    ` ; } protected returns memberof protected async loadState ( ) { const provider = Providers . globalProvider ; if ( provider && ! this . userDetails ) { if ( provider . state === ProviderState . SignedIn ) { this . userDetails = await getUserWithPhoto ( provider . graph . forComponent ( this ) ) ; if ( this . userDetails . personImage ) { this . _image = this . userDetails . personImage ; } this . fireCustomEvent ( 'loginCompleted' ) ; } else { this . userDetails = null ; } } } protected memberof protected renderButton ( ) { const classes = { 'login-button' : true , 'no-click' : this . _isFlyoutOpen } ; return html `
      <button ?disabled="${ this . isLoadingState }" @click=${ this . onClick } class=${ classMap ( classes ) } role="button">
        ${ this . renderButtonContent ( ) }
      </button>
    ` ; } protected memberof protected renderFlyout ( ) { return html `
      <mgt-flyout
        class="flyout"
        light-dismiss
        @opened=${ ( ) => ( this . _isFlyoutOpen = true ) }
        @closed=${ ( ) => ( this . _isFlyoutOpen = false ) }
      >
        <div slot="flyout">
          ${ this . renderFlyoutContent ( ) }
        </div>
      </mgt-flyout>
    ` ; } protected returns memberof protected renderFlyoutContent ( ) { if ( ! this . userDetails ) { return ; } return html `
      <div class="popup">
        <div class="popup-content">
          <div>
            ${ this . renderFlyoutPersonDetails ( this . userDetails , this . _image ) }
          </div>
          <div class="popup-commands">
            ${ this . renderFlyoutCommands ( ) }
          </div>
        </div>
      </div>
    ` ; } protected returns memberof protected renderFlyoutPersonDetails ( personDetails , personImage ) { const template = this . renderTemplate ( 'flyout-person-details' , { personDetails , personImage } ) ; return ( template || html `
        <mgt-person .personDetails=${ personDetails } .personImage=${ personImage } .view=${ ViewType . twolines } />
      ` ) ; } protected returns memberof protected renderFlyoutCommands ( ) { const template = this . renderTemplate ( 'flyout-commands' , { handleSignOut : ( ) => this . logout ( ) } ) ; return ( template || html `
        <ul>
          <li>
            <button class="popup-command" @click=${ this . logout } aria-label="Sign Out">
              ${ this . strings . signOutLinkSubtitle }
            </button>
          </li>
        </ul>
      ` ) ; } protected returns memberof protected renderButtonContent ( ) { if ( this . userDetails ) { return this . renderSignedInButtonContent ( this . userDetails , this . _image ) ; } else { return this . renderSignedOutButtonContent ( ) ; } } protected returns memberof protected renderSignedInButtonContent ( personDetails , personImage ) { const template = this . renderTemplate ( 'signed-in-button-content' , { personDetails , personImage } ) ; return ( template || html `
        <mgt-person .personDetails=${ this . userDetails } .personImage=${ this . _image } .view=${ ViewType . oneline } />
      ` ) ; } protected memberof protected clearState ( ) { this . userDetails = null ; this . _image = null ; } protected returns memberof protected renderSignedOutButtonContent ( ) { const template = this . renderTemplate ( 'signed-out-button-content' , null ) ; return ( template || html `
        <i class="login-icon ms-Icon ms-Icon--Contact"></i>
        <span aria-label="Sign In">
          ${ this . strings . signInLinkSubtitle }
        </span>
      ` ) ; } protected memberof protected showFlyout ( ) { const flyout = this . flyout ; if ( flyout ) { flyout . open ( ) ; } } protected memberof protected hideFlyout ( ) { const flyout = this . flyout ; if ( flyout ) { flyout . close ( ) ; } } private onClick ( ) { if ( this . userDetails ) { this . showFlyout ( ) ; } else { this . login ( ) ; } } }