Skip to content

Commit 0df7bf1

Browse files
aquarionaquarion
committed
Refactor SFTP account management UI: improve layout, add server info, and enhance form validation
1 parent 80f8e1a commit 0df7bf1

File tree

1 file changed

+108
-100
lines changed

1 file changed

+108
-100
lines changed

‎resources/views/pages/sftp/⚡password.blade.php‎

Lines changed: 108 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,14 @@
55
use Livewire\Attributes\Title;
66
use Livewire\Component;
77
8-
new #[Title('SFTP Access')] class extends Component {
8+
new #[Title('SFTP Access')] class extends Component
9+
{
910
public string $username = '';
11+
1012
public string $password = '';
13+
1114
public string $password_confirmation = '';
15+
1216
public string $public_key = '';
1317
1418
public function mount(): void
@@ -27,8 +31,8 @@ public function createAccount(): void
2731
}
2832
2933
$this->validate([
30-
'username' => ['required', 'string', 'max:32', 'alpha_dash', 'unique:sftp_users,username'],
31-
'password' => ['required', 'string', 'min:8', 'confirmed'],
34+
'username' => ['required', 'string', 'max:32', 'alpha_dash', 'unique:sftp_users,username'],
35+
'password' => ['required', 'string', 'min:8', 'confirmed'],
3236
'public_key' => ['nullable', 'string', new SshPublicKey],
3337
]);
3438
@@ -37,8 +41,8 @@ public function createAccount(): void
3741
abort_if($user->sftpUsers()->exists(), 422, 'SFTP account already exists.');
3842
3943
$user->sftpUsers()->create([
40-
'username' => $this->username,
41-
'password' => $this->password,
44+
'username' => $this->username,
45+
'password' => $this->password,
4246
'public_key' => $this->public_key ?: null,
4347
]);
4448
@@ -88,114 +92,118 @@ public function updatePublicKey(): void
8892

8993
<flux:heading size="xl">{{ __('SFTP Access') }}</flux:heading>
9094

95+
<flux:text>
96+
<p>{{ __('Manage your SFTP account credentials and SSH public key for secure file transfers.') }}</p>
97+
98+
<p>{{ __('Server Config:') }}</p>
99+
100+
<p>{{ __('Host:') }} <code class="font-mono">sftp.istic.systems</code><br>
101+
{{ __('Port:') }} <code class="font-mono">2222</code>
102+
</p>
103+
104+
</flux:text>
105+
91106
@php $sftpUser = Auth::user()->sftpUsers()->first(); @endphp
92107

93108
@if ($sftpUser)
94-
<flux:card class="space-y-6">
95-
<div>
96-
<flux:label>{{ __('Username') }}</flux:label>
97-
<flux:text class="mt-1 font-mono">{{ $sftpUser->username }}</flux:text>
109+
<flux:card class="space-y-6">
110+
<div>
111+
<flux:label>{{ __('Username') }}</flux:label>
112+
<flux:text class="mt-1 font-mono">{{ $sftpUser->username }}</flux:text>
113+
</div>
114+
115+
<form wire:submit="updatePassword" class="space-y-4">
116+
<flux:heading size="lg">{{ __('Change Password') }}</flux:heading>
117+
<flux:input
118+
wire:model="password"
119+
:label="__('New password')"
120+
type="password"
121+
required
122+
autocomplete="new-password" />
123+
<flux:input
124+
wire:model="password_confirmation"
125+
:label="__('Confirm password')"
126+
type="password"
127+
required
128+
autocomplete="new-password" />
129+
<div class="flex items-center gap-4">
130+
<flux:button variant="primary" type="submit">{{ __('Update Password') }}</flux:button>
131+
<x-action-message on="sftp-password-updated">{{ __('Saved.') }}</x-action-message>
98132
</div>
133+
</form>
99134

100-
<form wire:submit="updatePassword" class="space-y-4">
101-
<flux:heading size="lg">{{ __('Change Password') }}</flux:heading>
102-
<flux:input
103-
wire:model="password"
104-
:label="__('New password')"
105-
type="password"
106-
required
107-
autocomplete="new-password"
108-
/>
109-
<flux:input
110-
wire:model="password_confirmation"
111-
:label="__('Confirm password')"
112-
type="password"
113-
required
114-
autocomplete="new-password"
115-
/>
116-
<div class="flex items-center gap-4">
117-
<flux:button variant="primary" type="submit">{{ __('Update Password') }}</flux:button>
118-
<x-action-message on="sftp-password-updated">{{ __('Saved.') }}</x-action-message>
119-
</div>
120-
</form>
135+
<flux:separator />
136+
137+
<div class="space-y-4">
138+
<flux:heading size="lg">{{ __('SSH Public Key') }}</flux:heading>
121139

