client/src/components/UpsertUser.vue

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