ani-auto 1.4.3 → 2.0.0

package/web/src/views/Settings.vue

@@ -0,0 +1,410 @@
+<template>
+  <div>
+    <div class="page-header">
+      <h2>Settings</h2>
+    </div>
+
+    <Skeleton v-if="loading" width="100%" height="400px" />
+
+    <Tabs v-else-if="config" v-model:value="activeTab">
+      <TabList>
+        <Tab value="0">AniList</Tab>
+        <Tab value="1">Download</Tab>
+        <Tab value="2">Daemon</Tab>
+        <Tab value="3">Notifications</Tab>
+        <Tab value="4">Updates</Tab>
+      </TabList>
+      <TabPanels>
+        <TabPanel value="0">
+          <Card>
+            <template #content>
+              <div class="form-group">
+                <label>Username</label>
+                <InputText v-model="form.anilistUsername" placeholder="AniList username" fluid />
+              </div>
+              <div class="form-group">
+                <label>Token <Badge v-if="config.anilistToken === '[set]'" value="set" severity="success" size="small" style="margin-left:6px" /></label>
+                <div class="form-field-row">
+                  <InputText v-model="form.anilistToken" :placeholder="config.anilistToken === '[set]' ? 'Token is set' : 'Paste token'" type="password" fluid style="flex:1" />
+                  <Button label="Verify" @click="verifyToken" :disabled="!form.anilistToken" />
+                </div>
+              </div>
+              <div v-if="!config.anilistUsername" class="form-group" style="margin-top:16px">
+                <p style="margin-bottom:8px;color:var(--ink-400);font-size:13px">Or sign in with AniList:</p>
+                <Button label="Connect AniList" severity="primary" @click="connectAnilist" />
+              </div>
+              <div v-else class="form-group" style="margin-top:16px">
+                <Button label="Disconnect AniList" severity="danger" @click="disconnectAnilist" />
+              </div>
+              <div class="form-group">
+                <label>Watch Statuses</label>
+                <div class="checkbox-group">
+                  <div v-for="s in statuses" :key="s" class="checkbox-item">
+                    <Checkbox v-model="form.watchStatuses" :value="s" :inputId="'status-' + s" />
+                    <label :for="'status-' + s">{{ s }}</label>
+                  </div>
+                </div>
+              </div>
+              <div class="form-group" style="margin-top:16px;padding-top:16px;border-top:1px solid var(--border-color)">
+                <label>AnimePahe Access</label>
+                <p style="color:var(--ink-400);font-size:12px;margin-bottom:8px">
+                  Cloudflare bypass status: <strong>{{ cfStatus }}</strong>
+                </p>
+
+                <div class="form-field-row" style="margin-bottom:8px">
+                  <Button
+                    label="Bypass Cloudflare"
+                    severity="secondary"
+                    @click="startCfBypass"
+                  />
+                  <Button
+                    v-if="config.animepaheCfClearance === '[set]'"
+                    label="Clear Cookies"
+                    severity="danger"
+                    @click="clearCfBypass"
+                  />
+                </div>
+
+                <div class="form-group" style="margin-top:8px">
+                  <label for="cf-input">cf_clearance Value</label>
+                  <Textarea
+                    id="cf-input"
+                    v-model="cfInput"
+                    :placeholder="config.animepaheCfClearance === '[set]' ? 'cf_clearance is set — paste new value to replace' : 'Paste cf_clearance value here'"
+                    rows="2"
+                    fluid
+                  />
+                </div>
+
+                <div class="form-group" style="margin-top:8px">
+                  <label for="ua-input">User-Agent</label>
+                  <InputText
+                    id="ua-input"
+                    v-model="uaInput"
+                    placeholder="Mozilla/5.0 (X11; Linux x86_64; rv:151.0) Gecko/20100101 Firefox/151.0"
+                    fluid
+                  />
+                </div>
+
+                <div class="form-field-row">
+                  <Button
+                    label="Save & Verify"
+                    severity="primary"
+                    @click="saveAndVerify"
+                    :disabled="!cfInput"
+                    :loading="verifying"
+                  />
+                  <span v-if="verifyResult" :class="verifyResult.ok ? 'text-green-600' : 'text-red-500'" style="font-size:13px;margin-left:8px">
+                    {{ verifyResult.message }}
+                  </span>
+                </div>
+              </div>
+            </template>
+          </Card>
+        </TabPanel>
+        <TabPanel value="1">
+          <Card>
+            <template #content>
+              <div class="form-row">
+                <div class="form-group">
+                  <label>Quality</label>
+                  <Select v-model="form.quality" :options="['1080p', '720p', '360p']" fluid />
+                </div>
+                <div class="form-group">
+                  <label>Language</label>
+                  <Select v-model="form.language" :options="['sub', 'dub']" fluid />
+                </div>
+              </div>
+              <div class="form-row">
+                <div class="form-group">
+                  <label>Concurrency</label>
+                  <InputNumber v-model="form.concurrency" :min="1" :max="10" fluid />
+                </div>
+                <div class="form-group">
+                  <label>Max Retries</label>
+                  <InputNumber v-model="form.maxRetries" :min="0" :max="10" fluid />
+                </div>
+              </div>
+              <div class="form-group">
+                <label>Output Directory</label>
+                <InputText v-model="form.outputDir" fluid />
+              </div>
+            </template>
+          </Card>
+        </TabPanel>
+        <TabPanel value="2">
+          <Card>
+            <template #content>
+              <div class="form-row">
+                <div class="form-group">
+                  <label>Check Interval (minutes)</label>
+                  <InputNumber v-model="form.daemonIntervalMinutes" :min="5" :max="1440" fluid />
+                </div>
+                <div class="form-group">
+                  <label>Airing Buffer (minutes)</label>
+                  <InputNumber v-model="form.airingBufferMinutes" fluid />
+                </div>
+              </div>
+            </template>
+          </Card>
+        </TabPanel>
+        <TabPanel value="3">
+          <Card>
+            <template #content>
+              <div class="form-group">
+                <label>Telegram Chat ID</label>
+                <InputText v-model="form.telegramChatId" fluid />
+              </div>
+              <div class="form-group">
+                <div class="checkbox-item">
+                  <ToggleSwitch v-model="form.telegramNotify" :inputId="'tg-notify'" />
+                  <label :for="'tg-notify'" style="margin-left:8px">Enable Telegram notifications</label>
+                </div>
+              </div>
+            </template>
+          </Card>
+        </TabPanel>
+        <TabPanel value="4">
+          <Card>
+            <template #content>
+              <div class="form-group">
+                <div class="checkbox-item">
+                  <ToggleSwitch v-model="form.autoUpdateCheck" :inputId="'auto-update'" />
+                  <label :for="'auto-update'" style="margin-left:8px">Auto-check for updates on app start</label>
+                </div>
+                <p class="form-hint">When enabled, ani-auto will check for new versions when you open the web UI.</p>
+              </div>
+              <div class="form-group">
+                <label>Current Version</label>
+                <span class="version-display">v1.4.4</span>
+              </div>
+              <div class="form-group">
+                <Button
+                  label="Check for Updates"
+                  @click="checkUpdate"
+                  :loading="updateStore.checking"
+                  :disabled="updateStore.installing"
+                />
+              </div>
+              <div v-if="updateStore.updateAvailable" class="update-result">
+                <span class="update-result-text">Update v{{ updateStore.latestVersion }} available</span>
+                <Button
+                  label="Install Update"
+                  @click="installUpdate"
+                  :loading="updateStore.installing"
+                />
+              </div>
+              <div v-if="updateStore.currentVersion && !updateStore.updateAvailable && !updateStore.checking" class="update-result">
+                <span class="update-result-text update-result-ok">Already on latest version (v{{ updateStore.currentVersion }})</span>
+              </div>
+            </template>
+          </Card>
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+
+    <div v-if="config" class="settings-actions">
+      <Button label="Save Settings" @click="save" />
+      <span v-if="saved" class="saved-msg">Saved</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted, onBeforeUnmount } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { api } from '../api/client'
+import { useConfigStore } from '../stores/config'
+import Tabs from 'primevue/tabs'
+import TabList from 'primevue/tablist'
+import Tab from 'primevue/tab'
+import TabPanels from 'primevue/tabpanels'
+import TabPanel from 'primevue/tabpanel'
+
+import { useUpdateStore } from '../stores/update'
+
+const router = useRouter()
+const route = useRoute()
+const configStore = useConfigStore()
+const updateStore = useUpdateStore()
+const loading = ref(true)
+const config = ref(null)
+const saved = ref(false)
+const activeTab = ref('0')
+const closeFirefoxWarning = ref(false)
+const cfInput = ref('')
+const uaInput = ref('')
+const verifying = ref(false)
+const verifyResult = ref(null)
+
+const cfStatus = computed(() => config.value?.animepaheCfClearance === '[set]' ? 'Active' : 'Not bypassed')
+
+const statuses = ['CURRENT', 'PLANNING', 'PAUSED', 'REPEATING']
+
+const form = reactive({
+  anilistUsername: '',
+  anilistToken: '',
+  watchStatuses: ['CURRENT'],
+  quality: '1080p',
+  language: 'sub',
+  concurrency: 2,
+  maxRetries: 3,
+  outputDir: '',
+  daemonIntervalMinutes: 120,
+  airingBufferMinutes: 5,
+  telegramChatId: '',
+  telegramNotify: true,
+  autoUpdateCheck: true,
+})
+
+onMounted(async () => {
+  try {
+    config.value = await api.config.get()
+    Object.assign(form, config.value)
+    if (form.anilistToken === '[set]') form.anilistToken = ''
+    delete form.animepaheCfClearance
+    delete form.animepaheUserAgent
+
+    const state = history.state
+    if (state?.cfClearance) {
+      cfInput.value = state.cfClearance
+    }
+    if (state?.userAgent) {
+      uaInput.value = state.userAgent
+    }
+    history.replaceState(null, '')
+  } catch (e) {
+    console.error(e)
+  } finally {
+    loading.value = false
+  }
+  const handler = async (e) => {
+    if (e.data?.type === 'anilist-token') {
+      const updated = await api.config.get()
+      config.value = updated
+      Object.assign(form, updated)
+      if (form.anilistToken === '[set]') form.anilistToken = ''
+      delete form.animepaheCfClearance
+      delete form.animepaheUserAgent
+    }
+  }
+  window.addEventListener('message', handler)
+  onBeforeUnmount(() => window.removeEventListener('message', handler))
+})
+
+async function verifyToken() {
+  if (!form.anilistToken) return
+  try {
+    const res = await api.config.verifyToken(form.anilistToken)
+    if (res.ok) {
+      await api.config.update({
+        anilistToken: form.anilistToken,
+        anilistUsername: res.name,
+        anilistAvatar: res.avatar,
+      })
+      form.anilistUsername = res.name
+      form.anilistAvatar = res.avatar
+      form.anilistToken = ''
+      await configStore.fetch()
+      config.value = configStore.config
+      Object.assign(form, config.value)
+      if (form.anilistToken === '[set]') form.anilistToken = ''
+    } else {
+      alert(`Verification failed: ${res.error}`)
+    }
+  } catch (e) {
+    alert(`Error: ${e.message}`)
+  }
+}
+
+async function connectAnilist() {
+  const { url } = await api.config.oauthUrl()
+  window.open(url, 'anilist-oauth', 'width=600,height=700')
+}
+
+async function disconnectAnilist() {
+  await api.config.update({
+    anilistToken: null,
+    anilistUsername: null,
+    anilistAvatar: null,
+    onboardingSkipped: true,
+  })
+  configStore.config = null
+  await configStore.fetch()
+  if (configStore.config) {
+    config.value = configStore.config
+    Object.assign(form, config.value)
+    if (form.anilistToken === '[set]') form.anilistToken = ''
+  }
+  router.push('/settings')
+}
+
+async function startCfBypass() {
+  router.push({ name: 'cf-result' })
+}
+
+async function clearCfBypass() {
+  try {
+    closeFirefoxWarning.value = false
+    verifyResult.value = null
+    const res = await api.cfBypass.clear()
+    config.value = await api.config.get()
+    Object.assign(form, config.value)
+    if (form.anilistToken === '[set]') form.anilistToken = ''
+    cfInput.value = ''
+    uaInput.value = ''
+    if (res.locked?.length > 0) {
+      closeFirefoxWarning.value = true
+    }
+  } catch (e) {
+    alert(`Clear failed: ${e.message}`)
+  }
+}
+
+async function saveAndVerify() {
+  if (!cfInput.value) return
+  verifying.value = true
+  verifyResult.value = null
+  try {
+    const res = await api.cfBypass.save({ cfClearance: cfInput.value, userAgent: uaInput.value })
+    if (res.ok) {
+      verifyResult.value = { ok: true, message: 'Saved and verified!' }
+      config.value = await api.config.get()
+      Object.assign(form, config.value)
+      if (form.anilistToken === '[set]') form.anilistToken = ''
+      delete form.animepaheCfClearance
+      delete form.animepaheUserAgent
+    } else {
+      verifyResult.value = { ok: false, message: res.error || 'Verification failed' }
+    }
+  } catch (e) {
+    verifyResult.value = { ok: false, message: e.message }
+  } finally {
+    verifying.value = false
+  }
+}
+
+async function save() {
+  saved.value = false
+  try {
+    const payload = { ...form }
+    if (!payload.anilistToken && config.value?.anilistToken === '[set]') {
+      delete payload.anilistToken
+    }
+    await api.config.update(payload)
+    await configStore.fetch()
+    saved.value = true
+    setTimeout(() => saved.value = false, 2000)
+  } catch (e) {
+    alert(`Save failed: ${e.message}`)
+  }
+}
+
+async function checkUpdate() {
+  await updateStore.check()
+}
+
+function installUpdate() {
+  updateStore.install()
+}
+</script>

package/web/vite.config.js

@@ -0,0 +1,23 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  server: {
+    port: 2641,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:2640',
+        changeOrigin: true,
+      },
+      '/ws': {
+        target: 'ws://localhost:2640',
+        ws: true,
+      },
+    },
+  },
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+  },
+})