Merge branch 'state' into dashboard-refresh

src/components/dashboard/Settings.tsx

@@ -3,7 +3,8 @@
 // import { isSettingsOpen, userInfo } from "~/lib/stores";
 // import { StereoUser } from "~/lib/types";
 
-import { component$, useComputed$, useSignal, useTask$ } from "@builder.io/qwik";
+import { $, component$, useComputed$, useSignal, useTask$ } from "@builder.io/qwik";
+import ky from "ky";
 import { useNanostore$ } from "~/hooks/nanostores";
 import { isSettingsOpen } from "~/lib/stores";
 
@@ -34,9 +35,22 @@ const PrivacyAndSecurity = component$(() => {
 });
 
 const DangerZone = component$(() => {
+    const handleLogout = $(() => {
+        ky.get("/api/auth/logout", { credentials: "include" })
+        .then(() => {
+            window.location.href = "/";
+        });
+    });
+
     return (
         <div>
             <p>delete your account and data here</p>
+            <button
+                onClick$={handleLogout}
+                class="text-white bg-stereo hover:bg-stereo/80 transition-colors rounded-lg px-4 py-2"
+            >
+                log out
+            </button>
         </div>
     );
 });

src/components/landing/CallToAction.tsx

@@ -1,5 +1,4 @@
 import { component$ } from "@builder.io/qwik";
-import { OAUTH_LINK } from "~/lib/constants";
 
 export default component$(() => (
     <div
@@ -14,7 +13,7 @@ export default component$(() => (
             join over <span class="text-stereo">100k</span> other people hosting their files with <span class="text-stereo">stereo</span>!
         </p>
         <a
-            href={OAUTH_LINK}
+            href={"/api/auth/login"}
             class="px-12 py-1.5 mt-1.5 text-lg font-medium text-white bg-stereo rounded-full hover:text-stereo hover:bg-white transition duration-300"
         >
             get started

src/components/landing/Hero.tsx

@@ -1,6 +1,5 @@
 import { component$, useSignal } from "@builder.io/qwik";
 import { useRelativeMouse } from "~/hooks/mouse";
-import { OAUTH_LINK } from "~/lib/constants";
 import GradientBorder from "../misc/GradientBorder";
 
 export default component$(() => {
@@ -22,7 +21,7 @@ export default component$(() => {
                     </p>
                     <div class="flex gap-4 mt-1">
                         <a
-                            href={OAUTH_LINK}
+                            href={"/api/auth/login"}
                             class="px-6 py-1 text-lg font-medium text-white bg-stereo rounded-full hover:text-stereo hover:bg-white transition duration-300"
                         >
                             get started

src/lib/constants.ts

@@ -1 +1 @@
-export const OAUTH_LINK = "https://discord.com/oauth2/authorize?client_id=1368939221678817382&response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A8081%2Fapi%2Fauth%2Fcallback&scope=identify+email"
+//export const OAUTH_LINK = "https://discord.com/oauth2/authorize?client_id=1368939221678817382&response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A8081%2Fapi%2Fauth%2Fcallback&scope=identify+email"

src/routes/dashboard/index.tsx

@@ -6,14 +6,13 @@ import Titlebar from "~/components/dashboard/Titlebar";
 // import Dropzone from "~/components/Dropzone";
 import { useNanostore$ } from "~/hooks/nanostores";
 import { api } from "~/lib/api";
-import { OAUTH_LINK } from "~/lib/constants";
 import { areFilesLoaded, dashboardFiles } from "~/lib/stores";
 import { StereoFile } from "~/lib/types";
 
 export const useAuthCheck = routeLoader$(({ cookie, redirect: r }) => {
 	const jwt = cookie.get("jwt");
 	if (jwt) return {};
-	throw r(302, OAUTH_LINK);
+	throw r(302, "/api/auth/login");
 });
 
 export default component$(() => {

src/routes/index.tsx

@@ -13,7 +13,7 @@ export const useAuthCheck = routeLoader$(({ cookie, redirect: r, query }) => {
     const set = Boolean(query.get("jwt_set"));
 
     if (jwt && set) {
-        throw r(302, "/dashboard");
+        throw r(302, "/api/auth/login");
     }
     return {};
 });