go.chromium.org/luci@v0.0.0-20240309015107-7cdc2e660f33/auth_service/services/frontend/templates/pages/groups.html (about)

     1  {{define "title"}}CrIA v2{{end}}
     2  
     3  {{define "content"}}
     4  
     5  <style>
     6  :not(.active).list-group-item.read-only-group,
     7  :not(.active).list-group-item.read-only-group:hover {
     8    background-color: #eeeeee;
     9  }
    10  
    11  /* Vertically align icon */
    12  .list-item-icon {
    13    position: absolute;
    14    right: 10px;
    15    min-height: 30px;
    16    line-height: 30px;
    17    top: 50%;
    18    margin-top: -15px;
    19  }
    20  </style>
    21  
    22  <script type="text/javascript" src="/static/js/groups.js"></script>
    23  
    24  <template id="group-scroller-row-template">
    25    <li class="list-group-item">
    26      <p class="fw-bold fs-6 mb-0">
    27      </p>
    28      <small class="mb-0">
    29      </small>
    30    </li>
    31  </template>
    32  
    33  <template id="new-group-form-template">
    34    <div class="row mx-0 my-2">
    35      <div class="col m-0 pt-1 border rounded" style="background-color: #f5f5f5;">
    36        <h5 class="d-flex">
    37          <a class="p-1 text-decoration-none flex-grow-1 bd-highlight" id="group-heading" style="color: #333">Create new group</a>
    38        </h5>
    39      </div>
    40    </div>
    41    <form id="group-form" class="m-2">
    42      <div class="row mb-3">
    43        <label for="group-name-box" class="col-2 col-form-label">Group Name</label>
    44        <div class="col">
    45          <input class="form-control groupName required" rows="1" id="group-name-box" placeholder="required"></input>
    46          <span class="error" aria-live="polite"></span>
    47        </div>
    48      </div>
    49      <div class="row mb-3">
    50        <label for="description-box" class="col-2 col-form-label">Description</label>
    51        <div class="col">
    52          <textarea class="form-control required" rows="3" id="description-box" placeholder="required"></textarea>
    53          <span class="error" aria-live="polite"></span>
    54        </div>
    55      </div>
    56      <div class="row">
    57        <label for="owners-box" class="col-2 col-form-label">Owners</label>
    58        <div class="col">
    59          <textarea class="form-control groupNameOrEmpty" rows="1" id="owners-box"></textarea>
    60          <span class="error" aria-live="polite"></span>
    61        </div>
    62      </div>
    63      <hr>
    64      <div class="row mb-3">
    65        <label for="membersAndGlobs" class="col-2 col-form-label">Members</label>
    66        <div class="col">
    67          <textarea class="form-control membersAndGlobsList" rows="12" id="membersAndGlobs"></textarea>
    68          <span class="error" aria-live="polite"></span>
    69        </div>
    70      </div>
    71      <div class="row">
    72        <label for="nested" class="col-2 col-form-label">Subgroups</label>
    73        <div class="col">
    74          <textarea class="form-control groupList" rows="5" id="nested"></textarea>
    75          <span class="error" aria-live="polite"></span>
    76        </div>
    77      </div>
    78      <hr>
    79      <button type="submit" class="btn btn-primary">Create group</button>
    80    </form>
    81  </template>
    82  
    83  <template id="edit-group-form-template">
    84    <div class="row mx-0 my-2">
    85      <div class="col m-0 pt-1 border rounded" style="background-color: #f5f5f5;">
    86        <h5 class="d-flex">
    87          <a class="p-1 text-decoration-none flex-grow-1 bd-highlight" id="group-heading" style="color: #333">group name</a>
    88          <a class="p-1" href="#">
    89            <i class="bi bi-list-ul" style="font-size: 16px; color: #333"></i>
    90          </a>
    91          <a class="p-1" href="#">
    92            <i class="bi bi-search" style="font-size: 16px; color: #333"></i>
    93          </a>
    94          <a class="p-1" href="#">
    95            <i class="bi bi-calendar3" style="font-size: 16px; color: #333"></i>
    96          </a>
    97        </h5>
    98      </div>
    99    </div>
   100    <form id="group-form" class="m-2">
   101      <div class="row mb-3">
   102        <label for="description-box" class="col-2 col-form-label">Description</label>
   103        <div class="col">
   104          <textarea class="form-control required" rows="3" id="description-box"></textarea>
   105          <span class="error" aria-live="polite"></span>
   106        </div>
   107      </div>
   108      <div class="row">
   109        <label for="owners-box" class="col-2 col-form-label">Owners</label>
   110        <div class="col">
   111          <textarea class="form-control groupNameOrEmpty" rows="1" id="owners-box"></textarea>
   112          <span class="error" aria-live="polite"></span>
   113        </div>
   114      </div>
   115      <hr>
   116      <div class="row mb-3 external-group-info">
   117        <label for="membersAndGlobs" class="col-2 col-form-label">Members</label>
   118        <div class="col">
   119          <textarea class="form-control membersAndGlobsList" rows="12" id="membersAndGlobs"></textarea>
   120          <span class="error" aria-live="polite"></span>
   121        </div>
   122      </div>
   123      <div class="row">
   124        <label for="nested" class="col-2 col-form-label">Subgroups</label>
   125        <div class="col">
   126          <textarea class="form-control groupList" rows="5" id="nested"></textarea>
   127          <span class="error" aria-live="polite"></span>
   128        </div>
   129      </div>
   130      <hr>
   131      <button id="edit-btn" type="submit" class="btn btn-primary">Update group</button>
   132      <button id="delete-btn" type="button" class="btn btn-danger">Delete group</button>
   133    </form>
   134  </template>
   135  
   136  <div class="row">
   137    <div class="col-4 my-2 border rounded">
   138      <div class="row mt-2">
   139        <div class="input-group">
   140          <input id="search-box" class="form-control" type="search" placeholder="Search" aria-label="Search">
   141          <button id="search-group-btn" type="button" class="btn btn-outline-secondary">
   142            <i class="bi bi-search" style="font-size: 16px; color: #333"></i>
   143          </button>
   144        </div>
   145      </div>
   146      <div class="row justify-content-between align-items-center">
   147        <div class="col-auto my-2">
   148          <div class="form-check sm-6">
   149            <input class="form-check-input" type="checkbox" value="" id="external-check">
   150            <label class="form-check-label" for="external-check">
   151              Show external groups
   152            </label>
   153          </div>
   154        </div>
   155        {{if .IsAdmin}}
   156        <div class="col-auto my-2">
   157          <button type="button" class="btn btn-outline-primary" id="create-group-btn">Create</button>
   158        </div>
   159        {{end}}
   160      </div>
   161      <div class="row">
   162        <ul class="navbar-nav-scroll px-1" style="--bs-scroll-height: 704px;" id="group-chooser">
   163          <!-- Load group-scroller-row template. -->
   164        </ul>
   165      </div>
   166    </div>
   167    <div class="col my-2 ms-2 border rounded" id="group-content">
   168      <!-- Load group-form template here -->
   169    </div>
   170  </div>
   171  
   172  {{end}}