Merge branch 'main' of https://github.com/RIT-SWEN-261-02/team-project-2245-swen-261-02-2b-jellysolutions

33 files changed, 1648 insertions, 485 deletions

diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.css b/ufund-ui/src/app/components/cupboard/cupboard.component.css
index fe4971a..e45d929 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.css
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.css
@@ -1,21 +1,54 @@
 :host {
-    display: block;
-    border: 2px solid #000;
-    border-radius: 5px;
-    padding: 10px 20px;
+    display: flex;
+    justify-content: center;
 }
 
-#menu, #create-form, #delete-form, #update-form {
-   background-color: #d9d9d9;
+#box {
+    width: 800px;
+    display: flex;
+    flex-direction: column;
+}
+
+#menu {
+      display: flex;
+
+      margin: 10px;
+
+}
+
+.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: 0;
+}
+
+.selected-tab {
+   background-color: white;
+}
+
+#create-form, #delete-form, #update-form {
+   background-color: #3a3a3a;
    padding: 10px 20px 20px 20px;
    border: 2px solid #000;
-   border-radius: 5px;  
-   width: 20%;
+   border-radius: 5px;
    visibility: visible;
-
+    /*position: absolute;*/
 }
 
-#create-button {
-   padding: 10px 20px;
-   
-}
\ No newline at end of file
+#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 0d64475..37954bb 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -1,50 +1,38 @@
-<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 id="box">
+    <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 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>
+<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)">
+            <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>
+            <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="checkbox" name="urgent" value="false" ngModel>
+            <label>Urgent</label><br>
+            <label>Description</label><br>
+            <textarea name="description"></textarea><br>
+            <input type="submit" value="Submit">
 
+        </form>
+    </div>
+    </div>
 </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>
