make app more prod-friendly

ui/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve --disable-host-check --host 0.0.0.0",
+    "start": "ng serve --disable-host-check --host 0.0.0.0 --serve-path='/ui'",
     "start_ssl": "ng serve --disable-host-check --host 0.0.0.0 --ssl",
     "build": "ng build --base-href='/ui/'",
     "watch": "ng build --base-href='/ui/' --watch --configuration development",

ui/src/app/account/service/account.service.ts

@@ -1,10 +1,10 @@
 import { Injectable } from '@angular/core'
 import { SessionStorageService } from 'ngx-webstorage'
 import { HttpClient, HttpHeaders, HttpResponse } from '@angular/common/http'
-import { BehaviorSubject, EMPTY, Observable, Subject, catchError, map, of, takeUntil, tap } from 'rxjs'
+import { BehaviorSubject, EMPTY, Observable, Subject, catchError, map, takeUntil } from 'rxjs'
 
-import { SERVER_API_URL } from '../../../app/app.constants'
 import { IAccount } from '../model/account.model'
+import { environment } from 'src/environments/environment'
 // TODO: uncomment when memberservice is added or change the account service so that this logic is absent from the account service
 //import { MSMemberService } from 'app/entities/member/member.service';
 
@@ -14,8 +14,7 @@
   private isFetchingAccountData = false
   private stopFetchingAccountData = new Subject()
   private authenticated = false
