<!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="ResetPassword.Title"></title>
    <!-- CSS files -->
    <link href="<%= domain %>/dist/css/tabler.min.css?1684106062" rel="stylesheet"/>
    <link href="<%= domain %>/dist/css/tabler-flags.min.css?1684106062" rel="stylesheet"/>
    <link href="<%= domain %>/dist/css/tabler-payments.min.css?1684106062" rel="stylesheet"/>
    <link href="<%= domain %>/dist/css/tabler-vendors.min.css?1684106062" rel="stylesheet"/>
    <style>
      @import url('https://rsms.me/inter/inter.css');
      :root {
      	--tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
      }
      body {
      	font-feature-settings: "cv03", "cv04", "cv11";
      }
    </style>
  </head>
  <body  class=" d-flex flex-column">
    <script src="/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>
        <form class="card card-md" action="<%= domain %>/" method="get" autocomplete="off" novalidate>
          <div class="card-body">
            <h2 class="card-title text-center mb-4" data-translate="ResetPassword.ResetPassword"></h2>
            <p class="text-muted mb-4" ata-translate="ResetPassword.EnterIdentifyer"></p>
            <div class="mb-3">
              <label class="form-label" data-translate="Login.EmailAdress"></label>
              <input type="email" id="email" class="form-control" data-translate-placeholder="Login.Placeholder.EmailAdress">
            </div>
            <div id="ErrorLine"></div>
            <div class="form-footer">
              <a class="btn btn-primary w-100">
                <!-- Download SVG icon from http://tabler-icons.io/i/mail -->
                <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="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z" /><path d="M3 7l9 6l9 -6" /></svg>
                <div data-translate="ResetPassword.Button.ResetPassword"></div>
              </a>
            </div>
          </div>
        </form>
        <div class="text-center text-muted mt-3">
          <a href="<%= domain %>/login" data-translate="ResetPassword.TakeMeBack"></a>.
        </div>
      </div>
    </div>
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="<%= domain %>/appjs/permission.js"></script>
    <script src="<%= domain %>/appjs/translate.js"></script>
    <script src="<%= domain %>/dist/js/tabler.min.js?1684106062" defer></script>
    <script src="<%= domain %>/dist/js/i18next.min.js?1684106062"></script>
    <script src="<%= domain %>/appjs/layout.js"></script>
    <script>
      const keys = {
        "email": "email"
      };
      // Detect click of ResetPassword.Button.ResetPassword button
      document.querySelector("a.btn").addEventListener("click", function () {
        // Get the email address from the input field
        const email = document.getElementById("email").value;
        // Send a POST request to the server with the email address
        fetch("/api/v1/resetpassword", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({ email: email }),
        }).then(async (response) => {
          // Parse the JSON response
          const response_json = await response.json();
          // If the response status is 200, show a success message
          if (response.status == 200) {
            document.getElementById('ErrorLine').innerHTML = '<div class="alert alert-success">' + i18next.t('ResetPassword.Success') + '</div>';
            document.querySelector("a.btn").classList.toggle("btn-success");
          } else {
            document.querySelector("a.btn").classList.toggle("btn-danger");
            setTimeout(() => {
              document.querySelector("a.btn").classList.toggle("btn-danger");
            }, 1500);
            if (response.status == 400) {
              if(typeof response_json.reason === "string") {
              document.getElementById('ErrorLine').innerHTML = '<div class="alert alert-danger">' + i18next.t(`Error.${response_json.message}`) + '</div>';
              return;
              }
              const input_name = response_json.reason[0].path[0];
              const input_type = response_json.reason[0].type;
              for (const key in keys) {
                document.getElementById(keys[key]).classList.remove("is-invalid");
              }
              
              document.getElementById('ErrorLine').innerHTML = '<div class="alert alert-danger">' + i18next.t(`Error.Joi.${input_type}`, { field: i18next.t(`ResetPassword.${capitalizeFirstLetter(input_name)}`), limit: response_json.reason[0].context?.limit, valids: response_json.reason[0].context?.valids?.join() }) + '</div>';
            } else {
              document.getElementById('ErrorLine').innerHTML = '<div class="alert alert-danger">' + i18next.t(`ResetPassword.Error.${response.status}`) + '</div>';
            }
          }
        });
      });
    </script>
  </body>
</html>