Update index.html

index.html

@@ -149,6 +149,7 @@
         userSpaces: [],
         selectedSpaces: [],
         spaceTypes: {},
+        authError: '',
 
         buttonClass(attr, filter) {
           if (this[attr] === filter) {
@@ -220,7 +221,7 @@
             }
             const res = await fetch(searchUrl);
             data = await res.json();
-            console.log(data)
+            console.log(data);
             // Transform the API response to match the expected format
             data = data.filter(item => item.runtime?.stage === "RUNNING").map(item => ({
               id: item.id,
@@ -257,19 +258,35 @@
         },
 
         async authenticate() {
+          this.authError = ''; // Reset error message
           try {
+            // Validate token format
+            if (!this.hfToken || this.hfToken.length < 10) {
+              throw new Error('Invalid token format');
+            }
+
+            // Fetch user info to validate token
             const response = await fetch('https://huggingface.co/api/whoami', {
               headers: { Authorization: `Bearer ${this.hfToken}` }
             });
-            
-            if (!response.ok) throw new Error('Authentication failed');
+
+            if (!response.ok) {
+              throw new Error('Authentication failed. Please check your token.');
+            }
+
             const userData = await response.json();
-            
+            console.log('Authenticated as:', userData.name);
+
+            // Fetch user spaces
             const spacesRes = await fetch(
               `https://huggingface.co/api/spaces?user=${userData.name}`,
               { headers: { Authorization: `Bearer ${this.hfToken}` } }
             );
-            
+
+            if (!spacesRes.ok) {
+              throw new Error('Failed to fetch spaces. Please try again.');
+            }
+
             const spacesData = await spacesRes.json();
             this.userSpaces = spacesData
               .filter(space => space.runtime?.stage === "RUNNING")
@@ -279,13 +296,14 @@
                 likes: space.likes,
                 lastModified: space.lastModified
               }));
-            
+
             this.spaceTypes = Object.fromEntries(
               this.userSpaces.map(space => [space.id, 'tool'])
             );
             this.authenticated = true;
           } catch (error) {
-            alert('Authentication failed: ' + error.message);
+            console.error('Authentication error:', error);
+            this.authError = error.message;
           }
         },
 
@@ -348,6 +366,7 @@
                   Cancel
                 </button>
               </div>
+              <p x-show="authError" class="text-red-500" x-text="authError"></p>
             </div>
           </template>