login.js 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  1. const btnLogin = document.querySelector('#btn_login');
  2. const inputPassword = document.querySelector('#login #password');
  3. const btnLoginPage = document.querySelector('.btn-login');
  4. const btnUserProfile = document.querySelector('.btn-userProfile');
  5. const btnLogout = document.querySelector('.btn-logout');
  6. const btnLoginPage_d = document.querySelector('.login-top .btn-login');
  7. const btnUserProfile_d = document.querySelector('.login-top .btn-userProfile');
  8. const btnLogout_d= document.querySelector('.login-top .btn-logout');
  9. $('.psd_visible').hide();
  10. $('.loading').hide();
  11. $('.psd_invisible').click(function(){
  12. $(this).prev().toggle();
  13. $(this).toggle();
  14. $(this).parent().children(':first').attr('type', 'text');
  15. })
  16. $('.psd_visible').click(function(){
  17. $(this).toggle();
  18. $(this).next().toggle();
  19. $(this).parent().children(':first').attr('type', 'password');
  20. })
  21. inputPassword.addEventListener('keyup', loginByEnter);
  22. btnLogin.addEventListener('click', login);
  23. function loginByEnter(e) {
  24. if (e.keyCode === 13) {
  25. e.preventDefault();
  26. console.log('login!');
  27. login();
  28. }
  29. };
  30. function login(){
  31. console.log('login!');
  32. var url = "https://www.choozmo.com:8887/login";
  33. var username = $('#username').val();
  34. var password = $('#password').val();
  35. var regex = new RegExp("^[a-zA-Z0-9 ]+$");
  36. if (username == '' || password == '') {
  37. let title = "登入失敗";
  38. let text = "請先輸入您的帳號/密碼";
  39. if (lang == 'en') {
  40. title = "Login Failed!";
  41. text = "Please enter your username and password";
  42. }
  43. Swal.fire({
  44. title: title,
  45. icon: 'error',
  46. text: text,
  47. confirmButtonColor: '#3085d6',
  48. });
  49. return;
  50. }
  51. if (!regex.test(username)) {
  52. let title = "字元有誤";
  53. let text = "名稱僅得包含英文及數字";
  54. if (lang == 'en') {
  55. title = "Invalid username!";
  56. text = "Please enter valid username";
  57. }
  58. Swal.fire({
  59. title: title,
  60. icon: 'error',
  61. text: text,
  62. confirmButtonColor: '#3085d6',
  63. });
  64. return;
  65. }
  66. var data = "grant_type=&username=" + username + "&password="+password+"&scope=&client_id=&client_secret=";
  67. const headers = {
  68. "accept": "application/json",
  69. "Content-Type": "application/x-www-form-urlencoded"
  70. }
  71. $('.loading').show();
  72. console.log(data);
  73. axios({
  74. method: 'post',
  75. url: url,
  76. headers: headers,
  77. data: data
  78. }).then(res => {
  79. console.log(res.data);
  80. document.cookie = 'jwt_token='+res.data.access_token;
  81. if(res.data.access_token!=null && res.data.veri == 'ok') {
  82. var title = "登入成功";
  83. if (lang == 'en') { // 英文版訊息
  84. title = "Login Successfully!"
  85. }
  86. Swal.fire({
  87. title: title,
  88. icon: 'success',
  89. confirmButtonColor: '#3085d6',
  90. });
  91. $('.loading').hide();
  92. window.setTimeout(() => {
  93. window.location.href = 'user_profile2.html';
  94. }, 2000);
  95. btnLoginPage.style.display = 'none';
  96. } else if (res.data.access_token!=null && res.data.veri != 'ok') {
  97. var title = "請前往信箱完成驗證";
  98. $('.loading').hide();
  99. if (lang == 'en') { // 英文版訊息
  100. title = "Please check your email box to get validated!"
  101. }
  102. Swal.fire({
  103. title: title,
  104. icon: 'error',
  105. text: responseOBJ.detail,
  106. confirmButtonColor: '#3085d6',
  107. });
  108. } else {
  109. var title = "登入失敗";
  110. $('.loading').hide();
  111. if (lang == 'en') { // 英文版訊息
  112. title = "Login Failed!"
  113. }
  114. Swal.fire({
  115. title: title,
  116. icon: 'error',
  117. text: responseOBJ.detail,
  118. confirmButtonColor: '#3085d6',
  119. });
  120. }
  121. }).catch(err => {
  122. console.log(err);
  123. var title = "錯誤處理中,請稍後再試";
  124. if (lang == 'en') { // 英文版訊息
  125. title = "Oops! Errors occurred. Please try it later!"
  126. }
  127. Swal.fire({
  128. title: title,
  129. icon: 'error',
  130. confirmButtonColor: '#3085d6',
  131. });
  132. $('.loading').hide();
  133. })
  134. }
  135. /* var xhr = new XMLHttpRequest();
  136. xhr.open("POST", url);
  137. xhr.setRequestHeader("accept", "application/json");
  138. xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  139. xhr.onreadystatechange = function () {
  140. if (xhr.readyState === 4) {
  141. console.log(xhr.responseText); // test
  142. responseOBJ = JSON.parse(xhr.responseText);
  143. // document.cookie = 'jwt_token='+responseOBJ.jwt_token // access_token -> jwt_token
  144. document.cookie = 'jwt_token='+responseOBJ.access_token;
  145. console.log(responseOBJ);
  146. if (responseOBJ.access_token!=null)
  147. {
  148. var title = "登入成功";
  149. if (lang == 'en') { // 英文版訊息
  150. title = "Login Successfully!"
  151. }
  152. Swal.fire({
  153. title: title,
  154. icon: 'success',
  155. confirmButtonColor: '#3085d6',
  156. });
  157. window.setTimeout(() => {
  158. window.location.href = 'user_profile2.html';
  159. }, 2000);
  160. btnLoginPage.style.display = 'none';
  161. }
  162. else{
  163. var title = "登入失敗";
  164. if (lang == 'en') { // 英文版訊息
  165. title = "Login Failed!"
  166. }
  167. Swal.fire({
  168. title: title,
  169. icon: 'error',
  170. text: responseOBJ.detail,
  171. confirmButtonColor: '#3085d6',
  172. });
  173. }
  174. }
  175. };
  176. // 登入資料檢查
  177. if (username == '' || password == '') {
  178. let title = "登入失敗";
  179. let text = "請先輸入您的帳號/密碼";
  180. if (lang == 'en') {
  181. title = "Login Failed!";
  182. text = "Please enter your username and password";
  183. }
  184. Swal.fire({
  185. title: title,
  186. icon: 'error',
  187. text: text,
  188. confirmButtonColor: '#3085d6',
  189. });
  190. return;
  191. }
  192. result = xhr.send(data);
  193. console.log(result);
  194. } */
  195. function loginControl() {
  196. btnLoginPage.style.display = 'block';
  197. btnLogout.style.display = 'none';
  198. btnUserProfile.style.display = 'none';
  199. btnLoginPage_d.style.display = 'block';
  200. btnLogout_d.style.display = 'none';
  201. btnUserProfile_d.style.display = 'none';
  202. }
  203. loginControl();