Custom directive added for authChecking

src/app/Directives/authcheck.directive.spec.ts

@@ -0,0 +1,52 @@
+import { TemplateRef, ViewContainerRef, Component, ViewChild } from '@angular/core';
+import { RouterTestingModule } from '@angular/router/testing';
+import { async, TestBed, ComponentFixture } from '@angular/core/testing';
+import { HttpClientModule } from '@angular/common/http';
+
+// import Directive
+import { AuthcheckDirective } from './authcheck.directive';
+
+// import services
+import { AuthService } from '../services/auth.service';
+import { GlobalService } from '../services/global.service';
+import { ApiService } from '../services/api.service';
+import { EndpointsService } from '../services/endpoints.service';
+
+@Component({
+  selector: 'app-authcheck',
+  template: `<p *appAuthcheck="true">AuthChecking Directive</p>`,
+})
+class TestAuthDirectiveComponent {
+  @ViewChild(AuthcheckDirective) authchcekDirective: AuthcheckDirective;
+}
+describe('AuthcheckDirective', () => {
+  let component: TestAuthDirectiveComponent;
+  let fixture: ComponentFixture<TestAuthDirectiveComponent>;
+  let authServive: AuthService;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AuthcheckDirective,
+        TestAuthDirectiveComponent
+      ],
+      imports: [
+        RouterTestingModule,
+        HttpClientModule
+      ],
+      providers: [
+        AuthService,
+        GlobalService,
+        ApiService,
+        EndpointsService
+      ]
+    }).compileComponents();
+    fixture = TestBed.createComponent(TestAuthDirectiveComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+    authServive = TestBed.get(AuthService);
+  }));
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/Directives/authcheck.directive.ts

@@ -0,0 +1,29 @@
+import { Directive, OnInit, Input, ViewContainerRef, TemplateRef } from '@angular/core';
+import { AuthService } from '../services/auth.service';
+
+@Directive({
+  selector: '[appAuthcheck]'
+})
+export class AuthcheckDirective implements OnInit {
+
+  constructor(
+    private authService: AuthService,
+    private templateRef: TemplateRef<any>,
+    private viewContainer: ViewContainerRef
+  ) { }
+
+  condition: boolean;
+
+  @Input() set appAuthcheck(condition: boolean) {
+    this.condition = condition;
+  }
+
+  ngOnInit() {
+    const authVal = this.authService.isAuth;
+    if (authVal && this.condition || !authVal && !this.condition) {
+      this.viewContainer.createEmbeddedView(this.templateRef);
+    } else {
+      this.viewContainer.clear();
+    }
+  }
+}

src/app/app.component.spec.ts

