add components and routes to actual modules

src/app/authentication/authentication.component.html

@@ -0,0 +1,3 @@
+<p>
+  authentication works!
+</p>

src/app/authentication/authentication.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AuthenticationComponent } from './authentication.component';
+
+describe('AuthenticationComponent', () => {
+  let component: AuthenticationComponent;
+  let fixture: ComponentFixture<AuthenticationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AuthenticationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AuthenticationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/authentication/authentication.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-authentication',
+  templateUrl: './authentication.component.html',
+  styleUrls: ['./authentication.component.scss']
+})
+export class AuthenticationComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/authorization/authorization.component.html

@@ -0,0 +1,3 @@
+<p>
+  authorization works!
+</p>

src/app/authorization/authorization.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AuthorizationComponent } from './authorization.component';
+
+describe('AuthorizationComponent', () => {
+  let component: AuthorizationComponent;
+  let fixture: ComponentFixture<AuthorizationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AuthorizationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AuthorizationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/authorization/authorization.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-authorization',
+  templateUrl: './authorization.component.html',
+  styleUrls: ['./authorization.component.scss']
+})
+export class AuthorizationComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/components/sidebar/sidebar.component.html

@@ -57,7 +57,8 @@
     <ul class="nav">
         <li routerLinkActive="active" *ngFor="let menuItem of menuItems" class="{{menuItem.class}} nav-item">
             <a class="nav-link" [routerLink]="[menuItem.path]">
-                <i class="material-icons">{{menuItem.icon}}</i>
+                <i class="fas fa-{{menuItem.icon}}"></i>
+                <!-- <i class="material-icons">{{menuItem.icon}}</i> -->
                 <p>{{menuItem.title}}</p>
             </a>
         </li>

src/app/components/sidebar/sidebar.component.ts

