Catalyst / admin/Synapse-Cortex 14.8 GB / 57.8 GB 40.0 GB free
Help Sign in

admin / Synapse-Cortex

public

Self Hosted ITSM Tool with RBAC/Tenanting and MFA

Code Issues Pull requests Pipelines Packages Security Insights Wiki Settings
Synapse-Cortex / synapse-cortex / app / templates / admin_users.html 8425 B · main 
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
{% extends "base.html" %}
{% block title %}Users // Synapse-Cortex{% endblock %}
{% block header %}Admin // User Accounts{% endblock %}
{% block content %}
<div class="flex items-center justify-between mb-4">
  <div class="text-xs text-cortex-muted uppercase tracking-wider">Tenant Users ({{ users|length }})</div>
  <button onclick="document.getElementById('new-user-modal').classList.remove('hidden')"
          class="bg-accent-blue text-cortex-bg font-display font-bold uppercase tracking-wider text-xs px-4 py-2 rounded hover:bg-accent-blue-bright transition">
    + New User
  </button>
</div>

<div class="border border-cortex-border bg-cortex-panel rounded-md">
  <table class="w-full text-sm">
    <thead>
      <tr class="text-left text-[10px] text-cortex-muted uppercase tracking-wider border-b border-cortex-border">
        <th class="px-4 py-2">Name</th>
        <th class="px-4 py-2">Email</th>
        <th class="px-4 py-2">Role</th>
        <th class="px-4 py-2">Status</th>
        <th class="px-4 py-2">MFA</th>
        <th class="px-4 py-2"></th>
      </tr>
    </thead>
    <tbody>
      {% for u in users %}
      <tr class="border-b border-cortex-border/60 hover:bg-cortex-panel2" data-user-id="{{ u.id }}">
        <td class="px-4 py-2">
          {{ u.full_name }}
          {% if u.id == user.id %}<span class="text-[10px] text-cortex-muted">(you)</span>{% endif %}
        </td>
        <td class="px-4 py-2 text-xs text-chrome-dim">{{ u.email }}</td>
        <td class="px-4 py-2">
          <select class="role-select bg-cortex-panel2 border border-cortex-border rounded px-2 py-1 text-[10px] uppercase" {% if u.id == user.id %}disabled{% endif %}>
            {% for r in ['global_admin', 'tenant_admin', 'agent', 'requester'] %}
            <option value="{{ r }}" {% if u.role.value == r %}selected{% endif %}>{{ r.replace('_',' ') }}</option>
            {% endfor %}
          </select>
        </td>
        <td class="px-4 py-2">
          <button class="active-toggle text-[10px] px-2 py-0.5 rounded uppercase border {% if u.is_active %}bg-accent-green/15 text-accent-green border-accent-green/30{% else %}bg-cortex-panel2 text-cortex-muted border-cortex-border{% endif %}"
                  data-active="{{ u.is_active|lower }}" {% if u.id == user.id %}disabled{% endif %}>
            {{ 'active' if u.is_active else 'disabled' }}
          </button>
        </td>
        <td class="px-4 py-2">
          <button class="mfa-toggle text-[10px] px-2 py-0.5 rounded uppercase border {% if u.mfa_enabled %}bg-accent-blue/15 text-accent-blue border-accent-blue/30{% elif u.mfa_required %}bg-accent-orange/15 text-accent-orange border-accent-orange/30{% else %}bg-cortex-panel2 text-cortex-muted border-cortex-border{% endif %}"
                  data-required="{{ u.mfa_required|lower }}" title="Click to toggle 'MFA required'">
            {% if u.mfa_enabled %}enrolled{% elif u.mfa_required %}required{% else %}optional{% endif %}
          </button>
        </td>
        <td class="px-4 py-2 text-right">
          {% if u.id != user.id %}
          <button class="delete-btn text-[10px] uppercase text-accent-red hover:underline">Delete</button>
          {% endif %}
        </td>
      </tr>
      {% else %}
      <tr><td colspan="6" class="px-4 py-6 text-center text-cortex-muted text-xs">No users yet.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<div id="new-user-modal" class="hidden fixed inset-0 bg-black/70 flex items-center justify-center z-50 px-4">
  <div class="w-full max-w-md border border-cortex-border bg-cortex-panel rounded-md p-6">
    <div class="flex items-center justify-between mb-4">
      <div class="text-xs uppercase tracking-wider text-accent-blue">New User</div>
      <button onclick="document.getElementById('new-user-modal').classList.add('hidden')" class="text-cortex-muted hover:text-accent-red">&times;</button>
    </div>
    <div id="user-form-error" class="hidden mb-3 text-xs border border-accent-red/40 bg-accent-red/10 text-accent-red px-3 py-2 rounded"></div>
    <form id="user-form" class="space-y-3 text-sm">
      <div>
        <label class="block text-xs text-cortex-muted mb-1 uppercase tracking-wider">Full Name</label>
        <input required name="full_name" type="text" class="w-full bg-cortex-panel2 border border-cortex-border rounded px-3 py-2 focus:outline-none focus:border-accent-blue" />
      </div>
      <div>
        <label class="block text-xs text-cortex-muted mb-1 uppercase tracking-wider">Email</label>
        <input required name="email" type="email" class="w-full bg-cortex-panel2 border border-cortex-border rounded px-3 py-2 focus:outline-none focus:border-accent-blue" />
      </div>
      <div>
        <label class="block text-xs text-cortex-muted mb-1 uppercase tracking-wider">Password</label>
        <input required name="password" type="password" minlength="8" class="w-full bg-cortex-panel2 border border-cortex-border rounded px-3 py-2 focus:outline-none focus:border-accent-blue" />
      </div>
      <div>
        <label class="block text-xs text-cortex-muted mb-1 uppercase tracking-wider">Role</label>
        <select name="role" class="w-full bg-cortex-panel2 border border-cortex-border rounded px-3 py-2">
          <option value="requester" selected>Requester</option>
          <option value="agent">Agent</option>
          <option value="tenant_admin">Tenant Admin</option>
          {% if user.role.value == 'global_admin' %}<option value="global_admin">Global Admin</option>{% endif %}
        </select>
      </div>
      <button type="submit" class="w-full bg-accent-blue text-cortex-bg font-display font-bold uppercase tracking-wider text-xs py-2.5 rounded hover:bg-accent-blue-bright transition">
        Create User
      </button>
    </form>
  </div>
