Improved contributions component, using paypal

nise-frontend/src/app/app.component.html

@@ -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>

nise-frontend/src/app/contribute/contribute.component.css

@@ -9,13 +9,38 @@ img {
   max-height:100%;
 }
 
-.btn-patreon {
+.btn-paypal {
   padding: 5px;
-  border: 2px solid rgba(185, 82, 48, 0.94);
+  border: 2px solid #003087;
-  color: #ff683bf0;
+  color: #009cde;
+  background-color: black;
 }
 
-.btn-patreon:hover {
+.btn-paypal:hover {
-  background-color: #ff683bf0;
+  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;
+}

nise-frontend/src/app/contribute/contribute.component.html

@@ -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="font-weight: bold">server hosting (contabo - cloud vps 3)</td>
-        <td style="padding-left: 40px">~220$/year</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>

nise-frontend/src/app/contribute/contribute.component.ts

@@ -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 };
+  }
+
 }

nise-frontend/src/corelib/service/user.service.ts

@@ -1,12 +1,19 @@
-import {Injectable} from '@angular/core';
+import { Injectable } from '@angular/core';
-import {HttpClient} from "@angular/common/http";
+import { HttpClient } from '@angular/common/http';
-import {environment} from "../../environments/environment";
+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 };
+  }
+
 }