+</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 24b3e2d..2230cd3 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, OnInit, ViewChild } from '@angular/core';
+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 { 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,18 +16,18 @@ import { NeedListComponent } from '../need-list/need-list.component';
 
 export class CupboardComponent implements OnInit {
 
-    protected statusText = new BehaviorSubject("")
-
+    selectedForm?: string = undefined;
     needs: any;
     @ViewChild("needList") needList?: NeedListComponent
 
-    constructor(private cupboardService: CupboardService, private usersService: UsersService) { }
+    constructor(
+        private cupboardService: CupboardService,
+        private authService: AuthService,
+        private toastService: ToastsService
+    ) {}
 
     ngOnInit(): void {
         this.cupboardService.getNeeds().subscribe(n => this.needs = n);
-        this.close();
-        this.openmenu();
-
         if (this.isManager()) {
             console.log("Admin view of Cupboard");
         } else {
@@ -36,117 +37,74 @@ export class CupboardComponent implements OnInit {
 
     selectedNeed: any = {
         name: '',
+        location:'',
         id: null,
         maxGoal: null,
-        type: ''
+        type: '',
+        urgent: false
     };
     selectedNeedId: number | null = null;
+    searchResults: any[] = [];
 
-    private hideElement(element: any) {
-        if (element) {
-            element.style.visibility = 'hidden';
-            element.style.position = 'absolute';
+    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)
+                });
+            }
 
-    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('menu'));
-        this.hideElement(document.getElementById('update-form'));
+    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 {
+        this.selectForm('update');
         this.selectedNeed = { ...need };
     }
 
     isManager() {
-        const type = this.usersService.getCurrentUser()?.type;
+        const type = this.authService.getCurrentUser()?.type;
         return type === ("MANAGER" as unknown as userType);
     }
 
-    update(form: any) {
-        console.log(form);
-        const need: Need = {
-            name: form.name,
-            id: form.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) {
-                    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 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,
+            image: form.image,
+            location: form.location,
             id: 0,
             maxGoal: form.maxGoal,
             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);
         this.cupboardService.createNeed(need)
-            .pipe(catchError((ex, r) => {
+            .pipe(catchError((ex, _) => {
                 if (ex.status == 500) {
-                    this.statusText.next("Fields cannot be blank");
+                    this.toastService.sendToast(ToastType.ERROR, "Fields cannot be blank");
                 } else if (ex.status == 400) {
-                    this.statusText.next("Goal must be greater than 0");
+                    this.toastService.sendToast(ToastType.ERROR, ex.error);
                 } else {
-                    this.statusText.next("Error on creating need");
+                    this.toastService.sendToast(ToastType.ERROR, "Error on creating need");
                 }
                 return of()
             }))
@@ -167,48 +125,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.css b/ufund-ui/src/app/components/dashboard/dashboard.component.css
index e69de29..78a69ba 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: 1000px;
+    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..6a95ecd 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="/basket"/>
diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.ts b/ufund-ui/src/app/components/dashboard/dashboard.component.ts
index b9faefa..c94b5c6 100644
--- a/ufund-ui/src/app/components/dashboard/dashboard.component.ts
+++ b/ufund-ui/src/app/components/dashboard/dashboard.component.ts
@@ -1,21 +1,45 @@
-import { Component } from '@angular/core';
-import { UsersService } from '../../services/users.service';
-import { userType } from '../../models/User';
+import {Component, OnInit} from '@angular/core';
+import {AuthService} from '../../services/auth.service';
+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',
-  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 {
+export class DashboardComponent implements OnInit{
+
+    topNeeds?: Need[]
+    almostThere?: Need[]
+    inBasket?: Need[]
+
     constructor(
-      protected usersService: UsersService,
+        protected authService: AuthService,
+        protected router: Router,
+        protected cupboardService: CupboardService,
+        protected userService: UsersService
     ) {}
 
-    isManager() {
-        const type = this.usersService.getCurrentUser()?.type;
-        return type === ("MANAGER" as unknown as userType);
-      }
+    ngOnInit() {
+        let user = this.authService.getCurrentUser()
+        if(!localStorage.getItem("credential") && !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.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 3dec496..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
@@ -1,7 +1,82 @@
-td, p {
-    border: 2px solid #000;
+:host {
+    display: flex;
+    justify-content: center;
+}
+
+#box {
+    display: flex;
+    width: 800px;
+    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: 15px;
+    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 e654711..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
@@ -1,11 +1,10 @@
 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';
+import {ToastsService, ToastType} from '../../services/toasts.service';
 
 @Component({
     selector: 'app-funding-basket',
@@ -14,67 +13,82 @@ import { BehaviorSubject, catchError, firstValueFrom, Observable } from 'rxjs';
     styleUrl: './funding-basket.component.css'
 })
 export class FundingBasketComponent implements OnInit {
-  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,
+        private toastService: ToastsService
+    ) {}
 
-  @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 is for login rerouting
+    ngOnInit(): void {
+        if (!this.authService.getCurrentUser()) {
+            this.router.navigate(['/login'], {queryParams: {redir: this.router.url}});
+            return;
+        }
+
+        this.usersService.refreshBasket();
+        // this.usersService.removeNeed(); <- call this to remove
     }
 
-    this.usersService.refreshBasket();
-    // this.usersService.removeNeed(); <- call this to remove
-  }
+    async checkout() {
+        this.isValid = true;
+        for (let c of document.querySelectorAll('.contribution')!) {
+            let contribution = c as HTMLInputElement;
+            contribution.setAttribute("style", "");
+            if (contribution.value == '' || contribution.valueAsNumber <= 0) {
+                this.isValid = false;
 
-  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.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');
-                }
-            });
-      }
-    }
-  }
+                contribution.setAttribute("style", "border-color: #ff0000");
+                this.toastService.sendToast(ToastType.ERROR, "Invalid input in funding basket!")
 
+                setTimeout(() => {
+                    contribution.setAttribute("style", "border-color: #ffffff");
+                }, 3000);
+            }
+        }
+        // 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.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.toastService.sendToast(ToastType.INFO, 'Fields cannot be blank');
+                        } else if (ex.status == 400) {
+                            this.toastService.sendToast(ToastType.INFO, 'Goal must be greater than 0');
+                        } else {
+                            this.toastService.sendToast(ToastType.INFO, 'Error on creating need');
+                        }
+                        return new Observable<string>();
+                    }))
+                    .subscribe((result) => {
+                        if (result) {
+                            //this.needList?.refresh()
+                        } else {
+                            console.log('need update failed');
+                        }
+                        this.toastService.sendToast(ToastType.INFO, "Checkout successful");
+                    });
+            }
+        }
+    }
 
 
 }
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..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
@@ -0,0 +1,38 @@
+:host {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    overflow: clip;
+}
+
+#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 d41e670..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,3 +1,10 @@
-<a routerLink="/login">
-    Login/Sign Up
-</a>
\ No newline at end of file
+<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/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/login/login.component.css b/ufund-ui/src/app/components/login/login.component.css
index 435cc87..b56b4eb 100644
--- a/ufund-ui/src/app/components/login/login.component.css
+++ b/ufund-ui/src/app/components/login/login.component.css
@@ -1,8 +1,28 @@
-: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");*/
+    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 {
+    display: flex;
+    flex-direction: column;
+    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: rgb(140, 140, 255);
 }
 
 .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..c67b903 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">
