New features: -layout navbar -profile page -login page -registration …

…page -add new phrase

src/app/_helpers/auth.guard.ts

@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+
+import { AuthService } from '../_services/auth.service';
+import { CookiesService } from '../_services/cookies.service';
+
+@Injectable({ providedIn: 'root' })
+export class AuthGuard implements CanActivate {
+    constructor(
+        private router: Router,
+        private authenticationService: AuthService, private cookiesService: CookiesService
+    ) { }
+
+    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {		
+        //const currentUser = this.authenticationService.currentUserValue;
+		const currentUser = this.cookiesService.getCookie("userID");	
+        if (currentUser) {
+            // logged in so return true
+            return true;
+        }
+
+        // not logged in so redirect to login page with the return url
+        this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
+        return false;
+    }
+}

src/app/_models/PhraseClass.ts

@@ -0,0 +1,15 @@
+export class PhraseClass {
+  private quote ?: string;
+  private author ?: string;
+  private datePublication ?: string;
+  private contributor ?: string;
+  private approved? : boolean;
+
+constructor(quote: string, author: string, datePublication: string, contributor: string, approved: boolean) {
+    this.quote = quote;
+    this.author = author;
+    this.datePublication = datePublication;
+    this.contributor = contributor;
+	this.approved = approved;
+  }
+}

src/app/_models/phrase.ts

@@ -0,0 +1,7 @@
+export interface Phrase {
+  quote: string;
+  author: string;
+  datePublication?: string;
+  contributor?: string;
+  approved: boolean;  
+}

src/app/_models/user.ts

@@ -0,0 +1,11 @@
+export class User {
+    uid?: string;
+    email?: string;
+    authdata?: string;
+	tokenJWT?: string;
+
+	constructor(uid: string, email: string){
+		this.uid = uid;
+		this.email = email;
+	}
+}

src/app/_services/auth.service.ts

@@ -0,0 +1,35 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+import { User } from '../_models/user';
+
+@Injectable({
+	providedIn: 'root'
+})
+export class AuthService {
+	userId!: string;
+	email!: string;
+	/*private currentUserSubject: BehaviorSubject<User>;
+
+	constructor(){
+		this.currentUserSubject = new BehaviorSubject<User>();
+	}
+ 	public get currentUserValue(): User {
+        return this.currentUserSubject.value;
+    }*/
+
+	setUserData(userId: string, email: string) {
+		//this.currentUserSubject?.next(new User(userId, email));
+		this.userId = userId;
+		this.email = email;
+	}
+
+	getUserID() {
+		return this.userId;
+	}
+
+	clearUserData() {
+		this.userId = '';
+		this.email = '';
+	}
+}

src/app/_services/cookies.service.ts

@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+	providedIn: 'root'
+})
+export class CookiesService {
+	setCookie(cname: string, cvalue: string, exdays: number) {
+		const d = new Date();
+		d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
+		let expires = "expires=" + d.toUTCString();
+		document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
+	}
+
+	getCookie(cname: string) {
+		let name = cname + "=";
+		let decodedCookie = decodeURIComponent(document.cookie);
+		let ca = decodedCookie.split(';');
+		for (let i = 0; i < ca.length; i++) {
+			let c = ca[i];
+			while (c.charAt(0) == ' ') {
+				c = c.substring(1);
+			}
+			if (c.indexOf(name) == 0) {
+				return c.substring(name.length, c.length);
+			}
+		}
+		return "";
+	}
+}

src/app/_services/database.service.ts

@@ -1,15 +1,18 @@
 import { Injectable } from '@angular/core';
 import { AngularFireDatabase, AngularFireObject } from '@angular/fire/database';
+import { AngularFireAuth } from '@angular/fire/auth';
 import { Observable } from 'rxjs';
 
