johanleroy/Portfolio_angular
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
jleroy
2025-03-19 14:29:22 +01:00
commit d15f69b85e
41 changed files with 799 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/app/_component/sidbar/sidbar.component.css Normal file
View File

91
src/app/_component/sidbar/sidbar.component.html Normal file
View File

@@ -0,0 +1,91 @@
<div
class="relative flex h-[calc(100vh-2rem)] w-full max-w-[20rem] flex-col rounded-xl bg-white bg-clip-border p-4 text-gray-700 shadow-xl shadow-blue-gray-900/5">
<div routerLink="/" class="p-4 mb-2">
<h5 class="block cursor-pointer font-sans text-xl antialiased font-semibold leading-snug tracking-normal text-blue-gray-900">
YouVideo
</h5>
</div>
<nav class="flex min-w-[240px] flex-col gap-1 p-2 font-sans text-base font-normal text-blue-gray-700">
<div *ngIf="user.id !== 0" class="relative block w-full">
<div role="button"
class="flex items-center w-full p-0 leading-tight transition-all rounded-lg outline-none bg-blue-gray-50/50 text-start text-blue-gray-700 hover:bg-blue-gray-50 hover:bg-opacity-80 hover:text-blue-gray-900 focus:bg-blue-gray-50 focus:bg-opacity-80 focus:text-blue-gray-900 active:bg-blue-gray-50 active:bg-opacity-80 active:text-blue-gray-900">
<button type="button"
class="flex items-center justify-between w-full p-3 font-sans text-xl antialiased font-semibold leading-snug text-left transition-colors border-b-0 select-none border-b-blue-gray-100 text-blue-gray-900 hover:text-blue-gray-900">
<div class="grid mr-4 place-items-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
class="w-5 h-5">
<path fill-rule="evenodd"
d="M2.25 2.25a.75.75 0 000 1.5H3v10.5a3 3 0 003 3h1.21l-1.172 3.513a.75.75 0 001.424.474l.329-.987h8.418l.33.987a.75.75 0 001.422-.474l-1.17-3.513H18a3 3 0 003-3V3.75h.75a.75.75 0 000-1.5H2.25zm6.04 16.5l.5-1.5h6.42l.5 1.5H8.29zm7.46-12a.75.75 0 00-1.5 0v6a.75.75 0 001.5 0v-6zm-3 2.25a.75.75 0 00-1.5 0v3.75a.75.75 0 001.5 0V9zm-3 2.25a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0v-1.5z"
clip-rule="evenodd"></path>
</svg>
</div>
<p class="block mr-auto font-sans text-base antialiased font-normal leading-relaxed text-blue-gray-900">
Ma bibliothèque
</p>
</button>
</div>
<div class="overflow-hidden">
<div class="block w-full py-1 font-sans text-sm antialiased font-light leading-normal text-gray-700">
<nav class="flex min-w-[240px] flex-col gap-1 p-0 font-sans text-base font-normal text-blue-gray-700">
<div role="button"
class="flex items-center w-full p-3 leading-tight transition-all rounded-lg outline-none text-start hover:bg-blue-gray-50 hover:bg-opacity-80 hover:text-blue-gray-900 focus:bg-blue-gray-50 focus:bg-opacity-80 focus:text-blue-gray-900 active:bg-blue-gray-50 active:bg-opacity-80 active:text-blue-gray-900">
<div class="grid mr-4 place-items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3"
stroke="currentColor" aria-hidden="true" class="w-5 h-3">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"></path>
</svg>
</div>
Mes vidéos
</div>
<div role="button"
class="flex items-center w-full p-3 leading-tight transition-all rounded-lg outline-none text-start hover:bg-blue-gray-50 hover:bg-opacity-80 hover:text-blue-gray-900 focus:bg-blue-gray-50 focus:bg-opacity-80 focus:text-blue-gray-900 active:bg-blue-gray-50 active:bg-opacity-80 active:text-blue-gray-900">
<div class="grid mr-4 place-items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3"
stroke="currentColor" aria-hidden="true" class="w-5 h-3">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"></path>
</svg>
</div>
Mes playlists
</div>
</nav>
</div>
</div>
</div>
<div *ngIf="user.id !== 0" routerLink="/login" role="button"
class="flex cursor-pointer items-center w-full p-3 leading-tight transition-all rounded-lg outline-none text-start hover:bg-blue-gray-50 hover:bg-opacity-80 hover:text-blue-gray-900 focus:bg-blue-gray-50 focus:bg-opacity-80 focus:text-blue-gray-900 active:bg-blue-gray-50 active:bg-opacity-80 active:text-blue-gray-900">
<div class="grid mr-4 place-items-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
class="w-5 h-5">
<path fill-rule="evenodd"
d="M18.685 19.097A9.723 9.723 0 0021.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 003.065 7.097A9.716 9.716 0 0012 21.75a9.716 9.716 0 006.685-2.653zm-12.54-1.285A7.486 7.486 0 0112 15a7.486 7.486 0 015.855 2.812A8.224 8.224 0 0112 20.25a8.224 8.224 0 01-5.855-2.438zM15.75 9a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
clip-rule="evenodd"></path>
</svg>
</div>
Connexion/Inscription
</div>
<div *ngIf="user.id !== 0" routerLink="/p" role="button"
class="flex cursor-pointer items-center w-full p-3 leading-tight transition-all rounded-lg outline-none text-start hover:bg-blue-gray-50 hover:bg-opacity-80 hover:text-blue-gray-900 focus:bg-blue-gray-50 focus:bg-opacity-80 focus:text-blue-gray-900 active:bg-blue-gray-50 active:bg-opacity-80 active:text-blue-gray-900">
<div class="grid mr-4 place-items-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
class="w-5 h-5">
<path fill-rule="evenodd"
d="M18.685 19.097A9.723 9.723 0 0021.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 003.065 7.097A9.716 9.716 0 0012 21.75a9.716 9.716 0 006.685-2.653zm-12.54-1.285A7.486 7.486 0 0112 15a7.486 7.486 0 015.855 2.812A8.224 8.224 0 0112 20.25a8.224 8.224 0 01-5.855-2.438zM15.75 9a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
clip-rule="evenodd"></path>
</svg>
</div>
Profile
</div>
<div *ngIf="user.id !== 0" (click)="logout()" role="button"
class="flex cursor-pointer items-center w-full p-3 leading-tight transition-all rounded-lg outline-none text-start hover:bg-blue-gray-50 hover:bg-opacity-80 hover:text-blue-gray-900 focus:bg-blue-gray-50 focus:bg-opacity-80 focus:text-blue-gray-900 active:bg-blue-gray-50 active:bg-opacity-80 active:text-blue-gray-900">
<div class="grid mr-4 place-items-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
class="w-5 h-5">
<path fill-rule="evenodd"
d="M12 2.25a.75.75 0 01.75.75v9a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM6.166 5.106a.75.75 0 010 1.06 8.25 8.25 0 1011.668 0 .75.75 0 111.06-1.06c3.808 3.807 3.808 9.98 0 13.788-3.807 3.808-9.98 3.808-13.788 0-3.808-3.807-3.808-9.98 0-13.788a.75.75 0 011.06 0z"
clip-rule="evenodd"></path>
</svg>
</div>
Déconnexion
</div>
</nav>
</div>