@@ -17,6 +17,7 @@ import { LoadingComponent } from './components/utility/loading/loading.component
 import { ConfirmComponent } from './components/utility/confirm/confirm.component';
 import { ModalComponent } from './components/utility/modal/modal.component';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { AuthcheckDirective } from './Directives/authcheck.directive';
 
 describe('AppComponent', () => {
 
@@ -34,7 +35,8 @@ describe('AppComponent', () => {
         ToastComponent,
         LoadingComponent,
         ConfirmComponent,
-        HomemainComponent
+        HomemainComponent,
+        AuthcheckDirective
       ],
       imports: [
         RouterTestingModule,

src/app/app.module.ts

@@ -88,6 +88,7 @@ import {PasswordMismatchValidatorDirective} from './Directives/password.validato
 import { ResetPasswordComponent } from './components/auth/reset-password/reset-password.component';
 import { EmailValidatorDirective } from './Directives/email.validator';
 import { ResetPasswordConfirmComponent } from './components/auth/reset-password-confirm/reset-password-confirm.component';
+import { AuthcheckDirective } from './Directives/authcheck.directive';
 @NgModule({
   declarations: [
     AppComponent,
@@ -146,7 +147,8 @@ import { ResetPasswordConfirmComponent } from './components/auth/reset-password-
     EditphasemodalComponent,
     ResetPasswordConfirmComponent,
     ChallengeviewallsubmissionsComponent,
-    TermsAndConditionsModalComponent
+    TermsAndConditionsModalComponent,
+    AuthcheckDirective
   ],
   imports: [
     BrowserModule,

src/app/components/about/about.component.spec.ts

@@ -9,6 +9,7 @@ import { FooterComponent } from '../../components/nav/footer/footer.component';
 import { ActivatedRoute, Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import { HttpClientModule } from '@angular/common/http';
+import { AuthcheckDirective } from '../../Directives/authcheck.directive';
 
 describe('AboutComponent', () => {
   let component: AboutComponent;
@@ -18,7 +19,7 @@ describe('AboutComponent', () => {
   } as ActivatedRoute;
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ AboutComponent, HeaderStaticComponent, FooterComponent ],
+      declarations: [ AboutComponent, HeaderStaticComponent, FooterComponent, AuthcheckDirective ],
       providers: [
       GlobalService,
       AuthService,

src/app/components/analytics/analytics.component.html

@@ -1,13 +1,13 @@
-<app-side-bar *ngIf="authService.isAuth"></app-side-bar>
+<app-side-bar *appAuthcheck ="true"></app-side-bar>
 <app-header-static></app-header-static>
 <div class="web-container">
   <div class="dashboard-flex">
     <div class="dashboard-content">
       <router-outlet></router-outlet>
     </div>
-    <app-footer [isDash]="true" *ngIf="authService.isAuth"></app-footer>
+    <app-footer [isDash]="true" *appAuthcheck ="true"></app-footer>
   </div>
 </div>
 <div class="clearfix"></div>
 
-<app-footer *ngIf="!authService.isAuth"></app-footer>
+<app-footer *appAuthcheck ="false"></app-footer>

src/app/components/analytics/analytics.component.spec.ts

@@ -12,6 +12,7 @@ import {Routes} from '@angular/router';
 import {NotFoundComponent} from '../not-found/not-found.component';
 import {ApiService} from '../../services/api.service';
 import {HeaderStaticComponent} from '../nav/header-static/header-static.component';
+import { AuthcheckDirective } from '../../Directives/authcheck.directive';
 
 const routes: Routes = [
   {
@@ -37,7 +38,7 @@ describe('AnalyticsComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ AnalyticsComponent, SideBarComponent, FooterComponent, HeaderStaticComponent,
-         NotFoundComponent ],
+         NotFoundComponent, AuthcheckDirective ],
       providers: [AuthService, GlobalService, EndpointsService, ApiService],
       imports: [HttpClientModule, RouterTestingModule.withRoutes(routes)]
     })

src/app/components/auth/auth.component.spec.ts

@@ -8,13 +8,14 @@ import { EndpointsService } from '../../services/endpoints.service';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ApiService } from '../../services/api.service';
 import { HttpClientModule } from '@angular/common/http';
+import { AuthcheckDirective } from '../../Directives/authcheck.directive';
 
 describe('AuthComponent', () => {
   let component: AuthComponent;
   let fixture: ComponentFixture<AuthComponent>;
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ AuthComponent, HeaderStaticComponent ],
+      declarations: [ AuthComponent, HeaderStaticComponent, AuthcheckDirective ],
       providers: [
         GlobalService,
         AuthService,

src/app/components/challenge-create/challenge-create.component.html

@@ -1,4 +1,4 @@
-<app-side-bar *ngIf="authService.isAuth"></app-side-bar>
+<app-side-bar *appAuthcheck ="true"></app-side-bar>
 <app-header-static></app-header-static>
 <div class="web-container">
   <div class="challenge-create-flex">
@@ -47,8 +47,8 @@
       </section>
 
     </div>
-    <app-footer [isDash]="true" *ngIf="authService.isAuth"></app-footer>
+    <app-footer [isDash]="true" *appAuthcheck ="true"></app-footer>
   </div>
 </div>
 
-<app-footer *ngIf="!authService.isAuth"></app-footer>
+<app-footer *appAuthcheck ="false"></app-footer>

src/app/components/challenge-create/challenge-create.component.spec.ts

@@ -14,6 +14,7 @@ import { HttpClientModule } from '@angular/common/http';
 import {Router, Routes} from '@angular/router';
 import {NotFoundComponent} from '../not-found/not-found.component';
 import {FormsModule} from '@angular/forms';
+import { AuthcheckDirective } from '../../Directives/authcheck.directive';
 
 const routes: Routes = [
   {
@@ -38,7 +39,7 @@ describe('ChallengecreateComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ChallengeCreateComponent, HeaderStaticComponent, FooterComponent, NotFoundComponent ],
+      declarations: [ ChallengeCreateComponent, HeaderStaticComponent, FooterComponent, NotFoundComponent, AuthcheckDirective ],
       schemas: [ NO_ERRORS_SCHEMA ],
       imports: [ RouterTestingModule.withRoutes(routes), HttpClientModule, FormsModule],
       providers: [ GlobalService, AuthService, ApiService, ChallengeService, EndpointsService ]

src/app/components/challenge/challenge.component.html

@@ -1,4 +1,4 @@
-<app-side-bar *ngIf="authService.isAuth"></app-side-bar>
+<app-side-bar *appAuthcheck ="true"></app-side-bar>
 <app-header-static></app-header-static>
 <div class="web-container">
     <div class="challenge-flex" [class.center]="!authService.isAuth">
@@ -152,7 +152,7 @@
                 </div>
             </div>
         </div>
-        <app-footer [isDash]="true" *ngIf="authService.isAuth"></app-footer>
+        <app-footer [isDash]="true" *appAuthcheck ="true"></app-footer>
     </div>
 </div>
-<app-footer *ngIf="!authService.isAuth"></app-footer>
+<app-footer *appAuthcheck ="false"></app-footer>

src/app/components/challenge/challenge.component.spec.ts

@@ -26,6 +26,7 @@ import { Router, ActivatedRoute } from '@angular/router';
 import { Observable, of } from 'rxjs';
 import { MatTableModule } from '@angular/material';
 import { FormsModule } from '@angular/forms';
+import { AuthcheckDirective } from '../../Directives/authcheck.directive';
 
 describe('ChallengeComponent', () => {
   let component: ChallengeComponent;
@@ -53,7 +54,8 @@ describe('ChallengeComponent', () => {
         ForceloginComponent,
         FooterComponent,
         TeamlistComponent,
-        SelectphaseComponent
+        SelectphaseComponent,
+        AuthcheckDirective
       ],
       providers: [
         ApiService,

src/app/components/contact/contact.component.spec.ts

@@ -16,6 +16,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 import Global = NodeJS.Global;
 import { FormsModule } from '@angular/forms';
 import { OwlDateTimeModule } from 'ng-pick-datetime';
+import { AuthcheckDirective } from '../../Directives/authcheck.directive';
 
 const routes: Routes = [
   {
@@ -44,7 +45,7 @@ describe('ContactComponent', () => {
     const MOCK_SERVICE = new MockWindowService(null);
     TestBed.configureTestingModule({
       imports: [ HttpClientModule, RouterTestingModule.withRoutes(routes), FormsModule, OwlDateTimeModule ],
-      declarations: [ ContactComponent, HeaderStaticComponent, InputComponent, ToastComponent, FooterComponent ],
+      declarations: [ ContactComponent, HeaderStaticComponent, InputComponent, ToastComponent, FooterComponent, AuthcheckDirective ],
       providers: [
         GlobalService,
         AuthService,

src/app/components/dashboard/dashboard.component.html

@@ -1,14 +1,14 @@
-<app-side-bar *ngIf="authService.isAuth"></app-side-bar>
+<app-side-bar *appAuthcheck ="true"></app-side-bar>
 <app-header-static></app-header-static>
 <div class="web-container">
   <div class="dashboard-flex">
     <div class="dashboard-content">
       <app-dashboard-content></app-dashboard-content>
     </div>
     <!--Dashboard-Footer-->
-    <app-footer [isDash]="true" *ngIf="authService.isAuth"></app-footer>
+    <app-footer [isDash]="true" *appAuthcheck ="true"></app-footer>
   </div>
 </div>
 <div class="clearfix"></div>
 
-<app-footer *ngIf="!authService.isAuth"></app-footer>
+<app-footer *appAuthcheck ="false"></app-footer>

src/app/components/dashboard/dashboard.component.spec.ts

@@ -14,6 +14,7 @@ import {Router, Routes} from '@angular/router';
 import {NotFoundComponent} from '../not-found/not-found.component';
 import {LoginComponent} from '../auth/login/login.component';
 import {FormsModule} from '@angular/forms';
+import { AuthcheckDirective } from '../../Directives/authcheck.directive';
 
 
 const routes: Routes = [
@@ -44,7 +45,7 @@ describe('DashboardComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ DashboardComponent, FooterComponent, HeaderStaticComponent, NotFoundComponent, LoginComponent ],
+      declarations: [ DashboardComponent, FooterComponent, HeaderStaticComponent, NotFoundComponent, LoginComponent, AuthcheckDirective ],
       imports: [ HttpClientModule, RouterTestingModule.withRoutes(routes), FormsModule ],
       providers: [ GlobalService, AuthService, EndpointsService, ApiService],
       schemas: [ NO_ERRORS_SCHEMA ]

src/app/components/get-involved/get-involved.component.spec.ts

@@ -9,6 +9,7 @@ import { FooterComponent } from '../../components/nav/footer/footer.component';
 import { RouterTestingModule } from '@angular/router/testing';
 import { ApiService } from '../../services/api.service';
 import { HttpClientModule } from '@angular/common/http';
+import { AuthcheckDirective } from '../../Directives/authcheck.directive';
 
 describe('GetInvolvedComponent', () => {
   let component: GetInvolvedComponent;
@@ -21,7 +22,7 @@ describe('GetInvolvedComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ GetInvolvedComponent, HeaderStaticComponent, FooterComponent ],
+      declarations: [ GetInvolvedComponent, HeaderStaticComponent, FooterComponent, AuthcheckDirective ],
       providers: [
         GlobalService,
         AuthService,

src/app/components/home/home.component.spec.ts

@@ -17,6 +17,7 @@ import { FeaturedChallengesComponent } from './featured-challenges/featured-chal
 import { TwitterFeedComponent } from './twitter-feed/twitter-feed.component';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { WindowService } from '../../services/window.service';
+import { AuthcheckDirective } from '../../Directives/authcheck.directive';
 
 describe('HomeComponent', () => {
   let component: HomeComponent;
@@ -36,7 +37,8 @@ describe('HomeComponent', () => {
         RulesComponent,
         TestimonialsComponent,
         FeaturedChallengesComponent,
-        TwitterFeedComponent
+        TwitterFeedComponent,
+        AuthcheckDirective
       ],
       providers: [
         GlobalService,

src/app/components/nav/header-static/header-static.component.html

@@ -4,22 +4,22 @@
       <a (click)="menuExpander()" class="button-collapse main-header-link"><i class="fa fa-bars"></i></a>
       <ul class="hide-on-med-and-down">
         <li><a class="waves-effect waves-dark main-header-link evalai-logo" routerLink="/" routerLinkActive="active"><img src="assets/images/evalai-logo-single.png"></a></li>
-        <li *ngIf="!authService.isAuth"><a class="waves-effect waves-dark main-header-link" routerLink="/challenges">All Challenges</a></li>
-        <li *ngIf="!authService.isAuth"><a class="waves-effect waves-dark main-header-link" href="https://evalai-forum.cloudcv.org/" target="_blank">Forum</a></li>
+        <li *appAuthcheck ="false"><a class="waves-effect waves-dark main-header-link" routerLink="/challenges">All Challenges</a></li>
+        <li *appAuthcheck ="false"><a class="waves-effect waves-dark main-header-link" href="https://evalai-forum.cloudcv.org/" target="_blank">Forum</a></li>
         <!-- show after authenticate user -->
         <li *ngIf="authService.isAuth && !isDash"><a class="waves-effect waves-dark main-header-link" (click) ="isDash = true" routerLink="/dashboard" routerLinkActive="active">Dashboard</a></li>
         <li *ngIf="authService.isAuth && isDash"><a class="waves-effect waves-dark main-header-link" routerLink="/challenges" routerLinkActive="active">All Challenges</a></li>
-        <li *ngIf="authService.isAuth"><a class="waves-effect waves-dark main-header-link" href="https://evalai-forum.cloudcv.org/" target="_blank">Forum</a></li>
+        <li *appAuthcheck ="true"><a class="waves-effect waves-dark main-header-link" href="https://evalai-forum.cloudcv.org/" target="_blank">Forum</a></li>
       </ul>
       <ul class="right hide-on-med-and-down">
-        <li *ngIf="!authService.isAuth"><a class="waves-effect waves-dark main-header-link" routerLink="/auth/signup" routerLinkActive="active">Sign Up</a></li>
-        <li *ngIf="!authService.isAuth"><a class="btn ev-btn-dark waves-effect waves-dark grad-btn grad-btn-dark fs-14" routerLink="/auth/login" routerLinkActive="active">Log In</a></li>
+        <li *appAuthcheck ="false"><a class="waves-effect waves-dark main-header-link" routerLink="/auth/signup" routerLinkActive="active">Sign Up</a></li>
+        <li *appAuthcheck ="false"><a class="btn ev-btn-dark waves-effect waves-dark grad-btn grad-btn-dark fs-14" routerLink="/auth/login" routerLinkActive="active">Log In</a></li>
         <!-- show after authenticate user -->
-        <li *ngIf="authService.isAuth">
+        <li *appAuthcheck ="true">
           <a class="dropdown-button waves-effect waves-dark main-header-link" data-activates='ev-dropdown' routerLink="/profile" routerLinkActive="active"> <span class="text-light-black">Hi</span><strong>{{' ' + user.username}}</strong> &nbsp;
           </a>
         </li>
-        <li *ngIf="authService.isAuth">
+        <li *appAuthcheck ="true">
           <div class="btn ev-btn-dark waves-effect waves-dark grad-btn grad-btn-dark fs-14" (click)="logOut()">Logout</div>
         </li>
       </ul>
@@ -32,15 +32,15 @@
           </div>
         </li>
         <li><a class="waves-effect waves-dark" routerLink="/" routerLinkActive="active"><i class="fa fa-home"></i>Home</a></li>
-        <li *ngIf="!authService.isAuth"><a class="waves-effect waves-dark main-header-link" routerLink="/challenges"><i class="fa fa-fire"></i>All Challenges</a></li>
-        <li *ngIf="!authService.isAuth"><a class="waves-effect waves-dark main-header-link" routerLink="/auth/signup" routerLinkActive="active"><i class="fa fa-sign-out"></i>Sign Up</a></li>
-        <li *ngIf="!authService.isAuth"><a class="waves-effect waves-dark main-header-link" routerLink="/auth/login" routerLinkActive="active"><i class="fa fa-sign-in"></i>Log In</a></li>
+        <li *appAuthcheck ="false"><a class="waves-effect waves-dark main-header-link" routerLink="/challenges"><i class="fa fa-fire"></i>All Challenges</a></li>
+        <li *appAuthcheck ="false"><a class="waves-effect waves-dark main-header-link" routerLink="/auth/signup" routerLinkActive="active"><i class="fa fa-sign-out"></i>Sign Up</a></li>
+        <li *appAuthcheck ="false"><a class="waves-effect waves-dark main-header-link" routerLink="/auth/login" routerLinkActive="active"><i class="fa fa-sign-in"></i>Log In</a></li>
         <!-- show after authenticate user -->
-        <li *ngIf="authService.isAuth"><a class="waves-effect waves-dark main-header-link" routerLink="/dashboard" routerLinkActive="active"><i class="fa fa-thumb-tack"></i>Dashboard</a></li>
-        <li *ngIf="authService.isAuth"><a class="waves-effect waves-dark main-header-link" routerLink="/challenges" routerLinkActive="active"><i class="fa fa-fire"></i>All Challenges</a></li>
-        <li *ngIf="authService.isAuth"><a class="waves-effect waves-dark main-header-link" routerLink="/teams" routerLinkActive="active"><i class="fa fa-users"></i>Participant Teams</a></li>
-        <li *ngIf="authService.isAuth"><a class="waves-effect waves-dark main-header-link" routerLink="/challenge-create" routerLinkActive="active"><i class="fa fa-paper-plane"></i>Create Challenge</a></li>
-        <li *ngIf="authService.isAuth"><a class="waves-effect waves-dark main-header-link" routerLink="/profile" routerLinkActive="active"><i class="fa fa-user"></i>Hi {{user.username}}!</a></li>
+        <li *appAuthcheck ="true"><a class="waves-effect waves-dark main-header-link" routerLink="/dashboard" routerLinkActive="active"><i class="fa fa-thumb-tack"></i>Dashboard</a></li>
+        <li *appAuthcheck ="true"><a class="waves-effect waves-dark main-header-link" routerLink="/challenges" routerLinkActive="active"><i class="fa fa-fire"></i>All Challenges</a></li>
+        <li *appAuthcheck ="true"><a class="waves-effect waves-dark main-header-link" routerLink="/teams" routerLinkActive="active"><i class="fa fa-users"></i>Participant Teams</a></li>
+        <li *appAuthcheck ="true"><a class="waves-effect waves-dark main-header-link" routerLink="/challenge-create" routerLinkActive="active"><i class="fa fa-paper-plane"></i>Create Challenge</a></li>
+        <li *appAuthcheck ="true"><a class="waves-effect waves-dark main-header-link" routerLink="/profile" routerLinkActive="active"><i class="fa fa-user"></i>Hi {{user.username}}!</a></li>
       </ul>
     </div>
   </nav>