login et register + chat et discussion services

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

@@ -1,5 +1,4 @@
 <ion-content [fullscreen]="true" class="bg">
-
     <div class="container">
 
         <div class="logo-box">
@@ -8,34 +7,37 @@
 
         <h1>Knots</h1>
 
-        <div class="card">
+        <div class="card" [formGroup]="registerForm">
 
             <h3>Inscrivez-vous à Knots !</h3>
             <p class="subtitle">Commencez à nouer des liens !</p>
 
             <ion-item lines="none" class="input">
-                <ion-input placeholder="Nom d'utilisateur..."></ion-input>
+                <ion-input placeholder="Nom d'utilisateur..." formControlName="username"></ion-input>
             </ion-item>
 
             <ion-item lines="none" class="input">
-                <ion-input type="password" placeholder="Mot de passe..."></ion-input>
+                <ion-input type="password" placeholder="Mot de passe..." formControlName="password"></ion-input>
             </ion-item>
 
             <ion-item lines="none" class="input">
-                <ion-input type="password" placeholder="Confirmez votre mot de passe..."></ion-input>
+                <ion-input type="password" placeholder="Confirmez votre mot de passe..." formControlName="confirmPassword"></ion-input>
             </ion-item>
 
-            <ion-button expand="block" class="btn">
-                Créer son compte
+            <p *ngIf="registerForm.hasError('passwordMismatch')" style="color:#d97070; font-size:13px; text-align:center; margin:0;">
+                Les mots de passe ne correspondent pas.
+            </p>
+
+            <ion-button expand="block" class="btn" (click)="submitForm()" [disabled]="isLoading">
+                {{ isLoading ? 'Création...' : 'Créer son compte' }}
             </ion-button>
 
         </div>
 
         <div class="signup">
             Déjà un compte ?<br>
-            <a (click)="goToLogin()" >Connectez-vous ici</a>
+            <a (click)="goToLogin()">Connectez-vous ici</a>
         </div>
 
     </div>
-
 </ion-content>