Merge pull request #571 from leocomsci/migrate/unauthorised

migrate: unauthorised component

src/app/doubtfire-angular.module.ts

@@ -226,6 +226,7 @@ import {
   TeachingPeriodUnitImportDialogComponent,
   TeachingPeriodUnitImportService,
 } from './admin/states/teaching-periods/teaching-period-unit-import/teaching-period-unit-import.dialog';
+import { UnauthorisedComponent } from './errors/states/unauthorised/unauthorised.component';
 import { AcceptEulaComponent } from './eula/accept-eula/accept-eula.component';
 import { TiiActionLogComponent } from './admin/tii-action-log/tii-action-log.component';
 import { TiiActionService } from './api/services/tii-action.service';
@@ -376,6 +377,7 @@ const MY_DATE_FORMAT = {
     ProjectProgressGaugeComponent,
     FTaskBadgeComponent,
     FUnitsComponent,
+    UnauthorisedComponent,
     ChartBaseComponent,
     ProgressBurndownChartComponent,
     TaskVisualisationComponent,

src/app/doubtfire-angularjs.module.ts

@@ -130,7 +130,6 @@ import 'build/src/app/common/services/date-service.js';
 import 'build/src/app/sessions/auth/http-auth-injector.js';
 import 'build/src/app/sessions/sessions.js';
 import 'build/src/app/errors/errors.js';
-import 'build/src/app/errors/states/unauthorised/unauthorised.js';
 import 'build/src/app/errors/states/timeout/timeout.js';
 import 'build/src/app/errors/states/states.js';
 import 'build/src/common/utilService/utilService.js';
@@ -184,6 +183,7 @@ import {
   UnitService,
   UserService,
 } from './api/models/doubtfire-model';
+import { UnauthorisedComponent } from './errors/states/unauthorised/unauthorised.component';
 import { FileDownloaderService } from './common/file-downloader/file-downloader.service';
 import { CheckForUpdateService } from './sessions/service-worker-updater/check-for-update.service';
 import { TaskSubmissionService } from './common/services/task-submission.service';
@@ -470,6 +470,8 @@ DoubtfireAngularJSModule.directive(
 );
 DoubtfireAngularJSModule.directive('newFUnits', downgradeComponent({component: FUnitsComponent}));
 
+DoubtfireAngularJSModule.directive('unauthorised', downgradeComponent({ component: UnauthorisedComponent }));
+
 // Global configuration
 
 // If the user enters a URL that doesn't match any known URL (state), send them to `/home`

src/app/doubtfire.states.ts

@@ -4,20 +4,16 @@ import {HomeComponent} from './home/states/home/home.component';
 import {WelcomeComponent} from './welcome/welcome.component';
 import {SignInComponent} from './sessions/states/sign-in/sign-in.component';
 import {EditProfileComponent} from './account/edit-profile/edit-profile.component';
-import {TeachingPeriodListComponent} from './admin/states/teaching-periods/teaching-period-list/teaching-period-list.component';
 import {AcceptEulaComponent} from './eula/accept-eula/accept-eula.component';
+import { UnauthorisedComponent } from './errors/states/unauthorised/unauthorised.component';
 import {FUsersComponent} from './admin/states/users/users.component';
 import {FUnitsComponent} from './admin/states/units/units.component';
 import {ProjectDashboardComponent} from './projects/states/dashboard/project-dashboard/project-dashboard.component';
-import {AppInjector} from './app-injector';
-import {ProjectService} from './api/services/project.service';
-import {Observable, first} from 'rxjs';
-import {GlobalStateService} from './projects/states/index/global-state.service';
-import {Project} from './api/models/project';
 import {UnitRootState} from './units/unit-root-state.component';
 import {ProjectRootState} from './projects/states/project-root-state.component';
 import { TaskViewerState } from './units/task-viewer/task-viewer-state.component';
 import {ScormPlayerComponent} from './common/scorm-player/scorm-player.component';
+import { Ng2ViewDeclaration } from '@uirouter/angular';
 
 /*
  * Use this file to store any states that are sourced by angular components.
@@ -37,7 +33,7 @@ const institutionSettingsState: NgHybridStateDeclaration = {
   },
   data: {
     pageTitle: 'Institution Settings',
-    roleWhiteList: ['Admin'],
+    roleWhitelist: ['Admin'],
   },
 };
 
@@ -52,7 +48,7 @@ const usersState: NgHybridStateDeclaration = {
   },
   data: {
     pageTitle: 'Administer users',
-    roleWhiteList: ['Admin'],
+    roleWhitelist: ['Admin'],
   },
 };
 
@@ -68,8 +64,7 @@ const HomeState: NgHybridStateDeclaration = {
     },
   },
   data: {
-    pageTitle: 'Home Page',
-    roleWhitelist: ['Student', 'Tutor', 'Convenor', 'Admin', 'Auditor'],
+    pageTitle: 'Home Page'
   },
 };
 
@@ -174,8 +169,7 @@ const WelcomeState: NgHybridStateDeclaration = {
     },
   },
   data: {
-    pageTitle: 'Welcome',
-    roleWhitelist: ['Student', 'Tutor', 'Convenor', 'Admin', 'Auditor'],
+    pageTitle: 'Welcome'
   },
 };
 
@@ -207,22 +201,7 @@ const EditProfileState: NgHybridStateDeclaration = {
     },
   },
   data: {
-    pageTitle: 'Edit Profile',
-    roleWhitelist: ['Student', 'Tutor', 'Convenor', 'Admin', 'Auditor'],
-  },
-};
-
-const TeachingPeriodsState: NgHybridStateDeclaration = {
-  name: 'teaching_periods',
-  url: '/admin/teachingperiods',
-  views: {
-    main: {
-      component: TeachingPeriodListComponent,
-    },
-  },
-  data: {
-    pageTitle: 'Teaching Periods',
-    roleWhitelist: ['Convenor', 'Admin'],
+    pageTitle: 'Edit Profile'
   },
 };
 
@@ -235,8 +214,7 @@ const EulaState: NgHybridStateDeclaration = {
     },
   },
   data: {
-    pageTitle: 'End User License Agreement',
-    roleWhitelist: ['Student', 'Tutor', 'Convenor', 'Admin', 'Auditor'],
+    pageTitle: 'End User License Agreement'
   },
 };
 
@@ -254,8 +232,7 @@ const ViewAllProjectsState: NgHybridStateDeclaration = {
     },
   },
   data: {
-    pageTitle: 'Teaching Periods',
-    roleWhitelist: ['Student', 'Tutor', 'Convenor', 'Admin'],
+    pageTitle: 'All Units'
   },
 };
 
@@ -275,7 +252,7 @@ const AdministerUnits: NgHybridStateDeclaration = {
   },
   data: {
     pageTitle: 'Administer units',
-    roleWhiteList: ['Admin'],
+    roleWhitelist: ['Admin', 'Convenor', 'Auditor'],
   },
 };
 
@@ -290,8 +267,7 @@ const ProjectDashboardState: NgHybridStateDeclaration = {
     },
   },
   data: {
-    pageTitle: 'Project Dashboard',
-    roleWhitelist: ['Student', 'Tutor', 'Convenor', 'Admin'],
+    pageTitle: 'Unit Dashboard',
   },
 };
 
@@ -310,12 +286,32 @@ const ViewAllUnits: NgHybridStateDeclaration = {
     },
   },
   data: {
-    pageTitle: 'Teaching Periods',
+    pageTitle: 'View Units',
     mode: 'tutor',
-    roleWhitelist: ['Tutor', 'Convenor', 'Admin'],
+    roleWhitelist: ['Tutor', 'Convenor', 'Admin', 'Auditor'],
   },
 };
 
+const UnauthoriedState: NgHybridStateDeclaration = {
+  name: 'unauthorised',
+  url: '/unauthorised', // You get here with this url
+  views: {
+    // These are the 2 views - the header and main from the body of DF
+    header: {
+      // Header is still angularjs
+      controller: 'BasicHeaderCtrl', // This is the angularjs controller
+      templateUrl: 'common/header/header.tpl.html', // and the related template html
+    } as unknown as Ng2ViewDeclaration, // Need dodgy cast to get compiler to ignore type data
+    main: {
+      // Main body links to angular component
+      component: UnauthorisedComponent,
+    },
+  },
+  data: {
+    // Add data used by header
+    pageTitle: 'Unauthorised'
+  },
+};
 /**
  * Define the SCORM Player state.
  */
@@ -386,7 +382,7 @@ const ScormPlayerStudentReviewState: NgHybridStateDeclaration = {
   },
   data: {
     pageTitle: 'Review Knowledge Check',
-    roleWhitelist: ['Student', 'Tutor', 'Convenor', 'Admin'],
+    roleWhitelist: ['Student', 'Tutor', 'Convenor', 'Admin', 'Auditor'],
   },
 };
 