@@ -7,20 +7,60 @@ import { LinkifyService } from '../../linkify.service';
 
 declare const $: any;
 declare interface RouteInfo {
-    path: string;
+  path: string;
-    title: string;
+  title: string;
-    icon: string;
+  icon: string;
-    class: string;
+  class: string;
 }
 export const ROUTES: RouteInfo[] = [
-    { path: '/dashboard', title: 'Dashboard',  icon: 'dashboard', class: '' },
+  {
-    { path: '/user-profile', title: 'User Profile',  icon:'person', class: '' },
+    path: '/dashboard',
-    { path: '/table-list', title: 'Table List',  icon:'content_paste', class: '' },
+    title: 'Dashboard',
-    { path: '/typography', title: 'Typography',  icon:'library_books', class: '' },
+    icon: 'tachometer-alt',
-    { path: '/icons', title: 'Icons',  icon:'bubble_chart', class: '' },
+    class: ''
-    { path: '/maps', title: 'Maps',  icon:'location_on', class: '' },
+  },
-    { path: '/notifications', title: 'Notifications',  icon:'notifications', class: '' },
+  {
-    { path: '/upgrade', title: 'Upgrade to PRO',  icon:'unarchive', class: 'active-pro' },
+    path: '/user-profile',
+    title: 'User Profile',
+    icon:'user-alt',
+    class: ''
+  },
+  {
+    path: '/authentication',
+    title: 'Authentication',
+    icon:'key',
+    class: ''
+  },
+  {
+    path: '/authorization',
+    title: 'Authorization',
+    icon:'shield-alt',
+    class: ''
+  },
+  {
+    path: '/feature-switches',
+    title: 'Feature Switches',
+    icon:'toggle-on',
+    class: ''
+  },
+  {
+    path: '/short-links',
+    title: 'Short Links',
+    icon:'link',
+    class: ''
+  },
+  {
+    path: '/email',
+    title: 'Email',
+    icon:'envelope',
+    class: ''
+  },
+  // { path: '/table-list', title: 'Table List',  icon:'content_paste', class: '' },
+  // { path: '/typography', title: 'Typography',  icon:'library_books', class: '' },
+  // { path: '/icons', title: 'Icons',  icon:'bubble_chart', class: '' },
+  // { path: '/maps', title: 'Maps',  icon:'location_on', class: '' },
+  // { path: '/notifications', title: 'Notifications',  icon:'notifications', class: '' },
+  // { path: '/upgrade', title: 'Upgrade to PRO',  icon:'unarchive', class: 'active-pro' },
 ];
 
 @Component({
@@ -38,24 +78,24 @@ export class SidebarComponent implements OnInit {
 
   ngOnInit() {
     this.menuItems = ROUTES.filter(menuItem => menuItem);
-    let self = this;
+    // let self = this;
-    this.appModulesService.getAvailableAppModules().subscribe((availableModules: AvailableAppModule[]) => {
+    // this.appModulesService.getAvailableAppModules().subscribe((availableModules: AvailableAppModule[]) => {
-      self.menuItems = availableModules.map((appModule: AvailableAppModule) => {
+    //   self.menuItems = availableModules.map((appModule: AvailableAppModule) => {
-        return {
+    //     return {
-          path: this.linkify.transform(appModule.name),
+    //       path: this.linkify.transform(appModule.name),
-          title: appModule.name,
+    //       title: appModule.name,
-          icon: "dashboard",
+    //       icon: "dashboard",
-          class: "",
+    //       class: "",
-          label: ""
+    //       label: ""
-        };
+    //     };
-      });
+    //   });
-      // self.appModules = availableModules;
+    //   // self.appModules = availableModules;
-    });
+    // });
   }
   isMobileMenu() {
-      if ($(window).width() > 991) {
+    if ($(window).width() > 991) {
-          return false;
+      return false;
-      }
+    }
-      return true;
+    return true;
   };
 }

src/app/email/email.component.html

@@ -0,0 +1,3 @@
+<p>
+  email works!
+</p>

src/app/email/email.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EmailComponent } from './email.component';
+
+describe('EmailComponent', () => {
+  let component: EmailComponent;
+  let fixture: ComponentFixture<EmailComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EmailComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EmailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/email/email.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-email',
+  templateUrl: './email.component.html',
+  styleUrls: ['./email.component.scss']
+})
+export class EmailComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/feature-switches/feature-switches.component.html

@@ -0,0 +1,3 @@
+<p>
+  feature-switches works!
+</p>

src/app/feature-switches/feature-switches.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FeatureSwitchesComponent } from './feature-switches.component';
+
+describe('FeatureSwitchesComponent', () => {
+  let component: FeatureSwitchesComponent;
+  let fixture: ComponentFixture<FeatureSwitchesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FeatureSwitchesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FeatureSwitchesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/feature-switches/feature-switches.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-feature-switches',
+  templateUrl: './feature-switches.component.html',
+  styleUrls: ['./feature-switches.component.scss']
+})
+export class FeatureSwitchesComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/layouts/admin-layout/admin-layout.module.ts

@@ -12,6 +12,14 @@ import { MapsComponent } from '../../maps/maps.component';
 import { NotificationsComponent } from '../../notifications/notifications.component';
 import { UpgradeComponent } from '../../upgrade/upgrade.component';
 
+// modules for appModules
+import { AuthorizationComponent } from '../../authorization/authorization.component';
+import { AuthenticationComponent } from '../../authentication/authentication.component';
+import { FeatureSwitchesComponent } from '../../feature-switches/feature-switches.component';
+import { ShortLinksComponent } from '../../short-links/short-links.component';
+import { EmailComponent } from '../../email/email.component';
+
+
 import {
   MatButtonModule,
   MatInputModule,
@@ -41,6 +49,12 @@ import {
     MapsComponent,
     NotificationsComponent,
     UpgradeComponent,
+
+    AuthorizationComponent,
+    AuthenticationComponent,
+    FeatureSwitchesComponent,
+    ShortLinksComponent,
+    EmailComponent,
   ]
 })
 

src/app/layouts/admin-layout/admin-layout.routing.ts

@@ -2,62 +2,39 @@ import { Routes } from '@angular/router';
 
 import { DashboardComponent } from '../../dashboard/dashboard.component';
 import { UserProfileComponent } from '../../user-profile/user-profile.component';
