warn modal if not signed in on need page

2 files changed, 14 insertions, 2 deletions

diff --git a/ufund-ui/src/app/components/need-page/need-page.component.html b/ufund-ui/src/app/components/need-page/need-page.component.html
index 2629346..b344280 100644
--- a/ufund-ui/src/app/components/need-page/need-page.component.html
+++ b/ufund-ui/src/app/components/need-page/need-page.component.html
@@ -1,5 +1,13 @@
-<div id="box">
+<ng-template #warn>
+    <div *ngIf="!this.warned">
+        <h1>Not Logged in!</h1>
+        <p>To contribute please log in :</p> <button (click) = "modalService.hideModal(); warned = true"> Close</button>
+    </div>
+</ng-template>
+
+<div id="box" (mouseenter)="!warned && (!usersService.isHelper() && !usersService.isManager()) ? modalService.showModal(warn) : null">
     @if (need) {
+        
         <img *ngIf="need.image" alt="Need image" class="need-image" [src]="need.image"/>
         <h1>{{need.name}}</h1>
         <span class="needType">{{need.type}} GOAL</span>
diff --git a/ufund-ui/src/app/components/need-page/need-page.component.ts b/ufund-ui/src/app/components/need-page/need-page.component.ts
index 17e330c..d4bd683 100644
--- a/ufund-ui/src/app/components/need-page/need-page.component.ts
+++ b/ufund-ui/src/app/components/need-page/need-page.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, Input, OnInit, ViewChild, TemplateRef} from '@angular/core';
 import {GoalType, Need} from '../../models/Need';
 import {ActivatedRoute, Router} from "@angular/router";
 import {CupboardService} from "../../services/cupboard.service";
@@ -14,7 +14,9 @@ import {ModalService} from '../../services/modal.service';
     templateUrl: './need-page.component.html',
     styleUrl: './need-page.component.css'
 })
+
 export class NeedPageComponent implements OnInit {
+   
     constructor(
         private route: ActivatedRoute,
         private cupboardService: CupboardService,
@@ -26,6 +28,8 @@ export class NeedPageComponent implements OnInit {
     ) {}
 
     @Input() need!: Need;
+    warned: boolean = false;
+    
 
     ngOnInit(): void {
         const id = Number(this.route.snapshot.paramMap.get('id'));