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                 forename: "",
  29                 name: "",
  30                 email: "",
  31             },
  32             stage: "login", //or "register"
  33         },
  34         mounted: function() {
  35             // https://laracasts.com/discuss/channels/vue/vuejs-set-focus-on-textfield
  36             this.$refs.userEmail.focus();
  37         },
  38         methods: {
  39             toggleStage: function(stage) {
  40                 let $form = $("#form");
  41                 $form.fadeOut(animationDuration);
  42                 setTimeout( () => {
  43                     this.stage = stage;
  44                     $form.show(0);
  45                 }, animationDuration);
  46             },
  47             submit: function() {
  48                 if (this.stage=="register")
  49                 {
  50                     if (Date.now() - enterTime < 5000)
  51                         return;
  52                 }
  53                 let error = Validator.checkObject({email: this.user.email}, "User");
  54                 if (!error && this.stage == "register")
  55                     error = Validator.checkObject({forename: this.user.forename, name: this.user.name}, "User");
  56                 let $dialog = $("#dialog");
  57                 show($dialog);
  58                 setTimeout(() => {hide($dialog);}, 3000);
  59                 if (error.length > 0)
  60                     return showMsg($dialog, "error", error);
  61                 showMsg($dialog, "process", "Processing... Please wait");
  62                 $.ajax(ajaxUrl[this.stage],
  63                     {
  64                         method: "GET",
  65                         data:
  66                         {
  67                             email: encodeURIComponent(this.user.email),
  68                             forename: encodeURIComponent(this.user.forename), //may be unused
  69                             name: encodeURIComponent(this.user.name), //may be unused
  70                         },
  71                         dataType: "json",
  72                         success: res => {
  73                             if (!res.errmsg)
  74                             {
  75                                 this.user["forename"] = "";
  76                                 this.user["name"] = "";
  77                                 this.user["email"] = "";
  78                                 showMsg($dialog, "info", infos[this.stage]);
  79                             }
  80                             else
  81                                 showMsg($dialog, "error", res.errmsg);
  82                         },
  83                     }
  84                 );
  85             },
  86         }
  87     });
  88
  89 };