Inscription sur le site

src/app/app.routes.ts

@@ -1,7 +1,7 @@
 import {Routes} from '@angular/router';
 import {LoginComponent} from './pages/login/login.component';
 import {HomeComponent} from './pages/home/home.component';
-import {RegisterComponent} from './pages/register/register.component';
+import {RegisterFormComponent} from './components/register-form/register-form.component';
 import {LogoutComponent} from './pages/logout/logout.component';
 import {NotFoundComponent} from './pages/not-found/not-found.component';
 import {authGuard} from './guards/auth.guard';
@@ -10,6 +10,7 @@ import {NewPostComponent} from './pages/new-post/new-post.component';
 import {writerGuard} from './guards/writer.guard';
 import {PostComponent} from './pages/post/post.component';
 import {MyPostsComponent} from './pages/my-posts/my-posts.component';
+import {RegisterComponent} from './pages/register/register.component';
 
 export const routes: Routes = [
   {path: '', component: HomeComponent},

src/app/components/register-form/register-form.component.css

@@ -0,0 +1,18 @@
+.form-container {
+  margin-top: 2em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.form {
+  width: 100%;
+  max-width: 50em;
+  display: flex;
+  flex-direction: column;
+  gap:1em;
+}
+
+.send-button {
+  align-self: center;
+}

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

@@ -0,0 +1,14 @@
+<div class="form-container">
+  <form class="form" [formGroup]="form" (ngSubmit)="onSubmit()">
+    <label for="username">Nom d'utilisateur</label>
+    <input [(ngModel)]="username" id="username" type="text" pInputText formControlName="username"/>
+    <label for="password">Mot de passe</label>
+    <input type="password" [(ngModel)]="password" id="password" pInputText formControlName="password"/>
+    <label for="passwordConfirm">Confirmez le mot de passe</label>
+    <input type="password"[(ngModel)]="passwordConfirm" id="passwordConfirm" pInputText formControlName="passwordConfirm"/>
+    <label for="role">Rôle de l'utilisateur</label>
+    <p-selectButton id="role" [options]="roles" [(ngModel)]="role" optionLabel="name" optionValue="value"
+                    formControlName="role"/>
+    <p-button class="send-button" type="submit" label="S'inscrire"></p-button>
+  </form>
+</div>

src/app/components/register-form/register-form.component.ts

@@ -0,0 +1,92 @@
+import {Component, Input, OnDestroy, OnInit} from '@angular/core';
+import {HeaderComponent} from '../header/header.component';
+import {Subscription} from 'rxjs';
+import {FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators} from '@angular/forms';
+import {InputTextModule} from 'primeng/inputtext';
+import {SelectButtonModule} from 'primeng/selectbutton';
+import {Button} from 'primeng/button';
+import {AuthorService} from '../../services/author.service';
+import {Router} from '@angular/router';
+import {MessageService} from 'primeng/api';
+
+@Component({
+  selector: 'app-register-form',
+  standalone: true,
+  imports: [
+    HeaderComponent,
+    ReactiveFormsModule,
+    InputTextModule,
+    SelectButtonModule,
+    FormsModule,
+    Button
+  ],
+  templateUrl: './register-form.component.html',
+  styleUrl: './register-form.component.css'
+})
+export class RegisterFormComponent implements OnDestroy {
+  @Input() username: string = "";
+  @Input() password: string = "";
+  @Input() passwordConfirm: string = "";
+  @Input() role: string = "READER"
+  @Input() adminForm: boolean = false;
+  roles = [
+    {name: 'Lecteur', value: 'READER'},
+    {name: 'Écrivain', value: 'WRITER'}
+  ];
+  subs: Subscription[] = [];
+  form: FormGroup;
+
+  constructor(private formBuilder: FormBuilder,
+              private authorService: AuthorService,
+              private router: Router,
+              private messageService: MessageService
+  ) {
+    this.form = this.formBuilder.group({
+      username: ['', [Validators.required, Validators.maxLength(255)]],
+      password: ['', [Validators.required, Validators.maxLength(50)]],
+      passwordConfirm: ['', [Validators.required, Validators.maxLength(50)]],
+      role: [{value: 'READER', disabled: !this.adminForm}, [Validators.required, Validators.maxLength(10)]],
+    });
+  }
+
+  successMessage(summary: string, detail: string): void {
+    this.messageService.add({
+      severity: 'success',
+      summary,
+      detail,
+      life: 3000,
+      closable: false
+    });
+  }
+
+  failureMessage(summary: string, detail: string): void {
+    this.messageService.add({
+      severity: 'error',
+      summary,
+      detail,
+      life: 3000,
+      closable: false
+    });
+  }
+
+  onSubmit() {
+    if (this.form.valid && this.password === this.passwordConfirm) {
+      if (this.adminForm) {
+        this.authorService.createAccountAdmin(this.username, this.password, this.role); //TODO à finir
+      } else {
+        this.subs.push(this.authorService.createAccount(this.username, this.password).subscribe({
+          next: () => this.router.navigate(['/login']).then(() => this.successMessage('Succès', 'Utilisateur créé avec succès')),
+          error: (err) => this.failureMessage('Erreur', err.message)
+
+        }));
+      }
+    }
+  }
+
+
+  ngOnDestroy(): void {
+    this.subs.forEach((sub: Subscription) => sub.unsubscribe());
+  }
+
+
+}

src/app/pages/login/login.component.css

@@ -16,3 +16,7 @@
 .send-button {
   align-self: center;
 }
+
+#role {
+  width: 100%;
+}

src/app/pages/login/login.component.html

@@ -2,11 +2,11 @@
 <div class="form-container">
   <div class="form">
     <label for="username">Nom d'utilisateur</label>
-    <input type="text" id="username" placeholder="Jean Zay" pInputText [(ngModel)]="name"/>
+    <input type="text" id="username" pInputText [(ngModel)]="name"/>
     <label for="password">Mot de passe</label>
-    <input type="password" id="password" placeholder="motDePasseTrèsSecret" pInputText [(ngModel)]="password"/>
+    <input type="password" id="password" pInputText [(ngModel)]="password"/>
     <label for="confirm-password">Confirmez le mot de passe</label>
-    <input type="password" id="confirm-password" placeholder="motDePasseTrèsSecret" pInputText
+    <input type="password" id="confirm-password" pInputText
            [(ngModel)]="confirmPassword" (keyup.enter)="sendLogins()"/>
     <p-button
       class="send-button"

src/app/pages/register/register.component.html

@@ -1,3 +1,2 @@
 <app-header></app-header>
-
+<app-register-form [adminForm]="false"></app-register-form>
-<p>register works!</p>

src/app/pages/register/register.component.ts

@@ -1,11 +1,13 @@
 import { Component } from '@angular/core';
 import {HeaderComponent} from '../../components/header/header.component';
+import {RegisterFormComponent} from '../../components/register-form/register-form.component';
 
 @Component({
   selector: 'app-register',
   standalone: true,
   imports: [
-    HeaderComponent
+    HeaderComponent,
+    RegisterFormComponent
   ],
   templateUrl: './register.component.html',
   styleUrl: './register.component.css'

src/app/services/author.service.ts

@@ -50,4 +50,12 @@ export class AuthorService {
     };
     return this.httpClient.get<Post[]>(`${this.url}/${id}/posts`, httpOptions);
   }
+
+  createAccount(username: string, password: string): Observable<Author> {
+    return this.httpClient.post<Author>(`${this.url}/register`, {name: username, password: password})
+  }
+
+  createAccountAdmin(username: string, password: string, role: string): Observable<Author> {
+    return this.httpClient.post<Author>(`${this.url}/register`, {name: username, password: password, role: role})
+  }
 }