Proyecto en colaboración con OPASO

login.js 4.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. /* Authors : Carlos C. Corrada-Bravo
  2. David J. Ortiz-Rivera
  3. Organization : Centro de Desarrollo y Consultoria Computacional
  4. Project : OPASO Material Registry
  5. File : login.js
  6. Description : Validate and submit login info */
  7. /* global variables */
  8. var status,message;
  9. /* set listeners when document is ready */
  10. $(document).ready(function(){
  11. /* check for errors */
  12. error_handler();
  13. /* animate form on hover */
  14. $(".login-field").hover(function(){
  15. /* extract arg */
  16. let id = $(this).attr("id");
  17. hover_input(id,true);
  18. },function(){
  19. /* extract arg */
  20. let text = $(this).val();
  21. /* remove */
  22. if(!is_valid(text)){
  23. let id = $(this).attr("id");
  24. hover_input(id,false);
  25. }
  26. });
  27. /* animate form on input */
  28. $(".login-field").on("input",function(){
  29. /* extract args */
  30. let text = $(this).val();
  31. let id = $(this).attr("id");
  32. /* remove */
  33. if(!is_valid(text)){
  34. hover_input(id);
  35. }
  36. else{
  37. hover_input(id,true);
  38. }
  39. });
  40. /* submit login */
  41. $(".submit-login").click(log_in);
  42. /* show/hide password */
  43. $(".view-password").click(function(){
  44. /* extract args */
  45. let id = `#${$(this).attr("value")}`;
  46. let type = $(id).attr("type");
  47. /* hide password */
  48. if(type === "text"){
  49. $(id).attr("type","password");
  50. }
  51. /* show password */
  52. else{
  53. $(id).attr("type","text");
  54. }
  55. $(this).toggleClass("fa-eye");
  56. $(this).toggleClass("fa-eye-slash");
  57. });
  58. });
  59. /* hover_input(id: string) - animate field placeholder */
  60. function hover_input(id,flag){
  61. /* generate selectors */
  62. let field = `#${id}`;
  63. let placeholder = `.${id}`;
  64. let circle = `.${id}-circle`;
  65. $(field).toggleClass("shrink",flag);
  66. $(placeholder).toggleClass("slide",flag);
  67. $(circle).toggleClass("hide",flag);
  68. }
  69. /* log_in() - validate and submit credentials */
  70. function log_in(){
  71. /* extract args */
  72. let email = $("#email").val();
  73. let password = $("#password").val();
  74. /* validate credentials */
  75. if(is_valid(email) && is_valid(password)){
  76. $(".invalid").removeClass("invalid");
  77. $(".invalid-icon").removeClass("invalid-icon");
  78. $.post("/scripts/opaso",{query:1,email:email,password:password},function(data){
  79. // console.log(data);
  80. /* extract response */
  81. let response = JSON.parse(data);
  82. let status = response["status"];
  83. /* handle by status */
  84. switch(status){
  85. case "success": /* on success, redirect */
  86. window.location.href = "/menu";
  87. break;
  88. default: /* on failure/error, display message */
  89. set_alert(status,response["message"]);
  90. break;
  91. }
  92. });
  93. }
  94. /* invalid login info */
  95. else{
  96. $(".login-field").each(function(){
  97. /* extract id */
  98. var id = $(this).attr("id");
  99. var selector = `.${id}-circle`;
  100. /* highlight invalid field */
  101. if(!$(this).val()){
  102. $(this).parent().addClass("invalid");
  103. $(selector).addClass("invalid-icon");
  104. }
  105. /* unhighighlight valid field */
  106. else{
  107. $(this).parent().removeClass("invalid");
  108. $(selector).removeClass("invalid-icon");
  109. }
  110. });
  111. /* display alert */
  112. status = "warning";
  113. message = "All fields required";
  114. set_alert(status,message);
  115. }
  116. }
  117. /* error_handler() - handle token errors */
  118. function error_handler(){
  119. /* extract error */
  120. let error = get_arg("error");
  121. if(error){
  122. switch(error){
  123. case "login_failed":
  124. set_alert("error","Login failed");
  125. break;
  126. case "token_expired":
  127. set_alert("error","Invalid token");
  128. break;
  129. case "session_expired":
  130. set_alert("error","Session expired");
  131. break;
  132. default:
  133. set_alert("error","Some error occurred");
  134. break;
  135. }
  136. }
  137. }