87 lines
3.2 KiB
TypeScript
87 lines
3.2 KiB
TypeScript
export const ScopeModal = ({ apps = [] }: { apps?: any[] }) => {
|
|
return (
|
|
<div
|
|
id="editScopesModal"
|
|
style="display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); z-index: 9999; justify-content: center; align-items: center;"
|
|
>
|
|
<div style="background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); width: 90%; max-width: 500px; padding: 1.5rem; box-shadow: var(--shadow-lg);">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
|
|
<h3 style="margin: 0; font-size: 1.1rem; color: var(--text-primary);">
|
|
Update Scopes for:{" "}
|
|
<span id="editScopesLabel" style="color: var(--primary);"></span>
|
|
</h3>
|
|
<button
|
|
type="button"
|
|
onclick="closeEditScopesModal()"
|
|
style="background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--text-muted);"
|
|
>
|
|
×
|
|
</button>
|
|
</div>
|
|
|
|
<input type="hidden" id="editScopesSessionId" value="" />
|
|
|
|
<div style="display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.25rem;">
|
|
<label style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-primary); cursor: pointer;">
|
|
<input
|
|
type="checkbox"
|
|
id="scope_read_audit"
|
|
class="edit-scope-chk"
|
|
value="read:audit"
|
|
/>
|
|
Read Audit Ledger
|
|
</label>
|
|
<label style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-primary); cursor: pointer;">
|
|
<input
|
|
type="checkbox"
|
|
id="scope_read_users"
|
|
class="edit-scope-chk"
|
|
value="read:users"
|
|
/>
|
|
Read Users List
|
|
</label>
|
|
<label style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-primary); cursor: pointer;">
|
|
<input
|
|
type="checkbox"
|
|
id="scope_read_apps"
|
|
class="edit-scope-chk"
|
|
value="read:apps"
|
|
/>
|
|
Read Apps Registry
|
|
</label>
|
|
{apps.map((app) => (
|
|
<label
|
|
key={app.id}
|
|
style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-primary); cursor: pointer;"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
class="edit-scope-chk"
|
|
value={`app:${app.name}`}
|
|
/>
|
|
Access {app.name}
|
|
</label>
|
|
))}
|
|
</div>
|
|
|
|
<div style="display: flex; justify-content: flex-end; gap: 0.5rem;">
|
|
<button
|
|
type="button"
|
|
class="btn-outline"
|
|
onclick="closeEditScopesModal()"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="btn-primary"
|
|
onclick="saveUpdatedScopes()"
|
|
>
|
|
Save Scopes
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|