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#upsertDiv(
   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 import { processModalClick } from "@/utils/modalClick.js";
  63 export default {
  64   name: "my-upsert-user",
  65   data: function() {
  66     return {
  67       nameOrEmail: "", //for login
  68       logStage: "Login", //or Register
  69       infoMsg: "",
  70       enterTime: Number.MAX_SAFE_INTEGER, //for a basic anti-bot strategy
  71       st: store.state,
  72       user: {}
  73     };
  74   },
  75   mounted: function() {
  76     document.getElementById("upsertDiv")
  77       .addEventListener("click", processModalClick);
  78   },
  79   watch: {
  80     nameOrEmail: function(newValue) {
  81       if (newValue.indexOf("@") >= 0) {
  82         this.user.email = newValue;
  83         this.user.name = "";
  84       } else {
  85         this.user.name = newValue;
  86         this.user.email = "";
  87       }
  88     }
  89   },
  90   computed: {
  91     submitMessage: function() {
  92       switch (this.stage) {
  93         case "Login":
  94           return "Go";
  95         case "Register":
  96           return "Send";
  97         case "Update":
  98           return "Apply";
  99       }
 100       return "Never reached";
 101     },
 102     stage: function() {
 103       return this.st.user.id > 0 ? "Update" : this.logStage;
 104     }
 105   },
 106   methods: {
 107     trySetEnterTime: function(event) {
 108       if (event.target.checked) {
 109         this.infoMsg = "";
 110         this.enterTime = Date.now();
 111         document.getElementById("u_username").focus();
 112         this.user = {
 113           name: this.st.user.name,
 114           email: this.st.user.email,
 115           notify: this.st.user.notify
 116         };
 117       }
 118     },
 119     toggleStage: function() {
 120       // Loop login <--> register (update is for logged-in users)
 121       this.logStage = this.logStage == "Login" ? "Register" : "Login";
 122     },
 123     ajaxUrl: function() {
 124       switch (this.stage) {
 125         case "Login":
 126           return "/sendtoken";
 127         case "Register":
 128           return "/register";
 129         case "Update":
 130           return "/update";
 131       }
 132       return "Never reached";
 133     },
 134     ajaxMethod: function() {
 135       switch (this.stage) {
 136         case "Login":
 137           return "GET";
 138         case "Register":
 139           return "POST";
 140         case "Update":
 141           return "PUT";
 142       }
 143       return "Never reached";
 144     },
 145     infoMessage: function() {
 146       switch (this.stage) {
 147         case "Login":
 148           return "Connection token sent. Check your emails!";
 149         case "Register":
 150           return "Registration complete! Please check your emails now";
 151         case "Update":
 152           return "Modifications applied!";
 153       }
 154       return "Never reached";
 155     },
 156     onSubmit: function() {
 157       // Basic anti-bot strategy:
 158       const exitTime = Date.now();
 159       if (this.stage == "Register" && exitTime - this.enterTime < 5000) return;
 160       let error = undefined;
 161       if (this.stage == "Login") {
 162         const type = this.nameOrEmail.indexOf("@") >= 0 ? "email" : "name";
 163         error = checkNameEmail({ [type]: this.nameOrEmail });
 164       } else error = checkNameEmail(this.user);
 165       if (error) {
 166         alert(this.st.tr[error]);
 167         return;
 168       }
 169       this.infoMsg = "Processing... Please wait";
 170       ajax(
 171         this.ajaxUrl(),
 172         this.ajaxMethod(),
 173         {
 174           credentials: true,
 175           data: (
 176             this.stage == "Login"
 177               ? { nameOrEmail: this.nameOrEmail }
 178               : this.user
 179           ),
 180           success: () => {
 181             this.infoMsg = this.infoMessage();
 182             if (this.stage != "Update") this.nameOrEmail = "";
 183             else {
 184               this.st.user.name = this.user.name;
 185               this.st.user.email = this.user.email;
 186               this.st.user.notify = this.user.notify;
 187             }
 188           },
 189           error: (err) => {
 190             this.infoMsg = "";
 191             alert(err);
 192           }
 193         }
 194       );
 195     },
 196     doLogout: function() {
 197       document.getElementById("modalUser").checked = false;
 198       this.$router.push("/logout");
 199     }
 200   }
 201 };
 202 </script>
 203
 204 <style lang="sass" scoped>
 205 [type="checkbox"].modal+div .card
 206   max-width: 450px
 207   max-height: 100%
 208
 209 #dialog
 210   padding: 5px
 211   color: blue
 212 </style>