63
src/app/_component/sidbar/sidbar.component.ts Normal file
View File

@@ -0,0 +1,63 @@
import {Component, OnInit} from '@angular/core';
import {AuthService} from '../../_services/auth.service';
import {Users} from '../../_models/users';
import {catchError, of} from 'rxjs';
import {NgIf} from '@angular/common';
import {Router, RouterLink} from '@angular/router';
@Component({
selector: 'app-sidbar',
imports: [
NgIf,
RouterLink
],
templateUrl: './sidbar.component.html',
styleUrl: './sidbar.component.css'
})
export class SidbarComponent implements OnInit {
user: Users = { id: 0, email: '', firstname: '', lastname: '', password_hash: '', updated_at: new Date(), created_at: new Date() };
constructor(private authService: AuthService, private router: Router) {}
ngOnInit(): void {
this.checkAuthAndLoadUser();
}
checkAuthAndLoadUser(): void {
this.authService.isAuthenticated().subscribe(isAuthenticated => {
if (isAuthenticated) {
this.loadUsers();
} else {
this.user = { id: 0, email: '', firstname: '', lastname: '', password_hash: '', updated_at: new Date(), created_at: new Date() };
}
});
}
loadUsers(): void {
this.authService.getProfil().pipe(
catchError(error => {
console.error('Erreur lors du chargement du profil:', error);
return of(null);
})
).subscribe(users => {
if (users) {
console.log(users);
this.user = users;
}
});
}
logout(): void {
this.authService.logout().subscribe({
next: () => {
this.router.navigate(['/']);
},
error: (err) => {
console.error('Logout failed:', err);
}
});
}
}

