support update user profile

src/lib/services.js

@@ -72,4 +72,11 @@ export default {
     refreshToken: () => {
         return axios.post('v1/tokens/refresh.json');
     },
+    updateProfile: ({ email, nickname, password }) => {
+        return axios.post('v1/users/profile/update.json', {
+            email,
+            nickname,
+            password
+        });
+    },
 };

src/lib/userstate.js

@@ -32,6 +32,14 @@ function updateToken(item) {
     }
 }
 
+function updateUsername(value) {
+    localStorage.setItem(userNameLocalStorageKey, value);
+}
+
+function updateUserNickname(value) {
+    localStorage.setItem(userNickNameLocalStorageKey, value);
+}
+
 function clearToken() {
     localStorage.removeItem(tokenLocalStorageKey);
     localStorage.removeItem(userNameLocalStorageKey);
@@ -46,5 +54,7 @@ export default {
     getUserNickName,
     isUserLogined,
     updateToken,
+    updateUsername,
+    updateUserNickname,
     clearToken
 };

src/locales/en.js

@@ -54,6 +54,7 @@ export default {
     },
     'OK': 'OK',
     'Cancel': 'Cancel',
+    'Update': 'Update',
     'Done': 'Done',
     'User': 'User',
     'Application': 'Application',
@@ -102,6 +103,9 @@ export default {
     'You have been successfully registered': 'You have been successfully registered',
     'Unable to sign up': 'Unable to sign up',
     'User registration is disabled': 'User registration is disabled',
+    'Nothing has been modified': 'Nothing has been modified',
+    'Your profile has been successfully updated': 'Your profile has been successfully updated',
+    'Unable to update user profile': 'Unable to update user profile',
     'Log Out': 'Log Out',
     'Are you sure you want to log out?': 'Are you sure you want to log out?',
     'Unable to logout': 'Unable to logout',

src/locales/zh_Hans.js

@@ -54,6 +54,7 @@ export default {
     },
     'OK': '确定',
     'Cancel': '取消',
+    'Update': '更新',
     'Done': '完成',
     'User': '用户',
     'Application': '应用',
@@ -102,6 +103,9 @@ export default {
     'You have been successfully registered': '注册成功',
     'Unable to sign up': '无法注册',
     'User registration is disabled': '用户注册已禁用',
+    'Nothing has been modified': '没有修改的项目',
+    'Your profile has been successfully updated': '您的用户信息更新成功',
+    'Unable to update user profile': '无法更新用户信息',
     'Log Out': '退出登录',
     'Are you sure you want to log out?': '您确定是否要退出登录？',
     'Unable to logout': '无法退出登录',

src/router/mobile.js

@@ -6,6 +6,7 @@ import MainPageHomeTab from '../views/mobile/main/Home.vue';
 import LoginPage from '../views/mobile/Login.vue';
 import SignUpPage from '../views/mobile/Signup.vue';
 import SettingsPage from '../views/mobile/Settings.vue';
+import UserProfilePage from "../views/mobile/users/UserProfile.vue";
 
 function checkLogin(to, from, resolve, reject) {
     const router = this;
@@ -60,6 +61,11 @@ const routes = [
         component: SettingsPage,
         beforeEnter: checkLogin
     },
+    {
+        path: '/user/profile',
+        component: UserProfilePage,
+        beforeEnter: checkLogin
+    },
     {
         path: '(.*)',
         redirect: '/'

src/views/mobile/Settings.vue

@@ -3,7 +3,7 @@
         <f7-navbar :title="$t('Settings')" :back-link="$t('Back')"></f7-navbar>
         <f7-block-title>{{ userNickName }}</f7-block-title>
         <f7-list>
-            <f7-list-item :title="$t('User Profile')" link="#"></f7-list-item>
+            <f7-list-item :title="$t('User Profile')" link="/user/profile"></f7-list-item>
             <f7-list-button @click="logout">{{ $t('Log Out') }}</f7-list-button>
         </f7-list>
         <f7-block-title>{{ $t('Application') }}</f7-block-title>

src/views/mobile/users/UserProfile.vue

@@ -0,0 +1,144 @@
+<template>
+    <f7-page>
+        <f7-navbar :title="$t('User Profile')" :back-link="$t('Back')"></f7-navbar>
+        <f7-list no-hairlines-md>
+            <f7-list-input
+                type="password"
+                clear-button
+                :label="$t('Password')"
+                :placeholder="$t('Your password')"
+                :value="password"
+                @input="password = $event.target.value"
+            ></f7-list-input>
+
+            <f7-list-input
+                type="password"
+                clear-button
+                :label="$t('Confirmation Password')"
+                :placeholder="$t('Re-enter the password')"
+                :value="confirmPassword"
+                @input="confirmPassword = $event.target.value"
+            ></f7-list-input>
+
+            <f7-list-input
+                type="email"
+                clear-button
+                :label="$t('E-mail')"
+                :placeholder="$t('Your email address')"
+                :value="email"
+                @input="email = $event.target.value"
+            ></f7-list-input>
+
+            <f7-list-input
+                type="text"
+                clear-button
+                :label="$t('Nickname')"
+                :placeholder="$t('Your nickname')"
+                :value="nickname"
+                @input="nickname = $event.target.value"
+            ></f7-list-input>
+
+            <f7-list-item class="lab-list-item-error-info" v-if="inputIsInvalid" :footer="$t(inputInvalidProblemMessage)"></f7-list-item>
+        </f7-list>
+
+        <f7-button large fill :class="{ 'disabled': inputIsNotChanged }" :text="$t('Update')" @click="update"></f7-button>
+    </f7-page>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            password: '',
+            confirmPassword: '',
+            oldEmail: '',
+            email: '',
+            oldNickname: '',
+            nickname: ''
+        };
+    },
+    computed: {
+        inputIsNotChanged() {
+            return !!this.inputIsNotChangedProblemMessage;
+        },
+        inputIsInvalid() {
+            return !!this.inputInvalidProblemMessage;
+        },
+        inputIsNotChangedProblemMessage() {
+            if (!this.password && !this.confirmPassword && !this.email && !this.nickname) {
+                return 'Nothing has been modified';
+            } else if (!this.password && this.confirmPassword) {
+                return 'Password cannot be empty';
+            } else if (this.password && !this.confirmPassword) {
+                return 'Confirmation password cannot be empty';
+            } else {
+                return null;
+            }
+        },
+        inputInvalidProblemMessage() {
+            if (this.password && this.confirmPassword && this.password !== this.confirmPassword) {
+                return 'Password and confirmation password do not match';
+            } else {
+                return null;
+            }
+        }
+    },
+    methods: {
+        update() {
+            const self = this;
+            const app = self.$f7;
+            const router = self.$f7router;
+
+            let problemMessage = self.inputIsNotChangedProblemMessage || self.inputInvalidProblemMessage;
+
+            if (problemMessage) {
+                self.$alert(problemMessage);
+                return;
+            }
+
+            let hasResponse = false;
+
+            setTimeout(() => {
+                if (!hasResponse) {
+                    app.preloader.show();
+                }
+            }, 200);
+
+            self.$services.updateProfile({
+                password: self.password,
+                email: self.email,
+                nickname: self.nickname
+            }).then(response => {
+                hasResponse = true;
+                app.preloader.hide();
+                const data = response.data;
+
+                if (!data || !data.success || !data.result) {
+                    self.$alert('Unable to update user profile');
+                    return;
+                }
+
+                if (self.nickname) {
+                    self.$user.updateUserNickname(self.nickname);
+                }
+
+                if (typeof(data.result) === 'string') {
+                    self.$user.updateToken(data.result);
+                }
+
+                self.$toast('Your profile has been successfully updated');
+                router.back();
+            }).catch(error => {
+                hasResponse = true;
+                app.preloader.hide();
+
+                if (error.response && error.response.data && error.response.data.errorMessage) {
+                    self.$alert({ error: error.response.data });
+                } else {
+                    self.$alert('Unable to update user profile');
+                }
+            });
+        }
+    }
+};
+</script>