Enhance ESLint configuration for TypeScript and React, update dependencies, and add new super admin setup script. Update README for improved clarity on superuser setup options and modify user interface components for better user experience.

This commit is contained in:
2025-08-13 00:51:44 +01:00
parent aa10ea0b26
commit 936293ba92
32 changed files with 7266 additions and 184 deletions

241
setup-oliver-admin.html Normal file
View File

@ -0,0 +1,241 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Setup Oliver Super Admin - ScriptShare</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background: #f5f5f5;
}
.container {
background: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
h1 {
color: #2563eb;
margin-bottom: 20px;
}
.setup-button {
background: #2563eb;
color: white;
border: none;
padding: 12px 24px;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
margin: 10px 0;
}
.setup-button:hover {
background: #1d4ed8;
}
.success {
background: #dcfce7;
border: 1px solid #22c55e;
color: #166534;
padding: 15px;
border-radius: 6px;
margin: 20px 0;
}
.info {
background: #dbeafe;
border: 1px solid #3b82f6;
color: #1e40af;
padding: 15px;
border-radius: 6px;
margin: 20px 0;
}
.user-details {
background: #f8fafc;
border: 1px solid #e2e8f0;
padding: 15px;
border-radius: 6px;
margin: 20px 0;
font-family: monospace;
font-size: 14px;
}
.step {
margin: 20px 0;
padding: 15px;
background: #f8fafc;
border-radius: 6px;
}
.step-number {
background: #2563eb;
color: white;
width: 24px;
height: 24px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: bold;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>🔧 Setup Oliver Super Admin</h1>
<div class="info">
<strong>What this does:</strong> This tool will create a super admin account for 'Oliver' in your browser's localStorage, allowing you to access the admin panel immediately.
</div>
<button class="setup-button" onclick="setupOliverAdmin()">
🚀 Setup Oliver Super Admin
</button>
<div id="result"></div>
<div class="step">
<span class="step-number">1</span>
<strong>Click the button above</strong> to create the Oliver super admin account
</div>
<div class="step">
<span class="step-number">2</span>
<strong>Go to ScriptShare</strong> - Navigate to your ScriptShare application
</div>
<div class="step">
<span class="step-number">3</span>
<strong>Refresh the page</strong> - You should now be automatically logged in as Oliver Super Admin
</div>
<div class="step">
<span class="step-number">4</span>
<strong>Access Admin Panel</strong> - Click on your user menu and select "Super Admin" to access the admin panel
</div>
<div class="info">
<strong>Note:</strong> This setup is stored in your browser's localStorage. If you clear your browser data or use a different browser, you'll need to run this setup again.
</div>
</div>
<script>
function generateId() {
return Math.random().toString(36).substring(2) + Date.now().toString(36);
}
function createOliverSuperAdmin() {
const SUPER_USER_PERMISSIONS = [
'user:create',
'user:read',
'user:update',
'user:delete',
'user:promote',
'script:approve',
'script:reject',
'script:delete',
'comment:moderate',
'system:configure',
'analytics:view',
'backup:manage'
];
return {
id: generateId(),
email: 'oliver@scriptshare.com',
username: 'oliver',
displayName: 'Oliver',
avatarUrl: 'https://api.dicebear.com/7.x/avataaars/svg?seed=oliver',
bio: 'Founder and Super Administrator of ScriptShare',
website: 'https://scriptshare.com',
location: 'Digital Realm',
company: 'ScriptShare',
isAdmin: true,
isModerator: true,
isSuperUser: true,
permissions: [...SUPER_USER_PERMISSIONS],
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
};
}
function setupOliverAdmin() {
try {
const oliverAdmin = createOliverSuperAdmin();
// Save to localStorage
localStorage.setItem('scriptshare-user-data', JSON.stringify(oliverAdmin));
localStorage.setItem('scriptshare-auth-token', generateId());
// Also add to admin users list
const existingUsers = JSON.parse(localStorage.getItem('scriptshare-admin-users') || '[]');
existingUsers.push(oliverAdmin);
localStorage.setItem('scriptshare-admin-users', JSON.stringify(existingUsers));
const resultDiv = document.getElementById('result');
resultDiv.innerHTML = `
<div class="success">
<h3>✅ Oliver Super Admin Setup Complete!</h3>
<p>Oliver has been successfully set up as a super administrator.</p>
</div>
<div class="user-details">
<strong>User Details:</strong><br>
Email: ${oliverAdmin.email}<br>
Username: ${oliverAdmin.username}<br>
Display Name: ${oliverAdmin.displayName}<br>
Role: Super Administrator<br>
Permissions: ${oliverAdmin.permissions.length} total
</div>
<div class="info">
<strong>Next Steps:</strong><br>
1. Go to your ScriptShare application<br>
2. Refresh the page<br>
3. You should now be logged in as Oliver Super Admin<br>
4. Access the admin panel from your user menu
</div>
`;
console.log('✅ Oliver Super Admin setup complete in browser!');
console.log('User data:', oliverAdmin);
} catch (error) {
console.error('❌ Error setting up Oliver Super Admin:', error);
document.getElementById('result').innerHTML = `
<div class="success" style="background: #fef2f2; border-color: #ef4444; color: #991b1b;">
<h3>❌ Setup Failed</h3>
<p>Error: ${error.message}</p>
<p>Check the browser console for more details.</p>
</div>
`;
}
}
// Check if Oliver is already set up
function checkExistingSetup() {
const userData = localStorage.getItem('scriptshare-user-data');
if (userData) {
try {
const user = JSON.parse(userData);
if (user.username === 'oliver' && user.isSuperUser) {
document.getElementById('result').innerHTML = `
<div class="success">
<h3>✅ Oliver Super Admin Already Set Up!</h3>
<p>Oliver is already configured as a super administrator in this browser.</p>
<p>You can go to ScriptShare and refresh the page to log in.</p>
</div>
`;
}
} catch (e) {
// Invalid data, ignore
}
}
}
// Check on page load
window.addEventListener('load', checkExistingSetup);
</script>
</body>
</html>