mirror of https://github.com/veypi/OneAuth.git
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
166 lines
4.7 KiB
HTML
166 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="description" content="Org Detail">
|
|
<title>{{ $t('org.detail') }}</title>
|
|
<style>
|
|
.page-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
.section {
|
|
background: #fff;
|
|
padding: 20px;
|
|
border-radius: var(--radius-md);
|
|
box-shadow: var(--shadow-sm);
|
|
margin-bottom: 20px;
|
|
}
|
|
.section-title {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
margin-bottom: 15px;
|
|
color: var(--text-color);
|
|
}
|
|
.info-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
.info-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
}
|
|
.info-label {
|
|
font-size: 14px;
|
|
color: var(--text-color-secondary);
|
|
}
|
|
.info-value {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
}
|
|
.btn-danger {
|
|
background-color: var(--color-danger);
|
|
color: white;
|
|
padding: 8px 16px;
|
|
border-radius: var(--radius-md);
|
|
cursor: pointer;
|
|
border: none;
|
|
}
|
|
.btn-edit {
|
|
background-color: var(--color-info);
|
|
color: white;
|
|
padding: 8px 16px;
|
|
border-radius: var(--radius-md);
|
|
cursor: pointer;
|
|
border: none;
|
|
}
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
th, td {
|
|
text-align: left;
|
|
padding: 10px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
th {
|
|
background-color: var(--bg-color-tertiary);
|
|
font-weight: 600;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page-header">
|
|
<h1>{{ org ? org.name : 'Loading...' }}</h1>
|
|
<div class="actions">
|
|
<button class="btn-edit" @click="editOrg">{{ $t('common.edit') }}</button>
|
|
<button class="btn-danger" @click="deleteOrg">{{ $t('common.delete') }}</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<div class="section-title">{{ $t('org.info') }}</div>
|
|
<div class="info-grid" v-if="org">
|
|
<div class="info-item">
|
|
<span class="info-label">ID</span>
|
|
<span class="info-value">{{ org.id }}</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">Name</span>
|
|
<span class="info-value">{{ org.name }}</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">Created At</span>
|
|
<span class="info-value">{{ new Date(org.created_at).toLocaleDateString() }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<div class="section-title">{{ $t('org.members') }}</div>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Username</th>
|
|
<th>Role</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="member in members">
|
|
<td>{{ member.username }}</td>
|
|
<td>{{ member.role }}</td>
|
|
<td>
|
|
<button class="btn-sm btn-danger" @click="removeMember(member.id)">Remove</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</body>
|
|
<script setup>
|
|
orgId = $router.params.id;
|
|
org = null;
|
|
members = [];
|
|
|
|
loadData = async () => {
|
|
try {
|
|
const [orgRes, membersRes] = await Promise.all([
|
|
$axios.get(`/api/orgs/${orgId}`),
|
|
$axios.get(`/api/orgs/${orgId}/members`)
|
|
]);
|
|
org = orgRes;
|
|
members = membersRes || [];
|
|
} catch (e) {
|
|
$message.error(e.message);
|
|
}
|
|
};
|
|
|
|
editOrg = () => {
|
|
$message.info("Edit feature coming soon");
|
|
};
|
|
|
|
deleteOrg = async () => {
|
|
try {
|
|
await $message.confirm("Are you sure you want to delete this organization?");
|
|
await $axios.delete(`/api/orgs/${orgId}`);
|
|
$message.success("Deleted");
|
|
$router.push('/org');
|
|
} catch (e) {
|
|
// Cancelled or error
|
|
}
|
|
};
|
|
|
|
removeMember = async (userId) => {
|
|
// Implement remove logic
|
|
$message.info("Remove member feature coming soon");
|
|
};
|
|
</script>
|
|
<script>
|
|
$data.loadData();
|
|
</script>
|
|
</html>
|