chore: move frontend files

frontend/src/views/user/settings/Avatar.vue

@@ -0,0 +1,168 @@
+<template>
+	<card :title="$t('user.settings.avatar.title')">
+		<div class="control mb-4">
+			<label
+				v-for="(label, providerId) in AVATAR_PROVIDERS"
+				:key="providerId"
+				class="radio"
+			>
+				<input
+					v-model="avatarProvider"
+					name="avatarProvider"
+					type="radio"
+					:value="providerId"
+				>
+				{{ label }}
+			</label>
+		</div>
+
+		<template v-if="avatarProvider === 'upload'">
+			<input
+				ref="avatarUploadInput"
+				accept="image/*"
+				class="is-hidden"
+				type="file"
+				@change="cropAvatar"
+			>
+
+			<x-button
+				v-if="!isCropAvatar"
+				:loading="avatarService.loading || loading"
+				@click="avatarUploadInput.click()"
+			>
+				{{ $t('user.settings.avatar.uploadAvatar') }}
+			</x-button>
+			<template v-else>
+				<Cropper
+					ref="cropper"
+					:src="avatarToCrop"
+					:stencil-props="{aspectRatio: 1}"
+					class="mb-4 cropper"
+					@ready="() => loading = false"
+				/>
+				<x-button
+					v-cy="'uploadAvatar'"
+					:loading="avatarService.loading || loading"
+					@click="uploadAvatar"
+				>
+					{{ $t('user.settings.avatar.uploadAvatar') }}
+				</x-button>
+			</template>
+		</template>
+
+		<div
+			v-else
+			class="mt-2"
+		>
+			<x-button
+				:loading="avatarService.loading || loading"
+				class="is-fullwidth"
+				@click="updateAvatarStatus()"
+			>
+				{{ $t('misc.save') }}
+			</x-button>
+		</div>
+	</card>
+</template>
+
+<script lang="ts">
+export default { name: 'UserSettingsAvatar' }
+</script>
+
+<script setup lang="ts">
+import {computed, ref, shallowReactive} from 'vue'
+import {useI18n} from 'vue-i18n'
+import {Cropper} from 'vue-advanced-cropper'
+import 'vue-advanced-cropper/dist/style.css'
+
+import AvatarService from '@/services/avatar'
+import AvatarModel from '@/models/avatar'
+import {useTitle} from '@/composables/useTitle'
+import {success} from '@/message'
+import {useAuthStore} from '@/stores/auth'
+
+const {t} = useI18n({useScope: 'global'})
+const authStore = useAuthStore()
+
+const AVATAR_PROVIDERS = computed(() => ({
+	default: t('misc.default'),
+	initials: t('user.settings.avatar.initials'),
+	gravatar: t('user.settings.avatar.gravatar'),
+	marble: t('user.settings.avatar.marble'),
+	upload: t('user.settings.avatar.upload'),
+}))
+
+useTitle(() => `${t('user.settings.avatar.title')} - ${t('user.settings.title')}`)
+
+const avatarService = shallowReactive(new AvatarService())
+// Seperate variable because some things we're doing in browser take a bit
+const loading = ref(false)
+
+
+const avatarProvider = ref('')
+async function avatarStatus() {
+	const { avatarProvider: currentProvider } = await avatarService.get({})
+	avatarProvider.value = currentProvider
+}
+avatarStatus()
+
+
+async function updateAvatarStatus() {
+	await avatarService.update(new AvatarModel({avatarProvider: avatarProvider.value}))
+	success({message: t('user.settings.avatar.statusUpdateSuccess')})
+	authStore.reloadAvatar()
+}
+
+const cropper = ref()
+const isCropAvatar = ref(false)
+
+async function uploadAvatar() {
+	loading.value = true
+	const {canvas} = cropper.value.getResult()
+
+	if (!canvas) {
+		loading.value = false
+		return
+	}
+
+	try {
+		const blob = await new Promise(resolve => canvas.toBlob(blob => resolve(blob)))
+		await avatarService.create(blob)
+		success({message: t('user.settings.avatar.setSuccess')})
+		authStore.reloadAvatar()
+	} finally {
+		loading.value = false
+		isCropAvatar.value = false
+	}
+}
+
+const avatarToCrop = ref()
+const avatarUploadInput = ref()
+function cropAvatar() {
+	const avatar = avatarUploadInput.value.files
+
+	if (avatar.length === 0) {
+		return
+	}
+
+	loading.value = true
+	const reader = new FileReader()
+	reader.onload = e => {
+		avatarToCrop.value = e.target.result
+		isCropAvatar.value = true
+	}
+	reader.onloadend = () => loading.value = false
+	reader.readAsDataURL(avatar[0])
+}
+</script>
+
+<style lang="scss">
+.cropper {
+	height: 80vh;
+	background: transparent;
+}
+
+.vue-advanced-cropper__background {
+	background: var(--white);
+}
+</style>