npm package: @iodp/iodp-login
Description: This provides a common sign in process for all IODP web applications.
Latest version: 0.0.34

# IODPLogin

This provides a common sign in process for all IODP web applications.

## Setup

1. Install the package:
&nbsp;&nbsp;&nbsp;&nbsp;npm install @iodp/iodp-login 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;OR
&nbsp;&nbsp;&nbsp;&nbsp;yarn add @iodp/iodp-login

2. Import IODPLoginModule into your app's Core module:
&nbsp;&nbsp;&nbsp;&nbsp;import { IODPLoginModule } from '@iodp/iodp-login';

&nbsp;&nbsp;&nbsp;&nbsp;...
&nbsp;&nbsp;&nbsp;&nbsp;imports: [
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IODPLoginModule
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
&nbsp;&nbsp;&nbsp;&nbsp;],
&nbsp;&nbsp;&nbsp;&nbsp;...

3. Navigate to the IODPLoginComponent in your routes:
&nbsp;&nbsp;&nbsp;&nbsp;import { IODPLoginComponent } from '@iodp/iodp-login';

&nbsp;&nbsp;&nbsp;&nbsp;const routes: Routes = [
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ path: 'signin', component: IODPLoginComponent },
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
&nbsp;&nbsp;&nbsp;&nbsp;]

4. Add the AuthGuard to any routes that require a user to be signed in:
&nbsp;&nbsp;&nbsp;&nbsp;import { AuthGuard } from '@iodp/iodp-login';

&nbsp;&nbsp;&nbsp;&nbsp;const routes: Routes = [
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;path: 'project-templates',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;component: ProjectTemplatesComponent,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;canActivate: [AuthGuard]
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
&nbsp;&nbsp;&nbsp;&nbsp;]

5. Handle the navigation for after successful sign in. The user will be directed to the 'welcome' url:
&nbsp;&nbsp;&nbsp;&nbsp;const routes: Routes = [
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ path: 'welcome', pathMatch: 'full', redirectTo: '/project-templates' },
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
&nbsp;&nbsp;&nbsp;&nbsp;]

6. Include something like the following in your app's startup service:
&nbsp;&nbsp;&nbsp;&nbsp;private _destinationSettings: DestinationObject = {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[press F12 to find the needed properties, including if you must select a project]
&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;private _encryptSettings: EncryptObject = {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[press F12 to find the needed properties]
&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;constructor(private login: IODPLoginService) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.login.setDestination(this._destinationSettings);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.login.setEncryption(this._encryptSettings);
&nbsp;&nbsp;&nbsp;&nbsp;}

7. Use the public properties and methods from IODPLoginService:
&nbsp;&nbsp;&nbsp;&nbsp;import { User, IODPLoginService } from '@iodp/iodp-login';

&nbsp;&nbsp;&nbsp;&nbsp;project: string
&nbsp;&nbsp;&nbsp;&nbsp;user: User
&nbsp;&nbsp;&nbsp;&nbsp;privileges: string
&nbsp;&nbsp;&nbsp;&nbsp;user$: Subject\<User>()
&nbsp;&nbsp;&nbsp;&nbsp;errors$: Subject\<string>()

&nbsp;&nbsp;&nbsp;&nbsp;constructor(private login: IODPLoginService) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.project = this.login.currentProject
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.user = this.login.currentUser
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.user$ = this.login.user$
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.errors$ = this.login.loginMessage$

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// ONLY NEED TO USE ONE OF THESE
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.privileges = this.login.privileges; // this is synchonous but will not have a value until the login call returns
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.checkPrivilege() // this will asynchonously give you the privileges as soon as they are available
&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;checkPrivilege() {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.login.privilege.subscribe(resp => {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[This contains the user's privileges]
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})
&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;logout() {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.login.logout();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.router.navigate(['/signin']);
&nbsp;&nbsp;&nbsp;&nbsp;}