public/javascripts/login.js

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