login.html 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <link rel="stylesheet" href="style.css"
  8. <title></title>
  9. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  10. </head>
  11. <body>
  12. <nav class="navbar navbar-expand-lg bg-info">
  13. <div class="container-fluid">
  14. <a href="#" class="navbar-brand">
  15. <h1>Frontend Modeler</h1>
  16. </a>
  17. <img src="cdp_logo_sm.png" class="rounded float-end" alt="Responsive image">
  18. </div>
  19. </nav>
  20. <div class="container-sm">
  21. <br>
  22. <form class="row g-3">
  23. <div class="col-md-6">
  24. <label for="userlogin" class="form-label">User</label>
  25. <input type="text" class="form-control" id="userlogin">
  26. </div>
  27. <div class="col-sm-6">
  28. <label for="inputPassword0" class="form-label">Password</label>
  29. <input type="password" class="form-control" id="pwlogin">
  30. </div>
  31. <div class="col-12">
  32. <button type="button" id="login" class="btn btn-primary" >Login</button>
  33. </div>
  34. <br>
  35. <div class="w-25 col-12">
  36. <div id="liveAlertPlaceholder0"></div></div>
  37. </form>
  38. </div>
  39. <br>
  40. <div class="container-sm">
  41. <form class="row g-3">
  42. <div class="col-md-6">
  43. <label for="userregister" class="form-label">User</label>
  44. <input type="text" class="form-control" id="userregister">
  45. </div>
  46. <div class="col-sm-6">
  47. <label for="inputPassword1" class="form-label">Password</label>
  48. <input type="password" class="form-control" id="pwregister">
  49. </div>
  50. <div class="col-12">
  51. <button type="button" id="register" class="btn btn-primary" >Register</button>
  52. </div>
  53. <br>
  54. <div class="w-25 col-12">
  55. <div id="liveAlertPlaceholder1"></div></div>
  56. </form>
  57. </div>
  58. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  59. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
  60. <link rel="stylesheet" href="./jstree/jstree/dist/themes/default/style.min.css" />
  61. <script src="./js/events_login.js"></script>
  62. <script>
  63. document.getElementById("login").addEventListener("click", redirectFunction);
  64. function redirectFunction(){
  65. var username = $('#userlogin').val();
  66. var pwtxt = $('#pwlogin').val();
  67. $.ajax({
  68. url: 'http://127.0.0.1:3001/login',
  69. type: 'GET',
  70. data: {user:username , pw: pwtxt},
  71. error: function() {
  72. console.log("Error");
  73. },
  74. success: function(data) {
  75. console.log(data[0].login);
  76. if(data[0].login == "OK"){
  77. var b = username;
  78. url = "index.html?name=" + encodeURIComponent(b);"index.html?name=" + encodeURIComponent(b);
  79. window.location.href = url;
  80. }else{
  81. const alertPlaceholder = document.getElementById("liveAlertPlaceholder0")
  82. const wrapper = document.createElement('div')
  83. wrapper.innerHTML = [
  84. "<div class='alert alert-danger alert-dismissible fade show' role='alert'>",
  85. "Error - Login not possible.",
  86. "<button type='button' class='btn-close' data-bs-dismiss='alert' aria-label='Close'></button>",
  87. "</div>"
  88. ].join("")
  89. alertPlaceholder.append(wrapper)
  90. }
  91. },
  92. type: 'GET'
  93. });
  94. }
  95. </script>
  96. <script>
  97. document.getElementById("register").addEventListener("click", redirectFunction);
  98. function redirectFunction(){
  99. var username = $('#userregister').val();
  100. var pwtxt = $('#pwregister').val();
  101. $.ajax({
  102. url: 'http://127.0.0.1:3001/register',
  103. type: 'GET',
  104. data: {user:username , pw: pwtxt},
  105. error: function() {
  106. console.log("Error");
  107. },
  108. success: function(data) {
  109. console.log(data[0].register);
  110. const alertPlaceholder = document.getElementById("liveAlertPlaceholder1")
  111. if(data[0].register == "OK"){
  112. const wrapper = document.createElement('div')
  113. wrapper.innerHTML = [
  114. "<div class='alert alert-success alert-dismissible' role='alert'>",
  115. "Registration successful - please login.",
  116. "<button type='button' class='btn-close' data-bs-dismiss='alert' aria-label='Close'></button>",
  117. "</div>"
  118. ].join("")
  119. alertPlaceholder.append(wrapper)
  120. }else{
  121. const wrapper = document.createElement('div')
  122. wrapper.innerHTML = [
  123. "<div class='alert alert-danger alert-dismissible fade show' role='alert'>",
  124. "Error - registration not successful.",
  125. "<button type='button' class='btn-close' data-bs-dismiss='alert' aria-label='Close'></button>",
  126. "</div>"
  127. ].join("")
  128. alertPlaceholder.append(wrapper)
  129. }
  130. },
  131. type: 'GET'
  132. });
  133. }
  134. </script>
  135. </body>
  136. </html>