-  private authenticationState = new BehaviorSubject<any>(null)
-  private logoutAsResourceUrl = SERVER_API_URL + 'services/userservice/api'
+  private logoutAsResourceUrl = environment.SERVER_API_URL + 'services/userservice/api'
 
   constructor(
     // TODO: uncomment when language service is implemented
@@ -28,23 +27,21 @@
     console.log('Fetching account data from the back end')
 
     return this.http
-      .get<IAccount>(SERVER_API_URL + '/services/userservice/api/account', {
+      .get<IAccount>(environment.SERVER_API_URL + '/services/userservice/api/account', {
         observe: 'response',
       })
       .pipe(
         takeUntil(this.stopFetchingAccountData),
         catchError((err) => {
           this.authenticated = false
           this.accountData.next(null)
           // TODO: uncomment when memberservice is added or change the account service so that this logic is absent from the account service
           //this.memberService.memberData.next(undefined);
-          this.authenticationState.next(this.accountData)
           this.isFetchingAccountData = false
           return EMPTY
         }),
         map((response: HttpResponse<IAccount>) => {
           this.isFetchingAccountData = false
-          this.authenticationState.next(this.accountData)
           if (response && response.body) {
             this.authenticated = true
             const account: IAccount = response.body
@@ -53,7 +50,7 @@
             // After retrieve the account info, the language will be changed to
             // the user's preferred language configured in the account setting
             if (this.accountData.value?.langKey) {
               const langKey = this.sessionStorage.retrieve('locale') || this.accountData.value.langKey
               // TODO: uncomment when language service is implemented
               //this.languageService.changeLanguage(langKey);
             }
@@ -68,31 +65,36 @@
       )
   }
 
   getMfaSetup(): Observable<HttpResponse<any>> {
-    return this.http.get<any>(SERVER_API_URL + 'services/userservice/api/account/mfa', { observe: 'response' })
+    return this.http.get<any>(environment.SERVER_API_URL + 'services/userservice/api/account/mfa', {
+      observe: 'response',
+    })
   }
 
   save(account: any): Observable<HttpResponse<any>> {
-    return this.http.post(SERVER_API_URL + 'services/userservice/api/account', account, { observe: 'response' })
+    return this.http.post(environment.SERVER_API_URL + 'services/userservice/api/account', account, {
+      observe: 'response',
+    })
   }
 
   enableMfa(mfaSetup: any): Observable<HttpResponse<any>> {
-    return this.http.post(SERVER_API_URL + 'services/userservice/api/account/mfa/on', mfaSetup, { observe: 'response' })
+    return this.http.post(environment.SERVER_API_URL + 'services/userservice/api/account/mfa/on', mfaSetup, {
+      observe: 'response',
+    })
   }
 
   disableMfa(): Observable<HttpResponse<any>> {
-    return this.http.post(SERVER_API_URL + 'services/userservice/api/account/mfa/off', null, { observe: 'response' })
+    return this.http.post(environment.SERVER_API_URL + 'services/userservice/api/account/mfa/off', null, {
+      observe: 'response',
+    })
   }
   // TODO: any - this seems to only be used for logging out (only ever receives null as arg)
   authenticate(identity: any) {
     this.accountData.next(identity)
     this.authenticated = identity !== null
-    this.authenticationState.next(this.accountData)
   }
 
   hasAnyAuthority(authorities: string[]): boolean {
-    console.log(authorities, this.accountData.value?.authorities)
-
     if (!this.authenticated || !this.accountData || !this.accountData.value?.authorities) {
       return false
     }
@@ -137,10 +139,6 @@
     return this.accountData.value !== undefined
   }
 
-  getAuthenticationState(): Observable<any> {
-    return this.accountData.asObservable()
-  }
-
   getImageUrl(): string | null {
     return this.isIdentityResolved() ? this.accountData.value!.imageUrl : null
   }
@@ -166,16 +164,16 @@
     return userName
   }
 
-  getSalesforceId(): string | null {
-    return this.isAuthenticated() && this.accountData ? this.accountData.value!.salesforceId : null
+  getSalesforceId(): string | undefined {
+    return this.isAuthenticated() && this.accountData ? this.accountData.value?.salesforceId : undefined
   }
 
-  isOrganizationOwner(): boolean | null {
-    return this.isIdentityResolved() && this.accountData ? this.accountData.value!.mainContact : false
+  isOrganizationOwner(): boolean | undefined {
+    return this.isIdentityResolved() && this.accountData ? this.accountData.value?.mainContact : false
   }
 
   isLoggedAs(): boolean {
-    return !!(this.isIdentityResolved() && this.accountData.value!.loggedAs)
+    return !!(this.isIdentityResolved() && this.accountData.value?.loggedAs)
   }
 
   logoutAs(): Observable<any> {

ui/src/app/account/service/auth-jwt.service.ts

@@ -1,9 +1,9 @@
 import { Injectable } from '@angular/core'
-import { HttpClient, HttpResponse } from '@angular/common/http'
+import { HttpClient } from '@angular/common/http'
 import { Observable } from 'rxjs'
 
-import { SERVER_API_URL } from '../../../app/app.constants'
 import { ILoginCredentials, ILoginResult } from '../model/login.model'
+import { environment } from 'src/environments/environment'
 
 @Injectable({ providedIn: 'root' })
 export class AuthServerProvider {
@@ -31,6 +31,6 @@ export class AuthServerProvider {
 */
 
   logout(): Observable<any> {
-    return this.http.post(SERVER_API_URL + '/auth/logout', null)
+    return this.http.post(environment.SERVER_API_URL + '/auth/logout', null)
   }
 }

ui/src/app/app.constants.ts

@@ -1,5 +1,3 @@
-export const SERVER_API_URL = 'http://localhost:4200'
-
 export const VERSION = 'test-ui'
 
 export enum EventType {

ui/src/app/app.module.ts

@@ -12,6 +12,7 @@ import { CommonModule } from '@angular/common'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { HasAnyAuthorityDirective } from './shared/directive/has-any-authority.directive'
 import { HomeModule } from './home/home.module'
+import { environment } from 'src/environments/environment'
 
 @NgModule({
   declarations: [AppComponent, NavbarComponent, HasAnyAuthorityDirective],
@@ -29,4 +30,8 @@ import { HomeModule } from './home/home.module'
   providers: [],
   bootstrap: [AppComponent],
 })
-export class AppModule {}
+export class AppModule {
+  constructor() {
+    environment.SERVER_API_URL = environment.SERVER_API_URL.replace('<DOMAIN>', window.location.origin)
+  }
+}

ui/src/app/layout/navbar/navbar.component.html

@@ -243,7 +243,7 @@
       >
         <a class="nav-link dropdown-toggle" ngbDropdownToggle href="javascript:void(0);" id="account-menu">
           <span *ngIf="!getImageUrl()">
-            <fa-icon [icon]="faUser"></fa-icon>
+            <fa-icon [icon]="faUser" [fixedWidth]="true"></fa-icon>
             <span jhiTranslate="global.menu.account.main.string">Account</span>
           </span>
           <span *ngIf="getImageUrl()">

ui/src/app/layout/navbar/navbar.component.spec.ts

@@ -24,7 +24,6 @@ describe('NavbarComponent', () => {
       'getAccountData',
       'isAuthenticated',
       'hasAnyAuthority',
-      'getAuthenticationState',
       'isLoggedAs',
       'isOrganizationOwner',
       'getImageUrl',
@@ -60,7 +59,7 @@ describe('NavbarComponent', () => {
     accountService.isOrganizationOwner.and.returnValue(false)
     accountService.getImageUrl.and.returnValue(null)
     accountService.getSalesforceId.and.returnValue('sfid')
-    accountService.getAuthenticationState.and.returnValue(
+    accountService.getAccountData.and.returnValue(
       of({
         activated: true,
         authorities: ['ROLE_USER'],
@@ -105,7 +104,7 @@ describe('NavbarComponent', () => {
     accountService.isOrganizationOwner.and.returnValue(false)
     accountService.getImageUrl.and.returnValue(null)
     accountService.getSalesforceId.and.returnValue('sfid')
-    accountService.getAuthenticationState.and.returnValue(
+    accountService.getAccountData.and.returnValue(
       of({
         activated: true,
         authorities: ['ROLE_USER', 'ROLE_CONSORTIUM_LEAD'],
@@ -143,7 +142,7 @@ describe('NavbarComponent', () => {
     accountService.isOrganizationOwner.and.returnValue(false)
     accountService.getImageUrl.and.returnValue(null)
     accountService.getSalesforceId.and.returnValue('sfid')
-    accountService.getAuthenticationState.and.returnValue(
+    accountService.getAccountData.and.returnValue(
       of({
         activated: true,
         authorities: ['ROLE_USER', 'ASSERTION_SERVICE_ENABLED'],

ui/src/app/layout/navbar/navbar.component.ts

@@ -1,6 +1,5 @@
 import { Component, OnInit } from '@angular/core'
 import { Router } from '@angular/router'
-import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
 import {
   faAddressCard,
   faUniversity,
@@ -14,12 +13,12 @@ import {
   faLock,
 } from '@fortawesome/free-solid-svg-icons'
 import { HttpResponse, HttpErrorResponse } from '@angular/common/http'
-import { Observable } from 'rxjs'
-import { SERVER_API_URL, VERSION } from '../../../app/app.constants'
+import { VERSION } from '../../../app/app.constants'
 import { AccountService, LoginService } from '../../account'
 import { MemberService } from 'src/app/member/service/member.service'
 import { IAccount } from 'src/app/account/model/account.model'
 import { IMember } from 'src/app/member/model/member.model'
+import { environment } from 'src/environments/environment'
 
 type EntityResponseType = HttpResponse<IMember>
 
@@ -61,7 +60,7 @@ export class NavbarComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.accountService.getAuthenticationState().subscribe(() => {
+    this.accountService.getAccountData().subscribe(() => {
       if (!this.memberCallDone && this.isAuthenticated() && this.hasRoleUser()) {
         this.memberCallDone = true
 
@@ -122,7 +121,7 @@ export class NavbarComponent implements OnInit {
     this.userName = undefined
     if (this.isLoggedAs()) {
       this.accountService.logoutAs().subscribe(() => {
-        window.location.href = SERVER_API_URL
+        window.location.href = environment.SERVER_API_URL
       })
     } else {
       this.memberService.setManagedMember(null)
@@ -137,7 +136,7 @@ export class NavbarComponent implements OnInit {
     this.memberCallDone = false
     this.userName = undefined
     this.accountService.logoutAs().subscribe((res) => {
-      window.location.href = SERVER_API_URL
+      window.location.href = environment.SERVER_API_URL
     })
   }
 

ui/src/app/member/service/member.service.ts

@@ -2,16 +2,16 @@ import { Injectable } from '@angular/core'
 import { BehaviorSubject, Observable, of, map, catchError } from 'rxjs'
 import { HttpClient, HttpResponse } from '@angular/common/http'
 import { IMember } from '../model/member.model'
-import { SERVER_API_URL } from 'src/app/app.constants'
 import * as moment from 'moment'
+import { environment } from 'src/environments/environment'
 
 type EntityResponseType = HttpResponse<IMember>
 
 @Injectable({ providedIn: 'root' })
 export class MemberService {
   constructor(protected http: HttpClient) {}
 
-  public resourceUrl = SERVER_API_URL + '/services/memberservice/api'
+  public resourceUrl = environment.SERVER_API_URL + '/services/memberservice/api'
   public managedMember = new BehaviorSubject<string | null>(null)
 
   find(id: string): Observable<IMember | null> {

ui/src/app/shared/directive/has-any-authority.directive.ts

@@ -29,7 +29,7 @@ export class HasAnyAuthorityDirective {
     this.authorities = typeof value === 'string' ? [value] : value
     this.updateView()
     // Get notified each time authentication state changes.
-    this.accountService.getAuthenticationState().subscribe((identity) => this.updateView())
+    this.accountService.getAccountData().subscribe((identity) => this.updateView())
   }
 
   private updateView(): void {

ui/src/environments/environment.ts

@@ -4,6 +4,7 @@
 
 export const environment = {
   production: false,
+  SERVER_API_URL: '<DOMAIN>',
 }
 
 /*

ui/src/index.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <html class="no-js" lang="en" dir="ltr">
   <head>
-    <base href="/" />
+    <base href="./" />
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <title>ORCID Member Portal</title>

ui/src/proxy.conf.json

@@ -12,5 +12,13 @@
     "changeOrigin": true,
     "logLevel": "debug",
     "cookieDomainRewrite": "localhost"
+  },
+  "/ui/*": {
+    "target": "",
+    "secure": false,
+    "pathRewrite": {
+      "^/ui": ""
+    },
+    "changeOrigin": true
   }
 }