auth finished

frontend/src/script/types.ts

@@ -6,12 +6,19 @@ export type Song = {
 	url: string;
 	previewimage: string;
 	mapper: string;
-  };
-  
+};
+
 export type CollectionPreview = {
 	index: number;
 	name: string;
 	length: number;
 	previewimage: string;
 };
-  
+
+export type Me = {
+	id: number;
+	name: string;
+	avatar_url: string;
+	endpoint: string;
+	share: boolean;
+};

frontend/src/stores/userStore.ts

@@ -1,10 +1,27 @@
 import { defineStore } from 'pinia';
 import { ref } from 'vue';
-import type { Song, CollectionPreview } from '@/script/types';
+import type { Song, CollectionPreview, Me } from '@/script/types';
 
 export const useUserStore = defineStore('userStore', () => {
   const userId = ref(null)
   const baseUrl = ref('https://service.illegalesachen.download/')
+  const proxyUrl = ref('https://proxy.illegalesachen.download/')
+
+  const User = ref<Me>(null)
+
+  function saveUser(user: Me) {
+    localStorage.setItem('activeUser', JSON.stringify(user));
+  }
+
+  function loadUser(): Me | null {
+    const user = localStorage.getItem('activeUser');
+    return user ? JSON.parse(user) : null;
+  }
+
+  function setUser(user: Me) {
+    User.value = user;
+    saveUser(user)
+  }
 
   async function fetchSong(hash: string): Promise<Song> {
     try {
@@ -30,7 +47,7 @@ export const useUserStore = defineStore('userStore', () => {
     }
   }
 
-  async function fetchWithCache<T>(cacheKey: string, url: string, cacheDuration: number = 24 * 60 * 60 * 1000): Promise<T> {
+  async function fetchWithCache<T>(cacheKey: string, url: string, cacheDuration: number = 24 * 60 * 60 * 1): Promise<T> {
     const cacheTimestampKey = `${cacheKey}_timestamp`;
 
     const cachedData = localStorage.getItem(cacheKey);
@@ -96,5 +113,35 @@ export const useUserStore = defineStore('userStore', () => {
     return fetchWithCache<Song[]>(cacheKey, url);
   }
 
-  return { fetchSong, fetchActiveSearch, fetchSearchArtist, fetchCollections, fetchCollection, fetchRecent, fetchFavorites, userId, baseUrl }
+  async function fetchMe(): Promise<Me | {}> {
+    const url = `${proxyUrl.value}me`;
+
+    try {
+      const response = await fetch(url, {
+        method: 'GET',
+        credentials: 'include'
+      });
+      console.log(response);
+
+      if (response.redirected) {
+        window.open(response.url, '_blank');
+        return { "redirected": true };
+      }
+
+      if (!response.ok) {
+        console.error(`Fetch failed with status: ${response.status} ${response.statusText}`);
+        return { id: -1 } as Me;
+      }
+
+      const data = await response.json();
+      return data;
+    } catch (error) {
+      console.error('Fetch error:', error);
+      return {} as Me;
+    }
+  }
+
+  setUser(loadUser());
+
+  return { fetchSong, fetchActiveSearch, fetchSearchArtist, fetchCollections, fetchCollection, fetchRecent, fetchFavorites, fetchMe, userId, baseUrl, proxyUrl, User, setUser }
 })

frontend/src/views/MeView.vue

@@ -12,6 +12,8 @@ const actionColor = ref('');
 const infoColor = ref('');
 const borderColor = ref('');
 
+const loginStatus = ref('Login');
+
 function update() {
   var input = document.getElementById("url-input") as HTMLAudioElement;
   console.log(input.value)
@@ -34,6 +36,24 @@ function save(bg: string | null, main: string | null, info: string | null, borde
   console.log("bg", bgColor.value, "action:", actionColor.value, "info", infoColor.value, "border", borderColor.value)
 }
 
+async function getMe() {
+
+  const data = await userStore.fetchMe() as Me;
+  if (data.redirected == true) {
+    loginStatus.value = "waiting for login, click to refresh!"
+    console.log("redirect detected");
+  }
+
+  console.log(data)
+  if (data.id === null || data.id === undefined || Object.keys(data).length === 0) {
+    return
+  }
+
+  console.log("active user: ", data.name)
+  userStore.setUser(data);
+
+}
+
 onMounted(() => {
   reset();
 })
@@ -69,12 +89,17 @@ function reset() {
     <h1> Meeeeee </h1>
     <input @change="update" type="text" id="url-input" :value="userStore.baseUrl" />
     <br>
-    <div class="flex p-5 justify-between">
-      <img :src="'https://a.ppy.sh/14100399'" class="w-1/3">
+    <button v-if="!userStore.User" @click="getMe" class="border bordercolor rounded-lg p-0.5">{{ loginStatus }}</button>
+    <div v-if="userStore.User" class="flex p-5 justify-between">
+      <img :src="userStore.User.avatar_url" class="w-1/3">
       <div>
-        <p>User: {{ 'JuLi0n_' }}</p>
-        <p>Api: Not Connected</p>
-        <p>Sharing: <button class="border bordercolor rounded-lg p-0.5"> Off </button></p>
+        <p>{{ userStore.User.name }}</p>
+        <p>{{ userStore.User.endpoint == "" ? 'Not Connected' : 'Connected' }}</p>
+        <p>Sharing: <button @click="share" class="border bordercolor rounded-lg p-0.5">{{ userStore.User.share
+            }}</button></p>
+        <button @click="getMe" class="border bordercolor rounded-lg p-0.5"> Refresh
+        </button>
+
       </div>
     </div>