added account management

components/Crunchyroll/Account.ts

@@ -1,7 +1,7 @@
 import type { CrunchyLogin } from './Types'
 
 export async function crunchyLogin() {
-    const { data, error } = await useFetch<CrunchyLogin>('http://localhost:8080/api/crunchyroll/login', {
+    const { data, error } = await useFetch<CrunchyLogin>('http://localhost:9941/api/crunchyroll/login', {
         method: 'POST'
     })
 
@@ -9,7 +9,7 @@ export async function crunchyLogin() {
 }
 
 export async function checkAccount(service: string) {
-    const { data, error } = await useFetch<CrunchyLogin>(`http://localhost:8080/api/service/check/${service}`, {
+    const { data, error } = await useFetch<CrunchyLogin>(`http://localhost:9941/api/service/check/${service}`, {
         method: 'GET'
     })
 
@@ -17,7 +17,7 @@ export async function checkAccount(service: string) {
 }
 
 export async function loginAccount(user: string, password: string, service: string) {
-    const { data, error } = await useFetch<CrunchyLogin>(`http://localhost:8080/api/service/login/${service}`, {
+    const { data, error } = await useFetch<CrunchyLogin>(`http://localhost:9941/api/service/login/${service}`, {
         method: 'POST',
         body: {
             user: user,

components/MainHeader.vue

@@ -24,14 +24,14 @@
           PLAYLIST
         </div>
       </button> -->
-            <!-- <button
+            <button
                 @click="openSettings"
                 class="flex items-center justify-center px-2 py-2 gap-1 transition-all bg-[#ffffff16] hover:bg-[#ffffff25] rounded-lg select-none"
                 style="-webkit-app-region: no-drag"
             >
                 <Icon name="ic:round-settings" class="h-3.5 w-3.5 text-white" />
                 <div class="text-[11px] text-white font-dm"> SETTINGS </div>
-            </button> -->
+            </button>
         </div>
     </div>
 </template>
@@ -53,18 +53,6 @@ async function openSettings() {
 }
 
 async function openAddAnime() {
-    // const { data, error } = await checkAccount()
-
-    // if (error.value) {
-    //   (window as any).myAPI.openWindow({
-    //   title: "Crunchyroll Login",
-    //   url: isProduction ? 'http://localhost:8079/crunchylogin' : 'http://localhost:3000/crunchylogin',
-    //   width: 600,
-    //   height: 300,
-    //   backgroundColor: "#111111"
-    // })
-    //   return
-    // }
 
     ;(window as any).myAPI.openWindow({
         title: 'Add Anime',
@@ -75,3 +63,21 @@ async function openAddAnime() {
     })
 }
 </script>
+
+<style>
+.font-dm {
+    font-family: 'DM Sans', sans-serif;
+}
+
+.font-protest {
+    font-family: 'Protest Riot', sans-serif;
+    font-weight: 400;
+    font-style: normal;
+}
+
+.font-dm-big {
+    font-family: 'DM Sans', sans-serif;
+    font-weight: 1000;
+    font-style: normal;
+}
+</style>

components/Settings/About.vue

@@ -0,0 +1,23 @@
+<template>
+    <div class="relative flex flex-col items-center justify-center h-full" style="-webkit-app-region: no-drag"> 
+        <img src="/logo.png" class="h-24" />
+        <div class="text-base text-center leading-[18px]">
+            Crunchyroll <br>
+            Downloader
+        </div>
+        <div class="text-sm mt-1 text-gray-200">
+            v1.1.3
+        </div>
+        <div class="absolute right-0 bottom-0 text-xs text-gray-200">
+            Made by Stratum
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style>
+.font-dm {
+    font-family: 'DM Sans', sans-serif;
+}
+</style>

components/Settings/Main.vue

@@ -0,0 +1,71 @@
+<template>
+    <div class="flex flex-col mt-3 font-dm" style="-webkit-app-region: no-drag">
+        <div class="flex flex-col items-center h-40 p-3 bg-[#11111189] rounded-xl select-none">
+            <div class="text-sm mb-2"> Account Management </div>
+            <div v-for="account in accounts" class="flex flex-row items-center h-12 p-3 w-full bg-[#4b4b4b89] rounded-xl">
+                <Icon v-if="account.service === 'CR'" name="simple-icons:crunchyroll" class="h-6 w-6 text-white" />
+                <Icon v-if="account.service === 'ADN'" name="arcticons:animeultima" class="h-6 w-6 text-white" />
+                <div class="text-xs ml-1.5">
+                    {{ services.find(s => s.service === account.service)?.name }}
+                </div>
+                <div class="text-xs ml-auto">
+                    {{ account.username }}
+                </div>
+                <div class="flex flex-row ml-2">
+                    <button @click="deleteAccount(account.id)" class="flex items-center justify-center bg-red-500 hover:bg-red-600 w-8 h-8 rounded-lg transition-all">
+                        <Icon name="majesticons:logout" class="h-4 w-4 text-white" />
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+const services = ref<{ name: string; service: string }[]>([
+    {
+        name: 'Crunchyroll',
+        service: 'CR'
+    },
+    {
+        name: 'ADN',
+        service: 'ADN'
+    }
+])
+
+const accounts = ref<{ id: number; username: string; service: string }[]>()
+
+const getAccounts = async () => {
+    const { data, error } = await useFetch<{ id: number; username: string; service: string }[]>(`http://localhost:9941/api/service/accounts`, {
+        method: 'GET'
+    })
+
+    if (error.value) {
+        alert(error.value)
+        return
+    }
+
+    if (!data.value) return
+
+    accounts.value = data.value
+}
+
+getAccounts();
+
+
+const deleteAccount = async (id: number) => {
+    const { error } = await useFetch(`http://localhost:9941/api/service/account/${id}`, {
+        method: 'DELETE'
+    })
+
+    if (error.value) {
+        alert(error.value)
+        return
+    }
+
+    getAccounts();
+}
+
+</script>
+
+<style></style>

components/Updater.vue

@@ -55,4 +55,20 @@ onMounted(() => {
 })
 </script>
 
-<style></style>
+<style>
+.font-dm {
+    font-family: 'DM Sans', sans-serif;
+}
+
+.font-protest {
+    font-family: 'Protest Riot', sans-serif;
+    font-weight: 400;
+    font-style: normal;
+}
+
+.font-dm-big {
+    font-family: 'DM Sans', sans-serif;
+    font-weight: 1000;
+    font-style: normal;
+}
+</style>

pages/addanime.vue

@@ -720,7 +720,7 @@ const addToPlaylist = async () => {
         format: format.value
     }
 
-    const { error } = await useFetch('http://localhost:8080/api/service/playlist', {
+    const { error } = await useFetch('http://localhost:9941/api/service/playlist', {
         method: 'POST',
         body: JSON.stringify(data)
     })
@@ -756,7 +756,7 @@ const addToPlaylistADN = async () => {
         format: format.value
     }
 
-    const { error } = await useFetch('http://localhost:8080/api/service/playlist', {
+    const { error } = await useFetch('http://localhost:9941/api/service/playlist', {
         method: 'POST',
         body: JSON.stringify(data)
     })

pages/index.vue

@@ -117,7 +117,7 @@ const getPlaylist = async () => {
             service: string
             format: string
         }>
-    >('http://localhost:8080/api/service/playlist')
+    >('http://localhost:9941/api/service/playlist')
 
     if (error.value) {
         alert(error.value)
@@ -132,7 +132,7 @@ const getPlaylist = async () => {
 }
 
 const deletePlaylist = async () => {
-    const { data, error } = await useFetch('http://localhost:8080/api/service/playlist', {
+    const { data, error } = await useFetch('http://localhost:9941/api/service/playlist', {
         method: 'delete'
     })
 

pages/settings.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="h-screen bg-[#111111] flex flex-col p-5 text-white" style="-webkit-app-region: drag">
+    <div class="h-screen bg-[#11111189] flex flex-col p-5 text-white font-dm" style="-webkit-app-region: drag">
         <div class="flex flex-row items-center justify-center">
             <div class="text-2xl">Settings</div>
         </div>
@@ -7,17 +7,19 @@
             <button
                 v-for="(option, index) in options"
                 @click="activeIndex = index"
-                class="w-full flex items-center justify-center py-2 border-b-2 transition-all"
+                class="w-full flex items-center text-sm justify-center py-2 border-b-2 transition-all"
                 :class="activeIndex === index ? 'border-[#ce6104]' : 'border-[#ce620428]'"
             >
                 {{ option }}
             </button>
         </div>
+        <SettingsMain v-if="activeIndex === 0" />
+        <SettingsAbout v-if="activeIndex === 1" />
     </div>
 </template>
 
 <script lang="ts" setup>
-const options = ref(['Main', 'Output', 'Naming', 'Crunchyroll', 'About'])
+const options = ref<Array<string>>(['Main', 'About'])
 const activeIndex = ref(0)
 </script>
 
@@ -34,4 +36,20 @@ const activeIndex = ref(0)
 body {
     animation: fadein 0.5s;
 }
+
+.font-dm {
+    font-family: 'DM Sans', sans-serif;
+}
+
+.font-protest {
+    font-family: 'Protest Riot', sans-serif;
+    font-weight: 400;
+    font-style: normal;
+}
+
+.font-dm-big {
+    font-family: 'DM Sans', sans-serif;
+    font-weight: 1000;
+    font-style: normal;
+}
 </style>

src/api/api.ts

@@ -46,7 +46,7 @@ server.register(crunchyrollRoutes, { prefix: 'api/crunchyroll' })
 server.register(serviceRoutes, { prefix: 'api/service' })
 
 function startAPI() {
-    server.listen({ port: 8080 }, (err, address) => {
+    server.listen({ port: 9941 }, (err, address) => {
         if (err) {
             console.error(err)
             return

src/api/routes/service/service.controller.ts

@@ -1,6 +1,6 @@
 import { FastifyReply, FastifyRequest } from 'fastify'
 import { crunchyLogin } from '../crunchyroll/crunchyroll.service'
-import { addEpisodeToPlaylist, getDownloading, getPlaylist, loggedInCheck, safeLoginData } from './service.service'
+import { addEpisodeToPlaylist, deleteAccountID, getAllAccounts, getDownloading, getPlaylist, loggedInCheck, safeLoginData } from './service.service'
 import { CrunchyEpisodes } from '../../types/crunchyroll'
 import { adnLogin } from '../adn/adn.service'
 
@@ -66,6 +66,34 @@ export async function loginController(
     return reply.code(200).send()
 }
 
+export async function getAllAccountsHandler(
+    request: FastifyRequest,
+    reply: FastifyReply
+) {
+
+    const accounts = await getAllAccounts();
+
+    return reply.code(200).send(accounts)
+}
+
+export async function deleteAccountHandler(
+    request: FastifyRequest<{
+        Params: {
+            id: number,
+        }
+    }>,
+    reply: FastifyReply
+) {
+
+    try {
+        await deleteAccountID(request.params.id)
+    } catch (e) {
+        return reply.code(500).send(e)
+    }
+
+    return reply.code(200).send()
+}
+
 export async function addPlaylistController(
     request: FastifyRequest<{
         Body: {

src/api/routes/service/service.route.ts

@@ -1,5 +1,5 @@
 import { FastifyInstance } from 'fastify'
-import { addPlaylistController, checkLoginController, getPlaylistController, loginController } from './service.controller'
+import { addPlaylistController, checkLoginController, deleteAccountHandler, getAllAccountsHandler, getPlaylistController, loginController } from './service.controller'
 
 async function serviceRoutes(server: FastifyInstance) {
     server.post(
@@ -58,6 +58,35 @@ async function serviceRoutes(server: FastifyInstance) {
         },
         getPlaylistController
     )
+
+    server.get(
+        '/accounts',
+        {
+            schema: {
+                response: {
+                    '4xx': {
+                        error: { type: 'string' },
+                        message: { type: 'string' }
+                    }
+                }
+            }
+        },
+        getAllAccountsHandler
+    )
+    server.delete(
+        '/account/:id',
+        {
+            schema: {
+                response: {
+                    '4xx': {
+                        error: { type: 'string' },
+                        message: { type: 'string' }
+                    }
+                }
+            }
+        },
+        deleteAccountHandler
+    )
 }
 
 export default serviceRoutes

src/api/routes/service/service.service.ts

@@ -21,6 +21,26 @@ const mp4e = getMP4DecryptPath()
 import util from 'util'
 const exec = util.promisify(require('child_process').exec)
 
+// Get All Accounts
+export async function getAllAccounts() {
+    const accounts = await Account.findAll({
+        attributes: {exclude: ['password']},
+    })
+
+    return accounts
+}
+
+// Delete Account
+export async function deleteAccountID(id: number) {
+    const account = await Account.destroy({
+        where: {
+            id: id
+        }
+    })
+
+    return account
+}
+
 // DB Account existence check
 export async function loggedInCheck(service: string) {
     const login = await Account.findOne({