From 389b2a3148a35b86c1ff6c9585ab1467332a9e4e Mon Sep 17 00:00:00 2001
From: Helen Li <helen82198@gmail.com>
Date: Wed, 17 Feb 2021 16:25:04 -0800
Subject: [PATCH] allow user to login with email or username on NB server page

---
 routes/users.js                   | 28 ++++++++++++++++++++++++++++
 src/components/user/UserLogin.vue | 26 +++++++++++++++++++-------
 2 files changed, 47 insertions(+), 7 deletions(-)

diff --git a/routes/users.js b/routes/users.js
index 80ffeae..673cd63 100644
--- a/routes/users.js
+++ b/routes/users.js
@@ -59,6 +59,34 @@ router.post('/login', async (req, res) => {
     }
 });
 
+/**
+ * Auth login of user based on email or username.
+ * @name POST/api/users/new_login
+ */
+router.post('/new_login', async (req, res) => {
+  let user;
+  const password = req.body.user.password;
+
+  if (req.body.loginType === "Username") {
+    const username = req.body.user.username;
+    user = await User.findOne({ where: { username: username }})
+
+  } else if (req.body.loginType === "Email") {
+    const email = req.body.user.email;
+    user = await User.findOne({ where: { email: email }})
+  }
+  
+
+  if (!user) {
+      res.status(401).json({msg: "No user with that " + req.body.loginType});
+  } else if (!user.validPassword(password)) {
+      res.status(401).json({msg: "Incorrect password"});
+  } else {
+      const token = jwt.sign({ user: user }, process.env.JWT_SECRET);
+      res.status(200).json({ token });
+  }
+});
+
 router.post('/register', (req, res) => {
     User.create({
         username: req.body.username,
diff --git a/src/components/user/UserLogin.vue b/src/components/user/UserLogin.vue
index 6c8cf39..0308397 100644
--- a/src/components/user/UserLogin.vue
+++ b/src/components/user/UserLogin.vue
@@ -3,8 +3,14 @@
     <h3 class="title">Sign in</h3>
 
     <div class="group">
-      <label for="login-username"> Username: </label>
-      <input id="login-username" type="text" v-model="user.username">
+      <select v-model="selected">
+        <option>Username</option>
+        <option>Email</option>
+      </select>
+      <br>
+      <input v-if="selected === 'Username'" id="login-username" type="text" v-model="user.username">
+      <input v-if="selected === 'Email'" id="login-email" type="text" v-model="user.email">
+
     </div>
 
     <div class="group">
@@ -53,11 +59,13 @@
         },
         forgotPasswordMessage: "",
         message: null,
+        selected: "Username"
       }
     },
     computed: {
       submitEnabled: function() {
-        return this.user.username.length > 0 && this.user.password.length > 0
+        return ((this.selected === "Username" && this.user.username.length > 0)  || (this.selected === "Email" && this.user.email.length > 0))
+        && this.user.password.length > 0
       },
       forgotPasswordEnabled: function() {
         return this.user.email && this.user.email.length > 0
@@ -67,17 +75,17 @@
         login: async function() {
             try {
                 if(!this.submitEnabled) return
-                const res = await axios.post("/api/users/login", this.user)
+                const res = await axios.post("/api/users/new_login", {user: this.user, loginType: this.selected})
                 const token = res.data.token
                 localStorage.setItem("nb.user", token);
                 eventBus.$emit('signin-success')
                 this.resetForm()
             } catch (error) {
                 if (error.response.status === 401) {
-                    this.message = "Invalid username and password. Try again!"
+                    this.message = "Invalid " + this.selected.toLowerCase() + " and password. Try again!"
                 }
 
-                console.error(`Signin failed: ${err.response.data.error}`)
+                console.error(`Signin failed: ${error.response.data.msg}`)
             }
         },
         resetForm: function() {
@@ -125,8 +133,12 @@
     align-items: center;
     padding-bottom: 15px;
   }
+  .form .group select {
+    margin-right: 10px;
+    padding: 4px 0px 4px 4px
+  }
   .form .group label {
-    margin-right: 5px;
+    margin-right: 10px;
   }
   .form .group input {
     padding: 4px 6px;