+import { PhraseClass } from './../_models/PhraseClass';
+
 @Injectable({
 	providedIn: 'root'
 })
 export class DatabaseService {
 	private databasePath = '/phrases'; // Sostituisci con il percorso corretto nel tuo database
 	quoteRef!: AngularFireObject<any>;
 
-	constructor(private db: AngularFireDatabase) { }
+	constructor(private db: AngularFireDatabase, private auth: AngularFireAuth) { }
 
 	getAllData(): Observable<any> {
 		const dataRef: AngularFireObject<any> = this.db.object(this.databasePath);
@@ -18,33 +21,59 @@ export class DatabaseService {
 
 	getAllPhrasesNotPublicated(): Observable<any> {
 		const listRef = this.db.list(this.databasePath, (ref) =>
-      		ref.orderByChild('datePublication').equalTo(null)
+			ref.orderByChild('datePublication').equalTo(null)
+		);
+
+		return listRef.valueChanges();
+	}
+
+	getPhrasesPublicatedInDay(day: string): Observable<any> {
+		const listRef = this.db.list(this.databasePath, (ref) =>
+			ref.orderByChild('datePublication').equalTo(day)
 		);
 
-    	return listRef.valueChanges();
+		return listRef.valueChanges();
 	}
-	
-	getPhrasesPublicatedInDay(day: string): Observable<any>{
+
+	getPhrasesByContributor(contributorID: string): Observable<any> {
 		const listRef = this.db.list(this.databasePath, (ref) =>
-      		ref.orderByChild('datePublication').equalTo(day)
+			ref.orderByChild('contributor').equalTo(contributorID)
 		);
 
-    	return listRef.valueChanges();		
+		return listRef.valueChanges();
+	}
+
+	async addPhrase(phrase: PhraseClass): Promise<boolean> {
+		return new Promise<boolean>((resolve, reject) => {
+			this.auth.currentUser.then(user => {
+				if (user) {
+					this.db.list(this.databasePath).push(phrase)
+						.then(() => {
+							console.log('Inserimento avvenuto con successo');
+							resolve(true); // Inserimento riuscito
+						})
+						.catch(error => {
+							console.log('Errore durante l\'inserimento:', error);
+							reject(false); // Inserimento fallito
+						});
+				} else {
+					console.log('Utente non autenticato');
+					reject(false); // Utente non autenticato, inserimento fallito
+				}
+			});
+		});
 	}
-	/*create(tutorial: Tutorial): any {
-		return this.tutorialsRef.push(tutorial);
-	}*/
 
 	update(key: number, quote: any): Promise<void> {
 		this.quoteRef = this.db.object('phrases/' + key);
 		return this.quoteRef.update(quote);
 	}
-	
-	getLastNPhrases(index: number){
+
+	getLastNPhrases(index: number) {
 		const listRef = this.db.list(this.databasePath, (ref) =>
-      		ref.orderByChild('datePublication').limitToFirst(index)
+			ref.orderByChild('datePublication').limitToFirst(index)
 		);
 
-    	return listRef.valueChanges();
+		return listRef.valueChanges();
 	}
 }

src/app/app-routing.module.ts

@@ -4,12 +4,20 @@ import { Routes, RouterModule } from '@angular/router';
 import { RandomPhraseComponent } from './random-phrase/random-phrase.component';
 import { DailyPhraseComponent } from './daily-phrase/daily-phrase.component';
 import { HistoricalPhraseComponent } from './historical-phrase/historical-phrase.component';
+import { LoginComponent } from './login/login.component';
+import { RegistrationComponent } from './registration/registration.component';
+import { ProfileComponent } from './profile/profile.component';
+
+import { AuthGuard } from './_helpers/auth.guard';
 
 const routes: Routes = [
 	{ path: '', redirectTo: '/daily-phrase', pathMatch: 'full' },
 	{ path: "random-phrase", component: RandomPhraseComponent },
 	{ path: "daily-phrase", component: DailyPhraseComponent },
 	{ path: "historical", component: HistoricalPhraseComponent },
+	{ path: "profile", component: ProfileComponent, canActivate: [AuthGuard] },
+	{ path: "login", component: LoginComponent },
+	{ path: "registration", component: RegistrationComponent }
 ];
 
 @NgModule({

src/app/app.component.html

@@ -1 +1,2 @@
+<app-navbar></app-navbar>
 <router-outlet></router-outlet>

src/app/app.module.ts

@@ -1,8 +1,10 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { NgModule } from '@angular/core';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 import { AngularFireModule } from '@angular/fire';
+import { AngularFireAuthModule } from '@angular/fire/auth';
 import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
 import { BsDropdownModule } from "ngx-bootstrap/dropdown";
 import { CollapseModule } from "ngx-bootstrap/collapse";
@@ -14,22 +16,34 @@ import { AppComponent } from './app.component';
 import { RandomPhraseComponent } from './random-phrase/random-phrase.component';
 import { DailyPhraseComponent } from './daily-phrase/daily-phrase.component';
 import { HistoricalPhraseComponent } from './historical-phrase/historical-phrase.component';
+import { RegistrationComponent } from './registration/registration.component';
+import { LoginComponent } from './login/login.component';
+import { ProfileComponent } from './profile/profile.component';
 import { environment } from '../environments/environment';
 
+import { NavbarComponent } from './component/navbar/navbar.component';
+
 @NgModule({
   declarations: [
     AppComponent,
     RandomPhraseComponent,
 	DailyPhraseComponent,
-	HistoricalPhraseComponent
+	HistoricalPhraseComponent,
+	RegistrationComponent,
+	LoginComponent,
+	NavbarComponent,
+	ProfileComponent
   ],
   imports: [
     BrowserModule,
 	BrowserAnimationsModule,
 	HttpClientModule,
     AppRoutingModule,
 	AngularFireModule.initializeApp(environment.firebaseConfig),
+	AngularFireAuthModule,
 	NgbModule,
+	FormsModule,
+	ReactiveFormsModule,
 	BsDropdownModule.forRoot(),
 	CollapseModule.forRoot(),
 	TabsModule.forRoot(),

src/app/component/navbar/navbar.component.html

@@ -0,0 +1,89 @@
+<nav class="navbar navbar-expand-lg fixed-top navbar-transparent"
+	color-on-scroll="100" id="navbar-top">
+	<div class="container">
+		<div class="navbar-translate">
+			<a class="navbar-brand" placement="bottom" [routerLink]="['/']"
+				target="_blank" tooltip="Designed and Coded by Creative Tim">
+				<span> DailyInspire• </span>
+			</a>
+			<button aria-controls="navigation-index"
+				aria-label="Toggle navigation" class="navbar-toggler navbar-toggler"
+				[attr.aria-expanded]="!isCollapsed"
+				(click)="isCollapsed = !isCollapsed" id="navigation" type="button">
+				<span class="navbar-toggler-bar bar1"> </span> <span
+					class="navbar-toggler-bar bar2"> </span> <span
+					class="navbar-toggler-bar bar3"> </span>
+			</button>
+		</div>
+		<div class="navbar-collapse justify-content-end" [collapse]="isCollapsed" id="navigation">
+			<div class="navbar-collapse-header">
+				<div class="row">
+					<div class="col-6 collapse-brand">
+						<a> DailyInspire• </a>
+					</div>
+					<div class="col-6 collapse-close text-right">
+						<button aria-controls="navigation-index"
+							aria-label="Toggle navigation" class="navbar-toggler"
+							[attr.aria-expanded]="!isCollapsed"
+							(click)="setCollapsed()" id="navigation"
+							type="button">
+							<i class="tim-icons icon-simple-remove"> </i>
+						</button>
+					</div>
+				</div>
+			</div>
+			<ul class="navbar-nav">
+				<li class="nav-item p-0"><a class="nav-link"
+					href="https://twitter.com" placement="bottom"
+					target="_blank" tooltip="Follow us on Twitter"> <i
+						class="fa fa-twitter"> </i>
+						<p class="d-lg-none d-xl-none">Twitter</p>
+				</a></li>
+				<li class="nav-item p-0"><a class="nav-link"
+					href="https://www.facebook.com" placement="bottom"
+					target="_blank" tooltip="Like us on Facebook"> <i
+						class="fa fa-facebook-square"> </i>
+						<p class="d-lg-none d-xl-none">Facebook</p>
+				</a></li>
+				<li class="nav-item p-0"><a class="nav-link"
+					href="https://www.instagram.com"
+					placement="bottom" target="_blank" tooltip="Follow us on Instagram">
+						<i class="fa fa-instagram"> </i>
+						<p class="d-lg-none d-xl-none">Instagram</p>
+				</a></li>
+				<li class="dropdown nav-item" dropdown><a
+					class="dropdown-toggle nav-link dropdown-toggle"
+					data-toggle="dropdown" dropdownToggle href="javascript:void(0)">
+						<i class="fa fa-cogs d-lg-none d-xl-none"> </i> Menu
+				</a>
+					<div class="dropdown-menu dropdown-with-icons" *dropdownMenu>
+						<a class="dropdown-item" [routerLink]="['/login']" *ngIf="!userLogged"> <i
+							class="tim-icons fa fa-sign-in"> </i> Login
+						</a>
+						<a class="dropdown-item" [routerLink]="['/registration']" *ngIf="!userLogged"> <i
+							class="tim-icons fa fa-user-plus"> </i> Registrati
+						</a>
+						<a class="dropdown-item" [routerLink]="['/historical']"> <i
+							class="tim-icons icon-bullet-list-67"> </i> Storico
+						</a> <a class="dropdown-item" [routerLink]="['/profile']" *ngIf="userLogged"> <i
+							class="tim-icons icon-single-02"> </i> Profilo
+						</a>
+						<a class="dropdown-item" (click)="logout()" *ngIf="userLogged"> <i
+							class="tim-icons fa fa-power-off"> </i> Logout
+						</a>
+					</div>
+				</li>
+
+				<!--         <li class="nav-item"> -->
+				<!--           <a -->
+				<!--             class="nav-link btn btn-default d-none d-lg-block" -->
+				<!--             href="javascript:void(0)" -->
+				<!--             (click)="testUpdate()" -->
+				<!--           > -->
+				<!--             <i class="tim-icons icon-cloud-download-93"> </i> Download -->
+				<!--           </a> -->
+				<!--         </li> -->
+			</ul>
+		</div>
+	</div>
+</nav>