Start thinking about generalization format + parametrization
[qomet.git] / 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 });