<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <section class="bg-gray-50">
    <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
        <div class="w-full bg-white rounded-lg shadow md:mt-0 sm:max-w-md xl:p-0">
            <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
                <div class="space-y-4 md:space-y-6" action="#">
                    <div>
                      <button id="loginModalBtn" class="cursor-pointer w-full block text-white bg-blue-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Private Key</button>
                    </div>
                    <p class="text-sm font-light text-gray-500">
                        Donâ€™t have an account yet? <a href="#register" id="register" class="font-medium text-primary-600 hover:underline">Sign up</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
  </section>

<div id="privatekey-modal" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
    <div class="relative w-full max-w-md max-h-full">
        <!-- Modal content -->
        <div class="relative bg-white rounded-lg shadow">
            <button type="button" class="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center" data-modal-hide="privatekey-modal">
                <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>  
                <span class="sr-only">Close modal</span>
            </button>
            <!-- Modal header -->
            <div class="px-6 py-4 border-b rounded-t">
                <h3 class="text-base font-semibold text-gray-900 lg:text-xl">
                    Private key authentication
                </h3>
            </div>
            <!-- Modal body -->
            <div class="p-6">
                <p class="text-sm font-normal text-gray-500">Authenticate with private key instead of conventional username and password.</p>
                <ul class="my-4 space-y-3">
                    <li>
                        <button id="download" class="w-full block  p-3 text-base font-bold text-gray-900 rounded-lg bg-gray-50 hover:bg-gray-100 group hover:shadow">
                            <div class="flex justify-between">
                              <div class="flex">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-download"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
                                <span class=" ml-3 whitespace-nowrap">Download</span>
                              </div>
                              <span class="inline-flex items-center justify-center px-2 py-0.5 ml-3 text-xs font-medium text-gray-500 bg-gray-200 rounded">.gpg extension</span>
                            </div>
                        </button>
                    </li>
                    
                    <li>
                        <button id="viewPrivateKeyBtn" class="block w-full p-3 text-base text-gray-900 rounded-lg bg-gray-50 hover:bg-gray-100 hover:shadow">
                            <div class="flex font-bold on">
                              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
                              <span class="ml-3 whitespace-nowrap">View</span>
                            </div>
                            <div class="hidden flex font-bold off">
                              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye-off"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>
                              <span class="ml-3 whitespace-nowrap">Hide</span>
                            </div>
                        </button>
                    </li>
                    <li id="viewPrivateKeyBlock" class="hidden">
                      <div class="cursor-text flex flex-col p-3 text-xs text-gray-900 rounded-lg bg-gray-50 hover:bg-gray-100 group hover:shadow">
                            <pre class="overflow-x-auto"></pre>
                        </div>
                    </li>
                </ul>
                <div>
                    <a href="#" class="inline-flex items-center text-xs font-normal text-gray-500 hover:underline">
                        <svg aria-hidden="true" class="w-3 h-3 mr-2" aria-hidden="true" focusable="false" data-prefix="far" data-icon="question-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627 0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579 0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666 2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112 261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841 42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z"></path></svg>
                        Why do I need to use a private key?</a>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="login-modal" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
    <div class="relative w-full max-w-md max-h-full">
        <!-- Modal content -->
        <div class="relative bg-white rounded-lg shadow">
            <button type="button" class="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center" data-modal-hide="login-modal">
                <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>  
                <span class="sr-only">Close modal</span>
            </button>
            <!-- Modal header -->
            <div class="px-6 py-4 border-b rounded-t">
                <h3 class="text-base font-semibold text-gray-900 lg:text-xl">
                    Login
                </h3>
            </div>
            <!-- Modal body -->
            <div class="p-6">
                <p class="text-sm font-normal text-gray-500">Authenticate with private key instead of conventional username and password.</p>
                <ul class="my-4 space-y-3">
                    <li>
                        <label for="privateKeyUpload" class="w-full block cursor-pointer p-3 text-base font-bold text-gray-900 rounded-lg bg-gray-50 hover:bg-gray-100 group hover:shadow">
                            <div class="flex justify-between">
                              <div class="flex">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-upload"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
                                <span class=" ml-3 whitespace-nowrap">Upload</span>
                              </div>
                              <span class="inline-flex items-center justify-center px-2 py-0.5 ml-3 text-xs font-medium text-gray-500 bg-gray-200 rounded">.gpg extension</span>
                            </div>
                        </label>
                        <input type="file" class="hidden" accept=".gpg" id="privateKeyUpload">
                    </li>
                    
                    <li>
                        <button id="inputPrivateKeyBtn" class="block w-full text-base text-gray-900">
                            <div class="flex font-bold on bg-gray-50 hover:bg-gray-100 p-3 rounded-lg hover:shadow">
                              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
                              <span class="ml-3">Input</span>
                            </div>
                        </button>
                    </li>
                    <li id="inputPrivateKeyBlock" class="hidden">
                      <div class="cursor-text flex flex-col p-3 text-xs text-gray-900 rounded-lg bg-gray-50 hover:bg-gray-100 group hover:shadow">
                            <textarea autocomplete="off"  name="" class="bg-gray-50 hover:bg-gray-100" id="" cols="30" rows="10"></textarea>
                        </div>
                    </li>
                    <li id="inputPrivateKeySubmit" class="hidden">
                      <div class="font-bold block w-full text-base text-gray-900 text-center bg-blue-500 hover:bg-blue-700 text-white p-3 rounded-lg hover:shadow">
                          <span>Submit</span>
                        </div>
                    </li>
                </ul>
                <div>
                    <a href="#" class="inline-flex items-center text-xs font-normal text-gray-500 hover:underline">
                        <svg aria-hidden="true" class="w-3 h-3 mr-2" aria-hidden="true" focusable="false" data-prefix="far" data-icon="question-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627 0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579 0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666 2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112 261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841 42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z"></path></svg>
                        Why do I need to use a private key?</a>
                </div>
            </div>
        </div>
    </div>
