feat(igx-projects): Add new Side Nav with Authentication project

lib/PromptSession.ts

@@ -448,7 +448,7 @@ export class PromptSession {
 	}
 
 	/**
-	 * Gets the them from the user input, or default if provided @param projectLibrary has single theme
+	 * Gets project template from the user input, or default if provided @param projectLibrary has a single template
 	 * @param projectLibrary to get theme for
 	 */
 	private async getProjectTemplate(projectLibrary: ProjectLibrary): Promise<ProjectTemplate> {
@@ -469,7 +469,7 @@ export class PromptSession {
 	}
 
 	/**
-	 * Gets the them from the user input, or default if provided @param projectLibrary has single theme
+	 * Gets the theme from the user input, or default if provided @param projectLibrary has a single theme
 	 * @param projectLibrary to get theme for
 	 */
 	private async getTheme(projectLibrary: ProjectLibrary): Promise<string> {

templates/angular/igx-ts/projects/_base/files/package.json

@@ -22,12 +22,12 @@
     "@angular/platform-browser-dynamic": "^6.0.3",
     "@angular/router": "^6.0.3",
     "core-js": "^2.5.4",
-    "jszip": "^3.1.5",
     "hammerjs": "^2.0.8",
     "igniteui-angular": "^6.1.1",
+    "jszip": "^3.1.5",
     "rxjs": "^6.0.0",
-    "zone.js": "^0.8.26",
-    "web-animations-js": "^2.3.1"
+    "web-animations-js": "^2.3.1",
+    "zone.js": "^0.8.26"
   },
   "devDependencies": {
     "@angular/compiler-cli": "^6.0.3",

templates/angular/igx-ts/projects/side-nav-auth/files/README.md

@@ -0,0 +1,51 @@
+# $(name)
+
+
+TODO: Project setup + links
+
+
+This project was generated with [Ignite UI CLI](https://github.com/IgniteUI/igniteui-cli) version $(cliVersion).
+
+## Development server
+
+Run `ig start` to build the application, start a web server and open the application in the default browser. Then navigate to `http://localhost:4200/`. Default serving port can be configured in `ignite-ui-cli.json` via `defaultPort` property.
+
+## Build
+
+Run `ig build` to build the application into an output directory.
+
+## Step by step mode
+
+If you want to get a guided experience through the available options, you can initialize the step by step mode that will help you to create and setup your new application, as well as update project previously created with the Ignite UI CLI. To start the guide, simply run the `ig` command.
+
+## List templates
+
+The `ig list` lists all available templates. When you run the command within a project folder it will list all available templates, even if you have provided different ones.
+
+## Adding components
+
+Add a new component or template to the project passing component ID and choosing a name.
+
+`ig add <component/template> <component_name>`
+
+The ID matches either a component ("grid", "combo", etc) or a predefined template. Predefined templates can provide either multiple components or fulfilling a specific use case like "form-validation", "master-detail" and so on.
+
+## Running unit tests
+
+Run `ig test` to execute the unit tests via [Karma](https://karma-runner.github.io). Runs all `.spec.ts` files under `./src` folder.
+
+## Running end-to-end tests
+
+Run `ig test --e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). Runs all `.e2e-spec.ts` files under `e2e` folder.
+
+## Help
+
+`ig help` lists the available commands and provides a brief description of what they do.
+
+### Further help
+
+To get more help on the IgniteUI CLI go check out the [IgniteUI CLI Wiki](https://github.com/IgniteUI/igniteui-cli/wiki).
+
+## Angular CLI compatibility
+You can run all of the supported Angular CLI commands. More details at [Angular CLI](https://github.com/angular/angular-cli).
+

templates/angular/igx-ts/projects/side-nav-auth/files/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "$(dash-name)",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve -o",
+    "build": "ng build --prod",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^6.0.3",
+    "@angular/common": "^6.0.3",
+    "@angular/compiler": "^6.0.3",
+    "@angular/core": "^6.0.3",
+    "@angular/forms": "^6.0.3",
+    "@angular/http": "^6.0.3",
+    "@angular/platform-browser": "^6.0.3",
+    "@angular/platform-browser-dynamic": "^6.0.3",
+    "@angular/router": "^6.0.3",
+    "angular-auth-oidc-client": "^6.0.6",
+    "core-js": "^2.5.4",
+    "hammerjs": "^2.0.8",
+    "igniteui-angular": "^6.1.1",
+    "jszip": "^3.1.5",
+    "rxjs": "^6.0.0",
+    "web-animations-js": "^2.3.1",
+    "zone.js": "^0.8.26"
+  },
+  "devDependencies": {
+    "@angular/compiler-cli": "^6.0.3",
+    "@angular-devkit/build-angular": "~0.6.8",
+    "@angular/cli": "~6.0.8",
+    "@angular/language-service": "^6.0.3",
+    "@types/facebook-js-sdk": "^2.8.6",
+    "@types/hammerjs": "^2.0.35",
+    "@types/jasmine": "~2.8.6",
+    "@types/jasminewd2": "~2.0.3",
+    "@types/node": "~8.9.4",
+    "codelyzer": "~4.2.1",
+    "igniteui-cli": "~$(cliVersion)",
+    "jasmine-core": "~2.99.1",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "~1.7.1",
+    "karma-chrome-launcher": "~2.2.0",
+    "karma-coverage-istanbul-reporter": "~2.0.0",
+    "karma-jasmine": "~1.1.1",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "protractor": "~5.3.0",
+    "ts-node": "~5.0.1",
+    "tslint": "~5.9.1",
+    "typescript": "~2.7.2"
+  }
+}

templates/angular/igx-ts/projects/side-nav-auth/files/src/app/app.component.html

@@ -0,0 +1,16 @@
+<div igxLayout>
+  <igx-nav-drawer #nav id="project-menu" isOpen="true" [enableGestures]='true' width="280px">
+    <ng-template igxDrawer>
+      <span igxDrawerItem [isHeader]="true">Views</span>
+      <span *ngFor="let route of topNavLinks" igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" routerLink="{{route.path}}">{{route.name}}</span>
+    </ng-template>
+  </igx-nav-drawer>
+  <div class="main" igxFlex igxLayout igxLayoutDir="columns">
+    <igx-navbar title="$(name)" actionButtonIcon="menu" (onAction)="nav.toggle()">
+      <app-login-bar></app-login-bar>
+  </igx-navbar>
+    <div class="content" igxFlex>
+      <router-outlet></router-outlet>
+    </div>
+  </div>
+</div>

templates/angular/igx-ts/projects/side-nav-auth/files/src/app/app.component.spec.ts

@@ -0,0 +1,29 @@
+import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+import { IgxNavigationDrawerModule, IgxNavbarModule, IgxLayoutModule, IgxRippleModule } from 'igniteui-angular';
+import { AuthenticationModule } from './authentication';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        NoopAnimationsModule,
+        RouterTestingModule,
+        IgxNavigationDrawerModule,
+        AuthenticationModule,
+        IgxNavbarModule,
+        IgxLayoutModule,
+        IgxRippleModule
+      ],
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+});

templates/angular/igx-ts/projects/side-nav-auth/files/src/app/app.module.ts

@@ -0,0 +1,49 @@
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import {
+  IgxLayoutModule, IgxRippleModule,
+  IgxNavigationDrawerModule, IgxNavbarModule
+} from 'igniteui-angular';
+
+import { AppComponent } from './app.component';
+import { HomeComponent } from './home/home.component';
+import { AppRoutingModule } from './app-routing.module';
+import { AuthenticationModule, ExternalAuthService } from './authentication';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    HomeComponent
+  ],
+  imports: [
+    FormsModule,
+    BrowserModule,
+    BrowserAnimationsModule,
+    AuthenticationModule, // WARNING: `AuthenticationModule` defines child routes, must be imported before root `AppRoutingModule`
+    AppRoutingModule,
+    IgxNavigationDrawerModule,
+    IgxNavbarModule,
+    IgxLayoutModule,
+    IgxRippleModule
+  ],
+  providers: [ ],
+  bootstrap: [AppComponent]
+})
+export class AppModule {
+
+  constructor(private externalAuthService: ExternalAuthService) {
+    /**
+     * To register a social login, un-comment one or more of the following and add your service provider Client ID.
+     * See https://github.com/IgniteUI/igniteui-cli/wiki/Angular-Authentication-Project-Template#add-a-third-party-social-provider
+     */
+    // this.externalAuthService.addGoogle('<CLIENT_ID>');
+
+    // this.externalAuthService.addMicrosoft('<CLIENT_ID>');
+
+    // this.externalAuthService.addFacebook('<CLIENT_ID>');
+  }
+
+}

templates/angular/igx-ts/projects/side-nav-auth/files/src/app/authentication/auth.guard.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { UserService } from './services/user.service';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class AuthGuard implements CanActivate {
+    constructor(private router: Router, private userService: UserService) { }
+
+    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+        if (this.userService.currentUser) {
+            return true;
+        }
+        this.router.navigate([''], { queryParams: { returnUrl: state.url } });
+        return false;
+    }
+}

templates/angular/igx-ts/projects/side-nav-auth/files/src/app/authentication/authentication-routing.module.ts

@@ -0,0 +1,24 @@
+import { RouterModule, Routes } from '@angular/router';
+import { NgModule } from '@angular/core';
+
+import { AuthGuard } from './auth.guard';
+import { ProfileComponent } from './profile/profile.component';
+import { RedirectComponent } from './redirect/redirect.component';
+import { ExternalAuthProvider, ExternalAuthRedirectUrl } from './services/external-auth.service';
+
+const authRoutes: Routes = [
+    { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard] },
+    { path: ExternalAuthRedirectUrl.Google, component: RedirectComponent, data: { provider: ExternalAuthProvider.Google } },
+    { path: ExternalAuthRedirectUrl.Facebook, component: RedirectComponent, data: { provider: ExternalAuthProvider.Facebook } },
+    { path: ExternalAuthRedirectUrl.Microsoft, component: RedirectComponent, data: { provider: ExternalAuthProvider.Microsoft } }
+];
+
+@NgModule({
+    imports: [
+      RouterModule.forChild(authRoutes)
+    ],
+    exports: [
+      RouterModule
+    ]
+  })
+export class AuthenticationRoutingModule {}

templates/angular/igx-ts/projects/side-nav-auth/files/src/app/authentication/authentication.module.spec.ts

@@ -0,0 +1,13 @@
+import { AuthenticationModule } from './authentication.module';
+
+describe('AuthenticationModule', () => {
+  let authenticationModule: AuthenticationModule;
+
+  beforeEach(() => {
+    authenticationModule = new AuthenticationModule();
+  });
+
+  it('should create an instance', () => {
+    expect(authenticationModule).toBeTruthy();
+  });
+});

templates/angular/igx-ts/projects/side-nav-auth/files/src/app/authentication/authentication.module.ts

@@ -0,0 +1,64 @@
+import { CommonModule } from '@angular/common';
+import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { NgModule } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { AuthGuard } from './auth.guard';
+import { LoginComponent } from './login/login.component';
+import { JwtInterceptor } from './services/jwt.interceptor';
+import { BackendProvider } from './services/fake-backend.service';
+import { LoginBarComponent } from './login-bar/login-bar.component';
+import { ProfileComponent } from './profile/profile.component';
+import { RegisterComponent } from './register/register.component';
+import { RedirectComponent } from './redirect/redirect.component';
+import { LoginDialogComponent } from './login-dialog/login-dialog.component';
+import { AuthenticationRoutingModule } from './authentication-routing.module';
+
+import { AuthModule, OidcConfigService, } from 'angular-auth-oidc-client';
+import {
+  IgxDialogModule, IgxIconModule,
+  IgxInputGroupModule, IgxButtonModule,
+  IgxAvatarModule, IgxToggleModule, IgxDropDownModule, IgxRippleModule
+} from 'igniteui-angular';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    HttpClientModule,
+    ReactiveFormsModule,
+    AuthModule.forRoot(),
+    AuthenticationRoutingModule,
+    IgxToggleModule,
+    IgxRippleModule,
+    IgxDialogModule,
+    IgxInputGroupModule,
+    IgxIconModule,
+    IgxAvatarModule,
+    IgxButtonModule,
+    IgxDropDownModule
+  ],
+  declarations: [
+    LoginBarComponent,
+    LoginComponent,
+    RedirectComponent,
+    RegisterComponent,
+    LoginDialogComponent,
+    ProfileComponent
+  ],
+  providers: [
+    AuthGuard,
+    OidcConfigService,
+    { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
+    // TODO: DELETE THIS BEFORE PRODUCTION!
+    BackendProvider
+  ],
+  exports: [
+    LoginBarComponent,
+    LoginComponent,
+    RedirectComponent,
+    RegisterComponent,
+    LoginDialogComponent,
+    ProfileComponent
+  ]
+})
+export class AuthenticationModule { }

templates/angular/igx-ts/projects/side-nav-auth/files/src/app/authentication/index.ts

@@ -0,0 +1,9 @@
+export * from './authentication.module';
+export * from './authentication-routing.module';
+export * from './auth.guard';
+export * from './services/authentication.service';
+export * from './services/external-auth.service';
+export * from './services/user.service';
+export * from './models/login';
+export * from './models/register';
+export * from './models/user';

templates/angular/igx-ts/projects/side-nav-auth/files/src/app/authentication/login-bar/login-bar.component.html

@@ -0,0 +1,15 @@
+<button *ngIf="!userService.currentUser" igxRipple="white" igxButton="flat" igxButtonColor="white" (click)="openDialog()">Log In</button>
+
+<button class="login-button" *ngIf="userService.currentUser" igxRipple="white" igxButton="flat"
+    igxButtonBackground="c" igxButtonColor="white" [igxToggleAction]="options">
+  <igx-avatar [initials]="userService.initials" [src]="userService.currentUser.picture" [roundShape]="true" size="small" bgColor="white">
+  </igx-avatar>
+  <igx-icon>keyboard_arrow_down</igx-icon>
+</button>
+
+<igx-drop-down #options (onSelection)="menuSelect($event)">
+  <igx-drop-down-item igxRipple>Profile</igx-drop-down-item>
+  <igx-drop-down-item igxRipple>Log Out</igx-drop-down-item>
+</igx-drop-down>
+
+<app-login-dialog></app-login-dialog>

templates/angular/igx-ts/projects/side-nav-auth/files/src/app/authentication/login-bar/login-bar.component.scss

@@ -0,0 +1,8 @@
+.login-button {
+  height: 3rem;
+  vertical-align: middle;
+}
+
+igx-drop-down-item {
+  position: relative;
+}