LibreShort/src/views/ProfileView.vue

<template>
    <IonPage>
        <IonHeader>
            <IonToolbar>
                <IonButtons slot="start">
                    <IonBackButton text="" />
                </IonButtons>
                <IonTitle>Profile</IonTitle>
            </IonToolbar>
        </IonHeader>
        <IonContent>
            <div class="flex flex-col items-center mt-8">
                <div class="w-[72px] h-[72px] relative">
                    <img
                        class="w-[72px] h-[72px] object-cover rounded-full"
                        :src="avatar"
                        alt="avatar"
                    />
                    <div
                        class="absolute bottom-0 right-0 rounded-full bg-white text-black w-[20px] h-[20px] flex justify-center items-center"
                    >
                        <IonIcon class="text-sm" :icon="cameraOutline" />
                    </div>
                    <input
                        type="file"
                        accept="image/*"
                        class="absolute w-full h-full opacity-0 bottom-0 right-0"
                        @change="onChooseFile"
                    />
                </div>
                <div class="mt-4 text-xs text-neutral-500">
                    Current Logged In Email
                </div>
                <div class="text-sm">{{ user?.email }}</div>

                <div class="w-[250px]">
                    <input
                        v-model="username"
                        placeholder="username"
                        class="w-full h-10 mt-6 rounded-md px-4 bg-neutral-800 active:border-2 focus:border-2 border-prim focus:border-prim outline-none"
                    />

                    <button
                        class="mt-6 w-full h-10 bg-prim text-white rounded-md disabled:bg-opacity-50 disabled:text-opacity-50"
                        :disabled="disabled"
                        @click="save"
                    >
                        Save
                    </button>
                </div>
            </div>
        </IonContent>
    </IonPage>
</template>
<script setup lang="ts">
import { computed, ref, watch } from "vue";
import {
    IonPage,
    IonContent,
    IonHeader,
    IonToolbar,
    IonTitle,
    IonLabel,
    IonButtons,
    IonBackButton,
    IonIcon,
} from "@ionic/vue";
import { useUserStore } from "@/store/user";
import { storeToRefs } from "pinia";
import IconAvatar from "@/assets/icon_avatar.png";
import { cameraOutline } from "ionicons/icons";
import http from "@/plugins/http";
import toast from "@/plugins/toast";
const userStore = useUserStore();
const { user } = storeToRefs(userStore);
const { getUser } = userStore;
const username = ref("");
const avatar = ref("");
username.value = user.value?.username || "";
avatar.value = user.value?.avatar || IconAvatar;
const disabled = computed(() => {
    return username.value === user.value?.username;
});
async function onChooseFile(e: any) {
    console.log("onChooseFile", e);
    if (e.target.files.length > 0) {
        const file = e.target.files[0];
        console.log("file", file);
        const formData = new FormData();
        formData.append("file", file);
        const { url } = await http.post("/files/upload", formData);
        avatar.value = url;

        await http.put(`/users/${user.value?.id}`, { avatar: url });
        getUser();
    }
}

async function save() {
    try {
        await http.put(`/users/${user.value?.id}`, {
            username: username.value,
        });
        getUser();
        toast("Saved", { type: "success" });
    } catch (error: any) {
        console.error(error.error[0]?.message);
    }
}
</script>
<style lang="less" scoped></style>