+    <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>
+    <div>
+        New? <a routerLink="/signup">Create an account</a>
+    </div>
+</div>
diff --git a/ufund-ui/src/app/components/login/login.component.ts b/ufund-ui/src/app/components/login/login.component.ts
index 9d806f5..0177f67 100644
--- a/ufund-ui/src/app/components/login/login.component.ts
+++ b/ufund-ui/src/app/components/login/login.component.ts
@@ -1,23 +1,25 @@
 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',
-  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 {
 
     protected next?: string | null;
-    protected statusText = new BehaviorSubject("")
 
     constructor(
         protected usersService: UsersService,
         protected router: Router,
-        private route: ActivatedRoute
+        private route: ActivatedRoute,
+        private authService: AuthService,
+        private toastService: ToastsService
     ) {}
 
     ngOnInit() {
@@ -31,10 +33,12 @@ export class LoginComponent implements OnInit {
             return;
         }
 
-        this.usersService.login(username, password).then(() => {
+        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])
+            this.toastService.sendToast(ToastType.ERROR, "Unable to login: " + friendlyHttpStatus[ex.status])
             console.log(ex)
         })
     }
@@ -46,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/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..ac456ab
--- /dev/null
+++ b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css
@@ -0,0 +1,56 @@
+: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;
+    overflow: clip;
+}
+
+.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/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..17605c2
--- /dev/null
+++ 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
new file mode 100644
index 0000000..e776415
--- /dev/null
+++ b/ufund-ui/src/app/components/need-edit/need-edit.component.html
@@ -0,0 +1,24 @@
+<div id="update-form">
+    <h1> Update Need </h1>
+    <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>
+        <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>
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..2462534
--- /dev/null
+++ b/ufund-ui/src/app/components/need-edit/need-edit.component.ts
@@ -0,0 +1,61 @@
+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';
+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() refreshNeedList = new EventEmitter<void>();
+
+  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.refreshNeedList.emit();
+                } else {
+                    console.log("need update failed");
+                }
+            }
+
+        );
+  }
+}
\ 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 bbc3f2c..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
@@ -1,24 +1,110 @@
-:host {
-    list-style-type:circle;
-    border: 2px solid #000;
-    display: block;
-    width: 30%;
-    border-radius: 5px;
-    
+#header {
+    display: flex;
+    flex-direction: column;
+    gap: 10px
 }
 
-li, div {
-    border: 2px solid #000;
+.needEntry {
+    background-color: #2e2e2e;
+    display: flex;
+    flex-direction: column;
     border-radius: 5px;
+}
+
+#needList {
+    display: flex;
+    flex-direction: column;
+    gap: 15px
+}
+
+select {
+    font-size: 14pt;
     padding: 5px;
-    margin: 5px;
+}
+
+#searchArea {
+    display: flex;
 
+    form {
+        display: flex;
+        width: 100%;
+        gap: 10px;
+    }
+
+    input[type=text] {
+        display: flex;
+        width: 100%;
+    }
 }
 
-#search-form {
-    background-color: #d9d9d9;
-    padding: 10px 20px 20px 20px;
-    border: 2px solid #000;
-    border-radius: 5px;  
-    visibility: visible;
- }
\ No newline at end of file
+#sortArea {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    align-items: center;
+}
+
+.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;
+}
+
+.clickable {
+    padding: 10px;
+    background-color: #3a3a3a;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.clickable:hover {
+    background-color: #444444;
+}
+
+.actionArea {
+    display: flex;
+    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 36c12d0..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
@@ -1,28 +1,71 @@
-<h1>Needs List</h1>
-<input id="search-button" type="button" value="Search" (click)="open()">
-<div id="search-form">
-    <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>
-    </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 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 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)">
+            <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>
+
+<!-- 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>
+<div id="needList">
+    <div *ngFor="let need of visibleNeeds" 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>
+
+            <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>
+
+        <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>Edit Need
+            </button>
+            <button *ngIf="isManager()" (click)="delete(need.id)" >
+                <span class="icon">delete</span>Delete Need
+            </button>
         </div>
     </div>
 </div>
 
