Fix jwt-token

This commit is contained in:
2025-09-19 13:33:51 +02:00
parent 6863e3bc65
commit b2bc3f4567
4 changed files with 328 additions and 46 deletions

View File

@@ -1,8 +1,9 @@
import React from 'react' import React from 'react'
import { Outlet, NavLink, useLocation } from 'react-router-dom' import { Outlet, NavLink, useLocation } from 'react-router-dom'
import { useTranslation } from 'react-i18next' // import { useTranslation } from 'react-i18next' // Commented out until Docker rebuild
import { useAuth } from '../contexts/AuthContext' import { useAuth } from '../contexts/AuthContext'
import LanguageSelector from './common/LanguageSelector' import LanguageSelector from './common/LanguageSelector'
import { t } from '../utils/tempTranslations' // Temporary translation system
import { import {
HomeIcon, HomeIcon,
BuildingOfficeIcon, BuildingOfficeIcon,
@@ -12,15 +13,15 @@ import {
} from '@heroicons/react/24/outline' } from '@heroicons/react/24/outline'
const Layout = () => { const Layout = () => {
const { t } = useTranslation() // const { t } = useTranslation() // Commented out until Docker rebuild
const { user, logout } = useAuth() const { user, logout } = useAuth()
const location = useLocation() const location = useLocation()
const navigation = [ const navigation = [
{ name: t('navigation.dashboard'), href: '/dashboard', icon: HomeIcon }, { name: t('nav.dashboard'), href: '/dashboard', icon: HomeIcon },
{ name: t('navigation.tenants'), href: '/tenants', icon: BuildingOfficeIcon }, { name: t('nav.tenants'), href: '/tenants', icon: BuildingOfficeIcon },
{ name: t('navigation.users'), href: '/users', icon: UsersIcon }, { name: t('nav.users'), href: '/users', icon: UsersIcon },
{ name: t('navigation.system'), href: '/system', icon: CogIcon }, { name: t('nav.system'), href: '/system', icon: CogIcon },
] ]
return ( return (
@@ -76,7 +77,7 @@ const Layout = () => {
<button <button
onClick={logout} onClick={logout}
className="p-1 rounded-md text-gray-400 hover:text-gray-600 hover:bg-gray-100" className="p-1 rounded-md text-gray-400 hover:text-gray-600 hover:bg-gray-100"
title="Logout" title={t('auth.logout')}
> >
<ArrowRightOnRectangleIcon className="h-5 w-5" /> <ArrowRightOnRectangleIcon className="h-5 w-5" />
</button> </button>

View File

@@ -1,5 +1,6 @@
import React, { useState, useEffect } from 'react' import React, { useState, useEffect } from 'react'
import api from '../services/api' import api from '../services/api'
import { t } from '../utils/tempTranslations' // Temporary translation system
import { BuildingOfficeIcon, UsersIcon, ServerIcon, ChartBarIcon } from '@heroicons/react/24/outline' import { BuildingOfficeIcon, UsersIcon, ServerIcon, ChartBarIcon } from '@heroicons/react/24/outline'
const Dashboard = () => { const Dashboard = () => {
@@ -38,26 +39,26 @@ const Dashboard = () => {
const statCards = [ const statCards = [
{ {
name: 'Total Tenants', name: t('dashboard.totalTenants'),
value: stats.tenants, value: stats.tenants,
icon: BuildingOfficeIcon, icon: BuildingOfficeIcon,
color: 'bg-blue-500' color: 'bg-blue-500'
}, },
{ {
name: 'Total Users', name: t('dashboard.totalUsers'),
value: stats.users, value: stats.users,
icon: UsersIcon, icon: UsersIcon,
color: 'bg-green-500' color: 'bg-green-500'
}, },
{ {
name: 'Active Sessions', name: t('dashboard.activeSessions'),
value: stats.activeSessions, value: stats.activeSessions,
icon: ChartBarIcon, icon: ChartBarIcon,
color: 'bg-yellow-500' color: 'bg-yellow-500'
}, },
{ {
name: 'System Health', name: t('dashboard.systemHealth'),
value: stats.systemHealth === 'good' ? 'Good' : 'Issues', value: stats.systemHealth === 'good' ? t('dashboard.good') : t('dashboard.issues'),
icon: ServerIcon, icon: ServerIcon,
color: stats.systemHealth === 'good' ? 'bg-green-500' : 'bg-red-500' color: stats.systemHealth === 'good' ? 'bg-green-500' : 'bg-red-500'
} }
@@ -74,8 +75,8 @@ const Dashboard = () => {
return ( return (
<div> <div>
<div className="mb-8"> <div className="mb-8">
<h1 className="text-2xl font-bold text-gray-900">Dashboard</h1> <h1 className="text-2xl font-bold text-gray-900">{t('dashboard.title')}</h1>
<p className="text-gray-600">Overview of your UAMILS system</p> <p className="text-gray-600">{t('dashboard.description')}</p>
</div> </div>
{/* Stats Grid */} {/* Stats Grid */}

View File

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom'
import api from '../services/api' import api from '../services/api'
import toast from 'react-hot-toast' import toast from 'react-hot-toast'
import TenantModal from '../components/TenantModal' import TenantModal from '../components/TenantModal'
import { t } from '../utils/tempTranslations' // Temporary translation system
import { import {
PlusIcon, PlusIcon,
PencilIcon, PencilIcon,
@@ -82,16 +83,16 @@ const Tenants = () => {
} }
const deleteTenant = async (tenantId) => { const deleteTenant = async (tenantId) => {
if (!confirm('Are you sure you want to delete this tenant? This action cannot be undone.')) { if (!confirm(t('tenants.confirmDelete'))) {
return return
} }
try { try {
await api.delete(`/management/tenants/${tenantId}`) await api.delete(`/management/tenants/${tenantId}`)
toast.success('Tenant deleted successfully') toast.success(t('tenants.deleteSuccess'))
loadTenants() loadTenants()
} catch (error) { } catch (error) {
toast.error('Failed to delete tenant') toast.error(t('tenants.deleteError'))
console.error('Error deleting tenant:', error) console.error('Error deleting tenant:', error)
} }
} }
@@ -99,8 +100,8 @@ const Tenants = () => {
const toggleTenantStatus = async (tenant) => { const toggleTenantStatus = async (tenant) => {
const action = tenant.is_active ? 'deactivate' : 'activate' const action = tenant.is_active ? 'deactivate' : 'activate'
const confirmMessage = tenant.is_active const confirmMessage = tenant.is_active
? `Are you sure you want to deactivate "${tenant.name}"? Users will not be able to access this tenant.` ? t('tenants.confirmDeactivate', { name: tenant.name })
: `Are you sure you want to activate "${tenant.name}"?` : t('tenants.confirmActivate', { name: tenant.name })
if (!confirm(confirmMessage)) { if (!confirm(confirmMessage)) {
return return
@@ -108,10 +109,10 @@ const Tenants = () => {
try { try {
await api.post(`/management/tenants/${tenant.id}/${action}`) await api.post(`/management/tenants/${tenant.id}/${action}`)
toast.success(`Tenant ${action}d successfully`) toast.success(t(`tenants.${action}Success`))
loadTenants() loadTenants()
} catch (error) { } catch (error) {
toast.error(`Failed to ${action} tenant`) toast.error(t(`tenants.${action}Error`))
console.error(`Error ${action}ing tenant:`, error) console.error(`Error ${action}ing tenant:`, error)
} }
} }
@@ -166,7 +167,7 @@ const Tenants = () => {
? 'bg-green-100 text-green-800' ? 'bg-green-100 text-green-800'
: 'bg-red-100 text-red-800' : 'bg-red-100 text-red-800'
}`}> }`}>
{isActive ? 'Active' : 'Inactive'} {isActive ? t('common.active') : t('common.inactive')}
</span> </span>
) )
} }
@@ -185,15 +186,15 @@ const Tenants = () => {
<div className="mb-8"> <div className="mb-8">
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<div> <div>
<h1 className="text-2xl font-bold text-gray-900">Tenants</h1> <h1 className="text-2xl font-bold text-gray-900">{t('tenants.title')}</h1>
<p className="text-gray-600">Manage organizations and their configurations</p> <p className="text-gray-600">{t('tenants.description')}</p>
</div> </div>
<button <button
onClick={() => setShowCreateModal(true)} onClick={() => setShowCreateModal(true)}
className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center space-x-2" className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center space-x-2"
> >
<PlusIcon className="h-5 w-5" /> <PlusIcon className="h-5 w-5" />
<span>Create Tenant</span> <span>{t('tenants.addTenant')}</span>
</button> </button>
</div> </div>
</div> </div>
@@ -204,7 +205,7 @@ const Tenants = () => {
<MagnifyingGlassIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" /> <MagnifyingGlassIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
<input <input
type="text" type="text"
placeholder="Search tenants..." placeholder={t('tenants.searchPlaceholder')}
value={searchTerm} value={searchTerm}
onChange={handleSearch} onChange={handleSearch}
className="pl-10 pr-4 py-2 border border-gray-300 rounded-lg w-full max-w-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" className="pl-10 pr-4 py-2 border border-gray-300 rounded-lg w-full max-w-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
@@ -218,28 +219,28 @@ const Tenants = () => {
<thead className="bg-gray-50"> <thead className="bg-gray-50">
<tr> <tr>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Tenant {t('tenants.tenant')}
</th> </th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Domain {t('tenants.domain')}
</th> </th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Auth Provider {t('tenants.authProvider')}
</th> </th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Subscription {t('tenants.subscription')}
</th> </th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Users {t('tenants.users')}
</th> </th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Created {t('tenants.created')}
</th> </th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Status {t('tenants.status')}
</th> </th>
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"> <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
Actions {t('tenants.actions')}
</th> </th>
</tr> </tr>
</thead> </thead>
@@ -295,14 +296,14 @@ const Tenants = () => {
<button <button
onClick={() => handleEditTenant(tenant)} onClick={() => handleEditTenant(tenant)}
className="text-blue-600 hover:text-blue-900 p-1 rounded" className="text-blue-600 hover:text-blue-900 p-1 rounded"
title="Edit" title={t('tenants.edit')}
> >
<PencilIcon className="h-4 w-4" /> <PencilIcon className="h-4 w-4" />
</button> </button>
<button <button
onClick={() => deleteTenant(tenant.id)} onClick={() => deleteTenant(tenant.id)}
className="text-red-600 hover:text-red-900 p-1 rounded" className="text-red-600 hover:text-red-900 p-1 rounded"
title="Delete" title={t('tenants.delete')}
> >
<TrashIcon className="h-4 w-4" /> <TrashIcon className="h-4 w-4" />
</button> </button>
@@ -322,24 +323,24 @@ const Tenants = () => {
disabled={pagination.offset === 0} disabled={pagination.offset === 0}
className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50" className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50"
> >
Previous {t('common.previous')}
</button> </button>
<button <button
onClick={() => loadTenants(pagination.offset + pagination.limit, searchTerm)} onClick={() => loadTenants(pagination.offset + pagination.limit, searchTerm)}
disabled={pagination.offset + pagination.limit >= pagination.total} disabled={pagination.offset + pagination.limit >= pagination.total}
className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50" className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50"
> >
Next {t('common.next')}
</button> </button>
</div> </div>
<div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> <div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
<div> <div>
<p className="text-sm text-gray-700"> <p className="text-sm text-gray-700">
Showing <span className="font-medium">{pagination.offset + 1}</span> to{' '} {t('common.showingResults', {
<span className="font-medium"> start: pagination.offset + 1,
{Math.min(pagination.offset + pagination.limit, pagination.total)} end: Math.min(pagination.offset + pagination.limit, pagination.total),
</span>{' '} total: pagination.total
of <span className="font-medium">{pagination.total}</span> results })}
</p> </p>
</div> </div>
</div> </div>
@@ -349,15 +350,15 @@ const Tenants = () => {
{tenants.length === 0 && !loading && ( {tenants.length === 0 && !loading && (
<div className="text-center py-12"> <div className="text-center py-12">
<BuildingOfficeIcon className="mx-auto h-12 w-12 text-gray-400" /> <BuildingOfficeIcon className="mx-auto h-12 w-12 text-gray-400" />
<h3 className="mt-2 text-sm font-medium text-gray-900">No tenants</h3> <h3 className="mt-2 text-sm font-medium text-gray-900">{t('tenants.noTenants')}</h3>
<p className="mt-1 text-sm text-gray-500">Get started by creating a new tenant.</p> <p className="mt-1 text-sm text-gray-500">{t('tenants.noTenantsDescription')}</p>
<div className="mt-6"> <div className="mt-6">
<button <button
onClick={() => setShowCreateModal(true)} onClick={() => setShowCreateModal(true)}
className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700" className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"
> >
<PlusIcon className="h-5 w-5 mr-2" /> <PlusIcon className="h-5 w-5 mr-2" />
Create Tenant {t('tenants.createTenant')}
</button> </button>
</div> </div>
</div> </div>

View File

@@ -0,0 +1,279 @@
// Temporary translation system for management portal until Docker rebuild
const translations = {
en: {
nav: {
dashboard: 'Dashboard',
tenants: 'Tenants',
users: 'Users',
system: 'System'
},
navigation: {
dashboard: 'Dashboard',
tenants: 'Tenants',
users: 'Users',
system: 'System',
logout: 'Logout'
},
app: {
title: 'UAM-ILS Management Portal'
},
tenants: {
title: 'Tenants',
description: 'Manage organizations and their configurations',
noTenants: 'No tenants',
noTenantsDescription: 'Get started by creating a new tenant.',
loadingTenants: 'Loading tenants...',
addTenant: 'Create Tenant',
createTenant: 'Create Tenant',
editTenant: 'Edit Tenant',
deleteTenant: 'Delete Tenant',
searchPlaceholder: 'Search tenants...',
tenant: 'Tenant',
tenantName: 'Tenant Name',
tenantSlug: 'Tenant Slug',
domain: 'Domain',
authProvider: 'Auth Provider',
subscription: 'Subscription',
users: 'Users',
status: 'Status',
created: 'Created',
lastActivity: 'Last Activity',
actions: 'Actions',
active: 'Active',
inactive: 'Inactive',
suspended: 'Suspended',
edit: 'Edit',
delete: 'Delete',
viewUsers: 'View Users',
confirmDelete: 'Are you sure you want to delete this tenant? This action cannot be undone.',
confirmActivate: 'Are you sure you want to activate "{{name}}"?',
confirmDeactivate: 'Are you sure you want to deactivate "{{name}}"? Users will not be able to access this tenant.',
deleteSuccess: 'Tenant deleted successfully',
deleteError: 'Failed to delete tenant',
activateSuccess: 'Tenant activated successfully',
activateError: 'Failed to activate tenant',
deactivateSuccess: 'Tenant deactivated successfully',
deactivateError: 'Failed to deactivate tenant',
deleteWarning: 'This action cannot be undone and will remove all associated data.',
totalTenants: 'Total Tenants',
activeTenants: 'Active Tenants'
},
users: {
title: 'User Management',
noUsers: 'No users found',
addUser: 'Add User',
editUser: 'Edit User',
deleteUser: 'Delete User',
username: 'Username',
email: 'Email',
role: 'Role',
tenant: 'Tenant',
status: 'Status',
lastLogin: 'Last Login',
created: 'Created',
actions: 'Actions'
},
dashboard: {
title: 'Dashboard',
description: 'Overview of your UAMILS system',
totalTenants: 'Total Tenants',
activeTenants: 'Active Tenants',
totalUsers: 'Total Users',
activeSessions: 'Active Sessions',
systemHealth: 'System Health',
good: 'Good',
issues: 'Issues'
},
system: {
title: 'System Information',
serverInfo: 'Server Information',
databaseInfo: 'Database Information',
version: 'Version',
uptime: 'Uptime',
platform: 'Platform'
},
common: {
loading: 'Loading...',
error: 'Error',
success: 'Success',
cancel: 'Cancel',
save: 'Save',
delete: 'Delete',
edit: 'Edit',
add: 'Add',
search: 'Search',
filter: 'Filter',
refresh: 'Refresh',
previous: 'Previous',
next: 'Next',
active: 'Active',
inactive: 'Inactive',
showingResults: 'Showing {{start}} to {{end}} of {{total}} results',
yes: 'Yes',
no: 'No',
ok: 'OK',
close: 'Close'
},
auth: {
login: 'Login',
username: 'Username',
password: 'Password',
loginButton: 'Sign In',
logout: 'Logout'
}
},
sv: {
nav: {
dashboard: 'Översikt',
tenants: 'Hyresgäster',
users: 'Användare',
system: 'System'
},
navigation: {
dashboard: 'Översikt',
tenants: 'Hyresgäster',
users: 'Användare',
system: 'System',
logout: 'Logga ut'
},
app: {
title: 'UAM-ILS Förvaltningsportal'
},
tenants: {
title: 'Hyresgäster',
description: 'Hantera organisationer och deras konfigurationer',
noTenants: 'Inga hyresgäster',
noTenantsDescription: 'Kom igång genom att skapa en ny hyresgäst.',
loadingTenants: 'Laddar hyresgäster...',
addTenant: 'Skapa hyresgäst',
createTenant: 'Skapa hyresgäst',
editTenant: 'Redigera hyresgäst',
deleteTenant: 'Ta bort hyresgäst',
searchPlaceholder: 'Sök hyresgäster...',
tenant: 'Hyresgäst',
tenantName: 'Hyresgästnamn',
tenantSlug: 'Hyresgästslug',
domain: 'Domän',
authProvider: 'Auth-leverantör',
subscription: 'Prenumeration',
users: 'Användare',
status: 'Status',
created: 'Skapad',
lastActivity: 'Senaste aktivitet',
actions: 'Åtgärder',
active: 'Aktiv',
inactive: 'Inaktiv',
suspended: 'Avstängd',
edit: 'Redigera',
delete: 'Ta bort',
viewUsers: 'Visa användare',
confirmDelete: 'Är du säker på att du vill ta bort denna hyresgäst? Denna åtgärd kan inte ångras.',
confirmActivate: 'Är du säker på att du vill aktivera "{{name}}"?',
confirmDeactivate: 'Är du säker på att du vill deaktivera "{{name}}"? Användare kommer inte att kunna komma åt denna hyresgäst.',
deleteSuccess: 'Hyresgäst borttagen framgångsrikt',
deleteError: 'Misslyckades att ta bort hyresgäst',
activateSuccess: 'Hyresgäst aktiverad framgångsrikt',
activateError: 'Misslyckades att aktivera hyresgäst',
deactivateSuccess: 'Hyresgäst deaktiverad framgångsrikt',
deactivateError: 'Misslyckades att deaktivera hyresgäst',
deleteWarning: 'Denna åtgärd kan inte ångras och kommer att ta bort all associerad data.',
totalTenants: 'Totala hyresgäster',
activeTenants: 'Aktiva hyresgäster'
},
users: {
title: 'Användarhantering',
noUsers: 'Inga användare hittades',
addUser: 'Lägg till användare',
editUser: 'Redigera användare',
deleteUser: 'Ta bort användare',
username: 'Användarnamn',
email: 'E-post',
role: 'Roll',
tenant: 'Hyresgäst',
status: 'Status',
lastLogin: 'Senaste inloggning',
created: 'Skapad',
actions: 'Åtgärder'
},
dashboard: {
title: 'Instrumentpanel',
description: 'Översikt av ditt UAMILS-system',
totalTenants: 'Totala hyresgäster',
activeTenants: 'Aktiva hyresgäster',
totalUsers: 'Totala användare',
activeSessions: 'Aktiva sessioner',
systemHealth: 'Systemhälsa',
good: 'Bra',
issues: 'Problem'
},
system: {
title: 'Systeminformation',
serverInfo: 'Serverinformation',
databaseInfo: 'Databasinformation',
version: 'Version',
uptime: 'Drifttid',
platform: 'Plattform'
},
common: {
loading: 'Laddar...',
error: 'Fel',
success: 'Framgång',
cancel: 'Avbryt',
save: 'Spara',
delete: 'Ta bort',
edit: 'Redigera',
add: 'Lägg till',
search: 'Sök',
filter: 'Filtrera',
refresh: 'Uppdatera',
previous: 'Föregående',
next: 'Nästa',
active: 'Aktiv',
inactive: 'Inaktiv',
showingResults: 'Visar {{start}} till {{end}} av {{total}} resultat',
yes: 'Ja',
no: 'Nej',
ok: 'OK',
close: 'Stäng'
},
auth: {
login: 'Logga in',
username: 'Användarnamn',
password: 'Lösenord',
loginButton: 'Logga in',
logout: 'Logga ut'
}
}
};
let currentLanguage = localStorage.getItem('language') || 'en';
export const t = (key, params = {}) => {
const keys = key.split('.');
let value = translations[currentLanguage];
for (const k of keys) {
value = value?.[k];
}
let result = value || key;
// Simple parameter interpolation
if (params && typeof params === 'object') {
Object.keys(params).forEach(param => {
const placeholder = `{{${param}}}`;
result = result.replace(new RegExp(placeholder, 'g'), params[param]);
});
}
return result;
};
export const changeLanguage = (lang) => {
currentLanguage = lang;
localStorage.setItem('language', lang);
// Trigger a page refresh to update all components
window.location.reload();
};
export const getCurrentLanguage = () => currentLanguage;