mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
1fa81962a0
* fix after rebase * new release strategy for ng next Signed-off-by: eromano <eugenioromano16@gmail.com> * peer dep Signed-off-by: eromano <eugenioromano16@gmail.com> * Angular 14 fix unit test and storybook Signed-off-by: eromano <eugenioromano16@gmail.com> fix after rebase Signed-off-by: eromano <eugenioromano16@gmail.com> update pkg.json Signed-off-by: eromano <eugenioromano16@gmail.com> missing dep Signed-off-by: eromano <eugenioromano16@gmail.com> Fix mistake and missing code Dream....build only affected libs Add utility run commands * Use nx command to run affected tests * Fix nx test core fix content tests Run unit with watch false core test fixes reduce test warnings Fix process cloud unit Fix adf unit test Fix lint process cloud Disable lint next line Use right core path Fix insights unit fix linting insights Fix process-services unit fix the extensions test report fix test warnings Fix content unit Fix bunch of content unit * Produce an adf alpha of 14 * hopefully fixing the content * Push back the npm publish * Remove flaky unit * Fix linting * Make the branch as root * Get rid of angualar13 * Remove the travis depth * Fixing version for npm * Enabling cache for unit and build * Fix scss for core and paths Copy i18 and asset by using ng-packager Export the theming alias and fix path Use ng-package to copy assets process-services-cloud Use ng-package to copy assets process-services Use ng-package to copy assets content-services Use ng-package to copy assets insights * feat: fix api secondary entry point * fix storybook rebase * Move dist under dist/libs from lib/dist * Fix the webstyle * Use only necessary nrwl deps and improve lint * Fix unit for libs * Convert lint.sh to targets - improve performance * Use latest of angular * Align alfresco-js-api Signed-off-by: eromano <eugenioromano16@gmail.com> Co-authored-by: eromano <eugenioromano16@gmail.com> Co-authored-by: Mikolaj Serwicki <mikolaj.serwicki@hyland.com> Co-authored-by: Tomasz <tomasz.gnyp@hyland.com>
90 lines
3.0 KiB
Markdown
90 lines
3.0 KiB
Markdown
---
|
|
Title: Login Dialog component
|
|
Added: v2.6.0
|
|
Status: Active
|
|
Last reviewed: 2018-10-02
|
|
---
|
|
|
|
# [Login Dialog component](lib/core/src/lib/login/components/login-dialog.component.ts "Defined in login-dialog.component.ts")
|
|
|
|
Allows a user to perform a login via a dialog.
|
|
|
|
## Details
|
|
|
|
The [Login Dialog component](login-dialog.component.md) allows you to perform a login via a dialog.
|
|
|
|
### Showing the dialog
|
|
|
|
Unlike most components, the [Login Dialog Component](login-dialog.component.md) 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](https://material.angular.io/components/dialog/overview) for this,
|
|
as shown in the usage example. ADF provides the [`LoginDialogComponentData`](lib/core/src/lib/login/components/login-dialog-component-data.interface.ts) interface
|
|
to work with the Dialog's
|
|
[data option](https://material.angular.io/components/dialog/overview#sharing-data-with-the-dialog-component-):
|
|
|
|
```ts
|
|
export interface LoginDialogComponentData {
|
|
title: string;
|
|
actionName?: string;
|
|
logged: Subject<any>;
|
|
}
|
|
```
|
|
|
|
The properties are described in the table below:
|
|
|
|
| Name | Type | Default value | Description |
|
|
| ---- | ---- | ------------- | ----------- |
|
|
| title | `string` | "" | Dialog title |
|
|
| actionName | `string` | "" | Text to appear on the dialog's main action button ("Login", "Access", etc) |
|
|
| logged | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | | Event emitted when the login succeeds. |
|
|
|
|
If you don't want to manage the dialog yourself then it is easier to use the
|
|
[Login Dialog Panel component](login-dialog-panel.component.md), or the
|
|
methods of the [Login Dialog service](../services/login-dialog.service.md), which create
|
|
the dialog for you.
|
|
|
|
### Usage example
|
|
|
|
```ts
|
|
import { MatDialog } from '@angular/material/dialog';
|
|
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](http://reactivex.io/rxjs/manual/overview.html#subject) present in the [`LoginDialogComponentData`](lib/core/src/lib/login/components/login-dialog-component-data.interface.ts) object passed to the dialog.
|
|
When the dialog action is selected by clicking, the `data.logged` stream will be completed.
|
|
|
|
## See also
|
|
|
|
- [Login component](login.component.md)
|