-<li *ngFor="let need of needs">
-    <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>
-</li>
+<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-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 25f05d6..cd3d9bd 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,61 @@
-import { Component } from '@angular/core';
+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;
+}
+
+// sort functions
+const sortByName: sortAlgo = (a: Need, b: Need): number => {
+  if(a.name.toLocaleLowerCase() < b.name.toLocaleLowerCase()) {
+    return -1;
+  }
+  return 1;
+}
+
+const sortByGoal: sortAlgo = (a: Need, b: Need): number => {
+  if(a.maxGoal == b.maxGoal) {
+    return sortByName(a,b);
+  }
+  else if(a.maxGoal > b.maxGoal) {
+    return -1;
+  }
+  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);
+  }
+  else if(a.urgent && !b.urgent) {
+    return -1;
+  }
+  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,
@@ -10,54 +63,88 @@ import { userType } from '../../models/User';
   styleUrl: './need-list.component.css'
 })
 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';
+
+  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:sortByLocation,name:"sortByLocation", display:["Location (A to Z)", "Location (Z to A)"]},
+    {func:sortByCompletion,name:"sortByCompletion", display:["Most Completed", "Least Completed"]},
+    {func:sortByGoal,name:"sortByGoal", display:["Largest Maximum Goal", "Smallest Maximum Goal"]},
+  ];
+
+  @Output() currentNeed = new EventEmitter<Need>();
 
   constructor(
     private cupboardService: CupboardService,
-    private usersService: UsersService
+    private usersService: UsersService,
+    private authService: AuthService,
+    private toastService: ToastsService
   ) {}
 
     refresh() {
-        this.cupboardService.getNeeds().subscribe(n => this.needs = n)
+        this.cupboardService.getNeeds().subscribe(n => {
+          if (this.sortMode == 'Ascending') {
+            this.needs = n.sort(this.currentSortAlgo);
+          } else {
+            this.needs = n.sort(this.currentSortAlgo).reverse();
+          }
+          this.searchResults = this.needs;
+          this.updateVisibleNeeds();
+        });
+
+        const form = document.getElementById('search-form') as HTMLFormElement;
+        form.reset();
+        this.search(null);
     }
 
   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';
-    }
   }
 
-  private updateSearchStatus(text: string) {
-    let element = document.getElementById('search-status');
-    if (element) {
-      element.innerHTML = text;
+  changeSortMode(form : any) {
+    if (this.sortMode == 'Ascending'){
+      this.sortMode = 'Descending'
+    } else {
+      this.sortMode = 'Ascending'
     }
-  }
-
-  open() {
-    this.hideElement(document.getElementById('search-button'));
-    this.showElement(document.getElementById('search-form'));
-  }
-
-  close() {
-    this.hideElement(document.getElementById('search-form'));
-    this.showElement(document.getElementById('search-button'));
-    this.hideElement(document.getElementById('search-status'));
+    this.search(form)
   }
 
   private searchDelay: any;
@@ -69,64 +156,120 @@ export class NeedListComponent {
     if (this.searchDelay) {
       clearTimeout(this.searchDelay);
     }
+    if (form) {
+      this.searchDelay = setTimeout(() => {
 
-    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);
+        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') {
+              this.searchResults = n.sort(this.currentSortAlgo);
+            } else {
+              this.searchResults = n.sort(this.currentSortAlgo).reverse();
+            }
+            this.updateVisibleNeeds();
+            });
+          }
+        }, 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;
+      }
   }
 
   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();
   }
 
   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);
   }
 
+  changeText(id : number, text : string) {
+    const span = document.getElementById('hover-status-label-' + id);
+    if (span) {
+      span.innerHTML = ' ' + text;
+    }
+  }
+
   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!")
+        this.toastService.sendToast(ToastType.ERROR, "This need is already in your basket!")
       }
-      
-
     }
-
   }
 
   back() {
-    this.searchResults = [];
+    this.searchResults = this.needs;
+  }
+
+  select(need : Need) {
+    //emit value
+    this.currentNeed.emit(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';
+      }
   }
 }