9
src/app/_models/users.ts Normal file
View File

@@ -0,0 +1,9 @@
export interface Users {
id: number;
email: string;
firstname: string;
lastname: string;
password_hash: string;
updated_at: Date;
created_at: Date;
}

13
src/app/_models/video.ts Normal file
View File

@@ -0,0 +1,13 @@
export interface Videos {
data: Video[];
}
export interface Video {
id: number;
user_id: number;
name: string;
description: string;
link_miniature: string;
link_video: string;
created_at: Date;
updated_at: Date;
}

0
src/app/app.component.css Normal file
View File

1
src/app/app.component.html Normal file
View File

@@ -0,0 +1 @@
<router-outlet />

13
src/app/app.component.ts Normal file
View File

@@ -0,0 +1,13 @@
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
title = 'ENI-Angular';
}

27
src/app/app.config.ts Normal file
View File

@@ -0,0 +1,27 @@
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import {
provideRouter,
withEnabledBlockingInitialNavigation,
withInMemoryScrolling,
withViewTransitions
} from '@angular/router';
import { routes } from './app.routes';
import {provideAnimations} from '@angular/platform-browser/animations';
import {provideHttpClient} from '@angular/common/http';
export const appConfig: ApplicationConfig = {
providers: [
provideAnimations(),
provideRouter(routes,
withViewTransitions(),
withEnabledBlockingInitialNavigation(),
withInMemoryScrolling({
scrollPositionRestoration: 'enabled',
anchorScrolling: 'enabled'
})
),
provideZoneChangeDetection({ eventCoalescing: true }),
provideHttpClient(),
],
};

7
src/app/app.routes.ts Normal file
View File

@@ -0,0 +1,7 @@
import { Routes } from '@angular/router';
export const routes: Routes = [
{ path: '', loadChildren: () => import('./public/public.module')
.then(m => m.PublicModule)
},
];

0
src/app/public/pages/home/home.component.css Normal file
View File

85
src/app/public/pages/home/home.component.html Normal file
View File

@@ -0,0 +1,85 @@
<!-- Section image plein écran -->
<section class="relative h-screen w-full overflow-hidden">
<img
src="/img/background.png"
alt="Image de fond"
class="absolute w-full h-full object-cover"
>
<div class="flex justify-between">
<div class="relative">
<h1 class="text-white text-6xl md:text-8xl font-bold mb-32">Développeur web</h1>
</div>
<div class="relative">
<h1 class="text-white text-6xl md:text-8xl font-bold mb-32">Johan Leroy</h1>
</div>
</div>
</section>
<!-- Section liste des projets -->
<section id="projets" class="min-h-screen bg-[#181818] py-20 px-4 md:px-8">
<div class="max-w-6xl mx-auto">
<h2 class="text-3xl md:text-4xl font-bold mb-12 text-white text-center">Mes Projets</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Projet 1 -->
<div class="bg-gray-100 rounded-lg overflow-hidden shadow-lg transition-transform duration-300 hover:scale-105">
<img src="https://via.placeholder.com/600x400" alt="Projet 1" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Projet 1</h3>
<p class="text-gray-700 mb-4">Description du projet 1. Voici quelques détails sur ce projet et les technologies utilisées.</p>
<a href="#" class="text-blue-600 font-medium hover:underline">Voir plus</a>
</div>
</div>
<!-- Projet 2 -->
<div class="bg-gray-100 rounded-lg overflow-hidden shadow-lg transition-transform duration-300 hover:scale-105">
<img src="https://via.placeholder.com/600x400" alt="Projet 2" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Projet 2</h3>
<p class="text-gray-700 mb-4">Description du projet 2. Voici quelques détails sur ce projet et les technologies utilisées.</p>
<a href="#" class="text-blue-600 font-medium hover:underline">Voir plus</a>
</div>
</div>
<!-- Projet 3 -->
<div class="bg-gray-100 rounded-lg overflow-hidden shadow-lg transition-transform duration-300 hover:scale-105">
<img src="https://via.placeholder.com/600x400" alt="Projet 3" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Projet 3</h3>
<p class="text-gray-700 mb-4">Description du projet 3. Voici quelques détails sur ce projet et les technologies utilisées.</p>
<a href="#" class="text-blue-600 font-medium hover:underline">Voir plus</a>
</div>
</div>
<!-- Projet 4 -->
<div class="bg-gray-100 rounded-lg overflow-hidden shadow-lg transition-transform duration-300 hover:scale-105">
<img src="https://via.placeholder.com/600x400" alt="Projet 4" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Projet 4</h3>
<p class="text-gray-700 mb-4">Description du projet 4. Voici quelques détails sur ce projet et les technologies utilisées.</p>
<a href="#" class="text-blue-600 font-medium hover:underline">Voir plus</a>
</div>
</div>
<!-- Projet 5 -->
<div class="bg-gray-100 rounded-lg overflow-hidden shadow-lg transition-transform duration-300 hover:scale-105">
<img src="https://via.placeholder.com/600x400" alt="Projet 5" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Projet 5</h3>
<p class="text-gray-700 mb-4">Description du projet 5. Voici quelques détails sur ce projet et les technologies utilisées.</p>
<a href="#" class="text-blue-600 font-medium hover:underline">Voir plus</a>
</div>
</div>
<!-- Projet 6 -->
<div class="bg-gray-100 rounded-lg overflow-hidden shadow-lg transition-transform duration-300 hover:scale-105">
<img src="https://via.placeholder.com/600x400" alt="Projet 6" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Projet 6</h3>
<p class="text-gray-700 mb-4">Description du projet 6. Voici quelques détails sur ce projet et les technologies utilisées.</p>
<a href="#" class="text-blue-600 font-medium hover:underline">Voir plus</a>
</div>
</div>
</div>
</div>
</section>

