|
@@ -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>
|