Merge pull request #227 from CenterForOpenScience/feat/sign-up

Feat/sign up

Author: nsemets

src/app/app.component.ts

@@ -4,6 +4,7 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
 import { GetCurrentUser } from '@core/store/user';
+import { InitializeAuth } from '@osf/features/auth/store';
 
 import { FullScreenLoaderComponent, ToastComponent } from './shared/components';
 
@@ -15,9 +16,13 @@ import { FullScreenLoaderComponent, ToastComponent } from './shared/components';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent implements OnInit {
-  actions = createDispatchMap({ getCurrentUser: GetCurrentUser });
+  actions = createDispatchMap({
+    getCurrentUser: GetCurrentUser,
+    initializeAuth: InitializeAuth,
+  });
 
   ngOnInit(): void {
+    this.actions.initializeAuth();
     this.actions.getCurrentUser();
   }
 }

src/app/app.routes.ts

@@ -4,6 +4,7 @@ import { Routes } from '@angular/router';
 
 import { BookmarksState, ProjectsState } from '@shared/stores';
 
+import { authGuard, redirectIfLoggedInGuard } from './core/guards';
 import { MyProfileResourceFiltersOptionsState } from './features/my-profile/components/filters/store';
 import { MyProfileResourceFiltersState } from './features/my-profile/components/my-profile-resource-filters/store';
 import { MyProfileState } from './features/my-profile/store';
