Add not found page (#444)

Author: Néstor Diaz

src/app/app-routing.module.ts

@@ -7,16 +7,17 @@ import { PasswordResetReqComponent } from './auth/password-reset/password-reset-
 import { PasswordResetComponent } from './auth/password-reset/password-reset.component';
 import { SignInComponent } from './auth/signin/signin.component';
 import { SignUpComponent } from './auth/signup/signup.component';
+import { NotFoundComponent } from './pages/not-found/not-found.component';
 
 const appRoutes: Routes = [
-  { path: '', redirectTo: 'submissions', pathMatch: 'full' },
-  { path: '', loadChildren: () => import('./pages/pages.module').then((m) => m.PagesModule) },
   { path: 'signin', component: SignInComponent },
   { path: 'signup', component: SignUpComponent },
   { path: 'activate/:key', component: ActivateComponent },
   { path: 'password_reset_request', component: PasswordResetReqComponent },
   { path: 'password_reset/:key', component: PasswordResetComponent },
-  { path: 'resend_activation_link', component: ActivationLinkReqComponent }
+  { path: 'resend_activation_link', component: ActivationLinkReqComponent },
+  { path: '', component: SignInComponent },
+  { path: '**', component: NotFoundComponent }
 ];
 
 @NgModule({

src/app/auth-guard.service.ts

@@ -9,7 +9,7 @@ export class AuthGuard implements CanActivate {
   // tslint:disable-next-line: variable-name
   canActivate(_route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
     if (this.userSession.isAnonymous()) {
-      this.router.navigate(['/signin', { next: state.url }]);
+      this.router.navigate(['/signin'], { queryParams: { next: state.url } });
       return false;
     } else {
       return true;

src/app/auth/signin/signin.component.ts

@@ -24,20 +24,20 @@ export class SignInComponent implements OnInit {
 
   ngOnInit(): void {
     if (!this.userSession.isAnonymous()) {
-      this.router.navigate(['']);
+      this.router.navigate(['submissions']);
     }
   }
 
   onSubmit(form: NgForm): void {
     this.resetGlobalError();
-    const next = this.route.snapshot.paramMap.get('next') || '/submissions';
+    const next = this.route.snapshot.queryParamMap.get('next') || '/submissions';
 
     if (form.valid) {
       this.isLoading = true;
       this.authService.login(this.model).subscribe(
         (user: UserInfo) => {
           this.userSession.create(user);
-          this.router.navigate([next]);
+          this.router.navigateByUrl(next);
         },
         (error: ServerError) => {
           this.isLoading = false;

src/app/pages/not-found/not-found.component.html

@@ -0,0 +1,21 @@
+<div class="container text-center mt-5">
+  <div class="row">
+    <div class="col-md-12">
+      <div class="error-template">
+        <h1>Oops!</h1>
+        <h5 class="mb-3">The requested page was not found</h5>
+        <div class="d-flex justify-content-center">
+          <a routerLink="/" class="btn btn-primary mr-2">
+            <i class="fas fa-home"></i>
+            Home
+          </a>
+          <button class="btn btn-light" (click)="sendEmail()"
+            role="button">
+            <i class="far fa-envelope"></i>
+            Contact BioStudies
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/pages/not-found/not-found.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'st-not-found',
+  templateUrl: './not-found.component.html'
+})
+export class NotFoundComponent {
+  sendEmail(): void {
+    window.location.href = 'mailto:biostudies@ebi.ac.uk?Subject=BioStudies Submission Tool Page not found';
+  }
+}

src/app/pages/pages-routing.module.ts

@@ -6,45 +6,45 @@ import { AuthGuard } from 'app/auth-guard.service';
 import { DirectSubmitComponent } from './submission/submission-direct/direct-submit.component';
 import { SubmissionEditComponent } from './submission/submission-edit/submission-edit.component';
 import { SubmListComponent } from './submission/submission-list/subm-list.component';
+import { PagesComponent } from './pages.component';
 
 const pagesRoutes: Routes = [
   { path: 'help', component: HelpComponent },
   { path: 'files', component: FileListComponent, canActivate: [AuthGuard] },
   {
     path: 'submissions',
-    component: SubmListComponent,
+    component: PagesComponent,
     data: { isSent: true, reuse: true },
-    canActivate: [AuthGuard]
-  },
-  {
-    path: 'submissions/draft',
-    component: SubmListComponent,
-    data: { isSent: false, reuse: true },
-    canActivate: [AuthGuard]
-  },
-  {
-    path: 'submissions/direct_upload',
-    component: DirectSubmitComponent,
-    canActivate: [AuthGuard]
-  },
-  {
-    path: 'submissions/edit/:accno',
-    component: SubmissionEditComponent,
-    canActivate: [AuthGuard],
-    runGuardsAndResolvers: 'always'
-  },
-  {
-    path: 'submissions/new/:accno',
-    component: SubmissionEditComponent,
-    data: { isNew: true },
-    canActivate: [AuthGuard]
-  },
-  {
-    path: 'submissions/:accno',
-    component: SubmissionEditComponent,
-    data: { readonly: true },
     canActivate: [AuthGuard],
-    runGuardsAndResolvers: 'always'
+    children: [
+      {
+        path: 'draft',
+        component: SubmListComponent,
+        data: { isSent: false, reuse: true }
+      },
+      { path: 'direct_upload', component: DirectSubmitComponent },
+      {
+        path: 'edit/:accno',
+        component: SubmissionEditComponent,
+        runGuardsAndResolvers: 'always'
+      },
+      {
+        path: 'new/:accno',
+        component: SubmissionEditComponent,
+        data: { isNew: true }
+      },
+      {
+        path: ':accno',
+        component: SubmissionEditComponent,
+        data: { readonly: true },
+        runGuardsAndResolvers: 'always'
+      },
+      {
+        path: '',
+        component: SubmListComponent,
+        data: { isSent: true, reuse: true }
+      }
+    ]
   }
 ];
 

src/app/pages/pages.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'st-page',
+  template: '<router-outlet></router-outlet>'
+})
+export class PagesComponent {}

src/app/pages/pages.module.ts

@@ -1,5 +1,7 @@
 import { NgModule } from '@angular/core';
 import { SharedModule } from 'app/shared/shared.module';
+import { PagesComponent } from './pages.component';
+import { NotFoundComponent } from './not-found/not-found.component';
 import { HelpComponent } from './help/help.component';
 import { PagesRoutingModule } from './pages-routing.module';
 import { SubmissionDirectModule } from './submission/submission-direct/submission-direct.module';
@@ -16,6 +18,6 @@ import { FileModule } from './file/file.module';
     SubmissionEditModule,
     SubmissionListModule
   ],
-  declarations: [HelpComponent]
+  declarations: [PagesComponent, HelpComponent, NotFoundComponent]
 })
 export class PagesModule {}