www-public/index.html

<!DOCTYPE html>
<html>
  <head>
    <title id="IndexTitle">Steam Key List</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/checkToken.js"></script>
    <script src="/assets/js/snackbar.js"></script>
    <link rel="stylesheet" href="assets/css/snackbar.css" />
    <style>
      * {
        box-sizing: border-box;
      }

      body {
            background-color: #6c6c6c;
        }

      #TableSearch {
        background-color: #949494;
        background-position: 10px 10px;
        background-repeat: no-repeat;
        width: 100%;
        font-size: 16px;
        padding: 12px 20px 12px 40px;
        border: 1px solid #444444;
        margin-bottom: 12px;
      }

      #KeyTable {
        border-collapse: collapse;
        width: 100%;
        border: 1px solid #444444;
        font-size: 18px;
      }

      #KeyTable th,
      #KeyTable td {
        text-align: left;
        padding: 12px;
      }

      #KeyTable tr {
        border-bottom: 1px solid #444444;
      }

      #KeyTable tr.header,
      #KeyTable tr:hover {
        background-color: #444444;
      }

      /* Dropdown Button */
      .dropbtn {
        background-color: #444444;
        margin-bottom: 8px;
        color: white;
        padding: 8px;
        font-size: 16px;
        border: none;
      }

      .dropdown {
        position: relative;
        display: inline-block;
      }

      .dropdown-content {
        display: none;
        position: absolute;
        background-color: #aaa7a7;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
      }

      .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
      }

      .dropdown-content a:hover {
        background-color: #ddd;
      }

      .dropdown:hover .dropdown-content {
        display: block;
      }

      .dropdown:hover .dropbtn {
        background-color: #aaa7a7;
      }
    </style>
  </head>

  <body>
    <div id="LoginText"></div>
    <h2>Steam Key List</h2>

    <input
      type="text"
      id="TableSearch"
      onkeyup="search()"
      placeholder="Search for names.."
      title="Type in a name"
    />

    <div id="SearchOptions"></div>

    <div id="Table"></div>

    <script>
      let GlobakStatus = "all";
      let QueryInputString = false; // Will be true if there was a ? in the url
      let SetStateQuery = false; // Will be true if the user clicked on a other status in the dropdown menu
      const PossibleKeyStatus = ["🟢", "🟡", "🔵", "⚫️"];
      const PossibleKeyStatusText = ["Unused", "Unknown", "Gifted", "Used"];
      const SnackBox_Timeout = 400;
      const SnackBox_Location = "tr";

      $(document).ready(function () {
        CheckTokenValidity();
        getTableData();
        getURLQuery();
      });

      //Will auto fill the search bar with the search query
      function getURLQuery(){
        const getUrl = window.location;
				const baseUrl = getUrl.protocol + "//" + getUrl.host + "/";
				const SearchTermFromURL = getUrl.search.split("?").join("")
        if(SearchTermFromURL != ""){
          document.getElementById("TableSearch").value = SearchTermFromURL;
          QueryInputString = true;
        }
      }

      function search() {
        var input, filter, table, tr, td, i, txtValue;
        input = document.getElementById("TableSearch");
        filter = input.value.toUpperCase();
        table = document.getElementById("KeyTable");
        tr = table.getElementsByTagName("tr");
        for (i = 0; i < tr.length; i++) {
          td = tr[i].getElementsByTagName("td")[1]; //Cullom ID of the table to search for
          if (td) {
            txtValue = td.textContent || td.innerText;
            if (txtValue.toUpperCase().indexOf(filter?.split("")?.join("‎​")) > -1) {
              tr[i].style.display = "";
            } else {
              tr[i].style.display = "none";
            }
          }
        }
      }

      function GoTo_addkeys() {
        const getUrl = window.location;
        const baseUrl = getUrl.protocol + "//" + getUrl.host + "/";
        window.location.replace(`${baseUrl}addkeys`);
      }

      function setStatus(status) {
        GlobakStatus = status;
        SetStateQuery = true;
        getTableData();
      }

      function share() {
        const getUrl = window.location;
        const baseUrl = getUrl.protocol + "//" + getUrl.host + "/";
        const SearchTerm = document.getElementById("TableSearch").value;

        if(SearchTerm == ""){
          SnackBar({
                message: `No search term to share`,
                width: "600px",
                speed: SnackBox_Timeout,
                position: SnackBox_Location,
                fixed: true,
                status: "error",
              });
          return;
        }
        
        // Generate URL and store in clipboard

        if (navigator.clipboard) {
          navigator.clipboard.writeText(`${baseUrl}?${SearchTerm}`);
          SnackBar({
                message: `Copied URL to Clipboard`,
                width: "600px",
                speed: SnackBox_Timeout,
                position: SnackBox_Location,
                fixed: true,
                status: "success",
              });
        } else {
          SnackBar({
                message: `Failed to copy URL to Clipboard`,
                width: "600px",
                speed: SnackBox_Timeout,
                position: SnackBox_Location,
                fixed: true,
                status: "error",
              });
        }
      }

      //Checks if you are logged in, if so you get "Show my Keys" and a logout button. If not, the login button will be displayed
      function CheckTokenValidity() {
        const getUrl = window.location;
        const baseUrl = getUrl.protocol + "//" + getUrl.host + "/";
        $("#LoginText").html(
          `<a style="position: absolute; right: 25px; top: 15px; cursor: pointer" onClick="login()">Login</a>`
        );
        $("#SearchOptions").html(`
            <div class="dropdown">
                <button class="dropbtn" id="StatusDropdown">Status</button>
                <div class="dropdown-content">
                <a onclick="setStatus('all')">All</a>
                <a onclick="setStatus('ava')">Available</a>
                <a onclick="setStatus('unk')">Unknown</a>
                <a onclick="setStatus('gif')">Gifted</a>
                <a onclick="setStatus('use')">Used</a>
                </div>
            </div>

            <button class="dropbtn" style="cursor: pointer;" onclick="share()">Share</button>
        `);
        if (localStorage.getItem("token") !== null) {
          //Token was found, now validate it and if valid forward to main page
          const posting = $.post(`${baseUrl}api/application/login/check`, {
            token: localStorage.getItem("token"),
          });
          posting.done(function (result) {
            localStorage.setItem("username", result.TokenData.username);
            $("#LoginText").html(
              `<a style="position: absolute; right: 100px; top: 15px; cursor: pointer" onClick="GoTo_addkeys()">Add Keys</a>
               <a style="position: absolute; right: 25px; top: 15px; cursor: pointer" onClick="logout()">Logout</a>`
            );
            $("#SearchOptions").html(`
            <div class="dropdown">
                <button class="dropbtn" id="StatusDropdown">Status</button>
                <div class="dropdown-content">
                <a onclick="setStatus('all')">All</a>
                <a onclick="setStatus('ava')">Available</a>
                <a onclick="setStatus('unk')">Unknown</a>
                <a onclick="setStatus('gif')">Gifted</a>
                <a onclick="setStatus('use')">Used</a>
                </div>
            </div>

            <button class="dropbtn" style="cursor: pointer;" onclick="share()">Share</button>

            <input
                type="checkbox"
                style="margin-bottom: 15px; margin-right: 5px"
                id="mykeys"
                name="mykeys"
                onchange="getTableData()"
            />Show only my keys
          `);
          });

          posting.fail(function (err) {
            localStorage.removeItem("token");
            localStorage.removeItem("username");
          });
        }
      }

      /**
       * Return a color from red to green. 100% = Green, 0% = Red
       * @param {Number} value
       */
      function getColor(value) {
        //value from 0 to 1
        var hue = (value * 120).toString(10);
        return ["hsl(", hue, ",100%,50%)"].join("");
      }

      /**
       * Get buttons based on login status for a key
       */
      function getButtons(KeyID, Status, Owner, giftaccess) {
        if (localStorage.getItem("token") === null || Status === 4) {
          return `<a title="Key Info" style="position: center; cursor: pointer" onClick="GoTo_infokey('${KeyID}')">ℹ️</a>`;
        } else {
          if(Owner === localStorage.getItem("username") || giftaccess === 'global'){
            return `<a title="Key Info" style="position: center; cursor: pointer" onClick="GoTo_infokey('${KeyID}')">ℹ️</a> <a title="Create Gift Link" style="cursor: pointer" onClick="GoTo_giftkey('${KeyID}')">🎁</a>`;
          }else{
            return `<a title="Key Info" style="position: center; cursor: pointer" onClick="GoTo_infokey('${KeyID}')">ℹ️</a>`;
          }
        }
      }

      /**
       * Generate a gift or load a already generated gift
       * @param {string} KeyID
       */
      function GoTo_giftkey(KeyID){
        const getUrl = window.location;
        const baseUrl = getUrl.protocol + "//" + getUrl.host + "/";
        
        const posting = $.ajax({
          url: `${baseUrl}api/application/gifts/create`,
          type: "POST",
          contentType: "application/json; charset=utf-8",
          headers: { Authorization: "Bearer " + localStorage.getItem("token") },
          data: JSON.stringify({KeyID: KeyID}),
          success: function (Gift) {
            if(navigator){
              try {
                navigator.clipboard.writeText(`${baseUrl}claim?URL_Token=${Gift.URL_Token}`);
              } catch (error) {
                SnackBar({
                message: `Copy to clipboard failed: ${baseUrl}claim?URL_Token=${Gift.URL_Token}`,
                width: "600px",
                speed: SnackBox_Timeout*5,
                position: SnackBox_Location,
                fixed: true,
                status: "success",
              });
              }
              SnackBar({
                message: `Copied gift of ${Gift.Key_Name} to clipboard`,
                width: "600px",
                speed: SnackBox_Timeout,
                position: SnackBox_Location,
                fixed: true,
                status: "success",
              });
            }else{
              SnackBar({
                message: `Could not copy gift of ${Gift.Key_Name} to clipboard`,
                width: "600px",
                speed: SnackBox_Timeout,
                position: SnackBox_Location,
                fixed: true,
                status: "success",
              });
            }
            getTableData();
          },
          error: function (err) {
            console.log(err)
            if (err.status === 429) {
              SnackBar({
                message: `Error 429 - Too many requests`,
                width: "400px",
                speed: SnackBox_Timeout,
                position: SnackBox_Location,
                fixed: true,
                status: "error",
              });
            } else if (err.status === 500) {
              SnackBar({
                message: `Error ${err.status} - ${err.responseJSON.Message}`,
                width: "400px",
                speed: SnackBox_Timeout,
                position: SnackBox_Location,
                fixed: true,
                status: "error",
              });
            } else if (
              err.status === 401 ||
              err.status === 400 ||
              err.status === 403 ||
              err.status === 410
            ) {
              SnackBar({
                message: `Error ${err.status} - ${err.responseJSON.Message}`,
                width: "400px",
                speed: SnackBox_Timeout,
                position: SnackBox_Location,
                fixed: true,
                status: "error",
              });
            }
          }
        });
      }

      function GoTo_infokey(KeyID) {
        const getUrl = window.location;
        const baseUrl = getUrl.protocol + "//" + getUrl.host + "/";

        const posting = $.ajax({
          url: `${baseUrl}api/application/keys/keysave`,
          type: "GET",
          contentType: "application/json; charset=utf-8",
          data: {KeyID: KeyID},
          success: function (keystatus) {
            const options = { hour: '2-digit', minute: '2-digit', year: 'numeric', month: 'numeric', day: 'numeric' };
            SnackBar({
              message: `Name: ${keystatus.name}<br>Owner: ${keystatus.owner}<br>Added at ${new Date(keystatus.created_at).toLocaleDateString('de-DE', options)}<br>Status: ${PossibleKeyStatusText[keystatus.status - 1]} seit ${new Date(keystatus.status_modifyed).toLocaleDateString('de-DE', options)}`,
              with: "600px",
              speed: SnackBox_Timeout+4,
              position: SnackBox_Location,
              fixed: true,
              status: "success",
            })
          },
          error: function (err) {
            if (err.status === 429) {
              SnackBar({
                message: `Error 429 - Too many requests`,
                width: "400px",
                speed: SnackBox_Timeout,
                position: SnackBox_Location,
                fixed: true,
                status: "error",
              });
            } else if (err.status === 500) {
              SnackBar({
                message: `Error 500 - Internal Server Error`,
                width: "400px",
                speed: SnackBox_Timeout,
                position: SnackBox_Location,
                fixed: true,
                status: "error",
              });
            } else if (
              err.status === 401 ||
              err.status === 400 ||
              err.status === 403
            ) {
              SnackBar({
                message: `Error ${err.status} - ${err.statusText}`,
                width: "400px",
                speed: SnackBox_Timeout,
                position: SnackBox_Location,
                fixed: true,
                status: "error",
              });
            }
          }
        });
      }

      function getTableData() {
        const getUrl = window.location;
        const baseUrl = getUrl.protocol + "//" + getUrl.host + "/";

        const exportjson = {
          status: GlobakStatus,
          onlymykeys: $("#mykeys").is(":checked"),
        };

        const posting = $.ajax({
          url: `${baseUrl}api/application/keys`,
          type: "GET",
          contentType: "application/json; charset=utf-8",
          headers: { Authorization: "Bearer " + localStorage.getItem("token") },
          data: exportjson,
          success: function (keystatus) {
            //console.log(keystatus);
            $("#IndexTitle").text(`Steam Key List (${keystatus.length})`);
            $("#Table").html(`
                <table id="KeyTable">
                    <tr class="header">
                        <th style="width: 10%">Status</th>
                        <th style="width: 50%">Name</th>
                        <th style="width: 30%">Owner & Rating</th>
                        <th style="width: 10%">Actions</th>
                    </tr>
                </table>
                `);
            for (let i = 0; i < keystatus.length; i++) {
              const key =
                Number(keystatus[i].keys_success) +
                Number(keystatus[i].keys_failed);
              let vote_rate = ((keystatus[i].keys_success / key) * 100).toFixed(0);
              if(isNaN(vote_rate)){
                vote_rate = "No Votes";
              }else{
                vote_rate = `${vote_rate}%`;
              }
              $("#KeyTable").append(`
                    <tr>
                        <td title="${PossibleKeyStatusText[keystatus[i].status - 1]}" >${PossibleKeyStatus[keystatus[i].status - 1]}</td>
                        <td>${keystatus[i].name?.replaceAll('&amp;', '&').split("")?.join("‎​")}</td>
                        <td style="color: ${getColor(keystatus[i].keys_success / key)} !important" title="${vote_rate} of this users keys worked.">${keystatus[i].owner?.split("")?.join("‎​")} (${vote_rate})</td>
                        <td>${getButtons(keystatus[i].id, keystatus[i].status, keystatus[i].owner, keystatus[i].giftaccess)}</td>
                    </tr>
              `);
              //If parameter was given in url, perform seach after the table was created
              if(QueryInputString || SetStateQuery){
                search();
              }
            }
          },
          error: function (err) {
            if (err.status === 429) {
              SnackBar({
                message: `Error 429 - Too many requests`,
                width: "400px",
                speed: SnackBox_Timeout,
                position: SnackBox_Location,
                fixed: true,
                status: "error",
              });
            } else if (err.status === 500) {
              SnackBar({
                message: `Error 500 - Internal Server Error`,
                width: "400px",
                speed: SnackBox_Timeout,
                position: SnackBox_Location,
                fixed: true,
                status: "error",
              });
            } else if (
              err.status === 401 ||
              err.status === 400 ||
              err.status === 403
            ) {
              SnackBar({
                message: `Error ${err.status} - ${err.statusText}`,
                width: "400px",
                speed: SnackBox_Timeout,
                position: SnackBox_Location,
                fixed: true,
                status: "error",
              });
            }
          },
        });
      }
    </script>
  </body>
</html>