Merge pull request #228 from stuartwoodman/AUS-3882-User-Login

AUS-3882 User login

angular.json

@@ -127,7 +127,8 @@
         "serve": {
           "builder": "@angular-builders/custom-webpack:dev-server",
           "options": {
-            "browserTarget": "project:build"
+            "browserTarget": "project:build",
+            "proxyConfig": "./proxy.conf.json"
           },
           "configurations": {
             "audev": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "auscope-portal",
-  "version": "6.2.0",
+  "version": "6.2.1",
   "license": "MIT",
   "scripts": {
     "ng": "ng",

proxy.conf.json

@@ -1,8 +1,10 @@
 {
-  "/": {
-    "target": "http://localhost:8080/AuScope-Portal",
-    "secure": false,
-    "pathRewrite": {"^/" : ""},
-     "logLevel":"debug"
-  }
-}
+  "context": [
+    "/AuScope-Portal/**",
+    "/api/**"
+  ],
+  "target": "http://localhost:8080/",
+  "secure": false,
+  "logLevel": "debug",
+  "changeOrigin": true
+}

src/app/app-routing.module.ts

@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { environment } from '../environments/environment';
+import { LoggedInComponent } from './menupanel/login/logged-in.component';
+import { LoginComponent } from './menupanel/login/login.component';
+import { PortalComponent } from './portal/portal.component';
+
+
+const baseUrl = environment.portalBaseUrl.replace(/^\/|\/$/g, '');
+
+/**
+ * Application routes.
+ * Add the following to a route to ensure only authenticated users can access:
+ *    canActivate: [AuthGuard]
+ */
+const routes: Routes = [
+  { path: '', pathMatch: 'full', component: PortalComponent },
+  { path: 'login', component: LoginComponent },
+  { path: 'login/loggedIn', component: LoggedInComponent },
+  { path: baseUrl, redirectTo: '/', pathMatch: 'full' },
+  { path: '**', redirectTo: '/' }
+];
+
+@NgModule({
+    imports: [RouterModule.forRoot(routes)],
+    exports: [RouterModule]
+})
+export class AppRoutingModule {}

src/app/app.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

src/app/app.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+/**
+ * Top level application component, holds the router outlet
+ *
+ * @export
+ * @class AppComponent
+ */
+@Component({
+    selector: 'app-component',
+    templateUrl: './app.component.html'
+})
+
+export class AppComponent {
+
+  constructor() {}
+
+}

src/app/app.module.ts

@@ -4,11 +4,17 @@ import { NgModule } from '@angular/core';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { NouisliderModule } from 'ng2-nouislider';
 import { CommonModule } from '@angular/common';
+import { BrowserModule } from '@angular/platform-browser';
 
 // Cesium icons
 import { MatTooltipModule } from '@angular/material/tooltip';
 
 // Components
+import { AppComponent } from './app.component';
+import { PortalComponent } from './portal/portal.component';
+import { LoginMenuComponent } from './menupanel/login/login-menu.component';
+import { LoginComponent } from './menupanel/login/login.component';
+import { LoggedInComponent } from './menupanel/login/logged-in.component';
 import { CsMapComponent } from './cesium-map/csmap.component';
 import { CesiumMapPreviewComponent } from './menupanel/common/infopanel/cesiummappreview/cesium.preview.component';
 import { LayerPanelComponent } from './menupanel/layerpanel/layerpanel.component';
@@ -93,11 +99,25 @@ import { NgxColorsModule } from 'ngx-colors';
 import {MatProgressBarModule} from '@angular/material/progress-bar'; 
 import {MatCardModule} from '@angular/material/card'; 
 import { getSaver, SAVER } from './modalwindow/layeranalytic/nvcl/saver.provider';
+
+// Routing
+import { AppRoutingModule } from './app-routing.module';
+
+// Auth
+import { UserStateService } from './services/user/user-state.service';
+import { AuthGuard } from './services/auth/auth.guard';
+import { AuthService } from './services/auth/auth.service';
+
 PlotlyModule.plotlyjs = PlotlyJS;
 
 
 @NgModule({
     declarations: [
+        AppComponent,
+        PortalComponent,
+        LoginComponent,
+        LoggedInComponent,
+        LoginMenuComponent,
         CsMapComponent,
         CesiumMapPreviewComponent,
         LayerPanelComponent,
@@ -136,10 +156,12 @@ PlotlyModule.plotlyjs = PlotlyJS;
         RecordModalComponent
     ],
     providers: [ AuscopeApiService, FilterService, RectanglesEditorService, AdvancedComponentService, SearchService,
-                 NVCLService, MSCLService, BoundsService, GraceService, { provide: SAVER, useFactory: getSaver }
+                 NVCLService, MSCLService, BoundsService, GraceService, { provide: SAVER, useFactory: getSaver },
+                 UserStateService, AuthGuard, AuthService
     ],
     imports: [
         PortalCoreModule.forRoot(environment, config),
+        AppRoutingModule,
         PortalCorePipesModule,
         ClipboardModule,
         ModalModule.forRoot(),
@@ -167,18 +189,11 @@ PlotlyModule.plotlyjs = PlotlyJS;
         AngularCesiumWidgetsModule,
         NgbModule,
         FormsModule,
-        ReactiveFormsModule
+        ReactiveFormsModule,
+        BrowserModule
     ],
     bootstrap: [
-        CsMapComponent,
-        LayerPanelComponent,
-        CustomPanelComponent,
-        ActiveLayersPanelComponent,
-        PermanentLinkComponent,
-        DataExplorerComponent,
-        PortalDetailsPanelComponent,
-        HelpMenuComponent,
-        SearchPanelComponent
+        AppComponent
     ]
 })
 export class AppModule { }

src/app/menupanel/login/logged-in.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+
+import { AuthService } from '../../services/auth/auth.service';
+
+@Component({
+  selector: 'app-logged-in',
+  template: ``,
+  styles: []
+})
+export class LoggedInComponent implements OnInit {
+
+  constructor(private authService: AuthService) {}
+
+  ngOnInit() {
+    // Inform the auth service
+    this.authService.onLoggedIn();
+  }
+
+}

src/app/menupanel/login/login-menu.component.html

@@ -0,0 +1,14 @@
+<div class="user-menu">
+    <div *ngIf="isUserLoggedIn()">
+        <button mat-button [matMenuTriggerFor]="loginMenu" class="user-menu" title="Log in">
+            <i class="fa fa-2x fa-user"></i>&nbsp;&nbsp;{{ username }} <b class="caret"></b>
+            <i class="fa fa-caret-down" style="margin-left:5px;"></i>
+        </button>
+        <mat-menu #loginMenu="matMenu" style="margin-top:12px;">
+            <h5 mat-menu-item><button (click)="logOut()" class="btn user-button">Log Out</button></h5>
+        </mat-menu>
+    </div>
+    <div *ngIf="!isUserLoggedIn()">
+        <button mat-button class="user-name" title="Log In" (click)="login()"><i class="fa fa-2x fa-users"></i>&nbsp;&nbsp;Log In<b class="caret"></b></button>
+    </div>
+</div>

src/app/menupanel/login/login-menu.component.scss

@@ -0,0 +1,28 @@
+@import '../../globals';
+
+.user-menu {
+    color: $text-colour;
+}
+
+.user-button {
+    color: #d8d9d7;
+}
+
+.user-button:hover {
+    color: white;
+}
+
+.user-menu:hover {
+    color: $text-highlight-colour;
+}
+
+::ng-deep {
+    .mat-menu-panel {
+        margin-top: 10px;
+    }
+
+    .mat-menu-content {
+        background-color: $background-colour;
+    }
+
+}

src/app/menupanel/login/login-menu.component.ts

@@ -0,0 +1,47 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { AuthService } from 'app/services/auth/auth.service';
+import { UserStateService } from '../../services/user/user-state.service';
+
+@Component({
+    selector: '[app-login-menu]',
+    templateUrl: './login-menu.component.html',
+    styleUrls: ['./login-menu.component.scss']
+})
+export class LoginMenuComponent {
+
+  username: string;
+
+  constructor(private router: Router, private authService: AuthService, private userStateService: UserStateService) {
+    this.authService.checkServerLogin();
+    this.userStateService.user.subscribe(user => {
+      if (user) {
+        this.username = user.fullName;
+      }
+    });
+  }
+
+  /**
+   * Check is a user is logged in.
+   *
+   * @returns true if user logged in, false otherwise
+   */
+  isUserLoggedIn(): boolean {
+    return this.authService.isLoggedIn;
+  }
+
+  /**
+   * Redirect to login page
+   */
+  login() {
+    this.router.navigate(['login']);
+  }
+
+  /**
+   * Logout current user
+   */
+  logOut() {
+    this.authService.logout();
+  }
+
+}

src/app/menupanel/login/login.component.html

@@ -0,0 +1,12 @@
+<div class="login-page" [@routerTransition]>
+    <div class="row justify-content-md-center">
+        <div class="col-md-4">
+            <h3>AuScope Discovery Portal</h3>
+            <i class="fa fa-5x fa-users" width="150px"></i>
+            <h1 class="login-message">Please log in using one of the options below</h1>
+            <a class="login-button" (click)="loginAaf()"><img src="/extension/img/aaf_service_223x54.png" height="46px"></a><br>
+            <a class="login-button" (click)="loginGoogle()"><img src="/extension/img/btn_google_signin_dark_normal_web.png" height="46px"></a><br>
+            <a class="login-button" (click)="loginGithub()"><img src="/extension/img/GitHub_Logo.png" height="46px"></a>
+        </div>
+    </div>
+</div>

src/app/menupanel/login/login.component.scss

@@ -0,0 +1,37 @@
+@import 'app/globals';
+
+.login-page {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: auto;
+  background: $auscope-royal-blue;
+  text-align: center;
+  color: #fff;
+  padding: 3em;
+
+  .user-avatar {
+      -webkit-border-radius: 50%;
+      border-radius: 50%;
+      border: 2px solid #fff;
+  }
+
+  .login-message {
+    margin: 10px 0 20px 0;
+  }
+
+  .login-button {
+      cursor: pointer;
+  }
+
+  img {
+    margin-bottom: 10px;
+  }
+
+  i {
+    margin-bottom: 10px;
+  }
+
+}

src/app/menupanel/login/login.component.ts

@@ -0,0 +1,37 @@
+import { Component } from '@angular/core';
+import { routerTransition } from '../../router.animations';
+import { environment } from '../../../environments/environment';
+
+@Component({
+    selector: 'app-login',
+    templateUrl: './login.component.html',
+    styleUrls: ['./login.component.scss'],
+    animations: [routerTransition()]
+})
+export class LoginComponent {
+  constructor() {}
+
+  // TODO: We may need to store some user site settings to local storage if not saved to DB for post-auth
+
+  /**
+   * Google login
+   */
+  loginGoogle() {
+    window.location.href = environment.portalBaseUrl + 'oauth2/authorization/google';
+  }
+
+  /**
+   * Australia Access Federation (AAF) login
+   */
+  loginAaf() {
+    window.location.href = environment.portalBaseUrl + 'login/aaf';
+  }
+
+  /**
+   * Github login
+   */
+  loginGithub() {
+    window.location.href = environment.portalBaseUrl + 'oauth2/authorization/github';
+  }
+
+}

src/app/models/user.model.ts

@@ -0,0 +1,9 @@
+/**
+ * User Models
+ */
+export interface User {
+  fullName: string;
+  email: string;
+  // Currently unused
+  acceptedTermsConditions: number;
+}