diff options
Diffstat (limited to 'ufund-ui')
40 files changed, 807 insertions, 230 deletions
diff --git a/ufund-ui/public/delete.png b/ufund-ui/public/delete.png Binary files differdeleted file mode 100644 index 6403705..0000000 --- a/ufund-ui/public/delete.png +++ /dev/null diff --git a/ufund-ui/public/edit.png b/ufund-ui/public/edit.png Binary files differdeleted file mode 100644 index 3b6e2d8..0000000 --- a/ufund-ui/public/edit.png +++ /dev/null diff --git a/ufund-ui/public/jf.png b/ufund-ui/public/jf.png Binary files differnew file mode 100644 index 0000000..bbf95d5 --- /dev/null +++ b/ufund-ui/public/jf.png diff --git a/ufund-ui/public/search.png b/ufund-ui/public/search.png Binary files differdeleted file mode 100644 index 1940ef5..0000000 --- a/ufund-ui/public/search.png +++ /dev/null diff --git a/ufund-ui/src/app/app-routing.module.ts b/ufund-ui/src/app/app-routing.module.ts index a6ea806..89b6f67 100644 --- a/ufund-ui/src/app/app-routing.module.ts +++ b/ufund-ui/src/app/app-routing.module.ts @@ -9,13 +9,13 @@ import {NeedPageComponent} from './components/need-page/need-page.component'; import {SignupComponent} from './components/signup/signup.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: 'signup', component: SignupComponent}, + { 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" }, + { path: 'signup', component: SignupComponent, title: "Signup | JS" }, ]; @NgModule({ diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css index e69de29..0bcd658 100644 --- a/ufund-ui/src/app/app.component.css +++ b/ufund-ui/src/app/app.component.css @@ -0,0 +1,66 @@ +:host { + display: flex; + flex-direction: column; + height: 100%; +} + +#header { + display: flex; + flex-direction: row; + justify-content: space-between; + /*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: 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 { + 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); + } + + +} diff --git a/ufund-ui/src/app/app.component.html b/ufund-ui/src/app/app.component.html index a490237..959eada 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"> + <div> + <a routerLink="/"> + <h1>Jelly Solutions</h1> + </a> + </div> + <div> + <a routerLink="/dashboard">Dashboard</a> + <a routerLink="/cupboard">Cupboard</a> + <a routerLink="/basket">Basket</a> +<!-- <span>{{currentUser$ | async}}</span>--> + <button *ngIf="currentUser | async" (click)="logout()"> Log Out</button> + <button *ngIf="!(currentUser | async)" (click)="login()"> Log In</button> + </div> +</div> <router-outlet /> diff --git a/ufund-ui/src/app/app.component.ts b/ufund-ui/src/app/app.component.ts index 86717c4..2f98334 100644 --- a/ufund-ui/src/app/app.component.ts +++ b/ufund-ui/src/app/app.component.ts @@ -1,7 +1,10 @@ -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 {ToastsService} from './services/toasts.service'; +import {User} from './models/User'; +import {ActivatedRoute, Router} from '@angular/router'; @Component({ selector: 'app-root', @@ -11,10 +14,14 @@ import {AuthService} from './services/auth.service'; }) export class AppComponent implements OnInit { // title = 'ufund-ui'; - currentUser$: BehaviorSubject<string> = new BehaviorSubject<string>("Logged out."); + currentUser?: BehaviorSubject<User | null>; constructor( private authService: AuthService, + private router: Router, + private route: ActivatedRoute, + protected toastService: ToastsService, + private viewContainerRef: ViewContainerRef, @Inject(DOCUMENT) private document: Document ) {} @@ -23,12 +30,22 @@ export class AppComponent implements OnInit { } ngOnInit() { - this.authService.getCurrentUserSubject().subscribe(r => { - this.currentUser$?.next(r - ? "Logged in as " + r.username - : "Logged out." - ) - }) + this.toastService.setRootViewContainerRef(this.viewContainerRef) + 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) + } } + login() { + this.router.navigate(['/login'], {queryParams: {redir: this.router.url}}); + } + + logout() { + localStorage.removeItem("credential") + location.reload() + } } diff --git a/ufund-ui/src/app/app.module.ts b/ufund-ui/src/app/app.module.ts index 156ef5f..c91256e 100644 --- a/ufund-ui/src/app/app.module.ts +++ b/ufund-ui/src/app/app.module.ts @@ -14,7 +14,9 @@ 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'; import { SignupComponent } from './components/signup/signup.component'; +import { ToastComponent } from './components/toast/toast.component'; @NgModule({ declarations: [ @@ -27,6 +29,8 @@ import { SignupComponent } from './components/signup/signup.component'; DashboardComponent, LoginComponent, SignupComponent, + MiniNeedListComponent, + ToastComponent, ], imports: [ BrowserModule, diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.css b/ufund-ui/src/app/components/cupboard/cupboard.component.css index 6e70951..faff4d4 100644 --- a/ufund-ui/src/app/components/cupboard/cupboard.component.css +++ b/ufund-ui/src/app/components/cupboard/cupboard.component.css @@ -1,20 +1,19 @@ :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; - + margin: 10px; - + } .tab, .selected-tab { @@ -34,10 +33,10 @@ background-color: #d9d9d9; padding: 10px 20px 20px 20px; border: 2px solid #000; - border-radius: 5px; + border-radius: 5px; visibility: visible; } #create-button { padding: 10px 20px; -}
\ No newline at end of file +} diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html index bc5ac1c..855bd7e 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> @@ -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> @@ -24,8 +26,10 @@ <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> <span *ngIf="statusText">{{statusText | async}}</span> @@ -35,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> @@ -45,8 +50,10 @@ <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> <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 88ab46c..fff8760 100644 --- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts +++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts @@ -2,9 +2,10 @@ 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 { @@ -85,23 +86,25 @@ 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, 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) .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(ex.error); + this.toastService.sendToast(ToastType.INFO, ex.error); } else { - this.statusText.next("Error on creating need"); + this.toastService.sendToast(ToastType.INFO, "Error on creating need"); } return of() })) @@ -121,24 +124,26 @@ 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, 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, _) => { 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(ex.error); + this.toastService.sendToast(ToastType.INFO, ex.error); } 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/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..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..645893f 100644 --- a/ufund-ui/src/app/components/dashboard/dashboard.component.ts +++ b/ufund-ui/src/app/components/dashboard/dashboard.component.ts @@ -1,6 +1,9 @@ -import {Component} from '@angular/core'; -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'; @Component({ selector: 'app-dashboard', @@ -8,14 +11,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(!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.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..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,9 +44,20 @@ 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)) + // 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; @@ -54,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>(); })) 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..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 @@ -0,0 +1,37 @@ +:host { + height: 100%; + display: flex; + flex-direction: column; + 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 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/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 a6441f4..e1c3e2a 100644 --- a/ufund-ui/src/app/components/login/login.component.html +++ b/ufund-ui/src/app/components/login/login.component.html @@ -1,7 +1,10 @@ -<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" routerLink="/signup">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> + <span *ngIf="statusText">{{statusText | async}}</span> +</div> diff --git a/ufund-ui/src/app/components/login/login.component.ts b/ufund-ui/src/app/components/login/login.component.ts index f6a2996..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() { @@ -35,8 +35,10 @@ 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]) + this.toastService.sendToast(ToastType.ERROR, "Unable to login: " + friendlyHttpStatus[ex.status]) console.log(ex) }) } @@ -48,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-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css index 345326f..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,82 +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; } -ul { - list-style-type: none; - padding-inline-start: 0px; +#needList { + display: flex; + flex-direction: column; + gap: 10px } -li { - background-color: var(--list-background-color); +select { + font-size: 14pt; + padding: 5px; +} + +#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; + + .left { + display: flex; + flex-direction: column; + } -.icon { - width: 18px; - margin: 3px -3px -1px -3px; + .right { + display: flex; + flex-direction: column; + align-items: end; + } } -#search-container { - background-color: #d9d9d9; - border: 2px solid #000; +.urgent { + font-size: 11pt; + background-color: rgba(255, 165, 0, 0.27); + color: rgba(255, 165, 0, 1); + padding: 2px; border-radius: 5px; - .wide-input { - width: 60%; - } - }
\ No newline at end of file +} + +.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 866e5e4..c325320 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,22 +1,21 @@ -<h1>Needs List</h1> -<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> @@ -25,27 +24,40 @@ <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> + + <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).toFixed(0)}}%)</span> + <progress [value]="need.current" [max]="need.maxGoal"></progress> + </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="description"> + {{need.description}} + </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>
\ No newline at end of file + </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/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 004f9eb..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="/dashboard">Back to dashboard</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>
\ No newline at end of file + <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/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..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} @@ -22,7 +23,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) @@ -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,13 +47,13 @@ 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) }) } validate(username: string, passConfirm:string, password: string) { - this.confirmPassStatusText.next("") + this.passwordsMatch.next(false) this.usernameStatusText.next("") this.checkPasswordStrength(password); @@ -59,8 +61,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 +108,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) 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/models/Need.ts b/ufund-ui/src/app/models/Need.ts index 1451cad..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; @@ -7,6 +8,7 @@ export interface Need { maxGoal: number; current: number; urgent: boolean; + description: string; } export enum GoalType { 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; } 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..4fd024e --- /dev/null +++ b/ufund-ui/src/app/services/toasts.service.ts @@ -0,0 +1,27 @@ +import {Injectable, ViewContainerRef} from '@angular/core'; +import {ToastComponent} from '../components/toast/toast.component'; + +export enum ToastType { + INFO, + WARNING, + ERROR +} + +@Injectable({ + providedIn: 'root' +}) +export class ToastsService { + + 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 + } +} diff --git a/ufund-ui/src/index.html b/ufund-ui/src/index.html index 0517d5e..b6ae1a2 100644 --- a/ufund-ui/src/index.html +++ b/ufund-ui/src/index.html @@ -1,13 +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 90d4ee0..b152e61 100644 --- a/ufund-ui/src/styles.css +++ b/ufund-ui/src/styles.css @@ -1 +1,63 @@ /* You can add global styles to this file, and also import other style files */ + +:root { + color-scheme: light dark; +} + +* { + box-sizing: border-box; +} + +html, body { + margin: 0; + height: 100%; + background-color: light-dark(white, #000715); +} + +body { + font-family: Inter, sans-serif; + font-optical-sizing: auto; +} + +input { + font-size: 14pt; + padding: 5px; + border-radius: 5px; + border-style: solid; + border-width: 1px; + background-color: light-dark(#ebebeb, #3a3a3a); + + &:hover { + background-color: light-dark(#e1e1e1, #444444); + } +} + +button, input[type=button], input[type=reset], input[type=submit], .button { + font-size: 14pt; + padding: 6px 16px; + border-radius: 9999px; + border-style: none; + background-color: light-dark(#ebebeb, #3a3a3a); + + &:hover { + 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; +} + +.icon { + font-family: 'Material Symbols Outlined' +} + +h1 { + font-size: 40px; +} |
