Make login popup look better, add missing toast

3 files changed, 28 insertions, 9 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 8588852..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,15 +1,17 @@
 <ng-template #warn>
-    <div *ngIf="!this.warned">
+    <div *ngIf="!this.warned" class="accountWarn">
         <h1>Not Logged in!</h1>
-        <p>To contribute please <a routerLink="/login" (click) = "modalService.hideModal()">log in</a></p> 
-        <p>You can still view needs signed out! </p>
-        <button (click) = "modalService.hideModal(); warned = true"> Continue</button>
+        <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 8c4a513..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
@@ -1,4 +1,4 @@
-import {Component, Input, OnInit, ViewChild, TemplateRef} from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
 import {GoalType, Need} from '../../models/Need';
 import {ActivatedRoute, Router} from "@angular/router";
 import {CupboardService} from "../../services/cupboard.service";
@@ -16,20 +16,20 @@ import {ModalService} from '../../services/modal.service';
 })
 
 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'));
         this.cupboardService.getNeed(id).subscribe(n => this.need = n);
@@ -47,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 {