feature: login and my page

2026-07-02 15:42:47 +07:00
parent c993f848cb
commit 89790539b7
41 changed files with 1062 additions and 769 deletions
@@ -0,0 +1,56 @@
+@props([
+    'type' => 'text',
+    'name',
+    'id' => null,
+    'label' => '',
+    'required' => false,
+    'value' => '',
+    'autocomplete' => null,
+    'icon' => null,
+    'hasError' => false,
+])
+
+@php
+    $id = $id ?? $name;
+    $isPassword = $type === 'password';
+@endphp
+
+<div class="floating-group">
+    <input 
+        type="{{ $type }}" 
+        name="{{ $name }}" 
+        id="{{ $id }}" 
+        placeholder=" " 
+        @if($required) required @endif
+        value="{{ $value }}"
+        @if($autocomplete) autocomplete="{{ $autocomplete }}" @endif
+        {{ $attributes->merge(['class' => 'floating-input' . ($hasError ? ' border-red-500 focus:border-red-500 focus:ring-red-500/20' : '')]) }}
+        @if($hasError)
+            aria-invalid="true"
+            aria-describedby="login-errors"
+        @endif
+    />
+    <label for="{{ $id }}" class="floating-label{{ $hasError ? ' text-red-500' : '' }}">
+        {{ $label }}
+        @if($required)
+            <span class="text-red-500" aria-hidden="true">*</span>
+        @endif
+    </label>
+    @if($icon)
+        <span class="floating-icon{{ $hasError ? ' text-red-500' : '' }}">
+            <x-icon :name="$icon" class="w-5 h-5" />
+        </span>
+    @endif
+
+    @if($isPassword)
+        <button 
+            type="button" 
+            class="absolute right-3 top-1/2 -translate-y-1/2 text-text-muted hover:text-text-medium focus:text-primary focus:outline-none focus:ring-2 focus:ring-primary/20 rounded p-1 transition-colors duration-200 cursor-pointer"
+            onclick="togglePasswordVisibility('{{ $id }}', this)"
+            aria-label="Show password"
+        >
+            <x-icon name="eye" class="w-5 h-5 eye-icon-open" />
+            <x-icon name="eye-slash" class="w-5 h-5 eye-icon-closed hidden" />
+        </button>
+    @endif
+</div>