User page (#56)

* started dev user dev

* wip

* user passed to components

* wip user

* done updating user

* wip . billing

* updated funix prod angular lib

* done billing, need to check why the pdf downloaded is always the same

* refacto user handle

* style pagination factures

* wip link minecraft

* add fetch to httpClient for SSR

* wip minecraft link

* done sync minecraft account

* ui improvements

* error messages on shop page

package.json

@@ -27,7 +27,7 @@
     "@angular/platform-server": "^17.3.7",
     "@angular/router": "^17.3.7",
     "@angular/ssr": "^17.3.6",
-    "@funixproductions/funixproductions-requests": "^0.1.8",
+    "@funixproductions/funixproductions-requests": "^0.1.17",
     "@ng-bootstrap/ng-bootstrap": "^16.0.0",
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.0",

src/app/app.module.ts

@@ -5,7 +5,7 @@ import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
 import {NavbarComponent} from './components/navbar/navbar.component';
 import {FooterComponent} from './components/footer/footer.component';
-import {HttpClientModule} from "@angular/common/http";
+import {HttpClientModule, provideHttpClient, withFetch} from "@angular/common/http";
 import {NgOptimizedImage} from "@angular/common";
 import {NewsModule} from "./pages/news/news.module";
 import {NgbModule} from "@ng-bootstrap/ng-bootstrap";
@@ -47,7 +47,8 @@ import {provideAnimationsAsync} from '@angular/platform-browser/animations/async
   providers: [
     Title,
     provideClientHydration(),
-    provideAnimationsAsync()
+    provideAnimationsAsync(),
+    provideHttpClient(withFetch())
   ],
   exports: [
     NotificationComponent

src/app/components/inputs/input-email/input-email.component.ts

@@ -14,7 +14,7 @@ import {FormsModule} from "@angular/forms";
   styleUrl: './input-email.component.scss'
 })
 export class InputEmailComponent {
-  @Input() label: string = 'Adresse email';
+  @Input() label: string = 'Adresse mail';
   @Input() id: string = 'validationEmailAddress';
   @Input() email: string = '';
   @Input() formSent: boolean = false;

src/app/components/minecraft-command/minecraft-command.component.html

@@ -0,0 +1,6 @@
+<div class="command-container">
+    <button class="btn btn-primary me-2" (click)="copyCommand()">
+        <i class="bi bi-clipboard"></i>
+    </button>
+    <pre class="command">{{ command }}</pre>
+</div>

src/app/components/minecraft-command/minecraft-command.component.scss

@@ -0,0 +1,16 @@
+.command-container {
+  display: flex;
+  align-items: center;
+  color: #fff;
+  padding: 10px;
+  border-radius: 5px;
+}
+
+.command {
+  margin: 0;
+  padding: 10px;
+  background-color: #444;
+  border-radius: 5px;
+  font-family: monospace;
+}
+

src/app/components/minecraft-command/minecraft-command.component.spec.ts

@@ -0,0 +1,23 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {MinecraftCommandComponent} from './minecraft-command.component';
+
+describe('MinecraftCommandComponent', () => {
+  let component: MinecraftCommandComponent;
+  let fixture: ComponentFixture<MinecraftCommandComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MinecraftCommandComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MinecraftCommandComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/minecraft-command/minecraft-command.component.ts

@@ -0,0 +1,22 @@
+import {Component, Input} from '@angular/core';
+import NotificationService from "../../services/notifications/services/NotificationService";
+
+@Component({
+  selector: 'minecraft-command',
+  standalone: true,
+  imports: [],
+  templateUrl: './minecraft-command.component.html',
+  styleUrl: './minecraft-command.component.scss'
+})
+export class MinecraftCommandComponent {
+
+  @Input() command: string = ''
+
+  constructor(private notificationService: NotificationService) {
+  }
+
+  copyCommand() {
+    navigator.clipboard.writeText(this.command).then(r =>
+        this.notificationService.info('Commande copiée dans le presse-papier.'));
+  }
+}

src/app/components/minecraft-head/minecraft-head.component.html

@@ -0,0 +1,6 @@
+<img
+        ngSrc="https://minotar.net/avatar/{{ username }}/{{ size }}.png"
+        [width]="size"
+        [height]="size"
+        alt="Skin Minecraft de {{ username}}"
+>

src/app/components/minecraft-head/minecraft-head.component.spec.ts

@@ -0,0 +1,23 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {MinecraftHeadComponent} from './minecraft-head.component';
+
+describe('MinecraftHeadComponent', () => {
+  let component: MinecraftHeadComponent;
+  let fixture: ComponentFixture<MinecraftHeadComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MinecraftHeadComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MinecraftHeadComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/minecraft-head/minecraft-head.component.ts

@@ -0,0 +1,18 @@
+import {Component, Input} from '@angular/core';
+import {NgOptimizedImage} from "@angular/common";
+
+@Component({
+  selector: 'minecraft-head',
+  standalone: true,
+  imports: [
+    NgOptimizedImage
+  ],
+  templateUrl: './minecraft-head.component.html',
+  styleUrl: './minecraft-head.component.scss'
+})
+export class MinecraftHeadComponent {
+
+  @Input() username: string = '';
+  @Input() size: number = 100;
+
+}

src/app/pages/shop/shop-checkout/shop-checkout.component.html

@@ -2,6 +2,24 @@
     <h1>Boutique - Paiement</h1>
     <p>Voici la liste de vos articles, vous pouvez payer sur cette page.</p>
 
+    <div *ngIf="loadedUser">
+        <div *ngIf="!currentUser" class="alert alert-danger" role="alert">
+            Vous devez être connecté pour faire des achats.
+            <a href="/user">Cliquez ici pour vous conencter.</a>
+        </div>
+
+        <div *ngIf="loadedMinecraft">
+            <div *ngIf="currentUser && !minecraftAccount" class="alert alert-danger" role="alert">
+                Vous n'avez pas de compte Minecraft lié. Vous devez lier un compte Minecraft pour faire des achats. <br/>
+                <a href="/user">Cliquez ici</a> pour aller sur la page utilisateur et lier votre compte.
+            </div>
+            <div *ngIf="currentUser && minecraftAccount && !minecraftAccount.linked" class="alert alert-danger" role="alert">
+                Vous n'avez pas confirmé la liaison de votre compte Minecraft. Vous ne pourrez pas faire d'achats tant que vous n'avez pas activé votre compte.<br/>
+                <a href="/user">Cliquez ici</a> pour aller sur la page utilisateur et lier votre compte.
+            </div>
+        </div>
+    </div>
+
     <h2>Total à payer</h2>
     <h3 class="price-container">{{ shopService.formatPrice(shopService.countTotalPrice()) }} €</h3>
 

src/app/pages/shop/shop-checkout/shop-checkout.component.ts

@@ -1,24 +1,63 @@
-import {Component, Inject} from '@angular/core';
+import {AfterViewInit, Component, Inject} from '@angular/core';
 import {PacifistaPage} from "../../../components/pacifista-page/pacifista-page";
 import {Title} from "@angular/platform-browser";
 import {DOCUMENT} from "@angular/common";
 import ShopService from "../shop-service";
+import {
+  PacifistaWebUserLinkDTO,
+  PacifistaWebUserLinkService,
+  UserAuthService,
+  UserDTO
+} from "@funixproductions/funixproductions-requests";
+import {HttpClient} from "@angular/common/http";
+import {environment} from "../../../../environments/environment";
 
 @Component({
   selector: 'app-shop-checkout',
   templateUrl: './shop-checkout.component.html',
   styleUrls: ['./shop-checkout.component.scss']
 })
-export class ShopCheckoutComponent extends PacifistaPage {
+export class ShopCheckoutComponent extends PacifistaPage implements AfterViewInit {
 
   protected override readonly title: string = "Boutique - Panier";
   protected override readonly canonicalPath: string = "shop/checkout";
   protected override readonly pageDescription: string = "Boutique de Pacifista. Soutenez le serveur minecraft avec des avantages uniques !";
 
+  currentUser?: UserDTO
+  minecraftAccount?: PacifistaWebUserLinkDTO;
+  loadedUser: boolean = false;
+  loadedMinecraft: boolean = false;
+
+  private readonly userService: UserAuthService;
+  private readonly minecraftLinkService: PacifistaWebUserLinkService;
+
   constructor(title: Title,
+              httpClient: HttpClient,
               @Inject(DOCUMENT) doc: Document,
               protected shopService: ShopService) {
     super(title, doc);
+    this.userService = new UserAuthService(httpClient, environment.production);
+    this.minecraftLinkService = new PacifistaWebUserLinkService(httpClient, environment.production);
+  }
+
+  ngAfterViewInit(): void {
+    this.userService.currentUser().subscribe({
+      next: (user) => {
+        this.currentUser = user;
+
+        this.minecraftLinkService.getCurrentUserLink().subscribe({
+          next: (link) => {
+            this.minecraftAccount = link;
+          },
+          complete: () => {
+            this.loadedMinecraft = true;
+          }
+        })
+      },
+      complete: () => {
+        this.loadedUser = true;
+      }
+    })
   }
 
 }

src/app/pages/user/user-page/components/user-account-infos/components/user-account-infos-password-change/user-account-infos-password-change.component.html

@@ -0,0 +1,49 @@
+<div class="login-form">
+    <h2 class="pb-3"><i class="bi bi-key"></i> Modification du mot de passe</h2>
+
+    <div class="row g-3">
+        <div class="col-md-12">
+            <app-input-secret
+                    [label]="'Mot de passe actuel'"
+                    [placeholder]="'Entrez votre mot de passe actuel'"
+                    [id]="'currentPasswordInput'"
+                    [required]="true"
+                    [formSent]="formSent"
+                    [inputErrors]="currentPasswordErrors"
+                    (textChange)="currentPassword = $event"
+            ></app-input-secret>
+        </div>
+
+        <div class="col-md-12">
+            <app-input-secret
+                    [label]="'Nouveau mot de passe'"
+                    [placeholder]="'Entrez votre nouveau mot de passe'"
+                    [id]="'newPasswordInput'"
+                    [required]="true"
+                    [formSent]="formSent"
+                    [inputErrors]="newPasswordErrors"
+                    (textChange)="newPassword = $event"
+            ></app-input-secret>
+        </div>
+
+        <div class="col-md-12">
+            <app-input-secret
+                    [label]="'Confirmer le nouveau mot de passe'"
+                    [placeholder]="'Confirmez votre nouveau mot de passe'"
+                    [id]="'confirmNewPasswordInput'"
+                    [required]="true"
+                    [formSent]="formSent"
+                    [inputErrors]="newPasswordConfirmationErrors"
+                    (textChange)="newPasswordConfirmation = $event"
+            ></app-input-secret>
+        </div>
+
+        <div class="col-md-6">
+            <app-send-button
+                    [loading]="loading"
+                    [label]="'Mettre à jour'"
+                    (onClick)="updatePassword()"
+            ></app-send-button>
+        </div>
+    </div>
+</div>

src/app/pages/user/user-page/components/user-account-infos/components/user-account-infos-password-change/user-account-infos-password-change.component.scss

@@ -0,0 +1 @@
+@import "../../user-account-infos.component";

src/app/pages/user/user-page/components/user-account-infos/components/user-account-infos-password-change/user-account-infos-password-change.component.spec.ts

@@ -0,0 +1,23 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {UserAccountInfosPasswordChangeComponent} from './user-account-infos-password-change.component';
+
+describe('UserAccountInfosPasswordChangeComponent', () => {
+  let component: UserAccountInfosPasswordChangeComponent;
+  let fixture: ComponentFixture<UserAccountInfosPasswordChangeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [UserAccountInfosPasswordChangeComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(UserAccountInfosPasswordChangeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});