template/add_ssh/addSSHKey.html - main - addspin/tlss

template/add_ssh/addSSHKey.html
143 строки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="#"  hx-get="/overview" 
            hx-target="#body" 
            hx-swap="innerHTML transition:true" 
            hx-push-url="true">Overview</a></li>  
          <li class="breadcrumb-item active" aria-current="page">Add ssh keys</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"><a href="#"  hx-get="/add_server" 
            hx-target="#body" 
            hx-swap="innerHTML transition:true" 
            hx-push-url="true">Add servers</a></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-ssh-keys">
      <form class="" id="add-ssh-key-form"
        hx-post="/add_ssh_key" 
        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: 'Ошибка',
                  text: response.message,
                  confirmButtonColor: '#3085d6'
                });
              } 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: 'Успешно',
                  text: response.message,
                  confirmButtonColor: '#3085d6'
                }).then(() => {
                  // Обновляем список серверов
                  htmx.ajax('GET', '/ssh_key_list', {
                    target: '#response', 
                    swap: 'innerHTML'
                  });
                  
                  // Сбрасываем форму
                  document.getElementById('add-ssh-key-form').reset();
                  // Сбрасываем select в серое состояние
                  const selectEl = document.getElementById('select-ssh-key');
                  if (selectEl) {
                    selectEl.value = '';
                    selectEl.setAttribute('data-placeholder', 'true');
                  }
                });
              }
            } catch (e) {}
          }
        ">
        <label for="inputUser" id= "" class="form_lable" >Create ssh key</label>
        <div class="input_border color-form-servers">
          <div class="row g-3 form_center">
            <div class="col-md-4 ">
              <label class="select_title">Name key</label>
              <input type="text" class="c_input " id="nameSSHKey" name="nameSSHKey" placeholder="Name ssh key" required>
            </div>
            <div class="col-md-4">
              <label class="select_title">Algorithm</label>
                <select id="select-type" name="Algorithm" class="select">
                  <option value="RSA" selected>RSA</option>
                  <option value="ED25519">ED25519</option>
                </select>
            </div>
            <div class="col-md-4">
              <label class="select_title">Key Lenght</label>
                <!-- RSA -->
                <select id="select-key-length-rsa" class="select key-length-selector" data-algorithm="RSA" type="number">  
                  <option value="2048">2048 bits</option>
                  <option value="4096" selected>4096 bits</option>
                  <option value="8192">8192 bits</option>
                </select>
                <!-- ED25519 -->
                <select id="select-key-length-ed25519" class="select key-length-selector" data-algorithm="ED25519" type="number" style="display:none; pointer-events:none; opacity:0.6;">  
                  <option value="256" selected>256 bits</option>
                </select>
                <!-- Скрытое поле для отправки значения длины ключа -->
                <input type="hidden" name="KeyLength" id="key-length-value" value="4096">
            </div>
            <div class="col-12">
              <button type="submit" class="btn-custom btn-custom-servers mt-2">
                <span class="btn-text">Add ssh key</span>
                <img src="/static/svg/time.svg" class="time-svg htmx-indicator">
              </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 ssh keys">
      </div>
      <div id="response" class="servers_table">
        {{template "sshKeyList-tpl" .}}
      </div>
    </div>
  </div>

<!-- index end template -->
{{template "footer-tpl" .}}