Browse Source

user profile 추가 및 user 업데이트 추가

kiboky 5 years ago
parent
commit
aab19d23da
3 changed files with 112 additions and 4 deletions
  1. 4 4
      client/components/Navbar.vue
  2. 83 0
      client/pages/profile.vue
  3. 25 0
      server/routes/auth.js

+ 4 - 4
client/components/Navbar.vue

@@ -6,9 +6,9 @@
           <!-- Logo -->
           <div class="col-sm-2">
             <div class="logo-area">
-              <a href="#">
+              <nuxt-link to="/">
                 <img src="/img/logo.png" alt="Logo" class="img-fluid">
-              </a>
+              </nuxt-link>
             </div>
           </div>
 
@@ -78,7 +78,7 @@
               <span class="icp-nav-link-border"></span>
               <template v-if="$auth.$state.loggedIn">
                 <nuxt-link
-                  to="/register"
+                  to="/profile"
                   class="nav-a nav-a-2"
                   id="nav-link-accountList"
                   tabindex="0"
@@ -89,7 +89,7 @@
               </template>
               <template v-else>
                 <nuxt-link
-                  to="/register"
+                  to="/signup"
                   class="nav-a nav-a-2"
                   id="nav-link-accountList"
                   tabindex="0"

+ 83 - 0
client/pages/profile.vue

@@ -0,0 +1,83 @@
+<template>
+  <main>
+    <div class="container-fluid c-section">
+      <div class="row">
+        <div class="col-sm-3"></div>
+        <div class="col-sm-6">
+          <div class="a-spacing-top-medium"></div>
+          <h2>Profile Page</h2>
+          <form action="">
+            <!-- Name -->
+            <div class="a-spacing-top-medium">
+              <label for="">Name</label>
+              <input
+                v-model="name"
+                :placeholder="$auth.$state.user.name"
+                type="text" class="a-input-text" />
+            </div>
+
+            <!-- Email -->
+            <div class="a-spacing-top-medium">
+              <label for="">Email</label>
+              <input
+                v-model="email"
+                :placeholder="$auth.$state.user.email"
+                type="text" class="a-input-text" />
+            </div>
+
+            <!-- Password -->
+            <div class="a-spacing-top-medium">
+              <label for="">password</label>
+              <input type="password" class="a-input-text" />
+            </div>
+
+            <hr/>
+            <!--Button-->
+            <div class="a-spacing-top-large">
+              <span class="a-button-register">
+                <span @click="onUpdateProfile" class="a-button-text">Update Profile</span>
+              </span>
+            </div>
+          </form>
+          <br/>
+        </div>
+        <div class="col-sm-3"></div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+export default {
+
+  data () {
+    return {
+      name: '',
+      email: ''
+    }
+  },
+
+  methods: {
+    async onUpdateProfile () {
+      try {
+        let data = {
+          name: this.name,
+          password: this.password,
+          email: this.email
+        }
+        let response = await this.$axios.$put('/api/auth/user', data)
+
+        if (response.success) {
+          this.name = ''
+          this.password = ''
+          this.email = ''
+
+          await this.$auth.fetchUser()
+        }
+      } catch (err) {
+        console.log(err)
+      }
+    }
+  }
+}
+</script>

+ 25 - 0
server/routes/auth.js

@@ -51,6 +51,31 @@ router.get('/auth/user', virifyToken, async (req, res) => {
   }
 })
 
+router.put('/auth/user', virifyToken, async (req, res) => {
+  try {
+    let foundUser = await User.findOne({ _id: req.decoded._id })
+    if(foundUser) {
+      if(req.body.name) foundUser.name = req.body.name
+      if(req.body.email) foundUser.email = req.body.email
+      if(req.body.password) foundUser.password = req.body.password
+
+      await foundUser.save()
+
+      res.json({
+        success: true,
+        // user: foundUser
+        message: 'Successfulu update'
+      })
+    }
+  } catch (err) {
+    res.status(500).json({
+      success: false,
+      message: err.message
+    })
+  }
+})
+
+
 router.post('/auth/login', async (req, res) => {
   try {
     let foundUser = await User.findOne({ email: req.body.email})