Merge pull request #21

Filtering by user tag

Author: emp74ark

src/app/app.css

@@ -1,12 +0,0 @@
-.private {
-  padding: 1rem;
-  container-type: inline-size;
-}
-
-.public {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 100vh;
-}
-

src/app/app.html

@@ -1,11 +1 @@
-@if (authStatus()?.authenticated) {
-  <main class="private">
-    <app-nav>
-      <router-outlet/>
-    </app-nav>
-  </main>
-} @else {
-  <main class="public">
-    <router-outlet/>
-  </main>
-}
+<ng-container *ngComponentOutlet="getOutlet()"/>

src/app/app.routes.ts

@@ -8,18 +8,18 @@ export const routes: Routes = [
   { path: '', redirectTo: 'auth', pathMatch: 'full' },
   { path: 'auth', component: AuthPage, data: { title: 'Authentication' } },
   {
-    path: 'home',
+    path: 'articles',
     loadComponent: async () => {
-      const c = await import('./pages/home/home-page.component')
-      return c.HomePage
+      const c = await import('./pages/articles-page/articles-page')
+      return c.ArticlesPage
     },
     canMatch: [authGuard],
   },
   {
     path: 'bookmarks',
     loadComponent: async () => {
-      const c = await import('./pages/bookmarks/bookmarks')
-      return c.Bookmarks
+      const c = await import('./pages/bookmarks-page/bookmarks-page')
+      return c.BookmarksPage
     },
     canMatch: [authGuard],
   },
@@ -35,7 +35,7 @@ export const routes: Routes = [
   {
     path: 'subscription/:subscriptionId/article/:articleId',
     loadComponent: async () => {
-      const c = await import('./pages/article-page/article-page.component')
+      const c = await import('./pages/article-page/article-page')
       return c.ArticlePage
     },
     data: { title: 'Article' },
@@ -44,7 +44,7 @@ export const routes: Routes = [
   {
     path: 'tags',
     loadComponent: async () => {
-      const c = await import('./pages/tags/tags-page.component')
+      const c = await import('./pages/tags-page/tags-page')
       return c.TagsPage
     },
     data: { title: 'Tags' },
@@ -63,6 +63,7 @@ export const routes: Routes = [
     path: 'status',
     component: StatusPage,
     data: { title: 'Status' },
+    canMatch: [authGuard],
   },
   {
     path: '**',

src/app/app.ts

@@ -1,16 +1,21 @@
 import { Component, inject } from '@angular/core'
-import { RouterOutlet } from '@angular/router'
-import { NavComponent } from './components/nav/nav.component'
 import { AuthService } from './services/auth-service'
 import { toSignal } from '@angular/core/rxjs-interop'
+import { PrivateOutlet } from './outlet/private-outlet/private-outlet'
+import { PublicOutlet } from './outlet/public-outlet/public-outlet'
+import { NgComponentOutlet } from '@angular/common'
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet, NavComponent],
+  imports: [NgComponentOutlet],
   templateUrl: './app.html',
   styleUrl: './app.css',
 })
 export class App {
   private readonly authService = inject(AuthService)
-  protected readonly authStatus = toSignal(this.authService.$authStatus)
+  private readonly authStatus = toSignal(this.authService.$authStatus)
+
+  getOutlet() {
+    return this.authStatus()?.authenticated ? PrivateOutlet : PublicOutlet
+  }
 }

src/app/components/login-form/login-form.css

@@ -4,3 +4,7 @@
   gap: 1rem;
   margin: 1rem 0;
 }
+
+.description {
+  max-width: 30ch;
+}

src/app/components/login-form/login-form.html

@@ -1,5 +1,8 @@
 <form (ngSubmit)="onSubmit()">
   <mat-card-content class="credentials">
+    <span class="description">
+      Login with your existing password and login.
+    </span>
     <mat-form-field>
       <mat-label>Login</mat-label>
       <input

src/app/components/login-form/login-form.ts

@@ -53,7 +53,7 @@ export class LoginForm {
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((result) => {
         if (result) {
-          this.router.navigate(['/home'])
+          this.router.navigate(['/articles'])
         }
       })
   }

src/app/components/nav/nav.component.ts

@@ -1,11 +1,4 @@
-import {
-  Component,
-  DestroyRef,
-  inject,
-  OnInit,
-  signal,
-  viewChild
-} from '@angular/core'
+import { Component, DestroyRef, inject, OnInit, signal, viewChild } from '@angular/core'
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout'
 import { AsyncPipe } from '@angular/common'
 import { MatToolbarModule } from '@angular/material/toolbar'
@@ -55,7 +48,7 @@ export class NavComponent implements OnInit {
   private router = inject(Router)
 
   menuItems: { title: string; icon?: string; url: string }[] = [
-    { title: 'Articles', url: '/home', icon: 'library_books' },
+    { title: 'Articles', url: '/articles', icon: 'library_books' },
     { title: 'Bookmarks', url: '/bookmarks', icon: 'bookmark' },
     { title: 'Subscriptions', url: '/subscriptions', icon: 'rss_feed' },
     { title: 'Tags', url: '/tags', icon: 'tag' },

src/app/components/page-display-toggle/page-display-toggle.html

@@ -1,12 +1,16 @@
 <mat-button-toggle>
-  <mat-icon
+  <button
+    matIconButton
     [class]="(display | async) === PageDisplay.Title ? 'highlighted' : undefined"
     (click)="toggleDisplay(PageDisplay.Title)"
-  >view_day
-  </mat-icon>
-  <mat-icon
+  >
+    <mat-icon>view_day</mat-icon>
+  </button>
+  <button
+    matIconButton
     [class]="(display | async) === PageDisplay.Short ? 'highlighted' : undefined"
     (click)="toggleDisplay(PageDisplay.Short)"
-  >view_agenda
-  </mat-icon>
+  >
+    <mat-icon>view_agenda</mat-icon>
+  </button>
 </mat-button-toggle>

src/app/components/page-display-toggle/page-display-toggle.ts

@@ -4,10 +4,11 @@ import { MatButtonToggle } from '@angular/material/button-toggle'
 import { MatIcon } from '@angular/material/icon'
 import { PageDisplay } from '../../entities/page/page.enums'
 import { AsyncPipe } from '@angular/common'
+import { MatIconButton } from '@angular/material/button'
 
 @Component({
   selector: 'app-page-display-toggle',
-  imports: [MatButtonToggle, MatIcon, MatButtonToggle, MatIcon, AsyncPipe],
+  imports: [MatButtonToggle, MatIcon, MatButtonToggle, MatIcon, AsyncPipe, MatIconButton],
   templateUrl: './page-display-toggle.html',
   styleUrl: './page-display-toggle.css',
 })