AL login

src/renderer/src/lib/Sidebar.svelte

@@ -1,6 +1,7 @@
 <script>
+  import { alID } from '@/modules/anilist.js'
   export let page
-  $: links = [
+  const links = [
     {
       click: halfmoon.toggleSidebar.bind(halfmoon),
       image: 'logo_cut.png',
@@ -37,13 +38,24 @@
     },
     {
       click: () => {
-        // TODO: AL login
-        'https://anilist.co/api/v2/oauth/authorize?client_id=4254&response_type=token'
+        if (alID) {
+          localStorage.removeItem('ALtoken')
+          location.hash = ''
+          location.reload()
+        } else {
+          location.href = 'https://anilist.co/api/v2/oauth/authorize?client_id=4254&response_type=token'
+        }
       },
       icon: 'login',
       text: 'Login With AniList'
     }
   ]
+  if (alID) {
+    alID.then(result => {
+      links[links.length - 1].image = result.data.Viewer.avatar.medium
+      links[links.length - 1].text = result.data.Viewer.name
+    })
+  }
 </script>
 
 <div class="sidebar">
@@ -57,10 +69,16 @@
         data-title={text}
         on:click={click}
         class:mt-auto={i === links.length - 2}>
-        <span class="text-nowrap d-flex align-items-center" class:justify-content-between={image}>
+        <span class="text-nowrap d-flex align-items-center" class:justify-content-between={i === 0}>
           {#if image}
-            <img src={image} alt="logo" class="text" />
-            <span class="material-icons menu">{icon}</span>
+            {#if i === 0}
+              <img src={image} alt="logo" class="text" />
+              <span class="material-icons menu">{icon}</span>
+            {:else}
+              <img src={image} alt="logo" />
+              <span class="text">{text}</span>
+              <span class="material-icons menu text">{icon}</span>
+            {/if}
           {:else}
             <span class="material-icons">{icon}</span>
             <span class="text">{text}</span>
@@ -90,6 +108,8 @@
     display: inline-flex;
     justify-content: center;
     align-items: center;
+  }
+  .text:not(.material-icons) {
     font-weight: bold;
   }
 
@@ -124,7 +144,7 @@
     align-items: center;
   }
 
-  :not(.brand) :global(img) {
+  :not(.brand) img {
     font-size: 2.2rem;
     width: 3rem;
     height: 3rem;

src/renderer/src/lib/pages/Settings.svelte

@@ -1,3 +1,7 @@
 <script context="module">
+  const searchParams = new URLSearchParams(location.href)
+  if (searchParams.get('access_token')) {
+    localStorage.setItem('ALtoken', searchParams.get('access_token'))
+  }
   export const alToken = localStorage.getItem('ALtoken') || null
 </script>

src/renderer/src/lib/pages/home/Home.svelte

@@ -37,7 +37,6 @@
       }
     }
   }
-  // TODO: add AL account detection for hiding
   const sections = [
     {
       title: 'Continue Watching',
@@ -48,11 +47,15 @@
           })
         })
       },
-      cards: alRequest({ method: 'UserLists', status_in: 'CURRENT' }).then(res => {
-        return res.data.Page.mediaList.filter(i => {
-          return i.media.status !== 'RELEASING' || i.media.mediaListEntry?.progress < i.media.nextAiringEpisode?.episode - 1
-        }).slice(0, 5)
-      }),
+      cards:
+        alToken &&
+        alRequest({ method: 'UserLists', status_in: 'CURRENT' }).then(res => {
+          return res.data.Page.mediaList
+            .filter(i => {
+              return i.media.status !== 'RELEASING' || i.media.mediaListEntry?.progress < i.media.nextAiringEpisode?.episode - 1
+            })
+            .slice(0, 5)
+        }),
       hide: !alToken
     },
     {
@@ -67,7 +70,7 @@
       click: () => {
         media = alRequest({ method: 'UserLists', status_in: 'PLANNING' }).then(res => res.data.Page.mediaList)
       },
-      cards: alRequest({ method: 'UserLists', status_in: 'PLANNING', perPage: 5 }).then(res => res.data.Page.mediaList),
+      cards: alToken && alRequest({ method: 'UserLists', status_in: 'PLANNING', perPage: 5 }).then(res => res.data.Page.mediaList),
       hide: !alToken
     },
     {

src/renderer/src/modules/anilist.js

@@ -3,9 +3,7 @@ import { alToken } from '@/lib/pages/Settings.svelte'
 
 export const alID =
   !!alToken &&
-  alRequest({ method: 'Viewer', token: alToken }).then(result => {
-    return result.data.Viewer.id
-  })
+  alRequest({ method: 'Viewer', token: alToken })
 
 async function handleRequest (opts) {
   return await fetch('https://graphql.anilist.co', opts).then(async res => {
@@ -207,7 +205,7 @@ query {
 }`
       break
     } case 'UserLists': {
-      variables.id = await alID
+      variables.id = (await alID).data.Viewer.id
       query = ` 
 query ($page: Int, $perPage: Int, $id: Int, $type: MediaType, $status_in: [MediaListStatus]){
   Page (page: $page, perPage: $perPage) {
@@ -223,7 +221,7 @@ query ($page: Int, $perPage: Int, $id: Int, $type: MediaType, $status_in: [Media
 }`
       break
     } case 'SearchIDStatus': {
-      variables.id = await alID
+      variables.id = (await alID).data.Viewer.id
       variables.mediaId = opts.id
       query = ` 
 query ($id: Int, $mediaId: Int){

src/renderer/src/modules/util.js

@@ -9,12 +9,6 @@ halfmoon.hideModal = id => {
   t && t.classList.remove('show')
 }
 
-// export const searchParams = new URLSearchParams(location.href)
-// if (searchParams.get('access_token')) {
-//   localStorage.setItem('ALtoken', searchParams.get('access_token'))
-//   window.location = '/app/#home'
-// }
-
 export function countdown (s) {
   const d = Math.floor(s / (3600 * 24))
   s -= d * 3600 * 24