terrylee/star-cloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FEAT] 登入頁面新增防止重複提交與載入動畫效果

Browse Source 
1. 於 `resources/views/auth/login.blade.php` 登入表單引入 Alpine.js 狀態管理，新增 `isSubmitting` 控制。
2. 登入按鈕於提交時自動處於 disabled 狀態，避免使用者重複點擊。
3. 於登入按鈕內新增 Spinner 載入動畫與「登入中」文字狀態提示，提升使用者互動體驗。
This commit is contained in:
sky121113 2026-06-05 11:56:22 +08:00
parent 0964981097
commit 9a59186cd4
1 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
resources/views/auth/login.blade.php
View File

@ -114,7 +114,11 @@
</div> </div>
@endif @endif
<form method="POST" action="{{ (isset($isPreview) && $isPreview) ? '#' : (isset($company) ? route('tenant.login.post', $company->code) : route('login')) }}" onsubmit="if ({{ (isset($isPreview) && $isPreview) ? 'true' : 'false' }}) { alert('{{ __('Preview Mode: Login functionality is disabled.') }}'); return false; }" class="space-y-6"> <form method="POST"
action="{{ (isset($isPreview) && $isPreview) ? '#' : (isset($company) ? route('tenant.login.post', $company->code) : route('login')) }}"
x-data="{ isSubmitting: false, isPreview: {{ (isset($isPreview) && $isPreview) ? 'true' : 'false' }} }"
@submit="if (isPreview) { alert('{{ __('Preview Mode: Login functionality is disabled.') }}'); $event.preventDefault(); return; } if (isSubmitting) { $event.preventDefault(); return; } isSubmitting = true;"
class="space-y-6">
@csrf @csrf
<!-- 帳號輸入框 --> <!-- 帳號輸入框 -->
@ -183,9 +187,15 @@
</div> </div>
<!-- 提交按鈕 --> <!-- 提交按鈕 -->
<button type="submit" <button type="submit"
class="w-full py-3.5 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-extrabold rounded-xl border border-transparent bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white shadow-lg shadow-blue-500/25 active:scale-[0.98] focus:outline-none transition-all cursor-pointer"> :disabled="isSubmitting"
登入 class="w-full py-3.5 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-extrabold rounded-xl border border-transparent bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white shadow-lg shadow-blue-500/25 active:scale-[0.98] focus:outline-none transition-all cursor-pointer disabled:opacity-70 disabled:cursor-not-allowed disabled:active:scale-100">
<svg x-show="isSubmitting" x-cloak class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
</svg>
<span x-show="!isSubmitting">登入</span>
<span x-show="isSubmitting" x-cloak>登入中</span>
</button> </button>
</form> </form>
</div> </div>
@ -195,4 +205,3 @@
</div> </div>
</body> </body>
</html> </html>