<!DOCTYPE html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-beta19
* @link https://tabler.io
* Copyright 2018-2023 The Tabler Authors
* Copyright 2018-2023 codecalm.net PaweÅ‚ Kuna
* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
-->
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, viewport-fit=cover" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title data-translate="Login.Title"> </title>
    <!-- Essential JS -->
    <script>
      const lang = <%- JSON.stringify(language) %>
    </script>
    <script src="<%= domain %>/appjs/i18next.js?<%= curentUnixTime %>"></script>
    <!-- CSS files -->
    <link href="<%= domain %>/dist/css/tabler.min.css?<%= curentUnixTime %>" rel="stylesheet"/>
    <link href="<%= domain %>/dist/css/tabler-flags.min.css?<%= curentUnixTime %>" rel="stylesheet"/>
    </style>
  </head>
  <body class="d-flex flex-column">
    <script src="<%= domain %>/appjs/format.js"></script>
    <div class="page page-center">
      <div class="container container-tight py-4">
        <div class="text-center mb-4">
          <a href="." class="navbar-brand navbar-brand-autodark"><img src="<%= domain %>/dist/logo-transparent.png" height="36" alt=""/></a>
        </div>
        <div class="card card-md">
          <div class="card-body">
            <h2 class="h2 text-center mb-4" data-translate="Login.Header"></h2>
            <form method="post" id="LoginForm">
              <div class="mb-3">
                <label
                  class="form-label"
                  data-translate="Login.EmailAdress"></label>
                <input
                  id="login_identifier"
                  type="email"
                  class="form-control"
                  data-translate-placeholder="Login.Placeholder.EmailAdress"
                  placeholder=""
                  autocomplete="off" />
              </div>
              <div class="mb-2">
                <label class="form-label" data-translate="Login.Password">
                  <span class="form-label-description">
                    <a
                      href="<%= domain %>/requestresetpassword"
                      data-translate="Login.ForgotPassword">s</a>
                  </span>
                </label>
                <div class="input-group input-group-flat">
                  <input
                    id="login_password"
                    type="password"
                    class="form-control"
                    data-translate-placeholder="Login.Placeholder.Password"
                    placeholder=""
                    autocomplete="off" />
                  <span class="input-group-text">
                    <a
                      id="passwordToggle"
                      class="link-secondary"
                      title="Show password"
                      data-bs-toggle="tooltip"
                      ><!-- Download SVG icon from http://tabler-icons.io/i/eye -->
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        class="icon"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        stroke-width="2"
                        stroke="currentColor"
                        fill="none"
                        stroke-linecap="round"
                        stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
                        <path
                          d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />
                      </svg>
                    </a>
                  </span>
                </div>
              </div>
              <div id="responseText"></div>
              <div class="form-footer">
                <button
                  type="submit"
                  class="btn btn-primary w-100"
                  data-translate="Login.Button.SignIn"></button>
              </div>
            </form>
          </div>
          <div class="hr-text" data-translate="Login.Or"></div>
          <div class="card-body">
            <div class="row">
              <div class="col">
                <a href="<%= Github.OAuthUrl %>" class="btn w-100">
                  <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-brand-github-filled"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    stroke-width="2"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                    <path
                      d="M5.315 2.1c.791 -.113 1.9 .145 3.333 .966l.272 .161l.16 .1l.397 -.083a13.3 13.3 0 0 1 4.59 -.08l.456 .08l.396 .083l.161 -.1c1.385 -.84 2.487 -1.17 3.322 -1.148l.164 .008l.147 .017l.076 .014l.05 .011l.144 .047a1 1 0 0 1 .53 .514a5.2 5.2 0 0 1 .397 2.91l-.047 .267l-.046 .196l.123 .163c.574 .795 .93 1.728 1.03 2.707l.023 .295l.007 .272c0 3.855 -1.659 5.883 -4.644 6.68l-.245 .061l-.132 .029l.014 .161l.008 .157l.004 .365l-.002 .213l-.003 3.834a1 1 0 0 1 -.883 .993l-.117 .007h-6a1 1 0 0 1 -.993 -.883l-.007 -.117v-.734c-1.818 .26 -3.03 -.424 -4.11 -1.878l-.535 -.766c-.28 -.396 -.455 -.579 -.589 -.644l-.048 -.019a1 1 0 0 1 .564 -1.918c.642 .188 1.074 .568 1.57 1.239l.538 .769c.76 1.079 1.36 1.459 2.609 1.191l.001 -.678l-.018 -.168a5.03 5.03 0 0 1 -.021 -.824l.017 -.185l.019 -.12l-.108 -.024c-2.976 -.71 -4.703 -2.573 -4.875 -6.139l-.01 -.31l-.004 -.292a5.6 5.6 0 0 1 .908 -3.051l.152 -.222l.122 -.163l-.045 -.196a5.2 5.2 0 0 1 .145 -2.642l.1 -.282l.106 -.253a1 1 0 0 1 .529 -.514l.144 -.047l.154 -.03z"
                      stroke-width="0"
                      fill="currentColor" />
                  </svg>
                  <span data-translate="Login.OAuth.LoginWGithub"></span>
                </a>
              </div>
              <div class="col">
                <a href="<%= Google.OAuthUrl %>" class="btn w-100">
                  <!-- Download SVG icon from http://tabler-icons.io/i/brand-google -->
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-brand-google-filled"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    stroke-width="2"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                    <path
                      d="M12 2a9.96 9.96 0 0 1 6.29 2.226a1 1 0 0 1 .04 1.52l-1.51 1.362a1 1 0 0 1 -1.265 .06a6 6 0 1 0 2.103 6.836l.001 -.004h-3.66a1 1 0 0 1 -.992 -.883l-.007 -.117v-2a1 1 0 0 1 1 -1h6.945a1 1 0 0 1 .994 .89c.04 .367 .061 .737 .061 1.11c0 5.523 -4.477 10 -10 10s-10 -4.477 -10 -10s4.477 -10 10 -10z"
                      stroke-width="0"
                      fill="currentColor" />
                  </svg>
                  <span data-translate="Login.OAuth.LoginWGoogle"></span>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="text-center text-muted mt-3">
          <a
            href="<%= domain %>/register"
            data-translate="Login.SignUPPhrase">
          </a>
        </div>
      </div>
    </div>
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="<%= domain %>/appjs/permission.js?<%= curentUnixTime %>" defer></script>
    <script src="<%= domain %>/appjs/translate.js?<%= curentUnixTime %>"></script>
    <script src="<%= domain %>/dist/js/tabler.min.js?<%= curentUnixTime %>" defer></script>
    <script src="<%= domain %>/appjs/layout.js?<%= curentUnixTime %>"></script>
    <script>
      // When passwordToggle is clicked, toggle the type of password field (id login_password) (VanillaJS)
      document.getElementById("passwordToggle").addEventListener("click", function() {
        const passwordField = document.getElementById("login_password");
        if (passwordField.type === "password") {
          passwordField.type = "text";
        } else {
          passwordField.type = "password";
        }
      });

      // When the login form is submitted, send a POST request to the server (VanillaJS)
      document.getElementById("LoginForm").addEventListener("submit", function(event) {
        event.preventDefault();

        const identifier = document.getElementById("login_identifier").value;
        const password = document.getElementById("login_password").value;

        // Check if status 200, if so, redirect to dashboard. If not, show error message.
        fetch("/api/v1/login", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            identifier: identifier,
            password: password,
          }),
        })
          .then((response) => {
            if (response.status === 200) {
              document.querySelector("button[type=submit]").classList.toggle("btn-success");
              return response.json();
            } else {
              let showErrorDuration = 1500;
              // Toggle submit button to red and write error message for 401, 403 and 500
              // updateElementText(element, i18next.t(key));
              document.querySelector("button[type=submit]").classList.toggle("btn-danger");
              if(response.status === 401) {
                updateElementText(document.querySelector("button[type=submit]"), i18next.t("Login.Button.Error.401"));
              } else if(response.status === 403) {
                updateElementText(document.querySelector("button[type=submit]"), i18next.t("Login.Button.Error.403"));
              } else if(response.status === 423) {
                updateElementText(document.querySelector("button[type=submit]"), i18next.t("Login.Button.Error.423"));
                showErrorDuration += 1000;
              } else if(response.status === 500) {
                updateElementText(document.querySelector("button[type=submit]"), i18next.t("Login.Button.Error.500"));
              }

              // Toggle back to normal after 1.5 seconds
              setTimeout(function() {
                document.querySelector("button[type=submit]").classList.toggle("btn-danger");
                updateElementText(document.querySelector("button[type=submit]"), i18next.t("Login.Button.SignIn"));
              }, showErrorDuration);

              throw new Error(response.status);
            }
          })
          .then((response) => {
            localStorage.setItem("user_id", response.user_id);
            localStorage.setItem("username", response.username);
            localStorage.setItem("puuid", response.puuid);
            localStorage.setItem("avatar_url", response.avatar_url);
            localStorage.setItem("language", response.language);
            localStorage.setItem("tablerTheme", response.design);
            localStorage.setItem("user_group", response.user_group)
            localStorage.setItem("token", response.token);
            localStorage.setItem("permissions", JSON.stringify(response.permissions));
            
            if(localStorage.getItem("oauth:client_id")) {
              const oauth_client_id = localStorage.getItem("oauth:client_id");
              const oauth_scope = localStorage.getItem("oauth:scope");
              localStorage.removeItem("oauth:client_id");
              localStorage.removeItem("oauth:scope");
              window.location.href = `/auth/oauth?client_id=${oauth_client_id}&scope=${oauth_scope}`;
            } else {
              window.location.href = "/dashboard";
            }
          })
          .catch((error) => {
            console.error(error);
          });
      });

      document.addEventListener("DOMContentLoaded", function() {
        const localStorageEmailVerify = localStorage.getItem("emailVerifyInfo") || false;
        if(localStorageEmailVerify) {
          if(parseInt(localStorageEmailVerify) < 300) {
            document.getElementById("responseText").innerHTML = `<div class="alert alert-success" role="alert">${`OAuth: ${i18next.t(`Login.OauthRegister`)}`}</div>`;
            localStorage.removeItem("emailVerifyInfo");
          } else {
            document.getElementById("responseText").innerHTML = `<div class="alert alert-danger" role="alert">${`OAuth: ${i18next.t(`Login.Button.Error.${localStorageEmailVerify}`)}`}</div>`;
            localStorage.removeItem("emailVerifyInfo");
        }
          setTimeout(function() {
            document.getElementById("responseText").innerHTML = "";
          }, 8000);
        }
      });
    </script>
  </body>
</html>
