Improved contributions component, using paypal
This commit is contained in:
nise.moe
parent
19e48b1e79
commit
9af980b63e
@ -11,7 +11,7 @@
|
||||
<li><a [routerLink]="['/sus']">./suspicious-scores</a></li>
|
||||
<li><a [routerLink]="['/stolen']">./stolen-replays</a></li>
|
||||
<li><a [routerLink]="['/search']">./advanced-search</a></li>
|
||||
<li><a class="link-pink" [routerLink]="['/contribute']">./contribute <3</a></li>
|
||||
<li *ngIf="this.userService.ephemeralUserInfo.showContributions"><a class="link-pink" [routerLink]="['/contribute']">./contribute <3</a></li>
|
||||
</ul>
|
||||
<form (ngSubmit)="onSubmit()">
|
||||
<input style="width: 100%" type="text" [(ngModel)]="term" [ngModelOptions]="{standalone: true}" id="nise-osu-username" required minlength="2" maxlength="50" placeholder="Search for users...">
|
||||
@ -35,5 +35,5 @@
|
||||
|
||||
<router-outlet></router-outlet>
|
||||
<div class="text-center version">
|
||||
v20240309
|
||||
v20240508
|
||||
</div>
|
||||
|
||||
@ -9,13 +9,38 @@ img {
|
||||
max-height:100%;
|
||||
}
|
||||
|
||||
.btn-patreon {
|
||||
.btn-paypal {
|
||||
padding: 5px;
|
||||
border: 2px solid rgba(185, 82, 48, 0.94);
|
||||
color: #ff683bf0;
|
||||
border: 2px solid #003087;
|
||||
color: #009cde;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.btn-patreon:hover {
|
||||
background-color: #ff683bf0;
|
||||
.btn-paypal:hover {
|
||||
background-color: #009cde;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
.hide-contributions-button {
|
||||
background-color: #0c090a;
|
||||
font-family: monospace, monospace;
|
||||
border: 2px dotted #d2d6de;
|
||||
display: block;
|
||||
margin-bottom: 12px;
|
||||
padding: 10px;
|
||||
color: #d2d6de;
|
||||
}
|
||||
|
||||
.hide-contributions-button:hover {
|
||||
background-color: #211f1f;
|
||||
}
|
||||
|
||||
.hide-contributions-button.disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
<div class="main term btn pointer text-center hide-contributions-button" (click)="hideLink()" [class.disabled]="!userService.ephemeralUserInfo.showContributions">
|
||||
i'm not interested (or have already contributed) - hide the link for now.
|
||||
</div>
|
||||
|
||||
<div class="main term" style="width: 100%">
|
||||
|
||||
<div style="overflow: hidden;">
|
||||
@ -7,23 +11,27 @@
|
||||
<p>the website does not run ads, paywall features, or collect your private data in any way. i have no intention to change that since I want to provide the best possible service to the osu! community.</p>
|
||||
<p>still, hosting a (relatively) computationally expensive service has costs that are simply unavoidable. that's why I'd encourage people that find this website useful to contribute:</p>
|
||||
<div class="text-center mt-2 mb-2">
|
||||
<a href="https://patreon.com/nise_moe" target="_blank" class="btn btn-patreon">Become a Patreon</a>
|
||||
<a href="https://www.paypal.com/donate/?hosted_button_id=TCNCD8RF774JW" target="_blank" class="btn btn-paypal">contribute via personal Paypal</a>
|
||||
</div>
|
||||
<p>the money will be used to pay for the server hosting and development costs.</p>
|
||||
<p>the money will be uniquely used to pay for the server hosting and development costs.</p>
|
||||
<table style="display: block;">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="font-weight: bold">server hosting</td>
|
||||
<td style="padding-left: 40px">~220$/year</td>
|
||||
<td style="font-weight: bold">server hosting (contabo - cloud vps 3)</td>
|
||||
<td style="padding-left: 40px">~222$/year</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight: bold">domain</td>
|
||||
<td style="font-weight: bold">domain (namecheap - .moe renewal)</td>
|
||||
<td style="padding-left: 40px">~17$/year</td>
|
||||
</tr>
|
||||
<hr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<hr style="width: 100%" >
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight: bold">total</td>
|
||||
<td style="padding-left: 40px">~237$/year</td>
|
||||
<td style="padding-left: 40px">~239$/year</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { Component } from '@angular/core';
|
||||
import {Component} from '@angular/core';
|
||||
import {CuteLoadingComponent} from "../../corelib/components/cute-loading/cute-loading.component";
|
||||
import {DecimalPipe, NgForOf, NgIf} from "@angular/common";
|
||||
import {UserService} from "../../corelib/service/user.service";
|
||||
|
||||
@Component({
|
||||
selector: 'app-contribute',
|
||||
@ -16,4 +17,10 @@ import {DecimalPipe, NgForOf, NgIf} from "@angular/common";
|
||||
})
|
||||
export class ContributeComponent {
|
||||
|
||||
constructor(public userService: UserService) { }
|
||||
|
||||
hideLink(): void {
|
||||
this.userService.ephemeralUserInfo = { ...this.userService.ephemeralUserInfo, showContributions: false };
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,12 +1,19 @@
|
||||
import {Injectable} from '@angular/core';
|
||||
import {HttpClient} from "@angular/common/http";
|
||||
import {environment} from "../../environments/environment";
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { environment } from '../../environments/environment';
|
||||
|
||||
interface UserInfo {
|
||||
userId: number;
|
||||
username: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* This stuff gets saved to localStorage ONLY.
|
||||
*/
|
||||
interface EphemeralUserInfo {
|
||||
showContributions: boolean;
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
@ -14,14 +21,28 @@ export class UserService {
|
||||
|
||||
currentUser: UserInfo | null = null;
|
||||
|
||||
private _ephemeralUserInfo: EphemeralUserInfo = {
|
||||
showContributions: true
|
||||
};
|
||||
|
||||
loginCallback: () => void = () => {};
|
||||
|
||||
constructor(private httpClient: HttpClient) {
|
||||
this.currentUser = this.loadCurrentUserFromLocalStorage();
|
||||
this._ephemeralUserInfo = this.loadEphemeralUserInfoFromLocalStorage();
|
||||
this.updateUser()
|
||||
.catch(reason => console.debug(reason));
|
||||
}
|
||||
|
||||
get ephemeralUserInfo(): EphemeralUserInfo {
|
||||
return this._ephemeralUserInfo;
|
||||
}
|
||||
|
||||
set ephemeralUserInfo(value: EphemeralUserInfo) {
|
||||
this._ephemeralUserInfo = value;
|
||||
this.saveEphemeralUserInfoToLocalStorage(value);
|
||||
}
|
||||
|
||||
isUserLoggedIn(): boolean {
|
||||
return this.currentUser !== null;
|
||||
}
|
||||
@ -48,11 +69,11 @@ export class UserService {
|
||||
}
|
||||
|
||||
public getLoginUrl(): string {
|
||||
return `${environment.apiUrl}/oauth2/authorization/osu`
|
||||
return `${environment.apiUrl}/oauth2/authorization/osu`;
|
||||
}
|
||||
|
||||
public getLogoutUrl(): string {
|
||||
return `${environment.apiUrl}/logout`
|
||||
return `${environment.apiUrl}/logout`;
|
||||
}
|
||||
|
||||
saveCurrentUserToLocalStorage(user: UserInfo) {
|
||||
@ -69,4 +90,13 @@ export class UserService {
|
||||
document.cookie = 'SESSION=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
|
||||
}
|
||||
|
||||
saveEphemeralUserInfoToLocalStorage(info: EphemeralUserInfo) {
|
||||
localStorage.setItem('ephemeralUserInfo', JSON.stringify(info));
|
||||
}
|
||||
|
||||
loadEphemeralUserInfoFromLocalStorage(): EphemeralUserInfo {
|
||||
const savedInfo = localStorage.getItem('ephemeralUserInfo');
|
||||
return savedInfo ? JSON.parse(savedInfo) : { showContributions: true };
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user