client/src/components/UpsertUser.vue

   1 // Logic to login, or create / update a user (and also logout)
   2 <template lang="pug">
   3 div
   4   input#modalUser.modal(type="checkbox" @change="trySetEnterTime")
   5   div(role="dialog")
   6     .card
   7       label.modal-close(for="modalUser")
   8       h3 {{ stage }}
   9       form#userForm(@submit.prevent="onSubmit()")
  10         div(v-show="stage!='Login'")
  11           fieldset
  12             label(for="username") Name
  13             input#username(type="text" v-model="user.name")
  14           fieldset
  15             <label for="useremail">Email</label>
  16             <input id="useremail" type="email" v-model="user.email"/>
  17           fieldset
  18             <label for="notifyNew">Notify new moves &amp; games</label>
  19             <input id="notifyNew" type="checkbox" v-model="user.notify"/>
  20         div(v-show="stage=='Login'")
  21           fieldset
  22             <label for="nameOrEmail">Name or Email</label>
  23             <input id="nameOrEmail" type="text" v-model="nameOrEmail"/>
  24       .button-group
  25         button#submit(@click="onSubmit()")
  26           span {{ submitMessage }}
  27           i.material-icons send
  28         button(v-if="stage!='Update'" @click="toggleStage()")
  29           span {{ stage=="Login" ? "Register" : "Login" }}
  30         button(v-if="stage=='Update'" onClick="location.replace('/logout')")
  31           span Logout
  32       #dialog(:style="{display: displayInfo}") {{ infoMsg }}
  33 </template>
  34
  35 <script>
  36 import { store } from "@/store";
  37 export default {
  38   name: 'my-upsert-user',
  39     data: function() {
  40         return {
  41             user: store.state.user, //initialized with global user object
  42             nameOrEmail: "", //for login
  43             stage: (!store.state.user.id ? "Login" : "Update"),
  44             infoMsg: "",
  45             enterTime: Number.MAX_SAFE_INTEGER, //for a basic anti-bot strategy
  46         };
  47     },
  48     computed: {
  49         submitMessage: function() {
  50             switch (this.stage)
  51             {
  52                 case "Login":
  53                     return "Go";
  54                 case "Register":
  55                     return "Send";
  56                 case "Update":
  57                     return "Apply";
  58             }
  59         },
  60         displayInfo: function() {
  61             return (this.infoMsg.length > 0 ? "block" : "none");
  62         },
  63     },
  64     methods: {
  65         trySetEnterTime: function(event) {
  66             if (!!event.target.checked)
  67                 this.enterTime = Date.now();
  68         },
  69         toggleStage: function() {
  70             // Loop login <--> register (update is for logged-in users)
  71             this.stage = (this.stage == "Login" ? "Register" : "Login");
  72         },
  73         ajaxUrl: function() {
  74             switch (this.stage)
  75             {
  76                 case "Login":
  77                     return "/sendtoken";
  78                 case "Register":
  79                     return "/register";
  80                 case "Update":
  81                     return "/update";
  82             }
  83         },
  84         ajaxMethod: function() {
  85             switch (this.stage)
  86             {
  87                 case "Login":
  88                     return "GET";
  89                 case "Register":
  90                     return "POST";
  91                 case "Update":
  92                     return "PUT";
  93             }
  94         },
  95         infoMessage: function() {
  96             switch (this.stage)
  97             {
  98                 case "Login":
  99                     return "Connection token sent. Check your emails!";
 100                 case "Register":
 101                     return "Registration complete! Please check your emails.";
 102                 case "Update":
 103                     return "Modifications applied!";
 104             }
 105         },
 106         onSubmit: function() {
 107             // Basic anti-bot strategy:
 108             const exitTime = Date.now();
 109             if (this.stage == "Register" && exitTime - this.enterTime < 5000)
 110                 return; //silently return, in (curious) case of it was legitimate
 111             let error = undefined;
 112             if (this.stage == 'Login')
 113             {
 114                 const type = (this.nameOrEmail.indexOf('@') >= 0 ? "email" : "name");
 115                 error = checkNameEmail({[type]: this.nameOrEmail});
 116             }
 117             else
 118                 error = checkNameEmail(this.user);
 119             if (!!error)
 120                 return alert(error);
 121             this.infoMsg = "Processing... Please wait";
 122             ajax(this.ajaxUrl(), this.ajaxMethod(),
 123                 this.stage == "Login" ? { nameOrEmail: this.nameOrEmail } : this.user,
 124                 res => {
 125                     this.infoMsg = this.infoMessage();
 126                     if (this.stage != "Update")
 127                     {
 128                         this.nameOrEmail = "";
 129                         this.user["email"] = "";
 130                         this.user["name"] = "";
 131                         // Store our identifiers in local storage (by little anticipation...)
 132                         localStorage["myid"] = res.id;
 133                         localStorage["myname"] = res.name;
 134             // Also in global object
 135             this.$user.id = res.id;
 136             this.$user.name = res.name;
 137                     }
 138                     setTimeout(() => {
 139                         this.infoMsg = "";
 140                         if (this.stage == "Register")
 141                             this.stage = "Login";
 142                         document.getElementById("modalUser").checked = false;
 143                     }, 2000);
 144                 },
 145                 err => {
 146                     this.infoMsg = "";
 147                     alert(err);
 148                 }
 149             );
 150         },
 151     },
 152 };
 153 </script>