Merge pull request #32 from RIT-SWEN-261-02/call-to-action

Call to action when not signed in on need page

3 files changed, 34 insertions, 2 deletions

diff --git a/ufund-ui/src/app/components/need-page/need-page.component.css b/ufund-ui/src/app/components/need-page/need-page.component.css
index 7f357db..83aeb5c 100644
--- a/ufund-ui/src/app/components/need-page/need-page.component.css
+++ b/ufund-ui/src/app/components/need-page/need-page.component.css
@@ -70,3 +70,18 @@
 /*    padding: 20px;*/
 /*    box-shadow: 0 0 100px black;*/
 /*}*/
+
+.accountWarn {
+    div {
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
+    }
+
+    background-color: var(--tertiary-color);
+    border-radius: 10px;
+    padding: 15px;
+    border-color: var(--secondary-color);
+    border-width: 1px;
+    border-style: solid;
+}
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 8263c04..1ef4598 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,17 @@
-<div id="box">
+<ng-template #warn>
+    <div *ngIf="!this.warned" class="accountWarn">
+        <h1>Not Logged in!</h1>
+        <p>To contribute to needs you must be logged in!</p>
+        <div>
+            <button (click)="modalService.hideModal(); this.router.navigate(['/login'], {queryParams: {redir: this.router.url}});">Log In</button>
+            <button (click) = "modalService.hideModal(); warned = true">Continue Anyway</button>
+        </div>
+    </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..67dae83 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
@@ -14,18 +14,21 @@ 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,
         private authService: AuthService,
         protected usersService: UsersService,
         private toastService: ToastsService,
-        private router: Router,
+        protected router: Router,
         protected modalService: ModalService
     ) {}
 
     @Input() need!: Need;
+    warned: boolean = false;
 
     ngOnInit(): void {
         const id = Number(this.route.snapshot.paramMap.get('id'));
@@ -44,6 +47,8 @@ export class NeedPageComponent implements OnInit {
                         return of();
                     }))
                     .subscribe(() => {
+                        let action = {label: "View Basket", onAction: () => this.router.navigate(['/basket'])}
+                        this.toastService.sendToast(ToastType.INFO, `"${need.name}" Added to basket`, action)
                         this.usersService.refreshBasket();
                     });
             } else {