122-
<flux:separator />
123-
124-
<div class="space-y-4">
125-
<flux:heading size="lg">{{ __('SSH Public Key') }}</flux:heading>
126-
127-
@if ($sftpUser->public_key)
128-
<div class="space-y-1">
129-
<flux:label>{{ __('Current key') }}</flux:label>
130-
<flux:text class="font-mono text-sm">{{ $sftpUser->public_key_type }}</flux:text>
131-
<flux:text class="font-mono text-sm text-zinc-500">{{ $sftpUser->public_key_fingerprint }}</flux:text>
132-
</div>
133-
@endif
134-
135-
<form wire:submit="updatePublicKey" class="space-y-4">
136-
<flux:textarea
137-
wire:model="public_key"
138-
:label="$sftpUser->public_key ? __('Replace key') : __('Public key')"
139-
:placeholder="__('ssh-ed25519 AAAA...')"
140-
rows="3"
141-
class="font-mono text-sm"
142-
/>
143-
<flux:text size="sm" class="text-zinc-500">
144-
{{ __('Leave blank to remove key and use password authentication only.') }}
145-
</flux:text>
146-
<div class="flex items-center gap-4">
147-
<flux:button variant="primary" type="submit">{{ __('Update Key') }}</flux:button>
148-
<x-action-message on="sftp-key-updated">{{ __('Saved.') }}</x-action-message>
149-
</div>
150-
</form>
140+
@if ($sftpUser->public_key)
141+
<div class="space-y-1">
142+
<flux:label>{{ __('Current key') }}</flux:label>
143+
<flux:text class="font-mono text-sm">{{ $sftpUser->public_key_type }}</flux:text>
144+
<flux:text class="font-mono text-sm text-zinc-500">{{ $sftpUser->public_key_fingerprint }}</flux:text>
151145
</div>
152-
</flux:card>
153-
@else
154-
<flux:card>
155-
<form wire:submit="createAccount" class="space-y-4">
156-
<flux:heading size="lg">{{ __('Create SFTP Account') }}</flux:heading>
157-
<flux:text>{{ __('Choose a username and password for your SFTP account.') }}</flux:text>
158-
159-
<flux:input
160-
wire:model="username"
161-
:label="__('Username')"
162-
type="text"
163-
required
164-
autocomplete="username"
165-
/>
166-
<flux:input
167-
wire:model="password"
168-
:label="__('Password')"
169-
type="password"
170-
required
171-
autocomplete="new-password"
172-
/>
173-
<flux:input
174-
wire:model="password_confirmation"
175-
:label="__('Confirm password')"
176-
type="password"
177-
required
178-
autocomplete="new-password"
179-
/>
146+
@endif
147+
148+
<form wire:submit="updatePublicKey" class="space-y-4">
180149
<flux:textarea
181150
wire:model="public_key"
182-
:label="__('SSH public key (optional)')"
151+
:label="$sftpUser->public_key ? __('Replace key') : __('Public key')"
183152
:placeholder="__('ssh-ed25519 AAAA...')"
184153
rows="3"
185-
class="font-mono text-sm"
186-
/>
187-
154+
class="font-mono text-sm" />
155+
<flux:text size="sm" class="text-zinc-500">
156+
{{ __('Leave blank to remove key and use password authentication only.') }}
157+
</flux:text>
188158
<div class="flex items-center gap-4">
189-
<flux:button variant="primary" type="submit">
190-
{{ __('Create Account') }}
191-
</flux:button>
192-
193-
<x-action-message on="sftp-account-created">
194-
{{ __('Account created.') }}
195-
</x-action-message>
159+
<flux:button variant="primary" type="submit">{{ __('Update Key') }}</flux:button>
160+
<x-action-message on="sftp-key-updated">{{ __('Saved.') }}</x-action-message>
196161
</div>
197162
</form>
198-
</flux:card>
163+
</div>
164+
</flux:card>
165+
@else
166+
<flux:card>
167+
<form wire:submit="createAccount" class="space-y-4">
168+
<flux:heading size="lg">{{ __('Create SFTP Account') }}</flux:heading>
169+
<flux:text>{{ __('Choose a username and password for your SFTP account.') }}</flux:text>
170+
171+
<flux:input
172+
wire:model="username"
173+
:label="__('Username')"
174+
type="text"
175+
required
176+
autocomplete="username" />
177+
<flux:input
178+
wire:model="password"
179+
:label="__('Password')"
180+
type="password"
181+
required
182+
autocomplete="new-password" />
183+
<flux:input
184+
wire:model="password_confirmation"
185+
:label="__('Confirm password')"
186+
type="password"
187+
required
188+
autocomplete="new-password" />
189+
<flux:textarea
190+
wire:model="public_key"
191+
:label="__('SSH public key (optional)')"
192+
:placeholder="__('ssh-ed25519 AAAA...')"
193+
rows="3"
194+
class="font-mono text-sm" />
195+
196+
<div class="flex items-center gap-4">
197+
<flux:button variant="primary" type="submit">
198+
{{ __('Create Account') }}
199+
</flux:button>
200+
201+
<x-action-message on="sftp-account-created">
202+
{{ __('Account created.') }}
203+
</x-action-message>
204+
</div>
205+
</form>
206+
</flux:card>
199207
@endif
200208

201-
</div>
209+
</div>

0 commit comments

Comments
 (0)