@@ -19,20 +20,16 @@ export const routes: Routes = [
       {
         path: '',
         pathMatch: 'full',
-        redirectTo: 'home',
-      },
-      {
-        path: 'home',
-        loadComponent: () => import('./features/home/home.component').then((mod) => mod.HomeComponent),
+        canActivate: [redirectIfLoggedInGuard],
+        loadComponent: () => import('@osf/features/home/home.component').then((mod) => mod.HomeComponent),
         data: { skipBreadcrumbs: true },
       },
       {
-        path: 'home-logged-out',
+        path: 'dashboard',
         loadComponent: () =>
-          import('@osf/features/home/pages/home-logged-out/home-logged-out.component').then(
-            (mod) => mod.HomeLoggedOutComponent
-          ),
+          import('./features/home/pages/dashboard/dashboard.component').then((mod) => mod.DashboardComponent),
         data: { skipBreadcrumbs: true },
+        canActivate: [authGuard],
       },
       {
         path: 'confirm/:userId/:token',
@@ -74,15 +71,18 @@ export const routes: Routes = [
         loadComponent: () =>
           import('./features/my-projects/my-projects.component').then((mod) => mod.MyProjectsComponent),
         providers: [provideStates([BookmarksState])],
+        canActivate: [authGuard],
       },
       {
         path: 'my-projects/:id',
         loadChildren: () => import('./features/project/project.routes').then((mod) => mod.projectRoutes),
         providers: [provideStates([ProjectsState, BookmarksState])],
+        canActivate: [authGuard],
       },
       {
         path: 'settings',
         loadChildren: () => import('./features/settings/settings.routes').then((mod) => mod.settingsRoutes),
+        canActivate: [authGuard],
       },
       {
         path: 'preprints',
@@ -99,6 +99,7 @@ export const routes: Routes = [
         providers: [
           provideStates([MyProfileResourceFiltersState, MyProfileResourceFiltersOptionsState, MyProfileState]),
         ],
+        canActivate: [authGuard],
       },
       {
         path: 'institutions',
@@ -112,6 +113,7 @@ export const routes: Routes = [
         path: 'registries/:id',
         loadChildren: () => import('./features/registry/registry.routes').then((mod) => mod.registryRoutes),
         providers: [provideStates([BookmarksState])],
+        canActivate: [authGuard],
       },
       {
         path: 'terms-of-use',

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

@@ -2,20 +2,24 @@
   <osf-breadcrumb />
 
   <div class="header-dropdown-button ml-auto">
-    <p-button
-      class="custom-dark-hover"
-      icon="fas fa-chevron-down"
-      iconPos="right"
-      variant="text"
-      severity="contrast"
-      [label]="currentUser()?.fullName"
-      (click)="menu.toggle($event)"
-    />
+    @if (isAuthenticated()) {
+      <p-button
+        class="custom-dark-hover"
+        icon="fas fa-chevron-down"
+        iconPos="right"
+        variant="text"
+        severity="contrast"
+        [label]="currentUser()?.fullName"
+        (click)="menu.toggle($event)"
+      />
 
-    <p-menu appendTo="body" #menu [model]="items" popup>
-      <ng-template #item let-item>
-        <a class="p-menu-item-link">{{ item.label | translate }}</a>
-      </ng-template>
-    </p-menu>
+      <p-menu appendTo="body" #menu [model]="items" popup>
+        <ng-template #item let-item>
+          <a class="p-menu-item-link">{{ item.label | translate }}</a>
+        </ng-template>
+      </p-menu>
+    } @else {
+      <p-button [label]="'navigation.signIn' | translate" (onClick)="navigateToSignIn()"></p-button>
+    }
   </div>
 </header>

src/app/core/components/header/header.component.scss

@@ -4,7 +4,6 @@
   position: absolute;
   gap: 1rem;
   padding: mix.rem(12px) mix.rem(24px);
-  height: mix.rem(52px);
   width: 100%;
   background-color: var(--header-background-color);
   background-image: var(--header-background-image-url);

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

@@ -1,27 +1,35 @@
-import { select } from '@ngxs/store';
+import { createDispatchMap, select } from '@ngxs/store';
 
 import { TranslatePipe } from '@ngx-translate/core';
 
-import { ButtonModule } from 'primeng/button';
-import { MenuModule } from 'primeng/menu';
+import { Button } from 'primeng/button';
+import { Menu } from 'primeng/menu';
 
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { Router } from '@angular/router';
 
-import { BreadcrumbComponent } from '@core/components/breadcrumb/breadcrumb.component';
-import { UserSelectors } from '@core/store/user/user.selectors';
+import { NavigationService } from '@osf/core/services';
+import { UserSelectors } from '@osf/core/store/user';
+import { AuthSelectors, Logout } from '@osf/features/auth/store';
+import { LoaderService } from '@osf/shared/services';
+
+import { BreadcrumbComponent } from '../breadcrumb/breadcrumb.component';
 
 @Component({
   selector: 'osf-header',
-  imports: [BreadcrumbComponent, MenuModule, ButtonModule, TranslatePipe],
+  imports: [BreadcrumbComponent, Menu, Button, TranslatePipe],
   templateUrl: './header.component.html',
   styleUrl: './header.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HeaderComponent {
   currentUser = select(UserSelectors.getCurrentUser);
+  isAuthenticated = select(AuthSelectors.isAuthenticated);
 
   private readonly router = inject(Router);
+  private readonly loaderService = inject(LoaderService);
+  private readonly navigationService = inject(NavigationService);
+  private readonly actions = createDispatchMap({ logout: Logout });
 
   items = [
     {
@@ -32,9 +40,14 @@ export class HeaderComponent {
     {
       label: 'navigation.logOut',
       command: () => {
-        document.cookie = 'auth_token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
-        this.router.navigate(['/']);
+        this.loaderService.show();
+        this.actions.logout();
+        this.router.navigate(['/home']).then(() => window.location.reload());
       },
     },
   ];
+
+  navigateToSignIn() {
+    this.navigationService.navigateToSignIn();
+  }
 }

src/app/core/components/nav-menu/nav-menu.component.ts

@@ -7,13 +7,15 @@ import { PanelMenuModule } from 'primeng/panelmenu';
 
 import { filter, map } from 'rxjs';
 
-import { Component, computed, effect, inject, output } from '@angular/core';
+import { Component, computed, inject, output } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { ActivatedRoute, NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router';
 
 import { MENU_ITEMS, MODERATION_MENU_ITEM, PROJECT_MENU_ITEMS, REGISTRATION_MENU_ITEMS } from '@core/constants';
+import { filterMenuItems } from '@osf/core/helpers';
 import { ProviderSelectors } from '@osf/core/store/provider';
 import { UserSelectors } from '@osf/core/store/user';
+import { AuthSelectors } from '@osf/features/auth/store';
 import { IconComponent } from '@osf/shared/components';
 
 @Component({
@@ -28,7 +30,8 @@ export class NavMenuComponent {
   private readonly router = inject(Router);
   private readonly route = inject(ActivatedRoute);
 
-  protected menuItems = MENU_ITEMS;
+  private readonly isAuthenticated = select(AuthSelectors.isAuthenticated);
+
   protected readonly myProjectMenuItems = PROJECT_MENU_ITEMS;
   protected readonly registrationMenuItems = computed(() => {
     const menu = [...REGISTRATION_MENU_ITEMS];
@@ -55,9 +58,22 @@ export class NavMenuComponent {
   protected readonly isUserModerator = select(UserSelectors.isCurrentUserModerator);
   protected readonly provider = select(ProviderSelectors.getCurrentProvider);
 
-  protected readonly mainMenuItems = computed(() =>
-    this.isCollectionsRoute() ? this.menuItems : this.menuItems.filter((item) => item.routerLink !== '/collections')
-  );
+  protected readonly mainMenuItems = computed(() => {
+    const isAuthenticated = this.isAuthenticated();
+    const menuItems = filterMenuItems(MENU_ITEMS, isAuthenticated);
+
+    if (this.isRegistryRouteDetails()) {
+      menuItems.map((menuItem) => {
+        if (menuItem.id === 'registries') {
+          menuItem.expanded = true;
+          return menuItem;
+        }
+        return menuItem;
+      });
+    }
+
+    return this.isCollectionsRoute() ? menuItems : menuItems.filter((item) => item.routerLink !== '/collections');
+  });
 
   protected readonly currentRoute = toSignal(
     this.router.events.pipe(
@@ -75,21 +91,6 @@ export class NavMenuComponent {
   protected readonly isRegistryRoute = computed(() => this.currentRoute().isRegistryRoute);
   protected readonly isRegistryRouteDetails = computed(() => this.currentRoute().isRegistryRouteDetails);
 
-  constructor() {
-    effect(() => {
-      const isRouteDetails = this.isRegistryRouteDetails();
-      if (isRouteDetails) {
-        this.menuItems = this.menuItems.map((menuItem) => {
-          if (menuItem.id === 'registries') {
-            menuItem.expanded = true;
-            return menuItem;
-          }
-          return menuItem;
-        });
-      }
-    });
-  }
-
   private getRouteInfo() {
     const urlSegments = this.router.url.split('/').filter((segment) => segment);
     const resourceFromQueryParams = this.route.snapshot.queryParams['resourceId'];