Working state before icon/utils fixes - Oct 22
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html :class="{ 'theme-dark': dark }" x-data="loginData()" lang="en">
|
||||
<html :class="{ 'theme-dark': dark }" x-data="adminLogin()" lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
@@ -45,6 +45,7 @@
|
||||
class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
|
||||
:class="{ 'border-red-600': errors.username }"
|
||||
placeholder="Enter your username"
|
||||
autocomplete="username"
|
||||
required />
|
||||
<span x-show="errors.username" x-text="errors.username"
|
||||
class="text-xs text-red-600 dark:text-red-400"></span>
|
||||
@@ -59,6 +60,7 @@
|
||||
:class="{ 'border-red-600': errors.password }"
|
||||
placeholder="***************"
|
||||
type="password"
|
||||
autocomplete="current-password"
|
||||
required />
|
||||
<span x-show="errors.password" x-text="errors.password"
|
||||
class="text-xs text-red-600 dark:text-red-400"></span>
|
||||
@@ -85,80 +87,29 @@
|
||||
Forgot your password?
|
||||
</a>
|
||||
</p>
|
||||
<p class="mt-2">
|
||||
<a class="text-sm font-medium text-gray-600 dark:text-gray-400 hover:underline"
|
||||
href="/">
|
||||
← Back to Platform
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alpine.js v3 -->
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.0/dist/cdn.min.js"></script>
|
||||
<!-- Scripts in CORRECT ORDER -->
|
||||
<!-- 1. Icons FIRST (defines $icon magic) -->
|
||||
<script src="/static/shared/js/icons.js"></script>
|
||||
|
||||
<!-- API Client -->
|
||||
<!-- 2. API Client -->
|
||||
<script src="/static/shared/js/api-client.js"></script>
|
||||
|
||||
<!-- Login Logic -->
|
||||
<script>
|
||||
function loginData() {
|
||||
return {
|
||||
dark: false,
|
||||
loading: false,
|
||||
error: '',
|
||||
success: '',
|
||||
credentials: {
|
||||
username: '',
|
||||
password: ''
|
||||
},
|
||||
errors: {
|
||||
username: '',
|
||||
password: ''
|
||||
},
|
||||
<!-- 3. Login Logic -->
|
||||
<script src="/static/admin/js/login.js"></script>
|
||||
|
||||
clearErrors() {
|
||||
this.error = '';
|
||||
this.errors = { username: '', password: '' };
|
||||
},
|
||||
|
||||
async handleLogin() {
|
||||
this.clearErrors();
|
||||
this.loading = true;
|
||||
|
||||
try {
|
||||
// Your existing API call
|
||||
const response = await fetch('/api/v1/auth/login', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(this.credentials)
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(data.message || 'Login failed');
|
||||
}
|
||||
|
||||
// Store token
|
||||
localStorage.setItem('token', data.access_token);
|
||||
|
||||
// Show success
|
||||
this.success = 'Login successful! Redirecting...';
|
||||
|
||||
// Redirect to dashboard
|
||||
setTimeout(() => {
|
||||
window.location.href = '/static/admin/dashboard.html';
|
||||
}, 1000);
|
||||
|
||||
} catch (error) {
|
||||
this.error = error.message || 'Invalid username or password';
|
||||
console.error('Login error:', error);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!-- 4. Alpine.js LAST with defer -->
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.0/dist/cdn.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user