5f3fe0deee
Add visual feedback for async operations across UI components: - Profile list: Start, Delete, and Save buttons show spinners during actions - Profile create: Create Profile button shows spinner during submission - Nodes page: Initialize Node, Add Peer, Ping, and Remove buttons show spinners Buttons are disabled while their action is in progress to prevent duplicate submissions. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
99 lines
3 KiB
HTML
99 lines
3 KiB
HTML
<form class="flex flex-col gap-4" id="profile-create-form" (submit)="createProfile(); $event.preventDefault()">
|
|
<h5 class="text-lg font-semibold">Create New Profile</h5>
|
|
|
|
@if (error) {
|
|
<div class="card bg-danger-50 border-danger-500 p-3 text-danger-600 text-sm">
|
|
<p>{{ error }}</p>
|
|
</div>
|
|
}
|
|
@if (success) {
|
|
<div class="card bg-success-50 border-success-500 p-3 text-success-600 text-sm">
|
|
<p>{{ success }}</p>
|
|
</div>
|
|
}
|
|
|
|
<div class="flex flex-col gap-1">
|
|
<label class="text-sm font-medium text-slate-300">Profile Name</label>
|
|
<input
|
|
type="text"
|
|
class="input"
|
|
name="name"
|
|
required
|
|
[value]="model.name"
|
|
(input)="onNameInput($event)">
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-1">
|
|
<label class="text-sm font-medium text-slate-300">Miner Type</label>
|
|
<select
|
|
class="select"
|
|
name="minerType"
|
|
required
|
|
[value]="model.minerType"
|
|
(change)="onMinerTypeChange($event)">
|
|
<option value="" disabled selected>Select Miner</option>
|
|
@for(miner of state().manageableMiners; track miner.name) {
|
|
<option [value]="miner.name">{{ miner.name }}</option>
|
|
}
|
|
</select>
|
|
</div>
|
|
|
|
<fieldset class="card p-4">
|
|
<legend class="px-2 font-semibold text-slate-300">Configuration</legend>
|
|
|
|
<div class="flex flex-col gap-4 mt-3">
|
|
<div class="flex flex-col gap-1">
|
|
<label class="text-sm font-medium text-slate-300">Pool Address</label>
|
|
<input
|
|
type="text"
|
|
class="input"
|
|
name="pool"
|
|
required
|
|
[value]="model.config.pool"
|
|
(input)="onPoolInput($event)">
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-1">
|
|
<label class="text-sm font-medium text-slate-300">Wallet Address</label>
|
|
<input
|
|
type="text"
|
|
class="input"
|
|
name="wallet"
|
|
required
|
|
[value]="model.config.wallet"
|
|
(input)="onWalletInput($event)">
|
|
</div>
|
|
|
|
<div class="flex gap-6 items-center">
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
class="w-4 h-4 rounded border-surface-50 text-accent-500 focus:ring-accent-500"
|
|
name="tls"
|
|
[checked]="model.config.tls"
|
|
(change)="onTlsChange($event)">
|
|
<span class="text-sm">TLS</span>
|
|
</label>
|
|
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
class="w-4 h-4 rounded border-surface-50 text-accent-500 focus:ring-accent-500"
|
|
name="hugePages"
|
|
[checked]="model.config.hugePages"
|
|
(change)="onHugePagesChange($event)">
|
|
<span class="text-sm">Huge Pages</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<button type="submit" class="btn btn-primary" [disabled]="isCreating()">
|
|
@if (isCreating()) {
|
|
<div class="animate-spin w-4 h-4 border-2 border-white border-t-transparent rounded-full mr-1"></div>
|
|
Creating...
|
|
} @else {
|
|
Create Profile
|
|
}
|
|
</button>
|
|
</form>
|