From 43028da9dfbad388e492f47538bbc77f2356f38f Mon Sep 17 00:00:00 2001 From: Rusu Dinu Date: Tue, 5 Mar 2024 20:44:20 +0200 Subject: [PATCH] #1 user logout, displaying the user email --- src/app/app.routes.ts | 74 ++++++++++++++++++--- src/app/common/navbar/navbar.component.html | 60 ++++++++++++++--- src/app/common/navbar/navbar.component.scss | 57 ++++++++++++++++ src/app/common/navbar/navbar.component.ts | 30 +++++++-- src/assets/.gitkeep | 0 src/assets/logo/pie-chart.svg | 26 ++++++++ src/styles.scss | 16 +++++ 7 files changed, 239 insertions(+), 24 deletions(-) delete mode 100644 src/assets/.gitkeep create mode 100644 src/assets/logo/pie-chart.svg diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 06fbd44..2fd5e4d 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -1,18 +1,72 @@ +import { AuthGuard, redirectUnauthorizedTo } from '@angular/fire/auth-guard'; import { Routes } from '@angular/router'; import { DashboardComponent } from './dashboard/dashboard/dashboard.component'; import { UserLoginComponent } from './user/user-login/user-login.component'; import { UserRegisterComponent } from './user/user-register/user-register.component'; +const redirectUnauthorizedToLanding = () => redirectUnauthorizedTo(['/sign-in']); + export const routes: Routes = [ - { path: '', redirectTo: '/sign-in', pathMatch: 'full' }, - { path: 'sign-in', component: UserLoginComponent }, - { path: 'sign-up', component: UserRegisterComponent }, - { path: 'dashboard', component: DashboardComponent }, - { path: 'add-expense', component: DashboardComponent }, - { path: 'add-income', component: DashboardComponent }, - { path: 'investments-calculator', component: DashboardComponent }, - { path: 'reports', component: DashboardComponent }, - { path: 'pending-requests', component: DashboardComponent }, - { path: 'previous-requests', component: DashboardComponent }, + { + path: '', + redirectTo: '/sign-in', + pathMatch: 'full', + }, + { + path: 'sign-in', + component: UserLoginComponent, + }, + { + path: 'sign-up', + component: UserRegisterComponent, + }, + { + path: 'dashboard', + component: DashboardComponent, + canActivate: [AuthGuard], + data: { authGuardPipe: redirectUnauthorizedToLanding }, + }, + { + path: 'add-expense', + component: DashboardComponent, + canActivate: [AuthGuard], + data: { authGuardPipe: redirectUnauthorizedToLanding }, + }, + { + path: 'add-income', + component: DashboardComponent, + canActivate: [AuthGuard], + data: { authGuardPipe: redirectUnauthorizedToLanding }, + }, + { + path: 'investments-calculator', + component: DashboardComponent, + canActivate: [AuthGuard], + data: { authGuardPipe: redirectUnauthorizedToLanding }, + }, + { + path: 'reports', + component: DashboardComponent, + canActivate: [AuthGuard], + data: { authGuardPipe: redirectUnauthorizedToLanding }, + }, + { + path: 'pending-requests', + component: DashboardComponent, + canActivate: [AuthGuard], + data: { authGuardPipe: redirectUnauthorizedToLanding }, + }, + { + path: 'previous-requests', + component: DashboardComponent, + canActivate: [AuthGuard], + data: { authGuardPipe: redirectUnauthorizedToLanding }, + }, + { + path: 'profile', + component: DashboardComponent, + canActivate: [AuthGuard], + data: { authGuardPipe: redirectUnauthorizedToLanding }, + }, ]; diff --git a/src/app/common/navbar/navbar.component.html b/src/app/common/navbar/navbar.component.html index 3fa2c14..d62fac0 100644 --- a/src/app/common/navbar/navbar.component.html +++ b/src/app/common/navbar/navbar.component.html @@ -1,10 +1,50 @@ - -

Lucra

 - Overview - Add expense - Add income - Investments calculator - Reports - Pending requests - Previous requests - + + +
diff --git a/src/app/common/navbar/navbar.component.scss b/src/app/common/navbar/navbar.component.scss index 5b7eb0b..864db84 100644 --- a/src/app/common/navbar/navbar.component.scss +++ b/src/app/common/navbar/navbar.component.scss @@ -3,6 +3,10 @@ background-color: rgba(0, 123, 255, 0.34); } +span { + color: #fff; +} + a { color: #fff; text-decoration: none; @@ -15,3 +19,56 @@ a:hover { background-color: rgba(0, 123, 255, 0.34); border-color: #007bff; } + +.profile-dropdown { + display: none; + position: absolute; + right: 0; + background-color: #ffffff; + min-width: 160px; + z-index: 1; +} + +.profile:hover .profile-dropdown { + display: block; + cursor: pointer; +} + +.top-bar { + background-color: var(--bs-purple); +} + +.navbar-brand-image { + height: 2.5rem; + width: auto; + object-fit: contain; + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.nav-custom { + background-color: var(--bs-purple); +} + +nav { + font-weight: bold; +} + +.nav-offset { + height: 5rem; +} + +@media only screen and (max-width: 800px) { + .nav-offset { + height: 7rem; + } +} + +.profile:hover .hide-name { + display: none; +} + +.profile:hover .profile-dropdown { + display: block; + cursor: pointer; +} diff --git a/src/app/common/navbar/navbar.component.ts b/src/app/common/navbar/navbar.component.ts index 8225a97..8fd10f5 100644 --- a/src/app/common/navbar/navbar.component.ts +++ b/src/app/common/navbar/navbar.component.ts @@ -1,14 +1,36 @@ -import { Component } from '@angular/core'; +import { NgIf } from '@angular/common'; +import { Component, inject } from '@angular/core'; +import { Auth } from '@angular/fire/auth'; import { MatButton } from '@angular/material/button'; import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu'; import { MatToolbar } from '@angular/material/toolbar'; -import { RouterLink, RouterLinkActive } from '@angular/router'; +import { Router, RouterLink, RouterLinkActive } from '@angular/router'; +import { NgbCollapse } from '@ng-bootstrap/ng-bootstrap'; @Component({ selector: 'app-navbar', standalone: true, - imports: [MatMenu, MatMenuItem, MatMenuTrigger, MatButton, MatToolbar, RouterLink, RouterLinkActive], + imports: [MatMenu, MatMenuItem, MatMenuTrigger, MatButton, MatToolbar, RouterLink, RouterLinkActive, NgbCollapse, NgIf], templateUrl: './navbar.component.html', styleUrl: './navbar.component.scss', }) -export class NavbarComponent {} +export class NavbarComponent { + isNavbarCollapsed = true; + + auth: Auth = inject(Auth); + router: Router = inject(Router); + + logout() { + this.auth.signOut().then(() => { + this.router.navigate(['/sign-in']).then(); + }); + } + + get loggedIn() { + return this.auth.currentUser !== null; + } + + getUsername() { + return this.auth.currentUser?.email; + } +} diff --git a/src/assets/.gitkeep b/src/assets/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/assets/logo/pie-chart.svg b/src/assets/logo/pie-chart.svg new file mode 100644 index 0000000..885e76d --- /dev/null +++ b/src/assets/logo/pie-chart.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/src/styles.scss b/src/styles.scss index 776c088..4b68885 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -12,3 +12,19 @@ body { margin: 0; font-family: Roboto, 'Helvetica Neue', sans-serif; } + +simple-row { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +//noinspection HtmlDeprecatedTag +mat-spinner { + margin: 3rem auto; + display: block; +} + +.cursor-pointer { + cursor: pointer; +}