13
src/app/public/pages/home/home.component.ts Normal file
View File

@@ -0,0 +1,13 @@
import {Component} from '@angular/core';
@Component({
selector: 'app-home',
imports: [],
templateUrl: './home.component.html',
styleUrl: './home.component.css'
})
export class HomeComponent {
}

0
src/app/public/pages/not-found/not-found.component.css Normal file
View File

1
src/app/public/pages/not-found/not-found.component.html Normal file
View File

@@ -0,0 +1 @@
<p>not-found works!</p>

19
src/app/public/pages/not-found/not-found.component.ts Normal file
View File

@@ -0,0 +1,19 @@
import {Component, OnInit} from '@angular/core';
import {Title} from '@angular/platform-browser';
@Component({
selector: 'app-not-found',
imports: [],
templateUrl: './not-found.component.html',
styleUrl: './not-found.component.css'
})
export class NotFoundComponent implements OnInit {
constructor(private title: Title) {
}
ngOnInit(): void {
this.title.setTitle('404 - YouVideo');
}
}

0
src/app/public/public-layout/public-layout.component.css Normal file
View File

1
src/app/public/public-layout/public-layout.component.html Normal file
View File

@@ -0,0 +1 @@
<router-outlet />

14
src/app/public/public-layout/public-layout.component.ts Normal file
View File

@@ -0,0 +1,14 @@
import { Component } from '@angular/core';
import {RouterOutlet} from '@angular/router';
@Component({
selector: 'app-public-layout',
imports: [
RouterOutlet
],
templateUrl: './public-layout.component.html',
styleUrl: './public-layout.component.css'
})
export class PublicLayoutComponent {
}

19
src/app/public/public-routing.module.ts Normal file
View File

@@ -0,0 +1,19 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {NotFoundComponent} from './pages/not-found/not-found.component';
import {PublicLayoutComponent} from './public-layout/public-layout.component';
import {HomeComponent} from './pages/home/home.component';
const routes: Routes = [
{ path: '', component: PublicLayoutComponent, children: [
{ path: '', component: HomeComponent },
]
},
{ path: '**', component: NotFoundComponent },
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class PublicRoutingModule { }

14
src/app/public/public.module.ts Normal file
View File

@@ -0,0 +1,14 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PublicRoutingModule } from './public-routing.module';
@NgModule({
declarations: [],
imports: [
CommonModule,
PublicRoutingModule
]
})
export class PublicModule { }

3
src/environments/environment.ts Normal file
View File

@@ -0,0 +1,3 @@
export const environment = {
apiTiny: 'r1u1cn7u2o0xj9zcesav8qjlb413z5srnqcac39wyjo9l7gf',
};

13
src/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Johan Leroy - Portfolio</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>

6
src/main.ts Normal file
View File

@@ -0,0 +1,6 @@
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, appConfig)
.catch((err) => console.error(err));

1
src/styles.css Normal file
View File

@@ -0,0 +1 @@
@import "tailwindcss";