template/add_server/addServer.html - main - addspin/tlss

template/add_server/addServer.html
132 строки6 KB
addspin
update: add key langht, lang fix
28 окт 2025, 15:31
28 окт 2025, 15:3107e4515
{{template "header-tpl" .}}
<!-- {{template "menu-tpl" .}} -->
{{template "body-tpl" .}}

<!-- <div class="containers"> -->
  <div class="container-fluid">
    <div class="row">
      <!-- Левое меню -->
    <div class="left-menu-core">
      {{template "menu-left-tpl" .}}
    </div>
    <!-- Блок формы добавления сервера -->
    <div class="col p-1">
      <div class="row"> 
    <div class="col-2"></div>
      <div class="col-7">
        <div><ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="#">Overview</a></li>  
          <li class="breadcrumb-item"><a href="#"  hx-get="/add_server_entity" 
            hx-target="#body" 
            hx-swap="innerHTML transition:true" 
            hx-push-url="true">Add entities</a></li>
          <li class="breadcrumb-item active" aria-current="page">Add servers</li>
          <li class="breadcrumb-item"><a href="#"  hx-get="/add_certs" 
            hx-target="#body" 
            hx-swap="innerHTML transition:true" 
            hx-push-url="true">Add servers certs</a></li>
          <li class="breadcrumb-item"><a href="#"  hx-get="/revoke_certs" 
            hx-target="#body" 
            hx-swap="innerHTML transition:true" 
            hx-push-url="true">Revoke servers certs</a></li>
        </ol></div>
        
      <div class="core-servers">
      <form class="" id="add-server-form"
        hx-post="/add_server" 
        hx-swap="none"
        hx-ext="json-enc-custom" 
        parse-types="true"
        hx-on::after-request="
          if (event.detail.xhr.responseText) {
            try {
              const response = JSON.parse(event.detail.xhr.responseText);
              if (response.status === 'error') {
                Swal.fire({
                  showClass: { popup: 'animate__animated animate__fadeInUp animate__fast' },
                  hideClass: { popup: 'animate__animated animate__fadeOutDown animate__fast' },
                  customClass: 'custom-alert',
                  icon: 'error',
                  title: 'Error',
                  text: response.message,
                });
              } else if (response.status === 'success') {
                Swal.fire({
                  showClass: { popup: 'animate__animated animate__fadeInUp animate__fast' },
                  hideClass: { popup: 'animate__animated animate__fadeOutDown animate__fast' },
                  customClass: 'custom-alert',
                  icon: 'success',
                  title: 'Success',
                  text: response.message,
                }).then(() => {
                  // Обновляем список серверов
                  htmx.ajax('GET', '/server_list', {
                    target: '#response', 
                    swap: 'innerHTML'
                  });
                  
                  // Сбрасываем форму
                  document.getElementById('add-server-form').reset();
                  // Сбрасываем select в серое состояние
                  const selectEl = document.getElementById('select-ssh-key');
                  if (selectEl) {
                    selectEl.value = '';
                    selectEl.setAttribute('data-placeholder', 'true');
                  }
                });
              }
            } catch (e) {}
          }
        ">
        <label id= "" class="form_lable" >Connect new server</label>
        <div class="input_border color-form-servers">
          <div class="row g-3 form_center">
            <div class="col-md-4">
                <input type="text" class="c_input" id="username" name="username" placeholder="User" required>
            </div>
            <div class="col-md-4 ">
              <input type="text" class="c_input " id="hostname" name="hostname" placeholder="Hostname or ip" required>
            </div>
            <div class="col-md-4">
              <input type="password" class="c_input" id="password" name="password" placeholder="Password" data-string="true">
            </div>
            <div class="col-md-4">
              <input type="text" class="c_input " id="tlssSSHport" name="tlssSSHport" placeholder="SSH port" required>
            </div>
            <div class="col-md-4">
              <input type="text" class="c_input" id="path" name="path" placeholder="Path certs" required>
            </div>
            <div class="col-md-4">
                    <select data-placeholder="true" id="select-ssh-key" name="sshKey" class="select">  
                      <option value="" disabled selected hidden>Select SSH key</option>
                      {{ range .sshKeyList }}
                      <option value="{{ .NameSSHKey }}">{{ .NameSSHKey }}</option>
                      {{ end }}
                    </select>
            </div>
            <!-- <div>Создайте пользователя на сервере и используйте его логин и пароль для подключения</div> -->
            <div class="col-12">
              <button type="submit" class="btn-custom btn-custom-servers mt-2">Add server</button>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
  <div class="row mt-2">
    <div class="col-12">
      <div id="search-servers" class="search-input-container">
        <input type="text" class="search-input" name="search-servers" placeholder="Search servers">
      </div>
      <div id="response" class="servers_table">
        {{template "serverList-tpl" .}}
      </div>
    </div>
  </div>

<!-- index end template -->
{{template "footer-tpl" .}}
<!-- </div>
</body>
</html> -->