Ajout de components et models

2023-09-13 20:49:23 +02:00
parent 1147d5f5bb
commit 0e6b3ef1c7
6 changed files with 229 additions and 0 deletions
@@ -0,0 +1,8 @@
+<footer class="footer">
+    <div class="container-fluid text-end">
+        <a class="me-1" [href]="siteLink" target="_blank">{{ author }}</a>
+        <span class="copyright">
+            &copy; {{ today | date: 'yyyy' }}
+        </span>
+    </div>
+</footer>
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { DatePipe } from '@angular/common';
+
+@Component({
+    selector: 'huapp-layout-footer',
+    templateUrl: './footer.component.html',
+    standalone: true,
+    imports: [DatePipe]
+})
+export class FooterComponent {
+    today: number = Date.now();
+    siteLink = 'https://www.rampeur.com';
+    author = 'Solide Apps';
+}
@@ -0,0 +1,50 @@
+<mat-toolbar color="primary" class="topbar">
+    <div class="navbar-header">
+        <a class="navbar-brand" href="index.html">
+            <span>
+                <img src="assets/images/logo-light-icon.svg" alt="homepage" class="light-logo">
+            </span>
+            <span>
+                <img src="assets/images/logo-light-text.svg" alt="homepage" class="light-logo">
+            </span>
+        </a>
+    </div>
+    <!--
+    <button mat-icon-button (click)="snav.toggle()" value="sidebarclosed">
+        <mat-icon fontIcon="menu"></mat-icon>
+    </button>
+    -->
+    <span class="flex-spacer"></span>
+    <ng-container *ngIf="isLogged()">
+        <span class="fw-light me-1">@{{ currentUser.username }}</span>
+        <div class="position-relative">
+            <button [matMenuTriggerFor]="profile" mat-icon-button>
+                <img [src]="currentUser.image" alt="user" class="profile-pic">
+            </button>
+            <mat-menu #profile="matMenu">
+                <button mat-menu-item [routerLink]="['/profile', currentUser.username]" routerLinkActive="active">
+                    <mat-icon fontIcon="account_circle" color="primary"></mat-icon> Mon compte
+                </button>
+                <button mat-menu-item routerLink="/settings" routerLinkActive="active">
+                    <mat-icon fontIcon="settings" color="primary"></mat-icon> Paramètres
+                </button>
+                <button mat-menu-item (click)="goToGitHub()">
+                    <mat-icon fontIcon="code" color="primary"></mat-icon> GitHub
+                </button>
+                <button mat-menu-item>
+                    <mat-icon fontIcon="notifications_off" color="primary"></mat-icon> Désactiver les notifications
+                </button>
+                <hr class="my-0" />
+                <button mat-menu-item (click)="logout()">
+                    <mat-icon fontIcon="logout" color="warn"></mat-icon> Se déconnecter
+                </button>
+            </mat-menu>
+        </div>
+    </ng-container>
+    <ng-container *ngIf="!isLogged()">
+        <span>
+            <button mat-button routerLink="/login" routerLinkActive="active">Se connecter</button>
+            <button mat-button routerLink="/register" routerLinkActive="active">Créer un compte</button>
+        </span>
+    </ng-container>
+</mat-toolbar>
@@ -0,0 +1,66 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Router, RouterLink, RouterLinkActive } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { Observable, Subscription } from 'rxjs';
+
+import { User } from 'src/app/core/models';
+import { UserService } from 'src/app/core/services';
+
+@Component({
+    selector: 'huapp-layout-header',
+    templateUrl: './header.component.html',
+    standalone: true,
+    imports: [
+        CommonModule, RouterLink, RouterLinkActive, 
+        MatToolbarModule, MatButtonModule, MatMenuModule, MatIconModule
+    ]
+})
+export class HeaderComponent implements OnInit, OnDestroy {
+    private _currentUser: Subscription = new Subscription();
+    private _isAuthenticated: Subscription = new Subscription();
+    private isAuthenticated = false;
+    currentUser: User = {} as User;
+    constructor(
+        private router: Router,
+        private userService: UserService
+    ) { }
+
+    acLogo = '/assets/images/logo-aucoffre_fr.svg';
+
+    ngOnInit() {
+        const user$: Observable<User> = this.userService.currentUser;
+        this._currentUser = user$.subscribe(
+            (userData) => {
+                this.currentUser = userData;
+            }
+        );
+        const auth$: Observable<boolean> = this.userService.isAuthenticated;
+        this._isAuthenticated = auth$.subscribe(
+            (value) => {
+                this.isAuthenticated = value;
+            }
+        );
+    }
+
+    ngOnDestroy() {
+        this._currentUser.unsubscribe();
+        this._isAuthenticated.unsubscribe();
+    }
+
+    goToGitHub() {
+        window.open('https://github.com/rampeur', '_blank');
+    }
+
+    isLogged(): boolean {
+        return this.isAuthenticated;
+    }
+
+    logout() {
+        this.userService.purgeAuth();
+        this.router.navigateByUrl('/');
+    }
+}
@@ -0,0 +1,3 @@
+export * from './footer.component';
+export * from './full.component';
+export * from './header.component';