+function not(location: string) {
+  throw new Error('Function not implemented.');
+}
+
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..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
@@ -0,0 +1,73 @@
+:host {
+    display: flex;
+    justify-content: center;
+}
+
+#box {
+    display: flex;
+    flex-direction: column;
+    width: 800px;
+    justify-content: start;
+    gap: 10px;
+}
+
+.needName {
+    font-weight: bold;
+}
+
+.needType {
+    text-transform: uppercase;
+    /*font-size: 10pt;*/
+    margin-top: -20px;
+    /*margin-bottom: 20px;*/
+}
+
+.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;
+    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;*/
+/*}*/
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 e9c23bd..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
@@ -1,21 +1,45 @@
-<input type="button" value="Back" (click)="back()">
-<h1>Viewing Need: {{need?.name}}</h1>
-<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>
+    <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>
+
+    <span><strong>Target Goal:</strong> {{need.maxGoal}}</span>
 
-<hr>
+    <span><strong>Amount Currently Collected:</strong> {{need.current}}</span>
 
-<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
+    <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>
+            </li>
+        </ul>
+    </div>
+
+    <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>
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..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,31 +1,87 @@
 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',
-  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,
+        private authService: AuthService,
+        private usersService: UsersService,
+        private toastService: ToastsService,
+        private router: Router
+    ) {}
 
-  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();
+    }
+
+    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/app/components/signup/signup.component.css b/ufund-ui/src/app/components/signup/signup.component.css
new file mode 100644
index 0000000..429bc42
--- /dev/null
+++ b/ufund-ui/src/app/components/signup/signup.component.css
@@ -0,0 +1,73 @@
+:host {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    margin-top: -66px
+
+}
+
+#box {
+    display: flex;
+    flex-direction: column;
+    /*max-width: 300px;*/
+    gap: 10px;
+
+    & > div {
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+.border {
+    border-style: solid;
+    border-width: 1px;
+    padding: 10px;
+    margin: 10px;
+    position: absolute;
+    background-color: white;
+    box-shadow: 0 0 10px 10px black;
+}
+
+#bar {
+    height: 5px;
+    width: 100%;
+    appearance: none;
+    overflow: hidden;
+    /*margin-top: -5px;*/
+}
+
+#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;
+}
+
+#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
new file mode 100644
index 0000000..bc3aaf0
--- /dev/null
+++ b/ufund-ui/src/app/components/signup/signup.component.html
@@ -0,0 +1,31 @@
+<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>
+        <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 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 [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>
+    <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
new file mode 100644
index 0000000..a20d828
--- /dev/null
+++ b/ufund-ui/src/app/components/signup/signup.component.ts
@@ -0,0 +1,167 @@
+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}
+    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 passwordStatusText = new BehaviorSubject("")
+    protected passwordsMatch = new BehaviorSubject(false)
+    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,
+        protected router: Router,
+        protected toastService: ToastsService
+    ) {}
+
+    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.toastService.sendToast(ToastType.ERROR, "Unable to create account: " + friendlyHttpStatus[ex.status])
+            console.log(ex)
+        })
+    }
+
+    validate(username: string, passConfirm:string, password: string) {
+        this.passwordsMatch.next(false)
+        this.usernameStatusText.next("")
+        this.checkPasswordStrength(password);
+
+        if (username === "") {
+            this.usernameStatusText.next("Username field can't be blank")
+        }
+
+        if (passConfirm && password === passConfirm) {
+            this.passwordsMatch.next(true)
+        }
+        this.ableToCreateAccount.next(this.passwordStrongEnough.getValue() && password === passConfirm && !!username)
+    }
+
+    checkPasswordStrength(password: string) {
+        this.strength.next(0)
+        this.passwordRequirements = new PasswordRequirements()
+        this.passwordStrongEnough.next(false)
+
+        if (password.match(/[^!-~]/g)) {
+            this.passwordStatusText.next("Invalid characters")
+
+            return
+        }
+
+        if (password.length > 6) {
+            this.passwordRequirements.sixLong.value = true
+        }
+        if (password.length > 12) {
+            this.passwordRequirements.twelveLong.value = true
+        }
+        if (password.match(/[a-z]/g)) {
+            this.passwordRequirements.lowercase.value = true
+        }
+        if (password.match(/[A-Z]/g)) {
+            this.passwordRequirements.uppercase.value = true
+        }
+        if (password.match(/[0-9]/g)) {
+            this.passwordRequirements.number.value = true
+        }
+        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(true)
+            this.passwordStatusText.next("")
+        } else if (strength == 0) {
+            this.passwordStatusText.next("")
+        } else {
+            this.passwordStatusText.next("5/6 checks required")
+        }
+
+        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} = {
+    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',
+};
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;
+}