Login Dialog component

Allows a user to perform a login via a dialog.

Details

The Login Dialog component allows you to perform a login via a dialog.

Showing the dialog

Unlike most components, the Login Dialog Component is typically shown in a dialog box rather than the main page and you are responsible for opening the dialog yourself. You can use the Angular Material Dialog for this, as shown in the usage example. ADF provides the LoginDialogComponentData interface to work with the Dialog's data option:

export interface LoginDialogComponentData {
    title: string;
    actionName?: string;
    logged: Subject<any>;
}

The properties are described in the table below:

If you don't want to manage the dialog yourself then it is easier to use the Login Dialog Panel component, or the methods of the Login Dialog service, which create the dialog for you.

Usage example

import { MatDialog } from '@angular/material';
import { LoginDialogComponentData, LoginDialogComponent} from '@adf/core'
import { Subject } from 'rxjs/Subject';
 ...

constructor(dialog: MatDialog ... ) {}

openLoginDialog() {
    data: LoginDialogComponentData = {
        title: "Perform a Login",
        actionName: "Access",
        logged: new Subject<any>()
    };

    this.dialog.open(
        LoginDialogComponent,
        {
            data, panelClass: 'adf-login-dialog',
            width: '630px'
        }
    );

    data.logged.subscribe(() => {
        // Action after being logged in...
    }, 
    (error)=>{
        //your error handling
    }, 
    ()=>{
        //action called when an action or cancel is clicked on the dialog
        this.dialog.closeAll();
    });
}

All the results will be streamed to the logged subject present in the LoginDialogComponentData object passed to the dialog. When the dialog action is selected by clicking, the data.logged stream will be completed.

See also

• Login component