mempool/frontend/src/app/components/faucet/faucet.component.html

103 lines
5.1 KiB
HTML
Raw Normal View History

2024-05-16 07:35:55 +00:00
<div class="container-xl">
<div class="title-block justify-content-center">
<h1 i18n="testnet4.faucet">Testnet4 Faucet</h1>
</div>
<div class="faucet-container text-center">
2024-05-17 20:45:39 +02:00
@if (txid) {
<div class="alert alert-success w-100 text-truncate">
<fa-icon [icon]="['fas', 'circle-check']"></fa-icon>
Sent!
<a class="text-primary" [href]="'/testnet4/tx/' + txid">{{ txid }}</a>
2024-05-17 20:45:39 +02:00
</div>
}
2024-05-21 00:56:24 +00:00
@if (loading) {
<p>Loading faucet...</p>
2024-05-16 07:35:55 +00:00
<div class="spinner-border text-light"></div>
} @else if (!user) {
<!-- User not logged in -->
<div class="alert alert-mempool d-block text-center w-100">
2025-01-25 15:46:21 +09:00
<div class="d-inline align-middle pr-2">
<span>To use the faucet, please</span>
</div>
2025-01-25 15:46:21 +09:00
<app-github-login customClass="btn btn-sm" width="150px" redirectTo="/testnet4/faucet" buttonString="Sign up with"></app-github-login>
</div>
}
@else if (user && user.status === 'pending' && !user.email && user.snsId) {
<div class="alert alert-danger w-100 col d-flex justify-content-center text-left">
<span class="d-flex">
<fa-icon [icon]="['fas', 'exclamation-triangle']" [fixedWidth]="true" class="mr-1"></fa-icon>
<span>Please <a class="text-primary" [routerLink]="['/services/account/settings']">verify your account</a> by providing a valid email address. To mitigate spam, we delete unverified accounts at regular intervals.</span>
</span>
</div>
}
@else if (error === 'not_available') {
<!-- User logged in but not a paid user or did not link its Github account -->
<div class="alert alert-mempool d-block text-center w-100">
<div class="d-inline align-middle">
2024-05-21 00:56:24 +00:00
<span class="mb-2 mr-2">To use the faucet, please</span>
</div>
2025-01-25 15:46:21 +09:00
<app-github-login customClass="btn btn-sm" width="180px" redirectTo="/testnet4/faucet" buttonString="Link your"></app-github-login>
</div>
}
@else if (error === 'account_limited') {
<div class="alert alert-mempool d-block text-center w-100">
<div class="d-inline align-middle">
<span class="mb-2 mr-2">Your account does not allow you to access the faucet</span>
</div>
</div>
}
@else if (error) {
<!-- User can request -->
<app-mempool-error class="w-100" [error]="error"></app-mempool-error>
}
@if (!loading) {
2024-05-21 00:56:24 +00:00
<form [formGroup]="faucetForm" class="formGroup" (submit)="requestCoins()">
2024-05-16 07:35:55 +00:00
<div class="row">
<div class="col">
<div class="form-group mb-0">
<div class="input-group input-group-lg">
2024-05-16 07:35:55 +00:00
<div class="input-group-prepend">
<span class="input-group-text" i18n="amount-sats">Amount (sats)</span>
</div>
<input type="number" class="form-control" [class]="{invalid: invalidAmount}" formControlName="satoshis" id="satoshis">
2024-05-16 07:35:55 +00:00
<div class="button-group">
2024-05-16 21:10:15 +00:00
<button type="button" class="btn btn-secondary" (click)="setAmount(5000)">5k</button>
2024-05-16 07:35:55 +00:00
<button type="button" class="btn btn-secondary ml-2" (click)="setAmount(50000)">50k</button>
<button type="button" class="btn btn-secondary ml-2" (click)="setAmount(500000)">500k</button>
</div>
</div>
<div class="text-danger text-left" *ngIf="invalidAmount">
<div *ngIf="amount?.errors?.['required']">Amount is required</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>
2024-05-16 07:35:55 +00:00
</div>
<div class="input-group input-group-lg mt-2">
2024-05-16 07:35:55 +00:00
<div class="input-group-prepend">
<span class="input-group-text" i18n="address">Address</span>
</div>
<input type="text" class="form-control" [class]="{invalid: invalidAddress}" formControlName="address" id="address" placeholder="tb1q...">
2024-05-21 00:56:24 +00:00
<button type="submit" class="btn btn-primary submit-button" [disabled]="!faucetForm.valid || !faucetForm.get('address')?.dirty || isDisabled()" i18n="testnet4.request-coins">Request Testnet4 Coins</button>
2024-05-16 07:35:55 +00:00
</div>
<div class="text-danger text-left" *ngIf="invalidAddress">
<div *ngIf="address?.errors?.['required']">Address is required</div>
<div *ngIf="address?.errors?.['pattern']">Must be a valid testnet4 address</div>
<div *ngIf="address?.errors?.['forbiddenAddress']">You cannot use this address</div>
2024-05-16 07:35:55 +00:00
</div>
</div>
</div>
</div>
</form>
}
<!-- Send back coins -->
@if (status?.address) {
2024-05-21 00:56:24 +00:00
<div class="mt-4 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>
}
2024-05-16 07:35:55 +00:00
</div>
</div>