From 4bfffa2defd13f4d76e747ad24b3056c126b376d Mon Sep 17 00:00:00 2001
From: Hydroxycarbamide <nguyen.hoang.eric@protonmail.com>
Date: Sun, 15 May 2022 17:10:39 +0200
Subject: [PATCH] Add anilist auth button

---
 src/auth/anilist.js            |  6 ++++++
 src/components/Content.vue     |  2 +-
 src/components/Sidebar.vue     |  3 ++-
 src/components/SidebarIcon.vue | 14 +++++++++++---
 src/index.css                  |  5 +++++
 src/main.js                    |  3 ++-
 6 files changed, 27 insertions(+), 6 deletions(-)
 create mode 100644 src/auth/anilist.js

diff --git a/src/auth/anilist.js b/src/auth/anilist.js
new file mode 100644
index 0000000..6427ecf
--- /dev/null
+++ b/src/auth/anilist.js
@@ -0,0 +1,6 @@
+const client_id = '8337'
+const redirect_uri = encodeURIComponent('https://anilist.co/api/v2/oauth/pin')
+const response_type = 'token'
+const href = `https://anilist.co/api/v2/oauth/authorize?client_id=${client_id}&response_type=${response_type}`
+
+export default href;
\ No newline at end of file
diff --git a/src/components/Content.vue b/src/components/Content.vue
index f7df033..443cd59 100644
--- a/src/components/Content.vue
+++ b/src/components/Content.vue
@@ -36,7 +36,7 @@ export default {
     this.fetchAnime();
   },
   components: {
-    Card
+    Card,
   }
 }
 
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 53da9a7..81a4580 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -1,12 +1,13 @@
 <script setup>
 import SidebarIcon from "./SidebarIcon.vue";
+import href from "../auth/anilist"
 </script>
 
 <template>
   <div class="fixed top-0 left-0
   m-0 h-screen bg-slate-900 
   text-white shadow-lg w-16 flex flex-col">
-    <SidebarIcon icon="fire" text="Fire"></SidebarIcon>
+    <SidebarIcon icon="right-to-bracket" text="Login" :href="href" newtab="true" ></SidebarIcon>
     <SidebarIcon icon="plus" text="Plus"></SidebarIcon>
     <SidebarIcon icon="poo" text="Poo"></SidebarIcon>
   </div>
diff --git a/src/components/SidebarIcon.vue b/src/components/SidebarIcon.vue
index bd9f600..1f553d0 100644
--- a/src/components/SidebarIcon.vue
+++ b/src/components/SidebarIcon.vue
@@ -1,15 +1,23 @@
 <script setup>
 const props = defineProps({
   icon: String,
-  text: String
+  text: String,
+  href: String,
+  newtab: Boolean,
 })
 </script>
 
 <template>
-  <i class="sidebar-icon group">
+  <a v-if="newtab" :href="href" class="sidebar-icon group" target="_blank">
     <font-awesome-icon :icon="['fas', icon]" />
     <span class="sidebar-tooltip group-hover:scale-100">
       {{ text }}
     </span>
-  </i>
+  </a>
+  <a v-else :href="href" class="sidebar-icon group">
+    <font-awesome-icon :icon="['fas', icon]" />
+    <span class="sidebar-tooltip group-hover:scale-100">
+      {{ text }}
+    </span>
+  </a>
 </template>
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index cdf344d..e21b3c6 100644
--- a/src/index.css
+++ b/src/index.css
@@ -19,4 +19,9 @@
     transition-all duration-100 scale-0 origin-left;
   }
 
+  .button {
+    @apply shadow-md p-2 rounded-full bg-blue-500 text-white 
+    hover:shadow-blue-500 shadow-blue-200 transition-shadow;
+  }
+
 }
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index daf5182..21cf16d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -8,8 +8,9 @@ import { far } from '@fortawesome/free-regular-svg-icons';
 library.add(far);
 import { dom } from "@fortawesome/fontawesome-svg-core";
 dom.watch();
-import { faFire, faPlus, faPoo } from "@fortawesome/free-solid-svg-icons";
+import { faFire, faPlus, faPoo, faRightToBracket } from "@fortawesome/free-solid-svg-icons";
 
+library.add(faRightToBracket);
 library.add(faFire);
 library.add(faPlus);
 library.add(faPoo);