@@ -420,7 +416,6 @@ const ScormPlayerReviewState: NgHybridStateDeclaration = {
  */
 export const doubtfireStates = [
   institutionSettingsState,
-  TeachingPeriodsState,
   HomeState,
   WelcomeState,
   SignInState,
@@ -430,6 +425,7 @@ export const doubtfireStates = [
   ViewAllProjectsState,
   ViewAllUnits,
   AdministerUnits,
+  UnauthoriedState,
   ProjectRootState,
   ProjectDashboardState,
   UnitRootState,

src/app/errors/errors.scss

@@ -1,9 +1 @@
-.error-container {
-  h1 + p {
-    margin-top: 20px;
-  }
-  i {
-    margin-top: 30px;
-    font-size: 100px;
-  }
-}
+

src/app/errors/states/states.coffee

@@ -1,4 +1,3 @@
 angular.module("doubtfire.errors.states", [
   "doubtfire.errors.states.timeout"
-  "doubtfire.errors.states.unauthorised"
 ])

src/app/errors/states/unauthorised/unauthorised.component.html

@@ -0,0 +1,7 @@
+<mat-card class="text-centre">
+  <div class="icon-container">
+    <mat-icon class="icon-display">warning</mat-icon>
+  </div>
+  <h1>Unauthorised</h1>
+  <p>You do not have sufficient permissions to access this resource, or your session has expired.</p>
+</mat-card>

src/app/errors/states/unauthorised/unauthorised.component.scss

@@ -0,0 +1,14 @@
+.icon-display {
+    font-size: 15rem;
+    padding-top: 10px;
+    padding-bottom: 10px;
+
+}
+
+.icon-container{
+    padding-right: 12rem;
+}
+
+.text-centre{
+    text-align: center;
+}

src/app/errors/states/unauthorised/unauthorised.component.spec.ts

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

src/app/errors/states/unauthorised/unauthorised.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'unauthorised',
+  templateUrl: 'unauthorised.component.html',
+  styleUrls: ['unauthorised.component.scss'],
+})
+export class UnauthorisedComponent {
+  constructor(){}
+}

src/app/projects/states/dashboard/dashboard.coffee

@@ -16,7 +16,6 @@ angular.module('doubtfire.projects.states.dashboard', [
     data:
       task: "Dashboard"
       pageTitle: "_Home_"
-      roleWhitelist: ['Tutor', 'Convenor', 'Admin', 'Student', 'Auditor']
    }
 )
 

src/app/projects/states/groups/groups.coffee

@@ -12,7 +12,6 @@ angular.module('doubtfire.projects.states.groups', [])
     data:
       task: "Groups List"
       pageTitle: "_Home_"
-      roleWhitelist: ['Tutor', 'Convenor', 'Admin', 'Student', 'Auditor']
    }
 )
 

