cherrypick/src/client/app/mobile/views/pages/settings/settings.profile.vue

<template>
<ui-group>
	<div slot="title">%fa:pencil-alt% %i18n:@title%</div>

	<ui-form :disabled="saving">
		<ui-input v-model="name" :max="30">
			<span>%i18n:@name%</span>
		</ui-input>

		<ui-input v-model="username" readonly>
			<span>%i18n:@account%</span>
			<span slot="prefix">@</span>
			<span slot="suffix">@{{ host }}</span>
		</ui-input>

		<ui-input v-model="location">
			<span>%i18n:@location%</span>
			<span slot="prefix">%fa:map-marker-alt%</span>
		</ui-input>

		<ui-input v-model="birthday" type="date">
			<span>%i18n:@birthday%</span>
			<span slot="prefix">%fa:birthday-cake%</span>
		</ui-input>

		<ui-textarea v-model="description" :max="500">
			<span>%i18n:@description%</span>
		</ui-textarea>

		<ui-input type="file" @change="onAvatarChange">
			<span>%i18n:@avatar%</span>
			<span slot="prefix">%fa:picture-o%</span>
		</ui-input>

		<ui-input type="file" @change="onBannerChange">
			<span>%i18n:@banner%</span>
			<span slot="prefix">%fa:picture-o%</span>
		</ui-input>

		<ui-switch v-model="isCat">%i18n:@is-cat%</ui-switch>

		<ui-button @click="save">%i18n:@save%</ui-button>
	</ui-form>
</ui-group>
</template>

<script lang="ts">
import Vue from 'vue';
import { apiUrl, host } from '../../../../config';

export default Vue.extend({
	data() {
		return {
			host,
			name: null,
			username: null,
			location: null,
			description: null,
			birthday: null,
			avatarId: null,
			bannerId: null,
			isBot: false,
			isCat: false,
			saving: false,
			uploading: false
		};
	},

	created() {
		this.name = this.$store.state.i.name || '';
		this.username = this.$store.state.i.username;
		this.location = this.$store.state.i.profile.location;
		this.description = this.$store.state.i.description;
		this.birthday = this.$store.state.i.profile.birthday;
		this.avatarId = this.$store.state.i.avatarId;
		this.bannerId = this.$store.state.i.bannerId;
		this.isBot = this.$store.state.i.isBot;
		this.isCat = this.$store.state.i.isCat;
	},

	methods: {
		onAvatarChange([file]) {
			this.uploading = true;

			const data = new FormData();
			data.append('file', file);
			data.append('i', this.$store.state.i.token);

			fetch(apiUrl + '/drive/files/create', {
				method: 'POST',
				body: data
			})
			.then(response => response.json())
			.then(f => {
				this.avatarId = f.id;
				this.uploading = false;
			})
			.catch(e => {
				this.uploading = false;
				alert('%18n:!@upload-failed%');
			});
		},

		onBannerChange([file]) {
			this.uploading = true;

			const data = new FormData();
			data.append('file', file);
			data.append('i', this.$store.state.i.token);

			fetch(apiUrl + '/drive/files/create', {
				method: 'POST',
				body: data
			})
			.then(response => response.json())
			.then(f => {
				this.bannerId = f.id;
				this.uploading = false;
			})
			.catch(e => {
				this.uploading = false;
				alert('%18n:!@upload-failed%');
			});
		},

		save() {
			this.saving = true;

			(this as any).api('i/update', {
				name: this.name || null,
				location: this.location || null,
				description: this.description || null,
				birthday: this.birthday || null,
				avatarId: this.avatarId,
				bannerId: this.bannerId,
				isBot: this.isBot,
				isCat: this.isCat
			}).then(i => {
				this.saving = false;
				this.$store.state.i.avatarId = i.avatarId;
				this.$store.state.i.avatarUrl = i.avatarUrl;
				this.$store.state.i.bannerId = i.bannerId;
				this.$store.state.i.bannerUrl = i.bannerUrl;

				alert('%i18n:@saved%');
			});
		}
	}
});
</script>