yadiparfum/parfum
yadiparfum/parfum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(register): enhance registration form with required field indicators and improved input placeholders

Browse Source
This commit is contained in:
Yoga Pangestu 2025-10-16 22:49:49 +07:00
parent 5b2f76162d
commit 402026ce09
1 changed files with 46 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
resources/views/livewire/auth/register.blade.php
View File

@ -30,7 +30,6 @@ class="size-7 flex justify-center items-center shrink-0 font-medium text-gray-80
<div
class="ml-3 md:ml-0 md:mt-2 text-left md:text-center transition-all duration-300 ease-in-out">
<flux:text class="text-gray-500">Step</flux:text>
<flux:text
class="transition-all duration-500 ease-in-out {{ $currentStep === $step['id'] ? 'text-emerald-600 font-semibold' : '' }}">
{{ $step['name'] }}
@ -43,44 +42,71 @@ class="transition-all duration-500 ease-in-out {{ $currentStep === $step['id'] ?
@if ($currentStep === 1)
<div class="flex flex-col gap-6">
<flux:field>
<flux:label>Email</flux:label>
<flux:label>Email <span class="text-red-500 ms-1">*</span></flux:label>
<flux:description>Pastikan email aktif karena akan digunakan untuk verifikasi.
</flux:description>
<flux:input placeholder="Masukkan email" wire:model.live.debounce.500ms="form.email" autofocus
<flux:input placeholder="info.pangestuyoga@gmail.com" wire:model.live="form.email" autofocus
autocomplete="off" />
<flux:error name="form.email" />
</flux:field>
<flux:input label="Nama Pengguna" placeholder="Masukkan nama pengguna"
wire:model.live.debounce.500ms="form.username" autocomplete="off" />
<flux:field>
<flux:label>Nama Pengguna <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input label="Kata Sandi" placeholder="Masukkan kata sandi" type="password"
wire:model.live.debounce.500ms="form.password" autocomplete="off" viewable />
<flux:input placeholder="pangestu" wire:model.live="form.username" autocomplete="off" />
<flux:error name="form.username" />
</flux:field>
<flux:field>
<flux:label>Kata Sandi <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input placeholder="********" type="password" wire:model.live="form.password"
autocomplete="off" viewable />
<flux:error name="form.password" />
</flux:field>
</div>
@endif
@if ($currentStep === 2)
<div class="flex flex-col gap-6">
<flux:input label="Nama" placeholder="Masukkan nama" wire:model.live.debounce.500ms="form.name"
autofocus autocomplete="off" />
<flux:field>
<flux:label>Nama <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input label="Nomor Telepon" placeholder="Masukkan nomor telepon" mask="9999 9999 99999"
wire:model.live.debounce.500ms="form.phone_number" autocomplete="off" />
<flux:input placeholder="John Doe" wire:model.live="form.name" autofocus autocomplete="off" />
<flux:radio.group wire:model.live="form.gender" variant="buttons" class="w-full *:flex-1"
label="Jenis Kelamin">
@foreach (\App\Enums\Gender::cases() as $gender)
<flux:radio value="{{ $gender->value }}">
{{ $gender->label() }}
</flux:radio>
@endforeach
</flux:radio.group>
<flux:error name="form.name" />
</flux:field>
<flux:field>
<flux:label>Nomor Telepon <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input placeholder="0821 xxxx xxxx" mask="9999 9999 99999"
wire:model.live="form.phone_number" autocomplete="off" />
<flux:error name="form.phone_number" />
</flux:field>
<flux:field>
<flux:label>Jenis Kelamin <span class="text-red-500 ms-1">*</span></flux:label>
<flux:radio.group wire:model.live="form.gender" variant="buttons" class="w-full *:flex-1">
@foreach (\App\Enums\Gender::cases() as $gender)
<flux:radio value="{{ $gender->value }}">
{{ $gender->label() }}
</flux:radio>
@endforeach
</flux:radio.group>
<flux:error name="form.gender" />
</flux:field>
<flux:input label="Kode Referral" placeholder="Masukkan kode referral"
wire:model.live.debounce.500ms="form.referral_code" autocomplete="off" />
wire:model.live="form.referral_code" autocomplete="off" />
</div>
@endif