#10 user register

rusudinu · Mar 6, 2024 · ba39910 · ba39910
1 parent 8a7205f
commit ba39910
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 14 deletions.
diff --git a/src/app/user/services/authentication.service.ts b/src/app/user/services/authentication.service.ts
@@ -1,12 +1,14 @@
-import { Injectable } from '@angular/core';
-import { createUserWithEmailAndPassword, getAuth, signInWithEmailAndPassword, signOut } from '@angular/fire/auth';
+import { inject, Injectable } from '@angular/core';
+import { createUserWithEmailAndPassword, getAuth, signInWithEmailAndPassword, signOut, updateProfile, User } from '@angular/fire/auth';
+import { doc, Firestore, setDoc } from '@angular/fire/firestore';
 import { Router } from '@angular/router';
 
 @Injectable({
     providedIn: 'root',
 })
 export class AuthenticationService {
     auth = getAuth();
+    firestore: Firestore = inject(Firestore);
 
     constructor(private router: Router) {}
 
@@ -23,23 +25,35 @@ export class AuthenticationService {
         );
     }
 
-    register(email: string, password: string) {
+    register(email: string, password: string, name: string) {
         createUserWithEmailAndPassword(this.auth, email, password).then(
-            () => {
-                alert('User registered successfully');
-                this.router.navigate(['/sign-in']);
+            userCredential => {
+                this.createUserFirebaseDoc(userCredential.user, name).then(() => {
+                    alert('User registered successfully');
+                    this.router.navigate(['/dashboard']).then();
+                });
             },
             () => {
                 alert('Something went wrong');
-                this.router.navigate(['/sign-up']);
+                this.router.navigate(['/sign-up']).then();
             },
         );
     }
 
+    createUserFirebaseDoc(user: User, name: string) {
+        updateProfile(user, { displayName: name }).then();
+        const userRef = doc(this.firestore, 'users', user.uid);
+        return setDoc(userRef, {
+            email: user.email,
+            uid: user.uid,
+            name,
+        });
+    }
+
     logout() {
         signOut(this.auth).then(() => {
             localStorage.removeItem('token');
-            this.router.navigate(['/sign-in']);
+            this.router.navigate(['/sign-in']).then();
         });
     }
 }
diff --git a/src/app/user/user-register/user-register.component.html b/src/app/user/user-register/user-register.component.html
@@ -4,12 +4,17 @@ <h3>Sign Up</h3>
         <mat-form-field appearance="fill" class="form-field">
             <mat-label>Email Address</mat-label>
             <input matInput type="email" formControlName="username" placeholder="Email Address" />
-            <mat-error *ngIf="signUpForm.get('username')?.invalid"> Please enter a valid email address </mat-error>
+            <mat-error *ngIf="signUpForm.get('username')?.invalid"> Please enter a valid email address</mat-error>
+        </mat-form-field>
+        <mat-form-field appearance="fill" class="form-field">
+            <mat-label>Name</mat-label>
+            <input matInput type="fname" formControlName="name" placeholder="Name" />
+            <mat-error *ngIf="signUpForm.get('name')?.invalid"> Please enter a valid name</mat-error>
         </mat-form-field>
         <mat-form-field appearance="fill" class="form-field">
             <mat-label>Password</mat-label>
             <input matInput type="password" formControlName="password" placeholder="Password" />
-            <mat-error *ngIf="signUpForm.get('password')?.invalid"> Password is required </mat-error>
+            <mat-error *ngIf="signUpForm.get('password')?.invalid"> Password is required</mat-error>
         </mat-form-field>
         <button mat-raised-button color="primary" type="submit" class="btn-block" [disabled]="!signUpForm.valid">Sign Up</button>
     </form>

diff --git a/src/app/user/user-register/user-register.component.ts b/src/app/user/user-register/user-register.component.ts
@@ -1,6 +1,6 @@
 import { NgIf } from '@angular/common';
 import { Component } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatButton } from '@angular/material/button';
 import { MatError, MatFormField, MatLabel } from '@angular/material/form-field';
 import { MatIcon } from '@angular/material/icon';
@@ -18,13 +18,14 @@ import { AuthenticationService } from '../services/authentication.service';
 })
 export class UserRegisterComponent {
     signUpForm: FormGroup = new FormGroup({
-        username: new FormControl(),
-        password: new FormControl(),
+        username: new FormControl('', Validators.required),
+        password: new FormControl('', [Validators.required, Validators.minLength(6)]),
+        name: new FormControl('', Validators.required),
     });
 
     constructor(private authenticationService: AuthenticationService) {}
 
     signUp() {
-        this.authenticationService.register(this.signUpForm.value.username, this.signUpForm.value.password);
+        this.authenticationService.register(this.signUpForm.value.username, this.signUpForm.value.password, this.signUpForm.value.name);
     }
 }