TC
/
WebStick


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
							<!DOCTYPE html>
<html>
  <head>
    <title>Login</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" >
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/5.0.2/tocas.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/5.0.2/tocas.min.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  </head>
  <body>
    <div class="ts-app-center">
      <div class="content">
          <a href="index.html">
            <div class="ts-image is-centered">
              <img src="img/logo.png" width="150">
            </div>
          </a>
          <div class="has-top-spaced-large"></div>
          <div class="ts-box has-top-spaced-large" style="width: 260px">
              <div class="ts-content">
                  <div class="ts-wrap is-vertical">
                      <div class="ts-text is-label">Username</div>
                      <div class="ts-input is-start-icon is-underlined">
                          <span class="ts-icon is-user-icon"></span>
                          <input type="text" name="username" placeholder="Username" required>
                      </div>
                      <div class="ts-text is-label">Password</div>
                      <div class="ts-input is-start-icon is-underlined">
                          <span class="ts-icon is-lock-icon"></span>
                          <input type="password" name="password" placeholder="Password" required>
                      </div>
                      <button id="loginBtn" class="ts-button is-fluid" onclick="login(event);">Login</button>
                  </div>

                  <a class="ts-text is-icon-link has-top-spaced-large" href="index.html">
                    <span class="ts-icon is-arrow-left-icon"></span>
                    Back
                </a>
              </div>
          </div>
      </div>
    </div>

    <script>

      $(document).ready(function() {
        $('input[name="username"]').on('keypress', function(e) {
          if (e.which === 13) { // Enter key
            e.preventDefault();
            $('input[name="password"]').focus();
          }
        });

        $('input[name="password"]').on('keypress', function(e) {
          if (e.which === 13) { // Enter key
            e.preventDefault();
            login(e);
          }
        });
      });
      
      function login(e){
        e.preventDefault(); // Prevent form submission
        // Get the input values
        var username = $('input[name="username"]').val();
        var password = $('input[name="password"]').val();

        $.ajax({
            url: "/api/auth/login?username=" + username + "&password=" + password,
            method: "POST",
            success: function(data){
                if (data.error != undefined){
                  $('input[name="username"], input[name="password"]').parent().addClass('is-negative');
                }else{
                    //Logged in
                    window.location.href = "/admin/";
                }
            }
        });
      }
    </script>
  </body>
</html>