Merge pull request #104 from CenterForOpenScience/feat/199-other-pages

Feat/199 other pages

Author: nsemets

src/app/app.routes.ts

@@ -44,6 +44,7 @@ export const routes: Routes = [
       {
         path: 'home',
         loadComponent: () => import('./features/home/home.component').then((mod) => mod.HomeComponent),
+        data: { skipBreadcrumbs: true },
       },
       {
         path: 'home-logged-out',
@@ -193,11 +194,26 @@ export const routes: Routes = [
       {
         path: 'confirm/:userId/:emailId',
         loadComponent: () => import('./features/home/home.component').then((mod) => mod.HomeComponent),
+        data: { skipBreadcrumbs: true },
+      },
+      {
+        path: 'forbidden',
+        loadComponent: () =>
+          import('./core/components/forbidden-page/forbidden-page.component').then((mod) => mod.ForbiddenPageComponent),
+        data: { skipBreadcrumbs: true },
+      },
+      {
+        path: 'request-access/:projectId',
+        loadComponent: () =>
+          import('./core/components/request-access/request-access.component').then((mod) => mod.RequestAccessComponent),
+        data: { skipBreadcrumbs: true },
+      },
+      {
+        path: '**',
+        loadComponent: () =>
+          import('./core/components/page-not-found/page-not-found.component').then((mod) => mod.PageNotFoundComponent),
+        data: { skipBreadcrumbs: true },
       },
     ],
   },
-  {
-    path: '**',
-    redirectTo: 'home',
-  },
 ];

src/app/core/components/breadcrumb/breadcrumb.component.html

@@ -1,4 +1,4 @@
-@if (!parsedUrl()[0].includes('home') && !parsedUrl()[0].includes('confirm')) {
+@if (showBreadcrumb()) {
   <div class="breadcrumbs flex align-items-center gap-2 md:p-5 md:pb-0 xl:p-0">
     <osf-icon iconClass="fas fa-home"></osf-icon>
     <p>/</p>

src/app/core/components/breadcrumb/breadcrumb.component.ts

@@ -1,7 +1,10 @@
-import { Component, computed, DestroyRef, inject, signal } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { NavigationEnd, Router } from '@angular/router';
+import { filter, map, startWith } from 'rxjs';
 
+import { Component, computed, inject } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+
+import { RouteData } from '@osf/core/models';
 import { IconComponent } from '@osf/shared/components';
 
 @Component({
@@ -11,22 +14,44 @@ import { IconComponent } from '@osf/shared/components';
   styleUrl: './breadcrumb.component.scss',
 })
 export class BreadcrumbComponent {
-  #router = inject(Router);
-  #destroyRef = inject(DestroyRef);
-  protected readonly url = signal(this.#router.url);
-  protected readonly parsedUrl = computed(() => {
-    return this.url()
+  private readonly router = inject(Router);
+  private readonly route = inject(ActivatedRoute);
+
+  protected readonly url = toSignal(
+    this.router.events.pipe(
+      filter((event) => event instanceof NavigationEnd),
+      map(() => this.router.url),
+      startWith(this.router.url)
+    ),
+    { initialValue: this.router.url }
+  );
+
+  protected readonly routeData = toSignal(
+    this.router.events.pipe(
+      filter((event) => event instanceof NavigationEnd),
+      map(() => this.getCurrentRouteData()),
+      startWith(this.getCurrentRouteData())
+    ),
+    { initialValue: { skipBreadcrumbs: false } as RouteData }
+  );
+
+  protected readonly showBreadcrumb = computed(() => this.routeData()?.skipBreadcrumbs !== true);
+
+  protected readonly parsedUrl = computed(() =>
+    this.url()
       .split('?')[0]
       .split('/')
       .filter(Boolean)
-      .map((segment) => segment.replace(/-/g, ' '));
-  });
-
-  constructor() {
-    this.#router.events.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((event) => {
-      if (event instanceof NavigationEnd) {
-        this.url.set(this.#router.url);
-      }
-    });
+      .map((segment) => segment.replace(/-/g, ' '))
+  );
+
+  private getCurrentRouteData(): RouteData {
+    let currentRoute = this.route;
+
+    while (currentRoute.firstChild) {
+      currentRoute = currentRoute.firstChild;
+    }
+
+    return currentRoute.snapshot.data as RouteData;
   }
 }

src/app/core/components/forbidden-page/forbidden-page.component.html

@@ -0,0 +1,7 @@
+<section class="container text-center flex flex-column flex-1 my-7 mx-3 p-3 md:p-4">
+  <h2>{{ 'forbiddenPage.title' | translate }}</h2>
+  <p class="mt-4">
+    <span>{{ 'forbiddenPage.message' | translate }}</span>
+    <a class="ml-1 font-bold" href="mailto:support@osf.io">support&#64;osf.io</a>
+  </p>
+</section>

src/app/core/components/forbidden-page/forbidden-page.component.scss

@@ -0,0 +1,17 @@
+@use "assets/styles/mixins" as mix;
+@use "assets/styles/variables" as var;
+
+:host {
+  @include mix.flex-center;
+  flex: 1;
+  background: var(--gradient-3);
+}
+
+.container {
+  position: relative;
+  background: var.$white;
+  border-radius: mix.rem(12px);
+  box-shadow: 0 2px 4px var.$grey-outline;
+  color: var.$dark-blue-1;
+  max-width: mix.rem(448px);
+}

src/app/core/components/forbidden-page/forbidden-page.component.spec.ts

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

src/app/core/components/forbidden-page/forbidden-page.component.ts

@@ -0,0 +1,12 @@
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'osf-forbidden-page',
+  imports: [TranslatePipe],
+  templateUrl: './forbidden-page.component.html',
+  styleUrl: './forbidden-page.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ForbiddenPageComponent {}

src/app/core/components/index.ts

@@ -1,6 +1,7 @@
 export { BreadcrumbComponent } from './breadcrumb/breadcrumb.component';
 export { FooterComponent } from './footer/footer.component';
 export { HeaderComponent } from './header/header.component';
+export { PageNotFoundComponent } from './page-not-found/page-not-found.component';
 export { RootComponent } from './root/root.component';
 export { SidenavComponent } from './sidenav/sidenav.component';
 export { TopnavComponent } from './topnav/topnav.component';

src/app/core/components/page-not-found/page-not-found.component.html

@@ -0,0 +1,7 @@
+<section class="container text-center flex flex-column flex-1 my-7 mx-3 p-3 md:p-4">
+  <h2>{{ 'pageNotFound.title' | translate }}</h2>
+  <p class="mt-4">
+    <span>{{ 'pageNotFound.message' | translate }}</span>
+    <a class="ml-1 font-bold" href="mailto:support@osf.io">support&#64;osf.io</a>
+  </p>
+</section>

src/app/core/components/page-not-found/page-not-found.component.scss

@@ -0,0 +1,17 @@
+@use "assets/styles/mixins" as mix;
+@use "assets/styles/variables" as var;
+
+:host {
+  @include mix.flex-center;
+  flex: 1;
+  background: var(--gradient-3);
+}
+
+.container {
+  position: relative;
+  background: var.$white;
+  border-radius: mix.rem(12px);
+  box-shadow: 0 2px 4px var.$grey-outline;
+  color: var.$dark-blue-1;
+  max-width: mix.rem(448px);
+}