Added Toast Message

angular.json

@@ -89,7 +89,9 @@
             ],
             "styles": [
               "@angular/material/prebuilt-themes/indigo-pink.css",
-              "src/styles.css"
+              "src/styles.css",
+              "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
+              "node_modules/primeng/resources/primeng.min.css"
             ],
             "scripts": []
           }

package.json

@@ -23,6 +23,7 @@
     "@angular/platform-browser-dynamic": "^16.1.0",
     "@angular/router": "^16.1.0",
     "fs": "^0.0.1-security",
+    "ng-angular-popup": "^0.4.7",
     "rxjs": "~7.8.0",
     "ts-node": "^10.9.1",
     "tslib": "^2.3.0",

src/app/app.component.html

@@ -1 +1,3 @@
-<router-outlet></router-outlet>
+
+<router-outlet></router-outlet>
+<ng-toast [style]="{width : '300px'}"></ng-toast>

src/app/app.module.ts

@@ -30,7 +30,7 @@ import { PasswordInputDialogComponent } from './password-input-dialog/password-i
 import {MatDialogModule} from '@angular/material/dialog';
 import { PasswordInputComponent } from './password-input/password-input.component';
 import { getAuth, provideAuth } from '@angular/fire/auth';
-
+import { NgToastModule } from 'ng-angular-popup';
 @NgModule({
   declarations: [
     AppComponent,
@@ -43,6 +43,7 @@ import { getAuth, provideAuth } from '@angular/fire/auth';
   ],
   imports: [
     BrowserModule,
+    NgToastModule,
     AppRoutingModule,
     MatFormFieldModule,
     FormsModule,

src/app/navigation/navigation.component.ts

@@ -14,6 +14,7 @@ import {
 } from 'firebase/database';
 import { query, update } from '@angular/fire/database';
 import { UnlockService } from '../UnlockService/unlock.service';
+import { NgToastService } from 'ng-angular-popup';
 @Component({
   selector: 'app-navigation',
   templateUrl: './navigation.component.html',
@@ -30,7 +31,8 @@ export class NavigationComponent {
     private router: Router,
     private route: ActivatedRoute,
     private dialog: MatDialog,
-    private passwordService: UnlockService
+    private passwordService: UnlockService,
+    private toast : NgToastService
   ) {
     this.router.events.subscribe((event) => {
       if (event instanceof NavigationEnd) {
@@ -60,27 +62,30 @@ 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');
+      .then(() => {
+        this.toast.success({detail : 'Page unlocked successfully'});
+        console.log('Password updated successfully');
         })
         .catch((error) => {
+          this.toast.error({detail : 'Error unlocking page'});
           console.error('Error updating password:', error);
         });
     } else {
+      this.toast.error({detail : 'Error unlocking page'});
       console.error('Route ID is null or undefined');
     }
   }
@@ -135,9 +140,11 @@ export class NavigationComponent {
       // Update the password in the database
       update(ref(db, routeID), dataToUpdate)
         .then(() => {
+          this.toast.success({detail : 'Password updated successfully'});
           console.log('Password updated successfully');
         })
         .catch((error) => {
+          this.toast.error({detail : 'Error updating password'});
           console.error('Error updating password:', error);
         });
     } else {

src/index.html

@@ -9,6 +9,7 @@
   <link rel="preconnect" href="https://fonts.gstatic.com">
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 </head>
 <body class="mat-typography">
   <app-root></app-root>