</div>

</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>

<script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.min.js">
  import { Modal } from 'https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.min.js';
</script>

<script>

  (() => {

    const login = (privateKey) => {
      $.ajax({
        url: '/login',
        method: 'POST',
        data: {
          privateKey: privateKey
        },
        dataType: 'json',
        success: (data) => {
          console.log(data)
        },
      });
    }

    $('#privateKeyUpload').on('change', function(e) {
      var file = $('input#privateKeyUpload')[0].files[0]
      var reader = new FileReader();
      reader.onload = function(e) {
        var content = e.target.result;
        login(content);
      };
      reader.readAsText(file);
    })

    $('#inputPrivateKeySubmit').on('click', function(e) {
      login($('#inputPrivateKeyBlock textarea').val())
    })

    $('#download').on('click', () => {
      const blob = new Blob([$('#viewPrivateKeyBlock pre').text()], { type: 'application/gpg' })

      const downloadLink = document.createElement('a');
      downloadLink.href = URL.createObjectURL(blob);
      downloadLink.download = 'privateKey.gpg';

      // Trigger a click event on the download link to initiate the download
      downloadLink.click();
    })

    $('#loginModalBtn').on('click', () => {
          const modal = new Modal(document.getElementById('login-modal'));
          modal.show();
    })

    $('#inputPrivateKeyBtn').on('click', () => {
      $('#inputPrivateKeyBtn, #inputPrivateKeySubmit').toggleClass('hidden')
      $('#inputPrivateKeyBlock').toggleClass('hidden')
    })

    $('#viewPrivateKeyBtn').on('click', () => {
      $('#viewPrivateKeyBtn .on, #viewPrivateKeyBtn .off').toggleClass('hidden')
      $('#viewPrivateKeyBlock').toggleClass('hidden')
    })

    $('#register').on('click', () => {
      $.ajax({
        url: '/register',
        dataType: 'json',
        success: (data) => {
          $('#viewPrivateKeyBlock pre').text(data.privateKey)

          const modal = new Modal(document.getElementById('privatekey-modal'));
          modal.show();
        },
      });
    })

  })()
</script>

</html>