Added next level feature of also unlocking the page by password user

src/app/UnlockService/unlock.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { UnlockService } from './unlock.service';
+
+describe('UnlockService', () => {
+  let service: UnlockService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(UnlockService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/UnlockService/unlock.service.ts

@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+@Injectable({
+  providedIn: 'root'
+})
+export class UnlockService {
+
+  private unlockRequest = new Subject<void>();
+
+  unlockRequest$ = this.unlockRequest.asObservable();
+
+  requestUnlock() {
+    this.unlockRequest.next();
+  }
+}

src/app/home/home.component.html

@@ -1,4 +1,4 @@
-<app-navigation></app-navigation>
+<app-navigation [locked]="locked"></app-navigation>
 
 <!-- <div class="locked" *ngIf="locked">Locked......</div> -->
 

src/app/home/home.component.ts

@@ -26,7 +26,7 @@ export class HomeComponent implements OnInit {
   words: number = 0; // Initialize the word count
   characters: number = 0; // Initialize the character count
   password: string = '';
-  isPasswordIncorrect  : boolean = false;
+  isPasswordIncorrect: boolean = false;
 
   constructor(private route: ActivatedRoute, private dialog: MatDialog) {
     this.routeId = this.route.snapshot.paramMap.get('id');
@@ -62,10 +62,13 @@ export class HomeComponent implements OnInit {
       // Listen for changes in a specific child ('text' in this case)
       onChildChanged(docRef, (snapshot) => {
         // console.log('Child changed:', snapshot.val());
-        this.text = snapshot.val() || null;
+        if (snapshot.key === 'text') {
+          this.text = snapshot.val() || null;
 
-        // Update word and character counts
-        this.updateWordAndCharacterCount();
+          // Update word and character counts
+          this.updateWordAndCharacterCount();
+        }
+
       });
     } else {
       console.error('Route ID is null or undefined');

src/app/navigation/navigation.component.html

@@ -2,7 +2,7 @@
   <span class="title">NotePage</span>
   <span class="spacer"></span>
   <div class="icon-button">
-    <button mat-icon-button matTooltip="Lock the Page" (click)="openPasswordInputDialog()">
+    <button mat-icon-button matTooltip="Lock the Page" (click)="openPasswordInputDialog()" *ngIf="!locked">
       <mat-icon>lock</mat-icon>
     </button>
     <button mat-icon-button matTooltip="Share the Link" (click)="sharePage()">

src/app/navigation/navigation.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 import { PasswordInputDialogComponent } from '../password-input-dialog/password-input-dialog.component';
@@ -13,25 +13,41 @@ import {
   Query,
 } from 'firebase/database';
 import { query, update } from '@angular/fire/database';
+import { UnlockService } from '../UnlockService/unlock.service';
 @Component({
   selector: 'app-navigation',
   templateUrl: './navigation.component.html',
   styleUrls: ['./navigation.component.css'],
 })
 export class NavigationComponent {
   routeId: string | null | undefined;
+
+  @Input()
+  locked : boolean = false;
+  password : string = '';
+  datalocked : boolean = false;
   constructor(
     private router: Router,
     private route: ActivatedRoute,
-    private dialog: MatDialog
+    private dialog: MatDialog,
+    private passwordService: UnlockService
   ) {
     this.router.events.subscribe((event) => {
       if (event instanceof NavigationEnd) {
         // Subscribe to route parameter changes and update routeId
         this.routeId = this.route.snapshot.paramMap.get('id');
+        this.datalocked = this.route.snapshot.data['content'].locked; // Resolved content
+        this.password = this.route.snapshot.data['content'].password; // Resolved content
         console.log('Route ID: ' + this.routeId);
       }
     });
+    this.passwordService.unlockRequest$.subscribe(() => {
+      // make locked false and password empty
+      this.locked = false;
+      this.password = '';
+      // add this to the database
+      this.unlock();
+    });
   }
   ngOnInit() {
     // Subscribe to route parameter changes and update routeId
@@ -40,6 +56,33 @@ export class NavigationComponent {
     });
   }
 
+  unlock(){
+    // Get the route ID
+    const routeID = this.routeId;
+
+    // Check if the route ID exists
+    if (routeID) {
+      // Create a reference to the Firebase Realtime Database
+      const db = getDatabase();
+
+      // Define the data object to update the password
+      const dataToUpdate = {
+        password: '',
+        locked : false
+      };
+
+      // Update the password in the database
+      update(ref(db, routeID), dataToUpdate)
+        .then(() => {
+          console.log('Password updated successfully');
+        })
+        .catch((error) => {
+          console.error('Error updating password:', error);
+        });
+    } else {
+      console.error('Route ID is null or undefined');
+    }
+  }
   sharePage() {
     // OPen share menu of the browser when the share button is clicked
     navigator
@@ -54,6 +97,7 @@ export class NavigationComponent {
   openPasswordInputDialog() {
     const dialogRef = this.dialog.open(PasswordInputDialogComponent, {
       width: '300px', // Set the desired width
+      data : {locked : this.datalocked, password : this.password}
     });
 
     dialogRef.afterClosed().subscribe((result) => {
@@ -66,6 +110,7 @@ export class NavigationComponent {
       if (result) {
         // Store the password to realtime db i mean update it
         this.updatePassword(result);
+        this.password = result;
       }
     });
   }

src/app/password-input-dialog/password-input-dialog.component.css

@@ -0,0 +1,5 @@
+.unlock{
+    /* center it horizontally */
+    margin: 0 auto;
+
+}

src/app/password-input-dialog/password-input-dialog.component.html

@@ -1,10 +1,12 @@
 <h2 mat-dialog-title>Enter Password</h2>
-<mat-dialog-content>
+<mat-dialog-content style="display: flex; flex-direction: column; align-items: center;">
   <mat-form-field>
-    <input matInput [(ngModel)]="password" placeholder="Password" type="password">
+    <input matInput [(ngModel)]="password" [type]="passwordFieldType" placeholder="Password">
+    <mat-icon matSuffix matTooltip="Toggle Password Visibility" (click)="togglePasswordVisibility()">{{ showPasswordIcon }}</mat-icon>
   </mat-form-field>
+  <mat-icon class="unlock" matTooltip="Unlock the Page" *ngIf="locked"  (click)="unlock()" [mat-dialog-close]="'cancel'">lock_open</mat-icon>
 </mat-dialog-content>
 <mat-dialog-actions>
   <button mat-button [mat-dialog-close]="password" color="primary">Submit</button>
-  <button mat-button [mat-dialog-close]="'cancel'"color="warn">Cancel</button>
+  <button mat-button [mat-dialog-close]="'cancel'" color="warn">Cancel</button>
 </mat-dialog-actions>

src/app/password-input-dialog/password-input-dialog.component.ts

@@ -1,12 +1,30 @@
-import { Component } from '@angular/core';
-import { MatDialogRef } from '@angular/material/dialog';
+import { Component, Input , Inject} from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { ActivatedRoute } from '@angular/router';
+import { UnlockService } from '../UnlockService/unlock.service';
 @Component({
   selector: 'app-password-input-dialog',
   templateUrl: './password-input-dialog.component.html',
   styleUrls: ['./password-input-dialog.component.css']
 })
 export class PasswordInputDialogComponent {
+  // @Input()
   password: string = '';
+  passwordFieldType: string = 'password';
+  showPasswordIcon: string = 'visibility';
+  // @Input()
+  locked : boolean = false;
+  constructor(public dialogRef: MatDialogRef<PasswordInputDialogComponent>, @Inject(MAT_DIALOG_DATA) public data  : {locked : boolean,password : string},private passwordService: UnlockService) {
+    this.locked = data.locked;
+    this.password = data.password;
+  }
 
-  constructor(public dialogRef: MatDialogRef<PasswordInputDialogComponent>) {}
+  togglePasswordVisibility() {
+    this.passwordFieldType = this.passwordFieldType === 'password' ? 'text' : 'password';
+    this.showPasswordIcon = this.showPasswordIcon === 'visibility' ? 'visibility_off' : 'visibility';
+  }
+  unlock() {
+    // Call the unlock request when the "unlock" icon is clicked
+    this.passwordService.requestUnlock();
+  }
 }

src/app/redirection/redirection.component.html

@@ -1,3 +1,3 @@
-<app-navigation></app-navigation>
+<app-navigation [locked]="true"></app-navigation>
 
 <p>redirection works!</p>