✨ Banner

pkg/views/src/layouts/master.vue

@@ -2,7 +2,7 @@
   <v-app-bar height="64" color="primary" scroll-behavior="elevate" flat>
     <div class="max-md:px-5 md:px-12 flex flex-grow-1 items-center">
       <router-link :to="{ name: 'dashboard' }" class="flex gap-1">
-        <img src="/favicon.png" width="24" height="24" class="icon-filter" />
+        <img src="/favicon.png" width="27" height="24" class="icon-filter" />
         <h2 class="ml-2 text-lg font-500">Solarpass</h2>
       </router-link>
 

pkg/views/src/layouts/user-center.vue

@@ -1,7 +1,7 @@
 <template>
   <v-container class="pt-6 px-6">
     <v-row>
-      <v-col :xs="12" :sm="12" :md="4" :lg="3">
+      <v-col :cols="12" :xs="12" :sm="12" :md="4" :lg="3">
         <v-card title="Navigation">
           <v-list density="comfortable">
             <v-list-item title="Dashboard" prepend-icon="mdi-view-dashboard" :to="{ name: 'dashboard' }" exact />
@@ -11,7 +11,7 @@
         </v-card>
       </v-col>
 
-      <v-col :xs="12" :sm="12" :md="8" :lg="9">
+      <v-col :cols="12" :xs="12" :sm="12" :md="8" :lg="9">
         <router-view />
       </v-col>
     </v-row>

pkg/views/src/views/personalize.vue

@@ -70,29 +70,44 @@
     </v-card>
 
     <v-card>
-      <template #text>
-        <div class="flex items-center gap-3">
-          <v-avatar
-            color="grey-lighten-2"
-            icon="mdi-account-circle"
-            class="rounded-card"
-            size="large"
-            :image="'/api/avatar/' + id.userinfo.data.avatar"
-          />
-          <v-file-input
-            clearable
-            hide-details
-            label="Upload another avatar"
-            variant="outlined"
-            density="comfortable"
-            accept="image/*"
-            prepend-icon=""
-            append-icon="mdi-upload"
-            v-model="avatar"
-            @click:append="applyAvatar"
-          />
-        </div>
-      </template>
+      <v-card-text class="flex items-center gap-3">
+        <v-avatar
+          color="grey-lighten-2"
+          icon="mdi-account-circle"
+          class="rounded-card"
+          size="large"
+          :image="'/api/avatar/' + id.userinfo.data.avatar"
+        />
+        <v-file-input
+          clearable
+          hide-details
+          label="Upload another avatar"
+          variant="outlined"
+          density="comfortable"
+          accept="image/*"
+          prepend-icon=""
+          append-icon="mdi-upload"
+          v-model="avatar"
+          @click:append="applyAvatar"
+        />
+      </v-card-text>
+
+      <v-img cover class="bg-grey-lighten-2" :height="320" :src="'/api/avatar/' + id.userinfo.data.banner" />
+
+      <v-card-text>
+        <v-file-input
+          clearable
+          hide-details
+          label="Update your banner"
+          variant="outlined"
+          density="compact"
+          accept="image/*"
+          prepend-icon=""
+          append-icon="mdi-upload"
+          v-model="banner"
+          @click:append="applyBanner"
+        />
+      </v-card-text>
     </v-card>
 
     <v-snackbar v-model="done" :timeout="3000"> Your personal information has been updated. </v-snackbar>
@@ -115,6 +130,7 @@ const loading = ref(false)
 
 const data = ref<any>({})
 const avatar = ref<any>(null)
+const banner = ref<any>(null)
 
 watch(
   id,
@@ -161,7 +177,7 @@ async function applyAvatar() {
   payload.set("avatar", avatar.value[0])
 
   loading.value = true
-  const res = await request("/api/avatar", {
+  const res = await request("/api/users/me/avatar", {
     method: "PUT",
     headers: { Authorization: `Bearer ${getAtk()}` },
     body: payload,
@@ -176,6 +192,31 @@ async function applyAvatar() {
   }
   loading.value = false
 }
+
+async function applyBanner() {
+  if (!banner.value) return
+
+  if (loading.value) return
+
+  const payload = new FormData()
+  payload.set("banner", banner.value[0])
+
+  loading.value = true
+  const res = await request("/api/users/me/banner", {
+    method: "PUT",
+    headers: { Authorization: `Bearer ${getAtk()}` },
+    body: payload,
+  })
+  if (res.status !== 200) {
+    error.value = await res.text()
+  } else {
+    await id.readProfiles()
+    done.value = true
+    error.value = null
+    banner.value = null
+  }
+  loading.value = false
+}
 </script>
 
 <style>