random login image!

src/lib/db/getBackgroundImages.ts

@@ -0,0 +1,20 @@
+import { eq } from "drizzle-orm";
+import { db } from "./db.server";
+import { imagesTable } from "./schema";
+
+export const getBackgroundImages = async (numberOfResults: number | null) => {
+  const images = await db
+    .select({ url: imagesTable.url })
+    .from(imagesTable)
+    .where(eq(imagesTable.type, "background"))
+    .execute();
+
+  if (numberOfResults) {
+    let randomIndex = Math.floor(Math.random() * images.length);
+    return images.slice(randomIndex, randomIndex + numberOfResults) as {
+      url: string;
+    }[];
+  }
+
+  return images as { url: string }[];
+};

src/lib/db/schema.ts

@@ -103,3 +103,10 @@ export const adventureTable = pgTable("adventures", {
   date: text("date"),
   tripId: integer("tripId").references(() => userPlannedTrips.id),
 });
+
+export const imagesTable = pgTable("images", {
+  id: serial("id").primaryKey(),
+  url: text("url").notNull(),
+  type: text("type").notNull(),
+  adventureId: integer("adventureId").references(() => adventureTable.id),
+});

src/routes/api/upload/+server.ts

@@ -1,5 +1,7 @@
 // src/routes/api/upload.js
 
+import { db } from "$lib/db/db.server";
+import { imagesTable } from "$lib/db/schema";
 import { deleteObject, ensureBucketExists, uploadObject } from "$lib/server/s3";
 import type { RequestEvent } from "@sveltejs/kit";
 import { generateId } from "lucia";
@@ -10,6 +12,7 @@ export async function POST(event: RequestEvent): Promise<Response> {
     const fileExtension = contentType.split("/").pop();
     const fileName = `${generateId(75)}.${fileExtension}`;
     const bucket = event.request.headers.get("bucket") as string;
+    const type = event.request.headers.get("type") as string | null;
 
     if (!fileExtension || !fileName) {
       return new Response(JSON.stringify({ error: "Invalid file type" }), {
@@ -32,7 +35,6 @@ export async function POST(event: RequestEvent): Promise<Response> {
       );
     }
 
-    // check if the file is an image
     if (!contentType.startsWith("image")) {
       return new Response(JSON.stringify({ error: "Invalid file type" }), {
         status: 400,
@@ -49,7 +51,7 @@ export async function POST(event: RequestEvent): Promise<Response> {
 
     await ensureBucketExists(bucket);
 
-    if (event.locals.user?.icon) {
+    if (event.locals.user?.icon && bucket === "profile-pics") {
       const key: string = event.locals.user.icon.split("/").pop() as string;
       await deleteObject(bucket, key);
     }
@@ -60,6 +62,13 @@ export async function POST(event: RequestEvent): Promise<Response> {
       Buffer.from(fileBuffer)
     );
 
+    if (bucket === "images" && type && type === "background") {
+      let res = await db.insert(imagesTable).values({
+        url: objectUrl,
+        type: "background",
+      });
+    }
+
     console.log(`File uploaded to ${objectUrl}`);
 
     return new Response(JSON.stringify({ objectUrl }), {

src/routes/login/+page.server.ts

@@ -7,12 +7,13 @@ import type { Actions, PageServerLoad } from "./$types";
 import type { DatabaseUser } from "$lib/server/auth";
 import { userTable } from "$lib/db/schema";
 import { eq } from "drizzle-orm";
+import { getBackgroundImages } from "$lib/db/getBackgroundImages";
 
 export const load: PageServerLoad = async (event) => {
   if (event.locals.user) {
     return redirect(302, "/");
   }
-  return {};
+  return { images: await getBackgroundImages(1) };
 };
 
 export const actions: Actions = {

src/routes/login/+page.svelte

@@ -4,6 +4,11 @@
   import { getRandomQuote } from "$lib";
   import { redirect, type SubmitFunction } from "@sveltejs/kit";
   import { onMount } from "svelte";
+
+  export let data;
+
+  console.log(data);
+
   let quote: string = "";
   let errors: { message?: string } = {};
   let backgroundImageUrl = "https://source.unsplash.com/random/?mountains";
@@ -35,7 +40,7 @@
 
 <div
   class="min-h-screen bg-no-repeat bg-cover flex items-center justify-center"
-  style="background-image: url('{backgroundImageUrl}')"
+  style="background-image: url('{data.images[0].url}')"
 >
   <div class="card card-compact w-96 bg-base-100 shadow-xl p-6">
     <article class="text-center text-4xl font-extrabold">

src/routes/settings/+page.server.ts

@@ -42,15 +42,6 @@ export const actions: Actions = {
       };
     }
 
-    // if (icon.length > 1) {
-    //   return {
-    //     status: 400,
-    //     body: {
-    //       message: "Icon must be a single character",
-    //     },
-    //   };
-    // }
-
     const usernameTaken = await db
       .select()
       .from(userTable)

src/routes/settings/admin/+page.server.ts

@@ -1,10 +1,4 @@
-import {
-  error,
-  fail,
-  redirect,
-  type Actions,
-  type Handle,
-} from "@sveltejs/kit";
+import { error, fail, redirect, type Actions } from "@sveltejs/kit";
 import type { PageServerLoad } from "./$types";
 import { db } from "$lib/db/db.server";
 import {
@@ -201,4 +195,29 @@ export const actions: Actions = {
 
     return { success: true };
   },
+  background: async (event) => {
+    console.log("background");
+    const formData = await event.request.formData();
+    const background = formData.get("background") as File | null;
+    if (!background) {
+      return fail(400, { message: "No background provided" });
+    }
+    if (!event.locals.user) {
+      return redirect(302, "/");
+    }
+    let res = await event.fetch("/api/upload", {
+      method: "POST",
+      body: background,
+      headers: {
+        bucket: "images",
+        type: "background",
+      },
+    });
+    await res.json();
+    console.log("Background uploaded");
+    if (!res.ok) {
+      return fail(500, { message: "Failed to upload background" });
+    }
+    return { success: true };
+  },
 };

src/routes/settings/admin/+page.svelte

@@ -119,6 +119,24 @@
   />
 {/if}
 
+<h2 class="text-center font-extrabold text-2xl mb-2">Background Images</h2>
+<form
+  method="POST"
+  class="w-full max-w-xs"
+  use:enhance
+  action="?/background"
+  enctype="multipart/form-data"
+>
+  <label for="background">Background Image</label>
+  <input
+    type="file"
+    name="background"
+    id="background"
+    class="block mb-2 input input-bordered w-full max-w-xs"
+  />
+  <button type="submit" class="py-2 px-4 btn btn-primary">Upload</button>
+</form>
+
 <h2 class="text-center font-extrabold text-2xl">Admin Stats (All Users)</h2>
 <div class="flex items-center justify-center mb-4">
   <div class="stats stats-vertical lg:stats-horizontal shadow">