public/javascripts/components/upsertUser.js

   1 // Logic to login, or create / update a user (and also logout)
   2 Vue.component('my-upsert-user', {
   3     props: ["initUser"], //to find the game in storage (assumption: it exists)
   4     data: function() {
   5         return {
   6             user: initUser, //initialized with prop value
   7             stage: (!initUser.email ? "Login" : "Update"),
   8             infoMsg: "",
   9         };
  10     },
  11     template: `
  12         <div>
  13             <input id="modalUser" class="modal" type="checkbox"/>
  14             <div role="dialog">
  15                 <div class="card">
  16                     <label class="modal-close" for="modalUser">
  17                     <h3>{{ stage }}</h3>
  18                     <form id="userForm" @submit.prevent="submit">
  19                         <fieldset>
  20                             <label for="useremail">Email</label>
  21                             <input id="useremail" type="email" v-model="user.email"/>
  22                         <fieldset>
  23                             <label for="username">Name</label>
  24                             <input id="username" type="text" v-model="user.name"/>
  25                         </fieldset>
  26                         <fieldset>
  27                             <label for="notifyNew">Notify new moves &amp; games</label>
  28                             <input id="notifyNew" type="checkbox" v-model="user.notify"/>
  29                         <button id="submit" @click.prevent="submit">
  30                             <span>{{ submitMessage }}</span>
  31                             <i class="material-icons">send</i>
  32                 <p v-if="stage!='Update'">
  33                     <button @click.prevent="toggleStage()">
  34                         <span>{{ stage=="Login" ? "Register" : "Login" }}</span>
  35                     </button>
  36                     <button>Logout</button>
  37                 </p>
  38                 <div id="dialog" :style="{display: displayInfo}">{{ infoMsg }}</div>
  39             </div>
  40         </div>
  41     `,
  42     computed: {
  43         submitMessage: function() {
  44             switch (this.stage)
  45             {
  46                 case "Login":
  47                     return "Go";
  48                 case "Register":
  49                     return "Send";
  50                 case "Update":
  51                     return "Apply";
  52             }
  53         },
  54         displayInfo: function() {
  55             return (this.infoMsg.length > 0 ? "block" : "none");
  56         },
  57     },
  58     methods: {
  59         toggleStage: function() {
  60             this.stage = (this.stage == "Login" ? "Register" : "Login");
  61         },
  62         ajaxUrl: function() {
  63             switch (this.stage)
  64             {
  65                 case "Login":
  66                     return "/sendtoken";
  67                 case "Register":
  68                     return "/register";
  69                 case "Update":
  70                     return "/update";
  71             }
  72         },
  73         ajaxMethod: function() {
  74             switch (this.stage)
  75             {
  76                 case "Login":
  77                     return "GET";
  78                 case "Register":
  79                     return "POST";
  80                 case "Update":
  81                     return "PUT";
  82             }
  83         },
  84         infoMessage: function() {
  85             switch (this.stage)
  86             {
  87                 case "Login":
  88                     return "Connection token sent. Check your emails!";
  89                 case "Register":
  90                     return "Registration complete! Please check your emails.";
  91                 case "Update":
  92                     return "Modifications applied!";
  93             }
  94         },
  95         submit: function() {
  96             // TODO: re-activate simple measures like this: (using time of click on modal)
  97 //          const exitTime = new Date();
  98 //          if (this.stage=="Register" && exitTime.getTime() - enterTime.getTime() < 5000)
  99 //              return;
 100             if (!this.user.name.match(/[a-z0-9_]+/i))
 101                 return alert("User name: only alphanumerics and underscore");
 102             this.infoMsg = "Processing... Please wait";
 103             ajax(this.ajaxUrl(), this.ajaxMethod(),
 104                 this.stage == "Login" ? "PUT" : "POST", this.user,
 105                 res => {
 106                     this.infoMsg = this.infoMessage();
 107                     if (this.stage != "Update")
 108                     {
 109                         this.user["email"] = "";
 110                         this.user["name"] = "";
 111                     }
 112                     setTimeout(() => {
 113                         this.infoMsg = "";
 114                         document.getElementById("modalUser").checked = false;
 115                     }, 2000);
 116                 }
 117             );
 118         },
 119     }
 120 });