signuplogic

src/app/authentication/signup/signup.component.html

@@ -2,19 +2,19 @@
     <div class=""Signup>
         <mat-card>
             <mat-card-content>
-                <form>
+                <form [formGroup]="signup">
                     <h2>SignUp Page</h2>
                     <mat-form-field>
                         <mat-label> Enter your Name</mat-label>
-                        <input matInput formControlName="Name" required>
+                        <input matInput formControlName="name" required>
                     </mat-form-field>
                     <mat-form-field>
                         <mat-label> Enter your Email-Id</mat-label>
-                        <input matInput required>
+                        <input matInput formControlName="email" required>
                     </mat-form-field>
                     <mat-form-field>
                         <mat-label>Create your password</mat-label>
-                        <input matInput [type]="hide ? 'password' : 'text'" >
+                        <input matInput [type]="hide ? 'password' : 'text'" formControlName="password">
                         <button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
                           <mat-icon> {{hide ? 'visibility_off' : 'visibility'}} </mat-icon>
                         </button>

src/app/authentication/signup/signup.component.ts

@@ -1,4 +1,7 @@
 import { Component } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { AuthService } from 'src/app/services/auth.service';
+import { Router } from '@angular/router';
 import {FormControl, Validators, FormsModule, ReactiveFormsModule, FormGroup, FormBuilder} from '@angular/forms';
 
 @Component({
@@ -10,15 +13,44 @@ export class SignupComponent {
 signup: FormGroup;
 
 constructor(
-  private FormBuilder: FormBuilder
+  private FormBuilder: FormBuilder,
+  private authservice: AuthService,
+  private snackBar: MatSnackBar,
+  private router: Router
 ){}
 
 signUp(){
+  const formData = this.signup.getRawValue();
+    const payload = {
+      name:formData.name,
+      email: formData.email,
+      password: formData.password
+    }
+    console.log('payload', payload)
+
+    this.authservice.register(payload).subscribe(response => { 
+      // Check if the token is not empty or null
+      if (response.status==200) {
+        this.snackBar.open("SignedIn Successfully", "OK");
+        this.router.navigateByUrl('/login');
+      } else {
+        this.snackBar.open("User already exixts", "OK");
+      }
+    });
 
   }
 
+signUpinitForm(): void {
+  this.signup = this.FormBuilder.group({
+    name: ['', Validators.required],
+    email: ['', Validators.required],
+    password: ['', Validators.required]
+  })
+}
+
 hide=true;
 ngOnInit(): void {
+  this.signUpinitForm();
 
 }
 

src/app/services/auth.service.ts

@@ -14,5 +14,8 @@ export class AuthService {
   public login(payload, options?): Observable<any> {
     return this.http.post<any>('http://localhost:8080/api/auth/login', payload, options);
   }
+  public register(payload): Observable<any> {
+    return this.http.post<any>('http://localhost:8080/api/auth/login', payload);
+  }
 
 }