Add /api/auth/status endpoint for JavaScript compatibility
This commit is contained in:
parent
2c8c9a788c
commit
e3b752a2a7
@ -343,6 +343,31 @@ async def logout(current_user: Dict = Depends(get_current_user)) -> Dict[str, An
|
||||
"message": "Logged out successfully. Please remove the token from client storage."
|
||||
}
|
||||
|
||||
@app.get("/api/auth/status", response_model=Dict[str, Any], tags=["Authentication"])
|
||||
async def auth_status(request: Request) -> Dict[str, Any]:
|
||||
"""
|
||||
Check authentication status and configuration.
|
||||
|
||||
This endpoint checks if master password is configured and if user is authenticated.
|
||||
"""
|
||||
has_master_password = bool(settings.master_password_hash or settings.master_password)
|
||||
|
||||
# Check if user has valid token
|
||||
authenticated = False
|
||||
try:
|
||||
auth_header = request.headers.get("authorization")
|
||||
if auth_header and auth_header.startswith("Bearer "):
|
||||
token = auth_header.split(" ")[1]
|
||||
payload = verify_jwt_token(token)
|
||||
authenticated = payload is not None
|
||||
except Exception:
|
||||
authenticated = False
|
||||
|
||||
return {
|
||||
"has_master_password": has_master_password,
|
||||
"authenticated": authenticated
|
||||
}
|
||||
|
||||
# Health check endpoint
|
||||
@app.get("/health", response_model=HealthResponse, tags=["System"])
|
||||
async def health_check() -> HealthResponse:
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-theme="light">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
@ -15,7 +16,7 @@
|
||||
background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
|
||||
.setup-card {
|
||||
background: var(--color-surface);
|
||||
border-radius: 16px;
|
||||
@ -25,50 +26,50 @@
|
||||
max-width: 500px;
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
|
||||
.setup-header {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
|
||||
.setup-header .logo {
|
||||
font-size: 3rem;
|
||||
color: var(--color-primary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
.setup-header h1 {
|
||||
margin: 0;
|
||||
color: var(--color-text);
|
||||
font-size: 1.8rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
.setup-header p {
|
||||
margin: 1rem 0 0 0;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
|
||||
.setup-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
.form-label {
|
||||
font-weight: 500;
|
||||
color: var(--color-text);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
@ -80,21 +81,21 @@
|
||||
transition: all 0.2s ease;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
|
||||
}
|
||||
|
||||
|
||||
.password-input-group {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.password-input {
|
||||
padding-right: 3rem;
|
||||
}
|
||||
|
||||
|
||||
.password-toggle {
|
||||
position: absolute;
|
||||
right: 0.75rem;
|
||||
@ -108,17 +109,17 @@
|
||||
border-radius: 4px;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
|
||||
.password-toggle:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
|
||||
.password-strength {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
.strength-bar {
|
||||
flex: 1;
|
||||
height: 4px;
|
||||
@ -126,24 +127,35 @@
|
||||
border-radius: 2px;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.strength-bar.active.weak { background: var(--color-error); }
|
||||
.strength-bar.active.fair { background: var(--color-warning); }
|
||||
.strength-bar.active.good { background: var(--color-info); }
|
||||
.strength-bar.active.strong { background: var(--color-success); }
|
||||
|
||||
|
||||
.strength-bar.active.weak {
|
||||
background: var(--color-error);
|
||||
}
|
||||
|
||||
.strength-bar.active.fair {
|
||||
background: var(--color-warning);
|
||||
}
|
||||
|
||||
.strength-bar.active.good {
|
||||
background: var(--color-info);
|
||||
}
|
||||
|
||||
.strength-bar.active.strong {
|
||||
background: var(--color-success);
|
||||
}
|
||||
|
||||
.strength-text {
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-secondary);
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
|
||||
.form-help {
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-secondary);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
|
||||
.setup-button {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
@ -160,20 +172,20 @@
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
.setup-button:hover:not(:disabled) {
|
||||
background: var(--color-primary-dark);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.3);
|
||||
}
|
||||
|
||||
|
||||
.setup-button:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
.error-message {
|
||||
background: var(--color-error-light);
|
||||
color: var(--color-error);
|
||||
@ -182,7 +194,7 @@
|
||||
border: 1px solid var(--color-error);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
|
||||
.success-message {
|
||||
background: var(--color-success-light);
|
||||
color: var(--color-success);
|
||||
@ -191,7 +203,7 @@
|
||||
border: 1px solid var(--color-success);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
|
||||
.security-tips {
|
||||
margin-top: 1.5rem;
|
||||
padding: 1rem;
|
||||
@ -201,19 +213,19 @@
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
|
||||
.security-tips h4 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
color: var(--color-info);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
|
||||
.security-tips ul {
|
||||
margin: 0;
|
||||
padding-left: 1.2rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
|
||||
.theme-toggle {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
@ -231,12 +243,12 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
.theme-toggle:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
|
||||
.loading-spinner {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
@ -245,7 +257,7 @@
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
@ -253,12 +265,13 @@
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="setup-container">
|
||||
<button class="theme-toggle" id="theme-toggle" title="Toggle theme">
|
||||
<i class="fas fa-moon"></i>
|
||||
</button>
|
||||
|
||||
|
||||
<div class="setup-card">
|
||||
<div class="setup-header">
|
||||
<div class="logo">
|
||||
@ -267,34 +280,22 @@
|
||||
<h1>Welcome to AniWorld Manager</h1>
|
||||
<p>Let's set up your master password to secure your anime collection.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<form class="setup-form" id="setup-form">
|
||||
<div class="form-group">
|
||||
<label for="directory" class="form-label">Anime Directory</label>
|
||||
<input
|
||||
type="text"
|
||||
id="directory"
|
||||
name="directory"
|
||||
class="form-input"
|
||||
placeholder="C:\Anime"
|
||||
value="{{ current_directory }}"
|
||||
required>
|
||||
<input type="text" id="directory" name="directory" class="form-input" placeholder="C:\Anime"
|
||||
value="{{ current_directory }}" required>
|
||||
<div class="form-help">
|
||||
The directory where your anime series are stored. This can be changed later in settings.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password" class="form-label">Master Password</label>
|
||||
<div class="password-input-group">
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
class="form-input password-input"
|
||||
placeholder="Create a strong password"
|
||||
required
|
||||
minlength="8">
|
||||
<input type="password" id="password" name="password" class="form-input password-input"
|
||||
placeholder="Create a strong password" required minlength="8">
|
||||
<button type="button" class="password-toggle" id="password-toggle" tabindex="-1">
|
||||
<i class="fas fa-eye"></i>
|
||||
</button>
|
||||
@ -307,32 +308,27 @@
|
||||
</div>
|
||||
<div class="strength-text" id="strength-text">Password strength will be shown here</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-group">
|
||||
<label for="confirm-password" class="form-label">Confirm Password</label>
|
||||
<div class="password-input-group">
|
||||
<input
|
||||
type="password"
|
||||
id="confirm-password"
|
||||
name="confirm-password"
|
||||
class="form-input password-input"
|
||||
placeholder="Confirm your password"
|
||||
required
|
||||
<input type="password" id="confirm-password" name="confirm-password"
|
||||
class="form-input password-input" placeholder="Confirm your password" required
|
||||
minlength="8">
|
||||
<button type="button" class="password-toggle" id="confirm-password-toggle" tabindex="-1">
|
||||
<i class="fas fa-eye"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="message-container"></div>
|
||||
|
||||
|
||||
<button type="submit" class="setup-button" id="setup-button">
|
||||
<i class="fas fa-check"></i>
|
||||
<span>Complete Setup</span>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
|
||||
<div class="security-tips">
|
||||
<h4><i class="fas fa-shield-alt"></i> Security Tips</h4>
|
||||
<ul>
|
||||
@ -349,25 +345,25 @@
|
||||
// Theme toggle functionality
|
||||
const themeToggle = document.getElementById('theme-toggle');
|
||||
const htmlElement = document.documentElement;
|
||||
|
||||
|
||||
const savedTheme = localStorage.getItem('theme') || 'light';
|
||||
htmlElement.setAttribute('data-theme', savedTheme);
|
||||
updateThemeIcon(savedTheme);
|
||||
|
||||
|
||||
themeToggle.addEventListener('click', () => {
|
||||
const currentTheme = htmlElement.getAttribute('data-theme');
|
||||
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
||||
|
||||
|
||||
htmlElement.setAttribute('data-theme', newTheme);
|
||||
localStorage.setItem('theme', newTheme);
|
||||
updateThemeIcon(newTheme);
|
||||
});
|
||||
|
||||
|
||||
function updateThemeIcon(theme) {
|
||||
const icon = themeToggle.querySelector('i');
|
||||
icon.className = theme === 'dark' ? 'fas fa-sun' : 'fas fa-moon';
|
||||
}
|
||||
|
||||
|
||||
// Password visibility toggles
|
||||
document.querySelectorAll('.password-toggle').forEach(toggle => {
|
||||
toggle.addEventListener('click', () => {
|
||||
@ -375,50 +371,50 @@
|
||||
const type = input.getAttribute('type');
|
||||
const newType = type === 'password' ? 'text' : 'password';
|
||||
const icon = toggle.querySelector('i');
|
||||
|
||||
|
||||
input.setAttribute('type', newType);
|
||||
icon.className = newType === 'password' ? 'fas fa-eye' : 'fas fa-eye-slash';
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// Password strength checker
|
||||
const passwordInput = document.getElementById('password');
|
||||
const strengthBars = document.querySelectorAll('.strength-bar');
|
||||
const strengthText = document.getElementById('strength-text');
|
||||
|
||||
|
||||
passwordInput.addEventListener('input', () => {
|
||||
const password = passwordInput.value;
|
||||
const strength = calculatePasswordStrength(password);
|
||||
updatePasswordStrength(strength);
|
||||
});
|
||||
|
||||
|
||||
function calculatePasswordStrength(password) {
|
||||
let score = 0;
|
||||
let feedback = [];
|
||||
|
||||
|
||||
// Length check
|
||||
if (password.length >= 8) score++;
|
||||
if (password.length >= 12) score++;
|
||||
|
||||
|
||||
// Character variety
|
||||
if (/[a-z]/.test(password)) score++;
|
||||
if (/[A-Z]/.test(password)) score++;
|
||||
if (/[0-9]/.test(password)) score++;
|
||||
if (/[^A-Za-z0-9]/.test(password)) score++;
|
||||
|
||||
|
||||
// Penalties
|
||||
if (password.length < 8) {
|
||||
feedback.push('Too short');
|
||||
score = Math.max(0, score - 2);
|
||||
}
|
||||
|
||||
|
||||
if (!/[A-Z]/.test(password)) feedback.push('Add uppercase');
|
||||
if (!/[0-9]/.test(password)) feedback.push('Add numbers');
|
||||
if (!/[^A-Za-z0-9]/.test(password)) feedback.push('Add symbols');
|
||||
|
||||
|
||||
const strengthLevels = ['Very Weak', 'Weak', 'Fair', 'Good', 'Strong', 'Very Strong'];
|
||||
const strengthLevel = Math.min(Math.floor(score / 1.2), 5);
|
||||
|
||||
|
||||
return {
|
||||
score: Math.min(score, 6),
|
||||
level: strengthLevel,
|
||||
@ -426,18 +422,18 @@
|
||||
feedback
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
function updatePasswordStrength(strength) {
|
||||
const colors = ['weak', 'weak', 'fair', 'good', 'strong', 'strong'];
|
||||
const color = colors[strength.level];
|
||||
|
||||
|
||||
strengthBars.forEach((bar, index) => {
|
||||
bar.className = 'strength-bar';
|
||||
if (index < strength.score) {
|
||||
bar.classList.add('active', color);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
if (passwordInput.value) {
|
||||
let text = `Password strength: ${strength.text}`;
|
||||
if (strength.feedback.length > 0) {
|
||||
@ -450,22 +446,22 @@
|
||||
strengthText.style.color = 'var(--color-text-secondary)';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Form submission
|
||||
const setupForm = document.getElementById('setup-form');
|
||||
const setupButton = document.getElementById('setup-button');
|
||||
const messageContainer = document.getElementById('message-container');
|
||||
const confirmPasswordInput = document.getElementById('confirm-password');
|
||||
const directoryInput = document.getElementById('directory');
|
||||
|
||||
|
||||
// Real-time password confirmation
|
||||
confirmPasswordInput.addEventListener('input', validatePasswordMatch);
|
||||
passwordInput.addEventListener('input', validatePasswordMatch);
|
||||
|
||||
|
||||
function validatePasswordMatch() {
|
||||
const password = passwordInput.value;
|
||||
const confirmPassword = confirmPasswordInput.value;
|
||||
|
||||
|
||||
if (confirmPassword && password !== confirmPassword) {
|
||||
confirmPasswordInput.setCustomValidity('Passwords do not match');
|
||||
confirmPasswordInput.style.borderColor = 'var(--color-error)';
|
||||
@ -474,32 +470,32 @@
|
||||
confirmPasswordInput.style.borderColor = 'var(--color-border)';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
setupForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
|
||||
const password = passwordInput.value;
|
||||
const confirmPassword = confirmPasswordInput.value;
|
||||
const directory = directoryInput.value.trim();
|
||||
|
||||
|
||||
if (password !== confirmPassword) {
|
||||
showMessage('Passwords do not match', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
const strength = calculatePasswordStrength(password);
|
||||
if (strength.level < 2) {
|
||||
showMessage('Password is too weak. Please use a stronger password.', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
if (!directory) {
|
||||
showMessage('Please enter a valid anime directory', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
setLoading(true);
|
||||
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/auth/setup', {
|
||||
method: 'POST',
|
||||
@ -511,9 +507,9 @@
|
||||
directory
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
|
||||
if (data.status === 'success') {
|
||||
showMessage('Setup completed successfully! Redirecting...', 'success');
|
||||
setTimeout(() => {
|
||||
@ -529,7 +525,7 @@
|
||||
setLoading(false);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
function showMessage(message, type) {
|
||||
messageContainer.innerHTML = `
|
||||
<div class="${type}-message">
|
||||
@ -537,12 +533,12 @@
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
function setLoading(loading) {
|
||||
setupButton.disabled = loading;
|
||||
const buttonText = setupButton.querySelector('span');
|
||||
const buttonIcon = setupButton.querySelector('i');
|
||||
|
||||
|
||||
if (loading) {
|
||||
buttonIcon.className = 'loading-spinner';
|
||||
buttonText.textContent = 'Setting up...';
|
||||
@ -551,7 +547,7 @@
|
||||
buttonText.textContent = 'Complete Setup';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Clear message on input
|
||||
[passwordInput, confirmPasswordInput, directoryInput].forEach(input => {
|
||||
input.addEventListener('input', () => {
|
||||
@ -560,4 +556,5 @@
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user