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       form(@submit.prevent="onSubmit()" @keyup.enter="onSubmit()")
  15         div(v-show="stage!='Login'")
  16           fieldset
  17             label(for="username") {{ st.tr["User name"] }}
  18             input#username(
  19               type="text"
  20               v-model="st.user.name"
  21             )
  22           fieldset
  23             label(for="useremail") {{ st.tr["Email"] }}
  24             input#useremail(
  25               type="email"
  26               v-model="st.user.email"
  27             )
  28           fieldset
  29             label(for="notifyNew") {{ st.tr["Notifications by email"] }}
  30             input#notifyNew(
  31               type="checkbox"
  32               v-model="st.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     };
  72   },
  73   watch: {
  74     nameOrEmail: function(newValue) {
  75       if (newValue.indexOf("@") >= 0) {
  76         this.st.user.email = newValue;
  77         this.st.user.name = "";
  78       } else {
  79         this.st.user.name = newValue;
  80         this.st.user.email = "";
  81       }
  82     }
  83   },
  84   computed: {
  85     submitMessage: function() {
  86       switch (this.stage) {
  87         case "Login":
  88           return "Go";
  89         case "Register":
  90           return "Send";
  91         case "Update":
  92           return "Apply";
  93       }
  94       return "Never reached";
  95     },
  96     stage: function() {
  97       return this.st.user.id > 0 ? "Update" : this.logStage;
  98     }
  99   },
 100   methods: {
 101     trySetEnterTime: function(event) {
 102       if (event.target.checked) {
 103         this.infoMsg = "";
 104         this.enterTime = Date.now();
 105       }
 106     },
 107     toggleStage: function() {
 108       // Loop login <--> register (update is for logged-in users)
 109       this.logStage = this.logStage == "Login" ? "Register" : "Login";
 110     },
 111     ajaxUrl: function() {
 112       switch (this.stage) {
 113         case "Login":
 114           return "/sendtoken";
 115         case "Register":
 116           return "/register";
 117         case "Update":
 118           return "/update";
 119       }
 120       return "Never reached";
 121     },
 122     ajaxMethod: function() {
 123       switch (this.stage) {
 124         case "Login":
 125           return "GET";
 126         case "Register":
 127           return "POST";
 128         case "Update":
 129           return "PUT";
 130       }
 131       return "Never reached";
 132     },
 133     infoMessage: function() {
 134       switch (this.stage) {
 135         case "Login":
 136           return "Connection token sent. Check your emails!";
 137         case "Register":
 138           return "Registration complete! Please check your emails";
 139         case "Update":
 140           return "Modifications applied!";
 141       }
 142       return "Never reached";
 143     },
 144     onSubmit: function() {
 145       // Basic anti-bot strategy:
 146       const exitTime = Date.now();
 147       if (this.stage == "Register" && exitTime - this.enterTime < 5000) return;
 148       let error = undefined;
 149       if (this.stage == "Login") {
 150         const type = this.nameOrEmail.indexOf("@") >= 0 ? "email" : "name";
 151         error = checkNameEmail({ [type]: this.nameOrEmail });
 152       } else error = checkNameEmail(this.st.user);
 153       if (error) {
 154         alert(error);
 155         return;
 156       }
 157       this.infoMsg = "Processing... Please wait";
 158       ajax(
 159         this.ajaxUrl(),
 160         this.ajaxMethod(),
 161         this.stage == "Login"
 162           ? { nameOrEmail: this.nameOrEmail }
 163           : this.st.user,
 164         () => {
 165           this.infoMsg = this.infoMessage();
 166           if (this.stage != "Update") this.nameOrEmail = "";
 167         },
 168         err => {
 169           this.infoMsg = "";
 170           alert(err);
 171         }
 172       );
 173     },
 174     doLogout: function() {
 175       document.getElementById("modalUser").checked = false;
 176       this.$router.push("/logout");
 177     }
 178   }
 179 };
 180 </script>
 181
 182 <style lang="sass" scoped>
 183 [type="checkbox"].modal+div .card
 184   max-width: 370px
 185   max-height: 100%
 186
 187 #dialog
 188   padding: 5px
 189   color: blue
 190 </style>