support update user profile

2026-05-15 15:37:33 +08:00 · 2020-10-28 00:58:54 +08:00
parent b853a21de8
commit 3d2cc7ff95
7 changed files with 176 additions and 1 deletions
@@ -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>
@@ -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>