mailcow/data/web/templates/admin/tab-config-admins.twig

<div role="tabpanel" class="tab-pane fade show active" id="tab-config-admins" role="tabpanel" aria-labelledby="tab-config-admins">
    <div class="card bg-danger text-white">
      <div class="card-header">{{ lang.admin.admin_details }}</div>
      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-striped table-condensed" id="adminstable"></table>
        </div>
        <div class="mass-actions-admin">
          <div class="btn-group">
            <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary" id="toggle_multi_select_all" data-id="admins" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
            <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
            <div class="clearfix visible-xs"></div>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" data-action="edit_selected" data-id="admins" data-api-url='edit/admin' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
              <li><a class="dropdown-item" data-action="edit_selected" data-id="admins" data-api-url='edit/admin' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
              <li><hr class="dropdown-divider"></li>
              <li><a class="dropdown-item" data-action="edit_selected" data-id="admins" data-api-url='edit/admin' data-api-attr='{"disable_tfa":"1"}' href="#">{{ lang.tfa.disable_tfa }}</a></li>
              <li><hr class="dropdown-divider"></li>
              <li><a class="dropdown-item" data-action="delete_selected" data-id="admins" data-api-url='delete/admin' href="#">{{ lang.mailbox.remove }}</a></li>
            </ul>
            <a class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-id="add_admin" data-bs-toggle="modal" data-bs-target="#addAdminModal" href="#"><i class="bi bi-person-plus-fill"></i> {{ lang.admin.add_admin }}</a>
          </div>
        </div>

        {# TFA #}
        <legend style="margin-top:20px">
          {{ lang.tfa.tfa }}
        </legend>
        <hr />
        <div class="row">
          <div class="col-sm-3 col-xs-5 text-end">{{ lang.tfa.tfa }}:</div>
          <div class="col-sm-9 col-xs-7">
            <p id="tfa_pretty">{{ tfa_data.pretty }}</p>
            {% include 'tfa_keys.twig' %}
            <br>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-3 col-xs-5 text-end">{{ lang.tfa.set_tfa }}:</div>
          <div class="col-sm-9 col-xs-7">
            <select data-style="btn btn-sm dropdown-toggle bs-placeholder btn-secondary" data-width="fit" id="selectTFA" class="selectpicker" title="{{ lang.tfa.select }}">
              <option value="yubi_otp">{{ lang.tfa.yubi_otp }}</option>
              <option value="webauthn">{{ lang.tfa.webauthn }}</option>
              <option value="totp">{{ lang.tfa.totp }}</option>
              <option value="none">{{ lang.tfa.none }}</option>
            </select>
          </div>
        </div>

        {# FIDO2 #}
        <legend style="margin-top:20px">
          <i class="bi bi-shield-fill-check"></i>
          {{ lang.fido2.fido2_auth }}</legend><hr />
        <div class="row">
          <div class="col-sm-3 col-xs-12 text-sm-end text-start space20">{{ lang.fido2.known_ids }}:</div>
          <div class="col-sm-9 col-xs-12">
            <div class="table-responsive">
              <table class="table table-striped table-hover table-condensed" id="fido2_keys">
                <tr>
                  <th>ID</th>
                  <th style="min-width:240px;text-align: right">{{ lang.admin.action }}</th>
                </tr>
                {% include 'fido2.twig' %}
              </table>
            </div>
          </div>
          <br>
        </div>

        <div class="row">
          <div class="col-sm-offset-3 col-sm-9">
            <div class="btn-group nowrap mass-actions-admin">
              <button class="btn btn-sm btn-primary visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline" id="register-fido2">{{ lang.fido2.set_fido2 }}</button>
              <button type="button" class="btn btn-sm btn-xs-lg btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#" id="register-fido2-touchid"><i class="bi bi-apple"></i> {{ lang.fido2.set_fido2_touchid }}</a></li>
              </ul>
            </div>
          </div>
        </div>
        <br>
        <div class="row" id="status-fido2">
          <div class="col-sm-3 col-xs-5 text-end">{{ lang.fido2.register_status }}:</div>
          <div class="col-sm-9 col-xs-7">
            <div id="fido2-alerts">-</div>
          </div>
          <br>
        </div>

        <legend style="cursor:pointer;margin-top:40px" data-bs-target="#license" unselectable="on" data-bs-toggle="collapse">
          <i style="font-size:10pt;" class="bi bi-plus-square"></i> {{ lang.admin.guid_and_license }}
        </legend>
        <hr />
        <div id="license" class="collapse">
          <form class="form-horizontal" autocapitalize="none" autocorrect="off" role="form" method="post">
            <div class="form-group">
              <label class="control-label col-sm-3" for="guid">{{ lang.admin.guid }}:</label>
              <div class="col-sm-9">
                <div class="input-group">
                  <span class="input-group-text">
                    <i class="bi bi-suit-heart{% if gal.valid == true %}-fill text-danger{% endif %}"></i>
                  </span>
                  <input type="text" id="guid" class="form-control" value="{{ license_guid }}" readonly>
                </div>
                <p class="text-muted">
                  {{ lang.admin.customer_id }}: {{ gal.c|default('?')|raw }} -
                  {{ lang.admin.service_id }}: {{ gal.s|default('?')|raw }} -
                  {{ lang.admin.sal_level }}: {{ gal.m|default('?')|raw }}
                </p>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-offset-3 col-sm-9">
                <p class="text-muted">{{ lang.admin.license_info|raw }}</p>
                <div class="btn-group">
                  <button class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" name="license_validate_now" type="submit" href="#">{{ lang.admin.validate_license_now }}</button>
                </div>
              </div>
            </div>
          </form>
        </div>

        <legend style="cursor:pointer;" data-bs-target="#admin_api" unselectable="on" data-bs-toggle="collapse">
          <i style="font-size:10pt;" class="bi bi-plus-square"></i> API
        </legend>
        <hr />
        <div id="admin_api" class="collapse">
          <div class="row">
            <div class="col-lg-12">
              <p class="text-muted">{{ lang.admin.api_info|raw }}</p>
            </div>
            <div class="col-lg-6">
              <div class="card">
                <div class="card-header">
                  <h4 class="card-title"><i class="bi bi-file-earmark-arrow-down"></i> {{ lang.admin.api_read_only }}</h4>
                </div>
                <div class="card-body">
                  <form class="form-horizontal" autocapitalize="none" autocorrect="off" role="form" method="post">
                    <div class="form-group">
                      <label class="control-label col-sm-3" for="allow_from_ro">{{ lang.admin.api_allow_from }}:</label>
                      <div class="col-sm-9">
                        <textarea class="form-control textarea-code" rows="7" name="allow_from" id="allow_from_ro" {% if api.ro.skip_ip_check %}disabled{% endif %} required>{{ api.ro.allow_from }}</textarea>
                      </div>
                    </div>
                    <div class="form-group">
                      <div class="col-sm-offset-3 col-sm-9">
                        <label>
                          <input type="checkbox" name="skip_ip_check" id="skip_ip_check_ro" {% if api.ro.skip_ip_check %}checked{% endif %}> {{ lang.admin.api_skip_ip_check }}
                        </label>
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="control-label col-sm-3">{{ lang.admin.api_key }}:</label>
                      <div class="col-sm-9">
                        <pre>{{ api.ro.api_key|default('-') }}</pre>
                      </div>
                    </div>
                    <div class="form-group">
                      <div class="col-sm-offset-3 col-sm-9">
                        <label>
                          <input type="checkbox" name="active" {% if api.ro.active %}checked{% endif %}> {{ lang.admin.activate_api }}
                        </label>
                      </div>
                    </div>
                    <div class="form-group">
                      <div class="col-sm-offset-3 col-sm-9">
                        <div class="btn-group">
                          <button class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" name="admin_api[ro]" type="submit" href="#"><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
                          <button class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary admin-ays-dialog" name="admin_api_regen_key[ro]" type="submit" href="#" {% if not api.ro.api_key %}disabled{% endif %}>{{ lang.admin.regen_api_key }}</button>
                        </div>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
            <div class="col-lg-6">
              <div class="card">
                <div class="card-header">
                  <h4 class="card-title"><i class="bi bi-file-earmark-diff"></i> {{ lang.admin.api_read_write }}</h4>
                </div>
                <div class="card-body">
                  <form class="form-horizontal" autocapitalize="none" autocorrect="off" role="form" method="post">
                    <div class="form-group">
                      <label class="control-label col-sm-3" for="allow_from_rw">{{ lang.admin.api_allow_from }}:</label>
                      <div class="col-sm-9">
                        <textarea class="form-control textarea-code" rows="7" name="allow_from" id="allow_from_rw" {% if api.rw.skip_ip_check %}disabled{% endif %} required>{{ api.rw.allow_from }}</textarea>
                      </div>
                    </div>
                    <div class="form-group">
                      <div class="col-sm-offset-3 col-sm-9">
                        <label>
                          <input type="checkbox" name="skip_ip_check" id="skip_ip_check_rw" {% if api.rw.skip_ip_check %}checked{% endif %}> {{ lang.admin.api_skip_ip_check }}
                        </label>
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="control-label col-sm-3" for="admin_api_key">{{ lang.admin.api_key }}:</label>
                      <div class="col-sm-9">
                        <pre>{{ api.rw.api_key|default('-') }}</pre>
                      </div>
                    </div>
                    <div class="form-group">
                      <div class="col-sm-offset-3 col-sm-9">
                        <label>
                          <input type="checkbox" name="active" {% if api.rw.active %}checked{% endif %}> {{ lang.admin.activate_api }}
                        </label>
                      </div>
                    </div>
                    <div class="form-group">
                      <div class="col-sm-offset-3 col-sm-9">
                        <div class="btn-group">
                          <button class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" name="admin_api[rw]" type="submit" href="#"><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
                          <button class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary admin-ays-dialog" name="admin_api_regen_key[rw]" type="submit" {% if not api.rw.api_key %}disabled{% endif %} href="#">{{ lang.admin.regen_api_key }}</button>
                        </div>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  <div class="card">
    <div class="card-header">{{ lang.admin.domain_admins }}</div>
    <div class="card-body">
      <div class="table-responsive">
        <table class="table table-striped table-condensed" id="domainadminstable"></table>
      </div>
      <div class="mass-actions-admin">
        <div class="btn-group">
          <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary" id="toggle_multi_select_all" data-id="domain_admins" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
          <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" data-action="edit_selected" data-id="domain_admins" data-api-url='edit/domain-admin' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
            <li><a class="dropdown-item" data-action="edit_selected" data-id="domain_admins" data-api-url='edit/domain-admin' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" data-action="edit_selected" data-id="domain_admins" data-api-url='edit/domain-admin' data-api-attr='{"disable_tfa":"1"}' href="#">{{ lang.tfa.disable_tfa }}</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" data-action="delete_selected" data-id="domain_admins" data-api-url='delete/domain-admin' href="#">{{ lang.mailbox.remove }}</a></li>
          </ul>
          <div class="clearfix visible-xs"></div>
          <a class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-id="add_domain_admin" data-bs-toggle="modal" data-bs-target="#addDomainAdminModal" href="#"><i class="bi bi-person-plus-fill"></i> {{ lang.admin.add_domain_admin }}</a>
        </div>
      </div>
    </div>
  </div>
</div>