Skip to content

Commit bca81fa

Browse files
SachaWildCodeSachaWildCode
committed
css fix
1 parent a9f4a6f commit bca81fa

19 files changed

+237
-17
lines changed

‎docker-compose.yml

+56-3
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,74 @@
11
services:
2-
heartlink:
3-
image: sachawildcode/projet-poec:latest
2+
mysql:
3+
image: mysql:8.0
4+
container_name: mysql
5+
restart: unless-stopped
6+
environment:
7+
MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}
8+
MYSQL_DATABASE: heartlink
9+
MYSQL_USER: ${MYSQL_USER}
10+
MYSQL_PASSWORD: ${MYSQL_PASSWORD}
11+
volumes:
12+
- mysql-data:/var/lib/mysql
13+
networks:
14+
- heartlink_network
15+
env_file:
16+
- .env
17+
healthcheck:
18+
test: ['CMD-SHELL', 'mysqladmin ping -h localhost']
19+
interval: 10s
20+
timeout: 5s
21+
retries: 3
22+
start_period: 30s
23+
24+
springboot:
25+
image: sachawildcode/heartlink_back:latest
26+
container_name: springboot
27+
restart: unless-stopped
28+
depends_on:
29+
mysql:
30+
condition: service_healthy
31+
environment:
32+
SPRING_DATASOURCE_URL: jdbc:mysql://mysql:3306/heartlink?createDatabaseIfNotExist=true&serverTimezone=UTC
33+
SPRING_DATASOURCE_USERNAME: ${MYSQL_USER}
34+
SPRING_DATASOURCE_PASSWORD: ${MYSQL_PASSWORD}
35+
JWT_SECRET: ${JWT_SECRET}
36+
JWT_EXPIRATION: ${JWT_EXPIRATION}
37+
COOKIE_EXPIRATION: ${COOKIE_EXPIRATION}
38+
SPRING_PROFILES_ACTIVE: prod
439
networks:
540
- heartlink_network
41+
env_file:
42+
- .env
43+
ports:
44+
- '8080:8080'
45+
46+
heartlink:
47+
image: sachawildcode/projet-poec:latest
648
container_name: heartlink
749
restart: unless-stopped
50+
networks:
51+
- heartlink_network
52+
env_file:
53+
- .env
54+
ports:
55+
- '80:80'
56+
857
cloudflare:
958
image: cloudflare/cloudflared
1059
container_name: heartlink-cloudflare
1160
command: tunnel run
1261
environment:
13-
- TUNNEL_TOKEN=$TUNNEL_TOKEN
62+
TUNNEL_TOKEN: ${TUNNEL_TOKEN}
1463
restart: unless-stopped
1564
networks:
1665
- heartlink_network
1766
env_file:
1867
- .env
68+
69+
volumes:
70+
mysql-data:
71+
1972
networks:
2073
heartlink_network:
2174
name: heartlink_network

‎src/app/app.routes.ts

+9
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Routes } from '@angular/router';
33
import { DonationsComponent } from './components/donations/donations.component';
44
import { LoginFormComponent } from './components/login-form/login-form.component';
55
import { RegisterFormComponent } from './components/register-form/register-form.component';
6+
import { UnderConstructComponent } from './components/under-construct/under-construct.component';
67
import { AuthGuard } from './core/guards/auth-guard.service';
78
import { AssoPageComponent } from './pages/asso-page/asso-page.component';
89
import { AuthPageComponent } from './pages/auth-page/auth-page.component';
@@ -35,6 +36,14 @@ export const routes: Routes = [
3536
path: 'donations',
3637
component: DonationsComponent,
3738
},
39+
{
40+
path: '',
41+
component: UnderConstructComponent,
42+
},
43+
{
44+
path: 'payments',
45+
component: UnderConstructComponent,
46+
},
3847
],
3948
},
4049
{ path: '', component: LandingPageComponent },

‎src/app/components/button-landing/button-landing.component.scss

