Merge pull request #1591 from UUDigitalHumanitieslab/feature/titles

add page titles

frontend/src/app/about/about.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { SafeHtml } from '@angular/platform-browser';
+import { SafeHtml, Title } from '@angular/platform-browser';
 import { environment } from '../../environments/environment';
 import { DialogService } from '../services';
 
@@ -13,12 +13,14 @@ export class AboutComponent implements OnInit {
     public aboutHtml: SafeHtml;
     public isLoading = false;
 
-    constructor(private dialogService: DialogService) { }
+    constructor(private dialogService: DialogService, private title: Title) {
+    }
 
     ngOnInit() {
         this.isLoading = true;
         this.appName = environment.appName;
         this.fetchData();
+        this.title.setTitle(`About - ${this.appName}`);
     }
 
     async fetchData() {

frontend/src/app/corpus-info/corpus-info.component.ts

@@ -1,8 +1,10 @@
 import { Component, OnInit } from '@angular/core';
-import { ApiService, CorpusService, WordmodelsService } from '../services';
+import { ApiService, CorpusService } from '../services';
 import { Corpus, CorpusDocumentationPage, FieldCoverage } from '../models';
 import { marked } from 'marked';
 import { Observable } from 'rxjs';
+import { Title } from '@angular/platform-browser';
+import { pageTitle } from '../utils/app';
 
 @Component({
   selector: 'ia-corpus-info',
@@ -16,7 +18,11 @@ export class CorpusInfoComponent implements OnInit {
 
     documentation$: Observable<CorpusDocumentationPage[]>;
 
-    constructor(private corpusService: CorpusService, private apiService: ApiService, private wordModelsService: WordmodelsService) { }
+    constructor(
+        private corpusService: CorpusService,
+        private apiService: ApiService,
+        private title: Title,
+    ) { }
 
     ngOnInit(): void {
         this.corpusService.currentCorpus.subscribe(this.setCorpus.bind(this));
@@ -28,6 +34,7 @@ export class CorpusInfoComponent implements OnInit {
         this.apiService.fieldCoverage(corpus.name).then(
             result => this.fieldCoverage = result
         );
+        this.title.setTitle(pageTitle(`About ${corpus.title}`));
     }
 
     renderMarkdown(content: string): string {

frontend/src/app/document-page/document-page.component.ts

@@ -6,6 +6,8 @@ import { Corpus, FoundDocument } from '../models';
 import { CorpusService, ElasticSearchService } from '../services';
 import { makeContextParams } from '../utils/document-context';
 import { documentIcons } from '../shared/icons';
+import { Title } from '@angular/platform-browser';
+import { pageTitle } from '../utils/app';
 
 @Component({
   selector: 'ia-document-page',
@@ -25,6 +27,7 @@ export class DocumentPageComponent implements OnInit {
         private corpusService: CorpusService,
         private elasticSearchService: ElasticSearchService,
         private activatedRoute: ActivatedRoute,
+        private title: Title,
     ) { }
 
     get contextDisplayName(): string {
@@ -53,6 +56,7 @@ export class DocumentPageComponent implements OnInit {
             this.corpus = corpus;
             this.documentId = params['id'];
             this.getDocument(this.documentId);
+            this.title.setTitle(pageTitle(`Document in ${corpus.title}`));
         });
     }
 

frontend/src/app/history/download-history/download-history.component.ts

@@ -6,6 +6,8 @@ import { HistoryDirective } from '../history.directive';
 import { findByName } from '../../utils/utils';
 import { actionIcons } from '../../shared/icons';
 import { downloadQueryModel, downloadQueryModels } from '../../utils/download-history';
+import { Title } from '@angular/platform-browser';
+import { pageTitle } from '../../utils/app';
 
 @Component({
     selector: 'ia-download-history',
@@ -23,12 +25,14 @@ export class DownloadHistoryComponent extends HistoryDirective implements OnInit
         private downloadService: DownloadService,
         private apiService: ApiService,
         corpusService: CorpusService,
-        private notificationService: NotificationService
+        private notificationService: NotificationService,
+        private title: Title,
     ) {
         super(corpusService);
     }
 
     ngOnInit(): void {
+        this.title.setTitle(pageTitle('Downloads'));
         this.retrieveCorpora();
         this.apiService.downloads()
             .then(downloadHistory => this.downloads = this.sortByDate(downloadHistory))

frontend/src/app/history/search-history/search-history.component.ts

@@ -1,12 +1,14 @@
 import { Component, OnInit } from '@angular/core';
-import { Params, Router } from '@angular/router';
+import { Params } from '@angular/router';
 import * as _ from 'lodash';
 import { apiQueryToQueryModel } from '../../utils/es-query';
 import { QueryDb } from '../../models/index';
 import { CorpusService, QueryService } from '../../services/index';
 import { HistoryDirective } from '../history.directive';
 import { findByName } from '../../utils/utils';
 import { actionIcons } from '../../shared/icons';
+import { Title } from '@angular/platform-browser';
+import { pageTitle } from '../../utils/app';
 
 @Component({
     selector: 'ia-search-history',
@@ -22,12 +24,14 @@ export class SearchHistoryComponent extends HistoryDirective implements OnInit {
     constructor(
         corpusService: CorpusService,
         private queryService: QueryService,
-        private router: Router
+        private title: Title,
+
     ) {
         super(corpusService);
     }
 
     async ngOnInit() {
+        this.title.setTitle(pageTitle('Search history'));
         this.retrieveCorpora();
         this.queryService.retrieveQueries().then((searchHistory) => {
             const sortedQueries = this.sortByDate(searchHistory);

frontend/src/app/home/home.component.ts

@@ -4,6 +4,7 @@ import { BehaviorSubject } from 'rxjs';
 import { Corpus } from '../models/corpus';
 import { CorpusService } from '../services/index';
 import { showLoading } from '../utils/utils';
+import { environment } from '../../environments/environment';
 
 @Component({
     selector: 'ia-home',
@@ -15,8 +16,8 @@ export class HomeComponent implements OnInit {
 
     isLoading = new BehaviorSubject<boolean>(false);
 
-    constructor(private corpusService: CorpusService, private title: Title) {
-        this.title.setTitle('Home');
+    constructor(private corpusService: CorpusService, title: Title) {
+        title.setTitle(environment.appName);
     }
 
     ngOnInit() {

frontend/src/app/login/login.component.html

@@ -2,7 +2,7 @@
 
     <form (ngSubmit)="login()" class="container is-readable">
         <div class="container is-login">
-            <h1 class="title">I-Analyzer</h1>
+            <h1 class="title">Sign in</h1>
             <div class="field">
                 <label class="label" for="username">Username</label>
                 <p class="control has-icons-left has-icons-right">

frontend/src/app/login/login.component.ts

@@ -8,6 +8,7 @@ import { AuthService } from '../services/auth.service';
 import { HttpErrorResponse } from '@angular/common/http';
 import { environment } from '../../environments/environment';
 import { userIcons } from '../shared/icons';
+import { pageTitle } from '../utils/app';
 
 @Component({
     selector: 'ia-login',
@@ -37,10 +38,10 @@ export class LoginComponent implements OnInit, OnDestroy {
         private router: Router,
         private title: Title
     ) {
-        this.title.setTitle('I-Analyzer');
     }
 
     ngOnInit() {
+        this.title.setTitle(pageTitle('Sign in'));
         // get return url from route parameters or default to '/'
         this.returnUrl =
             this.activatedRoute.snapshot.queryParams['returnUrl'] || '/';

frontend/src/app/login/registration/registration.component.ts

@@ -6,6 +6,8 @@ import { takeUntil } from 'rxjs/operators';
 import { HttpErrorResponse } from '@angular/common/http';
 import * as _ from 'lodash';
 import { userIcons } from '../../shared/icons';
+import { Title } from '@angular/platform-browser';
+import { pageTitle } from '../../utils/app';
 
 interface RegisterErrors {
     non_field_errors?: string[];
@@ -41,9 +43,12 @@ export class RegistrationComponent implements OnInit, OnDestroy {
 
     private destroy$ = new Subject<boolean>();
 
-    constructor(private authService: AuthService) {}
+    constructor(private authService: AuthService, private title: Title) {}
+
+    ngOnInit() {
+        this.title.setTitle(pageTitle('Register'));
+    }
 
-    ngOnInit() {}
     ngOnDestroy() {
         this.destroy$.next(true);
     }

frontend/src/app/login/reset-password/request-reset.component.ts

@@ -6,6 +6,8 @@ import { AuthService } from '../../services/auth.service';
 import { HttpErrorResponse } from '@angular/common/http';
 import * as _ from 'lodash';
 import { userIcons } from '../../shared/icons';
+import { Title } from '@angular/platform-browser';
+import { pageTitle } from '../../utils/app';
 
 @Component({
     selector: 'ia-request-reset',
@@ -20,9 +22,15 @@ export class RequestResetComponent implements OnInit {
 
     userIcons = userIcons;
 
-    constructor(private authService: AuthService, private router: Router) {}
+    constructor(
+        private authService: AuthService,
+        private router: Router,
+        private title: Title
+    ) {}
 
-    ngOnInit() {}
+    ngOnInit() {
+        this.title.setTitle(pageTitle('Reset password'));
+    }
 
     requestReset(requestResetForm: NgForm) {
         const email: string = requestResetForm.value.email;

frontend/src/app/login/reset-password/reset-password.component.html

@@ -3,7 +3,7 @@
             <div *ngIf="!resetSucceeded || passwordRejected">
                 <form (ngSubmit)="reset(resetForm)" class="container is-readable" #resetForm="ngForm">
                     <div class="container is-login">
-                        <h1 class="title">I-Analyzer password reset</h1>
+                        <h1 class="title">Set new password</h1>
                         <div class="field">
                             <label class="label">Password</label>
                             <p class="control has-icons-left">

frontend/src/app/login/reset-password/reset-password.component.ts

@@ -1,13 +1,12 @@
 import { Component, OnInit } from '@angular/core';
 import { NgForm } from '@angular/forms';
-
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 import * as _ from 'lodash';
-import { throwError } from 'rxjs';
-import { catchError, finalize, mergeMap, tap } from 'rxjs/operators';
 import { AuthService } from '../../services/auth.service';
 import { HttpErrorResponse } from '@angular/common/http';
 import { userIcons } from '../../shared/icons';
+import { Title } from '@angular/platform-browser';
+import { pageTitle } from '../../utils/app';
 
 @Component({
     selector: 'ia-reset-password',
@@ -29,14 +28,16 @@ export class ResetPasswordComponent implements OnInit {
 
     constructor(
         private activatedRoute: ActivatedRoute,
-        private authService: AuthService
+        private authService: AuthService,
+        private title: Title,
     ) {}
 
     ngOnInit() {
         this.activatedRoute.params.subscribe((params) => {
             this.uid = params['uid'];
             this.token = params['token'];
         });
+        this.title.setTitle(pageTitle('New password'));
     }
 
     reset(resetForm: NgForm) {

frontend/src/app/login/verify-email/verify-email.component.ts

@@ -4,6 +4,8 @@ import { ActivatedRoute } from '@angular/router';
 import { Observable, Subject, throwError } from 'rxjs';
 import { catchError } from 'rxjs/operators';
 import { AuthService } from '../../services/auth.service';
+import { Title } from '@angular/platform-browser';
+import { pageTitle } from '../../utils/app';
 
 @Component({
     selector: 'ia-verify-email',
@@ -18,7 +20,8 @@ export class VerifyEmailComponent implements OnInit {
 
     constructor(
         private activatedRoute: ActivatedRoute,
-        private authService: AuthService
+        private authService: AuthService,
+        private title: Title,
     ) {
         this.activatedRoute.paramMap.subscribe(
             (params) => (this.key = params.get('key'))
@@ -32,6 +35,7 @@ export class VerifyEmailComponent implements OnInit {
                 return throwError(err);
             })
         );
+        this.title.setTitle(pageTitle('Verify email'));
     }
 
     confirm() {

frontend/src/app/manual/manual.component.ts

@@ -1,8 +1,9 @@
 import { Component, OnInit } from '@angular/core';
-import { SafeHtml } from '@angular/platform-browser';
+import { SafeHtml, Title } from '@angular/platform-browser';
 import { ActivatedRoute } from '@angular/router';
 
 import { DialogService } from '../services';
+import { pageTitle } from '../utils/app';
 
 @Component({
     selector: 'ia-manual',
@@ -14,7 +15,12 @@ export class ManualComponent implements OnInit {
     public title: string | undefined;
     public manualHtml: SafeHtml | undefined;
 
-    constructor(private dialogService: DialogService, private activatedRoute: ActivatedRoute) {
+    constructor(
+        private dialogService: DialogService,
+        private activatedRoute: ActivatedRoute,
+        title: Title
+    ) {
+        title.setTitle(pageTitle('Manual'));
     }
 
     ngOnInit() {

frontend/src/app/menu/menu.component.ts

@@ -4,12 +4,8 @@ import { BehaviorSubject, Observable, Subject, fromEvent, merge, of, timer } fro
 import { User } from '../models/index';
 import { environment } from '../../environments/environment';
 import { AuthService } from '../services/auth.service';
-import { catchError, filter, map, switchMap, take, takeUntil } from 'rxjs/operators';
+import { filter, map, switchMap, take, takeUntil } from 'rxjs/operators';
 import * as _ from 'lodash';
-import {
-    faBook, faCog, faCogs, faDatabase, faDownload, faHistory, faInfoCircle, faSignOut,
-    faUser
-} from '@fortawesome/free-solid-svg-icons';
 import { navIcons, userIcons } from '../shared/icons';
 
 @Component({

frontend/src/app/privacy/privacy.component.html

@@ -2,7 +2,7 @@
     <div class="container is-readable">
         <div class="columns">
             <div class="column is-9">
-                <h1 class="title">{{title}}</h1>
+                <h1 class="title">{{header}}</h1>
                 <div class="content" [innerHTML]="manualHtml"></div>
             </div>
         </div>

frontend/src/app/privacy/privacy.component.ts

@@ -1,21 +1,24 @@
 import { Component, OnInit } from '@angular/core';
-import { SafeHtml } from '@angular/platform-browser';
+import { SafeHtml, Title } from '@angular/platform-browser';
 import { DialogService } from '../services/index';
+import { pageTitle } from '../utils/app';
 
 @Component({
     selector: 'ia-privacy',
     templateUrl: './privacy.component.html',
     styleUrls: ['./privacy.component.scss'],
 })
 export class PrivacyComponent implements OnInit {
-    public title: string | undefined;
+    public header: string | undefined;
     public manualHtml: SafeHtml | undefined;
-    constructor(private dialogService: DialogService) {}
+
+    constructor(private dialogService: DialogService, private title: Title) {}
 
     ngOnInit() {
         this.dialogService.getManualPage('privacy').then((page) => {
             this.manualHtml = page.html;
-            this.title = page.title;
+            this.header = page.title;
+            this.title.setTitle(pageTitle(this.header));
         });
     }
 }