From 8ec987f46b4ef3ff1ce23d9942662a74e162689d Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Thu, 20 Mar 2025 09:58:32 -0400
Subject: need-list search embedded in normal display with better feedback

---
 .../components/need-list/need-list.component.css   |  2 +-
 .../components/need-list/need-list.component.html  | 23 ++++-----
 .../components/need-list/need-list.component.ts    | 60 +++++++++++-----------
 3 files changed, 41 insertions(+), 44 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index bbc3f2c..88bdfbe 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -15,7 +15,7 @@ li, div {
 
 }
 
-#search-form {
+#search-container {
     background-color: #d9d9d9;
     padding: 10px 20px 20px 20px;
     border: 2px solid #000;
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 36c12d0..504deb9 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -1,25 +1,20 @@
 <h1>Needs List</h1>
 <input id="search-button" type="button" value="Search" (click)="open()">
-<div id="search-form">
-    <form #searchForm="ngForm">
+<div id="search-container">
+    <form id="search-form" #searchForm="ngForm">
         <label>Search:</label><br>
         <input type="text" name="search" (input)="search(searchForm.value)" ngModel>
-        <input type="button" value="Clear" (click)="searchForm.reset()"> <br>
+        <input type="reset" value="Clear" (click)="search(null)"> <br>
     </form>
     <button (click)="close()">Close</button>
-    <div>
-        <h2 id="search-status">Search Results:</h2>
-        <div *ngFor="let need of searchResults">
-            <a routerLink="/need/{{need.id}}">
-                {{need.name}}
-            </a>
-            <button (click)="delete(need.id)" *ngIf="isManager()">Delete</button>
-            <!-- <button (click)="add(need)" *ngIf="isHelper()">Add To Basket</button> -->
-        </div>
-    </div>
 </div>
 
-<li *ngFor="let need of needs">
+<!-- display for when results are present and filtered-->
+<h2 *ngIf="searchResults.length < needs.length && searchResults.length != 0"> Search Results({{needs.length - searchResults.length}} needs filtered): </h2>
+<h2 *ngIf="searchResults.length == needs.length"> All Needs </h2>
+<h2 *ngIf="searchResults.length == 0"> No Results Found </h2>
+
+<li *ngFor="let need of searchResults">
     <a routerLink="/need/{{need.id}}">
         {{need.name}}
     </a>
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 25f05d6..f5d7855 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { NgForm } from '@angular/forms';
 import {Need} from '../../models/Need';
 import {CupboardService} from '../../services/cupboard.service';
 import { UsersService } from '../../services/users.service';
@@ -19,12 +20,16 @@ export class NeedListComponent {
   ) {}
 
     refresh() {
-        this.cupboardService.getNeeds().subscribe(n => this.needs = n)
+        this.cupboardService.getNeeds().subscribe(n => {
+          this.needs = n;
+          this.searchResults = this.needs;
+        });
+        
+        console.log(this.searchResults);
     }
 
   ngOnInit(): void {
     this.refresh()
-   
      this.close();
   }
 
@@ -42,20 +47,13 @@ export class NeedListComponent {
     }
   }
 
-  private updateSearchStatus(text: string) {
-    let element = document.getElementById('search-status');
-    if (element) {
-      element.innerHTML = text;
-    }
-  }
-
   open() {
     this.hideElement(document.getElementById('search-button'));
-    this.showElement(document.getElementById('search-form'));
+    this.showElement(document.getElementById('search-container'));
   }
 
   close() {
-    this.hideElement(document.getElementById('search-form'));
+    this.hideElement(document.getElementById('search-container'));
     this.showElement(document.getElementById('search-button'));
     this.hideElement(document.getElementById('search-status'));
   }
@@ -69,24 +67,28 @@ export class NeedListComponent {
     if (this.searchDelay) {
       clearTimeout(this.searchDelay);
     }
+    if (form) {
+      this.searchDelay = setTimeout(() => {
+        
+        if (form) {
+          const currentSearchValue = form.search; //latest value of the search
+          this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => {
+            this.searchResults = n;
+            console.log(currentSearchValue, this.searchResults);
+            this.showElement(document.getElementById('search-results'));
+            this.showElement(document.getElementById('search-status'));
+            });
+          }
+        }, 250);
+      } else {
+        //user has cleared the search bar, we can skip the timeout for a 1/4 second faster response
+        //clear timeout to stop pending search
+        clearTimeout(this.searchDelay);
+        this.searchResults = this.needs;
+      }
+      
 
-    this.searchDelay = setTimeout(() => {
-      const currentSearchValue = form.search; //latest value of the search
-      this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => {
-        this.searchResults = n;
-        console.log(currentSearchValue, this.searchResults);
-        this.showElement(document.getElementById('search-results'));
-        this.showElement(document.getElementById('search-status'));
-        if (this.searchResults.length === this.needs.length) {
-          this.updateSearchStatus("Please refine your search");
-          this.searchResults = [];
-        } else if (this.searchResults.length === 0) {
-          this.updateSearchStatus("No results found");
-        } else {
-          this.updateSearchStatus("Search results:");
-        }
-      });
-    }, 250);
+     
   }
 
   delete(id : number) {
@@ -127,6 +129,6 @@ export class NeedListComponent {
   }
 
   back() {
-    this.searchResults = [];
+    this.searchResults = this.needs;
   }
 }
-- 
cgit v1.2.3


From 237b9197c08c46a11fe45347e2d41428a558f75b Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Thu, 20 Mar 2025 10:18:43 -0400
Subject: component style refactor for simpler display

---
 .../app/components/cupboard/cupboard.component.css |  20 +++-
 .../components/cupboard/cupboard.component.html    | 101 +++++++++++----------
 .../app/components/cupboard/cupboard.component.ts  |   2 -
 3 files changed, 69 insertions(+), 54 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.css b/ufund-ui/src/app/components/cupboard/cupboard.component.css
index fe4971a..4c6ac4b 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.css
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.css
@@ -1,18 +1,30 @@
 :host {
-    display: block;
+    display: flex;
+      justify-content: left;
     border: 2px solid #000;
     border-radius: 5px;
     padding: 10px 20px;
 }
+#menu {
+      display: flex;
+      justify-content: space-between;
+      margin: 10px;
+      * {
+         border: 3px solid #000;
+         
+         border-top-left-radius: 5px;
+         border-top-right-radius: 5px;
+         margin-right: 5px;
+         border-bottom: 0px;
+      }
+}
 
-#menu, #create-form, #delete-form, #update-form {
+#create-form, #delete-form, #update-form {
    background-color: #d9d9d9;
    padding: 10px 20px 20px 20px;
    border: 2px solid #000;
    border-radius: 5px;  
-   width: 20%;
    visibility: visible;
-
 }
 
 #create-button {
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index 0d64475..4577844 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -1,50 +1,55 @@
-<h1> Cupboard </h1>
-<h2 *ngIf="isManager()" > Admin View </h2>
-<div id="menu" *ngIf="isManager()">
-    <button (click)="opencreate()">Create new Need</button>
-    <button (click)="openupdate()">Update existing Need</button>
+<div>
+    <h1> Cupboard </h1>
+    <app-need-list #needList></app-need-list>
 </div>
-<div id="create-form">
-    <h1> Create a new need </h1>
-    <form #cupboardForm="ngForm" (ngSubmit)="submit(cupboardForm.value)">
-        <label>Name:</label><br>
-        <input type="text" name="name" ngModel><br>
-        <label>Max Goal:</label><br>
-        <input type="number" name="maxGoal" ngModel><br>
-        <label>Type</label><br>
-        <input type="radio" name="type" value="MONETARY" ngModel>
-        <label>Monetary</label><br>
-        <input type="radio" name="type" value="PHYSICAL" ngModel>
-        <label>Physical</label><br>
-        <input type="submit" value="Submit">
-    </form>
-    <button (click)="back()">Close</button>
-    <span *ngIf="statusText">‼️{{statusText | async}}</span>
-
+<div *ngIf="isManager()" >
+    <h2 > Admin View </h2>
+    <div id="menu">
+        <button (click)="opencreate()">Create new Need</button>
+        <button (click)="openupdate()">Update existing Need</button>
+    </div>
+    <div id="create-form">
+        <h1> Create a new need </h1>
+        <form #cupboardForm="ngForm" (ngSubmit)="submit(cupboardForm.value)">
+            <label>Name:</label><br>
+            <input type="text" name="name" ngModel><br>
+            <label>Max Goal:</label><br>
+            <input type="number" name="maxGoal" ngModel><br>
+            <label>Type</label><br>
+            <input type="radio" name="type" value="MONETARY" ngModel>
+            <label>Monetary</label><br>
+            <input type="radio" name="type" value="PHYSICAL" ngModel>
+            <label>Physical</label><br>
+            <input type="submit" value="Submit">
+        </form>
+        <button (click)="back()">Close</button>
+        <span *ngIf="statusText">‼️{{statusText | async}}</span>
+    
+    </div>
+    <div id="update-form">
+        <h1> Update a need </h1>
+        <label>Needs:</label><br>
+        <form #updateForm="ngForm" (ngSubmit)="update(updateForm.value)">
+            <div *ngFor="let need of needs">
+    
+                <input type="radio" name="id" [value]=need.id [(ngModel)]="selectedNeedId" (change)="populateForm(need)">
+                <label name="template">{{need.name}}</label><br>
+            </div>
+            <label>Name:</label><br>
+            <input type="text" name="name" [(ngModel)]="selectedNeed.name"><br>
+            <label>Max Goal:</label><br>
+            <input type="number" name="maxGoal" [(ngModel)]="selectedNeed.maxGoal"><br>
+            <label>Type</label><br>
+            <input type="radio" name="type" value="MONETARY" [(ngModel)]="selectedNeed.type">
+            <label>Monetary</label><br>
+            <input type="radio" name="type" value="PHYSICAL" [(ngModel)]="selectedNeed.type">
+            <label>Physical</label><br>
+            <input type="submit" value="Submit">
+        </form>
+        <button (click)="back()">Close</button>
+        <span *ngIf="statusText">{{statusText | async}}</span>
+    
+    </div>
+    <hr>
+    
 </div>
-<div id="update-form">
-    <h1> Update a need </h1>
-    <label>Needs:</label><br>
-    <form #updateForm="ngForm" (ngSubmit)="update(updateForm.value)">
-        <div *ngFor="let need of needs">
-
-            <input type="radio" name="id" [value]=need.id [(ngModel)]="selectedNeedId" (change)="populateForm(need)">
-            <label name="template">{{need.name}}</label><br>
-        </div>
-        <label>Name:</label><br>
-        <input type="text" name="name" [(ngModel)]="selectedNeed.name"><br>
-        <label>Max Goal:</label><br>
-        <input type="number" name="maxGoal" [(ngModel)]="selectedNeed.maxGoal"><br>
-        <label>Type</label><br>
-        <input type="radio" name="type" value="MONETARY" [(ngModel)]="selectedNeed.type">
-        <label>Monetary</label><br>
-        <input type="radio" name="type" value="PHYSICAL" [(ngModel)]="selectedNeed.type">
-        <label>Physical</label><br>
-        <input type="submit" value="Submit">
-    </form>
-    <button (click)="back()">Close</button>
-    <span *ngIf="statusText">{{statusText | async}}</span>
-
-</div>
-<hr>
-<app-need-list #needList></app-need-list>
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index 24b3e2d..f8023c3 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -55,7 +55,6 @@ export class CupboardComponent implements OnInit {
             element.style.position = 'relative';
         }
     }
-
     openmenu() {
         const menuElement = document.getElementById('menu');
         this.showElement(menuElement);
@@ -79,7 +78,6 @@ export class CupboardComponent implements OnInit {
     close() {
         this.hideElement(document.getElementById('create-form'));
         this.hideElement(document.getElementById('destroy-form'));
-        this.hideElement(document.getElementById('menu'));
         this.hideElement(document.getElementById('update-form'));
     }
 
-- 
cgit v1.2.3


From bab829a60dc243b5987873ea0f0114b032643995 Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Thu, 20 Mar 2025 10:18:55 -0400
Subject: need list size fix

---
 ufund-ui/src/app/components/need-list/need-list.component.css | 1 -
 1 file changed, 1 deletion(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index 88bdfbe..64988d1 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -2,7 +2,6 @@
     list-style-type:circle;
     border: 2px solid #000;
     display: block;
-    width: 30%;
     border-radius: 5px;
     
 }
-- 
cgit v1.2.3


From d386b35bf24444240b0d670674c3e75ea5d8b3ce Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Fri, 21 Mar 2025 10:07:45 -0400
Subject: delete icon in need list

---
 ufund-ui/src/app/components/need-list/need-list.component.css | 11 ++++++++++-
 .../src/app/components/need-list/need-list.component.html     |  7 ++++---
 2 files changed, 14 insertions(+), 4 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index 64988d1..f8948ee 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -3,7 +3,6 @@
     border: 2px solid #000;
     display: block;
     border-radius: 5px;
-    
 }
 
 li, div {
@@ -11,7 +10,17 @@ li, div {
     border-radius: 5px;
     padding: 5px;
     margin: 5px;
+}
+
+li {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
 
+.icon {
+    width: 15px;
+    margin: 3px -3px -1px -3px;
 }
 
 #search-container {
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 504deb9..9f22633 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -1,12 +1,11 @@
 <h1>Needs List</h1>
-<input id="search-button" type="button" value="Search" (click)="open()">
 <div id="search-container">
     <form id="search-form" #searchForm="ngForm">
         <label>Search:</label><br>
         <input type="text" name="search" (input)="search(searchForm.value)" ngModel>
         <input type="reset" value="Clear" (click)="search(null)"> <br>
     </form>
-    <button (click)="close()">Close</button>
+    <!--<button (click)="close()">Close</button>-->
 </div>
 
 <!-- display for when results are present and filtered-->
@@ -18,6 +17,8 @@
     <a routerLink="/need/{{need.id}}">
         {{need.name}}
     </a>
-    <button (click)="delete(need.id)" *ngIf="isManager()">Delete</button>
+    <button (click)="delete(need.id)" *ngIf="isManager()"> 
+        <img class="icon" src="/delete.png" alt="Delete">
+    </button>
     <button (click)="add(need)" *ngIf="isHelper()">Add To Basket</button>
 </li>
-- 
cgit v1.2.3


From 0ba69e502b89ed2d8fe51b3b8b40eb8fba5830e1 Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Fri, 21 Mar 2025 23:11:37 -0400
Subject: start making some css

---
 ufund-ui/src/app/app.component.css  | 19 +++++++++++++++++++
 ufund-ui/src/app/app.component.html | 19 +++++++++++++++----
 ufund-ui/src/styles.css             | 12 ++++++++++++
 3 files changed, 46 insertions(+), 4 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css
index e69de29..b2dfb87 100644
--- a/ufund-ui/src/app/app.component.css
+++ b/ufund-ui/src/app/app.component.css
@@ -0,0 +1,19 @@
+#header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    border-bottom: black solid 1px;
+    padding: 0 10px;
+    background-color: #d9d9d9;
+
+    h1 {
+        padding: 0;
+        margin: 0;
+    }
+
+    div {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+    }
+}
diff --git a/ufund-ui/src/app/app.component.html b/ufund-ui/src/app/app.component.html
index a490237..3058117 100644
--- a/ufund-ui/src/app/app.component.html
+++ b/ufund-ui/src/app/app.component.html
@@ -1,6 +1,17 @@
-
-<h1>jelly solutions</h1>
-<span>{{currentUser$ | async}}</span> <br> <button *ngIf="currentUser$.value != 'Logged out.'" (click)="reloadPage()"> Log Out</button>
-<hr>
+<div id="header">
+    <span>
+        <a routerLink="/">
+            <h1>Jelly Solutions</h1>
+        </a>
+    </span>
+    <div>
+        <a routerLink="/dashboard">Dashboard</a>
+        <a routerLink="/cupboard">Cupboard</a>
+        <a routerLink="/basket">Basket</a>
+        <span>{{currentUser$ | async}}</span>
+        <button *ngIf="currentUser$.value != 'Logged out.'" onclick="location.href='/';"> Log Out</button>
+        <button *ngIf="currentUser$.value == 'Logged out.'" routerLink="/login"> Log In</button>
+    </div>
+</div>
 
 <router-outlet />
diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css
index 90d4ee0..471f272 100644
--- a/ufund-ui/src/styles.css
+++ b/ufund-ui/src/styles.css
@@ -1 +1,13 @@
 /* You can add global styles to this file, and also import other style files */
+
+* {
+    box-sizing: border-box;
+}
+
+html, body {
+    margin: 0;
+}
+
+body {
+    font-family: sans-serif;
+}
-- 
cgit v1.2.3


From 0be2b5868bdda04146a22ec81596dbbb81922360 Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Sat, 22 Mar 2025 00:04:40 -0400
Subject: improve login page

---
 ufund-ui/src/app/app.component.css                 |  7 ++++++-
 .../src/app/components/login/login.component.css   | 22 +++++++++++++++++-----
 .../src/app/components/login/login.component.html  | 16 +++++++++-------
 ufund-ui/src/styles.css                            |  9 +++++++++
 4 files changed, 41 insertions(+), 13 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css
index b2dfb87..63608c0 100644
--- a/ufund-ui/src/app/app.component.css
+++ b/ufund-ui/src/app/app.component.css
@@ -1,10 +1,15 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
 #header {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     border-bottom: black solid 1px;
     padding: 0 10px;
-    background-color: #d9d9d9;
 
     h1 {
         padding: 0;
diff --git a/ufund-ui/src/app/components/login/login.component.css b/ufund-ui/src/app/components/login/login.component.css
index 435cc87..cae0992 100644
--- a/ufund-ui/src/app/components/login/login.component.css
+++ b/ufund-ui/src/app/components/login/login.component.css
@@ -1,8 +1,20 @@
-:host, .border {
-  display: flex;
-  flex-direction: column;
-    max-width: 300px;
-    gap: 5px
+:host {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    background-image: url("https://www.fineshare.com/background/jellyfish-under-fluorescent-illumination.jpg");
+}
+
+#box {
+    display: flex;
+    flex-direction: column;
+    max-width: 330px;
+    gap: 5px;
+    backdrop-filter: blur(10px);
+    background-color: rgba(0, 0, 0, 0.1);
+    padding: 30px;
+    color: white;
 }
 
 .border {
diff --git a/ufund-ui/src/app/components/login/login.component.html b/ufund-ui/src/app/components/login/login.component.html
index 2cdb6d0..aff108f 100644
--- a/ufund-ui/src/app/components/login/login.component.html
+++ b/ufund-ui/src/app/components/login/login.component.html
@@ -1,7 +1,9 @@
-<span *ngIf="next" style="color: red">You must be logged in to view this page</span>
-<p>Login:</p>
-<input placeholder="Username" type="text" #username>
-<input placeholder="Password" type="password" #password>
-<button type="button" (click)="login(username.value, password.value)">Login</button>
-<button type="button" (click)="signup(username.value, password.value)">Create Account</button>
-<span *ngIf="statusText">{{statusText | async}}</span>
+<div id="box">
+    <span *ngIf="next" style="color: red">You must be logged in to view this page</span>
+    <p>Login:</p>
+    <input placeholder="Username" type="text" #username>
+    <input placeholder="Password" type="password" #password>
+    <button type="button" (click)="login(username.value, password.value)">Login</button>
+    <button type="button" (click)="signup(username.value, password.value)">Create Account</button>
+    <span *ngIf="statusText">{{statusText | async}}</span>
+</div>
diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css
index 471f272..fdf67c7 100644
--- a/ufund-ui/src/styles.css
+++ b/ufund-ui/src/styles.css
@@ -6,8 +6,17 @@
 
 html, body {
     margin: 0;
+    height: 100%;
 }
 
 body {
     font-family: sans-serif;
 }
+
+input {
+    font-size: 14pt;
+}
+
+button, .button {
+    font-size: 14pt;
+}
-- 
cgit v1.2.3


From 69e79cc423110ea7df3d960f95e612934d256dd8 Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Sat, 22 Mar 2025 00:24:09 -0400
Subject: Create basic home page

---
 ufund-ui/src/app/app-routing.module.ts                       | 12 ++++++------
 .../src/app/components/home-page/home-page.component.css     |  7 +++++++
 .../src/app/components/home-page/home-page.component.html    |  5 ++---
 .../src/app/components/need-page/need-page.component.html    |  4 ++--
 4 files changed, 17 insertions(+), 11 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/app-routing.module.ts b/ufund-ui/src/app/app-routing.module.ts
index 4b76654..c83db8a 100644
--- a/ufund-ui/src/app/app-routing.module.ts
+++ b/ufund-ui/src/app/app-routing.module.ts
@@ -8,12 +8,12 @@ import {FundingBasketComponent} from './components/funding-basket/funding-basket
 import {NeedPageComponent} from './components/need-page/need-page.component';
 
 const routes: Routes = [
-    {path: '', component: HomePageComponent},
-    {path: 'login', component: LoginComponent},
-    {path: 'cupboard', component: CupboardComponent},
-    {path: 'dashboard', component: DashboardComponent},
-    {path: 'basket', component: FundingBasketComponent},
-    {path: 'need/:id', component: NeedPageComponent}
+    { path: '',          component: HomePageComponent,      title: "Home | JS"      },
+    { path: 'login',     component: LoginComponent,         title: "Login | JS"     },
+    { path: 'cupboard',  component: CupboardComponent,      title: "Cupboard | JS"  },
+    { path: 'dashboard', component: DashboardComponent,     title: "Dashboard | JS" },
+    { path: 'basket',    component: FundingBasketComponent, title: "Basket | JS"    },
+    { path: 'need/:id',  component: NeedPageComponent,      title: "Need | JS"      }
 ];
 
 @NgModule({
diff --git a/ufund-ui/src/app/components/home-page/home-page.component.css b/ufund-ui/src/app/components/home-page/home-page.component.css
index e69de29..5f65225 100644
--- a/ufund-ui/src/app/components/home-page/home-page.component.css
+++ b/ufund-ui/src/app/components/home-page/home-page.component.css
@@ -0,0 +1,7 @@
+:host {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
diff --git a/ufund-ui/src/app/components/home-page/home-page.component.html b/ufund-ui/src/app/components/home-page/home-page.component.html
index d41e670..b2eed0b 100644
--- a/ufund-ui/src/app/components/home-page/home-page.component.html
+++ b/ufund-ui/src/app/components/home-page/home-page.component.html
@@ -1,3 +1,2 @@
-<a routerLink="/login">
-    Login/Sign Up
-</a>
\ No newline at end of file
+<h1>Helping fund coral reef and marine life conservation</h1>
+<button routerLink="/cupboard">View needs</button>
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 90fd459..b2579c9 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,4 +1,4 @@
-<button routerLink="/dashboard">Back to dashboard</button>
+<button routerLink="/cupboard">Back to cupboard</button>
 <h1>Viewing Need: {{need?.name}}</h1>
 <a>internal id: {{need?.id}}</a>
 <div style="display: flex; column-gap: 6px;">
@@ -19,4 +19,4 @@
 
 <p>Goal: {{need?.maxGoal}}</p>
 <p>Current: {{need?.current}}</p>
-<p>This goal is <strong>{{(((need?.current ?? 0)*100) / (need?.maxGoal ?? 0)).toFixed(0)}}%</strong> complete!</p>
\ No newline at end of file
+<p>This goal is <strong>{{(((need?.current ?? 0)*100) / (need?.maxGoal ?? 0)).toFixed(0)}}%</strong> complete!</p>
-- 
cgit v1.2.3


From 2b67bd14828c8c0bffe461a66542a2dba6c19f93 Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Sat, 22 Mar 2025 11:21:30 -0400
Subject: API creation bug fix- the max goal would not be casted properly

---
 ufund-ui/src/app/components/cupboard/cupboard.component.css   | 9 ++++++---
 ufund-ui/src/app/components/need-list/need-list.component.css | 1 -
 2 files changed, 6 insertions(+), 4 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.css b/ufund-ui/src/app/components/cupboard/cupboard.component.css
index 4c6ac4b..434b136 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.css
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.css
@@ -1,17 +1,21 @@
 :host {
     display: flex;
-      justify-content: left;
+    justify-content: space-evenly;
     border: 2px solid #000;
     border-radius: 5px;
     padding: 10px 20px;
+    > div {
+      width: 40%;
+    }
 }
+
+
 #menu {
       display: flex;
       justify-content: space-between;
       margin: 10px;
       * {
          border: 3px solid #000;
-         
          border-top-left-radius: 5px;
          border-top-right-radius: 5px;
          margin-right: 5px;
@@ -29,5 +33,4 @@
 
 #create-button {
    padding: 10px 20px;
-   
 }
\ No newline at end of file
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index f8948ee..bf7b982 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -4,7 +4,6 @@
     display: block;
     border-radius: 5px;
 }
-
 li, div {
     border: 2px solid #000;
     border-radius: 5px;
-- 
cgit v1.2.3


From 2abd4b4ba9171821ac545f8dcb67be1e7d722e01 Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Sat, 22 Mar 2025 11:58:39 -0400
Subject: replaced unneccicary methods for form selection with ngIf

---
 ufund-ui/src/app/components/cupboard/cupboard.component.css  |  2 +-
 ufund-ui/src/app/components/cupboard/cupboard.component.html | 12 +++++-------
 2 files changed, 6 insertions(+), 8 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.css b/ufund-ui/src/app/components/cupboard/cupboard.component.css
index 434b136..6c2e5c6 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.css
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.css
@@ -12,7 +12,7 @@
 
 #menu {
       display: flex;
-      justify-content: space-between;
+      
       margin: 10px;
       * {
          border: 3px solid #000;
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index 4577844..41bb4a7 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -5,10 +5,10 @@
 <div *ngIf="isManager()" >
     <h2 > Admin View </h2>
     <div id="menu">
-        <button (click)="opencreate()">Create new Need</button>
-        <button (click)="openupdate()">Update existing Need</button>
+        <button (click)="selectForm('create')">Create new Need</button>
+        <button (click)="selectForm('update')">Update existing Need</button>
     </div>
-    <div id="create-form">
+    <div id="create-form" *ngIf="selectedForm === 'create'">
         <h1> Create a new need </h1>
         <form #cupboardForm="ngForm" (ngSubmit)="submit(cupboardForm.value)">
             <label>Name:</label><br>
@@ -22,11 +22,10 @@
             <label>Physical</label><br>
             <input type="submit" value="Submit">
         </form>
-        <button (click)="back()">Close</button>
-        <span *ngIf="statusText">‼️{{statusText | async}}</span>
+        <span *ngIf="statusText">{{statusText | async}}</span>
     
     </div>
-    <div id="update-form">
+    <div id="update-form" *ngIf="selectedForm === 'update'">
         <h1> Update a need </h1>
         <label>Needs:</label><br>
         <form #updateForm="ngForm" (ngSubmit)="update(updateForm.value)">
@@ -46,7 +45,6 @@
             <label>Physical</label><br>
             <input type="submit" value="Submit">
         </form>
-        <button (click)="back()">Close</button>
         <span *ngIf="statusText">{{statusText | async}}</span>
     
     </div>
-- 
cgit v1.2.3


From e9564ba2514f32c63d2ce4ecfc9eeb9f3269f3dd Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Sat, 22 Mar 2025 12:14:00 -0400
Subject: [ngClass] tab styling

---
 .../app/components/cupboard/cupboard.component.css | 21 ++++++----
 .../components/cupboard/cupboard.component.html    |  4 +-
 .../app/components/cupboard/cupboard.component.ts  | 46 ++--------------------
 3 files changed, 20 insertions(+), 51 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.css b/ufund-ui/src/app/components/cupboard/cupboard.component.css
index 6c2e5c6..6e70951 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.css
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.css
@@ -14,13 +14,20 @@
       display: flex;
       
       margin: 10px;
-      * {
-         border: 3px solid #000;
-         border-top-left-radius: 5px;
-         border-top-right-radius: 5px;
-         margin-right: 5px;
-         border-bottom: 0px;
-      }
+      
+}
+
+.tab, .selected-tab {
+   background-color: lightgray;
+   border: 3px solid #000;
+   border-top-left-radius: 5px;
+   border-top-right-radius: 5px;
+   margin-right: 5px;
+   border-bottom: 0px;
+}
+
+.selected-tab {
+   background-color: white;
 }
 
 #create-form, #delete-form, #update-form {
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index 41bb4a7..9b74b2a 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -5,8 +5,8 @@
 <div *ngIf="isManager()" >
     <h2 > Admin View </h2>
     <div id="menu">
-        <button (click)="selectForm('create')">Create new Need</button>
-        <button (click)="selectForm('update')">Update existing Need</button>
+        <button [ngClass]="selectedForm === 'create' ? 'selected-tab' : 'tab'" (click)="selectForm('create')">Create new Need</button>
+        <button [ngClass]="selectedForm === 'update' ? 'selected-tab' : 'tab'" (click)="selectForm('update')">Update existing Need</button>
     </div>
     <div id="create-form" *ngIf="selectedForm === 'create'">
         <h1> Create a new need </h1>
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index f8023c3..646c4ff 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -16,7 +16,7 @@ import { NeedListComponent } from '../need-list/need-list.component';
 export class CupboardComponent implements OnInit {
 
     protected statusText = new BehaviorSubject("")
-
+    selectedForm = "create"
     needs: any;
     @ViewChild("needList") needList?: NeedListComponent
 
@@ -24,9 +24,6 @@ export class CupboardComponent implements OnInit {
 
     ngOnInit(): void {
         this.cupboardService.getNeeds().subscribe(n => this.needs = n);
-        this.close();
-        this.openmenu();
-
         if (this.isManager()) {
             console.log("Admin view of Cupboard");
         } else {
@@ -41,44 +38,9 @@ export class CupboardComponent implements OnInit {
         type: ''
     };
     selectedNeedId: number | null = null;
-
-    private hideElement(element: any) {
-        if (element) {
-            element.style.visibility = 'hidden';
-            element.style.position = 'absolute';
-        }
-    }
-
-    private showElement(element: any) {
-        if (element) {
-            element.style.visibility = 'visible';
-            element.style.position = 'relative';
-        }
-    }
-    openmenu() {
-        const menuElement = document.getElementById('menu');
-        this.showElement(menuElement);
-    }
-
-    opencreate() {
-        this.close();
-        this.showElement(document.getElementById('create-form'));
-    }
-
-    openupdate() {
-        this.close();
-        this.showElement(document.getElementById('update-form'));
-    }
-
-    back() {
-        this.close();
-        this.openmenu();
-    }
-
-    close() {
-        this.hideElement(document.getElementById('create-form'));
-        this.hideElement(document.getElementById('destroy-form'));
-        this.hideElement(document.getElementById('update-form'));
+    
+    selectForm(name: string) {
+        this.selectedForm = name;
     }
 
     populateForm(need: any): void {
-- 
cgit v1.2.3


From d8b9c0da32383630f0831fdf6a7f13c96174ee4c Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Sat, 22 Mar 2025 12:17:50 -0400
Subject: removing unneccicary functions for element visiblity in need list

---
 .../components/need-list/need-list.component.css   |  3 +--
 .../components/need-list/need-list.component.ts    | 29 ----------------------
 2 files changed, 1 insertion(+), 31 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index bf7b982..29a9626 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -26,6 +26,5 @@ li {
     background-color: #d9d9d9;
     padding: 10px 20px 20px 20px;
     border: 2px solid #000;
-    border-radius: 5px;  
-    visibility: visible;
+    border-radius: 5px;
  }
\ No newline at end of file
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index f5d7855..3f77df4 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -24,38 +24,11 @@ export class NeedListComponent {
           this.needs = n;
           this.searchResults = this.needs;
         });
-        
         console.log(this.searchResults);
     }
 
   ngOnInit(): void {
     this.refresh()
-     this.close();
-  }
-
-  private showElement(element: any) {
-    if (element){
-      element.style.visibility = 'visible';
-      element.style.position = 'relative';
-    }
-  }
-
-  private hideElement(element: any) {
-    if (element){
-      element.style.visibility = 'hidden';
-      element.style.position = 'absolute';
-    }
-  }
-
-  open() {
-    this.hideElement(document.getElementById('search-button'));
-    this.showElement(document.getElementById('search-container'));
-  }
-
-  close() {
-    this.hideElement(document.getElementById('search-container'));
-    this.showElement(document.getElementById('search-button'));
-    this.hideElement(document.getElementById('search-status'));
   }
 
   private searchDelay: any;
@@ -75,8 +48,6 @@ export class NeedListComponent {
           this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => {
             this.searchResults = n;
             console.log(currentSearchValue, this.searchResults);
-            this.showElement(document.getElementById('search-results'));
-            this.showElement(document.getElementById('search-status'));
             });
           }
         }, 250);
-- 
cgit v1.2.3


From 2ae7c1036b7ce398e2b18928215f74d57bb3cec6 Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Sat, 22 Mar 2025 12:28:36 -0400
Subject: search reformatting

---
 ufund-ui/src/app/components/need-list/need-list.component.css  | 1 -
 ufund-ui/src/app/components/need-list/need-list.component.html | 3 +--
 2 files changed, 1 insertion(+), 3 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index 29a9626..2e4a31b 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -24,7 +24,6 @@ li {
 
 #search-container {
     background-color: #d9d9d9;
-    padding: 10px 20px 20px 20px;
     border: 2px solid #000;
     border-radius: 5px;
  }
\ No newline at end of file
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 9f22633..0345519 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -1,8 +1,7 @@
 <h1>Needs List</h1>
 <div id="search-container">
     <form id="search-form" #searchForm="ngForm">
-        <label>Search:</label><br>
-        <input type="text" name="search" (input)="search(searchForm.value)" ngModel>
+        <input type="text" name="search" placeholder="Search in {{needs.length}} needs..." (input)="search(searchForm.value)" ngModel>
         <input type="reset" value="Clear" (click)="search(null)"> <br>
     </form>
     <!--<button (click)="close()">Close</button>-->
-- 
cgit v1.2.3


From b725948521e81965a18991e7dd59a2bc84dbd460 Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Sat, 22 Mar 2025 12:56:28 -0400
Subject: need list uses button instead of link

---
 .../app/components/need-list/need-list.component.css | 15 ++++++++++++---
 .../components/need-list/need-list.component.html    | 20 +++++++++++---------
 2 files changed, 23 insertions(+), 12 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index 2e4a31b..8f017cd 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -1,17 +1,26 @@
 :host {
-    list-style-type:circle;
+    list-style-type: none;
     border: 2px solid #000;
     display: block;
     border-radius: 5px;
 }
-li, div {
+
+div, li > button {
     border: 2px solid #000;
     border-radius: 5px;
     padding: 5px;
     margin: 5px;
 }
 
-li {
+ul {
+    list-style-type: none;
+    padding-inline-start: 0px;
+}
+
+li > button {
+    width: 98%;
+    padding: 1%;
+    margin: 1%;
     display: flex;
     justify-content: space-between;
     align-items: center;
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 0345519..fef22d7 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -12,12 +12,14 @@
 <h2 *ngIf="searchResults.length == needs.length"> All Needs </h2>
 <h2 *ngIf="searchResults.length == 0"> No Results Found </h2>
 
-<li *ngFor="let need of searchResults">
-    <a routerLink="/need/{{need.id}}">
-        {{need.name}}
-    </a>
-    <button (click)="delete(need.id)" *ngIf="isManager()"> 
-        <img class="icon" src="/delete.png" alt="Delete">
-    </button>
-    <button (click)="add(need)" *ngIf="isHelper()">Add To Basket</button>
-</li>
+<ul>
+    <li *ngFor="let need of searchResults">
+        <button [routerLink]="'/need/' + need.id">
+            {{need.name}}
+            <button (click)="delete(need.id)" *ngIf="isManager()"> 
+                <img class="icon" src="/delete.png" alt="Delete">
+            </button>
+            <button (click)="add(need)" *ngIf="isHelper()">Add To Basket</button>
+        </button>
+    </li>
+</ul>
\ No newline at end of file
-- 
cgit v1.2.3


From 381e57d62f01056d823af74d186f6de87df9fcee Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Sat, 22 Mar 2025 16:35:10 -0400
Subject: Dark mode!

---
 ufund-ui/src/app/app.component.css                  |  8 +++++++-
 .../app/components/cupboard/cupboard.component.css  |  8 ++++----
 .../src/app/components/login/login.component.css    |  3 ++-
 .../src/app/components/login/login.component.html   |  2 +-
 .../components/need-list/need-list.component.css    |  8 ++++----
 ufund-ui/src/styles.css                             | 21 +++++++++++++++++++++
 6 files changed, 39 insertions(+), 11 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css
index 63608c0..17bbed7 100644
--- a/ufund-ui/src/app/app.component.css
+++ b/ufund-ui/src/app/app.component.css
@@ -8,12 +8,14 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    border-bottom: black solid 1px;
+    border-bottom: light-dark(#d3d3d3, black) solid 1px;
     padding: 0 10px;
+    background-color: light-dark(#f5f5f5, #2e2e2e);
 
     h1 {
         padding: 0;
         margin: 0;
+
     }
 
     div {
@@ -21,4 +23,8 @@
         align-items: center;
         gap: 10px;
     }
+
+    a {
+        color: light-dark(black, white);
+    }
 }
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.css b/ufund-ui/src/app/components/cupboard/cupboard.component.css
index fe4971a..c8add60 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.css
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.css
@@ -1,6 +1,6 @@
 :host {
     display: block;
-    border: 2px solid #000;
+    /*border: 2px solid #000;*/
     border-radius: 5px;
     padding: 10px 20px;
 }
@@ -9,7 +9,7 @@
    background-color: #d9d9d9;
    padding: 10px 20px 20px 20px;
    border: 2px solid #000;
-   border-radius: 5px;  
+   border-radius: 5px;
    width: 20%;
    visibility: visible;
 
@@ -17,5 +17,5 @@
 
 #create-button {
    padding: 10px 20px;
-   
-}
\ No newline at end of file
+
+}
diff --git a/ufund-ui/src/app/components/login/login.component.css b/ufund-ui/src/app/components/login/login.component.css
index cae0992..c752de3 100644
--- a/ufund-ui/src/app/components/login/login.component.css
+++ b/ufund-ui/src/app/components/login/login.component.css
@@ -10,11 +10,12 @@
     display: flex;
     flex-direction: column;
     max-width: 330px;
-    gap: 5px;
+    gap: 7px;
     backdrop-filter: blur(10px);
     background-color: rgba(0, 0, 0, 0.1);
     padding: 30px;
     color: white;
+    border-radius: 5px;
 }
 
 .border {
diff --git a/ufund-ui/src/app/components/login/login.component.html b/ufund-ui/src/app/components/login/login.component.html
index aff108f..516b07b 100644
--- a/ufund-ui/src/app/components/login/login.component.html
+++ b/ufund-ui/src/app/components/login/login.component.html
@@ -1,6 +1,6 @@
 <div id="box">
     <span *ngIf="next" style="color: red">You must be logged in to view this page</span>
-    <p>Login:</p>
+    <h1>Login</h1>
     <input placeholder="Username" type="text" #username>
     <input placeholder="Password" type="password" #password>
     <button type="button" (click)="login(username.value, password.value)">Login</button>
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index bbc3f2c..fa3ed4f 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -4,7 +4,7 @@
     display: block;
     width: 30%;
     border-radius: 5px;
-    
+
 }
 
 li, div {
@@ -16,9 +16,9 @@ li, div {
 }
 
 #search-form {
-    background-color: #d9d9d9;
+    background-color: light-dark(#d9d9d9, #1b1b1b);
     padding: 10px 20px 20px 20px;
     border: 2px solid #000;
-    border-radius: 5px;  
+    border-radius: 5px;
     visibility: visible;
- }
\ No newline at end of file
+ }
diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css
index fdf67c7..dc7dcea 100644
--- a/ufund-ui/src/styles.css
+++ b/ufund-ui/src/styles.css
@@ -1,5 +1,9 @@
 /* You can add global styles to this file, and also import other style files */
 
+:root {
+    color-scheme: light dark;
+}
+
 * {
     box-sizing: border-box;
 }
@@ -7,6 +11,7 @@
 html, body {
     margin: 0;
     height: 100%;
+    background-color: light-dark(white, #242424);
 }
 
 body {
@@ -15,8 +20,24 @@ body {
 
 input {
     font-size: 14pt;
+    padding: 5px;
+    border-radius: 5px;
+    border-style: none;
+    background-color: light-dark(#ebebeb, #3a3a3a);
+
+    &:hover {
+        background-color: light-dark(#e1e1e1, #444444);
+    }
 }
 
 button, .button {
     font-size: 14pt;
+    padding: 5px 10px;
+    border-radius: 5px;
+    border-style: none;
+    background-color: light-dark(#ebebeb, #3a3a3a);
+
+    &:hover {
+        background-color: light-dark(#e1e1e1, #444444);
+    }
 }
-- 
cgit v1.2.3


From a05f6f0ab8dead76f937a2d7196fa005af0367fe Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Mon, 24 Mar 2025 10:27:31 -0400
Subject: hover feedback for need list's button

---
 ufund-ui/src/app/components/need-list/need-list.component.css  | 6 ++++++
 ufund-ui/src/app/components/need-list/need-list.component.html | 4 ++--
 ufund-ui/src/app/components/need-list/need-list.component.ts   | 7 +++++++
 3 files changed, 15 insertions(+), 2 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index 8f017cd..c2b8b90 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -24,8 +24,14 @@ li > button {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    transition: all 0.3s ease;
 }
 
+li > button:hover p {
+    font-weight: bold;
+}
+
+
 .icon {
     width: 15px;
     margin: 3px -3px -1px -3px;
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index fef22d7..fc2daa5 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -13,9 +13,9 @@
 <h2 *ngIf="searchResults.length == 0"> No Results Found </h2>
 
 <ul>
-    <li *ngFor="let need of searchResults">
+    <li *ngFor="let need of searchResults" id="need-button-{{need.id}}" (mouseenter) ="changeText(need.id, need.name + '(Click to view)')" (mouseleave)="changeText(need.id, need.name)" >
         <button [routerLink]="'/need/' + need.id">
-            {{need.name}}
+            <p id="need-label-{{need.id}}">{{need.name}}</p>
             <button (click)="delete(need.id)" *ngIf="isManager()"> 
                 <img class="icon" src="/delete.png" alt="Delete">
             </button>
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 3f77df4..8ae7370 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -78,6 +78,13 @@ export class NeedListComponent {
     return type === ("HELPER" as unknown as userType);
   }
 
+  changeText(id : number, text : string) {
+    const label = document.getElementById('need-label-' + id);
+    if (label) {
+      label.innerHTML = text;
+    }
+  }
+
   add(need: Need) {
     const currentUser = this.usersService.getCurrentUser();
     //console.log("get current user in angular:", currentUser)
-- 
cgit v1.2.3


From 1c1d3922e7eea35764ebab39b18172ed2c8c82d9 Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Mon, 24 Mar 2025 10:38:40 -0400
Subject: better feedback using a <span>

---
 ufund-ui/src/app/components/need-list/need-list.component.css  | 8 +++++++-
 ufund-ui/src/app/components/need-list/need-list.component.html | 4 ++--
 ufund-ui/src/app/components/need-list/need-list.component.ts   | 8 ++++----
 3 files changed, 13 insertions(+), 7 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index c2b8b90..c42dfda 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -25,10 +25,16 @@ li > button {
     justify-content: space-between;
     align-items: center;
     transition: all 0.3s ease;
+    font-weight: bold;
+}
+
+li > button span {
+    font-style: italic;
+    font-weight: normal;
 }
 
 li > button:hover p {
-    font-weight: bold;
+    text-decoration: underline;
 }
 
 
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index fc2daa5..741b899 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -13,9 +13,9 @@
 <h2 *ngIf="searchResults.length == 0"> No Results Found </h2>
 
 <ul>
-    <li *ngFor="let need of searchResults" id="need-button-{{need.id}}" (mouseenter) ="changeText(need.id, need.name + '(Click to view)')" (mouseleave)="changeText(need.id, need.name)" >
+    <li *ngFor="let need of searchResults" id="need-button-{{need.id}}" (mouseenter) ="changeText(need.id, '(details)')" (mouseleave)="changeText(need.id, '')" >
         <button [routerLink]="'/need/' + need.id">
-            <p id="need-label-{{need.id}}">{{need.name}}</p>
+            <p>{{need.name}}<span id="hover-status-label-{{need.id}}"> </span></p>
             <button (click)="delete(need.id)" *ngIf="isManager()"> 
                 <img class="icon" src="/delete.png" alt="Delete">
             </button>
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 8ae7370..0f86921 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -79,10 +79,10 @@ export class NeedListComponent {
   }
 
   changeText(id : number, text : string) {
-    const label = document.getElementById('need-label-' + id);
-    if (label) {
-      label.innerHTML = text;
-    }
+    const span = document.getElementById('hover-status-label-' + id);  
+    if (span) {
+      span.innerHTML = ' ' + text;
+    }    
   }
 
   add(need: Need) {
-- 
cgit v1.2.3


From cb3b7710b9e32df408b3a38383aca049fa98214e Mon Sep 17 00:00:00 2001
From: Gunther6070 <haydenhartman10@yahoo.com>
Date: Mon, 24 Mar 2025 21:17:33 -0400
Subject: Fixed various bugs and began fixing auth system. Also started
 implementing checkout method in cupboardService

---
 ufund-ui/src/app/services/users.service.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/services/users.service.ts b/ufund-ui/src/app/services/users.service.ts
index dba8185..6709192 100644
--- a/ufund-ui/src/app/services/users.service.ts
+++ b/ufund-ui/src/app/services/users.service.ts
@@ -45,7 +45,7 @@ export class UsersService {
     }
 
     updateUser(user: User): Observable<User> {
-        return this.http.put<User>(`${this.url}/${user.username}`,user, this.httpOptions2)
+        return this.http.put<User>(`${this.url}/${user.username}`, user, this.httpOptions2)
     }
 
     deleteUser(id: number): Observable<boolean> {
-- 
cgit v1.2.3


From 12551843966b285ce3113fe0243626cc961a7715 Mon Sep 17 00:00:00 2001
From: Gunther6070 <haydenhartman10@yahoo.com>
Date: Mon, 24 Mar 2025 21:18:25 -0400
Subject: Added comment

---
 ufund-ui/src/app/services/users.service.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/services/users.service.ts b/ufund-ui/src/app/services/users.service.ts
index 6709192..8515073 100644
--- a/ufund-ui/src/app/services/users.service.ts
+++ b/ufund-ui/src/app/services/users.service.ts
@@ -45,7 +45,7 @@ export class UsersService {
     }
 
     updateUser(user: User): Observable<User> {
-        return this.http.put<User>(`${this.url}/${user.username}`, user, this.httpOptions2)
+        return this.http.put<User>(`${this.url}/${user.username}`, user, this.httpOptions2) // This line is causing issues as the key is not properly being passed
     }
 
     deleteUser(id: number): Observable<boolean> {
-- 
cgit v1.2.3


From 96f833352eff7b9428daf2add988ecd0a2b41d92 Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Mon, 24 Mar 2025 21:21:32 -0400
Subject: Tweak style

---
 ufund-ui/src/app/components/login/login.component.css  | 7 +++++--
 ufund-ui/src/app/components/login/login.component.html | 5 ++++-
 ufund-ui/src/styles.css                                | 5 +++--
 3 files changed, 12 insertions(+), 5 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/login/login.component.css b/ufund-ui/src/app/components/login/login.component.css
index c752de3..4bfcbb8 100644
--- a/ufund-ui/src/app/components/login/login.component.css
+++ b/ufund-ui/src/app/components/login/login.component.css
@@ -9,13 +9,16 @@
 #box {
     display: flex;
     flex-direction: column;
-    max-width: 330px;
-    gap: 7px;
+    max-width: 350px;
+    gap: 10px;
     backdrop-filter: blur(10px);
     background-color: rgba(0, 0, 0, 0.1);
     padding: 30px;
     color: white;
     border-radius: 5px;
+    border-style: solid;
+    border-width: 1px;
+    border-color: white;
 }
 
 .border {
diff --git a/ufund-ui/src/app/components/login/login.component.html b/ufund-ui/src/app/components/login/login.component.html
index 516b07b..e04ec23 100644
--- a/ufund-ui/src/app/components/login/login.component.html
+++ b/ufund-ui/src/app/components/login/login.component.html
@@ -4,6 +4,9 @@
     <input placeholder="Username" type="text" #username>
     <input placeholder="Password" type="password" #password>
     <button type="button" (click)="login(username.value, password.value)">Login</button>
-    <button type="button" (click)="signup(username.value, password.value)">Create Account</button>
+    <div>
+        New? <a href="/">Create an account</a>
+    </div>
+<!--    <button type="button" (click)="signup(username.value, password.value)">Create Account</button>-->
     <span *ngIf="statusText">{{statusText | async}}</span>
 </div>
diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css
index dc7dcea..bad2232 100644
--- a/ufund-ui/src/styles.css
+++ b/ufund-ui/src/styles.css
@@ -22,7 +22,8 @@ input {
     font-size: 14pt;
     padding: 5px;
     border-radius: 5px;
-    border-style: none;
+    border-style: solid;
+    border-width: 1px;
     background-color: light-dark(#ebebeb, #3a3a3a);
 
     &:hover {
@@ -32,7 +33,7 @@ input {
 
 button, .button {
     font-size: 14pt;
-    padding: 5px 10px;
+    padding: 6px 10px;
     border-radius: 5px;
     border-style: none;
     background-color: light-dark(#ebebeb, #3a3a3a);
-- 
cgit v1.2.3


From a8175ba69669fddadfbe143e11972cc21821ed5f Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Mon, 24 Mar 2025 22:02:07 -0400
Subject: Fix authentication bug

---
 ufund-ui/src/app/services/users.service.ts | 35 +++++++++++++++++-------------
 1 file changed, 20 insertions(+), 15 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/services/users.service.ts b/ufund-ui/src/app/services/users.service.ts
index 8515073..6671440 100644
--- a/ufund-ui/src/app/services/users.service.ts
+++ b/ufund-ui/src/app/services/users.service.ts
@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import {HttpClient, HttpHeaders} from '@angular/common/http';
-import {BehaviorSubject, firstValueFrom, Observable} from 'rxjs';
+import {BehaviorSubject, catchError, firstValueFrom, Observable, of} from 'rxjs';
 import {User} from '../models/User';
 import { Need } from '../models/Need';
 import { CupboardService } from './cupboard.service';
@@ -16,20 +16,20 @@ export class UsersService {
 
     private url = "http://localhost:8080/users"
     private authUrl = "http://localhost:8080/auth"
-    private httpOptions = {
+    private httpOptions = () => ({
         headers: new HttpHeaders({
             'Content-Type': 'application/json',
             "jelly-api-key": this.apiKey
         })
-    };
-    private httpOptions2 = {
+    });
+    private httpOptions2 = () => ({
         headers: new HttpHeaders({
             'Content-Type': 'application/json',
             "jelly-api-key": this.apiKey
         }),
         responseType: "text" as "json" // don't ask me how or why this works, bc i have no clue...
         // see the relevant angular bug report https://github.com/angular/angular/issues/18586
-    };
+    });
 
     constructor(
         private http: HttpClient,
@@ -37,19 +37,20 @@ export class UsersService {
     ) {}
 
     async createUser(username:string, password:string) {
-        await firstValueFrom(this.http.post<User>(this.url, {username: username, password: password}, this.httpOptions))
+        await firstValueFrom(this.http.post<User>(this.url, {username: username, password: password}, this.httpOptions()))
     }
 
     getUser(id: string): Observable<User> {
-        return this.http.get<User>(`${this.url}/${id}`, this.httpOptions)
+        return this.http.get<User>(`${this.url}/${id}`, this.httpOptions())
     }
 
     updateUser(user: User): Observable<User> {
-        return this.http.put<User>(`${this.url}/${user.username}`, user, this.httpOptions2) // This line is causing issues as the key is not properly being passed
+        console.log(`${this.url}/${user.username}`, user, this.httpOptions)
+        return this.http.put<User>(`${this.url}/${user.username}`, user, this.httpOptions2()) // This line is causing issues as the key is not properly being passed
     }
 
     deleteUser(id: number): Observable<boolean> {
-        return this.http.delete<boolean>(`${this.url}/${id}`, this.httpOptions)
+        return this.http.delete<boolean>(`${this.url}/${id}`, this.httpOptions())
     }
 
     getCurrentUserSubject() {
@@ -61,7 +62,7 @@ export class UsersService {
     }
 
     async login(username: string, password: string) {
-        let res = this.http.post<string>(this.authUrl, {username: username, password: password}, this.httpOptions2);
+        let res = this.http.post<string>(this.authUrl, {username: username, password: password}, this.httpOptions2());
         this.apiKey = await firstValueFrom(res);
         console.log("apikey: "+this.apiKey)
         let res2 = this.http.get<User>(`${this.url}/${username}`, {
@@ -81,16 +82,20 @@ export class UsersService {
         })
         Promise.all(promiseArr).then(r => this.basket.next(r));
     }
-    
+
     removeNeed(id: number) {
         let newArr = this.basket.getValue().filter(v => v.id != id);
         this.basket.next(newArr);
         this.getCurrentUser()!.basket = newArr.map(need => need.id);
-        this.updateUser(this.getCurrentUser()!).subscribe(() => {
+        this.updateUser(this.getCurrentUser()!)
+            .pipe(
+                catchError((err: any, ob) => {
+                    console.error(err);
+                    return of();
+                })
+            )
+            .subscribe(() => {
             this.refreshBasket();
-            error: (err: any) => {
-              console.error(err);
-            }
           });
     }
 
-- 
cgit v1.2.3


From f0ac1eda74367afc375112a7269c085a511ce490 Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Mon, 24 Mar 2025 22:23:36 -0400
Subject: viewing search results inside cupboard component

---
 .../components/cupboard/cupboard.component.html    | 11 +++------
 .../app/components/cupboard/cupboard.component.ts  | 28 +++++++++++++++++++---
 2 files changed, 28 insertions(+), 11 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index 9b74b2a..3ed06fb 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -9,7 +9,7 @@
         <button [ngClass]="selectedForm === 'update' ? 'selected-tab' : 'tab'" (click)="selectForm('update')">Update existing Need</button>
     </div>
     <div id="create-form" *ngIf="selectedForm === 'create'">
-        <h1> Create a new need </h1>
+        <h1> Create Need </h1>
         <form #cupboardForm="ngForm" (ngSubmit)="submit(cupboardForm.value)">
             <label>Name:</label><br>
             <input type="text" name="name" ngModel><br>
@@ -26,15 +26,10 @@
     
     </div>
     <div id="update-form" *ngIf="selectedForm === 'update'">
-        <h1> Update a need </h1>
+        <h1> Update Need </h1>
         <label>Needs:</label><br>
         <form #updateForm="ngForm" (ngSubmit)="update(updateForm.value)">
-            <div *ngFor="let need of needs">
-    
-                <input type="radio" name="id" [value]=need.id [(ngModel)]="selectedNeedId" (change)="populateForm(need)">
-                <label name="template">{{need.name}}</label><br>
-            </div>
-            <label>Name:</label><br>
+            <label>Currently Editing : need.name</label><br>
             <input type="text" name="name" [(ngModel)]="selectedNeed.name"><br>
             <label>Max Goal:</label><br>
             <input type="number" name="maxGoal" [(ngModel)]="selectedNeed.maxGoal"><br>
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index 646c4ff..e38f8c0 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -16,10 +16,9 @@ import { NeedListComponent } from '../need-list/need-list.component';
 export class CupboardComponent implements OnInit {
 
     protected statusText = new BehaviorSubject("")
-    selectedForm = "create"
+    selectedForm = "create";
     needs: any;
-    @ViewChild("needList") needList?: NeedListComponent
-
+    @ViewChild("needList") needList?: NeedListComponent;
     constructor(private cupboardService: CupboardService, private usersService: UsersService) { }
 
     ngOnInit(): void {
@@ -38,9 +37,32 @@ export class CupboardComponent implements OnInit {
         type: ''
     };
     selectedNeedId: number | null = null;
+    searchResults: any[] = [];
     
     selectForm(name: string) {
+        //get search results from the need list 
+        if (this.needList) {
+            this.searchResults = this.needList.searchResults;
+        }
+        console.log(this.searchResults)
         this.selectedForm = name;
+        if (name == 'update') {
+            if (this.searchResults) {
+                this.searchResults.forEach((element: any) => {
+                    console.log(element)
+                });
+            }
+
+        }
+    }
+
+    async updateSearchResults() {
+        if (this.needList) {
+            while (this.selectedForm == 'update') {
+                this.searchResults = this.needList.searchResults
+                await new Promise(resolve => setTimeout(resolve, 100));
+            }
+        }
     }
 
     populateForm(need: any): void {
-- 
cgit v1.2.3


From 20458b2ae22466d0b75a2ae60f318e514c0d905f Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Tue, 25 Mar 2025 08:46:45 -0400
Subject: need list reformatting- button does not span whole list element

---
 .../app/components/need-list/need-list.component.css  | 19 ++++++++++++++-----
 .../app/components/need-list/need-list.component.html | 14 ++++++++++----
 .../app/components/need-list/need-list.component.ts   |  7 ++++++-
 3 files changed, 30 insertions(+), 10 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index c42dfda..74dbc34 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -5,7 +5,7 @@
     border-radius: 5px;
 }
 
-div, li > button {
+div {
     border: 2px solid #000;
     border-radius: 5px;
     padding: 5px;
@@ -17,17 +17,26 @@ ul {
     padding-inline-start: 0px;
 }
 
-li > button {
-    width: 98%;
-    padding: 1%;
-    margin: 1%;
+li {
     display: flex;
     justify-content: space-between;
     align-items: center;
     transition: all 0.3s ease;
     font-weight: bold;
+    border: 2px solid #000;
+    border-radius: 5px;
+    margin: 5px;
+    
+    > button {
+        width: 90%;
+        float: left;
+        transition: all 0.3s ease;
+        font-weight: bold;
+        display: flex;
+    }
 }
 
+
 li > button span {
     font-style: italic;
     font-weight: normal;
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 741b899..b31ccf0 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -13,13 +13,19 @@
 <h2 *ngIf="searchResults.length == 0"> No Results Found </h2>
 
 <ul>
-    <li *ngFor="let need of searchResults" id="need-button-{{need.id}}" (mouseenter) ="changeText(need.id, '(details)')" (mouseleave)="changeText(need.id, '')" >
-        <button [routerLink]="'/need/' + need.id">
+    <li *ngFor="let need of searchResults" id="need-button-{{need.id}}" >
+        <button [routerLink]="'/need/' + need.id" (mouseenter) ="changeText(need.id, '(details)')" (mouseleave)="changeText(need.id, '')">
             <p>{{need.name}}<span id="hover-status-label-{{need.id}}"> </span></p>
+        </button>
+
+        <button (click)="add(need)" *ngIf="isHelper()">Add To Basket</button>
+        <section *ngIf="isManager()">
+            <button (click)="select(need)">
+                <img class="icon" src="/edit.png" alt="Select">
+            </button>
             <button (click)="delete(need.id)" *ngIf="isManager()"> 
                 <img class="icon" src="/delete.png" alt="Delete">
             </button>
-            <button (click)="add(need)" *ngIf="isHelper()">Add To Basket</button>
-        </button>
+        </section>
     </li>
 </ul>
\ No newline at end of file
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 0f86921..e47929b 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -11,6 +11,7 @@ import { userType } from '../../models/User';
   styleUrl: './need-list.component.css'
 })
 export class NeedListComponent {
+  selectedNeed: Need | undefined;
   needs: Need[] = [];
   searchResults: Need[] = [];
 
@@ -109,4 +110,8 @@ export class NeedListComponent {
   back() {
     this.searchResults = this.needs;
   }
-}
+
+  select(need : Need) {
+    this.selectedNeed = need;
+  }
+}
\ No newline at end of file
-- 
cgit v1.2.3


From f7cd2d90191c1d81526ed549514d82864c1aebb2 Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Tue, 25 Mar 2025 09:08:26 -0400
Subject: restyling of need list results

---
 .../app/components/need-list/need-list.component.css  | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index 74dbc34..c763105 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -1,4 +1,5 @@
 :host {
+    --list-background-color: lightgray;
     list-style-type: none;
     border: 2px solid #000;
     display: block;
@@ -18,6 +19,7 @@ ul {
 }
 
 li {
+    background-color: var(--list-background-color);
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -25,17 +27,26 @@ li {
     font-weight: bold;
     border: 2px solid #000;
     border-radius: 5px;
-    margin: 5px;
-    
+    margin: 5px; 
     > button {
-        width: 90%;
+        background-color: var(--list-background-color);
+        width: 88%;
         float: left;
         transition: all 0.3s ease;
         font-weight: bold;
         display: flex;
+        border: none;
+        border-radius: 5px;
+    }
+
+    > section {
+        width: 12%;
     }
 }
 
+section button{
+    margin: 4%;
+}
 
 li > button span {
     font-style: italic;
@@ -48,7 +59,7 @@ li > button:hover p {
 
 
 .icon {
-    width: 15px;
+    width: 18px;
     margin: 3px -3px -1px -3px;
 }
 
-- 
cgit v1.2.3


From 304b867c6fa5c1192e8cdec7fd22affb50e244b3 Mon Sep 17 00:00:00 2001
From: Akash Keshav <112591754+domesticchores@users.noreply.github.com>
Date: Tue, 25 Mar 2025 09:37:49 -0400
Subject: implement sorting algorithms with selection buttons. -ak

---
 .../components/need-list/need-list.component.html  |  7 ++++
 .../components/need-list/need-list.component.ts    | 46 ++++++++++++++++++++--
 2 files changed, 50 insertions(+), 3 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 36c12d0..c5faf74 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -1,4 +1,11 @@
 <h1>Needs List</h1>
+<div style="display: flex;">
+    <h3>Sort by:</h3>
+    <table style="margin-left: 10px; display: flex; column-gap: 24px;">
+        <tr><h3><button (click)="changeSortAlgo('sortByName',searchForm.value)">Name(A-Z)</button></h3></tr>
+        <tr><h3><button (click)="changeSortAlgo('sortByMaxGoal',searchForm.value)">Max Goal(Descending)</button></h3></tr>
+    </table>
+</div>
 <input id="search-button" type="button" value="Search" (click)="open()">
 <div id="search-form">
     <form #searchForm="ngForm">
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 25f05d6..be444fb 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -1,8 +1,28 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import {Need} from '../../models/Need';
 import {CupboardService} from '../../services/cupboard.service';
 import { UsersService } from '../../services/users.service';
 import { userType } from '../../models/User';
+
+interface sortAlgo {
+  (a: Need,b: Need): number;
+}
+
+// sort functions
+const sortByName: sortAlgo = (a: Need, b: Need): number => {
+  if(a.name.toLocaleLowerCase() < b.name.toLocaleLowerCase()) {
+    return -1;
+  }
+  return 1;
+}
+
+const sortByMaxGoal: sortAlgo = (a: Need, b: Need): number => {
+  if(a.maxGoal >= b.maxGoal) {
+    return -1;
+  }
+  return 1;
+}
+
 @Component({
   selector: 'app-need-list',
   standalone: false,
@@ -12,6 +32,12 @@ import { userType } from '../../models/User';
 export class NeedListComponent {
   needs: Need[] = [];
   searchResults: Need[] = [];
+  currentSortAlgo: sortAlgo = sortByMaxGoal;
+
+  SortingAlgoArrays: {func:sortAlgo,name:string}[] = [
+    {func:sortByMaxGoal,name:"sortByMaxGoal"},
+    {func:sortByName,name:"sortByName"},
+  ];
 
   constructor(
     private cupboardService: CupboardService,
@@ -19,7 +45,7 @@ export class NeedListComponent {
   ) {}
 
     refresh() {
-        this.cupboardService.getNeeds().subscribe(n => this.needs = n)
+        this.cupboardService.getNeeds().subscribe(n => this.needs = n.sort(this.currentSortAlgo))
     }
 
   ngOnInit(): void {
@@ -60,6 +86,19 @@ export class NeedListComponent {
     this.hideElement(document.getElementById('search-status'));
   }
 
+  changeSortAlgo(algoName: string, form: any) {
+    console.log(algoName);
+    this.SortingAlgoArrays.forEach(algo => {
+      if(algo.name === algoName) {
+        this.currentSortAlgo = algo.func;
+        console.log("changed sorting algorithm to: ", algo.name)
+        return
+      }
+    });
+    this.refresh()
+    this.search(form);
+  }
+
   private searchDelay: any;
 
   async search(form: any) {
@@ -72,8 +111,9 @@ export class NeedListComponent {
 
     this.searchDelay = setTimeout(() => {
       const currentSearchValue = form.search; //latest value of the search
+      console.log("current search value: ", currentSearchValue)
       this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => {
-        this.searchResults = n;
+        this.searchResults = n.sort(this.currentSortAlgo);
         console.log(currentSearchValue, this.searchResults);
         this.showElement(document.getElementById('search-results'));
         this.showElement(document.getElementById('search-status'));
-- 
cgit v1.2.3


From 07d191cb1fc8890f66e9af7d19e8276089d18d8b Mon Sep 17 00:00:00 2001
From: Akash Keshav <112591754+domesticchores@users.noreply.github.com>
Date: Tue, 25 Mar 2025 09:45:38 -0400
Subject: added more sort options; fix HTML error

---
 .../src/app/components/need-list/need-list.component.html |  2 ++
 .../src/app/components/need-list/need-list.component.ts   | 15 ++++++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index c5faf74..283cc99 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -3,7 +3,9 @@
     <h3>Sort by:</h3>
     <table style="margin-left: 10px; display: flex; column-gap: 24px;">
         <tr><h3><button (click)="changeSortAlgo('sortByName',searchForm.value)">Name(A-Z)</button></h3></tr>
+        <tr><h3><button (click)="changeSortAlgo('sortByNameReverse',searchForm.value)">Name(Z-A)</button></h3></tr>
         <tr><h3><button (click)="changeSortAlgo('sortByMaxGoal',searchForm.value)">Max Goal(Descending)</button></h3></tr>
+        <tr><h3><button (click)="changeSortAlgo('sortByMinGoal',searchForm.value)">Max Goal(Ascending)</button></h3></tr>
     </table>
 </div>
 <input id="search-button" type="button" value="Search" (click)="open()">
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index be444fb..06bb17e 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -16,13 +16,24 @@ const sortByName: sortAlgo = (a: Need, b: Need): number => {
   return 1;
 }
 
+const sortByNameReverse: sortAlgo = (a: Need, b: Need): number => {
+  return sortByName(a,b)*-1;
+}
+
 const sortByMaxGoal: sortAlgo = (a: Need, b: Need): number => {
-  if(a.maxGoal >= b.maxGoal) {
+  if(a.maxGoal == b.maxGoal) {
+    return sortByName(a,b);
+  }
+  else if(a.maxGoal > b.maxGoal) {
     return -1;
   }
   return 1;
 }
 
+const sortByMinGoal: sortAlgo = (a: Need, b: Need): number => {
+  return sortByMaxGoal(a,b)*-1;
+}
+
 @Component({
   selector: 'app-need-list',
   standalone: false,
@@ -37,6 +48,8 @@ export class NeedListComponent {
   SortingAlgoArrays: {func:sortAlgo,name:string}[] = [
     {func:sortByMaxGoal,name:"sortByMaxGoal"},
     {func:sortByName,name:"sortByName"},
+    {func:sortByNameReverse,name:"sortByNameReverse"},
+    {func:sortByMinGoal,name:"sortByMinGoal"},
   ];
 
   constructor(
-- 
cgit v1.2.3


From d9eb78521f29ead3a9f70b09e18a6d9560cc849c Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Tue, 25 Mar 2025 10:43:52 -0400
Subject: fancy selection animation for need list

---
 .../components/need-list/need-list.component.css   |  2 +-
 .../components/need-list/need-list.component.html  |  4 ++--
 .../components/need-list/need-list.component.ts    | 28 +++++++++++++++++++++-
 3 files changed, 30 insertions(+), 4 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index c763105..2eb6a8d 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -29,7 +29,7 @@ li {
     border-radius: 5px;
     margin: 5px; 
     > button {
-        background-color: var(--list-background-color);
+        background-color: transparent;
         width: 88%;
         float: left;
         transition: all 0.3s ease;
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index b31ccf0..eaa8a6f 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -13,14 +13,14 @@
 <h2 *ngIf="searchResults.length == 0"> No Results Found </h2>
 
 <ul>
-    <li *ngFor="let need of searchResults" id="need-button-{{need.id}}" >
+    <li *ngFor="let need of searchResults" id="need-button-{{need.id}}">
         <button [routerLink]="'/need/' + need.id" (mouseenter) ="changeText(need.id, '(details)')" (mouseleave)="changeText(need.id, '')">
             <p>{{need.name}}<span id="hover-status-label-{{need.id}}"> </span></p>
         </button>
 
         <button (click)="add(need)" *ngIf="isHelper()">Add To Basket</button>
         <section *ngIf="isManager()">
-            <button (click)="select(need)">
+            <button (click)="select(need)" id="need-edit-button-{{need.id}}">
                 <img class="icon" src="/edit.png" alt="Select">
             </button>
             <button (click)="delete(need.id)" *ngIf="isManager()"> 
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index e47929b..9ef191a 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -112,6 +112,32 @@ export class NeedListComponent {
   }
 
   select(need : Need) {
-    this.selectedNeed = need;
+    if (this.selectedNeed) {
+      //revert already selected need to previous style
+      console.log(need.id);
+      let button = document.getElementById('need-button-' + this.selectedNeed.id);
+      if (button) {
+        console.log(button)
+        button.style.background = 'lightgray';
+        button.style.marginLeft = '0%';
+        button.style.width = '98%';
+      }
+      button = document.getElementById('need-edit-button-' + this.selectedNeed.id);
+      if (button) {
+        button.style.visibility = 'visible';
+      }
+    }
+      //change selected need to selected style
+      this.selectedNeed = need;
+      let button = document.getElementById('need-button-' + need.id);
+      if (button) {
+        button.style.background = 'white';
+        button.style.marginLeft = '4%';
+        button.style.width = '100%';
+      }
+      button = document.getElementById('need-edit-button-' + need.id);
+      if (button) {
+        button.style.visibility = 'hidden';
+      }
   }
 }
\ No newline at end of file
-- 
cgit v1.2.3


From b0369f8b5e50eaec22c9178748f57dde6912d383 Mon Sep 17 00:00:00 2001
From: Gunther6070 <haydenhartman10@yahoo.com>
Date: Tue, 25 Mar 2025 18:07:45 -0400
Subject: Created signup component and implemented some functionality. Did not
 finish implementing color bar and error messages.

---
 ufund-ui/src/app/app-routing.module.ts             |   4 +-
 ufund-ui/src/app/app.module.ts                     |   2 +
 .../src/app/components/signup/signup.component.css |  16 +++
 .../app/components/signup/signup.component.html    |   7 ++
 .../src/app/components/signup/signup.component.ts  | 118 +++++++++++++++++++++
 5 files changed, 146 insertions(+), 1 deletion(-)
 create mode 100644 ufund-ui/src/app/components/signup/signup.component.css
 create mode 100644 ufund-ui/src/app/components/signup/signup.component.html
 create mode 100644 ufund-ui/src/app/components/signup/signup.component.ts

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/app-routing.module.ts b/ufund-ui/src/app/app-routing.module.ts
index 4b76654..a6ea806 100644
--- a/ufund-ui/src/app/app-routing.module.ts
+++ b/ufund-ui/src/app/app-routing.module.ts
@@ -6,6 +6,7 @@ import {LoginComponent} from './components/login/login.component';
 import {HomePageComponent} from './components/home-page/home-page.component';
 import {FundingBasketComponent} from './components/funding-basket/funding-basket.component';
 import {NeedPageComponent} from './components/need-page/need-page.component';
+import {SignupComponent} from './components/signup/signup.component';
 
 const routes: Routes = [
     {path: '', component: HomePageComponent},
@@ -13,7 +14,8 @@ const routes: Routes = [
     {path: 'cupboard', component: CupboardComponent},
     {path: 'dashboard', component: DashboardComponent},
     {path: 'basket', component: FundingBasketComponent},
-    {path: 'need/:id', component: NeedPageComponent}
+    {path: 'need/:id', component: NeedPageComponent},
+    {path: 'signup', component: SignupComponent},
 ];
 
 @NgModule({
diff --git a/ufund-ui/src/app/app.module.ts b/ufund-ui/src/app/app.module.ts
index 9f525fe..156ef5f 100644
--- a/ufund-ui/src/app/app.module.ts
+++ b/ufund-ui/src/app/app.module.ts
@@ -14,6 +14,7 @@ import {RouterLink, RouterLinkActive, RouterOutlet} from '@angular/router';
 import {DashboardComponent} from './components/dashboard/dashboard.component';
 import {CommonModule} from '@angular/common';
 import {LoginComponent} from './components/login/login.component';
+import { SignupComponent } from './components/signup/signup.component';
 
 @NgModule({
     declarations: [
@@ -25,6 +26,7 @@ import {LoginComponent} from './components/login/login.component';
         NeedListComponent,
         DashboardComponent,
         LoginComponent,
+        SignupComponent,
     ],
     imports: [
         BrowserModule,
diff --git a/ufund-ui/src/app/components/signup/signup.component.css b/ufund-ui/src/app/components/signup/signup.component.css
new file mode 100644
index 0000000..2a10016
--- /dev/null
+++ b/ufund-ui/src/app/components/signup/signup.component.css
@@ -0,0 +1,16 @@
+:host, .border {
+    display: flex;
+    flex-direction: column;
+    max-width: 300px;
+    gap: 5px
+}
+
+.border {
+    border-style: solid;
+    border-width: 1px;
+    padding: 10px;
+    margin: 10px;
+    position: absolute;
+    background-color: white;
+    box-shadow: 0 0 10px 10px black;
+}
diff --git a/ufund-ui/src/app/components/signup/signup.component.html b/ufund-ui/src/app/components/signup/signup.component.html
new file mode 100644
index 0000000..742b8cf
--- /dev/null
+++ b/ufund-ui/src/app/components/signup/signup.component.html
@@ -0,0 +1,7 @@
+<p>Signup:</p>
+<input placeholder="Username" type="text" #username>
+<input placeholder="Password" type="password" (input)="checkPasswordStrength(password.value)" #password>
+<button type="button" (click)="signup(username.value, password.value)">Create Account</button>
+<span *ngIf="statusText">{{statusText | async}}</span>
+<span *ngIf="strength">{{strength | async}}</span>
+<span *ngIf="showSuccessMessage | async">Account created <a routerLink="/login">Proceed to login</a></span>
diff --git a/ufund-ui/src/app/components/signup/signup.component.ts b/ufund-ui/src/app/components/signup/signup.component.ts
new file mode 100644
index 0000000..48c6387
--- /dev/null
+++ b/ufund-ui/src/app/components/signup/signup.component.ts
@@ -0,0 +1,118 @@
+import { Component } from '@angular/core';
+import {UsersService} from '../../services/users.service';
+import {Router} from '@angular/router';
+import {BehaviorSubject} from 'rxjs';
+
+@Component({
+  selector: 'app-signup',
+  standalone: false,
+  templateUrl: './signup.component.html',
+  styleUrl: './signup.component.css'
+})
+export class SignupComponent {
+
+    protected statusText = new BehaviorSubject("")
+    protected showSuccessMessage = new BehaviorSubject(false)
+    protected passwordStrength = new BehaviorSubject("")
+    protected strength = new BehaviorSubject(0)
+
+    constructor(
+        protected usersService: UsersService,
+        protected router: Router,
+    ) {}
+
+    signup(username: string | null, password: string | null) {
+        console.log(`attempting to sign up with ${username} ${password}`)
+        if (!username || !password) {
+            return;
+        }
+
+        this.usersService.createUser(username, password).then(() => {
+            this.showSuccessMessage.next(true);
+        }).catch(ex => {
+            this.statusText.next("Unable to create account: " + friendlyHttpStatus[ex.status])
+            console.log(ex)
+        })
+    }
+
+    checkPasswordStrength(password: string) {
+        this.statusText.next("")
+        if (password.match(/[^!-~]/g)) {
+            this.statusText.next("Invalid characters")
+            return
+        }
+
+        let strength = 0;
+        if (password.length > 6) {
+            strength++
+            console.log("Long")
+        }
+        if (password.length > 12) {
+            strength++
+            console.log("Longer")
+        }
+        if (password.match(/[a-z]/g)) {
+            strength++
+            console.log("a")
+        }
+        if (password.match(/[0-9]/g)) {
+            strength++
+            console.log("0")
+        }
+        if (password.match(/[A-Z]/g)) {
+            strength++
+            console.log("A")
+        }
+        if (password.match(/[!-/]/g)) {
+            strength++
+            console.log("!")
+        }
+
+        this.strength.next(strength)
+    }
+
+}
+
+let friendlyHttpStatus: {[key: number]: string} = {
+    200: 'OK',
+    201: 'Created',
+    202: 'Accepted',
+    203: 'Non-Authoritative Information',
+    204: 'No Content',
+    205: 'Reset Content',
+    206: 'Partial Content',
+    300: 'Multiple Choices',
+    301: 'Moved Permanently',
+    302: 'Found',
+    303: 'See Other',
+    304: 'Not Modified',
+    305: 'Use Proxy',
+    306: 'Unused',
+    307: 'Temporary Redirect',
+    400: 'Bad Request',
+    401: 'Unauthorized',
+    402: 'Payment Required',
+    403: 'Forbidden',
+    404: 'Not Found',
+    405: 'Method Not Allowed',
+    406: 'Not Acceptable',
+    407: 'Proxy Authentication Required',
+    408: 'Request Timeout',
+    409: 'Conflict',
+    410: 'Gone',
+    411: 'Length Required',
+    412: 'Precondition Required',
+    413: 'Request Entry Too Large',
+    414: 'Request-URI Too Long',
+    415: 'Unsupported Media Type',
+    416: 'Requested Range Not Satisfiable',
+    417: 'Expectation Failed',
+    418: 'I\'m a teapot',
+    429: 'Too Many Requests',
+    500: 'Internal Server Error',
+    501: 'Not Implemented',
+    502: 'Bad Gateway',
+    503: 'Service Unavailable',
+    504: 'Gateway Timeout',
+    505: 'HTTP Version Not Supported',
+};
-- 
cgit v1.2.3


From ea13cf6ab3b71ff5e83fca876ec71fec1f7b00ae Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Wed, 26 Mar 2025 15:38:46 -0400
Subject: Make frontend work with the new backend checkout system

---
 ufund-ui/src/app/app.component.ts                  |   8 +-
 .../app/components/cupboard/cupboard.component.ts  |  58 +-----
 .../components/dashboard/dashboard.component.ts    |  20 +-
 .../funding-basket/funding-basket.component.ts     | 122 ++++++------
 .../src/app/components/login/login.component.ts    |  14 +-
 .../components/need-list/need-list.component.ts    | 212 +++++++++++----------
 ufund-ui/src/app/services/auth.service.ts          |  57 ++++++
 ufund-ui/src/app/services/cupboard.service.ts      |  30 ++-
 ufund-ui/src/app/services/users.service.ts         |  52 +----
 9 files changed, 286 insertions(+), 287 deletions(-)
 create mode 100644 ufund-ui/src/app/services/auth.service.ts

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/app.component.ts b/ufund-ui/src/app/app.component.ts
index 7dc8ffb..86717c4 100644
--- a/ufund-ui/src/app/app.component.ts
+++ b/ufund-ui/src/app/app.component.ts
@@ -1,7 +1,7 @@
 import {Component, OnInit, Inject} from '@angular/core';
-import {UsersService} from './services/users.service';
 import {BehaviorSubject} from 'rxjs';
 import { DOCUMENT } from '@angular/common';
+import {AuthService} from './services/auth.service';
 
 @Component({
   selector: 'app-root',
@@ -14,16 +14,16 @@ export class AppComponent implements OnInit {
     currentUser$: BehaviorSubject<string> = new BehaviorSubject<string>("Logged out.");
 
     constructor(
-        private userService: UsersService,
+        private authService: AuthService,
         @Inject(DOCUMENT) private document: Document
     ) {}
 
     reloadPage() {
         this.document.defaultView?.location.reload();
-      }
+    }
 
     ngOnInit() {
-        this.userService.getCurrentUserSubject().subscribe(r => {
+        this.authService.getCurrentUserSubject().subscribe(r => {
             this.currentUser$?.next(r
                 ? "Logged in as " + r.username
                 : "Logged out."
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index 24b3e2d..a812baf 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -1,10 +1,10 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { CupboardService } from '../../services/cupboard.service';
-import { UsersService } from '../../services/users.service';
 import { Need, GoalType } from '../../models/Need';
 import { userType } from '../../models/User';
 import { BehaviorSubject, catchError, of } from 'rxjs';
 import { NeedListComponent } from '../need-list/need-list.component';
+import {AuthService} from '../../services/auth.service';
 
 @Component({
     selector: 'app-cupboard',
@@ -20,7 +20,10 @@ export class CupboardComponent implements OnInit {
     needs: any;
     @ViewChild("needList") needList?: NeedListComponent
 
-    constructor(private cupboardService: CupboardService, private usersService: UsersService) { }
+    constructor(
+        private cupboardService: CupboardService,
+        private authService: AuthService
+    ) {}
 
     ngOnInit(): void {
         this.cupboardService.getNeeds().subscribe(n => this.needs = n);
@@ -88,7 +91,7 @@ export class CupboardComponent implements OnInit {
     }
 
     isManager() {
-        const type = this.usersService.getCurrentUser()?.type;
+        const type = this.authService.getCurrentUser()?.type;
         return type === ("MANAGER" as unknown as userType);
     }
 
@@ -105,7 +108,7 @@ export class CupboardComponent implements OnInit {
         console.log("need:", need);
         console.log(need.id, need, "need updated");
         this.cupboardService.updateNeed(need.id, need)
-            .pipe(catchError((ex, r) => {
+            .pipe(catchError((ex, _) => {
                 if (ex.status == 500) {
                     this.statusText.next("Fields cannot be blank");
                 } else if (ex.status == 400) {
@@ -140,7 +143,7 @@ export class CupboardComponent implements OnInit {
         console.log("need:", need);
         console.log("form submitted. creating need: ", need);
         this.cupboardService.createNeed(need)
-            .pipe(catchError((ex, r) => {
+            .pipe(catchError((ex, _) => {
                 if (ex.status == 500) {
                     this.statusText.next("Fields cannot be blank");
                 } else if (ex.status == 400) {
@@ -167,48 +170,3 @@ export class CupboardComponent implements OnInit {
 
     }
 }
-
-let friendlyHttpStatus: { [key: number]: string } = {
-    200: 'OK',
-    201: 'Created',
-    202: 'Accepted',
-    203: 'Non-Authoritative Information',
-    204: 'No Content',
-    205: 'Reset Content',
-    206: 'Partial Content',
-    300: 'Multiple Choices',
-    301: 'Moved Permanently',
-    302: 'Found',
-    303: 'See Other',
-    304: 'Not Modified',
-    305: 'Use Proxy',
-    306: 'Unused',
-    307: 'Temporary Redirect',
-    400: 'Bad Request',
-    401: 'Unauthorized',
-    402: 'Payment Required',
-    403: 'Forbidden',
-    404: 'Not Found',
-    405: 'Method Not Allowed',
-    406: 'Not Acceptable',
-    407: 'Proxy Authentication Required',
-    408: 'Request Timeout',
-    409: 'Conflict',
-    410: 'Gone',
-    411: 'Length Required',
-    412: 'Precondition Required',
-    413: 'Request Entry Too Large',
-    414: 'Request-URI Too Long',
-    415: 'Unsupported Media Type',
-    416: 'Requested Range Not Satisfiable',
-    417: 'Expectation Failed',
-    418: 'I\'m a teapot',
-    422: 'Unprocessable Entity',
-    429: 'Too Many Requests',
-    500: 'Internal Server Error',
-    501: 'Not Implemented',
-    502: 'Bad Gateway',
-    503: 'Service Unavailable',
-    504: 'Gateway Timeout',
-    505: 'HTTP Version Not Supported',
-};
diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.ts b/ufund-ui/src/app/components/dashboard/dashboard.component.ts
index b9faefa..a0ad566 100644
--- a/ufund-ui/src/app/components/dashboard/dashboard.component.ts
+++ b/ufund-ui/src/app/components/dashboard/dashboard.component.ts
@@ -1,21 +1,21 @@
-import { Component } from '@angular/core';
-import { UsersService } from '../../services/users.service';
-import { userType } from '../../models/User';
+import {Component} from '@angular/core';
+import {userType} from '../../models/User';
+import {AuthService} from '../../services/auth.service';
 
 @Component({
-  selector: 'app-dashboard',
-  standalone: false,
-  templateUrl: './dashboard.component.html',
-  styleUrl: './dashboard.component.css'
+    selector: 'app-dashboard',
+    standalone: false,
+    templateUrl: './dashboard.component.html',
+    styleUrl: './dashboard.component.css'
 })
 export class DashboardComponent {
     constructor(
-      protected usersService: UsersService,
+        protected authService: AuthService,
     ) {}
 
     isManager() {
-        const type = this.usersService.getCurrentUser()?.type;
+        const type = this.authService.getCurrentUser()?.type;
         return type === ("MANAGER" as unknown as userType);
-      }
+    }
 
 }
diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
index e654711..faa7e0b 100644
--- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
+++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
@@ -1,11 +1,9 @@
 import {Component, Input, OnInit, ViewChild} from '@angular/core';
-import {User} from '../../models/User';
-import { UsersService } from '../../services/users.service';
-import { Need } from '../../models/Need';
-import { NeedListComponent } from '../need-list/need-list.component';
-import { Router } from '@angular/router';
-import { CupboardService } from '../../services/cupboard.service';
-import { BehaviorSubject, catchError, firstValueFrom, Observable } from 'rxjs';
+import {UsersService} from '../../services/users.service';
+import {Router} from '@angular/router';
+import {CupboardService} from '../../services/cupboard.service';
+import {catchError, firstValueFrom, Observable} from 'rxjs';
+import {AuthService} from '../../services/auth.service';
 
 @Component({
     selector: 'app-funding-basket',
@@ -14,67 +12,67 @@ import { BehaviorSubject, catchError, firstValueFrom, Observable } from 'rxjs';
     styleUrl: './funding-basket.component.css'
 })
 export class FundingBasketComponent implements OnInit {
-  statusText: any;
+    statusText: any;
 
-  constructor(
-    private router: Router,
-    protected cupboardService: CupboardService, 
-    protected usersService: UsersService
-  ) {}
+    constructor(
+        private router: Router,
+        protected cupboardService: CupboardService,
+        protected usersService: UsersService,
+        private authService: AuthService
+    ) {}
 
-  @ViewChild("contribution") contribution?: Input;
-  @Input() isValid: boolean = true;
+    @ViewChild("contribution") contribution?: Input;
+    @Input() isValid: boolean = true;
 
-  // this is for login rerouting
-  ngOnInit(): void {
-    if (!this.usersService.getCurrentUser()) {
-      this.router.navigate(['/login'], {queryParams: {redir: this.router.url}});
-      return;
-    }
-
-    this.usersService.refreshBasket();
-    // this.usersService.removeNeed(); <- call this to remove
-  }
+    // this is for login rerouting
+    ngOnInit(): void {
+        if (!this.authService.getCurrentUser()) {
+            this.router.navigate(['/login'], {queryParams: {redir: this.router.url}});
+            return;
+        }
 
-  async checkout() {
-    this.isValid = true;
-    for (let c of document.getElementById("funding-basket")?.querySelectorAll('.contribution')!) {
-      let contribution = c as HTMLInputElement;
-      contribution.setAttribute("style","");
-      if ( contribution.value == '' || contribution.valueAsNumber <= 0) {
-        this.isValid = false;
-        contribution.setAttribute("style","color: #ff0000");
-      }
+        this.usersService.refreshBasket();
+        // this.usersService.removeNeed(); <- call this to remove
     }
-    if (this.isValid) {
-      for (let c of document.getElementById("funding-basket")?.querySelectorAll('.contribution')!) {
-        let contribution = c as HTMLInputElement;
-        let need = await firstValueFrom(this.cupboardService.getNeed(+contribution.id));
-        need.current +=+ contribution.value;
-        this.usersService.removeNeed(+need.id);
-        this.cupboardService.updateNeed(need.id, need)
-            .pipe(catchError((ex, r) => {
-                if (ex.status == 500) {
-                    this.statusText.next('Fields cannot be blank');
-                } else if (ex.status == 400) {
-                    this.statusText.next('Goal must be greater than 0');
-                } else {
-                    this.statusText.next('Error on creating need');
-                }
-                return new Observable<string>();
-            }))
-            .subscribe((result) => {
-                if (result) {
-                    console.log('need updated successfully');
-                    //this.needList?.refresh()
-                } else {
-                    console.log('need update failed');
-                }
-            });
-      }
-    }
-  }
 
+    async checkout() {
+        this.isValid = true;
+        for (let c of document.getElementById("funding-basket")?.querySelectorAll('.contribution')!) {
+            let contribution = c as HTMLInputElement;
+            contribution.setAttribute("style", "");
+            if (contribution.value == '' || contribution.valueAsNumber <= 0) {
+                this.isValid = false;
+                contribution.setAttribute("style", "color: #ff0000");
+            }
+        }
+        if (this.isValid) {
+            for (let c of document.getElementById("funding-basket")?.querySelectorAll('.contribution')!) {
+                let contribution = c as HTMLInputElement;
+                let need = await firstValueFrom(this.cupboardService.getNeed(+contribution.id));
+                need.current += +contribution.value;
+                this.usersService.removeNeed(+need.id);
+                this.cupboardService.checkoutNeed(need.id, +contribution.value)
+                    .pipe(catchError((ex, _) => {
+                        if (ex.status == 500) {
+                            this.statusText.next('Fields cannot be blank');
+                        } else if (ex.status == 400) {
+                            this.statusText.next('Goal must be greater than 0');
+                        } else {
+                            this.statusText.next('Error on creating need');
+                        }
+                        return new Observable<string>();
+                    }))
+                    .subscribe((result) => {
+                        if (result) {
+                            console.log('need updated successfully');
+                            //this.needList?.refresh()
+                        } else {
+                            console.log('need update failed');
+                        }
+                    });
+            }
+        }
+    }
 
 
 }
diff --git a/ufund-ui/src/app/components/login/login.component.ts b/ufund-ui/src/app/components/login/login.component.ts
index 9d806f5..f6a2996 100644
--- a/ufund-ui/src/app/components/login/login.component.ts
+++ b/ufund-ui/src/app/components/login/login.component.ts
@@ -2,12 +2,13 @@ import {Component, OnInit} from '@angular/core'
 import {UsersService} from '../../services/users.service';
 import {ActivatedRoute, Router} from '@angular/router';
 import {BehaviorSubject} from 'rxjs';
+import {AuthService} from '../../services/auth.service';
 
 @Component({
-  selector: 'app-login',
-  standalone: false,
-  templateUrl: './login.component.html',
-  styleUrl: './login.component.css'
+    selector: 'app-login',
+    standalone: false,
+    templateUrl: './login.component.html',
+    styleUrl: './login.component.css'
 })
 export class LoginComponent implements OnInit {
 
@@ -17,7 +18,8 @@ export class LoginComponent implements OnInit {
     constructor(
         protected usersService: UsersService,
         protected router: Router,
-        private route: ActivatedRoute
+        private route: ActivatedRoute,
+        private authService: AuthService
     ) {}
 
     ngOnInit() {
@@ -31,7 +33,7 @@ export class LoginComponent implements OnInit {
             return;
         }
 
-        this.usersService.login(username, password).then(() => {
+        this.authService.login(username, password).then(() => {
             this.router.navigate([next]);
         }).catch(ex => {
             this.statusText.next("Unable to login: " + friendlyHttpStatus[ex.status])
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 25f05d6..3a89a20 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -1,132 +1,138 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 import {Need} from '../../models/Need';
 import {CupboardService} from '../../services/cupboard.service';
-import { UsersService } from '../../services/users.service';
-import { userType } from '../../models/User';
+import {UsersService} from '../../services/users.service';
+import {userType} from '../../models/User';
+import {catchError, of} from 'rxjs';
+import {AuthService} from '../../services/auth.service';
+
 @Component({
-  selector: 'app-need-list',
-  standalone: false,
-  templateUrl: './need-list.component.html',
-  styleUrl: './need-list.component.css'
+    selector: 'app-need-list',
+    standalone: false,
+    templateUrl: './need-list.component.html',
+    styleUrl: './need-list.component.css'
 })
 export class NeedListComponent {
-  needs: Need[] = [];
-  searchResults: Need[] = [];
+    needs: Need[] = [];
+    searchResults: Need[] = [];
 
-  constructor(
-    private cupboardService: CupboardService,
-    private usersService: UsersService
-  ) {}
+    constructor(
+        private cupboardService: CupboardService,
+        private usersService: UsersService,
+        private authService: AuthService
+    ) {}
 
     refresh() {
         this.cupboardService.getNeeds().subscribe(n => this.needs = n)
     }
 
-  ngOnInit(): void {
-    this.refresh()
-   
-     this.close();
-  }
+    ngOnInit(): void {
+        this.refresh()
 
-  private showElement(element: any) {
-    if (element){
-      element.style.visibility = 'visible';
-      element.style.position = 'relative';
+        this.close();
     }
-  }
 
-  private hideElement(element: any) {
-    if (element){
-      element.style.visibility = 'hidden';
-      element.style.position = 'absolute';
+    private showElement(element: any) {
+        if (element) {
+            element.style.visibility = 'visible';
+            element.style.position = 'relative';
+        }
     }
-  }
 
-  private updateSearchStatus(text: string) {
-    let element = document.getElementById('search-status');
-    if (element) {
-      element.innerHTML = text;
+    private hideElement(element: any) {
+        if (element) {
+            element.style.visibility = 'hidden';
+            element.style.position = 'absolute';
+        }
     }
-  }
 
-  open() {
-    this.hideElement(document.getElementById('search-button'));
-    this.showElement(document.getElementById('search-form'));
-  }
+    private updateSearchStatus(text: string) {
+        let element = document.getElementById('search-status');
+        if (element) {
+            element.innerHTML = text;
+        }
+    }
 
-  close() {
-    this.hideElement(document.getElementById('search-form'));
-    this.showElement(document.getElementById('search-button'));
-    this.hideElement(document.getElementById('search-status'));
-  }
+    open() {
+        this.hideElement(document.getElementById('search-button'));
+        this.showElement(document.getElementById('search-form'));
+    }
 
-  private searchDelay: any;
+    close() {
+        this.hideElement(document.getElementById('search-form'));
+        this.showElement(document.getElementById('search-button'));
+        this.hideElement(document.getElementById('search-status'));
+    }
 
-  async search(form: any) {
-    //wait .25 seconds before searching but cancel if another search is made during the wait to prevent too many api calls
+    private searchDelay: any;
 
-    //remove previous search if it exists
-    if (this.searchDelay) {
-      clearTimeout(this.searchDelay);
-    }
+    async search(form: any) {
+        //wait .25 seconds before searching but cancel if another search is made during the wait to prevent too many api calls
 
-    this.searchDelay = setTimeout(() => {
-      const currentSearchValue = form.search; //latest value of the search
-      this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => {
-        this.searchResults = n;
-        console.log(currentSearchValue, this.searchResults);
-        this.showElement(document.getElementById('search-results'));
-        this.showElement(document.getElementById('search-status'));
-        if (this.searchResults.length === this.needs.length) {
-          this.updateSearchStatus("Please refine your search");
-          this.searchResults = [];
-        } else if (this.searchResults.length === 0) {
-          this.updateSearchStatus("No results found");
-        } else {
-          this.updateSearchStatus("Search results:");
+        //remove previous search if it exists
+        if (this.searchDelay) {
+            clearTimeout(this.searchDelay);
         }
-      });
-    }, 250);
-  }
-
-  delete(id : number) {
-    this.cupboardService.deleteNeed(id).subscribe(() => {
-      this.needs = this.needs.filter(n => n.id !== id)
-    })
-  }
-
-  isManager() {
-    const type = this.usersService.getCurrentUser()?.type;
-    return type === ("MANAGER" as unknown as userType);
-  }
-
-  isHelper() {
-    const type = this.usersService.getCurrentUser()?.type;
-    return type === ("HELPER" as unknown as userType);
-  }
-
-  add(need: Need) {
-    const currentUser = this.usersService.getCurrentUser();
-    //console.log("get current user in angular:", currentUser)
-    if (currentUser) {
-      if (!currentUser.basket.includes(need.id)) {
-        currentUser.basket.push(need.id);
-        this.usersService.updateUser(currentUser).subscribe(() => {
-          this.usersService.refreshBasket();
-          error: (err: any) => {
-            console.error(err);
-          }
-        });
-      } else {
-        window.alert("This need is already in your basket!")
-      }
-      
 
+        this.searchDelay = setTimeout(() => {
+            const currentSearchValue = form.search; //latest value of the search
+            this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => {
+                this.searchResults = n;
+                console.log(currentSearchValue, this.searchResults);
+                this.showElement(document.getElementById('search-results'));
+                this.showElement(document.getElementById('search-status'));
+                if (this.searchResults.length === this.needs.length) {
+                    this.updateSearchStatus("Please refine your search");
+                    this.searchResults = [];
+                } else if (this.searchResults.length === 0) {
+                    this.updateSearchStatus("No results found");
+                } else {
+                    this.updateSearchStatus("Search results:");
+                }
+            });
+        }, 250);
+    }
+
+    delete(id: number) {
+        this.cupboardService.deleteNeed(id).subscribe(() => {
+            this.needs = this.needs.filter(n => n.id !== id)
+        })
     }
 
-  }
+    isManager() {
+        const type = this.authService.getCurrentUser()?.type;
+        return type === ("MANAGER" as unknown as userType);
+    }
+
+    isHelper() {
+        const type = this.authService.getCurrentUser()?.type;
+        return type === ("HELPER" as unknown as userType);
+    }
+
+    add(need: Need) {
+        const currentUser = this.authService.getCurrentUser();
+        //console.log("get current user in angular:", currentUser)
+        if (currentUser) {
+            if (!currentUser.basket.includes(need.id)) {
+                currentUser.basket.push(need.id);
+                this.usersService.updateUser(currentUser)
+                    .pipe(catchError((err: any, _) => {
+                        console.error(err);
+                        return of();
+                    }))
+                    .subscribe(() => {
+                        this.usersService.refreshBasket();
+                    });
+            } else {
+                window.alert("This need is already in your basket!")
+            }
+
 
-  back() {
-    this.searchResults = [];
-  }
+        }
+
+    }
+
+    back() {
+        this.searchResults = [];
+    }
 }
diff --git a/ufund-ui/src/app/services/auth.service.ts b/ufund-ui/src/app/services/auth.service.ts
new file mode 100644
index 0000000..6bc7145
--- /dev/null
+++ b/ufund-ui/src/app/services/auth.service.ts
@@ -0,0 +1,57 @@
+import {Injectable} from '@angular/core';
+import {BehaviorSubject, firstValueFrom} from 'rxjs';
+import {User} from '../models/User';
+import {HttpClient, HttpHeaders} from '@angular/common/http';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class AuthService {
+
+    private authUrl = "http://localhost:8080/auth"
+    private userUrl = "http://localhost:8080/users"
+
+    private currentUser : BehaviorSubject<User | null> = new BehaviorSubject<User | null>(null);
+    private apiKey: string = "";
+
+    httpOptions2 = () => ({
+        headers: new HttpHeaders({
+            'Content-Type': 'application/json',
+            "jelly-api-key": this.apiKey
+        }),
+        responseType: "text" as "json" // don't ask me how or why this works, bc i have no clue...
+        // see the relevant angular bug report https://github.com/angular/angular/issues/18586
+    });
+
+    constructor(
+        private http: HttpClient
+    ) {}
+
+    async login(username: string, password: string) {
+        let res = this.http.post<string>(this.authUrl, {username: username, password: password}, this.httpOptions2());
+        this.apiKey = await firstValueFrom(res);
+        console.log("apikey: "+this.apiKey)
+        let res2 = this.http.get<User>(`${this.userUrl}/${username}`, {
+            headers: new HttpHeaders({
+                'Content-Type': 'application/json',
+                "jelly-api-key": this.apiKey
+            })
+        })
+        let currentU = await firstValueFrom(res2);
+        this.currentUser.next(currentU);
+        // this.currentUser.subscribe(r => console.log("currentUser: "+r.username))
+    }
+
+    getCurrentUserSubject() {
+        return this.currentUser;
+    }
+
+    getCurrentUser() {
+        return this.currentUser.getValue()
+    }
+
+    getApiKey() {
+        return this.apiKey;
+    }
+
+}
diff --git a/ufund-ui/src/app/services/cupboard.service.ts b/ufund-ui/src/app/services/cupboard.service.ts
index 9e14106..9232c0c 100644
--- a/ufund-ui/src/app/services/cupboard.service.ts
+++ b/ufund-ui/src/app/services/cupboard.service.ts
@@ -2,6 +2,7 @@ import {Injectable} from '@angular/core';
 import {HttpClient, HttpHeaders} from '@angular/common/http';
 import {Need} from '../models/Need';
 import {Observable} from 'rxjs';
+import {AuthService} from './auth.service';
 
 @Injectable({
     providedIn: 'root'
@@ -9,35 +10,44 @@ import {Observable} from 'rxjs';
 export class CupboardService {
 
     private url = "http://localhost:8080/cupboard"
-    private httpOptions = {
-        headers: new HttpHeaders({'Content-Type': 'application/json'})
-    };
+
+    httpOptions = () => ({
+        headers: new HttpHeaders({
+            'Content-Type': 'application/json',
+            "jelly-api-key": this.authService.getApiKey()
+        })
+    });
 
     constructor(
-        private http: HttpClient
+        private http: HttpClient,
+        private authService: AuthService
     ) {}
 
     createNeed(need: Need): Observable<boolean> {
-        return this.http.post<boolean>(this.url, need, this.httpOptions)
+        return this.http.post<boolean>(this.url, need, this.httpOptions())
     }
 
     getNeeds(): Observable<Need[]> {
-        return this.http.get<Need[]>(this.url, this.httpOptions)
+        return this.http.get<Need[]>(this.url, this.httpOptions())
     }
 
     searchNeeds(name: String): Observable<Need[]> {
-        return this.http.get<Need[]>(`${this.url}/?name=${name}`, this.httpOptions)
+        return this.http.get<Need[]>(`${this.url}/?name=${name}`, this.httpOptions())
     }
 
     getNeed(id: number): Observable<Need> {
-        return this.http.get<Need>(`${this.url}/${id}`, this.httpOptions)
+        return this.http.get<Need>(`${this.url}/${id}`, this.httpOptions())
     }
 
     updateNeed(id: number, data: Need): Observable<boolean> {
-        return this.http.put<boolean>(`${this.url}/${id}`, data, this.httpOptions)
+        return this.http.put<boolean>(`${this.url}/${id}`, data, this.httpOptions())
     }
 
     deleteNeed(id: number): Observable<boolean> {
-        return this.http.delete<boolean>(`${this.url}/${id}`, this.httpOptions)
+        return this.http.delete<boolean>(`${this.url}/${id}`, this.httpOptions())
+    }
+
+    checkoutNeed(id: number, quantity: number) {
+        return this.http.put(`${this.url}/checkout`, {needID: id, amount: quantity}, this.httpOptions())
     }
 }
diff --git a/ufund-ui/src/app/services/users.service.ts b/ufund-ui/src/app/services/users.service.ts
index 6671440..4080ebf 100644
--- a/ufund-ui/src/app/services/users.service.ts
+++ b/ufund-ui/src/app/services/users.service.ts
@@ -4,36 +4,27 @@ import {BehaviorSubject, catchError, firstValueFrom, Observable, of} from 'rxjs'
 import {User} from '../models/User';
 import { Need } from '../models/Need';
 import { CupboardService } from './cupboard.service';
+import {AuthService} from './auth.service';
 
 @Injectable({
   providedIn: 'root'
 })
 export class UsersService {
 
-    private currentUser : BehaviorSubject<User | null> = new BehaviorSubject<User | null>(null);
-    private apiKey: string = "";
     private basket = new BehaviorSubject<Need[]>([]);
-
     private url = "http://localhost:8080/users"
-    private authUrl = "http://localhost:8080/auth"
-    private httpOptions = () => ({
+
+    httpOptions = () => ({
         headers: new HttpHeaders({
             'Content-Type': 'application/json',
-            "jelly-api-key": this.apiKey
+            "jelly-api-key": this.authService.getApiKey()
         })
     });
-    private httpOptions2 = () => ({
-        headers: new HttpHeaders({
-            'Content-Type': 'application/json',
-            "jelly-api-key": this.apiKey
-        }),
-        responseType: "text" as "json" // don't ask me how or why this works, bc i have no clue...
-        // see the relevant angular bug report https://github.com/angular/angular/issues/18586
-    });
 
     constructor(
         private http: HttpClient,
         private cupboardService: CupboardService,
+        private authService: AuthService
     ) {}
 
     async createUser(username:string, password:string) {
@@ -46,38 +37,15 @@ export class UsersService {
 
     updateUser(user: User): Observable<User> {
         console.log(`${this.url}/${user.username}`, user, this.httpOptions)
-        return this.http.put<User>(`${this.url}/${user.username}`, user, this.httpOptions2()) // This line is causing issues as the key is not properly being passed
+        return this.http.put<User>(`${this.url}/${user.username}`, user, this.httpOptions())
     }
 
     deleteUser(id: number): Observable<boolean> {
         return this.http.delete<boolean>(`${this.url}/${id}`, this.httpOptions())
     }
 
-    getCurrentUserSubject() {
-        return this.currentUser;
-    }
-
-    getCurrentUser() {
-        return this.currentUser.getValue()
-    }
-
-    async login(username: string, password: string) {
-        let res = this.http.post<string>(this.authUrl, {username: username, password: password}, this.httpOptions2());
-        this.apiKey = await firstValueFrom(res);
-        console.log("apikey: "+this.apiKey)
-        let res2 = this.http.get<User>(`${this.url}/${username}`, {
-            headers: new HttpHeaders({
-                'Content-Type': 'application/json',
-                "jelly-api-key": this.apiKey
-            })
-        })
-        let currentU = await firstValueFrom(res2);
-        this.currentUser.next(currentU);
-        // this.currentUser.subscribe(r => console.log("currentUser: "+r.username))
-    }
-
     refreshBasket() {
-        let promiseArr = this.getCurrentUser()!.basket.map(async needID => {
+        let promiseArr = this.authService.getCurrentUser()!.basket.map(async needID => {
             return await firstValueFrom(this.cupboardService.getNeed(needID));
         })
         Promise.all(promiseArr).then(r => this.basket.next(r));
@@ -86,10 +54,10 @@ export class UsersService {
     removeNeed(id: number) {
         let newArr = this.basket.getValue().filter(v => v.id != id);
         this.basket.next(newArr);
-        this.getCurrentUser()!.basket = newArr.map(need => need.id);
-        this.updateUser(this.getCurrentUser()!)
+        this.authService.getCurrentUser()!.basket = newArr.map(need => need.id);
+        this.updateUser(this.authService.getCurrentUser()!)
             .pipe(
-                catchError((err: any, ob) => {
+                catchError((err: any, _) => {
                     console.error(err);
                     return of();
                 })
-- 
cgit v1.2.3


From ab35efb06b926e8a3aee5cfc8d1fa908aa4a4707 Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Wed, 26 Mar 2025 18:14:47 -0400
Subject: Fix cupboard access checking and logging

---
 .../components/home-page/home-page.component.ts    | 10 +++---
 .../components/need-page/need-page.component.ts    | 38 +++++++++++-----------
 ufund-ui/src/app/models/Need.ts                    | 16 ++++-----
 ufund-ui/src/app/models/User.ts                    |  2 --
 4 files changed, 32 insertions(+), 34 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/home-page/home-page.component.ts b/ufund-ui/src/app/components/home-page/home-page.component.ts
index 5b2277c..95e8962 100644
--- a/ufund-ui/src/app/components/home-page/home-page.component.ts
+++ b/ufund-ui/src/app/components/home-page/home-page.component.ts
@@ -1,10 +1,10 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
-  selector: 'app-home-page',
-  standalone: false,
-  templateUrl: './home-page.component.html',
-  styleUrl: './home-page.component.css'
+    selector: 'app-home-page',
+    standalone: false,
+    templateUrl: './home-page.component.html',
+    styleUrl: './home-page.component.css'
 })
 export class HomePageComponent {
 
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 597d0e0..e38554c 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
@@ -2,30 +2,30 @@ import {Component, Input} from '@angular/core';
 import {GoalType, Need} from '../../models/Need';
 import {ActivatedRoute} from "@angular/router";
 import {CupboardService} from "../../services/cupboard.service";
-import { NgFor } from '@angular/common';
+import {NgFor} from '@angular/common';
 
 @Component({
-  selector: 'app-need-page',
-  standalone: false,
-  templateUrl: './need-page.component.html',
-  styleUrl: './need-page.component.css'
+    selector: 'app-need-page',
+    standalone: false,
+    templateUrl: './need-page.component.html',
+    styleUrl: './need-page.component.css'
 })
 export class NeedPageComponent {
-  constructor(
-     private route: ActivatedRoute,
-     private cupboardService: CupboardService,
-  ) {}
+    constructor(
+        private route: ActivatedRoute,
+        private cupboardService: CupboardService,
+    ) {}
 
-  public GoalType = GoalType;
+    public GoalType = GoalType;
 
-  @Input() need?: Need;
+    @Input() need?: Need;
 
-  ngOnInit(): void {
-    const id = Number(this.route.snapshot.paramMap.get('id'));
-    this.cupboardService.getNeed(id).subscribe(n => this.need = n);
-  }
+    ngOnInit(): void {
+        const id = Number(this.route.snapshot.paramMap.get('id'));
+        this.cupboardService.getNeed(id).subscribe(n => this.need = n);
+    }
 
-  back() {
-    window.history.back();
-  }
-}
\ No newline at end of file
+    back() {
+        window.history.back();
+    }
+}
diff --git a/ufund-ui/src/app/models/Need.ts b/ufund-ui/src/app/models/Need.ts
index 9e97fd4..5cd4e39 100644
--- a/ufund-ui/src/app/models/Need.ts
+++ b/ufund-ui/src/app/models/Need.ts
@@ -1,13 +1,13 @@
 export interface Need {
-  name: string,
-  id: number,
-  filterAttributes: string[],
-  type: GoalType;
-  maxGoal: number;
-  current: number;
+    name: string,
+    id: number,
+    filterAttributes: string[],
+    type: GoalType;
+    maxGoal: number;
+    current: number;
 }
 
 export enum GoalType {
-  MONETARY,
-  PHYSICAL
+    MONETARY,
+    PHYSICAL
 }
diff --git a/ufund-ui/src/app/models/User.ts b/ufund-ui/src/app/models/User.ts
index f4396f6..e6848fa 100644
--- a/ufund-ui/src/app/models/User.ts
+++ b/ufund-ui/src/app/models/User.ts
@@ -1,5 +1,3 @@
-import {Need} from './Need';
-
 export enum userType {
     HELPER,
     MANAGER
-- 
cgit v1.2.3


From 0829feb20e60bc6d323dcc0d9376f4feb45115eb Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Wed, 26 Mar 2025 18:23:17 -0400
Subject: Push starter code for Input()

---
 .../app/components/cupboard/cupboard.component.html    |  8 ++++----
 .../src/app/components/cupboard/cupboard.component.ts  |  6 +++---
 .../app/components/need-list/need-list.component.ts    | 18 ++++++++++--------
 3 files changed, 17 insertions(+), 15 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index 3ed06fb..c2d146b 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -1,6 +1,6 @@
 <div>
     <h1> Cupboard </h1>
-    <app-need-list #needList></app-need-list>
+    <app-need-list [editF]="" #needList></app-need-list>
 </div>
 <div *ngIf="isManager()" >
     <h2 > Admin View </h2>
@@ -23,7 +23,7 @@
             <input type="submit" value="Submit">
         </form>
         <span *ngIf="statusText">{{statusText | async}}</span>
-    
+
     </div>
     <div id="update-form" *ngIf="selectedForm === 'update'">
         <h1> Update Need </h1>
@@ -41,8 +41,8 @@
             <input type="submit" value="Submit">
         </form>
         <span *ngIf="statusText">{{statusText | async}}</span>
-    
+
     </div>
     <hr>
-    
+
 </div>
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index e38f8c0..cf9b95e 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import {Component, Input, OnInit, ViewChild} from '@angular/core';
 import { CupboardService } from '../../services/cupboard.service';
 import { UsersService } from '../../services/users.service';
 import { Need, GoalType } from '../../models/Need';
@@ -38,9 +38,9 @@ export class CupboardComponent implements OnInit {
     };
     selectedNeedId: number | null = null;
     searchResults: any[] = [];
-    
+
     selectForm(name: string) {
-        //get search results from the need list 
+        //get search results from the need list
         if (this.needList) {
             this.searchResults = this.needList.searchResults;
         }
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 9ef191a..bf78d99 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import {Component, Input} from '@angular/core';
 import { NgForm } from '@angular/forms';
 import {Need} from '../../models/Need';
 import {CupboardService} from '../../services/cupboard.service';
@@ -15,6 +15,8 @@ export class NeedListComponent {
   needs: Need[] = [];
   searchResults: Need[] = [];
 
+  @Input() editF?: Function
+
   constructor(
     private cupboardService: CupboardService,
     private usersService: UsersService
@@ -43,7 +45,7 @@ export class NeedListComponent {
     }
     if (form) {
       this.searchDelay = setTimeout(() => {
-        
+
         if (form) {
           const currentSearchValue = form.search; //latest value of the search
           this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => {
@@ -58,9 +60,9 @@ export class NeedListComponent {
         clearTimeout(this.searchDelay);
         this.searchResults = this.needs;
       }
-      
 
-     
+
+
   }
 
   delete(id : number) {
@@ -80,10 +82,10 @@ export class NeedListComponent {
   }
 
   changeText(id : number, text : string) {
-    const span = document.getElementById('hover-status-label-' + id);  
+    const span = document.getElementById('hover-status-label-' + id);
     if (span) {
       span.innerHTML = ' ' + text;
-    }    
+    }
   }
 
   add(need: Need) {
@@ -101,7 +103,7 @@ export class NeedListComponent {
       } else {
         window.alert("This need is already in your basket!")
       }
-      
+
 
     }
 
@@ -140,4 +142,4 @@ export class NeedListComponent {
         button.style.visibility = 'hidden';
       }
   }
-}
\ No newline at end of file
+}
-- 
cgit v1.2.3


From 0549991d0b32de4de544d16478ce5b2782c1809d Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Wed, 26 Mar 2025 18:59:55 -0400
Subject: use (output) for need edit selection

---
 ufund-ui/src/app/components/cupboard/cupboard.component.html | 2 +-
 ufund-ui/src/app/components/need-list/need-list.component.ts | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index c2d146b..4b76f25 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -1,6 +1,6 @@
 <div>
     <h1> Cupboard </h1>
-    <app-need-list [editF]="" #needList></app-need-list>
+    <app-need-list (currentNeed) = populateForm($event) #needList></app-need-list>
 </div>
 <div *ngIf="isManager()" >
     <h2 > Admin View </h2>
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index bf78d99..2eed87d 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input} from '@angular/core';
+import {Component, Output, EventEmitter} from '@angular/core';
 import { NgForm } from '@angular/forms';
 import {Need} from '../../models/Need';
 import {CupboardService} from '../../services/cupboard.service';
@@ -11,11 +11,11 @@ import { userType } from '../../models/User';
   styleUrl: './need-list.component.css'
 })
 export class NeedListComponent {
-  selectedNeed: Need | undefined;
+  selectedNeed: Need | null = null;
   needs: Need[] = [];
   searchResults: Need[] = [];
 
-  @Input() editF?: Function
+  @Output() currentNeed = new EventEmitter<Need>();
 
   constructor(
     private cupboardService: CupboardService,
@@ -114,6 +114,8 @@ export class NeedListComponent {
   }
 
   select(need : Need) {
+    //emit value
+    this.currentNeed.emit(need);
     if (this.selectedNeed) {
       //revert already selected need to previous style
       console.log(need.id);
-- 
cgit v1.2.3


From 959aa5101fbba55f20eda46d02addd27a74cf950 Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Wed, 26 Mar 2025 19:03:16 -0400
Subject: snap form open on edit event

---
 ufund-ui/src/app/components/cupboard/cupboard.component.ts | 1 +
 1 file changed, 1 insertion(+)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index cf9b95e..0d2c1f5 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -66,6 +66,7 @@ export class CupboardComponent implements OnInit {
     }
 
     populateForm(need: any): void {
+        this.selectForm('update');
         this.selectedNeed = { ...need };
     }
 
-- 
cgit v1.2.3


From 959b5bbaaa370542b75d804cedbbbecea881df0f Mon Sep 17 00:00:00 2001
From: Gunther6070 <haydenhartman10@yahoo.com>
Date: Wed, 26 Mar 2025 19:12:46 -0400
Subject: Added a progress bar to signup

---
 ufund-ui/src/app/components/signup/signup.component.css  | 8 ++++++++
 ufund-ui/src/app/components/signup/signup.component.html | 1 +
 2 files changed, 9 insertions(+)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/signup/signup.component.css b/ufund-ui/src/app/components/signup/signup.component.css
index 2a10016..d4ea97b 100644
--- a/ufund-ui/src/app/components/signup/signup.component.css
+++ b/ufund-ui/src/app/components/signup/signup.component.css
@@ -14,3 +14,11 @@
     background-color: white;
     box-shadow: 0 0 10px 10px black;
 }
+
+#bar {
+    width: 100%;
+    height: 10px;
+    padding: 0;
+    margin: 0;
+}
+
diff --git a/ufund-ui/src/app/components/signup/signup.component.html b/ufund-ui/src/app/components/signup/signup.component.html
index 742b8cf..5b1b4f7 100644
--- a/ufund-ui/src/app/components/signup/signup.component.html
+++ b/ufund-ui/src/app/components/signup/signup.component.html
@@ -2,6 +2,7 @@
 <input placeholder="Username" type="text" #username>
 <input placeholder="Password" type="password" (input)="checkPasswordStrength(password.value)" #password>
 <button type="button" (click)="signup(username.value, password.value)">Create Account</button>
+<progress id="bar" [value]="strength | async" max="6">  </progress>
 <span *ngIf="statusText">{{statusText | async}}</span>
 <span *ngIf="strength">{{strength | async}}</span>
 <span *ngIf="showSuccessMessage | async">Account created <a routerLink="/login">Proceed to login</a></span>
-- 
cgit v1.2.3


From d5ae670dbce9e5cabbd594759df490176fd8cecd Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Wed, 26 Mar 2025 19:12:52 -0400
Subject: use selected id for the update form

---
 ufund-ui/src/app/components/cupboard/cupboard.component.html | 1 -
 ufund-ui/src/app/components/cupboard/cupboard.component.ts   | 5 ++---
 2 files changed, 2 insertions(+), 4 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index 4b76f25..d54eed9 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -29,7 +29,6 @@
         <h1> Update Need </h1>
         <label>Needs:</label><br>
         <form #updateForm="ngForm" (ngSubmit)="update(updateForm.value)">
-            <label>Currently Editing : need.name</label><br>
             <input type="text" name="name" [(ngModel)]="selectedNeed.name"><br>
             <label>Max Goal:</label><br>
             <input type="number" name="maxGoal" [(ngModel)]="selectedNeed.maxGoal"><br>
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index 0d2c1f5..a8b9c14 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -79,14 +79,13 @@ export class CupboardComponent implements OnInit {
         console.log(form);
         const need: Need = {
             name: form.name,
-            id: form.id, //system will control this
+            id: this.selectedNeed.id, //system will control this
             maxGoal: form.maxGoal,
             type: GoalType[form.type as keyof typeof GoalType],
             filterAttributes: [],
             current: 0
         };
-        console.log("need:", need);
-        console.log(need.id, need, "need updated");
+       
         this.cupboardService.updateNeed(need.id, need)
             .pipe(catchError((ex, r) => {
                 if (ex.status == 500) {
-- 
cgit v1.2.3


From 057efa1b557d5d874300c6cda8c7d74519c946d6 Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Thu, 27 Mar 2025 08:50:12 -0400
Subject: use <selection> instead of table with *ngFor for sort algorithms

---
 .../src/app/components/need-list/need-list.component.html | 15 ++++++---------
 .../src/app/components/need-list/need-list.component.ts   |  1 +
 2 files changed, 7 insertions(+), 9 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index de4be58..9799493 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -1,14 +1,11 @@
 <h1>Needs List</h1>
 <div id="search-container">
-  <div style="display: flex;">
-    <h3>Sort by:</h3>
-    <table style="margin-left: 10px; display: flex; column-gap: 24px;">
-        <tr><h3><button (click)="changeSortAlgo('sortByName',searchForm.value)">Name(A-Z)</button></h3></tr>
-        <tr><h3><button (click)="changeSortAlgo('sortByNameReverse',searchForm.value)">Name(Z-A)</button></h3></tr>
-        <tr><h3><button (click)="changeSortAlgo('sortByMaxGoal',searchForm.value)">Max Goal(Descending)</button></h3></tr>
-        <tr><h3><button (click)="changeSortAlgo('sortByMinGoal',searchForm.value)">Max Goal(Ascending)</button></h3></tr>
-    </table>
-  </div>
+    <label for="sort">Sort by:</label>
+    <select [(ngModel)]="sortSelection" id="sort" (change)="changeSortAlgo(sortSelection, searchForm.value)">
+        <option *ngFor="let algorithm of SortingAlgoArrays" value="{{algorithm.name}}">
+            {{algorithm.name}}
+        </option>
+    </select>
     <form id="search-form" #searchForm="ngForm">
         <input type="text" name="search" placeholder="Search in {{needs.length}} needs..." (input)="search(searchForm.value)" ngModel>
         <input type="reset" value="Clear" (click)="search(null)"> <br>
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 208045f..c1063ce 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -45,6 +45,7 @@ export class NeedListComponent {
   selectedNeed: Need | null = null;
   needs: Need[] = [];
   searchResults: Need[] = [];
+  sortSelection: string = '';
   currentSortAlgo: sortAlgo = sortByMaxGoal;
 
   SortingAlgoArrays: {func:sortAlgo,name:string}[] = [
-- 
cgit v1.2.3


From 84083e7229678c30d827270bfa25de66a02d7b8c Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Thu, 27 Mar 2025 08:54:06 -0400
Subject: display name for algorithms

---
 ufund-ui/src/app/components/need-list/need-list.component.html |  2 +-
 ufund-ui/src/app/components/need-list/need-list.component.ts   | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 9799493..a653527 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -3,7 +3,7 @@
     <label for="sort">Sort by:</label>
     <select [(ngModel)]="sortSelection" id="sort" (change)="changeSortAlgo(sortSelection, searchForm.value)">
         <option *ngFor="let algorithm of SortingAlgoArrays" value="{{algorithm.name}}">
-            {{algorithm.name}}
+            {{algorithm.display}}
         </option>
     </select>
     <form id="search-form" #searchForm="ngForm">
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index c1063ce..2fdd993 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -48,11 +48,11 @@ export class NeedListComponent {
   sortSelection: string = '';
   currentSortAlgo: sortAlgo = sortByMaxGoal;
 
-  SortingAlgoArrays: {func:sortAlgo,name:string}[] = [
-    {func:sortByMaxGoal,name:"sortByMaxGoal"},
-    {func:sortByName,name:"sortByName"},
-    {func:sortByNameReverse,name:"sortByNameReverse"},
-    {func:sortByMinGoal,name:"sortByMinGoal"},
+  SortingAlgoArrays: {func:sortAlgo,name:string,display:string}[] = [
+    {func:sortByMaxGoal,name:"sortByMaxGoal", display:"Max Goal"},
+    {func:sortByName,name:"sortByName", display:"Name"},
+    {func:sortByNameReverse,name:"sortByNameReverse", display:"Name (reverse)"},
+    {func:sortByMinGoal,name:"sortByMinGoal", display:"Min Goal"},
   ];
 
   @Output() currentNeed = new EventEmitter<Need>();
-- 
cgit v1.2.3


From 65590e6dfbed90e4acd342a72feb8d7b5120d70c Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Thu, 27 Mar 2025 09:49:41 -0400
Subject: refactor sorting to use acending descending toggle

---
 .../components/need-list/need-list.component.html  |  5 ++-
 .../components/need-list/need-list.component.ts    | 46 +++++++++++++---------
 2 files changed, 31 insertions(+), 20 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index a653527..5be915c 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -3,9 +3,12 @@
     <label for="sort">Sort by:</label>
     <select [(ngModel)]="sortSelection" id="sort" (change)="changeSortAlgo(sortSelection, searchForm.value)">
         <option *ngFor="let algorithm of SortingAlgoArrays" value="{{algorithm.name}}">
-            {{algorithm.display}}
+            {{algorithm.display[sortMode === 'Ascending' ? 0 : 1]}}
         </option>
     </select>
+    <button (click)="changeSortMode(searchForm.value)">
+        {{sortMode}}
+    </button>
     <form id="search-form" #searchForm="ngForm">
         <input type="text" name="search" placeholder="Search in {{needs.length}} needs..." (input)="search(searchForm.value)" ngModel>
         <input type="reset" value="Clear" (click)="search(null)"> <br>
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 2fdd993..97be0cb 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -17,11 +17,7 @@ const sortByName: sortAlgo = (a: Need, b: Need): number => {
   return 1;
 }
 
-const sortByNameReverse: sortAlgo = (a: Need, b: Need): number => {
-  return sortByName(a,b)*-1;
-}
-
-const sortByMaxGoal: sortAlgo = (a: Need, b: Need): number => {
+const sortByGoal: sortAlgo = (a: Need, b: Need): number => {
   if(a.maxGoal == b.maxGoal) {
     return sortByName(a,b);
   }
@@ -31,10 +27,6 @@ const sortByMaxGoal: sortAlgo = (a: Need, b: Need): number => {
   return 1;
 }
 
-const sortByMinGoal: sortAlgo = (a: Need, b: Need): number => {
-  return sortByMaxGoal(a,b)*-1;
-}
-
 @Component({
   selector: 'app-need-list',
   standalone: false,
@@ -45,14 +37,13 @@ export class NeedListComponent {
   selectedNeed: Need | null = null;
   needs: Need[] = [];
   searchResults: Need[] = [];
+  sortMode = 'Ascending'
   sortSelection: string = '';
-  currentSortAlgo: sortAlgo = sortByMaxGoal;
+  currentSortAlgo: sortAlgo = sortByGoal;
 
-  SortingAlgoArrays: {func:sortAlgo,name:string,display:string}[] = [
-    {func:sortByMaxGoal,name:"sortByMaxGoal", display:"Max Goal"},
-    {func:sortByName,name:"sortByName", display:"Name"},
-    {func:sortByNameReverse,name:"sortByNameReverse", display:"Name (reverse)"},
-    {func:sortByMinGoal,name:"sortByMinGoal", display:"Min Goal"},
+  SortingAlgoArrays: {func:sortAlgo,name:string, display:string[]}[] = [
+    {func:sortByGoal,name:"sortByMaxGoal", display:["Max Goal", "Min Goal"]},
+    {func:sortByName,name:"sortByName", display:["Name", "Name (Descending)"]},
   ];
 
   @Output() currentNeed = new EventEmitter<Need>();
@@ -64,22 +55,34 @@ export class NeedListComponent {
 
     refresh() {
         this.cupboardService.getNeeds().subscribe(n => {
-          this.needs = n.sort(this.currentSortAlgo);
+          if (this.sortMode == 'Ascending') {
+            this.needs = n.sort(this.currentSortAlgo);
+          } else {
+            this.needs = n.sort(this.currentSortAlgo).reverse();
+          }
           this.searchResults = this.needs;
         });
-        console.log(this.searchResults);
     }
 
   ngOnInit(): void {
     this.refresh()
   }
 
+  changeSortMode(form : any) {
+    if (this.sortMode == 'Ascending'){
+      this.sortMode = 'Descending'
+    } else {
+      this.sortMode = 'Ascending'
+    }
+    this.search(form)
+  }
+
   changeSortAlgo(algoName: string, form: any) {
     console.log(algoName);
     this.SortingAlgoArrays.forEach(algo => {
       if(algo.name === algoName) {
         this.currentSortAlgo = algo.func;
-        console.log("changed sorting algorithm to: ", algo.name)
+        console.log("changed sorting algorithm to: ", algo.name + this.sortMode)
         return
       }
     });
@@ -102,7 +105,12 @@ export class NeedListComponent {
         if (form) {
           const currentSearchValue = form.search; //latest value of the search
           this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => {
-            this.searchResults = n.sort(this.currentSortAlgo);
+            if (this.sortMode == 'Ascending') {
+              this.searchResults = n.sort(this.currentSortAlgo);
+            } else {
+              this.searchResults = n.sort(this.currentSortAlgo).reverse();
+            }
+            
             console.log(currentSearchValue, this.searchResults);
             });
           }
-- 
cgit v1.2.3


From ee4154df85a971f3a0f8e43fd6afdfa6a620ea99 Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Thu, 27 Mar 2025 10:09:19 -0400
Subject: refactor change sort algo func with [(ngModel)] binding

---
 .../components/need-list/need-list.component.html  |  2 +-
 .../components/need-list/need-list.component.ts    | 25 ++++++++++------------
 2 files changed, 12 insertions(+), 15 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 5be915c..4f259a0 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -1,7 +1,7 @@
 <h1>Needs List</h1>
 <div id="search-container">
     <label for="sort">Sort by:</label>
-    <select [(ngModel)]="sortSelection" id="sort" (change)="changeSortAlgo(sortSelection, searchForm.value)">
+    <select [(ngModel)] = "sortSelection" id="sort" (change)="search(searchForm.value)">
         <option *ngFor="let algorithm of SortingAlgoArrays" value="{{algorithm.name}}">
             {{algorithm.display[sortMode === 'Ascending' ? 0 : 1]}}
         </option>
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 97be0cb..177d9f7 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -38,8 +38,9 @@ export class NeedListComponent {
   needs: Need[] = [];
   searchResults: Need[] = [];
   sortMode = 'Ascending'
-  sortSelection: string = '';
+
   currentSortAlgo: sortAlgo = sortByGoal;
+  sortSelection: string = this.currentSortAlgo.name;
 
   SortingAlgoArrays: {func:sortAlgo,name:string, display:string[]}[] = [
     {func:sortByGoal,name:"sortByMaxGoal", display:["Max Goal", "Min Goal"]},
@@ -77,19 +78,6 @@ export class NeedListComponent {
     this.search(form)
   }
 
-  changeSortAlgo(algoName: string, form: any) {
-    console.log(algoName);
-    this.SortingAlgoArrays.forEach(algo => {
-      if(algo.name === algoName) {
-        this.currentSortAlgo = algo.func;
-        console.log("changed sorting algorithm to: ", algo.name + this.sortMode)
-        return
-      }
-    });
-    this.refresh()
-    this.search(form);
-  }
-
   private searchDelay: any;
 
   async search(form: any) {
@@ -103,6 +91,15 @@ export class NeedListComponent {
       this.searchDelay = setTimeout(() => {
 
         if (form) {
+          //sorting based on algo selected
+          this.SortingAlgoArrays.forEach(algo => {
+            if(algo.name === this.sortSelection) {
+              this.currentSortAlgo = algo.func;
+              console.log("changed sorting algorithm to: ", algo.name + this.sortMode)
+              return
+            }
+          });
+
           const currentSearchValue = form.search; //latest value of the search
           this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => {
             if (this.sortMode == 'Ascending') {
-- 
cgit v1.2.3


From 0b4c76c5dc7313ae42c62be3c682c1f88cec13fd Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Thu, 27 Mar 2025 10:36:32 -0400
Subject: defaut value for sorting

---
 ufund-ui/src/app/components/need-list/need-list.component.html | 2 +-
 ufund-ui/src/app/components/need-list/need-list.component.ts   | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 4f259a0..693307f 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -1,7 +1,7 @@
 <h1>Needs List</h1>
 <div id="search-container">
     <label for="sort">Sort by:</label>
-    <select [(ngModel)] = "sortSelection" id="sort" (change)="search(searchForm.value)">
+    <select [(ngModel)] = "sortSelection" id="sort" (change)="search(searchForm.value)" [value]="sortSelection">
         <option *ngFor="let algorithm of SortingAlgoArrays" value="{{algorithm.name}}">
             {{algorithm.display[sortMode === 'Ascending' ? 0 : 1]}}
         </option>
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 177d9f7..f935e03 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -40,10 +40,10 @@ export class NeedListComponent {
   sortMode = 'Ascending'
 
   currentSortAlgo: sortAlgo = sortByGoal;
-  sortSelection: string = this.currentSortAlgo.name;
+  sortSelection: string = 'sortByGoal';
 
   SortingAlgoArrays: {func:sortAlgo,name:string, display:string[]}[] = [
-    {func:sortByGoal,name:"sortByMaxGoal", display:["Max Goal", "Min Goal"]},
+    {func:sortByGoal,name:"sortByGoal", display:["Max Goal", "Min Goal"]},
     {func:sortByName,name:"sortByName", display:["Name", "Name (Descending)"]},
   ];
 
-- 
cgit v1.2.3


From 7ccbfb414de47941c8acb2e6f9c2cc7a01cd819c Mon Sep 17 00:00:00 2001
From: Gunther6070 <haydenhartman10@yahoo.com>
Date: Thu, 27 Mar 2025 18:47:07 -0400
Subject: Added requirements list, updated bar, and disabling of creation with
 weak passwords.

---
 .../src/app/components/signup/signup.component.css | 13 +++++++---
 .../app/components/signup/signup.component.html    | 10 +++++++-
 .../src/app/components/signup/signup.component.ts  | 29 +++++++++++++++-------
 3 files changed, 39 insertions(+), 13 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/signup/signup.component.css b/ufund-ui/src/app/components/signup/signup.component.css
index d4ea97b..799cbd2 100644
--- a/ufund-ui/src/app/components/signup/signup.component.css
+++ b/ufund-ui/src/app/components/signup/signup.component.css
@@ -17,8 +17,15 @@
 
 #bar {
     width: 100%;
-    height: 10px;
-    padding: 0;
-    margin: 0;
+    height: 20px;
+    -webkit-appearance: none;
+    appearance: none;
+    border: none;
+    border-radius: 10px;
+    overflow: hidden;
+    background-color: red;
 }
 
+#requirement2 {
+    color: red;
+}
diff --git a/ufund-ui/src/app/components/signup/signup.component.html b/ufund-ui/src/app/components/signup/signup.component.html
index 5b1b4f7..1b50d39 100644
--- a/ufund-ui/src/app/components/signup/signup.component.html
+++ b/ufund-ui/src/app/components/signup/signup.component.html
@@ -1,8 +1,16 @@
 <p>Signup:</p>
 <input placeholder="Username" type="text" #username>
 <input placeholder="Password" type="password" (input)="checkPasswordStrength(password.value)" #password>
-<button type="button" (click)="signup(username.value, password.value)">Create Account</button>
+<button type="button" [disabled]="passwordStrongEnough | async" (click)="signup(username.value, password.value)">Create Account</button>
+
+<div id="requirement2" *ngIf="test"> {{test | async}} </div>
+
 <progress id="bar" [value]="strength | async" max="6">  </progress>
+
+<span *ngFor="let requirement of passwordRequirements">
+    <span id="requirement" *ngIf="passwordRequirements" [style.color]="color | async"> {{requirement}} </span>
+</span>
+
 <span *ngIf="statusText">{{statusText | async}}</span>
 <span *ngIf="strength">{{strength | async}}</span>
 <span *ngIf="showSuccessMessage | async">Account created <a routerLink="/login">Proceed to login</a></span>
diff --git a/ufund-ui/src/app/components/signup/signup.component.ts b/ufund-ui/src/app/components/signup/signup.component.ts
index 48c6387..10fbce5 100644
--- a/ufund-ui/src/app/components/signup/signup.component.ts
+++ b/ufund-ui/src/app/components/signup/signup.component.ts
@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import {UsersService} from '../../services/users.service';
 import {Router} from '@angular/router';
 import {BehaviorSubject} from 'rxjs';
+import {Need} from '../../models/Need';
 
 @Component({
   selector: 'app-signup',
@@ -13,8 +14,11 @@ export class SignupComponent {
 
     protected statusText = new BehaviorSubject("")
     protected showSuccessMessage = new BehaviorSubject(false)
-    protected passwordStrength = new BehaviorSubject("")
+    protected passwordStrongEnough = new BehaviorSubject(true)
+    passwordRequirements: String[] = [("❌ Password length"), ("❌ Lowercase letters")];
     protected strength = new BehaviorSubject(0)
+    protected color = new BehaviorSubject("red")
+    protected test = new BehaviorSubject("Password does not meet requirements")
 
     constructor(
         protected usersService: UsersService,
@@ -36,7 +40,12 @@ export class SignupComponent {
     }
 
     checkPasswordStrength(password: string) {
+        this.passwordRequirements = [("❌ Password length"), ("❌ Lowercase letters")];
+        this.test.next("Password does not meet requirements")
         this.statusText.next("")
+        this.passwordStrongEnough.next(true)
+        this.color.next("red")
+
         if (password.match(/[^!-~]/g)) {
             this.statusText.next("Invalid characters")
             return
@@ -45,32 +54,34 @@ export class SignupComponent {
         let strength = 0;
         if (password.length > 6) {
             strength++
-            console.log("Long")
+            this.passwordRequirements[0] = "✅ Password length"
+            this.color.next("green")
         }
         if (password.length > 12) {
             strength++
-            console.log("Longer")
         }
         if (password.match(/[a-z]/g)) {
             strength++
-            console.log("a")
         }
-        if (password.match(/[0-9]/g)) {
+        if (password.match(/[A-Z]/g)) {
             strength++
-            console.log("0")
         }
-        if (password.match(/[A-Z]/g)) {
+        if (password.match(/[0-9]/g)) {
             strength++
-            console.log("A")
         }
         if (password.match(/[!-/]/g)) {
             strength++
-            console.log("!")
+        }
+
+        if (strength >= 5) {
+            this.passwordStrongEnough.next(false)
+            this.test.next("")
         }
 
         this.strength.next(strength)
     }
 
+    protected readonly length = length;
 }
 
 let friendlyHttpStatus: {[key: number]: string} = {
-- 
cgit v1.2.3


From 451a9abd5a4c461ccbb0b7b7d51b78dbfe12ec54 Mon Sep 17 00:00:00 2001
From: Gunther6070 <haydenhartman10@yahoo.com>
Date: Thu, 27 Mar 2025 18:47:26 -0400
Subject: Added requirements list, updated bar, and disabling of creation with
 weak passwords.

---
 ufund-ui/src/app/components/signup/signup.component.ts | 1 -
 1 file changed, 1 deletion(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/signup/signup.component.ts b/ufund-ui/src/app/components/signup/signup.component.ts
index 10fbce5..9532e42 100644
--- a/ufund-ui/src/app/components/signup/signup.component.ts
+++ b/ufund-ui/src/app/components/signup/signup.component.ts
@@ -2,7 +2,6 @@ import { Component } from '@angular/core';
 import {UsersService} from '../../services/users.service';
 import {Router} from '@angular/router';
 import {BehaviorSubject} from 'rxjs';
-import {Need} from '../../models/Need';
 
 @Component({
   selector: 'app-signup',
-- 
cgit v1.2.3


From fb4e2bc3eb66ca861eb8393ade21811e4510669a Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Fri, 28 Mar 2025 19:09:53 -0400
Subject: Start implementation new design

---
 ufund-ui/src/app/app.component.css                 | 25 ++++++++++++++----
 ufund-ui/src/app/app.component.html                |  6 ++---
 .../components/home-page/home-page.component.css   | 30 ++++++++++++++++++++++
 .../components/home-page/home-page.component.html  | 12 +++++++--
 .../src/app/components/login/login.component.css   |  8 ++++--
 ufund-ui/src/index.html                            |  4 +++
 ufund-ui/src/styles.css                            | 19 +++++++++++---
 7 files changed, 88 insertions(+), 16 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css
index 17bbed7..5596cf8 100644
--- a/ufund-ui/src/app/app.component.css
+++ b/ufund-ui/src/app/app.component.css
@@ -8,23 +8,38 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    border-bottom: light-dark(#d3d3d3, black) solid 1px;
-    padding: 0 10px;
-    background-color: light-dark(#f5f5f5, #2e2e2e);
+    /*border-bottom: light-dark(#d3d3d3, black) solid 1px;*/
+    padding: 15px 20px;
+    /*background-color: light-dark(#f5f5f5, #2e2e2e);*/
+    z-index: 2;
 
     h1 {
         padding: 0;
         margin: 0;
-
+        font-weight: 500;
+        /*text-decoration: none;*/
+        text-transform: uppercase;
+        font-size: 16pt;
+        letter-spacing: .5px;
     }
 
     div {
         display: flex;
         align-items: center;
-        gap: 10px;
+        gap: 20px;
     }
 
+    /*div:has(a:hover) a {*/
+    /*    color: light-dark(black, rgba(255, 255, 255, 0.5));*/
+    /*}*/
+
     a {
         color: light-dark(black, white);
+        text-decoration: none;
+    }
+
+    a:hover {
+        /*color: light-dark(black, white)*/
+        text-decoration: underline;
     }
 }
diff --git a/ufund-ui/src/app/app.component.html b/ufund-ui/src/app/app.component.html
index 3058117..b0ee329 100644
--- a/ufund-ui/src/app/app.component.html
+++ b/ufund-ui/src/app/app.component.html
@@ -1,14 +1,14 @@
 <div id="header">
-    <span>
+    <div>
         <a routerLink="/">
             <h1>Jelly Solutions</h1>
         </a>
-    </span>
+    </div>
     <div>
         <a routerLink="/dashboard">Dashboard</a>
         <a routerLink="/cupboard">Cupboard</a>
         <a routerLink="/basket">Basket</a>
-        <span>{{currentUser$ | async}}</span>
+<!--        <span>{{currentUser$ | async}}</span>-->
         <button *ngIf="currentUser$.value != 'Logged out.'" onclick="location.href='/';"> Log Out</button>
         <button *ngIf="currentUser$.value == 'Logged out.'" routerLink="/login"> Log In</button>
     </div>
diff --git a/ufund-ui/src/app/components/home-page/home-page.component.css b/ufund-ui/src/app/components/home-page/home-page.component.css
index 5f65225..16f3140 100644
--- a/ufund-ui/src/app/components/home-page/home-page.component.css
+++ b/ufund-ui/src/app/components/home-page/home-page.component.css
@@ -5,3 +5,33 @@
     align-items: center;
     justify-content: center;
 }
+
+#hero {
+    display: flex;
+    /*flex-direction: column;*/
+    /*align-items: start;*/
+    /*justify-content: center;*/
+}
+
+h1 {
+    font-size: 50px;
+    max-width: 1200px;
+}
+
+#jf {
+    /*position: absolute;*/
+}
+
+#right {
+    max-width: 500px;
+    max-height: 500px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    /*z-index: -0.5;*/
+}
+
+#left {
+    max-width: 500px;
+    z-index: 1;
+}
diff --git a/ufund-ui/src/app/components/home-page/home-page.component.html b/ufund-ui/src/app/components/home-page/home-page.component.html
index b2eed0b..7a7ff96 100644
--- a/ufund-ui/src/app/components/home-page/home-page.component.html
+++ b/ufund-ui/src/app/components/home-page/home-page.component.html
@@ -1,2 +1,10 @@
-<h1>Helping fund coral reef and marine life conservation</h1>
-<button routerLink="/cupboard">View needs</button>
+<div id="hero">
+    <div id="left">
+        <h1>Helping fund coral reef and marine life conservation</h1>
+        <p>View our online cupboard holding all needs related to sea life preservation</p>
+        <button class="button2" routerLink="/cupboard">View needs</button>
+    </div>
+    <div id="right">
+        <img id="jf" src="jf.png" height="1024" width="1024"/>
+    </div>
+</div>
diff --git a/ufund-ui/src/app/components/login/login.component.css b/ufund-ui/src/app/components/login/login.component.css
index 4bfcbb8..b56b4eb 100644
--- a/ufund-ui/src/app/components/login/login.component.css
+++ b/ufund-ui/src/app/components/login/login.component.css
@@ -3,7 +3,11 @@
     align-items: center;
     justify-content: center;
     height: 100%;
-    background-image: url("https://www.fineshare.com/background/jellyfish-under-fluorescent-illumination.jpg");
+    /*background-image: url("https://www.fineshare.com/background/jellyfish-under-fluorescent-illumination.jpg");*/
+    background: rgba(0, 0, 0, .65) url("https://4kwallpapers.com/images/wallpapers/blue-jellyfish-aquarium-underwater-glowing-marine-life-1920x1080-3546.jpg");
+    background-blend-mode: darken;
+    margin-top: -66px
+
 }
 
 #box {
@@ -18,7 +22,7 @@
     border-radius: 5px;
     border-style: solid;
     border-width: 1px;
-    border-color: white;
+    border-color: rgb(140, 140, 255);
 }
 
 .border {
diff --git a/ufund-ui/src/index.html b/ufund-ui/src/index.html
index 0517d5e..34fe4b0 100644
--- a/ufund-ui/src/index.html
+++ b/ufund-ui/src/index.html
@@ -6,6 +6,10 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
+
 </head>
 <body>
   <app-root></app-root>
diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css
index bad2232..49b478e 100644
--- a/ufund-ui/src/styles.css
+++ b/ufund-ui/src/styles.css
@@ -11,11 +11,12 @@
 html, body {
     margin: 0;
     height: 100%;
-    background-color: light-dark(white, #242424);
+    background-color: light-dark(white, #000715);
 }
 
 body {
-    font-family: sans-serif;
+    font-family: Inter, sans-serif;
+    font-optical-sizing: auto;
 }
 
 input {
@@ -33,8 +34,8 @@ input {
 
 button, .button {
     font-size: 14pt;
-    padding: 6px 10px;
-    border-radius: 5px;
+    padding: 6px 16px;
+    border-radius: 9999px;
     border-style: none;
     background-color: light-dark(#ebebeb, #3a3a3a);
 
@@ -42,3 +43,13 @@ button, .button {
         background-color: light-dark(#e1e1e1, #444444);
     }
 }
+
+.button2 {
+    text-transform: uppercase;
+    border: 1px solid #5cdbff;
+    padding: 10px 25px;
+    font-size: 12pt;
+    font-weight: 600;
+    background-color: transparent;
+    text-shadow: #5cdbff 0 0 50px;
+}
-- 
cgit v1.2.3


From e1eb3f16e10042c2539b56d6c2d2e33f07abf7d9 Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Fri, 28 Mar 2025 21:37:28 -0400
Subject: Implement new dashboard and mini-need-list

---
 ufund-ui/src/app/app.module.ts                     |  2 +
 .../components/dashboard/dashboard.component.css   |  7 +++
 .../components/dashboard/dashboard.component.html  |  7 +--
 .../components/dashboard/dashboard.component.ts    | 31 ++++++++++--
 .../mini-need-list/mini-need-list.component.css    | 55 ++++++++++++++++++++++
 .../mini-need-list/mini-need-list.component.html   | 17 +++++++
 .../mini-need-list/mini-need-list.component.ts     | 19 ++++++++
 ufund-ui/src/index.html                            | 14 +++---
 ufund-ui/src/styles.css                            |  4 ++
 9 files changed, 141 insertions(+), 15 deletions(-)
 create mode 100644 ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css
 create mode 100644 ufund-ui/src/app/components/mini-need-list/mini-need-list.component.html
 create mode 100644 ufund-ui/src/app/components/mini-need-list/mini-need-list.component.ts

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/app.module.ts b/ufund-ui/src/app/app.module.ts
index 9f525fe..f1d6184 100644
--- a/ufund-ui/src/app/app.module.ts
+++ b/ufund-ui/src/app/app.module.ts
@@ -14,6 +14,7 @@ import {RouterLink, RouterLinkActive, RouterOutlet} from '@angular/router';
 import {DashboardComponent} from './components/dashboard/dashboard.component';
 import {CommonModule} from '@angular/common';
 import {LoginComponent} from './components/login/login.component';
+import { MiniNeedListComponent } from './components/mini-need-list/mini-need-list.component';
 
 @NgModule({
     declarations: [
@@ -25,6 +26,7 @@ import {LoginComponent} from './components/login/login.component';
         NeedListComponent,
         DashboardComponent,
         LoginComponent,
+        MiniNeedListComponent,
     ],
     imports: [
         BrowserModule,
diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.css b/ufund-ui/src/app/components/dashboard/dashboard.component.css
index e69de29..9db015e 100644
--- a/ufund-ui/src/app/components/dashboard/dashboard.component.css
+++ b/ufund-ui/src/app/components/dashboard/dashboard.component.css
@@ -0,0 +1,7 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    width: 1200px;
+    align-self: center;
+    gap: 20px
+}
diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.html b/ufund-ui/src/app/components/dashboard/dashboard.component.html
index a1151b7..330d1f3 100644
--- a/ufund-ui/src/app/components/dashboard/dashboard.component.html
+++ b/ufund-ui/src/app/components/dashboard/dashboard.component.html
@@ -1,4 +1,5 @@
 
-<h1>Dashboard</h1>
-<app-cupboard></app-cupboard>
-<app-funding-basket *ngIf="!isManager()"></app-funding-basket>
\ No newline at end of file
+<h1>Your Dashboard</h1>
+<app-mini-need-list [needList]="topNeeds" jtitle="Top needs" url="/cupboard"/>
+<app-mini-need-list [needList]="almostThere" jtitle="Almost there" url="/cupboard"/>
+<app-mini-need-list [needList]="inBasket" jtitle="In your basket" url="/cupboard"/>
diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.ts b/ufund-ui/src/app/components/dashboard/dashboard.component.ts
index a0ad566..165c7ba 100644
--- a/ufund-ui/src/app/components/dashboard/dashboard.component.ts
+++ b/ufund-ui/src/app/components/dashboard/dashboard.component.ts
@@ -1,6 +1,11 @@
-import {Component} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {userType} from '../../models/User';
 import {AuthService} from '../../services/auth.service';
+import {Router} from '@angular/router';
+import {Need} from '../../models/Need';
+import {CupboardService} from '../../services/cupboard.service';
+import {UsersService} from '../../services/users.service';
+import {firstValueFrom} from 'rxjs';
 
 @Component({
     selector: 'app-dashboard',
@@ -8,14 +13,30 @@ import {AuthService} from '../../services/auth.service';
     templateUrl: './dashboard.component.html',
     styleUrl: './dashboard.component.css'
 })
-export class DashboardComponent {
+export class DashboardComponent implements OnInit{
+
+    topNeeds?: Need[]
+    almostThere?: Need[]
+    inBasket?: Need[]
+
     constructor(
         protected authService: AuthService,
+        protected router: Router,
+        protected cupboardService: CupboardService
     ) {}
 
-    isManager() {
-        const type = this.authService.getCurrentUser()?.type;
-        return type === ("MANAGER" as unknown as userType);
+    ngOnInit() {
+        let user = this.authService.getCurrentUser()
+        if(!user) {
+            this.router.navigate(['/login'])
+            return
+        }
+
+        firstValueFrom(this.cupboardService.getNeeds()).then(r => {
+            this.topNeeds = r.sort((a, b) => b.current - a.current)
+            this.almostThere = r.sort((a, b) => a.current/a.maxGoal - b.current/b.maxGoal)
+            this.inBasket = r.filter(n => n.id in user?.basket)
+        })
     }
 
 }
diff --git a/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css
new file mode 100644
index 0000000..8a3b6a7
--- /dev/null
+++ b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css
@@ -0,0 +1,55 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    border: solid rgba(255, 255, 255, 0.5) 1px;
+    border-radius: 5px;
+}
+
+#header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    border-bottom: solid rgba(255, 255, 255, 0.5) 1px;
+    padding: 10px;
+
+    a {
+        display: flex;
+    }
+}
+
+#needList {
+    display: flex;
+    flex-direction: row;
+    padding: 10px;
+    gap: 10px;
+    justify-content: start;
+}
+
+.needEntry {
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    background-color: #3a3a3a;
+    border-radius: 5px;
+    height: 175px;
+    width: 200px;
+    justify-content: space-between;
+
+    div {
+        display: flex;
+        flex-direction: column;
+    }
+
+    user-select: none;
+    cursor: pointer;
+}
+
+.needName {
+    font-weight: bold;
+}
+
+.needType {
+    text-transform: uppercase;
+    /*font-weight: 300;*/
+    font-size: 10pt;
+}
diff --git a/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.html b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.html
new file mode 100644
index 0000000..a2de9e5
--- /dev/null
+++ b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.html
@@ -0,0 +1,17 @@
+<div id="header">
+    <span>{{jtitle}}</span>
+    <a [routerLink]="url">Show All<span class="icon">arrow_forward_ios</span></a>
+</div>
+
+<div id="needList">
+    <div class="needEntry" *ngFor="let need of needList" [routerLink]="'/need/'+need.id">
+        <div>
+            <span class="needName">{{need.name}}</span>
+            <span class="needType">{{need.type}}</span>
+        </div>
+        <div>
+            <span>{{need.current}}/{{need.maxGoal}}</span>
+            <progress [max]="need.maxGoal" [value]="need.current"></progress>
+        </div>
+    </div>
+</div>
diff --git a/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.ts b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.ts
new file mode 100644
index 0000000..c909ae6
--- /dev/null
+++ b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.ts
@@ -0,0 +1,19 @@
+import {Component, Input} from '@angular/core';
+import {Need} from '../../models/Need';
+
+@Component({
+    selector: 'app-mini-need-list',
+    standalone: false,
+    templateUrl: './mini-need-list.component.html',
+    styleUrl: './mini-need-list.component.css'
+})
+export class MiniNeedListComponent {
+
+    @Input() needList?: Need[]
+    @Input() jtitle?: string
+    @Input() url?: string
+
+    constructor(
+
+    ) {}
+}
diff --git a/ufund-ui/src/index.html b/ufund-ui/src/index.html
index 34fe4b0..b6ae1a2 100644
--- a/ufund-ui/src/index.html
+++ b/ufund-ui/src/index.html
@@ -1,17 +1,17 @@
 <!doctype html>
 <html lang="en">
 <head>
-  <meta charset="utf-8">
-  <title>UfundUi</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <meta charset="utf-8">
+    <title>UfundUi</title>
+    <base href="/">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
-
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
 </head>
 <body>
-  <app-root></app-root>
+<app-root></app-root>
 </body>
 </html>
diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css
index 49b478e..e4b4e8c 100644
--- a/ufund-ui/src/styles.css
+++ b/ufund-ui/src/styles.css
@@ -53,3 +53,7 @@ button, .button {
     background-color: transparent;
     text-shadow: #5cdbff 0 0 50px;
 }
+
+.icon {
+    font-family: 'Material Symbols Outlined'
+}
-- 
cgit v1.2.3


From 9e011d85fd307768f7cec7214ca873208574ecfb Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Fri, 28 Mar 2025 21:56:47 -0400
Subject: changed styling of search display to be wider and expand filter
 descriptions

---
 .../components/need-list/need-list.component.css   |  3 +++
 .../components/need-list/need-list.component.html  | 30 ++++++++++++----------
 .../components/need-list/need-list.component.ts    |  2 +-
 3 files changed, 21 insertions(+), 14 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index 2eb6a8d..19c126f 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -67,4 +67,7 @@ li > button:hover p {
     background-color: #d9d9d9;
     border: 2px solid #000;
     border-radius: 5px;
+    .wide-input {
+        width: 60%;
+    }
  }
\ No newline at end of file
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 693307f..5e9a540 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -1,18 +1,22 @@
 <h1>Needs List</h1>
 <div id="search-container">
-    <label for="sort">Sort by:</label>
-    <select [(ngModel)] = "sortSelection" id="sort" (change)="search(searchForm.value)" [value]="sortSelection">
-        <option *ngFor="let algorithm of SortingAlgoArrays" value="{{algorithm.name}}">
-            {{algorithm.display[sortMode === 'Ascending' ? 0 : 1]}}
-        </option>
-    </select>
-    <button (click)="changeSortMode(searchForm.value)">
-        {{sortMode}}
-    </button>
-    <form id="search-form" #searchForm="ngForm">
-        <input type="text" name="search" placeholder="Search in {{needs.length}} needs..." (input)="search(searchForm.value)" ngModel>
-        <input type="reset" value="Clear" (click)="search(null)"> <br>
-    </form>
+    <section>
+        <label for="sort">Sort by: </label>
+        <select [(ngModel)] = "sortSelection" class="wide-input" (change)="search(searchForm.value)" [value]="sortSelection">
+            <option *ngFor="let algorithm of SortingAlgoArrays" value="{{algorithm.name}}">
+                {{algorithm.display[sortMode === 'Ascending' ? 0 : 1]}}
+            </option>
+        </select>
+        <button (click)="changeSortMode(searchForm.value)">
+            {{sortMode}}
+        </button>
+    </section>
+    <section>
+        <form id="search-form" #searchForm="ngForm">
+            <input type="text" name="search" class="wide-input" placeholder="Search in {{needs.length}} needs..." (input)="search(searchForm.value)" ngModel>
+            <input type="reset" value="Clear" (click)="search(null)"> <br>
+        </form>
+    </section>
     <!--<button (click)="close()">Close</button>-->
 </div>
 
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index f935e03..4359cfa 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -43,7 +43,7 @@ export class NeedListComponent {
   sortSelection: string = 'sortByGoal';
 
   SortingAlgoArrays: {func:sortAlgo,name:string, display:string[]}[] = [
-    {func:sortByGoal,name:"sortByGoal", display:["Max Goal", "Min Goal"]},
+    {func:sortByGoal,name:"sortByGoal", display:["Maximum Goal", "Minimum Goal"]},
     {func:sortByName,name:"sortByName", display:["Name", "Name (Descending)"]},
   ];
 
-- 
cgit v1.2.3


From 61b5b762b150c82e7d48190bcfe3416bfea96059 Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Sat, 29 Mar 2025 14:37:57 -0400
Subject: frontend implementation of a needs' urgency and location

---
 ufund-ui/src/app/components/cupboard/cupboard.component.html |  9 +++++++++
 ufund-ui/src/app/components/cupboard/cupboard.component.ts   |  8 +++++++-
 ufund-ui/src/app/components/need-list/need-list.component.ts | 12 ++++++------
 ufund-ui/src/app/models/Need.ts                              |  2 ++
 4 files changed, 24 insertions(+), 7 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index d54eed9..bc5ac1c 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -13,6 +13,8 @@
         <form #cupboardForm="ngForm" (ngSubmit)="submit(cupboardForm.value)">
             <label>Name:</label><br>
             <input type="text" name="name" ngModel><br>
+            <label>Location:</label><br>
+            <input type="text" name="location" ngModel><br>
             <label>Max Goal:</label><br>
             <input type="number" name="maxGoal" ngModel><br>
             <label>Type</label><br>
@@ -20,7 +22,10 @@
             <label>Monetary</label><br>
             <input type="radio" name="type" value="PHYSICAL" ngModel>
             <label>Physical</label><br>
+            <input type="checkbox" name="urgent" value="false" ngModel>
+            <label>Urgent</label><br>
             <input type="submit" value="Submit">
+            
         </form>
         <span *ngIf="statusText">{{statusText | async}}</span>
 
@@ -30,6 +35,7 @@
         <label>Needs:</label><br>
         <form #updateForm="ngForm" (ngSubmit)="update(updateForm.value)">
             <input type="text" name="name" [(ngModel)]="selectedNeed.name"><br>
+            <input type="text" name="location" [(ngModel)]="selectedNeed.location"><br>
             <label>Max Goal:</label><br>
             <input type="number" name="maxGoal" [(ngModel)]="selectedNeed.maxGoal"><br>
             <label>Type</label><br>
@@ -37,7 +43,10 @@
             <label>Monetary</label><br>
             <input type="radio" name="type" value="PHYSICAL" [(ngModel)]="selectedNeed.type">
             <label>Physical</label><br>
+            <input type="checkbox" name="urgent" [(ngModel)]="selectedNeed.urgent">
+            <label>Urgent</label> <br>
             <input type="submit" value="Submit">
+           
         </form>
         <span *ngIf="statusText">{{statusText | async}}</span>
 
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index a8b9c14..540a058 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -32,9 +32,11 @@ export class CupboardComponent implements OnInit {
 
     selectedNeed: any = {
         name: '',
+        location:'',
         id: null,
         maxGoal: null,
-        type: ''
+        type: '',
+        urgent: false
     };
     selectedNeedId: number | null = null;
     searchResults: any[] = [];
@@ -79,9 +81,11 @@ export class CupboardComponent implements OnInit {
         console.log(form);
         const need: Need = {
             name: form.name,
+            location: form.location,
             id: this.selectedNeed.id, //system will control this
             maxGoal: form.maxGoal,
             type: GoalType[form.type as keyof typeof GoalType],
+            urgent: form.urgent,
             filterAttributes: [],
             current: 0
         };
@@ -113,9 +117,11 @@ export class CupboardComponent implements OnInit {
     submit(form: any) {
         const need: Need = {
             name: form.name,
+            location: form.location,
             id: 0,
             maxGoal: form.maxGoal,
             type: form.type,
+            urgent: form.urgent,
             filterAttributes: [],
             current: 0
         };
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 4359cfa..37a3775 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -1,5 +1,4 @@
-import {Component, input, Output, EventEmitter} from '@angular/core';
-import { NgForm } from '@angular/forms';
+import {Component , Output, EventEmitter} from '@angular/core';
 import {Need} from '../../models/Need';
 import {CupboardService} from '../../services/cupboard.service';
 import { UsersService } from '../../services/users.service';
@@ -39,12 +38,13 @@ export class NeedListComponent {
   searchResults: Need[] = [];
   sortMode = 'Ascending'
 
-  currentSortAlgo: sortAlgo = sortByGoal;
-  sortSelection: string = 'sortByGoal';
+  currentSortAlgo: sortAlgo = sortByName;
+  sortSelection: string = 'sortByName';
 
   SortingAlgoArrays: {func:sortAlgo,name:string, display:string[]}[] = [
-    {func:sortByGoal,name:"sortByGoal", display:["Maximum Goal", "Minimum Goal"]},
-    {func:sortByName,name:"sortByName", display:["Name", "Name (Descending)"]},
+    {func:sortByName,name:"sortByName", display:["Name (Alphabetical)", "Name (Reverse)"]},
+    {func:sortByGoal,name:"sortByGoal", display:["Largest Maximum Goal", "Smallest Maximum Goal"]},
+    {func:sortByName,name:"sortByPriority", display:["Highest Priority", "Lowest Priority"]},
   ];
 
   @Output() currentNeed = new EventEmitter<Need>();
diff --git a/ufund-ui/src/app/models/Need.ts b/ufund-ui/src/app/models/Need.ts
index 9e97fd4..de6504a 100644
--- a/ufund-ui/src/app/models/Need.ts
+++ b/ufund-ui/src/app/models/Need.ts
@@ -2,9 +2,11 @@ export interface Need {
   name: string,
   id: number,
   filterAttributes: string[],
+  location: string;
   type: GoalType;
   maxGoal: number;
   current: number;
+  urgent: boolean;
 }
 
 export enum GoalType {
-- 
cgit v1.2.3


From e0a3f2c2c0fec40aa50c8889e343a1dbc7f9d7fb Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Sat, 29 Mar 2025 15:01:12 -0400
Subject: API functionality for urgency and location

---
 ufund-ui/src/app/components/need-list/need-list.component.html | 2 +-
 ufund-ui/src/app/components/need-page/need-page.component.html | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 5e9a540..ed151a3 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -28,7 +28,7 @@
 <ul>
     <li *ngFor="let need of searchResults" id="need-button-{{need.id}}">
         <button [routerLink]="'/need/' + need.id" (mouseenter) ="changeText(need.id, '(details)')" (mouseleave)="changeText(need.id, '')">
-            <p>{{need.name}}<span id="hover-status-label-{{need.id}}"> </span></p>
+            <p>{{need.name}} <span id="hover-status-label-{{need.id}}"> </span></p>
         </button>
 
         <button (click)="add(need)" *ngIf="isHelper()">Add To Basket</button>
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 90fd459..004f9eb 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
@@ -16,7 +16,8 @@
 </div>
 
 <hr>
-
+<p>Location: {{need?.location}}</p>
 <p>Goal: {{need?.maxGoal}}</p>
 <p>Current: {{need?.current}}</p>
+<p>Urgent: {{need?.urgent}}</p>
 <p>This goal is <strong>{{(((need?.current ?? 0)*100) / (need?.maxGoal ?? 0)).toFixed(0)}}%</strong> complete!</p>
\ No newline at end of file
-- 
cgit v1.2.3


From 785d0df231d0cfdbf63f5ed60b56fb882f694725 Mon Sep 17 00:00:00 2001
From: Gunther6070 <haydenhartman10@yahoo.com>
Date: Sat, 29 Mar 2025 15:28:59 -0400
Subject: Finished implementing signup page and checked for the majority of
 edge cases.

---
 .../src/app/components/signup/signup.component.css | 23 +++++--
 .../app/components/signup/signup.component.html    | 23 +++----
 .../src/app/components/signup/signup.component.ts  | 80 ++++++++++++++++------
 3 files changed, 85 insertions(+), 41 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/signup/signup.component.css b/ufund-ui/src/app/components/signup/signup.component.css
index 799cbd2..2fa5051 100644
--- a/ufund-ui/src/app/components/signup/signup.component.css
+++ b/ufund-ui/src/app/components/signup/signup.component.css
@@ -16,16 +16,27 @@
 }
 
 #bar {
+    height: 5px;
     width: 100%;
-    height: 20px;
-    -webkit-appearance: none;
     appearance: none;
-    border: none;
-    border-radius: 10px;
     overflow: hidden;
-    background-color: red;
+    margin-top: -5px;
 }
 
-#requirement2 {
+#bar::-webkit-progress-bar {
+    background-color: lightgray;
+    transition: width 0.5s ease-in-out, background-color 0.5s ease-in-out;
+}
+
+.color0::-webkit-progress-value { background: rgba(255, 0 ,0, 1); transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out; }
+.color1::-webkit-progress-value { background: rgba(255, 0 ,0, 1); transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out; }
+.color2::-webkit-progress-value { background: rgba(255, 165, 0, 1); transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out; }
+.color3::-webkit-progress-value { background: rgba(255, 255, 0, 1); transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out; }
+.color4::-webkit-progress-value { background: rgba(173, 255, 47, 1); transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out; }
+.color5::-webkit-progress-value { background: rgba(50, 205, 50, 1); transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out; }
+.color6::-webkit-progress-value { background: rgba(0, 128, 0, 1); transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out; }
+
+#requirement2, #statusText, #passwordStatusText, #usernameStatusText {
     color: red;
 }
+
diff --git a/ufund-ui/src/app/components/signup/signup.component.html b/ufund-ui/src/app/components/signup/signup.component.html
index 1b50d39..e078123 100644
--- a/ufund-ui/src/app/components/signup/signup.component.html
+++ b/ufund-ui/src/app/components/signup/signup.component.html
@@ -1,16 +1,13 @@
 <p>Signup:</p>
-<input placeholder="Username" type="text" #username>
-<input placeholder="Password" type="password" (input)="checkPasswordStrength(password.value)" #password>
-<button type="button" [disabled]="passwordStrongEnough | async" (click)="signup(username.value, password.value)">Create Account</button>
-
-<div id="requirement2" *ngIf="test"> {{test | async}} </div>
-
-<progress id="bar" [value]="strength | async" max="6">  </progress>
-
-<span *ngFor="let requirement of passwordRequirements">
-    <span id="requirement" *ngIf="passwordRequirements" [style.color]="color | async"> {{requirement}} </span>
+<input placeholder="Username" type="text" (input)="comparePassword(username.value, confirmPass.value, password.value)" #username>
+<span id="usernameStatusText" *ngIf="usernameStatusText">{{usernameStatusText | async}}</span>
+<input placeholder="Password" type="password" (input)="comparePassword(username.value, confirmPass.value, password.value)" #password>
+<progress [ngClass]="'color' + strength.getValue()" id="bar" [value]="strength | async" max="6">  </progress>
+<span id="statusText" *ngIf="statusText">{{statusText | async}}</span>
+<span *ngFor="let requirement of Object.values(passwordRequirements)">
+    <span id="requirement" *ngIf="passwordRequirements" [style.color]="requirement.value ? 'green' : 'red'"> {{requirement.title}} </span>
 </span>
-
-<span *ngIf="statusText">{{statusText | async}}</span>
-<span *ngIf="strength">{{strength | async}}</span>
+<input placeholder="Confirm password" type="password" (input)="comparePassword(username.value, confirmPass.value, password.value)" #confirmPass>
+<span id="passwordStatusText" *ngIf="passwordStatusText">{{passwordStatusText | async}}</span>
+<button type="button" [disabled]="!(ableToCreateAccount | async)" (click)="signup(username.value, password.value)">Create Account</button>
 <span *ngIf="showSuccessMessage | async">Account created <a routerLink="/login">Proceed to login</a></span>
diff --git a/ufund-ui/src/app/components/signup/signup.component.ts b/ufund-ui/src/app/components/signup/signup.component.ts
index 9532e42..b3432e6 100644
--- a/ufund-ui/src/app/components/signup/signup.component.ts
+++ b/ufund-ui/src/app/components/signup/signup.component.ts
@@ -1,23 +1,34 @@
-import { Component } from '@angular/core';
+import {Component, ElementRef, ViewChild} from '@angular/core';
 import {UsersService} from '../../services/users.service';
 import {Router} from '@angular/router';
 import {BehaviorSubject} from 'rxjs';
 
+class PasswordRequirements {
+    sixLong:   {title: string, value: boolean} = {title: 'Is 6 characters or longer', value: false}
+    twelveLong:   {title: string, value: boolean} = {title: 'Is 12 characters or longer', value: false}
+    lowercase: {title: string, value: boolean} = {title: 'Includes lowercase letter', value: false}
+    uppercase: {title: string, value: boolean} = {title: 'Includes uppercase letter', value: false}
+    number:    {title: string, value: boolean} = {title: 'Includes number'          , value: false}
+    symbol:    {title: string, value: boolean} = {title: 'Includes symbol'          , value: false}
+}
+
 @Component({
   selector: 'app-signup',
   standalone: false,
   templateUrl: './signup.component.html',
   styleUrl: './signup.component.css'
 })
+
 export class SignupComponent {
 
     protected statusText = new BehaviorSubject("")
+    protected passwordStatusText = new BehaviorSubject("")
+    protected usernameStatusText = new BehaviorSubject("")
     protected showSuccessMessage = new BehaviorSubject(false)
-    protected passwordStrongEnough = new BehaviorSubject(true)
-    passwordRequirements: String[] = [("❌ Password length"), ("❌ Lowercase letters")];
+    protected passwordStrongEnough = new BehaviorSubject(false)
+    protected ableToCreateAccount = new BehaviorSubject(false)
+    protected passwordRequirements: PasswordRequirements = new PasswordRequirements()
     protected strength = new BehaviorSubject(0)
-    protected color = new BehaviorSubject("red")
-    protected test = new BehaviorSubject("Password does not meet requirements")
 
     constructor(
         protected usersService: UsersService,
@@ -38,49 +49,74 @@ export class SignupComponent {
         })
     }
 
+    comparePassword(username: string, passConfirm:string, password: string) {
+        this.passwordStatusText.next("")
+        this.usernameStatusText.next("")
+        this.checkPasswordStrength(password);
+
+        if (username === "") {
+            this.usernameStatusText.next("Username field can't be blank")
+        }
+
+        if (!(password === passConfirm) && !!passConfirm) {
+            this.passwordStatusText.next("Passwords don't match")
+        }
+        this.ableToCreateAccount.next(this.passwordStrongEnough.getValue() && password === passConfirm && !!username)
+    }
+
     checkPasswordStrength(password: string) {
-        this.passwordRequirements = [("❌ Password length"), ("❌ Lowercase letters")];
-        this.test.next("Password does not meet requirements")
-        this.statusText.next("")
-        this.passwordStrongEnough.next(true)
-        this.color.next("red")
+        this.strength.next(0)
+        this.passwordRequirements = new PasswordRequirements()
+        this.passwordStrongEnough.next(false)
 
         if (password.match(/[^!-~]/g)) {
             this.statusText.next("Invalid characters")
+
             return
         }
 
-        let strength = 0;
         if (password.length > 6) {
-            strength++
-            this.passwordRequirements[0] = "✅ Password length"
-            this.color.next("green")
+            this.passwordRequirements.sixLong.value = true
         }
         if (password.length > 12) {
-            strength++
+            this.passwordRequirements.twelveLong.value = true
         }
         if (password.match(/[a-z]/g)) {
-            strength++
+            this.passwordRequirements.lowercase.value = true
         }
         if (password.match(/[A-Z]/g)) {
-            strength++
+            this.passwordRequirements.uppercase.value = true
         }
         if (password.match(/[0-9]/g)) {
-            strength++
+            this.passwordRequirements.number.value = true
         }
-        if (password.match(/[!-/]/g)) {
-            strength++
+        if (password.match(/[^A-Za-z0-9]/g)) {
+            this.passwordRequirements.symbol.value = true
         }
 
+        let strength = 0
+        Object.values(this.passwordRequirements).forEach(k => {
+            k.value && strength++
+        })
+
         if (strength >= 5) {
-            this.passwordStrongEnough.next(false)
-            this.test.next("")
+            this.passwordStrongEnough.next(true)
+            this.statusText.next("")
+        } else if (strength == 0) {
+            this.statusText.next("")
+        } else {
+            this.statusText.next("Password does not meet requirements")
         }
 
         this.strength.next(strength)
     }
 
+    getColor() {
+        return `rgba(${(this.strength.getValue()/7) * 255}, ${255 - (this.strength.getValue()/7) * 255}, 0)`
+    }
+
     protected readonly length = length;
+    protected readonly Object = Object;
 }
 
 let friendlyHttpStatus: {[key: number]: string} = {
-- 
cgit v1.2.3


From b539c504782072fe933668b893c708bf577443dd Mon Sep 17 00:00:00 2001
From: Gunther6070 <haydenhartman10@yahoo.com>
Date: Sat, 29 Mar 2025 15:29:16 -0400
Subject: Finished implementing signup page and checked for the majority of
 edge cases.

---
 ufund-ui/src/app/components/signup/signup.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/signup/signup.component.ts b/ufund-ui/src/app/components/signup/signup.component.ts
index b3432e6..383d6a7 100644
--- a/ufund-ui/src/app/components/signup/signup.component.ts
+++ b/ufund-ui/src/app/components/signup/signup.component.ts
@@ -1,4 +1,4 @@
-import {Component, ElementRef, ViewChild} from '@angular/core';
+import {Component} from '@angular/core';
 import {UsersService} from '../../services/users.service';
 import {Router} from '@angular/router';
 import {BehaviorSubject} from 'rxjs';
-- 
cgit v1.2.3


From 41c92354536d5545dee97e368b3a4b3c25c1a77f Mon Sep 17 00:00:00 2001
From: Gunther6070 <haydenhartman10@yahoo.com>
Date: Sat, 29 Mar 2025 15:47:46 -0400
Subject: Added emojis before requirements

---
 .../src/app/components/signup/signup.component.html    |  8 ++++++++
 ufund-ui/src/app/components/signup/signup.component.ts | 18 ++++++++++++------
 2 files changed, 20 insertions(+), 6 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/signup/signup.component.html b/ufund-ui/src/app/components/signup/signup.component.html
index e078123..e282a9c 100644
--- a/ufund-ui/src/app/components/signup/signup.component.html
+++ b/ufund-ui/src/app/components/signup/signup.component.html
@@ -1,13 +1,21 @@
 <p>Signup:</p>
 <input placeholder="Username" type="text" (input)="comparePassword(username.value, confirmPass.value, password.value)" #username>
 <span id="usernameStatusText" *ngIf="usernameStatusText">{{usernameStatusText | async}}</span>
+
 <input placeholder="Password" type="password" (input)="comparePassword(username.value, confirmPass.value, password.value)" #password>
+
 <progress [ngClass]="'color' + strength.getValue()" id="bar" [value]="strength | async" max="6">  </progress>
+
 <span id="statusText" *ngIf="statusText">{{statusText | async}}</span>
+
 <span *ngFor="let requirement of Object.values(passwordRequirements)">
     <span id="requirement" *ngIf="passwordRequirements" [style.color]="requirement.value ? 'green' : 'red'"> {{requirement.title}} </span>
 </span>
+
 <input placeholder="Confirm password" type="password" (input)="comparePassword(username.value, confirmPass.value, password.value)" #confirmPass>
+
 <span id="passwordStatusText" *ngIf="passwordStatusText">{{passwordStatusText | async}}</span>
+
 <button type="button" [disabled]="!(ableToCreateAccount | async)" (click)="signup(username.value, password.value)">Create Account</button>
+
 <span *ngIf="showSuccessMessage | async">Account created <a routerLink="/login">Proceed to login</a></span>
diff --git a/ufund-ui/src/app/components/signup/signup.component.ts b/ufund-ui/src/app/components/signup/signup.component.ts
index 383d6a7..60f4098 100644
--- a/ufund-ui/src/app/components/signup/signup.component.ts
+++ b/ufund-ui/src/app/components/signup/signup.component.ts
@@ -4,12 +4,12 @@ import {Router} from '@angular/router';
 import {BehaviorSubject} from 'rxjs';
 
 class PasswordRequirements {
-    sixLong:   {title: string, value: boolean} = {title: 'Is 6 characters or longer', value: false}
-    twelveLong:   {title: string, value: boolean} = {title: 'Is 12 characters or longer', value: false}
-    lowercase: {title: string, value: boolean} = {title: 'Includes lowercase letter', value: false}
-    uppercase: {title: string, value: boolean} = {title: 'Includes uppercase letter', value: false}
-    number:    {title: string, value: boolean} = {title: 'Includes number'          , value: false}
-    symbol:    {title: string, value: boolean} = {title: 'Includes symbol'          , value: false}
+    sixLong:   {title: string, value: boolean} = {title: '❌ Is 6 characters or longer', value: false}
+    twelveLong:   {title: string, value: boolean} = {title: '❌ Is 12 characters or longer', value: false}
+    lowercase: {title: string, value: boolean} = {title: '❌ Includes lowercase letter', value: false}
+    uppercase: {title: string, value: boolean} = {title: '❌ Includes uppercase letter', value: false}
+    number:    {title: string, value: boolean} = {title: '❌ Includes number'          , value: false}
+    symbol:    {title: string, value: boolean} = {title: '❌ Includes symbol'          , value: false}
 }
 
 @Component({
@@ -76,21 +76,27 @@ export class SignupComponent {
         }
 
         if (password.length > 6) {
+            this.passwordRequirements.sixLong.title = '✅ Is 6 characters or longer'
             this.passwordRequirements.sixLong.value = true
         }
         if (password.length > 12) {
+            this.passwordRequirements.twelveLong.title = '✅ Is 12 characters or longer'
             this.passwordRequirements.twelveLong.value = true
         }
         if (password.match(/[a-z]/g)) {
+            this.passwordRequirements.lowercase.title = '✅ Includes lowercase letter'
             this.passwordRequirements.lowercase.value = true
         }
         if (password.match(/[A-Z]/g)) {
+            this.passwordRequirements.uppercase.title = '✅ Includes uppercase letter'
             this.passwordRequirements.uppercase.value = true
         }
         if (password.match(/[0-9]/g)) {
+            this.passwordRequirements.number.title = '✅ Includes number'
             this.passwordRequirements.number.value = true
         }
         if (password.match(/[^A-Za-z0-9]/g)) {
+            this.passwordRequirements.symbol.title = '✅ Includes symbol'
             this.passwordRequirements.symbol.value = true
         }
 
-- 
cgit v1.2.3


From 88650361adfc9be8344b0d383100b0c6ab513973 Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Sun, 30 Mar 2025 00:33:41 -0400
Subject: basic css and info display for needs

---
 .../src/app/components/need-list/need-list.component.css    | 13 +++++++++++--
 .../src/app/components/need-list/need-list.component.html   |  9 ++++++++-
 2 files changed, 19 insertions(+), 3 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index 19c126f..345326f 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -31,12 +31,21 @@ li {
     > button {
         background-color: transparent;
         width: 88%;
-        float: left;
         transition: all 0.3s ease;
         font-weight: bold;
-        display: flex;
         border: none;
         border-radius: 5px;
+        padding-left: 1.5%;
+        > section {
+            width: 100%;
+            flex: none;
+            display: inline-block;
+            background-color: magenta;            
+            > progress {
+                width: 25%;
+                float: none;
+            }
+        }
     }
 
     > section {
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index ed151a3..88b9752 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -28,7 +28,14 @@
 <ul>
     <li *ngFor="let need of searchResults" id="need-button-{{need.id}}">
         <button [routerLink]="'/need/' + need.id" (mouseenter) ="changeText(need.id, '(details)')" (mouseleave)="changeText(need.id, '')">
-            <p>{{need.name}} <span id="hover-status-label-{{need.id}}"> </span></p>
+            <section>{{need.name}} | {{need.location}} {{need.urgent ? "URGENT" : ""}}<span id="hover-status-label-{{need.id}}"> </span></section>
+            <section>
+                <progress value="need.current" max="need.maxGoal"></progress>
+                <progress value="need.current" max="need.maxGoal"></progress>
+                <progress value="need.current" max="need.maxGoal"></progress>
+                <progress value="need.current" max="need.maxGoal"></progress>
+            </section>
+            <section>{{need.current}}/{{need.maxGoal}} {{(need.current / need.maxGoal) * 100}}% <span>{{need.type}}</span></section>
         </button>
 
         <button (click)="add(need)" *ngIf="isHelper()">Add To Basket</button>
-- 
cgit v1.2.3


From daae556a1be7a30bc6f4606bd1b1567b713d054a Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Sun, 30 Mar 2025 00:39:23 -0400
Subject: better display for urgency

---
 ufund-ui/src/app/components/need-list/need-list.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 88b9752..866e5e4 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -28,7 +28,7 @@
 <ul>
     <li *ngFor="let need of searchResults" id="need-button-{{need.id}}">
         <button [routerLink]="'/need/' + need.id" (mouseenter) ="changeText(need.id, '(details)')" (mouseleave)="changeText(need.id, '')">
-            <section>{{need.name}} | {{need.location}} {{need.urgent ? "URGENT" : ""}}<span id="hover-status-label-{{need.id}}"> </span></section>
+            <section> <p> {{need.name}} | {{need.location}} <span> {{need.urgent ? "URGENT" : ""}} </span> <span id="hover-status-label-{{need.id}}"> </span> </section>
             <section>
                 <progress value="need.current" max="need.maxGoal"></progress>
                 <progress value="need.current" max="need.maxGoal"></progress>
-- 
cgit v1.2.3


From 760b8efef4d683d26404ebca75b7a9c44a1db3a9 Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Sun, 30 Mar 2025 00:46:50 -0400
Subject: urgency sorting

---
 .../src/app/components/cupboard/cupboard.component.ts    |  2 +-
 .../src/app/components/need-list/need-list.component.ts  | 16 +++++++++++++---
 2 files changed, 14 insertions(+), 4 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index 540a058..ad68c38 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -121,7 +121,7 @@ export class CupboardComponent implements OnInit {
             id: 0,
             maxGoal: form.maxGoal,
             type: form.type,
-            urgent: form.urgent,
+            urgent: form.urgent ? true : false,
             filterAttributes: [],
             current: 0
         };
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 37a3775..4ae8f4a 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -26,6 +26,16 @@ const sortByGoal: sortAlgo = (a: Need, b: Need): number => {
   return 1;
 }
 
+const sortByPriority: sortAlgo = (a: Need, b: Need): number => {
+  if(a.urgent == b.urgent) {
+    return sortByGoal(a,b);
+  }
+  else if(a.urgent && !b.urgent) {
+    return -1;
+  }
+  return 1;
+}
+
 @Component({
   selector: 'app-need-list',
   standalone: false,
@@ -38,13 +48,13 @@ export class NeedListComponent {
   searchResults: Need[] = [];
   sortMode = 'Ascending'
 
-  currentSortAlgo: sortAlgo = sortByName;
-  sortSelection: string = 'sortByName';
+  currentSortAlgo: sortAlgo = sortByPriority;
+  sortSelection: string = 'sortByPriority';
 
   SortingAlgoArrays: {func:sortAlgo,name:string, display:string[]}[] = [
     {func:sortByName,name:"sortByName", display:["Name (Alphabetical)", "Name (Reverse)"]},
     {func:sortByGoal,name:"sortByGoal", display:["Largest Maximum Goal", "Smallest Maximum Goal"]},
-    {func:sortByName,name:"sortByPriority", display:["Highest Priority", "Lowest Priority"]},
+    {func:sortByPriority,name:"sortByPriority", display:["Highest Priority", "Lowest Priority"]},
   ];
 
   @Output() currentNeed = new EventEmitter<Need>();
-- 
cgit v1.2.3


From f23afc7f3b0b62384b3b54a0864b02abc3b48b01 Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Sun, 30 Mar 2025 00:50:43 -0400
Subject: sortByCompletion

---
 .../src/app/components/need-list/need-list.component.ts     | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 4ae8f4a..17bb3e6 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -26,6 +26,16 @@ const sortByGoal: sortAlgo = (a: Need, b: Need): number => {
   return 1;
 }
 
+const sortByCompletion: sortAlgo = (a: Need, b: Need): number => {
+  if(a.current == b.current) {
+    return sortByGoal(a,b);
+  }
+  else if(a.current > b.current) {
+    return -1;
+  }
+  return 1;
+}
+
 const sortByPriority: sortAlgo = (a: Need, b: Need): number => {
   if(a.urgent == b.urgent) {
     return sortByGoal(a,b);
@@ -52,8 +62,9 @@ export class NeedListComponent {
   sortSelection: string = 'sortByPriority';
 
   SortingAlgoArrays: {func:sortAlgo,name:string, display:string[]}[] = [
-    {func:sortByName,name:"sortByName", display:["Name (Alphabetical)", "Name (Reverse)"]},
+    {func:sortByName,name:"sortByName", display:["Name (A to Z)", "Name (Z to A)"]},
     {func:sortByGoal,name:"sortByGoal", display:["Largest Maximum Goal", "Smallest Maximum Goal"]},
+    {func:sortByCompletion,name:"sortByCompletion", display:["Most Completed", "Least Completed"]},
     {func:sortByPriority,name:"sortByPriority", display:["Highest Priority", "Lowest Priority"]},
   ];
 
-- 
cgit v1.2.3


From 3c9a9004780c0b91772fd7f868c642bdadb60348 Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Sun, 30 Mar 2025 14:10:09 -0400
Subject: Clean up signup component

---
 .../src/app/components/login/login.component.html  |  2 +-
 .../src/app/components/signup/signup.component.css | 11 ++++--
 .../app/components/signup/signup.component.html    | 45 ++++++++++++----------
 .../src/app/components/signup/signup.component.ts  | 35 ++++++++---------
 4 files changed, 49 insertions(+), 44 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/login/login.component.html b/ufund-ui/src/app/components/login/login.component.html
index 2cdb6d0..a6441f4 100644
--- a/ufund-ui/src/app/components/login/login.component.html
+++ b/ufund-ui/src/app/components/login/login.component.html
@@ -3,5 +3,5 @@
 <input placeholder="Username" type="text" #username>
 <input placeholder="Password" type="password" #password>
 <button type="button" (click)="login(username.value, password.value)">Login</button>
-<button type="button" (click)="signup(username.value, password.value)">Create Account</button>
+<button type="button" routerLink="/signup">Create Account...</button>
 <span *ngIf="statusText">{{statusText | async}}</span>
diff --git a/ufund-ui/src/app/components/signup/signup.component.css b/ufund-ui/src/app/components/signup/signup.component.css
index 2fa5051..f286cf9 100644
--- a/ufund-ui/src/app/components/signup/signup.component.css
+++ b/ufund-ui/src/app/components/signup/signup.component.css
@@ -1,8 +1,13 @@
-:host, .border {
+:host {
     display: flex;
     flex-direction: column;
     max-width: 300px;
-    gap: 5px
+    gap: 10px;
+
+    & > div {
+        display: flex;
+        flex-direction: column;
+    }
 }
 
 .border {
@@ -20,7 +25,7 @@
     width: 100%;
     appearance: none;
     overflow: hidden;
-    margin-top: -5px;
+    /*margin-top: -5px;*/
 }
 
 #bar::-webkit-progress-bar {
diff --git a/ufund-ui/src/app/components/signup/signup.component.html b/ufund-ui/src/app/components/signup/signup.component.html
index e282a9c..ebedc2a 100644
--- a/ufund-ui/src/app/components/signup/signup.component.html
+++ b/ufund-ui/src/app/components/signup/signup.component.html
@@ -1,21 +1,26 @@
 <p>Signup:</p>
-<input placeholder="Username" type="text" (input)="comparePassword(username.value, confirmPass.value, password.value)" #username>
-<span id="usernameStatusText" *ngIf="usernameStatusText">{{usernameStatusText | async}}</span>
-
-<input placeholder="Password" type="password" (input)="comparePassword(username.value, confirmPass.value, password.value)" #password>
-
-<progress [ngClass]="'color' + strength.getValue()" id="bar" [value]="strength | async" max="6">  </progress>
-
-<span id="statusText" *ngIf="statusText">{{statusText | async}}</span>
-
-<span *ngFor="let requirement of Object.values(passwordRequirements)">
-    <span id="requirement" *ngIf="passwordRequirements" [style.color]="requirement.value ? 'green' : 'red'"> {{requirement.title}} </span>
-</span>
-
-<input placeholder="Confirm password" type="password" (input)="comparePassword(username.value, confirmPass.value, password.value)" #confirmPass>
-
-<span id="passwordStatusText" *ngIf="passwordStatusText">{{passwordStatusText | async}}</span>
-
-<button type="button" [disabled]="!(ableToCreateAccount | async)" (click)="signup(username.value, password.value)">Create Account</button>
-
-<span *ngIf="showSuccessMessage | async">Account created <a routerLink="/login">Proceed to login</a></span>
+<div>
+    <input placeholder="Username" type="text" (input)="validate(username.value, confirmPass.value, password.value)" #username>
+    <span *ngIf="usernameStatusText">{{usernameStatusText | async}}</span>
+</div>
+
+<div>
+    <input placeholder="Password" type="password" (input)="validate(username.value, confirmPass.value, password.value)" #password>
+    <progress [ngClass]="'color' + strength.getValue()" id="bar" [value]="strength | async" max="6">  </progress>
+    <span *ngIf="passwordStatusText">{{passwordStatusText | async}}</span>
+
+    <span *ngFor="let requirement of Object.values(passwordRequirements)">
+        <span *ngIf="passwordRequirements" [style.color]="requirement.value ? 'green' : 'red'"> {{requirement.title}} </span>
+    </span>
+</div>
+
+<div>
+    <input placeholder="Confirm password" type="password" (input)="validate(username.value, confirmPass.value, password.value)" #confirmPass>
+    <span *ngIf="confirmPassStatusText">{{confirmPassStatusText | async}}</span>
+</div>
+
+<div>
+    <button [disabled]="!(ableToCreateAccount | async)" (click)="signup(username.value, password.value)">Create Account</button>
+    <span *ngIf="showSuccessMessage | async">Account created <a routerLink="/login">Proceed to login</a></span>
+    <span *ngIf="statusText | async">{{statusText | async}}</span>
+</div>
diff --git a/ufund-ui/src/app/components/signup/signup.component.ts b/ufund-ui/src/app/components/signup/signup.component.ts
index 60f4098..3b43287 100644
--- a/ufund-ui/src/app/components/signup/signup.component.ts
+++ b/ufund-ui/src/app/components/signup/signup.component.ts
@@ -4,12 +4,12 @@ import {Router} from '@angular/router';
 import {BehaviorSubject} from 'rxjs';
 
 class PasswordRequirements {
-    sixLong:   {title: string, value: boolean} = {title: '❌ Is 6 characters or longer', value: false}
-    twelveLong:   {title: string, value: boolean} = {title: '❌ Is 12 characters or longer', value: false}
-    lowercase: {title: string, value: boolean} = {title: '❌ Includes lowercase letter', value: false}
-    uppercase: {title: string, value: boolean} = {title: '❌ Includes uppercase letter', value: false}
-    number:    {title: string, value: boolean} = {title: '❌ Includes number'          , value: false}
-    symbol:    {title: string, value: boolean} = {title: '❌ Includes symbol'          , value: false}
+    sixLong:    {title: string, value: boolean} = {title: 'Is 6 characters or longer' , value: false}
+    twelveLong: {title: string, value: boolean} = {title: 'Is 12 characters or longer', value: false}
+    lowercase:  {title: string, value: boolean} = {title: 'Includes lowercase letter' , value: false}
+    uppercase:  {title: string, value: boolean} = {title: 'Includes uppercase letter' , value: false}
+    number:     {title: string, value: boolean} = {title: 'Includes number'           , value: false}
+    symbol:     {title: string, value: boolean} = {title: 'Includes symbol'           , value: false}
 }
 
 @Component({
@@ -21,14 +21,15 @@ class PasswordRequirements {
 
 export class SignupComponent {
 
-    protected statusText = new BehaviorSubject("")
     protected passwordStatusText = new BehaviorSubject("")
+    protected confirmPassStatusText = new BehaviorSubject("")
     protected usernameStatusText = new BehaviorSubject("")
     protected showSuccessMessage = new BehaviorSubject(false)
     protected passwordStrongEnough = new BehaviorSubject(false)
     protected ableToCreateAccount = new BehaviorSubject(false)
     protected passwordRequirements: PasswordRequirements = new PasswordRequirements()
     protected strength = new BehaviorSubject(0)
+    protected statusText = new BehaviorSubject("");
 
     constructor(
         protected usersService: UsersService,
@@ -49,8 +50,8 @@ export class SignupComponent {
         })
     }
 
-    comparePassword(username: string, passConfirm:string, password: string) {
-        this.passwordStatusText.next("")
+    validate(username: string, passConfirm:string, password: string) {
+        this.confirmPassStatusText.next("")
         this.usernameStatusText.next("")
         this.checkPasswordStrength(password);
 
@@ -59,7 +60,7 @@ export class SignupComponent {
         }
 
         if (!(password === passConfirm) && !!passConfirm) {
-            this.passwordStatusText.next("Passwords don't match")
+            this.confirmPassStatusText.next("Passwords don't match")
         }
         this.ableToCreateAccount.next(this.passwordStrongEnough.getValue() && password === passConfirm && !!username)
     }
@@ -70,33 +71,27 @@ export class SignupComponent {
         this.passwordStrongEnough.next(false)
 
         if (password.match(/[^!-~]/g)) {
-            this.statusText.next("Invalid characters")
+            this.passwordStatusText.next("Invalid characters")
 
             return
         }
 
         if (password.length > 6) {
-            this.passwordRequirements.sixLong.title = '✅ Is 6 characters or longer'
             this.passwordRequirements.sixLong.value = true
         }
         if (password.length > 12) {
-            this.passwordRequirements.twelveLong.title = '✅ Is 12 characters or longer'
             this.passwordRequirements.twelveLong.value = true
         }
         if (password.match(/[a-z]/g)) {
-            this.passwordRequirements.lowercase.title = '✅ Includes lowercase letter'
             this.passwordRequirements.lowercase.value = true
         }
         if (password.match(/[A-Z]/g)) {
-            this.passwordRequirements.uppercase.title = '✅ Includes uppercase letter'
             this.passwordRequirements.uppercase.value = true
         }
         if (password.match(/[0-9]/g)) {
-            this.passwordRequirements.number.title = '✅ Includes number'
             this.passwordRequirements.number.value = true
         }
         if (password.match(/[^A-Za-z0-9]/g)) {
-            this.passwordRequirements.symbol.title = '✅ Includes symbol'
             this.passwordRequirements.symbol.value = true
         }
 
@@ -107,11 +102,11 @@ export class SignupComponent {
 
         if (strength >= 5) {
             this.passwordStrongEnough.next(true)
-            this.statusText.next("")
+            this.passwordStatusText.next("")
         } else if (strength == 0) {
-            this.statusText.next("")
+            this.passwordStatusText.next("")
         } else {
-            this.statusText.next("Password does not meet requirements")
+            this.passwordStatusText.next("Password does not meet requirements")
         }
 
         this.strength.next(strength)
-- 
cgit v1.2.3


From 42725635e70426c4d2923c680609da8277c693ea Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Sun, 30 Mar 2025 14:44:04 -0400
Subject: fix imports in need-list.component.ts

---
 .../components/need-list/need-list.component.ts    | 25 +++++++++++++---------
 1 file changed, 15 insertions(+), 10 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 2bbacb0..66e53e8 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -3,6 +3,8 @@ import {Need} from '../../models/Need';
 import {CupboardService} from '../../services/cupboard.service';
 import { UsersService } from '../../services/users.service';
 import { userType } from '../../models/User';
+import {AuthService} from '../../services/auth.service';
+import {catchError, of} from 'rxjs';
 
 interface sortAlgo {
   (a: Need,b: Need): number;
@@ -72,7 +74,8 @@ export class NeedListComponent {
 
   constructor(
     private cupboardService: CupboardService,
-    private usersService: UsersService
+    private usersService: UsersService,
+    private authService: AuthService
   ) {}
 
     refresh() {
@@ -148,12 +151,12 @@ export class NeedListComponent {
   }
 
   isManager() {
-    const type = this.usersService.getCurrentUser()?.type;
+    const type = this.authService.getCurrentUser()?.type;
     return type === ("MANAGER" as unknown as userType);
   }
 
   isHelper() {
-    const type = this.usersService.getCurrentUser()?.type;
+    const type = this.authService.getCurrentUser()?.type;
     return type === ("HELPER" as unknown as userType);
   }
 
@@ -165,17 +168,19 @@ export class NeedListComponent {
   }
 
   add(need: Need) {
-    const currentUser = this.usersService.getCurrentUser();
+    const currentUser = this.authService.getCurrentUser();
     //console.log("get current user in angular:", currentUser)
     if (currentUser) {
       if (!currentUser.basket.includes(need.id)) {
         currentUser.basket.push(need.id);
-        this.usersService.updateUser(currentUser).subscribe(() => {
-          this.usersService.refreshBasket();
-          error: (err: any) => {
-            console.error(err);
-          }
-        });
+        this.usersService.updateUser(currentUser)
+            .pipe(catchError((err, _) =>  {
+                console.error(err);
+                return of();
+            }))
+            .subscribe(() => {
+                this.usersService.refreshBasket();
+            });
       } else {
         window.alert("This need is already in your basket!")
       }
-- 
cgit v1.2.3


From 5eba2e924c57a7771c002fa3833beb5ed4275fd2 Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Sun, 30 Mar 2025 16:44:38 -0400
Subject: location filter, filter order change, and refresh() resets search
 field for increased usability

---
 .../components/need-list/need-list.component.ts    | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 66e53e8..af8cab4 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -1,4 +1,5 @@
 import {Component , Output, EventEmitter} from '@angular/core';
+import { NgForm } from '@angular/forms';
 import {Need} from '../../models/Need';
 import {CupboardService} from '../../services/cupboard.service';
 import { UsersService } from '../../services/users.service';
@@ -48,6 +49,13 @@ const sortByPriority: sortAlgo = (a: Need, b: Need): number => {
   return 1;
 }
 
+const sortByLocation: sortAlgo = (a: Need, b: Need): number => {
+  if(a.location.toLocaleLowerCase() < b.location.toLocaleLowerCase()) {
+    return -1;
+  }
+  return 1;
+}
+
 @Component({
   selector: 'app-need-list',
   standalone: false,
@@ -64,10 +72,11 @@ export class NeedListComponent {
   sortSelection: string = 'sortByPriority';
 
   SortingAlgoArrays: {func:sortAlgo,name:string, display:string[]}[] = [
+    {func:sortByPriority,name:"sortByPriority", display:["Highest Priority", "Lowest Priority"]},
     {func:sortByName,name:"sortByName", display:["Name (A to Z)", "Name (Z to A)"]},
-    {func:sortByGoal,name:"sortByGoal", display:["Largest Maximum Goal", "Smallest Maximum Goal"]},
+    {func:sortByLocation,name:"sortByLocation", display:["Location (A to Z)", "Location (Z to A)"]},
     {func:sortByCompletion,name:"sortByCompletion", display:["Most Completed", "Least Completed"]},
-    {func:sortByPriority,name:"sortByPriority", display:["Highest Priority", "Lowest Priority"]},
+    {func:sortByGoal,name:"sortByGoal", display:["Largest Maximum Goal", "Smallest Maximum Goal"]},
   ];
 
   @Output() currentNeed = new EventEmitter<Need>();
@@ -87,6 +96,10 @@ export class NeedListComponent {
           }
           this.searchResults = this.needs;
         });
+
+        const form = document.getElementById('search-form') as HTMLFormElement;
+        form.reset(); 
+        this.search(null);
     }
 
   ngOnInit(): void {
@@ -148,6 +161,7 @@ export class NeedListComponent {
     this.cupboardService.deleteNeed(id).subscribe(() => {
       this.needs = this.needs.filter(n => n.id !== id)
     })
+    this.refresh();
   }
 
   isManager() {
@@ -226,3 +240,7 @@ export class NeedListComponent {
       }
   }
 }
+function not(location: string) {
+  throw new Error('Function not implemented.');
+}
+
-- 
cgit v1.2.3


From 6bfbf7fa3b5b14b04f99f2dd6c33d336f6f081f6 Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Sun, 30 Mar 2025 20:31:32 -0400
Subject: Experimental sign up page design

---
 .../src/app/components/signup/signup.component.css | 28 ++++++++++++-
 .../app/components/signup/signup.component.html    | 47 ++++++++++++----------
 .../src/app/components/signup/signup.component.ts  | 10 ++---
 3 files changed, 58 insertions(+), 27 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/signup/signup.component.css b/ufund-ui/src/app/components/signup/signup.component.css
index f286cf9..429bc42 100644
--- a/ufund-ui/src/app/components/signup/signup.component.css
+++ b/ufund-ui/src/app/components/signup/signup.component.css
@@ -1,7 +1,16 @@
 :host {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    margin-top: -66px
+
+}
+
+#box {
     display: flex;
     flex-direction: column;
-    max-width: 300px;
+    /*max-width: 300px;*/
     gap: 10px;
 
     & > div {
@@ -45,3 +54,20 @@
     color: red;
 }
 
+#passReq {
+    display: flex;
+    flex-direction: column;
+}
+
+#box > div {
+    display: flex;
+    flex-direction: row;
+    align-items: start;
+    gap: 20px;
+
+    div {
+        display: flex;
+        flex-direction: column;
+    }
+}
+
diff --git a/ufund-ui/src/app/components/signup/signup.component.html b/ufund-ui/src/app/components/signup/signup.component.html
index ebedc2a..bc3aaf0 100644
--- a/ufund-ui/src/app/components/signup/signup.component.html
+++ b/ufund-ui/src/app/components/signup/signup.component.html
@@ -1,26 +1,31 @@
-<p>Signup:</p>
-<div>
-    <input placeholder="Username" type="text" (input)="validate(username.value, confirmPass.value, password.value)" #username>
-    <span *ngIf="usernameStatusText">{{usernameStatusText | async}}</span>
-</div>
+<div id="box">
+    <h1>Create an account</h1>
+    <div>
+        <input placeholder="Username" type="text" (input)="validate(username.value, confirmPass.value, password.value)" #username>
+        <span *ngIf="usernameStatusText">{{usernameStatusText | async}}</span>
+    </div>
 
-<div>
-    <input placeholder="Password" type="password" (input)="validate(username.value, confirmPass.value, password.value)" #password>
-    <progress [ngClass]="'color' + strength.getValue()" id="bar" [value]="strength | async" max="6">  </progress>
-    <span *ngIf="passwordStatusText">{{passwordStatusText | async}}</span>
+    <div>
+        <div>
+            <input placeholder="Password" type="password" (input)="validate(username.value, confirmPass.value, password.value)" #password>
+            <progress [ngClass]="'color' + strength.getValue()" id="bar" [value]="strength | async" max="6">  </progress>
+            <span *ngIf="passwordStatusText">{{passwordStatusText | async}}</span>
+        </div>
 
-    <span *ngFor="let requirement of Object.values(passwordRequirements)">
-        <span *ngIf="passwordRequirements" [style.color]="requirement.value ? 'green' : 'red'"> {{requirement.title}} </span>
-    </span>
-</div>
+        <div id="passReq">
+            <span *ngFor="let requirement of Object.values(passwordRequirements)" [style.color]="requirement.value ? 'green' : 'red'"><span class="icon">{{requirement.value?"check":"close"}}</span> {{requirement.title}}</span>
+        </div>
+    </div>
 
-<div>
-    <input placeholder="Confirm password" type="password" (input)="validate(username.value, confirmPass.value, password.value)" #confirmPass>
-    <span *ngIf="confirmPassStatusText">{{confirmPassStatusText | async}}</span>
-</div>
+    <div>
+        <input placeholder="Confirm password" type="password" (input)="validate(username.value, confirmPass.value, password.value)" #confirmPass>
+        <span [style.color]="(passwordsMatch|async) ? 'green' : 'red'" *ngIf="passwordsMatch"><span class="icon">{{(passwordsMatch|async)?"check":"close"}}</span> Passwords match</span>
+    </div>
 
-<div>
-    <button [disabled]="!(ableToCreateAccount | async)" (click)="signup(username.value, password.value)">Create Account</button>
-    <span *ngIf="showSuccessMessage | async">Account created <a routerLink="/login">Proceed to login</a></span>
-    <span *ngIf="statusText | async">{{statusText | async}}</span>
+    <div>
+        <button [disabled]="!(ableToCreateAccount | async)" (click)="signup(username.value, password.value)">Create Account</button>
+        <span *ngIf="showSuccessMessage | async">Account created <a routerLink="/login">Proceed to login</a></span>
+        <span *ngIf="statusText | async">{{statusText | async}}</span>
+    </div>
+    <span>Already have an account? <a routerLink="/login">Log in</a></span>
 </div>
diff --git a/ufund-ui/src/app/components/signup/signup.component.ts b/ufund-ui/src/app/components/signup/signup.component.ts
index 3b43287..1ab863d 100644
--- a/ufund-ui/src/app/components/signup/signup.component.ts
+++ b/ufund-ui/src/app/components/signup/signup.component.ts
@@ -22,7 +22,7 @@ class PasswordRequirements {
 export class SignupComponent {
 
     protected passwordStatusText = new BehaviorSubject("")
-    protected confirmPassStatusText = new BehaviorSubject("")
+    protected passwordsMatch = new BehaviorSubject(false)
     protected usernameStatusText = new BehaviorSubject("")
     protected showSuccessMessage = new BehaviorSubject(false)
     protected passwordStrongEnough = new BehaviorSubject(false)
@@ -51,7 +51,7 @@ export class SignupComponent {
     }
 
     validate(username: string, passConfirm:string, password: string) {
-        this.confirmPassStatusText.next("")
+        this.passwordsMatch.next(false)
         this.usernameStatusText.next("")
         this.checkPasswordStrength(password);
 
@@ -59,8 +59,8 @@ export class SignupComponent {
             this.usernameStatusText.next("Username field can't be blank")
         }
 
-        if (!(password === passConfirm) && !!passConfirm) {
-            this.confirmPassStatusText.next("Passwords don't match")
+        if (passConfirm && password === passConfirm) {
+            this.passwordsMatch.next(true)
         }
         this.ableToCreateAccount.next(this.passwordStrongEnough.getValue() && password === passConfirm && !!username)
     }
@@ -106,7 +106,7 @@ export class SignupComponent {
         } else if (strength == 0) {
             this.passwordStatusText.next("")
         } else {
-            this.passwordStatusText.next("Password does not meet requirements")
+            this.passwordStatusText.next("5/6 checks required")
         }
 
         this.strength.next(strength)
-- 
cgit v1.2.3


From aa5610d0f56c2a048212b3bd3a9ca5671ec855fa Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Sun, 30 Mar 2025 21:46:54 -0400
Subject: Continue working on css

---
 .../components/dashboard/dashboard.component.css   |  2 +-
 .../components/need-list/need-list.component.css   |  7 +++-
 .../components/need-list/need-list.component.html  |  5 +--
 .../components/need-page/need-page.component.css   | 10 +++++
 .../components/need-page/need-page.component.html  | 47 ++++++++++++----------
 ufund-ui/src/styles.css                            |  4 ++
 6 files changed, 47 insertions(+), 28 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.css b/ufund-ui/src/app/components/dashboard/dashboard.component.css
index 9db015e..78a69ba 100644
--- a/ufund-ui/src/app/components/dashboard/dashboard.component.css
+++ b/ufund-ui/src/app/components/dashboard/dashboard.component.css
@@ -1,7 +1,7 @@
 :host {
     display: flex;
     flex-direction: column;
-    width: 1200px;
+    width: 1000px;
     align-self: center;
     gap: 20px
 }
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index 5e07856..05354fc 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -75,14 +75,17 @@ li > button:hover p {
 
 #search-container {
     background-color: #d9d9d9;
+}
+
 #search-form {
     background-color: light-dark(#d9d9d9, #1b1b1b);
     padding: 10px 20px 20px 20px;
     border: 2px solid #000;
     border-radius: 5px;
+    border-radius: 5px;
+    visibility: visible;
+
     .wide-input {
         width: 60%;
     }
-    border-radius: 5px;
-    visibility: visible;
  }
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 866e5e4..72bc9c5 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -1,4 +1,3 @@
-<h1>Needs List</h1>
 <div id="search-container">
     <section>
         <label for="sort">Sort by: </label>
@@ -43,9 +42,9 @@
             <button (click)="select(need)" id="need-edit-button-{{need.id}}">
                 <img class="icon" src="/edit.png" alt="Select">
             </button>
-            <button (click)="delete(need.id)" *ngIf="isManager()"> 
+            <button (click)="delete(need.id)" *ngIf="isManager()">
                 <img class="icon" src="/delete.png" alt="Delete">
             </button>
         </section>
     </li>
-</ul>
\ No newline at end of file
+</ul>
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 e69de29..a3a4014 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
@@ -0,0 +1,10 @@
+:host {
+    display: flex;
+    justify-content: center;
+}
+
+#box {
+    display: flex;
+    flex-direction: column;
+    width: 1000px;
+}
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 7ce7633..a72167c 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,23 +1,26 @@
-<button routerLink="/cupboard">Back to cupboard</button>
-<h1>Viewing Need: {{need?.name}}</h1>
-<a>internal id: {{need?.id}}</a>
-<div style="display: flex; column-gap: 6px;">
-    <h3>Looking for</h3>
-    <h3><u>{{need?.type}}</u></h3>
-    <h3>Donations.</h3>
-</div>
-<div *ngIf="need?.filterAttributes != null">
-    <p>Tags:</p>
-    <ul style="display: flex; column-gap: 24px;">
-        <li *ngFor="let tag of need?.filterAttributes">
-            <p>{{tag}}</p>
-        </li>
-    </ul>
-</div>
+<div id="box">
+    <h1>{{need?.name}}</h1>
+    <div>
+        <h3>Looking for <u>{{need?.type}}</u> Donations.</h3>
+    </div>
+    <div *ngIf="need?.filterAttributes">
+        <p>Tags:</p>
+        <ul style="display: flex; column-gap: 24px;">
+            <li *ngFor="let tag of need?.filterAttributes">
+                <p>{{tag}}</p>
+            </li>
+        </ul>
+    </div>
 
-<hr>
-<p>Location: {{need?.location}}</p>
-<p>Goal: {{need?.maxGoal}}</p>
-<p>Current: {{need?.current}}</p>
-<p>Urgent: {{need?.urgent}}</p>
-<p>This goal is <strong>{{(((need?.current ?? 0)*100) / (need?.maxGoal ?? 0)).toFixed(0)}}%</strong> complete!</p>
+    <hr>
+    <p>Location: {{need?.location}}</p>
+    <p>Urgent: {{need?.urgent}}</p>
+    <span>{{need?.current}} / {{need?.maxGoal}}</span>
+    <progress [value]="need?.current" [max]="need?.maxGoal"></progress>
+    <span>This goal is <strong>{{(((need?.current ?? 0)*100) / (need?.maxGoal ?? 0)).toFixed(0)}}%</strong> complete!</span>
+    <div>
+        <button>Add to basket</button>
+        <button>Edit</button>
+        <button>Delete</button>
+    </div>
+</div>
diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css
index e4b4e8c..b3ecbd0 100644
--- a/ufund-ui/src/styles.css
+++ b/ufund-ui/src/styles.css
@@ -57,3 +57,7 @@ button, .button {
 .icon {
     font-family: 'Material Symbols Outlined'
 }
+
+h1 {
+    font-size: 40px;
+}
-- 
cgit v1.2.3


From cfe40fa1e416fbf4586ef36b63a145453a4d6224 Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Mon, 31 Mar 2025 00:38:37 -0400
Subject: Continue working on css (1)

---
 ufund-ui/src/app/app.component.css                 |  28 +++++
 ufund-ui/src/app/app.component.html                |   8 ++
 ufund-ui/src/app/app.component.ts                  |  13 ++-
 .../app/components/cupboard/cupboard.component.css |  13 +--
 .../components/cupboard/cupboard.component.html    |   6 +-
 .../mini-need-list/mini-need-list.component.css    |   1 +
 .../components/need-list/need-list.component.css   | 126 ++++++++++-----------
 .../components/need-list/need-list.component.html  |  73 ++++++------
 .../components/need-list/need-list.component.ts    |   4 +-
 ufund-ui/src/app/services/toasts.service.ts        |  19 ++++
 10 files changed, 179 insertions(+), 112 deletions(-)
 create mode 100644 ufund-ui/src/app/services/toasts.service.ts

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css
index 5596cf8..5af3958 100644
--- a/ufund-ui/src/app/app.component.css
+++ b/ufund-ui/src/app/app.component.css
@@ -43,3 +43,31 @@
         text-decoration: underline;
     }
 }
+
+.toast {
+    transform: translateY(-90px);
+    transition: transform .5s;
+    align-self: center;
+    z-index: 3;
+    position: absolute;
+    top: 15px;
+    display: flex;
+    flex-direction: row;
+    padding: 3px 15px;
+    background-color: #3a3a3a;
+    border-radius: 100000px;
+    gap: 10px;
+    align-items: center;
+
+    button {
+        aspect-ratio: 1/1;
+        margin-right: -11px;
+        padding: 8px;
+        display: flex;
+        align-items: center;
+    }
+}
+
+.toast.active {
+    transform: translateY(0);
+}
diff --git a/ufund-ui/src/app/app.component.html b/ufund-ui/src/app/app.component.html
index b0ee329..b41a225 100644
--- a/ufund-ui/src/app/app.component.html
+++ b/ufund-ui/src/app/app.component.html
@@ -1,3 +1,11 @@
+<div class="toast" #toastdiv>
+<!--    <span{{(toast | async).message}}</span>-->
+<!--    <a *ngIf="toast.action" (click)="toast.action.onAction()">{{toast.action.label}}</a>-->
+<!--    <button (click)="toastdiv.classList.remove('active')">-->
+<!--        <span class="icon">close</span>-->
+<!--    </button>-->
+</div>
+
 <div id="header">
     <div>
         <a routerLink="/">
diff --git a/ufund-ui/src/app/app.component.ts b/ufund-ui/src/app/app.component.ts
index 86717c4..7d9afcd 100644
--- a/ufund-ui/src/app/app.component.ts
+++ b/ufund-ui/src/app/app.component.ts
@@ -1,7 +1,12 @@
-import {Component, OnInit, Inject} from '@angular/core';
-import {BehaviorSubject} from 'rxjs';
+import {Component, OnInit, Inject, ViewChild} from '@angular/core';
+import {BehaviorSubject, Observable} from 'rxjs';
 import { DOCUMENT } from '@angular/common';
 import {AuthService} from './services/auth.service';
+import {ToastType} from './services/toasts.service';
+
+interface ToastProps {
+    type: ToastType, message: string, action?: {label: string, onAction: () => void}
+}
 
 @Component({
   selector: 'app-root',
@@ -12,6 +17,8 @@ import {AuthService} from './services/auth.service';
 export class AppComponent implements OnInit {
     // title = 'ufund-ui';
     currentUser$: BehaviorSubject<string> = new BehaviorSubject<string>("Logged out.");
+    toast = new BehaviorSubject<ToastProps>({type: ToastType.INFO, message: "testToast"})
+
 
     constructor(
         private authService: AuthService,
@@ -31,4 +38,6 @@ export class AppComponent implements OnInit {
         })
     }
 
+
+
 }
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.css b/ufund-ui/src/app/components/cupboard/cupboard.component.css
index f4b6828..faff4d4 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.css
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.css
@@ -1,14 +1,13 @@
 :host {
     display: flex;
-    justify-content: space-evenly;
-    border: 2px solid #000;
-    border-radius: 5px;
-    padding: 10px 20px;
-    > div {
-      width: 40%;
-    }
+    justify-content: center;
 }
 
+#box {
+    width: 1000px;
+    display: flex;
+    flex-direction: column;
+}
 
 #menu {
       display: flex;
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index bc5ac1c..25b88ba 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -1,4 +1,4 @@
-<div>
+<div id="box">
     <h1> Cupboard </h1>
     <app-need-list (currentNeed) = populateForm($event) #needList></app-need-list>
 </div>
@@ -25,7 +25,7 @@
             <input type="checkbox" name="urgent" value="false" ngModel>
             <label>Urgent</label><br>
             <input type="submit" value="Submit">
-            
+
         </form>
         <span *ngIf="statusText">{{statusText | async}}</span>
 
@@ -46,7 +46,7 @@
             <input type="checkbox" name="urgent" [(ngModel)]="selectedNeed.urgent">
             <label>Urgent</label> <br>
             <input type="submit" value="Submit">
-           
+
         </form>
         <span *ngIf="statusText">{{statusText | async}}</span>
 
diff --git a/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css
index 8a3b6a7..ac456ab 100644
--- a/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css
+++ b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css
@@ -23,6 +23,7 @@
     padding: 10px;
     gap: 10px;
     justify-content: start;
+    overflow: clip;
 }
 
 .needEntry {
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index 05354fc..1936b38 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -1,91 +1,85 @@
-:host {
-    --list-background-color: lightgray;
-    list-style-type: none;
-    border: 2px solid #000;
-    display: block;
-    border-radius: 5px;
-
+#header {
+    display: flex;
+    flex-direction: column;
+    gap: 10px
 }
 
-div {
-    border: 2px solid #000;
+.needEntry {
+    background-color: #3a3a3a;
+    display: flex;
+    flex-direction: column;
     border-radius: 5px;
-    padding: 5px;
-    margin: 5px;
+    padding: 10px;
+}
+
+#needList {
+    display: flex;
+    flex-direction: column;
+    gap: 10px
 }
 
-ul {
-    list-style-type: none;
-    padding-inline-start: 0px;
+select {
+    font-size: 14pt;
+    padding: 5px;
 }
 
-li {
-    background-color: var(--list-background-color);
+#searchArea {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-    transition: all 0.3s ease;
-    font-weight: bold;
-    border: 2px solid #000;
-    border-radius: 5px;
-    margin: 5px;
-    > button {
-        background-color: transparent;
-        width: 88%;
-        transition: all 0.3s ease;
-        font-weight: bold;
-        border: none;
-        border-radius: 5px;
-        padding-left: 1.5%;
-        > section {
-            width: 100%;
-            flex: none;
-            display: inline-block;
-            background-color: magenta;
-            > progress {
-                width: 25%;
-                float: none;
-            }
-        }
+
+    form {
+        display: flex;
+        width: 100%;
+        gap: 10px;
     }
 
-    > section {
-        width: 12%;
+    input[type=text] {
+        display: flex;
+        width: 100%;
     }
 }
 
-section button{
-    margin: 4%;
+#sortArea {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    align-items: center;
 }
 
-li > button span {
-    font-style: italic;
-    font-weight: normal;
+.needName {
+    font-weight: bold;
 }
 
-li > button:hover p {
-    text-decoration: underline;
+.needType {
+    text-transform: uppercase;
+    font-size: 10pt;
 }
 
+.split {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
 
-.icon {
-    width: 18px;
-    margin: 3px -3px -1px -3px;
-}
+    .left {
+        display: flex;
+        flex-direction: column;
+    }
 
-#search-container {
-    background-color: #d9d9d9;
+    .right {
+        display: flex;
+        flex-direction: column;
+        align-items: end;
+    }
 }
 
-#search-form {
-    background-color: light-dark(#d9d9d9, #1b1b1b);
-    padding: 10px 20px 20px 20px;
-    border: 2px solid #000;
-    border-radius: 5px;
+.urgent {
+    font-size: 11pt;
+    background-color: rgba(255, 165, 0, 0.27);
+    color: rgba(255, 165, 0, 1);
+    padding: 2px;
     border-radius: 5px;
-    visibility: visible;
+}
 
-    .wide-input {
-        width: 60%;
-    }
- }
+.prog {
+    display: flex;
+    flex-direction: column;
+}
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 72bc9c5..3a4ca9c 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -1,21 +1,21 @@
-<div id="search-container">
-    <section>
+<div id="header">
+    <div id="searchArea">
+        <form id="search-form" #searchForm="ngForm">
+            <input type="text" name="search" class="wide-input" placeholder="Search in {{needs.length}} needs..." (input)="search(searchForm.value)" ngModel>
+            <input type="reset" value="Clear" (click)="search(null)"> <br>
+        </form>
+    </div>
+    <div id="sortArea">
         <label for="sort">Sort by: </label>
-        <select [(ngModel)] = "sortSelection" class="wide-input" (change)="search(searchForm.value)" [value]="sortSelection">
+        <select id='sort' [(ngModel)] = "sortSelection" class="wide-input" (change)="search(searchForm.value)" [value]="sortSelection">
             <option *ngFor="let algorithm of SortingAlgoArrays" value="{{algorithm.name}}">
                 {{algorithm.display[sortMode === 'Ascending' ? 0 : 1]}}
             </option>
         </select>
         <button (click)="changeSortMode(searchForm.value)">
-            {{sortMode}}
+            <span class="icon">{{sortMode === 'Ascending' ? 'arrow_upward': 'arrow_downward'}}</span>
         </button>
-    </section>
-    <section>
-        <form id="search-form" #searchForm="ngForm">
-            <input type="text" name="search" class="wide-input" placeholder="Search in {{needs.length}} needs..." (input)="search(searchForm.value)" ngModel>
-            <input type="reset" value="Clear" (click)="search(null)"> <br>
-        </form>
-    </section>
+    </div>
     <!--<button (click)="close()">Close</button>-->
 </div>
 
@@ -24,27 +24,36 @@
 <h2 *ngIf="searchResults.length == needs.length"> All Needs </h2>
 <h2 *ngIf="searchResults.length == 0"> No Results Found </h2>
 
-<ul>
-    <li *ngFor="let need of searchResults" id="need-button-{{need.id}}">
-        <button [routerLink]="'/need/' + need.id" (mouseenter) ="changeText(need.id, '(details)')" (mouseleave)="changeText(need.id, '')">
-            <section> <p> {{need.name}} | {{need.location}} <span> {{need.urgent ? "URGENT" : ""}} </span> <span id="hover-status-label-{{need.id}}"> </span> </section>
-            <section>
-                <progress value="need.current" max="need.maxGoal"></progress>
-                <progress value="need.current" max="need.maxGoal"></progress>
-                <progress value="need.current" max="need.maxGoal"></progress>
-                <progress value="need.current" max="need.maxGoal"></progress>
-            </section>
-            <section>{{need.current}}/{{need.maxGoal}} {{(need.current / need.maxGoal) * 100}}% <span>{{need.type}}</span></section>
-        </button>
+<div id="needList">
+    <div *ngFor="let need of searchResults" class="needEntry">
+        <div [routerLink]="'/need/' + need.id">
+            <div class="split">
+                <div class="left">
+                    <span class="needName">{{need.name}}</span>
+                    <span class="needType">{{need.type}}</span>
+                </div>
 
-        <button (click)="add(need)" *ngIf="isHelper()">Add To Basket</button>
-        <section *ngIf="isManager()">
-            <button (click)="select(need)" id="need-edit-button-{{need.id}}">
-                <img class="icon" src="/edit.png" alt="Select">
+                <div class="right">
+                    <span *ngIf="need.urgent" class="urgent">URGENT</span>
+                    <span *ngIf="need.location"><span class="icon">location_on</span>{{need.location}}</span>
+                </div>
+            </div>
+
+            <div class="prog">
+                <span id="hover-status-label-{{need.id}}"> </span>
+                <span>{{need.current}}/{{need.maxGoal}} ({{(need.current / need.maxGoal) * 100}}%)</span>
+                <progress [value]="need.current" [max]="need.maxGoal"></progress>
+            </div>
+        </div>
+
+        <div>
+            <button *ngIf="isHelper()" (click)="add(need)">Add To Basket</button>
+            <button *ngIf="isManager()" (click)="select(need)">
+                <span class="icon">edit</span>
             </button>
-            <button (click)="delete(need.id)" *ngIf="isManager()">
-                <img class="icon" src="/delete.png" alt="Delete">
+            <button *ngIf="isManager()" (click)="delete(need.id)" >
+                <span class="icon">delete</span>
             </button>
-        </section>
-    </li>
-</ul>
+        </div>
+    </div>
+</div>
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index af8cab4..47114c3 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -66,7 +66,7 @@ export class NeedListComponent {
   selectedNeed: Need | null = null;
   needs: Need[] = [];
   searchResults: Need[] = [];
-  sortMode = 'Ascending'
+  sortMode: 'Ascending' | 'Descending' = 'Ascending'
 
   currentSortAlgo: sortAlgo = sortByPriority;
   sortSelection: string = 'sortByPriority';
@@ -98,7 +98,7 @@ export class NeedListComponent {
         });
 
         const form = document.getElementById('search-form') as HTMLFormElement;
-        form.reset(); 
+        form.reset();
         this.search(null);
     }
 
diff --git a/ufund-ui/src/app/services/toasts.service.ts b/ufund-ui/src/app/services/toasts.service.ts
new file mode 100644
index 0000000..0c35e45
--- /dev/null
+++ b/ufund-ui/src/app/services/toasts.service.ts
@@ -0,0 +1,19 @@
+import {Injectable} from '@angular/core';
+
+export enum ToastType {
+    INFO,
+    WARNING,
+    ERROR
+}
+
+@Injectable({
+    providedIn: 'root'
+})
+export class ToastsService {
+
+    constructor() {}
+
+    sendToast(type: ToastType, message: string, action?: {label: string, onAction: () => void}) {
+
+    }
+}
-- 
cgit v1.2.3


From bcdf234066ee277b7436428989d5e0dbf58c2f60 Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Mon, 31 Mar 2025 10:15:40 -0400
Subject: description textarea for forms

---
 ufund-ui/src/app/components/cupboard/cupboard.component.html | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index 25b88ba..89d8fbe 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -24,6 +24,8 @@
             <label>Physical</label><br>
             <input type="checkbox" name="urgent" value="false" ngModel>
             <label>Urgent</label><br>
+            <label>Description</label>
+            <textarea name="description" [(ngModel)]="selectedNeed.description"></textarea><br>
             <input type="submit" value="Submit">
 
         </form>
@@ -46,7 +48,8 @@
             <input type="checkbox" name="urgent" [(ngModel)]="selectedNeed.urgent">
             <label>Urgent</label> <br>
             <input type="submit" value="Submit">
-
+            <label>Description</label>
+            <textarea name="description" [(ngModel)]="selectedNeed.description"></textarea><br>
         </form>
         <span *ngIf="statusText">{{statusText | async}}</span>
 
-- 
cgit v1.2.3


From d4dd348e81d3aef4cc62335f1dad5a02452dfadd Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Mon, 31 Mar 2025 10:16:03 -0400
Subject: frontend model support for description

---
 ufund-ui/src/app/components/cupboard/cupboard.component.ts | 6 ++++--
 ufund-ui/src/app/models/Need.ts                            | 1 +
 2 files changed, 5 insertions(+), 2 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index 85ffd17..feb39e0 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -91,7 +91,8 @@ export class CupboardComponent implements OnInit {
             type: GoalType[form.type as keyof typeof GoalType],
             urgent: form.urgent,
             filterAttributes: [],
-            current: 0
+            current: 0,
+            description: form.description
         };
 
         this.cupboardService.updateNeed(need.id, need)
@@ -127,7 +128,8 @@ export class CupboardComponent implements OnInit {
             type: form.type,
             urgent: form.urgent ? true : false,
             filterAttributes: [],
-            current: 0
+            current: 0,
+            description: form.description
         };
         console.log("need:", need);
         console.log("form submitted. creating need: ", need);
diff --git a/ufund-ui/src/app/models/Need.ts b/ufund-ui/src/app/models/Need.ts
index 1451cad..2a2800c 100644
--- a/ufund-ui/src/app/models/Need.ts
+++ b/ufund-ui/src/app/models/Need.ts
@@ -7,6 +7,7 @@ export interface Need {
     maxGoal: number;
     current: number;
     urgent: boolean;
+    description: string;
 }
 
 export enum GoalType {
-- 
cgit v1.2.3


From 5f083f775917c15597b3b70a0eb6a0ce2fda7667 Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Mon, 31 Mar 2025 11:28:42 -0400
Subject: More css tweaks

---
 ufund-ui/src/app/app.component.html                   |  4 ++--
 ufund-ui/src/app/app.component.ts                     | 19 ++++++++++++-------
 .../src/app/components/login/login.component.html     |  1 -
 ufund-ui/src/styles.css                               |  2 +-
 4 files changed, 15 insertions(+), 11 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/app.component.html b/ufund-ui/src/app/app.component.html
index b41a225..89075e1 100644
--- a/ufund-ui/src/app/app.component.html
+++ b/ufund-ui/src/app/app.component.html
@@ -17,8 +17,8 @@
         <a routerLink="/cupboard">Cupboard</a>
         <a routerLink="/basket">Basket</a>
 <!--        <span>{{currentUser$ | async}}</span>-->
-        <button *ngIf="currentUser$.value != 'Logged out.'" onclick="location.href='/';"> Log Out</button>
-        <button *ngIf="currentUser$.value == 'Logged out.'" routerLink="/login"> Log In</button>
+        <button *ngIf="currentUser | async" (click)="logout()"> Log Out</button>
+        <button *ngIf="!(currentUser | async)" (click)="login()"> Log In</button>
     </div>
 </div>
 
diff --git a/ufund-ui/src/app/app.component.ts b/ufund-ui/src/app/app.component.ts
index 7d9afcd..8068659 100644
--- a/ufund-ui/src/app/app.component.ts
+++ b/ufund-ui/src/app/app.component.ts
@@ -3,6 +3,8 @@ import {BehaviorSubject, Observable} from 'rxjs';
 import { DOCUMENT } from '@angular/common';
 import {AuthService} from './services/auth.service';
 import {ToastType} from './services/toasts.service';
+import {User} from './models/User';
+import {ActivatedRoute, Router} from '@angular/router';
 
 interface ToastProps {
     type: ToastType, message: string, action?: {label: string, onAction: () => void}
@@ -16,12 +18,14 @@ interface ToastProps {
 })
 export class AppComponent implements OnInit {
     // title = 'ufund-ui';
-    currentUser$: BehaviorSubject<string> = new BehaviorSubject<string>("Logged out.");
+    currentUser?: BehaviorSubject<User | null>;
     toast = new BehaviorSubject<ToastProps>({type: ToastType.INFO, message: "testToast"})
 
 
     constructor(
         private authService: AuthService,
+        private router: Router,
+        private route: ActivatedRoute,
         @Inject(DOCUMENT) private document: Document
     ) {}
 
@@ -30,14 +34,15 @@ export class AppComponent implements OnInit {
     }
 
     ngOnInit() {
-        this.authService.getCurrentUserSubject().subscribe(r => {
-            this.currentUser$?.next(r
-                ? "Logged in as " + r.username
-                : "Logged out."
-            )
-        })
+        this.currentUser = this.authService.getCurrentUserSubject()
     }
 
+    login() {
+        this.router.navigate(['/login'], {queryParams: {redir: this.router.url}});
+    }
 
+    logout() {
+        location.reload()
+    }
 
 }
diff --git a/ufund-ui/src/app/components/login/login.component.html b/ufund-ui/src/app/components/login/login.component.html
index 743b1b3..e1c3e2a 100644
--- a/ufund-ui/src/app/components/login/login.component.html
+++ b/ufund-ui/src/app/components/login/login.component.html
@@ -1,5 +1,4 @@
 <div id="box">
-    <span *ngIf="next" style="color: red">You must be logged in to view this page</span>
     <h1>Login</h1>
     <input placeholder="Username" type="text" #username>
     <input placeholder="Password" type="password" #password>
diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css
index b3ecbd0..b152e61 100644
--- a/ufund-ui/src/styles.css
+++ b/ufund-ui/src/styles.css
@@ -32,7 +32,7 @@ input {
     }
 }
 
-button, .button {
+button, input[type=button], input[type=reset], input[type=submit], .button {
     font-size: 14pt;
     padding: 6px 16px;
     border-radius: 9999px;
-- 
cgit v1.2.3


From cb5be32bf0d050cc1fd37d7cc9b4c51e1c51fffe Mon Sep 17 00:00:00 2001
From: Gunther6070 <haydenhartman10@yahoo.com>
Date: Mon, 31 Mar 2025 12:08:22 -0400
Subject: Added dynamic error messaging to the cupboard

---
 ufund-ui/src/app/components/cupboard/cupboard.component.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index 85ffd17..88ab46c 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input, OnInit, ViewChild} from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
 import { CupboardService } from '../../services/cupboard.service';
 import { Need, GoalType } from '../../models/Need';
 import { userType } from '../../models/User';
@@ -99,7 +99,7 @@ export class CupboardComponent implements OnInit {
                 if (ex.status == 500) {
                     this.statusText.next("Fields cannot be blank");
                 } else if (ex.status == 400) {
-                    this.statusText.next("Goal must be greater than 0");
+                    this.statusText.next(ex.error);
                 } else {
                     this.statusText.next("Error on creating need");
                 }
@@ -136,7 +136,7 @@ export class CupboardComponent implements OnInit {
                 if (ex.status == 500) {
                     this.statusText.next("Fields cannot be blank");
                 } else if (ex.status == 400) {
-                    this.statusText.next("Goal must be greater than 0");
+                    this.statusText.next(ex.error);
                 } else {
                     this.statusText.next("Error on creating need");
                 }
-- 
cgit v1.2.3


From 655f83af9ba59d6153c9916b9a31bfe12680655e Mon Sep 17 00:00:00 2001
From: Gunther6070 <haydenhartman10@yahoo.com>
Date: Mon, 31 Mar 2025 13:12:42 -0400
Subject: Implemented localStorage cookies to maintain user persistence

---
 ufund-ui/src/app/app.component.ts                    | 14 ++++++++++++--
 ufund-ui/src/app/components/login/login.component.ts |  2 ++
 ufund-ui/src/app/services/auth.service.ts            | 14 ++++++++++++--
 3 files changed, 26 insertions(+), 4 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/app.component.ts b/ufund-ui/src/app/app.component.ts
index 8068659..34256f3 100644
--- a/ufund-ui/src/app/app.component.ts
+++ b/ufund-ui/src/app/app.component.ts
@@ -1,5 +1,5 @@
-import {Component, OnInit, Inject, ViewChild} from '@angular/core';
-import {BehaviorSubject, Observable} from 'rxjs';
+import {Component, OnInit, Inject} from '@angular/core';
+import {BehaviorSubject} from 'rxjs';
 import { DOCUMENT } from '@angular/common';
 import {AuthService} from './services/auth.service';
 import {ToastType} from './services/toasts.service';
@@ -34,7 +34,17 @@ export class AppComponent implements OnInit {
     }
 
     ngOnInit() {
+        console.log("AAAAAAAAAAAAAAAA")
         this.currentUser = this.authService.getCurrentUserSubject()
+        let data = localStorage.getItem("credential");
+        if (data) {
+            let dataParsed = JSON.parse(data)
+            this.authService.restoreLogin(dataParsed.username, dataParsed.key)
+            console.log("Key found", dataParsed.key)
+        } else {
+            console.log("key missing")
+            console.log(data)
+        }
     }
 
     login() {
diff --git a/ufund-ui/src/app/components/login/login.component.ts b/ufund-ui/src/app/components/login/login.component.ts
index f6a2996..4dcaedd 100644
--- a/ufund-ui/src/app/components/login/login.component.ts
+++ b/ufund-ui/src/app/components/login/login.component.ts
@@ -35,6 +35,8 @@ export class LoginComponent implements OnInit {
 
         this.authService.login(username, password).then(() => {
             this.router.navigate([next]);
+            let key = this.authService.getApiKey()
+            localStorage.setItem("credential", JSON.stringify({username: username, key: key}))
         }).catch(ex => {
             this.statusText.next("Unable to login: " + friendlyHttpStatus[ex.status])
             console.log(ex)
diff --git a/ufund-ui/src/app/services/auth.service.ts b/ufund-ui/src/app/services/auth.service.ts
index 6bc7145..b75c931 100644
--- a/ufund-ui/src/app/services/auth.service.ts
+++ b/ufund-ui/src/app/services/auth.service.ts
@@ -1,7 +1,8 @@
-import {Injectable} from '@angular/core';
+import {Injectable, Injector} from '@angular/core';
 import {BehaviorSubject, firstValueFrom} from 'rxjs';
 import {User} from '../models/User';
 import {HttpClient, HttpHeaders} from '@angular/common/http';
+import {UsersService} from './users.service';
 
 @Injectable({
     providedIn: 'root'
@@ -24,7 +25,9 @@ export class AuthService {
     });
 
     constructor(
-        private http: HttpClient
+        private http: HttpClient,
+        // private userService: UsersService
+        private injector: Injector
     ) {}
 
     async login(username: string, password: string) {
@@ -42,6 +45,13 @@ export class AuthService {
         // this.currentUser.subscribe(r => console.log("currentUser: "+r.username))
     }
 
+    async restoreLogin(username: string, key: string) {
+
+        const userService = this.injector.get(UsersService);
+        this.apiKey = key;
+        this.currentUser.next(await firstValueFrom(userService.getUser(username)))
+    }
+
     getCurrentUserSubject() {
         return this.currentUser;
     }
-- 
cgit v1.2.3


From 07a9e3c6faf735b374c6b63235defeb8a38a6661 Mon Sep 17 00:00:00 2001
From: Gunther6070 <haydenhartman10@yahoo.com>
Date: Mon, 31 Mar 2025 13:27:02 -0400
Subject: Implemented logout functionality with localStorage

---
 ufund-ui/src/app/app.component.ts | 1 +
 1 file changed, 1 insertion(+)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/app.component.ts b/ufund-ui/src/app/app.component.ts
index 34256f3..94a6439 100644
--- a/ufund-ui/src/app/app.component.ts
+++ b/ufund-ui/src/app/app.component.ts
@@ -52,6 +52,7 @@ export class AppComponent implements OnInit {
     }
 
     logout() {
+        localStorage.removeItem("credential")
         location.reload()
     }
 
-- 
cgit v1.2.3


From ec88317c75ec907c319412502a1b189c97db9173 Mon Sep 17 00:00:00 2001
From: Gunther6070 <haydenhartman10@yahoo.com>
Date: Mon, 31 Mar 2025 14:36:39 -0400
Subject: Modified need list to display percent as a whole number

---
 ufund-ui/src/app/components/need-list/need-list.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 3a4ca9c..e24ee09 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -41,7 +41,7 @@
 
             <div class="prog">
                 <span id="hover-status-label-{{need.id}}"> </span>
-                <span>{{need.current}}/{{need.maxGoal}} ({{(need.current / need.maxGoal) * 100}}%)</span>
+                <span>{{need.current}}/{{need.maxGoal}} ({{((need.current / need.maxGoal) * 100).toFixed(0)}}%)</span>
                 <progress [value]="need.current" [max]="need.maxGoal"></progress>
             </div>
         </div>
-- 
cgit v1.2.3


From 2031579ce6033fbe67a78b66d3da2ee6872748de Mon Sep 17 00:00:00 2001
From: Gunther6070 <haydenhartman10@yahoo.com>
Date: Mon, 31 Mar 2025 15:08:59 -0400
Subject: Removed old logging

---
 ufund-ui/src/app/app.component.ts | 4 ----
 1 file changed, 4 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/app.component.ts b/ufund-ui/src/app/app.component.ts
index 94a6439..df9114e 100644
--- a/ufund-ui/src/app/app.component.ts
+++ b/ufund-ui/src/app/app.component.ts
@@ -34,16 +34,12 @@ export class AppComponent implements OnInit {
     }
 
     ngOnInit() {
-        console.log("AAAAAAAAAAAAAAAA")
         this.currentUser = this.authService.getCurrentUserSubject()
         let data = localStorage.getItem("credential");
         if (data) {
             let dataParsed = JSON.parse(data)
             this.authService.restoreLogin(dataParsed.username, dataParsed.key)
             console.log("Key found", dataParsed.key)
-        } else {
-            console.log("key missing")
-            console.log(data)
         }
     }
 
-- 
cgit v1.2.3


From 9f31fea81818dae21f67b23a6004a3ca369f8e0d Mon Sep 17 00:00:00 2001
From: Gunther6070 <haydenhartman10@yahoo.com>
Date: Mon, 31 Mar 2025 15:09:23 -0400
Subject: Added check to prevent redirect to login page

---
 ufund-ui/src/app/components/dashboard/dashboard.component.ts          | 4 ++--
 .../src/app/components/funding-basket/funding-basket.component.ts     | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.ts b/ufund-ui/src/app/components/dashboard/dashboard.component.ts
index 165c7ba..49d93bf 100644
--- a/ufund-ui/src/app/components/dashboard/dashboard.component.ts
+++ b/ufund-ui/src/app/components/dashboard/dashboard.component.ts
@@ -27,7 +27,7 @@ export class DashboardComponent implements OnInit{
 
     ngOnInit() {
         let user = this.authService.getCurrentUser()
-        if(!user) {
+        if(!localStorage.getItem("credential") && !user) {
             this.router.navigate(['/login'])
             return
         }
@@ -35,7 +35,7 @@ export class DashboardComponent implements OnInit{
         firstValueFrom(this.cupboardService.getNeeds()).then(r => {
             this.topNeeds = r.sort((a, b) => b.current - a.current)
             this.almostThere = r.sort((a, b) => a.current/a.maxGoal - b.current/b.maxGoal)
-            this.inBasket = r.filter(n => n.id in user?.basket)
+            this.inBasket = r.filter(n => n.id in user!.basket)
         })
     }
 
diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
index faa7e0b..5c5776f 100644
--- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
+++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
@@ -26,7 +26,7 @@ export class FundingBasketComponent implements OnInit {
 
     // this is for login rerouting
     ngOnInit(): void {
-        if (!this.authService.getCurrentUser()) {
+        if (!localStorage.getItem("credential") && !this.authService.getCurrentUser()) {
             this.router.navigate(['/login'], {queryParams: {redir: this.router.url}});
             return;
         }
-- 
cgit v1.2.3


From d07e7630c836711b92cffd41fe99d15c84cb025f Mon Sep 17 00:00:00 2001
From: Gunther6070 <haydenhartman10@yahoo.com>
Date: Mon, 31 Mar 2025 15:09:41 -0400
Subject: Added animation to header tabs when hovering over them

---
 ufund-ui/src/app/app.component.css | 27 ++++++++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css
index 5af3958..5204919 100644
--- a/ufund-ui/src/app/app.component.css
+++ b/ufund-ui/src/app/app.component.css
@@ -38,10 +38,31 @@
         text-decoration: none;
     }
 
-    a:hover {
-        /*color: light-dark(black, white)*/
-        text-decoration: underline;
+    a {
+        display: block;
+        position: relative;
+        padding: 0.1em 0;
+    }
+
+    a::after {
+        content: '';
+        position: absolute;
+        bottom: 4px;
+        left: 0;
+        width: 100%;
+        height: 0.03em;
+        background-color: white;
+        opacity: 0;
+        transition: opacity 300ms, transform 300ms;
     }
+
+    a:hover::after,
+    a:focus::after {
+        opacity: 1;
+        transform: translate3d(0, 0.2em, 0);
+    }
+
+
 }
 
 .toast {
-- 
cgit v1.2.3


From b07405c2a1817271c84e25bfe62b6b3ff36136f9 Mon Sep 17 00:00:00 2001
From: Gunther6070 <haydenhartman10@yahoo.com>
Date: Mon, 31 Mar 2025 15:10:52 -0400
Subject: Unused imports

---
 ufund-ui/src/app/components/dashboard/dashboard.component.ts | 2 --
 1 file changed, 2 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.ts b/ufund-ui/src/app/components/dashboard/dashboard.component.ts
index 49d93bf..645893f 100644
--- a/ufund-ui/src/app/components/dashboard/dashboard.component.ts
+++ b/ufund-ui/src/app/components/dashboard/dashboard.component.ts
@@ -1,10 +1,8 @@
 import {Component, OnInit} from '@angular/core';
-import {userType} from '../../models/User';
 import {AuthService} from '../../services/auth.service';
 import {Router} from '@angular/router';
 import {Need} from '../../models/Need';
 import {CupboardService} from '../../services/cupboard.service';
-import {UsersService} from '../../services/users.service';
 import {firstValueFrom} from 'rxjs';
 
 @Component({
-- 
cgit v1.2.3


From f7a0ce90b0ead17ad4002108d7e868899954c69d Mon Sep 17 00:00:00 2001
From: Gunther6070 <haydenhartman10@yahoo.com>
Date: Mon, 31 Mar 2025 17:28:20 -0400
Subject: Removed login check for now

---
 .../app/components/funding-basket/funding-basket.component.ts | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
index 5c5776f..08515c2 100644
--- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
+++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
@@ -26,7 +26,7 @@ export class FundingBasketComponent implements OnInit {
 
     // this is for login rerouting
     ngOnInit(): void {
-        if (!localStorage.getItem("credential") && !this.authService.getCurrentUser()) {
+        if (!this.authService.getCurrentUser()) {
             this.router.navigate(['/login'], {queryParams: {redir: this.router.url}});
             return;
         }
@@ -45,6 +45,15 @@ export class FundingBasketComponent implements OnInit {
                 contribution.setAttribute("style", "color: #ff0000");
             }
         }
+        // if (this.usersService.getBasket().value != await firstValueFrom(this.usersService.getUser(1))
+        // for (let c of this.usersService.getBasket().value) {
+        //     if (c == null) {
+        //         this.isValid = false;
+        //         this.statusText.next("One or more needs have been deleted")
+        //     } else {
+        //         this.statusText.next("test")
+        //     }
+        // }
         if (this.isValid) {
             for (let c of document.getElementById("funding-basket")?.querySelectorAll('.contribution')!) {
                 let contribution = c as HTMLInputElement;
-- 
cgit v1.2.3


From 97c9e1e0bb73c7b08c830c47548ac1c4b5bebd0b Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Mon, 31 Mar 2025 17:33:04 -0400
Subject: TOASTS

---
 ufund-ui/src/app/app.component.css                 | 28 -----------
 ufund-ui/src/app/app.component.html                |  8 ---
 ufund-ui/src/app/app.component.ts                  | 14 ++----
 ufund-ui/src/app/app.module.ts                     |  2 +
 .../src/app/components/toast/toast.component.css   | 57 ++++++++++++++++++++++
 .../src/app/components/toast/toast.component.html  |  7 +++
 .../src/app/components/toast/toast.component.ts    | 37 ++++++++++++++
 ufund-ui/src/app/services/toasts.service.ts        | 12 ++++-
 8 files changed, 118 insertions(+), 47 deletions(-)
 create mode 100644 ufund-ui/src/app/components/toast/toast.component.css
 create mode 100644 ufund-ui/src/app/components/toast/toast.component.html
 create mode 100644 ufund-ui/src/app/components/toast/toast.component.ts

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css
index 5204919..0bcd658 100644
--- a/ufund-ui/src/app/app.component.css
+++ b/ufund-ui/src/app/app.component.css
@@ -64,31 +64,3 @@
 
 
 }
-
-.toast {
-    transform: translateY(-90px);
-    transition: transform .5s;
-    align-self: center;
-    z-index: 3;
-    position: absolute;
-    top: 15px;
-    display: flex;
-    flex-direction: row;
-    padding: 3px 15px;
-    background-color: #3a3a3a;
-    border-radius: 100000px;
-    gap: 10px;
-    align-items: center;
-
-    button {
-        aspect-ratio: 1/1;
-        margin-right: -11px;
-        padding: 8px;
-        display: flex;
-        align-items: center;
-    }
-}
-
-.toast.active {
-    transform: translateY(0);
-}
diff --git a/ufund-ui/src/app/app.component.html b/ufund-ui/src/app/app.component.html
index 89075e1..959eada 100644
--- a/ufund-ui/src/app/app.component.html
+++ b/ufund-ui/src/app/app.component.html
@@ -1,11 +1,3 @@
-<div class="toast" #toastdiv>
-<!--    <span{{(toast | async).message}}</span>-->
-<!--    <a *ngIf="toast.action" (click)="toast.action.onAction()">{{toast.action.label}}</a>-->
-<!--    <button (click)="toastdiv.classList.remove('active')">-->
-<!--        <span class="icon">close</span>-->
-<!--    </button>-->
-</div>
-
 <div id="header">
     <div>
         <a routerLink="/">
diff --git a/ufund-ui/src/app/app.component.ts b/ufund-ui/src/app/app.component.ts
index df9114e..2f98334 100644
--- a/ufund-ui/src/app/app.component.ts
+++ b/ufund-ui/src/app/app.component.ts
@@ -1,15 +1,11 @@
-import {Component, OnInit, Inject} from '@angular/core';
+import {Component, OnInit, Inject, ViewContainerRef} from '@angular/core';
 import {BehaviorSubject} from 'rxjs';
 import { DOCUMENT } from '@angular/common';
 import {AuthService} from './services/auth.service';
-import {ToastType} from './services/toasts.service';
+import {ToastsService} from './services/toasts.service';
 import {User} from './models/User';
 import {ActivatedRoute, Router} from '@angular/router';
 
-interface ToastProps {
-    type: ToastType, message: string, action?: {label: string, onAction: () => void}
-}
-
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
@@ -19,13 +15,13 @@ interface ToastProps {
 export class AppComponent implements OnInit {
     // title = 'ufund-ui';
     currentUser?: BehaviorSubject<User | null>;
-    toast = new BehaviorSubject<ToastProps>({type: ToastType.INFO, message: "testToast"})
-
 
     constructor(
         private authService: AuthService,
         private router: Router,
         private route: ActivatedRoute,
+        protected toastService: ToastsService,
+        private viewContainerRef: ViewContainerRef,
         @Inject(DOCUMENT) private document: Document
     ) {}
 
@@ -34,6 +30,7 @@ export class AppComponent implements OnInit {
     }
 
     ngOnInit() {
+        this.toastService.setRootViewContainerRef(this.viewContainerRef)
         this.currentUser = this.authService.getCurrentUserSubject()
         let data = localStorage.getItem("credential");
         if (data) {
@@ -51,5 +48,4 @@ export class AppComponent implements OnInit {
         localStorage.removeItem("credential")
         location.reload()
     }
-
 }
diff --git a/ufund-ui/src/app/app.module.ts b/ufund-ui/src/app/app.module.ts
index ea7e6ad..c91256e 100644
--- a/ufund-ui/src/app/app.module.ts
+++ b/ufund-ui/src/app/app.module.ts
@@ -16,6 +16,7 @@ import {CommonModule} from '@angular/common';
 import {LoginComponent} from './components/login/login.component';
 import { MiniNeedListComponent } from './components/mini-need-list/mini-need-list.component';
 import { SignupComponent } from './components/signup/signup.component';
+import { ToastComponent } from './components/toast/toast.component';
 
 @NgModule({
     declarations: [
@@ -29,6 +30,7 @@ import { SignupComponent } from './components/signup/signup.component';
         LoginComponent,
         SignupComponent,
         MiniNeedListComponent,
+        ToastComponent,
     ],
     imports: [
         BrowserModule,
diff --git a/ufund-ui/src/app/components/toast/toast.component.css b/ufund-ui/src/app/components/toast/toast.component.css
new file mode 100644
index 0000000..4cd81fe
--- /dev/null
+++ b/ufund-ui/src/app/components/toast/toast.component.css
@@ -0,0 +1,57 @@
+:host {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+@keyframes slideDown {
+    from {transform: translateY(-90px);}
+    to {transform: translateY(0);}
+}
+
+.toast {
+    /*transform: translateY(-90px);*/
+    animation: slideDown .5s ease-in-out;
+    transition: transform .5s;
+    align-self: center;
+    z-index: 3;
+    position: absolute;
+    top: 15px;
+    display: flex;
+    flex-direction: row;
+    padding: 3px 15px;
+    background-color: #3a3a3a;
+    border-radius: 100000px;
+    gap: 10px;
+    align-items: center;
+
+    button {
+        aspect-ratio: 1/1;
+        margin-right: -11px;
+        padding: 8px;
+        display: flex;
+        align-items: center;
+        background-color: transparent;
+    }
+
+    button:hover {
+        background-color: rgba(255, 255, 255, 0.1);
+    }
+}
+
+.toast.hide {
+    transform: translateY(-90px);
+}
+
+.toast.warning {
+    background-color: #ffc500;
+    color: black;
+
+    button {
+        color: black;
+    }
+}
+
+.toast.error {
+    background-color: #d81a1a;
+}
diff --git a/ufund-ui/src/app/components/toast/toast.component.html b/ufund-ui/src/app/components/toast/toast.component.html
new file mode 100644
index 0000000..dccf869
--- /dev/null
+++ b/ufund-ui/src/app/components/toast/toast.component.html
@@ -0,0 +1,7 @@
+<div class="toast" [ngClass]="ToastType[type].toLowerCase()" #toastDiv>
+    <span>{{this.message}}</span>
+    <a *ngIf="this.action" (click)="this.action.onAction()">{{this.action.label}}</a>
+    <button (click)="hide()">
+        <span class="icon">close</span>
+    </button>
+</div>
diff --git a/ufund-ui/src/app/components/toast/toast.component.ts b/ufund-ui/src/app/components/toast/toast.component.ts
new file mode 100644
index 0000000..47fd7ff
--- /dev/null
+++ b/ufund-ui/src/app/components/toast/toast.component.ts
@@ -0,0 +1,37 @@
+import {Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core';
+import {ToastType} from '../../services/toasts.service';
+
+@Component({
+  selector: 'app-toast',
+  standalone: false,
+  templateUrl: './toast.component.html',
+  styleUrl: './toast.component.css'
+})
+export class ToastComponent implements OnInit{
+    @Input() type!: ToastType
+    @Input() message!: string
+    @Input() action?: {label: string, onAction: () => void}
+
+    @ViewChild("toastDiv") toastDiv!: ElementRef<HTMLDivElement>
+
+    ngOnInit() {
+        setTimeout(() => {
+            this.hide();
+        }, 3000)
+    }
+
+    hide() {
+        console.log(this.toastDiv, typeof this.toastDiv)
+        this.toastDiv.nativeElement.classList.add('hide')
+    }
+
+    getColor() {
+        switch (this.type) {
+            case ToastType.ERROR: return "red";
+            case ToastType.INFO: return "";
+            case ToastType.WARNING: return "yellow";
+        }
+    }
+
+    protected readonly ToastType = ToastType;
+}
diff --git a/ufund-ui/src/app/services/toasts.service.ts b/ufund-ui/src/app/services/toasts.service.ts
index 0c35e45..4fd024e 100644
--- a/ufund-ui/src/app/services/toasts.service.ts
+++ b/ufund-ui/src/app/services/toasts.service.ts
@@ -1,4 +1,5 @@
-import {Injectable} from '@angular/core';
+import {Injectable, ViewContainerRef} from '@angular/core';
+import {ToastComponent} from '../components/toast/toast.component';
 
 export enum ToastType {
     INFO,
@@ -11,9 +12,16 @@ export enum ToastType {
 })
 export class ToastsService {
 
-    constructor() {}
+    private vcr?: ViewContainerRef
 
     sendToast(type: ToastType, message: string, action?: {label: string, onAction: () => void}) {
+        let compRef = this.vcr?.createComponent(ToastComponent)!
+        compRef.setInput("message", message)
+        compRef.setInput("type", type)
+        compRef.setInput("action", action)
+    }
 
+    setRootViewContainerRef(vcr: ViewContainerRef) {
+        this.vcr = vcr
     }
 }
-- 
cgit v1.2.3


From 643afd1d6ffcca3597556d287944eaf487da709c Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Mon, 31 Mar 2025 17:42:40 -0400
Subject: frontend description editing and display

---
 ufund-ui/src/app/components/cupboard/cupboard.component.html   |  5 +++--
 ufund-ui/src/app/components/need-list/need-list.component.html | 10 +++++++---
 2 files changed, 10 insertions(+), 5 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index 89d8fbe..f6a2041 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -47,9 +47,10 @@
             <label>Physical</label><br>
             <input type="checkbox" name="urgent" [(ngModel)]="selectedNeed.urgent">
             <label>Urgent</label> <br>
-            <input type="submit" value="Submit">
-            <label>Description</label>
+            <label>Description</label> <br>
             <textarea name="description" [(ngModel)]="selectedNeed.description"></textarea><br>
+            <input type="submit" value="Submit">
+            
         </form>
         <span *ngIf="statusText">{{statusText | async}}</span>
 
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 3a4ca9c..d35f2ed 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -32,20 +32,24 @@
                     <span class="needName">{{need.name}}</span>
                     <span class="needType">{{need.type}}</span>
                 </div>
-
+                
                 <div class="right">
                     <span *ngIf="need.urgent" class="urgent">URGENT</span>
                     <span *ngIf="need.location"><span class="icon">location_on</span>{{need.location}}</span>
                 </div>
             </div>
-
+           
             <div class="prog">
                 <span id="hover-status-label-{{need.id}}"> </span>
                 <span>{{need.current}}/{{need.maxGoal}} ({{(need.current / need.maxGoal) * 100}}%)</span>
                 <progress [value]="need.current" [max]="need.maxGoal"></progress>
             </div>
-        </div>
 
+            <div class="description">
+                {{need.description}}
+            </div>
+        </div>
+        
         <div>
             <button *ngIf="isHelper()" (click)="add(need)">Add To Basket</button>
             <button *ngIf="isManager()" (click)="select(need)">
-- 
cgit v1.2.3


From a2e1329a510375fdada021c3d6a2f631a9c162ee Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Mon, 31 Mar 2025 17:51:17 -0400
Subject: image property frontend support

---
 ufund-ui/src/app/components/cupboard/cupboard.component.html | 3 +++
 ufund-ui/src/app/components/cupboard/cupboard.component.ts   | 2 ++
 ufund-ui/src/app/models/Need.ts                              | 1 +
 3 files changed, 6 insertions(+)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index f6a2041..855bd7e 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -13,6 +13,8 @@
         <form #cupboardForm="ngForm" (ngSubmit)="submit(cupboardForm.value)">
             <label>Name:</label><br>
             <input type="text" name="name" ngModel><br>
+            <label>Image:</label><br>
+            <input type="text" name="image" ngModel><br>
             <label>Location:</label><br>
             <input type="text" name="location" ngModel><br>
             <label>Max Goal:</label><br>
@@ -37,6 +39,7 @@
         <label>Needs:</label><br>
         <form #updateForm="ngForm" (ngSubmit)="update(updateForm.value)">
             <input type="text" name="name" [(ngModel)]="selectedNeed.name"><br>
+            <input type="text" name="image" [(ngModel)]="selectedNeed.image"><br>
             <input type="text" name="location" [(ngModel)]="selectedNeed.location"><br>
             <label>Max Goal:</label><br>
             <input type="number" name="maxGoal" [(ngModel)]="selectedNeed.maxGoal"><br>
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index feb39e0..9c8a173 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -85,6 +85,7 @@ export class CupboardComponent implements OnInit {
         console.log(form);
         const need: Need = {
             name: form.name,
+            image: form.image,
             location: form.location,
             id: this.selectedNeed.id, //system will control this
             maxGoal: form.maxGoal,
@@ -122,6 +123,7 @@ export class CupboardComponent implements OnInit {
     submit(form: any) {
         const need: Need = {
             name: form.name,
+            image: form.image,
             location: form.location,
             id: 0,
             maxGoal: form.maxGoal,
diff --git a/ufund-ui/src/app/models/Need.ts b/ufund-ui/src/app/models/Need.ts
index 2a2800c..6cf7e76 100644
--- a/ufund-ui/src/app/models/Need.ts
+++ b/ufund-ui/src/app/models/Need.ts
@@ -1,5 +1,6 @@
 export interface Need {
     name: string,
+    image: string,
     id: number,
     filterAttributes: string[],
     location: string;
-- 
cgit v1.2.3


From 459c716d5429c040ac25435aab93f896f2fd79c3 Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Mon, 31 Mar 2025 17:51:47 -0400
Subject: use toasts in funding basket

---
 .../components/funding-basket/funding-basket.component.ts    | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
index 08515c2..24e2c0b 100644
--- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
+++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
@@ -4,6 +4,7 @@ import {Router} from '@angular/router';
 import {CupboardService} from '../../services/cupboard.service';
 import {catchError, firstValueFrom, Observable} from 'rxjs';
 import {AuthService} from '../../services/auth.service';
+import {ToastsService, ToastType} from '../../services/toasts.service';
 
 @Component({
     selector: 'app-funding-basket',
@@ -18,7 +19,8 @@ export class FundingBasketComponent implements OnInit {
         private router: Router,
         protected cupboardService: CupboardService,
         protected usersService: UsersService,
-        private authService: AuthService
+        private authService: AuthService,
+        private toastService: ToastsService
     ) {}
 
     @ViewChild("contribution") contribution?: Input;
@@ -42,7 +44,9 @@ export class FundingBasketComponent implements OnInit {
             contribution.setAttribute("style", "");
             if (contribution.value == '' || contribution.valueAsNumber <= 0) {
                 this.isValid = false;
+
                 contribution.setAttribute("style", "color: #ff0000");
+                this.toastService.sendToast(ToastType.WARNING, "Invalid input in funding basket!")
             }
         }
         // if (this.usersService.getBasket().value != await firstValueFrom(this.usersService.getUser(1))
@@ -63,11 +67,11 @@ export class FundingBasketComponent implements OnInit {
                 this.cupboardService.checkoutNeed(need.id, +contribution.value)
                     .pipe(catchError((ex, _) => {
                         if (ex.status == 500) {
-                            this.statusText.next('Fields cannot be blank');
+                            this.toastService.sendToast(ToastType.INFO, 'Fields cannot be blank');
                         } else if (ex.status == 400) {
-                            this.statusText.next('Goal must be greater than 0');
+                            this.toastService.sendToast(ToastType.INFO, 'Goal must be greater than 0');
                         } else {
-                            this.statusText.next('Error on creating need');
+                            this.toastService.sendToast(ToastType.INFO, 'Error on creating need');
                         }
                         return new Observable<string>();
                     }))
-- 
cgit v1.2.3


From e1ef22279baccb4b2a5a1ecbb5222e4008d4d523 Mon Sep 17 00:00:00 2001
From: Gunther6070 <haydenhartman10@yahoo.com>
Date: Mon, 31 Mar 2025 20:28:35 -0400
Subject: Added toasts for error handling

---
 .../app/components/cupboard/cupboard.component.ts   | 21 +++++++++++----------
 .../src/app/components/login/login.component.ts     | 12 ++++++------
 .../src/app/components/signup/signup.component.ts   |  4 +++-
 3 files changed, 20 insertions(+), 17 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index 9c8a173..653edd4 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -1,10 +1,11 @@
-import {Component, Input, OnInit, ViewChild} from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
 import { CupboardService } from '../../services/cupboard.service';
 import { Need, GoalType } from '../../models/Need';
 import { userType } from '../../models/User';
-import { BehaviorSubject, catchError, of } from 'rxjs';
+import { catchError, of } from 'rxjs';
 import { NeedListComponent } from '../need-list/need-list.component';
 import {AuthService} from '../../services/auth.service';
+import {ToastsService, ToastType} from '../../services/toasts.service';
 
 @Component({
     selector: 'app-cupboard',
@@ -15,14 +16,14 @@ import {AuthService} from '../../services/auth.service';
 
 export class CupboardComponent implements OnInit {
 
-    protected statusText = new BehaviorSubject("")
     selectedForm = "create";
     needs: any;
     @ViewChild("needList") needList?: NeedListComponent
 
     constructor(
         private cupboardService: CupboardService,
-        private authService: AuthService
+        private authService: AuthService,
+        private toastService: ToastsService
     ) {}
 
     ngOnInit(): void {
@@ -99,11 +100,11 @@ export class CupboardComponent implements OnInit {
         this.cupboardService.updateNeed(need.id, need)
             .pipe(catchError((ex, _) => {
                 if (ex.status == 500) {
-                    this.statusText.next("Fields cannot be blank");
+                    this.toastService.sendToast(ToastType.INFO, 'Fields cannot be blank');
                 } else if (ex.status == 400) {
-                    this.statusText.next("Goal must be greater than 0");
+                    this.toastService.sendToast(ToastType.INFO, "Goal must be greater than 0");
                 } else {
-                    this.statusText.next("Error on creating need");
+                    this.toastService.sendToast(ToastType.INFO, "Error on creating need");
                 }
                 return of()
             }))
@@ -138,11 +139,11 @@ export class CupboardComponent implements OnInit {
         this.cupboardService.createNeed(need)
             .pipe(catchError((ex, _) => {
                 if (ex.status == 500) {
-                    this.statusText.next("Fields cannot be blank");
+                    this.toastService.sendToast(ToastType.INFO, "Fields cannot be blank");
                 } else if (ex.status == 400) {
-                    this.statusText.next("Goal must be greater than 0");
+                    this.toastService.sendToast(ToastType.INFO, "Goal must be greater than 0");
                 } else {
-                    this.statusText.next("Error on creating need");
+                    this.toastService.sendToast(ToastType.INFO, "Error on creating need");
                 }
                 return of()
             }))
diff --git a/ufund-ui/src/app/components/login/login.component.ts b/ufund-ui/src/app/components/login/login.component.ts
index 4dcaedd..0177f67 100644
--- a/ufund-ui/src/app/components/login/login.component.ts
+++ b/ufund-ui/src/app/components/login/login.component.ts
@@ -1,8 +1,8 @@
 import {Component, OnInit} from '@angular/core'
 import {UsersService} from '../../services/users.service';
 import {ActivatedRoute, Router} from '@angular/router';
-import {BehaviorSubject} from 'rxjs';
 import {AuthService} from '../../services/auth.service';
+import {ToastsService, ToastType} from '../../services/toasts.service';
 
 @Component({
     selector: 'app-login',
@@ -13,13 +13,13 @@ import {AuthService} from '../../services/auth.service';
 export class LoginComponent implements OnInit {
 
     protected next?: string | null;
-    protected statusText = new BehaviorSubject("")
 
     constructor(
         protected usersService: UsersService,
         protected router: Router,
         private route: ActivatedRoute,
-        private authService: AuthService
+        private authService: AuthService,
+        private toastService: ToastsService
     ) {}
 
     ngOnInit() {
@@ -38,7 +38,7 @@ export class LoginComponent implements OnInit {
             let key = this.authService.getApiKey()
             localStorage.setItem("credential", JSON.stringify({username: username, key: key}))
         }).catch(ex => {
-            this.statusText.next("Unable to login: " + friendlyHttpStatus[ex.status])
+            this.toastService.sendToast(ToastType.ERROR, "Unable to login: " + friendlyHttpStatus[ex.status])
             console.log(ex)
         })
     }
@@ -50,9 +50,9 @@ export class LoginComponent implements OnInit {
         }
 
         this.usersService.createUser(username, password).then(() => {
-             this.statusText.next("Account created, click login.")
+            this.toastService.sendToast(ToastType.INFO, "Account created, click login.")
         }).catch(ex => {
-            this.statusText.next("Unable to create account: " + friendlyHttpStatus[ex.status])
+            this.toastService.sendToast(ToastType.ERROR, "Unable to create account: " + friendlyHttpStatus[ex.status])
             console.log(ex)
         })
     }
diff --git a/ufund-ui/src/app/components/signup/signup.component.ts b/ufund-ui/src/app/components/signup/signup.component.ts
index 1ab863d..5ec84ae 100644
--- a/ufund-ui/src/app/components/signup/signup.component.ts
+++ b/ufund-ui/src/app/components/signup/signup.component.ts
@@ -2,6 +2,7 @@ import {Component} from '@angular/core';
 import {UsersService} from '../../services/users.service';
 import {Router} from '@angular/router';
 import {BehaviorSubject} from 'rxjs';
+import {ToastsService, ToastType} from '../../services/toasts.service';
 
 class PasswordRequirements {
     sixLong:    {title: string, value: boolean} = {title: 'Is 6 characters or longer' , value: false}
@@ -34,6 +35,7 @@ export class SignupComponent {
     constructor(
         protected usersService: UsersService,
         protected router: Router,
+        protected toastService: ToastsService
     ) {}
 
     signup(username: string | null, password: string | null) {
@@ -45,7 +47,7 @@ export class SignupComponent {
         this.usersService.createUser(username, password).then(() => {
             this.showSuccessMessage.next(true);
         }).catch(ex => {
-            this.statusText.next("Unable to create account: " + friendlyHttpStatus[ex.status])
+            this.toastService.sendToast(ToastType.INFO, "Unable to create account: " + friendlyHttpStatus[ex.status])
             console.log(ex)
         })
     }
-- 
cgit v1.2.3


From 6af14c6089f0fa0924740fb6089affc545f93a81 Mon Sep 17 00:00:00 2001
From: Gunther6070 <haydenhartman10@yahoo.com>
Date: Mon, 31 Mar 2025 20:51:59 -0400
Subject: Removed broken status texts which have been replaced with toasts

---
 ufund-ui/src/app/components/cupboard/cupboard.component.html | 5 +----
 ufund-ui/src/app/components/login/login.component.html       | 1 -
 2 files changed, 1 insertion(+), 5 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index 855bd7e..6f7799e 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -31,8 +31,6 @@
             <input type="submit" value="Submit">
 
         </form>
-        <span *ngIf="statusText">{{statusText | async}}</span>
-
     </div>
     <div id="update-form" *ngIf="selectedForm === 'update'">
         <h1> Update Need </h1>
@@ -53,9 +51,8 @@
             <label>Description</label> <br>
             <textarea name="description" [(ngModel)]="selectedNeed.description"></textarea><br>
             <input type="submit" value="Submit">
-            
+
         </form>
-        <span *ngIf="statusText">{{statusText | async}}</span>
 
     </div>
     <hr>
diff --git a/ufund-ui/src/app/components/login/login.component.html b/ufund-ui/src/app/components/login/login.component.html
index e1c3e2a..c67b903 100644
--- a/ufund-ui/src/app/components/login/login.component.html
+++ b/ufund-ui/src/app/components/login/login.component.html
@@ -6,5 +6,4 @@
     <div>
         New? <a routerLink="/signup">Create an account</a>
     </div>
-    <span *ngIf="statusText">{{statusText | async}}</span>
 </div>
-- 
cgit v1.2.3


From 9c9708cc846dafe33234c38c37425468b9877514 Mon Sep 17 00:00:00 2001
From: Gunther6070 <haydenhartman10@yahoo.com>
Date: Mon, 31 Mar 2025 21:32:55 -0400
Subject: Updated toast's types

---
 ufund-ui/src/app/components/cupboard/cupboard.component.ts   | 12 ++++++------
 .../components/funding-basket/funding-basket.component.ts    |  6 +++++-
 ufund-ui/src/app/components/signup/signup.component.ts       |  2 +-
 3 files changed, 12 insertions(+), 8 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index fff8760..662def4 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -100,11 +100,11 @@ export class CupboardComponent implements OnInit {
         this.cupboardService.updateNeed(need.id, need)
             .pipe(catchError((ex, _) => {
                 if (ex.status == 500) {
-                    this.toastService.sendToast(ToastType.INFO, 'Fields cannot be blank');
+                    this.toastService.sendToast(ToastType.ERROR, 'Fields cannot be blank');
                 } else if (ex.status == 400) {
-                    this.toastService.sendToast(ToastType.INFO, ex.error);
+                    this.toastService.sendToast(ToastType.ERROR, ex.error);
                 } else {
-                    this.toastService.sendToast(ToastType.INFO, "Error on creating need");
+                    this.toastService.sendToast(ToastType.ERROR, "Error on creating need");
                 }
                 return of()
             }))
@@ -139,11 +139,11 @@ export class CupboardComponent implements OnInit {
         this.cupboardService.createNeed(need)
             .pipe(catchError((ex, _) => {
                 if (ex.status == 500) {
-                    this.toastService.sendToast(ToastType.INFO, "Fields cannot be blank");
+                    this.toastService.sendToast(ToastType.ERROR, "Fields cannot be blank");
                 } else if (ex.status == 400) {
-                    this.toastService.sendToast(ToastType.INFO, ex.error);
+                    this.toastService.sendToast(ToastType.ERROR, ex.error);
                 } else {
-                    this.toastService.sendToast(ToastType.INFO, "Error on creating need");
+                    this.toastService.sendToast(ToastType.ERROR, "Error on creating need");
                 }
                 return of()
             }))
diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
index 24e2c0b..54ae720 100644
--- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
+++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
@@ -46,7 +46,11 @@ export class FundingBasketComponent implements OnInit {
                 this.isValid = false;
 
                 contribution.setAttribute("style", "color: #ff0000");
-                this.toastService.sendToast(ToastType.WARNING, "Invalid input in funding basket!")
+                this.toastService.sendToast(ToastType.ERROR, "Invalid input in funding basket!")
+
+                setTimeout(() => {
+                    contribution.setAttribute("style", "color: #ffffff");
+                }, 3000);
             }
         }
         // if (this.usersService.getBasket().value != await firstValueFrom(this.usersService.getUser(1))
diff --git a/ufund-ui/src/app/components/signup/signup.component.ts b/ufund-ui/src/app/components/signup/signup.component.ts
index 5ec84ae..a20d828 100644
--- a/ufund-ui/src/app/components/signup/signup.component.ts
+++ b/ufund-ui/src/app/components/signup/signup.component.ts
@@ -47,7 +47,7 @@ export class SignupComponent {
         this.usersService.createUser(username, password).then(() => {
             this.showSuccessMessage.next(true);
         }).catch(ex => {
-            this.toastService.sendToast(ToastType.INFO, "Unable to create account: " + friendlyHttpStatus[ex.status])
+            this.toastService.sendToast(ToastType.ERROR, "Unable to create account: " + friendlyHttpStatus[ex.status])
             console.log(ex)
         })
     }
-- 
cgit v1.2.3


From aef3df6f9eacfe37479046826a9ca14310b72456 Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Mon, 31 Mar 2025 21:54:38 -0400
Subject: Apply css to funding basket

---
 .../funding-basket/funding-basket.component.css    |  85 +++++++++++++++-
 .../funding-basket/funding-basket.component.html   | 112 ++++++++++++++-------
 .../funding-basket/funding-basket.component.ts     |   6 +-
 .../components/need-list/need-list.component.css   |  21 +++-
 .../components/need-list/need-list.component.html  |  23 +++--
 .../components/need-list/need-list.component.ts    |  13 +--
 ufund-ui/src/styles.css                            |   4 +
 7 files changed, 202 insertions(+), 62 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.css b/ufund-ui/src/app/components/funding-basket/funding-basket.component.css
index 3dec496..a17f710 100644
--- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.css
+++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.css
@@ -1,7 +1,82 @@
-td, p {
-    border: 2px solid #000;
+:host {
+    display: flex;
+    justify-content: center;
+}
+
+#box {
+    display: flex;
+    width: 1000px;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.needEntry {
+    background-color: #2e2e2e;
+    display: flex;
+    flex-direction: column;
     border-radius: 5px;
-    padding: 5px;
-    margin: 5px;
+}
+
+#needList {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    max-width: 1000px;
+}
+
+.needName {
+    font-weight: bold;
+}
+
+.needType {
+    text-transform: uppercase;
+    font-size: 10pt;
+}
+
+.split {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+
+    .left {
+        display: flex;
+        flex-direction: column;
+    }
 
-}
\ No newline at end of file
+    .right {
+        display: flex;
+        flex-direction: column;
+        align-items: end;
+    }
+}
+
+.urgent {
+    font-size: 11pt;
+    background-color: rgba(255, 165, 0, 0.27);
+    color: rgba(255, 165, 0, 1);
+    padding: 2px;
+    border-radius: 5px;
+}
+
+.prog {
+    display: flex;
+    flex-direction: column;
+}
+
+.clickable {
+    padding: 10px;
+    background-color: #3a3a3a;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.clickable:hover {
+    background-color: #444444;
+}
+
+.actionArea {
+    display: flex;
+    padding: 5px;
+    gap: 5px;
+}
diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.html b/ufund-ui/src/app/components/funding-basket/funding-basket.component.html
index 504e694..52b35c1 100644
--- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.html
+++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.html
@@ -1,39 +1,81 @@
-<h1>Funding Basket</h1>
 
-<div id="needCount">
-    <label for="needCount">Needs in Basket:</label>
-    <span>{{ this.usersService.getBasket().getValue().length }}</span>
-</div>
+<!--<div id="needCount">-->
+<!--    <label for="needCount">Needs in Basket:</label>-->
+<!--    <span>{{ this.usersService.getBasket().getValue().length }}</span>-->
+<!--</div>-->
 
-<div *ngIf="this.usersService.getBasket().getValue().length == 0">
-    <h2>There are no needs in the basket</h2>
-</div>
+<!--<div *ngIf="this.usersService.getBasket().getValue().length == 0">-->
+<!--    <h2>There are no needs in the basket</h2>-->
+<!--</div>-->
+
+<!--<table class="needs" id="funding-basket" *ngIf="this.usersService.getBasket().getValue().length != 0">-->
+<!--    <thead>-->
+<!--        <tr>-->
+<!--            <th class="need"></th>-->
+<!--        </tr>-->
+<!--    </thead>-->
+<!--    <tbody>-->
+<!--        <tr *ngFor="let need of usersService.getBasket().getValue()">-->
+<!--            <td>-->
+<!--                <a routerLink="/need/{{need.id}}">{{need.name}}</a>-->
+<!--                <p>Goal: {{need.maxGoal}}</p>-->
+<!--                <p>Current: {{(need.current).toFixed(2)}}</p>-->
+<!--                <p>How much to Contribute: <input type="number" placeholder="insert value" min="1" id={{need.id}} class="contribution"></p>-->
+<!--                <br>-->
+<!--                <div>-->
+<!--                    <button type="button" class="removeNeed" title="delete need"-->
+<!--                    (click)="this.usersService.removeNeed(need.id)">Remove Need</button>-->
+<!--                </div>-->
+<!--            </td>-->
+<!--        </tr>-->
+<!--    </tbody>-->
+<!--</table>-->
+<!--<br>-->
+<div id="box">
+    <h1>Funding Basket</h1>
+    <ng-template [ngIf]="usersService.getBasket().getValue().length">
+        <div id="needList">
+            <div *ngFor="let need of usersService.getBasket().getValue()" class="needEntry">
+                <div [routerLink]="'/need/' + need.id" class="clickable">
+                    <div class="split">
+                        <div class="left">
+                            <span class="needName">{{need.name}}</span>
+                            <span class="needType">{{need.type}}</span>
+                        </div>
+
+                        <div class="right">
+                            <span *ngIf="need.urgent" class="urgent">URGENT</span>
+                            <span *ngIf="need.location"><span class="icon">location_on</span>{{need.location}}</span>
+                        </div>
+                    </div>
+
+                    <br>
 
-<table class="needs" id="funding-basket" *ngIf="this.usersService.getBasket().getValue().length != 0">
-    <thead>
-        <tr>
-            <th class="need"></th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr *ngFor="let need of usersService.getBasket().getValue()">
-            <td>
-                <a routerLink="/need/{{need.id}}">{{need.name}}</a>
-                <p>Goal: {{need.maxGoal}}</p>
-                <p>Current: {{(need.current).toFixed(2)}}</p>
-                <p>How much to Contribute: <input type="number" placeholder="insert value" min="1" id={{need.id}} class="contribution"></p>
-                <br>
-                <div>
-                    <button type="button" class="removeNeed" title="delete need"
-                    (click)="this.usersService.removeNeed(need.id)">Remove Need</button>
+                    <div class="prog">
+                        <span id="hover-status-label-{{need.id}}"> </span>
+                        <span>{{need.current}}/{{need.maxGoal}} ({{((need.current / need.maxGoal) * 100).toFixed(0)}}%)</span>
+                        <progress [value]="need.current" [max]="need.maxGoal"></progress>
+                    </div>
+
+                    <!--            <div class="description">-->
+                    <!--                {{need.description}}-->
+                    <!--            </div>-->
+                </div>
+
+                <div class="actionArea">
+                    <input type="number" placeholder="Quantity" min="1" id={{need.id}} class="contribution">
+                    <button class="removeNeed" title="delete need" (click)="this.usersService.removeNeed(need.id)">
+                        <span class="icon">delete</span> Remove from Basket
+                    </button>
                 </div>
-            </td>
-        </tr>
-    </tbody>
-</table>
-<br>
-<div>
-    <p *ngIf="!isValid">Invalid input in funding basket!</p>
-    <button type="submit" class="checkout" title="checkout" (click)="checkout()">Checkout</button>
-    <span *ngIf="statusText">{{statusText | async}}</span>
-</div>
\ No newline at end of file
+            </div>
+        </div>
+        <br>
+        <div id="footer">
+            <button class="button2" title="checkout" (click)="checkout()">Checkout</button>
+        </div>
+    </ng-template>
+    <div *ngIf="!usersService.getBasket().getValue().length">
+        <span>There are no needs in your basket! </span><a routerLink="/cupboard">Browse the cupboard</a>
+    </div>
+</div>
diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
index 24e2c0b..646ef35 100644
--- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
+++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
@@ -39,7 +39,7 @@ export class FundingBasketComponent implements OnInit {
 
     async checkout() {
         this.isValid = true;
-        for (let c of document.getElementById("funding-basket")?.querySelectorAll('.contribution')!) {
+        for (let c of document.querySelectorAll('.contribution')!) {
             let contribution = c as HTMLInputElement;
             contribution.setAttribute("style", "");
             if (contribution.value == '' || contribution.valueAsNumber <= 0) {
@@ -59,7 +59,7 @@ export class FundingBasketComponent implements OnInit {
         //     }
         // }
         if (this.isValid) {
-            for (let c of document.getElementById("funding-basket")?.querySelectorAll('.contribution')!) {
+            for (let c of document.querySelectorAll('.contribution')!) {
                 let contribution = c as HTMLInputElement;
                 let need = await firstValueFrom(this.cupboardService.getNeed(+contribution.id));
                 need.current += +contribution.value;
@@ -77,11 +77,11 @@ export class FundingBasketComponent implements OnInit {
                     }))
                     .subscribe((result) => {
                         if (result) {
-                            console.log('need updated successfully');
                             //this.needList?.refresh()
                         } else {
                             console.log('need update failed');
                         }
+                        this.toastService.sendToast(ToastType.INFO, "Checkout successful");
                     });
             }
         }
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index 1936b38..d4be5fa 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -5,11 +5,10 @@
 }
 
 .needEntry {
-    background-color: #3a3a3a;
+    background-color: #2e2e2e;
     display: flex;
     flex-direction: column;
     border-radius: 5px;
-    padding: 10px;
 }
 
 #needList {
@@ -59,6 +58,7 @@ select {
     flex-direction: row;
     justify-content: space-between;
 
+
     .left {
         display: flex;
         flex-direction: column;
@@ -83,3 +83,20 @@ select {
     display: flex;
     flex-direction: column;
 }
+
+.clickable {
+    padding: 10px;
+    background-color: #3a3a3a;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.clickable:hover {
+    background-color: #444444;
+}
+
+.actionArea {
+    display: flex;
+    padding: 5px;
+    gap: 5px;
+}
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index c325320..84f83d6 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -26,37 +26,38 @@
 
 <div id="needList">
     <div *ngFor="let need of searchResults" class="needEntry">
-        <div [routerLink]="'/need/' + need.id">
+        <div [routerLink]="'/need/' + need.id" class="clickable">
             <div class="split">
                 <div class="left">
                     <span class="needName">{{need.name}}</span>
                     <span class="needType">{{need.type}}</span>
                 </div>
-                
+
                 <div class="right">
                     <span *ngIf="need.urgent" class="urgent">URGENT</span>
                     <span *ngIf="need.location"><span class="icon">location_on</span>{{need.location}}</span>
                 </div>
             </div>
-           
+
+            <br>
+
             <div class="prog">
                 <span id="hover-status-label-{{need.id}}"> </span>
                 <span>{{need.current}}/{{need.maxGoal}} ({{((need.current / need.maxGoal) * 100).toFixed(0)}}%)</span>
                 <progress [value]="need.current" [max]="need.maxGoal"></progress>
             </div>
 
-            <div class="description">
-                {{need.description}}
-            </div>
         </div>
-        
-        <div>
-            <button *ngIf="isHelper()" (click)="add(need)">Add To Basket</button>
+
+        <div class="actionArea">
+            <button *ngIf="isHelper()" (click)="add(need)">
+                <span class="icon">add</span>Add To Basket
+            </button>
             <button *ngIf="isManager()" (click)="select(need)">
-                <span class="icon">edit</span>
+                <span class="icon">edit</span>Delete Need
             </button>
             <button *ngIf="isManager()" (click)="delete(need.id)" >
-                <span class="icon">delete</span>
+                <span class="icon">delete</span>Edit Need
             </button>
         </div>
     </div>
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 47114c3..7a9d647 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -1,11 +1,11 @@
-import {Component , Output, EventEmitter} from '@angular/core';
-import { NgForm } from '@angular/forms';
+import {Component, EventEmitter, Output} from '@angular/core';
 import {Need} from '../../models/Need';
 import {CupboardService} from '../../services/cupboard.service';
-import { UsersService } from '../../services/users.service';
-import { userType } from '../../models/User';
+import {UsersService} from '../../services/users.service';
+import {userType} from '../../models/User';
 import {AuthService} from '../../services/auth.service';
 import {catchError, of} from 'rxjs';
+import {ToastsService, ToastType} from '../../services/toasts.service';
 
 interface sortAlgo {
   (a: Need,b: Need): number;
@@ -84,7 +84,8 @@ export class NeedListComponent {
   constructor(
     private cupboardService: CupboardService,
     private usersService: UsersService,
-    private authService: AuthService
+    private authService: AuthService,
+    private toastService: ToastsService
   ) {}
 
     refresh() {
@@ -196,7 +197,7 @@ export class NeedListComponent {
                 this.usersService.refreshBasket();
             });
       } else {
-        window.alert("This need is already in your basket!")
+        this.toastService.sendToast(ToastType.ERROR, "This need is already in your basket!")
       }
 
 
diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css
index b152e61..f515154 100644
--- a/ufund-ui/src/styles.css
+++ b/ufund-ui/src/styles.css
@@ -38,6 +38,10 @@ button, input[type=button], input[type=reset], input[type=submit], .button {
     border-radius: 9999px;
     border-style: none;
     background-color: light-dark(#ebebeb, #3a3a3a);
+    display: flex;
+    gap: 5px;
+    text-align: center;
+    justify-content: center;
 
     &:hover {
         background-color: light-dark(#e1e1e1, #444444);
-- 
cgit v1.2.3


From 4f8ddd385924b3c7c2b36acd28daf658ecc2cb09 Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Mon, 31 Mar 2025 21:57:32 -0400
Subject: Tweak validation in funding basket

---
 .../src/app/components/funding-basket/funding-basket.component.ts     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
index b3826be..ecf452a 100644
--- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
+++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
@@ -45,11 +45,11 @@ export class FundingBasketComponent implements OnInit {
             if (contribution.value == '' || contribution.valueAsNumber <= 0) {
                 this.isValid = false;
 
-                contribution.setAttribute("style", "color: #ff0000");
+                contribution.setAttribute("style", "border-color: #ff0000");
                 this.toastService.sendToast(ToastType.ERROR, "Invalid input in funding basket!")
 
                 setTimeout(() => {
-                    contribution.setAttribute("style", "color: #ffffff");
+                    contribution.setAttribute("style", "border-color: #ffffff");
                 }, 3000);
             }
         }
-- 
cgit v1.2.3


From 786a6db3f5a22f7bb2cc249731ef654b675c3c86 Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Mon, 31 Mar 2025 22:15:37 -0400
Subject: moving functionality to new component

---
 ufund-ui/src/app/app.module.ts                     |  2 +
 .../components/cupboard/cupboard.component.html    | 23 --------
 .../app/components/cupboard/cupboard.component.ts  | 39 --------------
 .../components/need-edit/need-edit.component.css   |  0
 .../components/need-edit/need-edit.component.html  | 22 ++++++++
 .../components/need-edit/need-edit.component.ts    | 61 ++++++++++++++++++++++
 6 files changed, 85 insertions(+), 62 deletions(-)
 create mode 100644 ufund-ui/src/app/components/need-edit/need-edit.component.css
 create mode 100644 ufund-ui/src/app/components/need-edit/need-edit.component.html
 create mode 100644 ufund-ui/src/app/components/need-edit/need-edit.component.ts

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/app.module.ts b/ufund-ui/src/app/app.module.ts
index c91256e..16455be 100644
--- a/ufund-ui/src/app/app.module.ts
+++ b/ufund-ui/src/app/app.module.ts
@@ -17,6 +17,7 @@ import {LoginComponent} from './components/login/login.component';
 import { MiniNeedListComponent } from './components/mini-need-list/mini-need-list.component';
 import { SignupComponent } from './components/signup/signup.component';
 import { ToastComponent } from './components/toast/toast.component';
+import { NeedEditComponent } from './components/need-edit/need-edit.component';
 
 @NgModule({
     declarations: [
@@ -31,6 +32,7 @@ import { ToastComponent } from './components/toast/toast.component';
         SignupComponent,
         MiniNeedListComponent,
         ToastComponent,
+        NeedEditComponent,
     ],
     imports: [
         BrowserModule,
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index 6f7799e..e9387a2 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -32,29 +32,6 @@
 
         </form>
     </div>
-    <div id="update-form" *ngIf="selectedForm === 'update'">
-        <h1> Update Need </h1>
-        <label>Needs:</label><br>
-        <form #updateForm="ngForm" (ngSubmit)="update(updateForm.value)">
-            <input type="text" name="name" [(ngModel)]="selectedNeed.name"><br>
-            <input type="text" name="image" [(ngModel)]="selectedNeed.image"><br>
-            <input type="text" name="location" [(ngModel)]="selectedNeed.location"><br>
-            <label>Max Goal:</label><br>
-            <input type="number" name="maxGoal" [(ngModel)]="selectedNeed.maxGoal"><br>
-            <label>Type</label><br>
-            <input type="radio" name="type" value="MONETARY" [(ngModel)]="selectedNeed.type">
-            <label>Monetary</label><br>
-            <input type="radio" name="type" value="PHYSICAL" [(ngModel)]="selectedNeed.type">
-            <label>Physical</label><br>
-            <input type="checkbox" name="urgent" [(ngModel)]="selectedNeed.urgent">
-            <label>Urgent</label> <br>
-            <label>Description</label> <br>
-            <textarea name="description" [(ngModel)]="selectedNeed.description"></textarea><br>
-            <input type="submit" value="Submit">
-
-        </form>
-
-    </div>
     <hr>
 
 </div>
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index 662def4..e70d98f 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -82,45 +82,6 @@ export class CupboardComponent implements OnInit {
         return type === ("MANAGER" as unknown as userType);
     }
 
-    update(form: any) {
-        console.log(form);
-        const need: Need = {
-            name: form.name,
-            image: form.image,
-            location: form.location,
-            id: this.selectedNeed.id, //system will control this
-            maxGoal: form.maxGoal,
-            type: GoalType[form.type as keyof typeof GoalType],
-            urgent: form.urgent,
-            filterAttributes: [],
-            current: 0,
-            description: form.description
-        };
-
-        this.cupboardService.updateNeed(need.id, need)
-            .pipe(catchError((ex, _) => {
-                if (ex.status == 500) {
-                    this.toastService.sendToast(ToastType.ERROR, 'Fields cannot be blank');
-                } else if (ex.status == 400) {
-                    this.toastService.sendToast(ToastType.ERROR, ex.error);
-                } else {
-                    this.toastService.sendToast(ToastType.ERROR, "Error on creating need");
-                }
-                return of()
-            }))
-            .subscribe(
-                (result) => {
-                    if (result) {
-                        console.log("need updated successfully");
-                        this.needList?.refresh()
-                    } else {
-                        console.log("need update failed");
-                    }
-                }
-
-            );
-    }
-
     submit(form: any) {
         const need: Need = {
             name: form.name,
diff --git a/ufund-ui/src/app/components/need-edit/need-edit.component.css b/ufund-ui/src/app/components/need-edit/need-edit.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/ufund-ui/src/app/components/need-edit/need-edit.component.html b/ufund-ui/src/app/components/need-edit/need-edit.component.html
new file mode 100644
index 0000000..bcb166b
--- /dev/null
+++ b/ufund-ui/src/app/components/need-edit/need-edit.component.html
@@ -0,0 +1,22 @@
+<div id="update-form">
+    <h1> Update Need </h1>
+    <label>Needs:</label><br>
+    <form #updateForm="ngForm" (ngSubmit)="update(updateForm.value)">
+        <input type="text" name="name" [(ngModel)]="selectedNeed.name"><br>
+        <input type="text" name="image" [(ngModel)]="selectedNeed.image"><br>
+        <input type="text" name="location" [(ngModel)]="selectedNeed.location"><br>
+        <label>Max Goal:</label><br>
+        <input type="number" name="maxGoal" [(ngModel)]="selectedNeed.maxGoal"><br>
+        <label>Type</label><br>
+        <input type="radio" name="type" value="MONETARY" [(ngModel)]="selectedNeed.type">
+        <label>Monetary</label><br>
+        <input type="radio" name="type" value="PHYSICAL" [(ngModel)]="selectedNeed.type">
+        <label>Physical</label><br>
+        <input type="checkbox" name="urgent" [(ngModel)]="selectedNeed.urgent">
+        <label>Urgent</label> <br>
+        <label>Description</label> <br>
+        <textarea name="description" [(ngModel)]="selectedNeed.description"></textarea><br>
+        <input type="submit" value="Submit">
+
+    </form>
+</div>
\ No newline at end of file
diff --git a/ufund-ui/src/app/components/need-edit/need-edit.component.ts b/ufund-ui/src/app/components/need-edit/need-edit.component.ts
new file mode 100644
index 0000000..02ffb71
--- /dev/null
+++ b/ufund-ui/src/app/components/need-edit/need-edit.component.ts
@@ -0,0 +1,61 @@
+import { Component, Input, Output } from '@angular/core';
+import { Need, GoalType } from '../../models/Need'; 
+import { CupboardService } from '../../services/cupboard.service';
+import { catchError, of } from 'rxjs';
+import { ToastsService, ToastType } from '../../services/toasts.service';
+
+@Component({
+  selector: 'app-need-edit',
+  standalone: false,
+  templateUrl: './need-edit.component.html',
+  styleUrl: './need-edit.component.css'
+})
+export class NeedEditComponent {
+  constructor(
+    private cupboardService: CupboardService,
+    private toastService: ToastsService
+
+  ) {}
+
+  @Input() selectedNeed!: Need;
+  @Output() selectedNeedID: number | null = null;
+
+  update(form: any) {
+    console.log(form);
+    const need: Need = {
+        name: form.name,
+        image: form.image,
+        location: form.location,
+        id: this.selectedNeed.id, //system will control this
+        maxGoal: form.maxGoal,
+        type: GoalType[form.type as keyof typeof GoalType],
+        urgent: form.urgent,
+        filterAttributes: [],
+        current: 0,
+        description: form.description
+    };
+
+    this.cupboardService.updateNeed(need.id, need)
+        .pipe(catchError((ex, _) => {
+            if (ex.status == 500) {
+                this.toastService.sendToast(ToastType.ERROR, 'Fields cannot be blank');
+            } else if (ex.status == 400) {
+                this.toastService.sendToast(ToastType.ERROR, ex.error);
+            } else {
+                this.toastService.sendToast(ToastType.ERROR, "Error on creating need");
+            }
+            return of()
+        }))
+        .subscribe(
+            (result) => {
+                if (result) {
+                    console.log("need updated successfully");
+                  //  this.needList?.refresh()
+                } else {
+                    console.log("need update failed");
+                }
+            }
+
+        );
+  }
+}
\ No newline at end of file
-- 
cgit v1.2.3


From 4186983da13740ec0a4731770ac238922631be11 Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Mon, 31 Mar 2025 22:52:49 -0400
Subject: auto refresh with emitter

---
 ufund-ui/src/app/components/cupboard/cupboard.component.html | 1 +
 ufund-ui/src/app/components/need-edit/need-edit.component.ts | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index e9387a2..2cfbe2d 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -8,6 +8,7 @@
         <button [ngClass]="selectedForm === 'create' ? 'selected-tab' : 'tab'" (click)="selectForm('create')">Create new Need</button>
         <button [ngClass]="selectedForm === 'update' ? 'selected-tab' : 'tab'" (click)="selectForm('update')">Update existing Need</button>
     </div>
+    <app-need-edit [selectedNeed]="selectedNeed" (refreshNeedList)="needList.refresh()"></app-need-edit>
     <div id="create-form" *ngIf="selectedForm === 'create'">
         <h1> Create Need </h1>
         <form #cupboardForm="ngForm" (ngSubmit)="submit(cupboardForm.value)">
diff --git a/ufund-ui/src/app/components/need-edit/need-edit.component.ts b/ufund-ui/src/app/components/need-edit/need-edit.component.ts
index 02ffb71..2462534 100644
--- a/ufund-ui/src/app/components/need-edit/need-edit.component.ts
+++ b/ufund-ui/src/app/components/need-edit/need-edit.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, Output } from '@angular/core';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { Need, GoalType } from '../../models/Need'; 
 import { CupboardService } from '../../services/cupboard.service';
 import { catchError, of } from 'rxjs';
@@ -18,7 +18,7 @@ export class NeedEditComponent {
   ) {}
 
   @Input() selectedNeed!: Need;
-  @Output() selectedNeedID: number | null = null;
+  @Output() refreshNeedList = new EventEmitter<void>();
 
   update(form: any) {
     console.log(form);
@@ -50,7 +50,7 @@ export class NeedEditComponent {
             (result) => {
                 if (result) {
                     console.log("need updated successfully");
-                  //  this.needList?.refresh()
+                    this.refreshNeedList.emit();
                 } else {
                     console.log("need update failed");
                 }
-- 
cgit v1.2.3


From 896e1219526a19400c7143b274193f8b818d6156 Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Mon, 31 Mar 2025 23:37:00 -0400
Subject: Commit half working changes to move to my laptop

---
 .../funding-basket/funding-basket.component.ts     |  1 -
 .../components/need-list/need-list.component.html  |  4 +-
 .../components/need-list/need-list.component.ts    |  4 +-
 .../components/need-page/need-page.component.css   | 57 ++++++++++++++++++++
 .../components/need-page/need-page.component.html  | 41 ++++++++++++--
 .../components/need-page/need-page.component.ts    | 62 ++++++++++++++++++++--
 ufund-ui/src/styles.css                            |  6 ++-
 7 files changed, 161 insertions(+), 14 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
index ecf452a..dcacca1 100644
--- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
+++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
@@ -13,7 +13,6 @@ import {ToastsService, ToastType} from '../../services/toasts.service';
     styleUrl: './funding-basket.component.css'
 })
 export class FundingBasketComponent implements OnInit {
-    statusText: any;
 
     constructor(
         private router: Router,
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 84f83d6..e00ba47 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -54,10 +54,10 @@
                 <span class="icon">add</span>Add To Basket
             </button>
             <button *ngIf="isManager()" (click)="select(need)">
-                <span class="icon">edit</span>Delete Need
+                <span class="icon">edit</span>Edit Need
             </button>
             <button *ngIf="isManager()" (click)="delete(need.id)" >
-                <span class="icon">delete</span>Edit Need
+                <span class="icon">delete</span>Delete Need
             </button>
         </div>
     </div>
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 7a9d647..d641acf 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -160,6 +160,7 @@ export class NeedListComponent {
 
   delete(id : number) {
     this.cupboardService.deleteNeed(id).subscribe(() => {
+        this.toastService.sendToast(ToastType.INFO, "Need deleted.")
       this.needs = this.needs.filter(n => n.id !== id)
     })
     this.refresh();
@@ -199,10 +200,7 @@ export class NeedListComponent {
       } else {
         this.toastService.sendToast(ToastType.ERROR, "This need is already in your basket!")
       }
-
-
     }
-
   }
 
   back() {
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 a3a4014..f950171 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
@@ -8,3 +8,60 @@
     flex-direction: column;
     width: 1000px;
 }
+
+.needName {
+    font-weight: bold;
+}
+
+.needType {
+    text-transform: uppercase;
+    font-size: 10pt;
+}
+
+.split {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+
+    .left {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .right {
+        display: flex;
+        flex-direction: column;
+        align-items: end;
+    }
+}
+
+.urgent {
+    font-size: 11pt;
+    background-color: rgba(255, 165, 0, 0.27);
+    color: rgba(255, 165, 0, 1);
+    padding: 2px;
+    border-radius: 5px;
+}
+
+.prog {
+    display: flex;
+    flex-direction: column;
+}
+
+.actionArea {
+    display: flex;
+    padding: 5px;
+    gap: 5px;
+}
+
+#editor {
+    position: absolute;
+    background-color: #4a4a4a;
+    display: flex;
+    flex-direction: column;
+    justify-self: center;
+    align-self: center;
+    padding: 20px;
+    box-shadow: 0 0 100px black;
+}
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 a72167c..a8479fd 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
@@ -13,14 +13,47 @@
     </div>
 
     <hr>
+    <span>{{need?.description}}</span>
+    <img *ngIf="need?.image" alt="Need image" [src]="need?.image"/>
     <p>Location: {{need?.location}}</p>
     <p>Urgent: {{need?.urgent}}</p>
     <span>{{need?.current}} / {{need?.maxGoal}}</span>
     <progress [value]="need?.current" [max]="need?.maxGoal"></progress>
     <span>This goal is <strong>{{(((need?.current ?? 0)*100) / (need?.maxGoal ?? 0)).toFixed(0)}}%</strong> complete!</span>
-    <div>
-        <button>Add to basket</button>
-        <button>Edit</button>
-        <button>Delete</button>
+    <div class="actionArea">
+        <button *ngIf="isHelper()" (click)="add(need!)">
+            <span class="icon">add</span>Add To Basket
+        </button>
+        <button *ngIf="isManager()" (click)="edit(need!)">
+            <span class="icon">edit</span>Edit Need
+        </button>
+        <button *ngIf="isManager()" (click)="delete(need!.id)" >
+            <span class="icon">delete</span>Delete Need
+        </button>
+    </div>
+
+    <div [routerLink]="'/need/' + need.id" class="clickable">
+        <div class="split">
+            <div class="left">
+                <span class="needName">{{need.name}}</span>
+                <span class="needType">{{need.type}}</span>
+            </div>
+
+            <div class="right">
+                <span *ngIf="need.urgent" class="urgent">URGENT</span>
+                <span *ngIf="need.location"><span class="icon">location_on</span>{{need.location}}</span>
+            </div>
+        </div>
+
+        <br>
+
+        <div class="prog">
+            <span id="hover-status-label-{{need.id}}"> </span>
+            <span>{{need.current}}/{{need.maxGoal}} ({{((need.current / need.maxGoal) * 100).toFixed(0)}}%)</span>
+            <progress [value]="need.current" [max]="need.maxGoal"></progress>
+        </div>
+
     </div>
+
+<!--    <app-need-edit id="editor" [selectedNeed]="need!"></app-need-edit>-->
 </div>
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 e38554c..ad4cacf 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,8 +1,12 @@
 import {Component, Input} from '@angular/core';
 import {GoalType, Need} from '../../models/Need';
-import {ActivatedRoute} from "@angular/router";
+import {ActivatedRoute, Router} from "@angular/router";
 import {CupboardService} from "../../services/cupboard.service";
-import {NgFor} from '@angular/common';
+import {userType} from '../../models/User';
+import {AuthService} from '../../services/auth.service';
+import {catchError, of} from 'rxjs';
+import {ToastsService, ToastType} from '../../services/toasts.service';
+import {UsersService} from '../../services/users.service';
 
 @Component({
     selector: 'app-need-page',
@@ -14,11 +18,15 @@ export class NeedPageComponent {
     constructor(
         private route: ActivatedRoute,
         private cupboardService: CupboardService,
+        private authService: AuthService,
+        private usersService: UsersService,
+        private toastService: ToastsService,
+        private router: Router
     ) {}
 
     public GoalType = GoalType;
 
-    @Input() need?: Need;
+    @Input() need!: Need;
 
     ngOnInit(): void {
         const id = Number(this.route.snapshot.paramMap.get('id'));
@@ -28,4 +36,52 @@ export class NeedPageComponent {
     back() {
         window.history.back();
     }
+
+    isManager() {
+        const type = this.authService.getCurrentUser()?.type;
+        return type === ("MANAGER" as unknown as userType);
+    }
+
+    isHelper() {
+        const type = this.authService.getCurrentUser()?.type;
+        return type === ("HELPER" as unknown as userType);
+    }
+
+    add(need: Need) {
+        const currentUser = this.authService.getCurrentUser();
+        //console.log("get current user in angular:", currentUser)
+        if (currentUser) {
+            if (!currentUser.basket.includes(need.id)) {
+                currentUser.basket.push(need.id);
+                this.usersService.updateUser(currentUser)
+                    .pipe(catchError((err, _) =>  {
+                        console.error(err);
+                        return of();
+                    }))
+                    .subscribe(() => {
+                        this.usersService.refreshBasket();
+                    });
+            } else {
+                this.toastService.sendToast(ToastType.ERROR, "This need is already in your basket!")
+            }
+        }
+    }
+
+    delete(id : number) {
+        this.cupboardService.deleteNeed(id)
+            .pipe(catchError((ex, r) => {
+                this.toastService.sendToast(ToastType.ERROR, ex.error)
+                return of()
+            }))
+            .subscribe(() => {
+                // this.needs = this.needs.filter(n => n.id !== id)
+                this.toastService.sendToast(ToastType.INFO, "Need deleted")
+                this.router.navigate(['/'])
+            })
+        // this.refresh();
+    }
+
+    edit(need: Need) {
+
+    }
 }
diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css
index f515154..75d6b36 100644
--- a/ufund-ui/src/styles.css
+++ b/ufund-ui/src/styles.css
@@ -1,7 +1,7 @@
 /* You can add global styles to this file, and also import other style files */
 
 :root {
-    color-scheme: light dark;
+    color-scheme: /*light*/ dark;
 }
 
 * {
@@ -65,3 +65,7 @@ button, input[type=button], input[type=reset], input[type=submit], .button {
 h1 {
     font-size: 40px;
 }
+
+progress {
+    min-width: 100%;
+}
-- 
cgit v1.2.3


From bb2e7b50e1ca96120fc42eed1f090cf0e1c98258 Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Mon, 31 Mar 2025 23:47:36 -0400
Subject: needs per page

---
 .../components/need-list/need-list.component.html  |  9 +++++-
 .../components/need-list/need-list.component.ts    | 34 ++++++++++++++++++++--
 2 files changed, 40 insertions(+), 3 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 84f83d6..d43e07b 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -24,8 +24,15 @@
 <h2 *ngIf="searchResults.length == needs.length"> All Needs </h2>
 <h2 *ngIf="searchResults.length == 0"> No Results Found </h2>
 
+<div id="page-selector">
+    <span>Page {{currentPage + 1}} of {{totalPages}} </span> <br>
+    <label>Needs per page: </label> 
+    <input type ="number" [(ngModel)]="itemsPerPage" (change)="resetVisibleNeeds()" min="1" max="{{searchResults.length}}">
+    <button *ngIf="currentPage > 0" (click)="decrementPage()">Previous</button>
+    <button *ngIf="currentPage < totalPages - 1" (click)="incrementPage()">Next</button>
+</div>
 <div id="needList">
-    <div *ngFor="let need of searchResults" class="needEntry">
+    <div *ngFor="let need of visibleNeeds" class="needEntry">
         <div [routerLink]="'/need/' + need.id" class="clickable">
             <div class="split">
                 <div class="left">
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 7a9d647..bc3de42 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -66,7 +66,36 @@ export class NeedListComponent {
   selectedNeed: Need | null = null;
   needs: Need[] = [];
   searchResults: Need[] = [];
+  visibleNeeds: Need[] = [];
   sortMode: 'Ascending' | 'Descending' = 'Ascending'
+  currentPage: number = 0;
+  itemsPerPage: number = 5;
+  totalPages: number = Math.ceil(this.needs.length / this.itemsPerPage);
+
+  decrementPage() {
+    this.currentPage--;
+    this.updateVisibleNeeds();    
+  }
+
+  incrementPage() {
+    this.currentPage++;
+    this.updateVisibleNeeds();    
+  }
+
+  editNeedsPerPage(amount: number) {
+    this.itemsPerPage = amount;
+    this.updateVisibleNeeds();
+  }
+
+  updateVisibleNeeds() {
+    this.totalPages = Math.ceil(this.searchResults.length / this.itemsPerPage);
+    this.visibleNeeds = this.searchResults.slice(this.currentPage * this.itemsPerPage, (this.currentPage + 1) * this.itemsPerPage);
+  }
+
+  resetVisibleNeeds() {
+    this.currentPage = 0;
+    this.updateVisibleNeeds();
+  }
 
   currentSortAlgo: sortAlgo = sortByPriority;
   sortSelection: string = 'sortByPriority';
@@ -96,6 +125,7 @@ export class NeedListComponent {
             this.needs = n.sort(this.currentSortAlgo).reverse();
           }
           this.searchResults = this.needs;
+          this.updateVisibleNeeds();
         });
 
         const form = document.getElementById('search-form') as HTMLFormElement;
@@ -105,6 +135,7 @@ export class NeedListComponent {
 
   ngOnInit(): void {
     this.refresh()
+   
   }
 
   changeSortMode(form : any) {
@@ -145,8 +176,7 @@ export class NeedListComponent {
             } else {
               this.searchResults = n.sort(this.currentSortAlgo).reverse();
             }
-
-            console.log(currentSearchValue, this.searchResults);
+            this.updateVisibleNeeds();
             });
           }
         }, 250);
-- 
cgit v1.2.3


From 61daadccf89b2b84820386558ac454c0123d4299 Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Tue, 1 Apr 2025 01:16:49 -0400
Subject: More css cleanup

---
 ufund-ui/src/app/app.component.css                 | 44 ++++++++--------
 .../app/components/cupboard/cupboard.component.css |  4 +-
 .../funding-basket/funding-basket.component.css    |  2 +-
 .../components/home-page/home-page.component.css   |  1 +
 .../components/need-list/need-list.component.css   |  8 +++
 .../components/need-list/need-list.component.html  | 15 +++---
 .../components/need-page/need-page.component.css   | 30 ++++++-----
 .../components/need-page/need-page.component.html  | 60 +++++++++-------------
 8 files changed, 85 insertions(+), 79 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css
index 0bcd658..f4ed668 100644
--- a/ufund-ui/src/app/app.component.css
+++ b/ufund-ui/src/app/app.component.css
@@ -38,29 +38,33 @@
         text-decoration: none;
     }
 
-    a {
-        display: block;
-        position: relative;
-        padding: 0.1em 0;
+    a:hover {
+        text-decoration: underline;
     }
 
-    a::after {
-        content: '';
-        position: absolute;
-        bottom: 4px;
-        left: 0;
-        width: 100%;
-        height: 0.03em;
-        background-color: white;
-        opacity: 0;
-        transition: opacity 300ms, transform 300ms;
-    }
+    /*a {*/
+    /*    display: block;*/
+    /*    position: relative;*/
+    /*    padding: 0.1em 0;*/
+    /*}*/
 
-    a:hover::after,
-    a:focus::after {
-        opacity: 1;
-        transform: translate3d(0, 0.2em, 0);
-    }
+    /*a::after {*/
+    /*    content: '';*/
+    /*    position: absolute;*/
+    /*    bottom: 4px;*/
+    /*    left: 0;*/
+    /*    width: 100%;*/
+    /*    height: 0.03em;*/
+    /*    background-color: white;*/
+    /*    opacity: 0;*/
+    /*    transition: opacity 300ms, transform 300ms;*/
+    /*}*/
+
+    /*a:hover::after,*/
+    /*a:focus::after {*/
+    /*    opacity: 1;*/
+    /*    transform: translate3d(0, 0.2em, 0);*/
+    /*}*/
 
 
 }
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.css b/ufund-ui/src/app/components/cupboard/cupboard.component.css
index faff4d4..4116a77 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.css
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.css
@@ -4,7 +4,7 @@
 }
 
 #box {
-    width: 1000px;
+    width: 800px;
     display: flex;
     flex-direction: column;
 }
@@ -22,7 +22,7 @@
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin-right: 5px;
-   border-bottom: 0px;
+   border-bottom: 0;
 }
 
 .selected-tab {
diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.css b/ufund-ui/src/app/components/funding-basket/funding-basket.component.css
index a17f710..dff6e06 100644
--- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.css
+++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.css
@@ -5,7 +5,7 @@
 
 #box {
     display: flex;
-    width: 1000px;
+    width: 800px;
     flex-direction: column;
     gap: 10px;
 }
diff --git a/ufund-ui/src/app/components/home-page/home-page.component.css b/ufund-ui/src/app/components/home-page/home-page.component.css
index 16f3140..a10377f 100644
--- a/ufund-ui/src/app/components/home-page/home-page.component.css
+++ b/ufund-ui/src/app/components/home-page/home-page.component.css
@@ -4,6 +4,7 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    overflow: clip;
 }
 
 #hero {
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index d4be5fa..041b4ce 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -100,3 +100,11 @@ select {
     padding: 5px;
     gap: 5px;
 }
+
+#page-selector {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px;
+    gap: 10px
+}
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 8ea7b88..8ea88b1 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -15,6 +15,8 @@
         <button (click)="changeSortMode(searchForm.value)">
             <span class="icon">{{sortMode === 'Ascending' ? 'arrow_upward': 'arrow_downward'}}</span>
         </button>
+        <label>Needs per page: </label>
+        <input type ="number" [(ngModel)]="itemsPerPage" (change)="resetVisibleNeeds()" min="1" max="{{searchResults.length}}">
     </div>
     <!--<button (click)="close()">Close</button>-->
 </div>
@@ -24,13 +26,6 @@
 <h2 *ngIf="searchResults.length == needs.length"> All Needs </h2>
 <h2 *ngIf="searchResults.length == 0"> No Results Found </h2>
 
-<div id="page-selector">
-    <span>Page {{currentPage + 1}} of {{totalPages}} </span> <br>
-    <label>Needs per page: </label> 
-    <input type ="number" [(ngModel)]="itemsPerPage" (change)="resetVisibleNeeds()" min="1" max="{{searchResults.length}}">
-    <button *ngIf="currentPage > 0" (click)="decrementPage()">Previous</button>
-    <button *ngIf="currentPage < totalPages - 1" (click)="incrementPage()">Next</button>
-</div>
 <div id="needList">
     <div *ngFor="let need of visibleNeeds" class="needEntry">
         <div [routerLink]="'/need/' + need.id" class="clickable">
@@ -69,3 +64,9 @@
         </div>
     </div>
 </div>
+
+<div id="page-selector">
+    <button *ngIf="currentPage > 0" (click)="decrementPage()"><span class="icon">arrow_back_ios</span></button>
+    <span>Page {{currentPage + 1}} of {{totalPages}}</span>
+    <button *ngIf="currentPage < totalPages - 1" (click)="incrementPage()"><span class="icon">arrow_forward_ios</span></button>
+</div>
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 f950171..844410f 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
@@ -6,7 +6,9 @@
 #box {
     display: flex;
     flex-direction: column;
-    width: 1000px;
+    width: 800px;
+    justify-content: start;
+    gap: 10px;
 }
 
 .needName {
@@ -15,7 +17,9 @@
 
 .needType {
     text-transform: uppercase;
-    font-size: 10pt;
+    /*font-size: 10pt;*/
+    margin-top: -20px;
+    /*margin-bottom: 20px;*/
 }
 
 .split {
@@ -47,21 +51,23 @@
 .prog {
     display: flex;
     flex-direction: column;
+    margin-bottom: 15px;
 }
 
 .actionArea {
     display: flex;
     padding: 5px;
     gap: 5px;
+    margin-top: 10px;
 }
 
-#editor {
-    position: absolute;
-    background-color: #4a4a4a;
-    display: flex;
-    flex-direction: column;
-    justify-self: center;
-    align-self: center;
-    padding: 20px;
-    box-shadow: 0 0 100px black;
-}
+/*#editor {*/
+/*    position: absolute;*/
+/*    background-color: #4a4a4a;*/
+/*    display: flex;*/
+/*    flex-direction: column;*/
+/*    justify-self: center;*/
+/*    align-self: center;*/
+/*    padding: 20px;*/
+/*    box-shadow: 0 0 100px black;*/
+/*}*/
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 a8479fd..e8d292e 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,10 +1,29 @@
 <div id="box">
     <h1>{{need?.name}}</h1>
-    <div>
-        <h3>Looking for <u>{{need?.type}}</u> Donations.</h3>
+    <span class="needType">{{need?.type}} GOAL</span>
+
+    <img *ngIf="need.image" alt="Need image" [src]="need?.image"/>
+
+    <p>{{need?.description}}</p>
+    <div class="prog">
+<!--        <span>{{need?.current}} / {{need?.maxGoal}}</span>-->
+        <progress [value]="need?.current" [max]="need?.maxGoal"></progress>
+        <span>This goal is <strong>{{(((need?.current ?? 0)*100) / (need?.maxGoal ?? 0)).toFixed(0)}}%</strong> complete!</span>
     </div>
-    <div *ngIf="need?.filterAttributes">
-        <p>Tags:</p>
+
+    <span><strong>Target Goal:</strong> {{need.maxGoal}}</span>
+
+    <span><strong>Amount Currently Collected:</strong> {{need.current}}</span>
+
+    <span><strong>Location:</strong> {{need.location}}</span>
+
+    <span><strong>Urgency: </strong>
+        <span *ngIf="!need.urgent">Not urgent</span>
+        <span *ngIf="need.urgent" class="urgent">URGENT</span>
+    </span>
+
+    <div *ngIf="need.filterAttributes.length > 0">
+        <strong>Tags:</strong>
         <ul style="display: flex; column-gap: 24px;">
             <li *ngFor="let tag of need?.filterAttributes">
                 <p>{{tag}}</p>
@@ -12,14 +31,6 @@
         </ul>
     </div>
 
-    <hr>
-    <span>{{need?.description}}</span>
-    <img *ngIf="need?.image" alt="Need image" [src]="need?.image"/>
-    <p>Location: {{need?.location}}</p>
-    <p>Urgent: {{need?.urgent}}</p>
-    <span>{{need?.current}} / {{need?.maxGoal}}</span>
-    <progress [value]="need?.current" [max]="need?.maxGoal"></progress>
-    <span>This goal is <strong>{{(((need?.current ?? 0)*100) / (need?.maxGoal ?? 0)).toFixed(0)}}%</strong> complete!</span>
     <div class="actionArea">
         <button *ngIf="isHelper()" (click)="add(need!)">
             <span class="icon">add</span>Add To Basket
@@ -31,29 +42,4 @@
             <span class="icon">delete</span>Delete Need
         </button>
     </div>
-
-    <div [routerLink]="'/need/' + need.id" class="clickable">
-        <div class="split">
-            <div class="left">
-                <span class="needName">{{need.name}}</span>
-                <span class="needType">{{need.type}}</span>
-            </div>
-
-            <div class="right">
-                <span *ngIf="need.urgent" class="urgent">URGENT</span>
-                <span *ngIf="need.location"><span class="icon">location_on</span>{{need.location}}</span>
-            </div>
-        </div>
-
-        <br>
-
-        <div class="prog">
-            <span id="hover-status-label-{{need.id}}"> </span>
-            <span>{{need.current}}/{{need.maxGoal}} ({{((need.current / need.maxGoal) * 100).toFixed(0)}}%)</span>
-            <progress [value]="need.current" [max]="need.maxGoal"></progress>
-        </div>
-
-    </div>
-
-<!--    <app-need-edit id="editor" [selectedNeed]="need!"></app-need-edit>-->
 </div>
-- 
cgit v1.2.3


From 0e9c0803e35a23ef2e873dc7ebf224a49a92f207 Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Tue, 1 Apr 2025 02:16:04 -0400
Subject: Get everything working enough to go in main

---
 .../app/components/cupboard/cupboard.component.css | 18 +++++++++++++---
 .../components/cupboard/cupboard.component.html    | 24 +++++++++++-----------
 .../app/components/cupboard/cupboard.component.ts  |  2 +-
 .../components/dashboard/dashboard.component.html  |  2 +-
 .../components/dashboard/dashboard.component.ts    |  9 ++++++--
 .../funding-basket/funding-basket.component.css    |  2 +-
 .../components/need-edit/need-edit.component.css   | 21 +++++++++++++++++++
 .../components/need-edit/need-edit.component.html  |  6 ++++--
 .../components/need-list/need-list.component.css   |  2 +-
 .../components/need-list/need-list.component.html  |  1 -
 .../components/need-page/need-page.component.html  |  6 +++---
 11 files changed, 66 insertions(+), 27 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.css b/ufund-ui/src/app/components/cupboard/cupboard.component.css
index 4116a77..e45d929 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.css
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.css
@@ -30,13 +30,25 @@
 }
 
 #create-form, #delete-form, #update-form {
-   background-color: #d9d9d9;
+   background-color: #3a3a3a;
    padding: 10px 20px 20px 20px;
    border: 2px solid #000;
    border-radius: 5px;
    visibility: visible;
+    /*position: absolute;*/
 }
 
-#create-button {
-   padding: 10px 20px;
+#header {
+    display: flex;
+    gap: 20px;
+    align-items: center;
+
+    h1 {
+        display: inline;
+        width: min-content;
+    }
+
+    button {
+        margin-top: 3px;
+    }
 }
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index 2cfbe2d..37954bb 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -1,14 +1,14 @@
 <div id="box">
-    <h1> Cupboard </h1>
+    <div id="header">
+        <h1> Cupboard </h1>
+        <button *ngIf="isManager()" class="button2" (click)="this.selectForm('create')"><span class="icon">add</span>Create Need</button>
+    </div>
     <app-need-list (currentNeed) = populateForm($event) #needList></app-need-list>
 </div>
-<div *ngIf="isManager()" >
-    <h2 > Admin View </h2>
-    <div id="menu">
-        <button [ngClass]="selectedForm === 'create' ? 'selected-tab' : 'tab'" (click)="selectForm('create')">Create new Need</button>
-        <button [ngClass]="selectedForm === 'update' ? 'selected-tab' : 'tab'" (click)="selectForm('update')">Update existing Need</button>
-    </div>
-    <app-need-edit [selectedNeed]="selectedNeed" (refreshNeedList)="needList.refresh()"></app-need-edit>
+<ng-template [ngIf]="isManager()" >
+<div>
+    <app-need-edit *ngIf="selectedForm === 'update'" [selectedNeed]="selectedNeed" (refreshNeedList)="needList.refresh()"></app-need-edit>
+    <div>
     <div id="create-form" *ngIf="selectedForm === 'create'">
         <h1> Create Need </h1>
         <form #cupboardForm="ngForm" (ngSubmit)="submit(cupboardForm.value)">
@@ -27,12 +27,12 @@
             <label>Physical</label><br>
             <input type="checkbox" name="urgent" value="false" ngModel>
             <label>Urgent</label><br>
-            <label>Description</label>
-            <textarea name="description" [(ngModel)]="selectedNeed.description"></textarea><br>
+            <label>Description</label><br>
+            <textarea name="description"></textarea><br>
             <input type="submit" value="Submit">
 
         </form>
     </div>
-    <hr>
-
+    </div>
 </div>
+</ng-template>
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index e70d98f..2230cd3 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -16,7 +16,7 @@ import {ToastsService, ToastType} from '../../services/toasts.service';
 
 export class CupboardComponent implements OnInit {
 
-    selectedForm = "create";
+    selectedForm?: string = undefined;
     needs: any;
     @ViewChild("needList") needList?: NeedListComponent
 
diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.html b/ufund-ui/src/app/components/dashboard/dashboard.component.html
index 330d1f3..6a95ecd 100644
--- a/ufund-ui/src/app/components/dashboard/dashboard.component.html
+++ b/ufund-ui/src/app/components/dashboard/dashboard.component.html
@@ -2,4 +2,4 @@
 <h1>Your Dashboard</h1>
 <app-mini-need-list [needList]="topNeeds" jtitle="Top needs" url="/cupboard"/>
 <app-mini-need-list [needList]="almostThere" jtitle="Almost there" url="/cupboard"/>
-<app-mini-need-list [needList]="inBasket" jtitle="In your basket" url="/cupboard"/>
+<app-mini-need-list [needList]="inBasket" jtitle="In your basket" url="/basket"/>
diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.ts b/ufund-ui/src/app/components/dashboard/dashboard.component.ts
index 645893f..c94b5c6 100644
--- a/ufund-ui/src/app/components/dashboard/dashboard.component.ts
+++ b/ufund-ui/src/app/components/dashboard/dashboard.component.ts
@@ -4,6 +4,7 @@ import {Router} from '@angular/router';
 import {Need} from '../../models/Need';
 import {CupboardService} from '../../services/cupboard.service';
 import {firstValueFrom} from 'rxjs';
+import {UsersService} from '../../services/users.service';
 
 @Component({
     selector: 'app-dashboard',
@@ -20,7 +21,8 @@ export class DashboardComponent implements OnInit{
     constructor(
         protected authService: AuthService,
         protected router: Router,
-        protected cupboardService: CupboardService
+        protected cupboardService: CupboardService,
+        protected userService: UsersService
     ) {}
 
     ngOnInit() {
@@ -33,7 +35,10 @@ export class DashboardComponent implements OnInit{
         firstValueFrom(this.cupboardService.getNeeds()).then(r => {
             this.topNeeds = r.sort((a, b) => b.current - a.current)
             this.almostThere = r.sort((a, b) => a.current/a.maxGoal - b.current/b.maxGoal)
-            this.inBasket = r.filter(n => n.id in user!.basket)
+        })
+
+        this.userService.getBasket().subscribe(r => {
+            this.inBasket = r;
         })
     }
 
diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.css b/ufund-ui/src/app/components/funding-basket/funding-basket.component.css
index dff6e06..c46ef57 100644
--- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.css
+++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.css
@@ -20,7 +20,7 @@
 #needList {
     display: flex;
     flex-direction: column;
-    gap: 10px;
+    gap: 15px;
     max-width: 1000px;
 }
 
diff --git a/ufund-ui/src/app/components/need-edit/need-edit.component.css b/ufund-ui/src/app/components/need-edit/need-edit.component.css
index e69de29..17605c2 100644
--- a/ufund-ui/src/app/components/need-edit/need-edit.component.css
+++ b/ufund-ui/src/app/components/need-edit/need-edit.component.css
@@ -0,0 +1,21 @@
+:host {
+    /*position: absolute;*/
+    /*background-color: rgba(0, 0, 0, 0.5);*/
+    /*display: flex;*/
+    /*height: 100%;*/
+    /*top: 0;*/
+    /*left: 0;*/
+    /*right: 0;*/
+    /*z-index: 5;*/
+    /*justify-content: center;*/
+}
+
+#create-form, #delete-form, #update-form {
+    margin-top: 50px;
+    background-color: #3a3a3a;
+    padding: 10px 20px 20px 20px;
+    border: 2px solid #000;
+    border-radius: 5px;
+    /*visibility: visible;*/
+    /*position: absolute;*/
+}
diff --git a/ufund-ui/src/app/components/need-edit/need-edit.component.html b/ufund-ui/src/app/components/need-edit/need-edit.component.html
index bcb166b..e776415 100644
--- a/ufund-ui/src/app/components/need-edit/need-edit.component.html
+++ b/ufund-ui/src/app/components/need-edit/need-edit.component.html
@@ -1,9 +1,11 @@
 <div id="update-form">
     <h1> Update Need </h1>
-    <label>Needs:</label><br>
     <form #updateForm="ngForm" (ngSubmit)="update(updateForm.value)">
+        <label>Name:</label><br>
         <input type="text" name="name" [(ngModel)]="selectedNeed.name"><br>
+        <label>Image:</label><br>
         <input type="text" name="image" [(ngModel)]="selectedNeed.image"><br>
+        <label>Location:</label><br>
         <input type="text" name="location" [(ngModel)]="selectedNeed.location"><br>
         <label>Max Goal:</label><br>
         <input type="number" name="maxGoal" [(ngModel)]="selectedNeed.maxGoal"><br>
@@ -19,4 +21,4 @@
         <input type="submit" value="Submit">
 
     </form>
-</div>
\ No newline at end of file
+</div>
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index 041b4ce..5f2e5e1 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -14,7 +14,7 @@
 #needList {
     display: flex;
     flex-direction: column;
-    gap: 10px
+    gap: 15px
 }
 
 select {
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 8ea88b1..c0501ba 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -25,7 +25,6 @@
 <h2 *ngIf="searchResults.length < needs.length && searchResults.length != 0"> Search Results({{needs.length - searchResults.length}} needs filtered): </h2>
 <h2 *ngIf="searchResults.length == needs.length"> All Needs </h2>
 <h2 *ngIf="searchResults.length == 0"> No Results Found </h2>
-
 <div id="needList">
     <div *ngFor="let need of visibleNeeds" class="needEntry">
         <div [routerLink]="'/need/' + need.id" class="clickable">
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 e8d292e..958dfa6 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
@@ -35,9 +35,9 @@
         <button *ngIf="isHelper()" (click)="add(need!)">
             <span class="icon">add</span>Add To Basket
         </button>
-        <button *ngIf="isManager()" (click)="edit(need!)">
-            <span class="icon">edit</span>Edit Need
-        </button>
+<!--        <button *ngIf="isManager()" (click)="edit(need!)">-->
+<!--            <span class="icon">edit</span>Edit Need-->
+<!--        </button>-->
         <button *ngIf="isManager()" (click)="delete(need!.id)" >
             <span class="icon">delete</span>Delete Need
         </button>
-- 
cgit v1.2.3