login.html 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Login</title>
  5. <meta name="viewport" content="width=device-width, initial-scale=1" >
  6. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  7. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
  8. <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
  9. <style>
  10. .imgwrapper{
  11. max-height: 200px;
  12. overflow: hidden;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <div class="navibar"></div>
  18. <div class="imgwrapper">
  19. <img src="img/wallpaper.jpg" class="ui fluid image">
  20. </div>
  21. <div class="ui container">
  22. <br><br>
  23. <div class="ui very padded text container segment">
  24. <h2 class="ui header">Admin Panel</h2>
  25. <form id="loginForm" class="ui form">
  26. <div class="field">
  27. <label>Username</label>
  28. <input type="text" name="username" placeholder="Username">
  29. </div>
  30. <div class="field">
  31. <label>Password</label>
  32. <input type="password" name="password" placeholder="Password">
  33. </div>
  34. <button id="loginButton" class="ui basic button" type="submit"><i class="ui blue sign-in icon"></i> Login</button>
  35. </form>
  36. </div>
  37. </div>
  38. <script>
  39. $(".navibar").load("navi.html");
  40. $('#loginForm').submit(function(e) {
  41. e.preventDefault(); // Prevent form submission
  42. // Get the input values
  43. var username = $('input[name="username"]').val();
  44. var password = $('input[name="password"]').val();
  45. $.ajax({
  46. url: "/api/auth/login?username=" + username + "&password=" + password,
  47. method: "POST",
  48. success: function(data){
  49. if (data.error != undefined){
  50. alert(data.error);
  51. }else{
  52. //Logged in
  53. window.location.href = "/admin/";
  54. }
  55. }
  56. })
  57. });
  58. </script>
  59. </body>
  60. </html>