+1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ section {
66
gap: 30%;
77
width: 100%;
88
button {
9+
cursor: pointer;
910
border-radius: 8px;
1011
padding: 8px 24px;
1112
border: none;

‎src/app/components/donations/donations.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,5 @@ <h2>Gerer vos dons</h2>
99
</app-donation-card>
1010
</ng-container>
1111
</div>
12-
<button (click)="validateDonations()">Validate</button>
12+
<button (click)="validateDonations()">Valider</button>
1313
</main>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ <h3>Veuillez entrer vos identifiants pour accéder à votre compte HeartLink.</h
1313
</ng-container>
1414
</div>
1515
<div>
16-
<button class="password-visibility-toggle" (click)="togglePasswordVisibility()">
16+
<button type="button" class="password-visibility-toggle" (click)="togglePasswordVisibility()">
1717
<fa-icon [icon]="passwordVisible ? faEyeSlash : faEye"></fa-icon>
1818
</button>
1919
<label for="password">Mot de passe</label>

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

+1-2
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import { tap } from 'rxjs';
99

1010
import { AuthService } from '../../shared/services/auth-service.service';
1111
import { RouterHistoryService } from '../../shared/services/router-history.service';
12-
import { passwordValidator } from '../../shared/validators/password';
1312
import { AuthCarouselComponent } from '../auth-carousel/auth-carousel.component';
1413

1514
@Component({
@@ -34,7 +33,7 @@ export class LoginFormComponent {
3433
) {
3534
this.loginForm = this.fb.group({
3635
email: ['[email protected]', [Validators.required, Validators.email]],
37-
password: ['defaultPassword1234*', [Validators.required, passwordValidator]],
36+
password: ['defaultPassword1234*', [Validators.required]],
3837
rememberMe: [false],
3938
});
4039
}

‎src/app/components/navbar-mobile/navbar-mobile.component.html

+16-3
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,22 @@
1818
<li>
1919
<a [routerLink]="['/transparency']" [routerLinkActive]="['is-active']"><fa-icon [icon]="faEye"></fa-icon></a>
2020
</li>
21-
<li>
22-
<a [routerLink]="['/auth/login']" [routerLinkActive]="['is-active']"><fa-icon [icon]="faUser"></fa-icon> </a>
23-
</li>
21+
@if (!isAuthenticated()) {
22+
<li>
23+
<a [routerLink]="['/auth/login']" [routerLinkActive]="['is-active']"><fa-icon [icon]="faUser"></fa-icon> </a>
24+
</li>
25+
} @else {
26+
<div role="presentation" class="profile-menu" (click)="toggleDropdown()">
27+
<section *ngIf="donationQueueLength > 0" class="donation-queue-length">
28+
<span>{{ donationQueueLength }}</span>
29+
</section>
30+
<img [src]="this.userInfo?.avatarUrl" alt="" class="profile-image" />
31+
<div class="dropdown-content" *ngIf="isDropdownVisible">
32+
<a [routerLink]="['/profile']">Profil</a>
33+
<a role="presentation" (click)="logout()">Déconnexion</a>
34+
</div>
35+
</div>
36+
}
2437
</ul>
2538
</section>
2639
</main>

‎src/app/components/navbar-mobile/navbar-mobile.component.scss

+61
Original file line numberDiff line numberDiff line change
@@ -55,3 +55,64 @@ main {
5555
.is-active {
5656
background-color: #e0e0e0;
5757
}
58+
.profile-menu {
59+
position: relative;
60+
min-width: 0;
61+
padding: 0;
62+
border-radius: 50%;
63+
margin: 0;
64+
height: 40px;
65+
width: 40px;
66+
display: flex;
67+
justify-content: center;
68+
align-items: center;
69+
box-shadow: var(--button-box-shadow);
70+
cursor: pointer;
71+
.donation-queue-length {
72+
display: inline-block;
73+
position: absolute;
74+
top: -4px;
75+
right: -4px;
76+
line-height: 0px;
77+
border-radius: 50%;
78+
font-size: 8px;
79+
background-color: red;
80+
color: white;
81+
span {
82+
display: block;
83+
display: inline-block;
84+
padding-top: 50%;
85+
padding-bottom: 50%;
86+
font-weight: bold;
87+
}
88+
}
89+
img {
90+
object-fit: contain;
91+
height: 100%;
92+
width: 100%;
93+
}
94+
.dropdown-content {
95+
display: block;
96+
position: absolute;
97+
background-color: #f9f9f9;
98+
min-width: 160px;
99+
box-shadow: var(--button-box-shadow);
100+
z-index: 1;
101+
right: 0;
102+
bottom: 42px;
103+
border-radius: 8px;
104+
padding: 0.5rem;
105+
a {
106+
color: var(--color-black);
107+
text-decoration: none;
108+
margin: 0;
109+
width: 100%;
110+
display: block;
111+
padding: 0.5rem;
112+
border-radius: 8px;
113+
&:hover {
114+
background-color: #f1f1f1;
115+
}
116+
}
117+
}
118+
}

‎src/app/components/navbar-mobile/navbar-mobile.component.ts

+44-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,18 @@
1-
import { Component } from '@angular/core';
1+
import { CommonModule } from '@angular/common';
2+
import { Component, HostListener } from '@angular/core';
23
import { RouterModule } from '@angular/router';
34
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
4-
import { faCoffee, faHouse, faMagnifyingGlass, faQuestion, faUser, faEye } from '@fortawesome/free-solid-svg-icons';
5+
import { faCoffee, faEye, faHouse, faMagnifyingGlass, faQuestion, faUser } from '@fortawesome/free-solid-svg-icons';
6+
7+
import { IUser } from '../../shared/models/iuser';
8+
import { AuthService } from '../../shared/services/auth-service.service';
9+
import { DonationService } from '../../shared/services/donations.service';
10+
import { UserService } from '../../shared/services/user.service';
511

612
@Component({
713
selector: 'app-navbar-mobile',
814
standalone: true,
9-
imports: [RouterModule, FaIconComponent],
15+
imports: [RouterModule, FaIconComponent, CommonModule],
1016
templateUrl: './navbar-mobile.component.html',
1117
styleUrl: './navbar-mobile.component.scss',
1218
})
@@ -17,4 +23,39 @@ export class NavbarMobileComponent {
1723
faQuestion = faQuestion;
1824
faUser = faUser;
1925
faEye = faEye;
26+
userInfo: IUser | null = null;
27+
isDropdownVisible = false;
28+
donationQueueLength = 0;
29+
30+
constructor(
31+
private userService: UserService,
32+
private authService: AuthService,
33+
private donationService: DonationService
34+
) {
35+
this.donationService.getDonationQueueLength().subscribe(length => {
36+
this.donationQueueLength = length;
37+
});
38+
this.userService.userInfo$.subscribe(user => {
39+
this.userInfo = user;
40+
});
41+
}
42+
43+
isAuthenticated(): boolean {
44+
return this.userService.isAuthenticated();
45+
}
46+
47+
logout(): void {
48+
this.authService.logout().subscribe();
49+
}
50+
51+
toggleDropdown() {
52+
this.isDropdownVisible = !this.isDropdownVisible;
53+
}
54+
@HostListener('document:click', ['$event'])
55+
handleClickOutside(event: Event) {
56+
const target = event.target as HTMLElement;
57+
if (!target.closest('.profile-menu')) {
58+
this.isDropdownVisible = false;
59+
}
60+
}
2061
}

‎src/app/components/navbar/navbar.component.scss

+1
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,7 @@ main {
117117
border: none;
118118
border-radius: 8px;
119119
box-shadow: none;
120+
cursor: pointer;
120121
&:active {
121122
transform: scale(1.1);
122123
}

‎src/app/components/pagination/pagination.component.ts

+11
Original file line numberDiff line numberDiff line change
@@ -26,15 +26,26 @@ export class PaginationComponent implements OnInit {
2626
private router: Router,
2727
private route: ActivatedRoute
2828
) {}
29+
// media query
30+
isMobile = window.innerWidth < 798;
31+
// on resize if innerwidth is less than 798 then isMobile is true
2932

3033
ngOnInit() {
34+
this.updatePageRange();
35+
window.addEventListener('resize', this.updatePageRange.bind(this));
36+
3137
this.route.queryParams.subscribe(params => {
3238
const page = params['page'] as string;
3339
this.currentPage = +page;
3440
this.pageChange.emit(this.currentPage);
3541
});
3642
}
3743

44+
private updatePageRange() {
45+
this.isMobile = window.innerWidth < 798;
46+
this.pageRange = this.isMobile ? 2 : 5;
47+
}
48+
3849
previous() {
3950
if (this.currentPage > 0) {
4051
this.onPageChange(this.currentPage - 1);

‎src/app/components/popin/popin.component.scss

+1
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@
5252
display: flex;
5353
gap: 8px;
5454
button {
55+
cursor: pointer;
5556
background-color: var(--color-black);
5657
color: var(--color-white);
5758
padding: 0.7rem 1.5rem;

‎src/app/components/register-form/register-form.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ <h4>Informations du compte</h4>
3535
formControlName="password"
3636
[type]="passwordVisible.password ? 'text' : 'password'"
3737
placeholder="" />
38-
<button (click)="togglePasswordVisibility('password')">
38+
<button type="button" (click)="togglePasswordVisibility('password')">
3939
<fa-icon [icon]="passwordVisible.password ? faEyeSlash : faEye"></fa-icon>
4040
</button>
4141
<ng-container *ngIf="registerForm.controls['account'].controls['password'].dirty">
@@ -64,7 +64,7 @@ <h4>Informations du compte</h4>
6464
formControlName="confirmPassword"
6565
[type]="passwordVisible.confirmPassword ? 'text' : 'password'"
6666
placeholder="" />
67-
<button (click)="togglePasswordVisibility('confirmPassword')">
67+
<button type="button" (click)="togglePasswordVisibility('confirmPassword')">
6868
<fa-icon [icon]="passwordVisible.confirmPassword ? faEyeSlash : faEye"></fa-icon>
6969
</button>
7070

‎src/app/components/under-construct/under-construct.component.html

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<div class="under-construct">
2+
<h1>Page en construction</h1>
3+
<p>Cette page est en cours de construction. Veuillez revenir plus tard.</p>
4+
</div>

‎src/app/components/under-construct/under-construct.component.scss

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.under-construct {
2+
display: flex;
3+
flex-direction: column;
4+
align-items: center;
5+
justify-content: center;
6+
border-radius: 8px;
7+
min-height: 100%;
8+
gap: 2rem;
9+
text-align: center;
10+
backdrop-filter: blur(40px) saturate(140%);
11+
background-color: rgba(0, 100, 42, 0.1);
12+
box-shadow: var(--button-box-shadow);
13+
}

‎src/app/components/under-construct/under-construct.component.ts

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-under-construct',
5+
standalone: true,
6+
imports: [],
7+
templateUrl: './under-construct.component.html',
8+
styleUrl: './under-construct.component.scss',
9+
})
10+
export class UnderConstructComponent {}

‎src/app/pages/asso-page/asso-page.component.scss

+1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ main {
3838
min-height: 200px;
3939
flex: 1;
4040
width: 50%;
41+
cursor: pointer;
4142
}
4243
.asso-list-container > *:last-child {
4344
flex: 1;

‎src/app/pages/transparency-page/transparency-page.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
<main>
2-
<p>transparency-page works!</p>
2+
<app-under-construct></app-under-construct>
33
</main>

0 commit comments

Comments
 (0)