generated from corrad-software/corrad-af-2024
997 lines
34 KiB
Vue
997 lines
34 KiB
Vue
<script setup>
|
|
import { ref, computed, onMounted } from 'vue';
|
|
|
|
const props = defineProps({
|
|
provider: {
|
|
type: String,
|
|
default: 'ldap' // ldap, oauth2, saml, oidc
|
|
},
|
|
autoSync: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
});
|
|
|
|
const emit = defineEmits([
|
|
'user-authenticated',
|
|
'permission-updated',
|
|
'sync-complete',
|
|
'error'
|
|
]);
|
|
|
|
// Local state
|
|
const isConnected = ref(false);
|
|
const isConnecting = ref(false);
|
|
const isSyncing = ref(false);
|
|
const lastSyncTime = ref(null);
|
|
const connectionStatus = ref('disconnected');
|
|
const externalUsers = ref([]);
|
|
const externalRoles = ref([]);
|
|
const externalGroups = ref([]);
|
|
const mappedPermissions = ref([]);
|
|
const syncErrors = ref([]);
|
|
|
|
// Configuration for different providers
|
|
const providerConfigs = {
|
|
ldap: {
|
|
name: 'LDAP/Active Directory',
|
|
icon: 'mdi:server-network',
|
|
fields: [
|
|
{ key: 'server', label: 'LDAP Server', type: 'text', required: true },
|
|
{ key: 'port', label: 'Port', type: 'number', default: 389 },
|
|
{ key: 'baseDN', label: 'Base DN', type: 'text', required: true },
|
|
{ key: 'userDN', label: 'User DN', type: 'text' },
|
|
{ key: 'bindDN', label: 'Bind DN', type: 'text' },
|
|
{ key: 'bindPassword', label: 'Bind Password', type: 'password' },
|
|
{ key: 'userFilter', label: 'User Filter', type: 'text', default: '(objectClass=user)' },
|
|
{ key: 'groupFilter', label: 'Group Filter', type: 'text', default: '(objectClass=group)' },
|
|
{ key: 'enableSSL', label: 'Enable SSL', type: 'boolean', default: false }
|
|
]
|
|
},
|
|
oauth2: {
|
|
name: 'OAuth 2.0',
|
|
icon: 'mdi:shield-account',
|
|
fields: [
|
|
{ key: 'clientId', label: 'Client ID', type: 'text', required: true },
|
|
{ key: 'clientSecret', label: 'Client Secret', type: 'password', required: true },
|
|
{ key: 'authorizationUrl', label: 'Authorization URL', type: 'url', required: true },
|
|
{ key: 'tokenUrl', label: 'Token URL', type: 'url', required: true },
|
|
{ key: 'userInfoUrl', label: 'User Info URL', type: 'url' },
|
|
{ key: 'scope', label: 'Scope', type: 'text', default: 'openid profile email' },
|
|
{ key: 'redirectUri', label: 'Redirect URI', type: 'url' }
|
|
]
|
|
},
|
|
saml: {
|
|
name: 'SAML 2.0',
|
|
icon: 'mdi:security',
|
|
fields: [
|
|
{ key: 'entityId', label: 'Entity ID', type: 'text', required: true },
|
|
{ key: 'ssoUrl', label: 'SSO URL', type: 'url', required: true },
|
|
{ key: 'sloUrl', label: 'SLO URL', type: 'url' },
|
|
{ key: 'certificate', label: 'X.509 Certificate', type: 'textarea', required: true },
|
|
{ key: 'signRequests', label: 'Sign Requests', type: 'boolean', default: true },
|
|
{ key: 'wantAssertionsSigned', label: 'Want Assertions Signed', type: 'boolean', default: true }
|
|
]
|
|
},
|
|
oidc: {
|
|
name: 'OpenID Connect',
|
|
icon: 'mdi:openid',
|
|
fields: [
|
|
{ key: 'issuerUrl', label: 'Issuer URL', type: 'url', required: true },
|
|
{ key: 'clientId', label: 'Client ID', type: 'text', required: true },
|
|
{ key: 'clientSecret', label: 'Client Secret', type: 'password', required: true },
|
|
{ key: 'scope', label: 'Scope', type: 'text', default: 'openid profile email' },
|
|
{ key: 'responseType', label: 'Response Type', type: 'select', options: ['code', 'id_token', 'token'], default: 'code' }
|
|
]
|
|
}
|
|
};
|
|
|
|
// Configuration form data
|
|
const config = ref({});
|
|
const showConfigDialog = ref(false);
|
|
const showMappingDialog = ref(false);
|
|
const showTestDialog = ref(false);
|
|
|
|
// Role mapping configuration
|
|
const roleMappings = ref([
|
|
{
|
|
externalRole: 'Domain Admins',
|
|
internalRole: 'superadmin',
|
|
permissions: ['read', 'write', 'delete', 'admin']
|
|
},
|
|
{
|
|
externalRole: 'Document Managers',
|
|
internalRole: 'admin',
|
|
permissions: ['read', 'write', 'delete']
|
|
},
|
|
{
|
|
externalRole: 'All Users',
|
|
internalRole: 'user',
|
|
permissions: ['read']
|
|
}
|
|
]);
|
|
|
|
// Group mapping configuration
|
|
const groupMappings = ref([
|
|
{
|
|
externalGroup: 'CN=Finance,OU=Departments,DC=company,DC=com',
|
|
internalDepartment: 'Finance',
|
|
defaultRole: 'user',
|
|
permissions: ['finance_access']
|
|
},
|
|
{
|
|
externalGroup: 'CN=HR,OU=Departments,DC=company,DC=com',
|
|
internalDepartment: 'HR',
|
|
defaultRole: 'user',
|
|
permissions: ['hr_access']
|
|
}
|
|
]);
|
|
|
|
// Computed properties
|
|
const currentProvider = computed(() => {
|
|
return providerConfigs[props.provider] || providerConfigs.ldap;
|
|
});
|
|
|
|
const syncStatus = computed(() => {
|
|
if (isSyncing.value) return { text: 'Syncing...', color: 'yellow' };
|
|
if (syncErrors.value.length > 0) return { text: 'Sync Errors', color: 'red' };
|
|
if (lastSyncTime.value) return { text: 'Up to date', color: 'green' };
|
|
return { text: 'Never synced', color: 'gray' };
|
|
});
|
|
|
|
// Methods
|
|
const connectToProvider = async () => {
|
|
isConnecting.value = true;
|
|
connectionStatus.value = 'connecting';
|
|
|
|
try {
|
|
// Simulate connection to external provider
|
|
await new Promise(resolve => setTimeout(resolve, 2000));
|
|
|
|
// Validate configuration
|
|
const validation = validateConfiguration();
|
|
if (!validation.isValid) {
|
|
throw new Error(`Configuration error: ${validation.errors.join(', ')}`);
|
|
}
|
|
|
|
// Test connection
|
|
const connectionTest = await testConnection();
|
|
if (!connectionTest.success) {
|
|
throw new Error(`Connection failed: ${connectionTest.error}`);
|
|
}
|
|
|
|
isConnected.value = true;
|
|
connectionStatus.value = 'connected';
|
|
|
|
// Auto-sync if enabled
|
|
if (props.autoSync) {
|
|
await syncUsers();
|
|
}
|
|
|
|
} catch (error) {
|
|
connectionStatus.value = 'error';
|
|
emit('error', { type: 'connection', message: error.message });
|
|
} finally {
|
|
isConnecting.value = false;
|
|
}
|
|
};
|
|
|
|
const disconnectFromProvider = () => {
|
|
isConnected.value = false;
|
|
connectionStatus.value = 'disconnected';
|
|
externalUsers.value = [];
|
|
externalRoles.value = [];
|
|
externalGroups.value = [];
|
|
};
|
|
|
|
const testConnection = async () => {
|
|
try {
|
|
// Simulate connection test based on provider type
|
|
switch (props.provider) {
|
|
case 'ldap':
|
|
return await testLDAPConnection();
|
|
case 'oauth2':
|
|
return await testOAuth2Connection();
|
|
case 'saml':
|
|
return await testSAMLConnection();
|
|
case 'oidc':
|
|
return await testOIDCConnection();
|
|
default:
|
|
return { success: false, error: 'Unknown provider' };
|
|
}
|
|
} catch (error) {
|
|
return { success: false, error: error.message };
|
|
}
|
|
};
|
|
|
|
const testLDAPConnection = async () => {
|
|
// Simulate LDAP connection test
|
|
await new Promise(resolve => setTimeout(resolve, 1500));
|
|
|
|
// Mock validation
|
|
if (!config.value.server || !config.value.baseDN) {
|
|
return { success: false, error: 'Server and Base DN are required' };
|
|
}
|
|
|
|
return {
|
|
success: true,
|
|
data: {
|
|
server: config.value.server,
|
|
users: 150,
|
|
groups: 25
|
|
}
|
|
};
|
|
};
|
|
|
|
const testOAuth2Connection = async () => {
|
|
// Simulate OAuth2 connection test
|
|
await new Promise(resolve => setTimeout(resolve, 1000));
|
|
|
|
if (!config.value.clientId || !config.value.clientSecret) {
|
|
return { success: false, error: 'Client ID and Secret are required' };
|
|
}
|
|
|
|
return {
|
|
success: true,
|
|
data: {
|
|
provider: 'OAuth2',
|
|
scope: config.value.scope,
|
|
authUrl: config.value.authorizationUrl
|
|
}
|
|
};
|
|
};
|
|
|
|
const testSAMLConnection = async () => {
|
|
// Simulate SAML connection test
|
|
await new Promise(resolve => setTimeout(resolve, 1200));
|
|
|
|
if (!config.value.entityId || !config.value.ssoUrl) {
|
|
return { success: false, error: 'Entity ID and SSO URL are required' };
|
|
}
|
|
|
|
return {
|
|
success: true,
|
|
data: {
|
|
entityId: config.value.entityId,
|
|
ssoUrl: config.value.ssoUrl
|
|
}
|
|
};
|
|
};
|
|
|
|
const testOIDCConnection = async () => {
|
|
// Simulate OIDC connection test
|
|
await new Promise(resolve => setTimeout(resolve, 1100));
|
|
|
|
if (!config.value.issuerUrl || !config.value.clientId) {
|
|
return { success: false, error: 'Issuer URL and Client ID are required' };
|
|
}
|
|
|
|
return {
|
|
success: true,
|
|
data: {
|
|
issuer: config.value.issuerUrl,
|
|
clientId: config.value.clientId
|
|
}
|
|
};
|
|
};
|
|
|
|
const validateConfiguration = () => {
|
|
const errors = [];
|
|
const requiredFields = currentProvider.value.fields.filter(field => field.required);
|
|
|
|
for (const field of requiredFields) {
|
|
if (!config.value[field.key]) {
|
|
errors.push(`${field.label} is required`);
|
|
}
|
|
}
|
|
|
|
return {
|
|
isValid: errors.length === 0,
|
|
errors
|
|
};
|
|
};
|
|
|
|
const syncUsers = async () => {
|
|
if (!isConnected.value) return;
|
|
|
|
isSyncing.value = true;
|
|
syncErrors.value = [];
|
|
|
|
try {
|
|
// Simulate user sync
|
|
await new Promise(resolve => setTimeout(resolve, 3000));
|
|
|
|
// Mock external users data
|
|
externalUsers.value = [
|
|
{
|
|
id: 'ext_user_1',
|
|
username: 'aiman.fakhrullah',
|
|
email: 'aiman@company.com',
|
|
fullName: 'Aiman Fakhrullah',
|
|
groups: ['Finance', 'All Users'],
|
|
roles: ['Document Managers'],
|
|
lastLogin: '2023-12-20T10:30:00Z',
|
|
status: 'active'
|
|
},
|
|
{
|
|
id: 'ext_user_2',
|
|
username: 'sarah.ahmed',
|
|
email: 'sarah@company.com',
|
|
fullName: 'Sarah Ahmed',
|
|
groups: ['HR', 'All Users'],
|
|
roles: ['All Users'],
|
|
lastLogin: '2023-12-19T15:45:00Z',
|
|
status: 'active'
|
|
}
|
|
];
|
|
|
|
// Mock external roles
|
|
externalRoles.value = [
|
|
{ name: 'Domain Admins', members: 5 },
|
|
{ name: 'Document Managers', members: 12 },
|
|
{ name: 'All Users', members: 150 }
|
|
];
|
|
|
|
// Mock external groups
|
|
externalGroups.value = [
|
|
{ name: 'Finance', dn: 'CN=Finance,OU=Departments,DC=company,DC=com', members: 25 },
|
|
{ name: 'HR', dn: 'CN=HR,OU=Departments,DC=company,DC=com', members: 18 },
|
|
{ name: 'IT', dn: 'CN=IT,OU=Departments,DC=company,DC=com', members: 15 }
|
|
];
|
|
|
|
// Apply role mappings
|
|
mapPermissions();
|
|
|
|
lastSyncTime.value = new Date().toISOString();
|
|
emit('sync-complete', {
|
|
users: externalUsers.value.length,
|
|
roles: externalRoles.value.length,
|
|
groups: externalGroups.value.length
|
|
});
|
|
|
|
} catch (error) {
|
|
syncErrors.value.push(error.message);
|
|
emit('error', { type: 'sync', message: error.message });
|
|
} finally {
|
|
isSyncing.value = false;
|
|
}
|
|
};
|
|
|
|
const mapPermissions = () => {
|
|
mappedPermissions.value = [];
|
|
|
|
// Map users to internal roles based on external roles/groups
|
|
for (const user of externalUsers.value) {
|
|
for (const roleMapping of roleMappings.value) {
|
|
if (user.roles.includes(roleMapping.externalRole)) {
|
|
mappedPermissions.value.push({
|
|
userId: user.id,
|
|
username: user.username,
|
|
externalRole: roleMapping.externalRole,
|
|
internalRole: roleMapping.internalRole,
|
|
permissions: roleMapping.permissions,
|
|
source: 'role_mapping'
|
|
});
|
|
}
|
|
}
|
|
|
|
for (const groupMapping of groupMappings.value) {
|
|
if (user.groups.some(group => group === groupMapping.externalGroup.split(',')[0].replace('CN=', ''))) {
|
|
mappedPermissions.value.push({
|
|
userId: user.id,
|
|
username: user.username,
|
|
externalGroup: groupMapping.externalGroup,
|
|
internalRole: groupMapping.defaultRole,
|
|
department: groupMapping.internalDepartment,
|
|
permissions: groupMapping.permissions,
|
|
source: 'group_mapping'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
emit('permission-updated', mappedPermissions.value);
|
|
};
|
|
|
|
const addRoleMapping = () => {
|
|
roleMappings.value.push({
|
|
externalRole: '',
|
|
internalRole: 'user',
|
|
permissions: ['read']
|
|
});
|
|
};
|
|
|
|
const removeRoleMapping = (index) => {
|
|
roleMappings.value.splice(index, 1);
|
|
};
|
|
|
|
const addGroupMapping = () => {
|
|
groupMappings.value.push({
|
|
externalGroup: '',
|
|
internalDepartment: '',
|
|
defaultRole: 'user',
|
|
permissions: []
|
|
});
|
|
};
|
|
|
|
const removeGroupMapping = (index) => {
|
|
groupMappings.value.splice(index, 1);
|
|
};
|
|
|
|
const saveConfiguration = () => {
|
|
// Save configuration to backend
|
|
console.log('Saving configuration:', config.value);
|
|
showConfigDialog.value = false;
|
|
};
|
|
|
|
const saveMappings = () => {
|
|
// Save mappings to backend
|
|
console.log('Saving mappings:', { roleMappings: roleMappings.value, groupMappings: groupMappings.value });
|
|
showMappingDialog.value = false;
|
|
|
|
// Re-map permissions with new mappings
|
|
if (isConnected.value) {
|
|
mapPermissions();
|
|
}
|
|
};
|
|
|
|
const getConnectionStatusColor = () => {
|
|
switch (connectionStatus.value) {
|
|
case 'connected': return 'green';
|
|
case 'connecting': return 'yellow';
|
|
case 'error': return 'red';
|
|
default: return 'gray';
|
|
}
|
|
};
|
|
|
|
const formatDate = (dateString) => {
|
|
return new Date(dateString).toLocaleString();
|
|
};
|
|
|
|
// Initialize configuration
|
|
onMounted(() => {
|
|
// Initialize config with default values
|
|
config.value = {};
|
|
for (const field of currentProvider.value.fields) {
|
|
if (field.default !== undefined) {
|
|
config.value[field.key] = field.default;
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="external-rbac-integration">
|
|
<!-- Header -->
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div class="flex items-center space-x-3">
|
|
<Icon :name="currentProvider.icon" class="w-8 h-8 text-blue-600" />
|
|
<div>
|
|
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">
|
|
{{ currentProvider.name }} Integration
|
|
</h2>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">
|
|
External authentication and role-based access control
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-2">
|
|
<span
|
|
class="px-3 py-1 rounded-full text-sm font-medium"
|
|
:class="`bg-${getConnectionStatusColor()}-100 text-${getConnectionStatusColor()}-800 dark:bg-${getConnectionStatusColor()}-900/20 dark:text-${getConnectionStatusColor()}-200`"
|
|
>
|
|
{{ connectionStatus.charAt(0).toUpperCase() + connectionStatus.slice(1) }}
|
|
</span>
|
|
|
|
<button
|
|
v-if="!isConnected"
|
|
@click="connectToProvider"
|
|
:disabled="isConnecting"
|
|
class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50"
|
|
>
|
|
<span v-if="isConnecting">Connecting...</span>
|
|
<span v-else>Connect</span>
|
|
</button>
|
|
|
|
<button
|
|
v-else
|
|
@click="disconnectFromProvider"
|
|
class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
|
|
>
|
|
Disconnect
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status Cards -->
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-600 p-6">
|
|
<div class="flex items-center">
|
|
<Icon name="mdi:account-group" class="w-8 h-8 text-blue-600 mr-3" />
|
|
<div>
|
|
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">External Users</p>
|
|
<p class="text-2xl font-bold text-gray-900 dark:text-gray-100">{{ externalUsers.length }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-600 p-6">
|
|
<div class="flex items-center">
|
|
<Icon name="mdi:shield-account" class="w-8 h-8 text-green-600 mr-3" />
|
|
<div>
|
|
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">External Roles</p>
|
|
<p class="text-2xl font-bold text-gray-900 dark:text-gray-100">{{ externalRoles.length }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-600 p-6">
|
|
<div class="flex items-center">
|
|
<Icon name="mdi:folder-account" class="w-8 h-8 text-purple-600 mr-3" />
|
|
<div>
|
|
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">External Groups</p>
|
|
<p class="text-2xl font-bold text-gray-900 dark:text-gray-100">{{ externalGroups.length }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-600 p-6">
|
|
<div class="flex items-center">
|
|
<Icon name="mdi:sync" class="w-8 h-8 mr-3" :class="`text-${syncStatus.color}-600`" />
|
|
<div>
|
|
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">Sync Status</p>
|
|
<p class="text-sm font-bold" :class="`text-${syncStatus.color}-600`">{{ syncStatus.text }}</p>
|
|
<p v-if="lastSyncTime" class="text-xs text-gray-500 dark:text-gray-400">
|
|
{{ formatDate(lastSyncTime) }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="flex flex-wrap gap-3 mb-8">
|
|
<button
|
|
@click="showConfigDialog = true"
|
|
class="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700"
|
|
>
|
|
<Icon name="mdi:cog" class="w-4 h-4 mr-2 inline" />
|
|
Configure
|
|
</button>
|
|
|
|
<button
|
|
@click="showMappingDialog = true"
|
|
class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700"
|
|
>
|
|
<Icon name="mdi:map" class="w-4 h-4 mr-2 inline" />
|
|
Role Mappings
|
|
</button>
|
|
|
|
<button
|
|
@click="showTestDialog = true"
|
|
class="px-4 py-2 bg-orange-600 text-white rounded hover:bg-orange-700"
|
|
>
|
|
<Icon name="mdi:test-tube" class="w-4 h-4 mr-2 inline" />
|
|
Test Connection
|
|
</button>
|
|
|
|
<button
|
|
@click="syncUsers"
|
|
:disabled="!isConnected || isSyncing"
|
|
class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 disabled:opacity-50"
|
|
>
|
|
<Icon name="mdi:sync" class="w-4 h-4 mr-2 inline" />
|
|
<span v-if="isSyncing">Syncing...</span>
|
|
<span v-else>Sync Now</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- External Users Table -->
|
|
<div v-if="externalUsers.length > 0" class="mb-8">
|
|
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">External Users</h3>
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-600 overflow-hidden">
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full divide-y divide-gray-200 dark:divide-gray-600">
|
|
<thead class="bg-gray-50 dark:bg-gray-700">
|
|
<tr>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
|
User
|
|
</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
|
Groups
|
|
</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
|
Roles
|
|
</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
|
Last Login
|
|
</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
|
Status
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-600">
|
|
<tr v-for="user in externalUsers" :key="user.id" class="hover:bg-gray-50 dark:hover:bg-gray-700">
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div>
|
|
<div class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ user.fullName }}</div>
|
|
<div class="text-sm text-gray-500 dark:text-gray-400">{{ user.email }}</div>
|
|
</div>
|
|
</td>
|
|
|
|
<td class="px-6 py-4">
|
|
<div class="flex flex-wrap gap-1">
|
|
<span
|
|
v-for="group in user.groups"
|
|
:key="group"
|
|
class="px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-200 rounded-full"
|
|
>
|
|
{{ group }}
|
|
</span>
|
|
</div>
|
|
</td>
|
|
|
|
<td class="px-6 py-4">
|
|
<div class="flex flex-wrap gap-1">
|
|
<span
|
|
v-for="role in user.roles"
|
|
:key="role"
|
|
class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-200 rounded-full"
|
|
>
|
|
{{ role }}
|
|
</span>
|
|
</div>
|
|
</td>
|
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
|
|
{{ formatDate(user.lastLogin) }}
|
|
</td>
|
|
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<span
|
|
class="px-2 py-1 text-xs font-medium rounded-full"
|
|
:class="
|
|
user.status === 'active'
|
|
? 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-200'
|
|
: 'bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-200'
|
|
"
|
|
>
|
|
{{ user.status }}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mapped Permissions -->
|
|
<div v-if="mappedPermissions.length > 0" class="mb-8">
|
|
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">Mapped Permissions</h3>
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-600 overflow-hidden">
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full divide-y divide-gray-200 dark:divide-gray-600">
|
|
<thead class="bg-gray-50 dark:bg-gray-700">
|
|
<tr>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
|
User
|
|
</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
|
Source
|
|
</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
|
Internal Role
|
|
</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
|
Permissions
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-600">
|
|
<tr v-for="permission in mappedPermissions" :key="`${permission.userId}-${permission.source}`" class="hover:bg-gray-50 dark:hover:bg-gray-700">
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">
|
|
{{ permission.username }}
|
|
</td>
|
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
|
|
{{ permission.externalRole || permission.externalGroup || 'Unknown' }}
|
|
</td>
|
|
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<span class="px-2 py-1 text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900/20 dark:text-purple-200 rounded-full">
|
|
{{ permission.internalRole }}
|
|
</span>
|
|
</td>
|
|
|
|
<td class="px-6 py-4">
|
|
<div class="flex flex-wrap gap-1">
|
|
<span
|
|
v-for="perm in permission.permissions"
|
|
:key="perm"
|
|
class="px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-200 rounded-full"
|
|
>
|
|
{{ perm }}
|
|
</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Configuration Dialog -->
|
|
<rs-modal :visible="showConfigDialog" @close="showConfigDialog = false" size="2xl">
|
|
<template #header>
|
|
<h3 class="text-lg font-semibold">{{ currentProvider.name }} Configuration</h3>
|
|
</template>
|
|
|
|
<template #body>
|
|
<div class="space-y-4">
|
|
<div
|
|
v-for="field in currentProvider.fields"
|
|
:key="field.key"
|
|
class="grid grid-cols-1 gap-2"
|
|
>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
{{ field.label }}
|
|
<span v-if="field.required" class="text-red-500">*</span>
|
|
</label>
|
|
|
|
<input
|
|
v-if="field.type === 'text' || field.type === 'url'"
|
|
v-model="config[field.key]"
|
|
:type="field.type"
|
|
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700"
|
|
/>
|
|
|
|
<input
|
|
v-else-if="field.type === 'number'"
|
|
v-model="config[field.key]"
|
|
type="number"
|
|
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700"
|
|
/>
|
|
|
|
<input
|
|
v-else-if="field.type === 'password'"
|
|
v-model="config[field.key]"
|
|
type="password"
|
|
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700"
|
|
/>
|
|
|
|
<textarea
|
|
v-else-if="field.type === 'textarea'"
|
|
v-model="config[field.key]"
|
|
rows="4"
|
|
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700"
|
|
></textarea>
|
|
|
|
<select
|
|
v-else-if="field.type === 'select'"
|
|
v-model="config[field.key]"
|
|
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700"
|
|
>
|
|
<option v-for="option in field.options" :key="option" :value="option">
|
|
{{ option }}
|
|
</option>
|
|
</select>
|
|
|
|
<label
|
|
v-else-if="field.type === 'boolean'"
|
|
class="flex items-center"
|
|
>
|
|
<input
|
|
v-model="config[field.key]"
|
|
type="checkbox"
|
|
class="mr-2"
|
|
/>
|
|
{{ field.label }}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template #footer>
|
|
<div class="flex justify-end space-x-2">
|
|
<button
|
|
@click="showConfigDialog = false"
|
|
class="px-4 py-2 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700"
|
|
>
|
|
Cancel
|
|
</button>
|
|
|
|
<button
|
|
@click="saveConfiguration"
|
|
class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
|
|
>
|
|
Save Configuration
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</rs-modal>
|
|
|
|
<!-- Role Mapping Dialog -->
|
|
<rs-modal :visible="showMappingDialog" @close="showMappingDialog = false" size="4xl">
|
|
<template #header>
|
|
<h3 class="text-lg font-semibold">Role & Group Mappings</h3>
|
|
</template>
|
|
|
|
<template #body>
|
|
<div class="space-y-8">
|
|
<!-- Role Mappings -->
|
|
<div>
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h4 class="text-md font-medium text-gray-900 dark:text-gray-100">Role Mappings</h4>
|
|
<button
|
|
@click="addRoleMapping"
|
|
class="px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 text-sm"
|
|
>
|
|
Add Mapping
|
|
</button>
|
|
</div>
|
|
|
|
<div class="space-y-3">
|
|
<div
|
|
v-for="(mapping, index) in roleMappings"
|
|
:key="index"
|
|
class="grid grid-cols-1 md:grid-cols-4 gap-4 p-4 border border-gray-200 dark:border-gray-600 rounded-lg"
|
|
>
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
External Role
|
|
</label>
|
|
<input
|
|
v-model="mapping.externalRole"
|
|
type="text"
|
|
class="w-full px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Internal Role
|
|
</label>
|
|
<select
|
|
v-model="mapping.internalRole"
|
|
class="w-full px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700"
|
|
>
|
|
<option value="superadmin">Super Admin</option>
|
|
<option value="admin">Admin</option>
|
|
<option value="user">User</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Permissions
|
|
</label>
|
|
<input
|
|
v-model="mapping.permissions"
|
|
type="text"
|
|
placeholder="read, write, delete"
|
|
class="w-full px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex items-end">
|
|
<button
|
|
@click="removeRoleMapping(index)"
|
|
class="px-2 py-1 text-red-600 hover:text-red-800 text-sm"
|
|
>
|
|
Remove
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Group Mappings -->
|
|
<div>
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h4 class="text-md font-medium text-gray-900 dark:text-gray-100">Group Mappings</h4>
|
|
<button
|
|
@click="addGroupMapping"
|
|
class="px-3 py-1 bg-green-600 text-white rounded hover:bg-green-700 text-sm"
|
|
>
|
|
Add Mapping
|
|
</button>
|
|
</div>
|
|
|
|
<div class="space-y-3">
|
|
<div
|
|
v-for="(mapping, index) in groupMappings"
|
|
:key="index"
|
|
class="grid grid-cols-1 md:grid-cols-5 gap-4 p-4 border border-gray-200 dark:border-gray-600 rounded-lg"
|
|
>
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
External Group DN
|
|
</label>
|
|
<input
|
|
v-model="mapping.externalGroup"
|
|
type="text"
|
|
class="w-full px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Department
|
|
</label>
|
|
<input
|
|
v-model="mapping.internalDepartment"
|
|
type="text"
|
|
class="w-full px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Default Role
|
|
</label>
|
|
<select
|
|
v-model="mapping.defaultRole"
|
|
class="w-full px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700"
|
|
>
|
|
<option value="superadmin">Super Admin</option>
|
|
<option value="admin">Admin</option>
|
|
<option value="user">User</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Permissions
|
|
</label>
|
|
<input
|
|
v-model="mapping.permissions"
|
|
type="text"
|
|
placeholder="department_access"
|
|
class="w-full px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex items-end">
|
|
<button
|
|
@click="removeGroupMapping(index)"
|
|
class="px-2 py-1 text-red-600 hover:text-red-800 text-sm"
|
|
>
|
|
Remove
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template #footer>
|
|
<div class="flex justify-end space-x-2">
|
|
<button
|
|
@click="showMappingDialog = false"
|
|
class="px-4 py-2 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700"
|
|
>
|
|
Cancel
|
|
</button>
|
|
|
|
<button
|
|
@click="saveMappings"
|
|
class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700"
|
|
>
|
|
Save Mappings
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</rs-modal>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.external-rbac-integration table {
|
|
min-width: 600px;
|
|
}
|
|
</style> |