machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[faucet] polish code and UX - Move Twitter login component into FOSS

Browse Source
This commit is contained in:
nymkappa
2024-05-17 20:32:43 +02:00
parent 0279fe69d4
commit 6b16b2d651
8 changed files with 158 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
frontend/src/app/components/faucet/faucet.component.html
View File

@@ -4,43 +4,45 @@
<h1 i18n="testnet4.faucet">Testnet4 Faucet</h1>
</div>
@if (error) {
<div class="alert alert-danger">
@switch (error) {
@case ('faucet_too_soon') {
Too many requests! Try again later.
}
@case ('faucet_maximum_reached') {
You have exceeded your testnet4 allowance. Try again later.
}
@case ('faucet_not_available') {
The faucet is not available right now. Try again later.
}
@default {
Sorry, something went wrong! Try again later.
}
}
</div>
}
<div class="faucet-container text-center">
@if (txid) {
<div class="alert alert-mempool d-block text-center">
<a [routerLink]="['/tx/' | relativeUrl, txid]">{{ txid }}</a>
</div>
} @else if (loading) {
<p>Waiting for faucet...</p>
@if (loading) {
<p>Loading faucet...</p>
<div class="spinner-border text-light"></div>
} @else {
<form [formGroup]="faucetForm" class="formGroup" (submit)="requestCoins()">
} @else if (!user) {
<!-- User not logged in -->
<div class="alert alert-mempool d-block text-center pb-2 w-100">
<span class="mb-2">To limit abuse,&nbsp;</span>
<a routerLink="/login" [queryParams]="{'redirectTo': '/testnet4/faucet'}">authenticate&nbsp;</a>
<span class="mr-2">or</span>
<app-twitter-login customClass="btn" width="220px" redirectTo="/testnet4/faucet" buttonString="Sign up with Twitter"></app-twitter-login>
</div>
}
@else if (error === 'not_available') {
<!-- User logged in but not a paid user or did not link its Twitter account -->
<div class="alert alert-mempool d-block text-center pb-2 w-100">
<span class="mb-2">To limit abuse,&nbsp;</span>
<a routerLink="/sponsor" [queryParams]="{'redirectTo': '/testnet4/faucet'}">become a sponsor&nbsp;</a>
<span class="mr-2">or</span>
<app-twitter-login customClass="btn" width="220px" redirectTo="/testnet4/faucet" buttonString="Link your Twitter"></app-twitter-login>
</div>
}
@else if (error) {
<!-- User can request -->
<app-mempool-error class="w-100" [error]="error"></app-mempool-error>
}
@if (!loading) {
<form [formGroup]="faucetForm" class="formGroup" (submit)="requestCoins()" [style]="(error || !this.user) ? 'opacity: 0.3' : ''">
<div class="row">
<div class="col">
<div class="form-group">
<div class="input-group input-group-lg mb-2">
<div class="form-group mb-0">
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text" i18n="amount-sats">Amount (sats)</span>
</div>
<input type="number" class="form-control" formControlName="satoshis" id="satoshis">
<input type="number" class="form-control" [class]="{invalid: invalidAmount}" formControlName="satoshis" id="satoshis">
<div class="button-group">
<button type="button" class="btn btn-secondary" (click)="setAmount(5000)">5k</button>
<button type="button" class="btn btn-secondary ml-2" (click)="setAmount(50000)">50k</button>
@@ -49,43 +51,31 @@
</div>
<div class="text-danger text-left" *ngIf="invalidAmount">
<div *ngIf="amount?.errors?.['required']">Amount is required</div>
<div *ngIf="status?.user_requests && amount?.errors?.['min']">Minimum is {{ amount?.errors?.['min'].min }}</div>
<div *ngIf="status?.user_requests && amount?.errors?.['max']">Maximum is {{ amount?.errors?.['max'].max }}</div>
<div *ngIf="amount?.errors?.['min']">Minimum is {{ amount?.errors?.['min'].min | number }} tSats</div>
<div *ngIf="amount?.errors?.['max']">Maximum is {{ amount?.errors?.['max'].max | number }} tSats</div>
</div>
<div class="input-group input-group-lg mb-2">
<div class="input-group input-group-lg mt-2">
<div class="input-group-prepend">
<span class="input-group-text" i18n="address">Address</span>
</div>
<input type="address" class="form-control" formControlName="address" id="address" placeholder="tb1q...">
<button type="submit" class="btn btn-primary submit-button" [disabled]="!status?.access || !faucetForm.valid || !faucetForm.get('address')?.dirty" i18n="testnet4.request-coins">Request Testnet4 Coins</button>
<input type="text" class="form-control" [class]="{invalid: invalidAddress}" formControlName="address" id="address" placeholder="tb1q...">
<button type="submit" class="btn btn-primary submit-button" [disabled]="!faucetForm.valid || !faucetForm.get('address')?.dirty" i18n="testnet4.request-coins">Request Testnet4 Coins</button>
</div>
<div class="text-danger text-left" *ngIf="invalidAddress">
@if (address?.errors?.['required']) {
<div>Address is required</div>
} @else {
<div>Must be a valid testnet4 address</div>
}
</div>
<div class="text-danger text-left" *ngIf="status && !status.user_requests">
<div>Too many requests! Try again later.</div>
<div *ngIf="address?.errors?.['required']">Address is required</div>
<div *ngIf="address?.errors?.['pattern']">Must be a valid testnet4 address</div>
</div>
</div>
</div>
</div>
</form>
@if (!user) {
<div class="alert alert-mempool d-block">
To limit abuse, please <a routerLink="/login" [queryParams]="{'redirectTo': '/testnet4/faucet'}">log in</a> or <a routerLink="/signup" [queryParams]="{'redirectTo': '/testnet4/faucet'}">sign up</a> and link your Twitter account to use the faucet.
</div>
} @else if (!status?.access) {
<div class="alert alert-mempool d-block">
To use this feature, please <a routerLink="/services/account/settings">link your Twitter account</a>.
</div>
}
}
<br>
<div *ngIf="status?.address">
If you no longer need your testnet4 coins, please consider sending them back to <a [routerLink]="['/address/' | relativeUrl, status.address]">{{ status.address }}</a> to replenish the faucet.
</div>
<!-- Send back coins -->
@if (status?.address) {
<div class="mt-2 alert alert-info w-100">If you no longer need your testnet4 coins, please consider <a class="text-primary" [routerLink]="['/address/' | relativeUrl, status.address]"><u>sending them back</u></a> to replenish the faucet.</div>
}
</div>
</div>
</div>