sign up page completed

src/app/sign-in/sign-in.component.scss

@@ -16,7 +16,6 @@
 }
 
 .heading {
-  margin-bottom: 20px;
   font-weight: bold;
 }
 .custom-form {
@@ -65,7 +64,6 @@ button {
   background-color: $accent-color;
   color: white;
   padding: 14px 20px;
-  margin: 8px 0;
   border: 0.5px solid $accent-color;
   cursor: pointer;
   width: 250px;
@@ -76,7 +74,6 @@ button:disabled {
   background-color: white;
   color: $accent-color;
   padding: 14px 20px;
-  margin: 8px 0;
   border: 0.5px solid $accent-color;
   cursor: not-allowed;
   width: 250px;
@@ -124,7 +121,7 @@ button:hover {
   font-size: inherit;
   font-family: inherit;
   font-size: 14px;
-  margin-top: 16px;
+  margin-top: 10px;
   text-decoration: none;
 }
 

src/app/sign-in/sign-in.component.ts

@@ -1,6 +1,6 @@
 import { Component, inject } from '@angular/core';
 import { Auth, GoogleAuthProvider, sendPasswordResetEmail, signInWithEmailAndPassword, signInWithPopup } from '@angular/fire/auth';
-import { Form, ReactiveFormsModule } from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
 import { Router } from '@angular/router';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
@@ -30,7 +30,7 @@ export class SignInComponent {
 
 
   signIn() {
-    if (this.loginForm && this.loginForm.get('email') && this.loginForm.get('password')) {
+    if (this.loginForm.valid) {
       const email = this.loginForm.get('email')!.value;
       const password = this.loginForm.get('password')!.value;
       signInWithEmailAndPassword(this.auth, email, password)

src/app/sign-up/sign-up.component.html

@@ -4,18 +4,57 @@
     <h2 class="heading">Create Account</h2>
     <p>Fill in the required details and all are mandatory</p>
   </div>
-  <div>
+  <form [formGroup]="registerForm" (ngSubmit)="register()">
     <div class="input-group">
-      <input type="text" placeholder="name" required />
+      <input formControlName="name" type="text" placeholder="name" required />
+      <div class="error-container">
+        @if (registerForm.controls['name'].errors?.['required'] &&
+        registerForm.controls['name'].touched) {
+        <p class="error-message">Name is required.</p>
+        }
+      </div>
     </div>
     <div class="input-group">
-      <input type="email" placeholder="Email ID" required />
+      <input
+        formControlName="email"
+        type="email"
+        placeholder="Email ID"
+        required
+      />
+      <div class="error-container">
+        @if (registerForm.controls['email'].errors?.['required'] &&
+        registerForm.controls['email'].touched) {
+        <p class="error-message">Email is required.</p>
+        } @if (registerForm.controls['email'].errors?.['email'] &&
+        registerForm.controls['email'].touched) {
+        <p class="error-message">Enter a valid email.</p>
+        }
+      </div>
     </div>
     <div class="input-group">
-      <input type="password" placeholder="Password" required />
+      <input
+        formControlName="password"
+        type="password"
+        placeholder="Password"
+        required
+      />
+      <div class="error-container">
+        @if ( registerForm.controls['password'].errors?.['required'] &&
+        registerForm.controls['password'].touched ) {
+        <p class="error-message">Password is required.</p>
+        } @if (registerForm.controls['password'].errors?.['pattern'] &&
+        registerForm.controls['password'].touched) {
+        <p class="error-message">
+          Password should have a capital letter, a number and a special
+          character
+        </p>
+        }
+      </div>
     </div>
-    <button (click)="register()" type="submit">Sign Up</button>
-  </div>
+    <div>
+      <button [disabled]="!registerForm.valid" type="submit">Sign Up</button>
+    </div>
+  </form>
   <a href="#" (click)="signInWithGoogle()" class="google-sign-in"
     >Or log in with Google</a
   >

src/app/sign-up/sign-up.component.scss

@@ -32,15 +32,17 @@
   align-items: center;
   flex-direction: column;
   .heading {
-    margin-bottom: 20px;
     font-weight: bold;
   }
+  p {
+    padding: 0 20px;
+    text-align: center;
+  }
 }
 
 .input-group {
   width: 100%;
   max-width: 300px;
-  margin-bottom: 20px;
 }
 
 input[type="email"],
@@ -54,14 +56,44 @@ input[type="text"] {
   box-sizing: border-box;
   border-radius: 4px;
 }
+
+.error-container {
+  height: 30px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.error-message {
+  color: #ff0000;
+  text-align: center;
+  font-size: 0.8rem;
+}
+.error-message.ng-star-inserted {
+  visibility: visible;
+  height: auto;
+}
+
 button {
   background-color: $accent-color;
   color: white;
   padding: 14px 20px;
-  margin: 8px 0;
-  border: none;
+  border: 0.5px solid $accent-color;
   cursor: pointer;
-  width: 100%;
+  width: 250px;
+  border-radius: 4px;
+}
+
+button:hover {
+  opacity: 0.8;
+}
+
+button:disabled {
+  background-color: white;
+  color: $accent-color;
+  padding: 14px 20px;
+  border: 0.5px solid $accent-color;
+  cursor: not-allowed;
+  width: 250px;
   border-radius: 4px;
 }
 
@@ -78,12 +110,12 @@ button {
 
 .register-link {
   text-align: center;
-  margin-top: 20px;
 }
 
 .register-link a {
   color: #007bff;
   text-decoration: none;
+  cursor: pointer;
 }
 
 .register-link a:hover {
@@ -94,4 +126,10 @@ button {
   .input-group {
     width: 400px;
   }
+  button {
+    width: 300px;
+  }
+  button:disabled {
+    width: 300px;
+  }
 }

src/app/sign-up/sign-up.component.ts

@@ -1,34 +1,57 @@
 import { Component, inject } from '@angular/core';
-import { Auth, GoogleAuthProvider, signInWithPopup } from '@angular/fire/auth';
+import { Auth, GoogleAuthProvider, createUserWithEmailAndPassword, signInWithPopup, updateProfile } from '@angular/fire/auth';
 import { Router } from '@angular/router';
+import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-sign-up',
   standalone: true,
-  imports: [],
+  imports: [ReactiveFormsModule],
   templateUrl: './sign-up.component.html',
   styleUrl: './sign-up.component.scss'
 })
 export class SignUpComponent {
 
+  registerForm!: FormGroup;
+
   private readonly auth: Auth = inject(Auth);
   private readonly router: Router = inject(Router);
+  private readonly formBuilder: FormBuilder = inject(FormBuilder);
 
-  register() {
+  constructor() {
+    this.registerForm = this.formBuilder.group({
+      name: ['', Validators.required],
+      email: ['', [Validators.required, Validators.email]],
+      password: ['', [Validators.required,
+      Validators.minLength(8),
+      Validators.pattern('^(?=.*[A-Z])(?=.*[!@#$&*]).{8,}$')]]
+    });
+  }
 
+
+  register() {
+    if (this.registerForm.valid) {
+      const { name, email, password } = this.registerForm.value;
+      createUserWithEmailAndPassword(this.auth, email, password)
+        .then(userCredential => {
+          return updateProfile(userCredential.user, { displayName: name });
+        })
+        .then(() => {
+          // this.router.navigate(['/some-success-route']);
+        })
+        .catch(error => {
+          console.error('Registration error:', error);
+        });
+    }
   }
 
   signInWithGoogle() {
     const provider = new GoogleAuthProvider();
     signInWithPopup(this.auth, provider)
       .then((result) => {
         const credential = GoogleAuthProvider.credentialFromResult(result);
-        const token = credential?.accessToken;
-        const user = result.user;
       }).catch((error) => {
         const errorCode = error.code;
-        const errorMessage = error.message;
-        const email = error.email;
         const credential = GoogleAuthProvider.credentialFromError(error);
       });
   }