-import { TableListComponent } from '../../table-list/table-list.component';
+import { AuthenticationComponent } from '../../authentication/authentication.component';
-import { TypographyComponent } from '../../typography/typography.component';
+import { AuthorizationComponent } from '../../authorization/authorization.component';
-import { IconsComponent } from '../../icons/icons.component';
+import { FeatureSwitchesComponent } from '../../feature-switches/feature-switches.component';
-import { MapsComponent } from '../../maps/maps.component';
+import { ShortLinksComponent } from '../../short-links/short-links.component';
-import { NotificationsComponent } from '../../notifications/notifications.component';
+import { EmailComponent } from '../../email/email.component';
-import { UpgradeComponent } from '../../upgrade/upgrade.component';
 
 export const AdminLayoutRoutes: Routes = [
-    // {
+  {
-    //   path: '',
+    path: 'dashboard',
-    //   children: [ {
+    component: DashboardComponent
-    //     path: 'dashboard',
+  },
-    //     component: DashboardComponent
+  {
-    // }]}, {
+    path: 'user-profile',
-    // path: '',
+    component: UserProfileComponent
-    // children: [ {
+  },
-    //   path: 'userprofile',
+  {
-    //   component: UserProfileComponent
+    path: 'authentication',
-    // }]
+    component: AuthenticationComponent,
-    // }, {
+  },
-    //   path: '',
+  {
-    //   children: [ {
+    path: 'authorization',
-    //     path: 'icons',
+    component: AuthorizationComponent,
-    //     component: IconsComponent
+  },
-    //     }]
+  {
-    // }, {
+    path: 'feature-switches',
-    //     path: '',
+    component: FeatureSwitchesComponent,
-    //     children: [ {
+  },
-    //         path: 'notifications',
+  {
-    //         component: NotificationsComponent
+    path: 'short-links',
-    //     }]
+    component: ShortLinksComponent,
-    // }, {
+  },
-    //     path: '',
+  {
-    //     children: [ {
+    path: 'email',
-    //         path: 'maps',
+    component: EmailComponent,
-    //         component: MapsComponent
+  }
-    //     }]
-    // }, {
-    //     path: '',
-    //     children: [ {
-    //         path: 'typography',
-    //         component: TypographyComponent
-    //     }]
-    // }, {
-    //     path: '',
-    //     children: [ {
-    //         path: 'upgrade',
-    //         component: UpgradeComponent
-    //     }]
-    // }
-    { path: 'dashboard',      component: DashboardComponent },
-    { path: 'user-profile',   component: UserProfileComponent },
-    { path: 'table-list',     component: TableListComponent },
-    { path: 'typography',     component: TypographyComponent },
-    { path: 'icons',          component: IconsComponent },
-    { path: 'maps',           component: MapsComponent },
-    { path: 'notifications',  component: NotificationsComponent },
-    { path: 'upgrade',        component: UpgradeComponent },
 ];

src/app/short-links/short-links.component.html

@@ -0,0 +1,3 @@
+<p>
+  short-links works!
+</p>

src/app/short-links/short-links.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ShortLinksComponent } from './short-links.component';
+
+describe('ShortLinksComponent', () => {
+  let component: ShortLinksComponent;
+  let fixture: ComponentFixture<ShortLinksComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ShortLinksComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ShortLinksComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/short-links/short-links.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-short-links',
+  templateUrl: './short-links.component.html',
+  styleUrls: ['./short-links.component.scss']
+})
+export class ShortLinksComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/index.html

@@ -13,7 +13,8 @@
     <meta name="viewport" content="width=device-width" />
 
     <!--     Fonts and icons     -->
-    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
+    <!-- <link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet"> -->
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.0/css/all.css" integrity="sha384-Mmxa0mLqhmOeaE8vgOSbKacftZcsNYDjQzuCOm6D02luYSzBG8vpaOykv9lFQ51Y" crossorigin="anonymous">
     <link href='https://fonts.googleapis.com/css?family=Roboto:400,700,300|Material+Icons' rel='stylesheet' type='text/css'>
     <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR-KEY-HERE"></script>