Spaces:

KyrosDev
/

kstools-license-manager

Running

App Files Files Community

kstools-license-manager / frontend /login.html

KyrosDev

修復 AuthManager 初始化時機問題

6b7637e 7 months ago

raw

history blame contribute delete

6.56 kB

	<!DOCTYPE html>
	<html lang="zh-TW">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>登入 - KSTools License Manager</title>

	<!-- Favicon -->
	<link rel="icon" type="image/x-icon" href="/favicon.ico">

	<!-- CSS -->
	<link rel="stylesheet" href="css/style.css">

	<!-- Font Awesome -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

	<!-- Hugging Face 推薦的現代載入方式 -->
	<script type="module">
	console.log('🚀 登入頁面: Hugging Face 推薦載入方式啟動...');

	// 使用 ES Modules + jsDelivr (Hugging Face 推薦)
	try {
	console.log('🔄 載入 Supabase ES Module...');
	const { createClient } = await import('https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/+esm');

	// 將 createClient 設為全域可用
	window.supabase = { createClient };
	window.supabaseLoaded = true;

	console.log('✅ 登入頁面: Supabase ES Module 載入成功!');
	console.log('✅ 登入頁面: window.supabase 已設定');

	// 觸發自定義事件通知其他腳本
	window.dispatchEvent(new CustomEvent('supabaseReady'));

	} catch (error) {
	console.error('❌ 登入頁面: ES Module 載入失敗:', error);

	// 回退到傳統方式
	console.log('🔄 登入頁面: 回退到傳統 UMD 載入...');
	const script = document.createElement('script');
	script.src = 'https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/dist/umd/supabase.min.js';
	script.onload = () => {
	console.log('✅ 登入頁面: UMD 回退載入成功!');
	window.supabaseLoaded = true;
	window.dispatchEvent(new CustomEvent('supabaseReady'));
	};
	script.onerror = () => {
	console.error('❌ 登入頁面: 所有載入方式都失敗了!');
	// 創建 mock 對象防止錯誤
	window.supabase = {
	createClient: () => {
	console.error('❌ 登入頁面: Supabase 完全載入失敗');
	return null;
	}
	};
	window.supabaseLoaded = false;
	window.dispatchEvent(new CustomEvent('supabaseReady'));
	};
	document.head.appendChild(script);
	}
	</script>
	</head>
	<body>
	<div class="login-container">
	<div class="login-card">
	<!-- Header -->
	<div class="login-header">
	<h1>
	<i class="fas fa-key text-primary"></i>
	KSTools License Manager
	</h1>
	<p>請登入以存取管理後台</p>
	</div>

	<!-- Login Form -->
	<form id="loginForm" class="login-form">
	<div class="form-group">
	<label for="email" class="form-label">
	<i class="fas fa-envelope"></i>
	電子郵件
	</label>
	<input
	type="email"
	id="email"
	name="email"
	class="form-input"
	placeholder="請輸入電子郵件"
	required
	autocomplete="email"
	>
	</div>

	<div class="form-group">
	<label for="password" class="form-label">
	<i class="fas fa-lock"></i>
	密碼
	</label>
	<div class="input-group">
	<input
	type="password"
	id="password"
	name="password"
	class="form-input"
	placeholder="請輸入密碼"
	required
	autocomplete="current-password"
	>
	<button
	type="button"
	class="input-group-btn"
	id="togglePassword"
	title="顯示/隱藏密碼"
	>
	<i class="fas fa-eye"></i>
	</button>
	</div>
	</div>


	<button type="submit" class="btn btn-primary" id="loginBtn">
	<i class="fas fa-sign-in-alt"></i>
	登入
	</button>
	</form>

	<!-- Footer -->
	<div class="login-footer">
	<p>© 2024 KSTools License Manager. All rights reserved.</p>
	</div>
	</div>
	</div>

	<!-- Toast Container -->
	<div id="toastContainer" class="toast-container"></div>

	<!-- Loading Overlay -->
	<div id="loadingOverlay" class="loading-overlay hidden">
	<div class="loading-content">
	<div class="spinner"></div>
	<p>登入中...</p>
	</div>
	</div>

	<!-- Scripts -->
	<script src="config.js"></script>
	<script src="js/utils.js"></script>
	<script src="js/auth.js"></script>
	<script>
	// 簡化登入頁面初始化
	document.addEventListener('DOMContentLoaded', () => {
	console.log('🔄 登入頁面初始化');

	// 持續檢查 AuthManager 是否準備好
	const checkAuthManager = setInterval(() => {
	if (window.authManager?.initialized) {
	console.log('✅ 初始化登入表單');
	window.authManager.initLoginPage();
	clearInterval(checkAuthManager);
	}
	}, 100);

	// 最多等待 5 秒
	setTimeout(() => {
	clearInterval(checkAuthManager);
	if (!window.authManager?.initialized) {
	console.log('⚠️ AuthManager 初始化超時');
	}
	}, 5000);
	});
	</script>
	</body>
	</html>