client/src/components/UpsertUser.vue

   1 <template lang="pug">
   2 div
   3   input#modalUser.modal(
   4     type="checkbox"
   5     @change="trySetEnterTime($event)"
   6   )
   7   div(
   8     role="dialog"
   9     data-checkbox="modalUser"
  10   )
  11     .card
  12       label.modal-close(for="modalUser")
  13       h3.section {{ st.tr[stage] }}
  14       div(@keyup.enter="onSubmit()")
  15         div(v-show="stage!='Login'")
  16           fieldset
  17             label(for="u_username") {{ st.tr["User name"] }}
  18             input#u_username(
  19               type="text"
  20               v-model="user.name"
  21             )
  22           fieldset
  23             label(for="u_useremail") {{ st.tr["Email"] }}
  24             input#u_useremail(
  25               type="email"
  26               v-model="user.email"
  27             )
  28           fieldset
  29             label(for="notifyNew") {{ st.tr["Notifications by email"] }}
  30             input#notifyNew(
  31               type="checkbox"
  32               v-model="user.notify"
  33             )
  34         div(v-show="stage=='Login'")
  35           fieldset
  36             label(for="nameOrEmail") {{ st.tr["Name or Email"] }}
  37             input#nameOrEmail(
  38               type="text"
  39               v-model="nameOrEmail"
  40             )
  41       .button-group
  42         button(@click="onSubmit()")
  43           span {{ st.tr[submitMessage] }}
  44         button(
  45           v-if="stage!='Update'"
  46           type="button"
  47           @click="toggleStage()"
  48         )
  49           span {{ st.tr[stage=="Login" ? "Register" : "Login"] }}
  50         button(
  51           v-else type="button"
  52           @click="doLogout()"
  53         )
  54           span {{ st.tr["Logout"] }}
  55       #dialog.text-center {{ st.tr[infoMsg] }}
  56 </template>
  57
  58 <script>
  59 import { store } from "@/store";
  60 import { checkNameEmail } from "@/data/userCheck";
  61 import { ajax } from "@/utils/ajax";
  62 export default {
  63   name: "my-upsert-user",
  64   data: function() {
  65     return {
  66       nameOrEmail: "", //for login
  67       logStage: "Login", //or Register
  68       infoMsg: "",
  69       enterTime: Number.MAX_SAFE_INTEGER, //for a basic anti-bot strategy
  70       st: store.state,
  71       user: {}
  72     };
  73   },
  74   watch: {
  75     nameOrEmail: function(newValue) {
  76       if (newValue.indexOf("@") >= 0) {
  77         this.user.email = newValue;
  78         this.user.name = "";
  79       } else {
  80         this.user.name = newValue;
  81         this.user.email = "";
  82       }
  83     }
  84   },
  85   computed: {
  86     submitMessage: function() {
  87       switch (this.stage) {
  88         case "Login":
  89           return "Go";
  90         case "Register":
  91           return "Send";
  92         case "Update":
  93           return "Apply";
  94       }
  95       return "Never reached";
  96     },
  97     stage: function() {
  98       return this.st.user.id > 0 ? "Update" : this.logStage;
  99     }
 100   },
 101   methods: {
 102     trySetEnterTime: function(event) {
 103       if (event.target.checked) {
 104         this.infoMsg = "";
 105         this.enterTime = Date.now();
 106         document.getElementById("u_username").focus();
 107         this.user = {
 108           name: this.st.user.name,
 109           email: this.st.user.email,
 110           notify: this.st.user.notify
 111         };
 112       }
 113     },
 114     toggleStage: function() {
 115       // Loop login <--> register (update is for logged-in users)
 116       this.logStage = this.logStage == "Login" ? "Register" : "Login";
 117     },
 118     ajaxUrl: function() {
 119       switch (this.stage) {
 120         case "Login":
 121           return "/sendtoken";
 122         case "Register":
 123           return "/register";
 124         case "Update":
 125           return "/update";
 126       }
 127       return "Never reached";
 128     },
 129     ajaxMethod: function() {
 130       switch (this.stage) {
 131         case "Login":
 132           return "GET";
 133         case "Register":
 134           return "POST";
 135         case "Update":
 136           return "PUT";
 137       }
 138       return "Never reached";
 139     },
 140     infoMessage: function() {
 141       switch (this.stage) {
 142         case "Login":
 143           return "Connection token sent. Check your emails!";
 144         case "Register":
 145           return "Registration complete! Please check your emails now";
 146         case "Update":
 147           return "Modifications applied!";
 148       }
 149       return "Never reached";
 150     },
 151     onSubmit: function() {
 152       // Basic anti-bot strategy:
 153       const exitTime = Date.now();
 154       if (this.stage == "Register" && exitTime - this.enterTime < 5000) return;
 155       let error = undefined;
 156       if (this.stage == "Login") {
 157         const type = this.nameOrEmail.indexOf("@") >= 0 ? "email" : "name";
 158         error = checkNameEmail({ [type]: this.nameOrEmail });
 159       } else error = checkNameEmail(this.user);
 160       if (error) {
 161         alert(this.st.tr[error]);
 162         return;
 163       }
 164       this.infoMsg = "Processing... Please wait";
 165       ajax(
 166         this.ajaxUrl(),
 167         this.ajaxMethod(),
 168         this.stage == "Login"
 169           ? { nameOrEmail: this.nameOrEmail }
 170           : this.user,
 171         () => {
 172           this.infoMsg = this.infoMessage();
 173           if (this.stage != "Update") this.nameOrEmail = "";
 174           else {
 175             this.st.user.name = this.user.name;
 176             this.st.user.email = this.user.email;
 177             this.st.user.notify = this.user.notify;
 178           }
 179         },
 180         err => {
 181           this.infoMsg = "";
 182           alert(err);
 183         }
 184       );
 185     },
 186     doLogout: function() {
 187       document.getElementById("modalUser").checked = false;
 188       this.$router.push("/logout");
 189     }
 190   }
 191 };
 192 </script>
 193
 194 <style lang="sass" scoped>
 195 [type="checkbox"].modal+div .card
 196   max-width: 450px
 197   max-height: 100%
 198
 199 #dialog
 200   padding: 5px
 201   color: blue
 202 </style>