Refactor user avatar and profile components

components/user/Avatar.vue

@@ -1,72 +1,9 @@
-<script setup>
-const props = defineProps(['path'])
-const { path } = toRefs(props)
-
-const emit = defineEmits(['update:path', 'upload'])
-
-const supabase = useSupabaseClient()
-
-const uploading = ref(false)
-const src = ref('')
-const files = ref()
-
-const downloadImage = async () => {
-    try {
-        const { data, error } = await supabase.storage.from('avatars').download(path.value)
-        if (error) throw error
-        src.value = URL.createObjectURL(data)
-    } catch (error) {
-        console.error('Error downloading image: ', error.message)
-    }
-}
-
-const uploadAvatar = async (evt) => {
-    files.value = evt.target.files
-    try {
-        uploading.value = true
-
-        if (!files.value || files.value.length === 0) {
-            throw new Error('You must select an image to upload.')
-        }
-
-        const file = files.value[0]
-        const fileExt = file.name.split('.').pop()
-        const fileName = `${Math.random()}.${fileExt}`
-        const filePath = `${fileName}`
-
-        const { error: uploadError } = await supabase.storage.from('avatars').upload(filePath, file)
-
-        if (uploadError) throw uploadError
-
-        emit('update:path', filePath)
-        emit('upload')
-    } catch (error) {
-        alert(error.message)
-    } finally {
-        uploading.value = false
-    }
-}
-
-downloadImage()
-
-watch(path, () => {
-    if (path.value) {
-        downloadImage()
-    }
-})
+<script setup lang="ts">
+const user = useSupabaseUser()
+const userData = user.value;
+var userAvatar = "";
 </script>
 
 <template>
-    <div>
-        <img v-if="src" :src="src" alt="Avatar" class="avatar image" style="width: 10em; height: 10em;" />
-        <div v-else class="avatar no-image" :style="{ height: size, width: size }" />
-
-        <div style="width: 10em; position: relative;">
-            <label class="button primary block" for="single">
-                {{ uploading ? 'Uploading ...' : 'Upload' }}
-            </label>
-            <input style="position: absolute; visibility: hidden;" type="file" id="single" accept="image/*"
-                @change="uploadAvatar" :disabled="uploading" />
-        </div>
-    </div>
+    <UAvatar :src="userData?.user_metadata?.avatar_url" :alt="userData?.email" size="2xl" />
 </template>

components/user/ProfileCard.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+const user = useSupabaseUser()
+const userData = user.value;
+var userAvatar = "";
+var editable = false;
+
+const state = reactive({
+    email: userData?.email,
+    phone: userData?.phone,
+    id: userData?.id
+})
+
+const onUpdate = () => {
+
+}
+
+</script>
+
+<template>
+    <UCard>
+        <template #header>
+            <UserAvatar />
+        </template>
+
+        <UForm :state="state" class="space-y-4" @submit="onUpdate">
+            <UFormGroup label="UID" name="id">
+                <UInput v-model="state.id" disabled />
+            </UFormGroup>
+            <UFormGroup label="Email" name="email">
+                <UInput v-model="state.email" :disabled="!editable" />
+            </UFormGroup>
+            <UFormGroup label="Phone" name="phone">
+                <UInput v-model="state.phone" :disabled="!editable" />
+            </UFormGroup>
+
+            <UButton type="submit" :disabled="!editable">
+                Update
+            </UButton>
+        </UForm>
+
+        <template #footer>
+            <p>Last sign-in: {{ userData?.last_sign_in_at }}</p>
+        </template>
+    </UCard>
+</template>

pages/profile.vue

@@ -2,7 +2,7 @@
     <UPage>
         <UPageHeader title="Profile" />
         <UPageBody>
-            <UserAvatar />
+            <UserProfileCard />
         </UPageBody>
     </UPage>
 </template>