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