public/javascripts/login.js

   1 window.onload = function() {
   2
   3     const messages = {
   4         "login": "Go",
   5         "register": "Send",
   6     };
   7
   8     const ajaxUrl = {
   9         "login": "/sendtoken",
  10         "register": "/register",
  11     };
  12
  13     const infos = {
  14         "login": "Connection token sent. Check your emails!",
  15         "register": "Registration complete! Please check your emails.",
  16     };
  17
  18     const animationDuration = 300; //in milliseconds
  19
  20     // Basic anti-bot measure: force at least N seconds between arrival on page, and register form validation:
  21     const enterTime = Date.now();
  22
  23     new Vue({
  24         el: '#login',
  25         data: {
  26             messages: messages,
  27             user: {
  28                 name: "",
  29                 email: "",
  30             },
  31             stage: "login", //or "register"
  32         },
  33         mounted: function() {
  34             // https://laracasts.com/discuss/channels/vue/vuejs-set-focus-on-textfield
  35             this.$refs.userEmail.focus();
  36         },
  37         methods: {
  38             toggleStage: function(stage) {
  39                 let $form = $("#form");
  40                 $form.fadeOut(animationDuration);
  41                 setTimeout( () => {
  42                     this.stage = stage;
  43                     $form.show(0);
  44                 }, animationDuration);
  45             },
  46             submit: function() {
  47                 if (this.stage=="register")
  48                 {
  49                     if (Date.now() - enterTime < 5000)
  50                         return;
  51                 }
  52                 let error = Validator.checkObject({email: this.user.email}, "User");
  53                 if (!error && this.stage == "register")
  54                     error = Validator.checkObject({name: this.user.name}, "User");
  55                 let $dialog = $("#dialog");
  56                 show($dialog);
  57                 setTimeout(() => {hide($dialog);}, 3000);
  58                 if (error.length > 0)
  59                     return showMsg($dialog, "error", error);
  60                 showMsg($dialog, "process", "Processing... Please wait");
  61                 $.ajax(ajaxUrl[this.stage],
  62                     {
  63                         method: "GET",
  64                         data:
  65                         {
  66                             email: encodeURIComponent(this.user.email),
  67                             name: encodeURIComponent(this.user.name), //may be unused
  68                         },
  69                         dataType: "json",
  70                         success: res => {
  71                             if (!res.errmsg)
  72                             {
  73                                 this.user["name"] = "";
  74                                 this.user["email"] = "";
  75                                 showMsg($dialog, "info", infos[this.stage]);
  76                             }
  77                             else
  78                                 showMsg($dialog, "error", res.errmsg);
  79                         },
  80                     }
  81                 );
  82             },
  83         }
  84     });
  85
  86 };