</div>

<script>
  document.getElementById('user-form').addEventListener('submit', async function (e) {
    e.preventDefault();
    const errorBox = document.getElementById('user-form-error');
    errorBox.classList.add('hidden');
    const data = Object.fromEntries(new FormData(e.target).entries());

    const res = await fetch('/api/v1/admin/users', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });

    if (res.ok) {
      window.location.reload();
    } else {
      const err = await res.json().catch(() => ({}));
      errorBox.textContent = err.detail ? JSON.stringify(err.detail) : 'Failed to create user.';
      errorBox.classList.remove('hidden');
    }
  });

  document.querySelectorAll('.role-select').forEach(function (sel) {
    sel.addEventListener('change', async function () {
      const userId = sel.closest('tr').getAttribute('data-user-id');
      await fetch('/api/v1/admin/users/' + userId, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ role: sel.value }),
      });
      window.location.reload();
    });
  });

  document.querySelectorAll('.active-toggle').forEach(function (btn) {
    btn.addEventListener('click', async function () {
      const userId = btn.closest('tr').getAttribute('data-user-id');
      const newValue = btn.getAttribute('data-active') !== 'true';
      await fetch('/api/v1/admin/users/' + userId, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ is_active: newValue }),
      });
      window.location.reload();
    });
  });

  document.querySelectorAll('.mfa-toggle').forEach(function (btn) {
    btn.addEventListener('click', async function () {
      const userId = btn.closest('tr').getAttribute('data-user-id');
      const newValue = btn.getAttribute('data-required') !== 'true';
      await fetch('/api/v1/admin/users/' + userId, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ mfa_required: newValue }),
      });
      window.location.reload();
    });
  });

  document.querySelectorAll('.delete-btn').forEach(function (btn) {
    btn.addEventListener('click', async function () {
      if (!confirm('Delete this user?')) return;
      const userId = btn.closest('tr').getAttribute('data-user-id');
      const res = await fetch('/api/v1/admin/users/' + userId, { method: 'DELETE' });
      if (res.ok) window.location.reload();
    });
  });
</script>
{% endblock %}