src/app/projects/states/index/index.coffee

@@ -13,7 +13,6 @@ angular.module('doubtfire.projects.states.index', [])
         templateUrl: "units/states/index/index.tpl.html" # We can re-use unit's index here
     data:
       pageTitle: "_Home_"
-      roleWhitelist: ['Student', 'Tutor', 'Convenor', 'Admin', 'Auditor']
   }
 )
 

src/app/projects/states/outcomes/outcomes.coffee

@@ -12,7 +12,6 @@ angular.module('doubtfire.projects.states.outcomes', [])
     data:
       task: "Learning Outcomes"
       pageTitle: "_Home_"
-      roleWhitelist: ['Tutor', 'Convenor', 'Admin', 'Student', 'Auditor']
    }
 )
 

src/app/projects/states/portfolio/portfolio.coffee

@@ -14,7 +14,6 @@ angular.module('doubtfire.projects.states.portfolio', [
     data:
       task: "Portfolio Creation"
       pageTitle: "_Home_"
-      roleWhitelist: ['Tutor', 'Convenor', 'Admin', 'Student', 'Auditor']
    }
 )
 

src/app/projects/states/project-root-state.component.ts

@@ -21,7 +21,6 @@ export const ProjectRootState: NgHybridStateDeclaration = {
   abstract: true,
   data: {
     pageTitle: 'Unit Studied',
-    roleWhiteList: ['Student', 'Tutor', 'Convenor', 'Admin', 'Auditor'],
   },
   views: {
     main: {

src/app/projects/states/tutorials/tutorials.coffee

@@ -12,7 +12,6 @@ angular.module('doubtfire.projects.states.tutorials', [])
     data:
       task: "Tutorial List"
       pageTitle: "_Home_"
-      roleWhitelist: ['Tutor', 'Convenor', 'Admin', 'Student', 'Auditor']
    }
 )