feat: Переделан внешний вид страницы настроек

packages/renderer/src/App.vue

@@ -71,8 +71,4 @@ main {
   flex-grow: 1;
   overflow: auto;
 }
-
-a {
-  color: inherit;
-}
 </style>

packages/renderer/src/components/OptionAnime365.vue

@@ -0,0 +1,102 @@
+<template>
+  <form
+    class="card"
+    @submit.prevent="saveAccessTokenOption"
+  >
+    <div class="card-body">
+      <p>
+        Для доступа к видео необходимо подключить ваш аккаунт видео-провайдера
+        <a
+          href="https://smotret-anime.online/users/login"
+          @click.prevent="openExternal"
+        >Anime.365</a>.
+      </p>
+      <label
+        for="anime365-access-token"
+        class="form-label"
+      >Ключ доступа к Anime.365</label>
+      <input
+        id="anime365-access-token"
+        v-model="SmAccessToken"
+        :disabled="isLoading"
+        type="password"
+        class="form-control"
+        aria-describedby="anime365-access-token-help"
+      >
+      <div
+        id="anime365-access-token-help"
+        class="form-text"
+      >
+        Чтобы получить ключ доступа авторизуйтесь в браузере и
+        <strong><a
+          href="https://smotret-anime.online/api/accessToken?app=play-shikimori-online"
+          @click.prevent="openExternal"
+        >
+          перейдите по этой ссылке
+        </a>
+        </strong>
+      </div>
+      <div class="d-flex flex-row-reverse">
+        <button
+          :disabled="isLoading"
+          type="submit"
+          class="btn btn-success"
+        >
+          <span
+            v-if="isLoading"
+            class="spinner-border spinner-border-sm"
+            role="status"
+            aria-hidden="true"
+          />
+          Сохранить
+        </button>
+      </div>
+    </div>
+  </form>
+</template>
+
+<script lang="ts">
+import {defineComponent, ref} from 'vue';
+import {clearAccessToken, getAccessToken, saveAccessToken} from '/@/utils/videoProvider/providers/anime365';
+import {openExternalElement} from '/@/use/openExternal';
+
+
+export default defineComponent({
+  name: 'OptionAnime365',
+  setup() {
+
+
+    const SmAccessToken = ref(getAccessToken() || '');
+
+
+    const isLoading = ref(false);
+    const saveAccessTokenOption = async () => {
+      isLoading.value = true;
+
+      if (SmAccessToken.value.trim()) {
+        try {
+          const access_token = JSON.parse(SmAccessToken.value).data.access_token;
+
+          if (access_token) {
+            saveAccessToken(access_token);
+            SmAccessToken.value = access_token;
+          }
+        } catch (e) {
+          saveAccessToken(SmAccessToken.value);
+        }
+      } else {
+        SmAccessToken.value = '';
+        clearAccessToken();
+      }
+
+      isLoading.value = false;
+    };
+
+    return {openExternal: openExternalElement, SmAccessToken, saveAccessTokenOption, isLoading};
+  },
+});
+</script>
+
+<style scoped>
+
+</style>

packages/renderer/src/components/OptionsPage.vue

@@ -1,73 +1,8 @@
 <template>
-  <form
-    @submit.prevent="saveAccessTokenOption"
-  >
-    <label>
-      Ключ доступа к Anime.365<br>
-      <input
-        v-model="SmAccessToken"
-        required
-        type="text"
-      >
-    </label>
-    <p>
-      <a
-        class="help-text"
-        @click.prevent="openDialog"
-      >
-        Как получить ключ доступа?
-      </a>
-    </p>
-    <button type="submit">
-      Сохранить
-    </button>
-  </form>
-
-
-  <dialog ref="helpDialog">
-    <ol>
-      <li>
-        Авторизуйтесь в браузере на сайте:
-        <a
-          href="https://smotret-anime.online/users/login"
-          @click.prevent="openExternal"
-        >
-          Anime.365
-        </a>
-      </li>
-      <li>
-        Скопируйте в поле ниже код полученный по
-        <a
-          href="https://smotret-anime.online/api/accessToken?app=play-shikimori-online"
-          @click.prevent="openExternal"
-        >
-          этой ссылке
-        </a>
-      </li>
-
-      <li>
-        <label>
-          Введите текст от Anime.365:<br>
-          <textarea
-            v-model="jsonData"
-            autofocus
-          />
-        </label>
-      </li>
-      <li>
-        <label>
-          Ваш ключ доступа:<br>
-          <input
-            :value="parsedAccessToken"
-            type="text"
-            readonly
-          >
-        </label>
-      </li>
-    </ol>
-  </dialog>
-
-  <shiki-oauth />
+  <div class="container p-3">
+    <option-anime365 class="mb-3" />
+    <shiki-oauth />
+  </div>
 </template>
 
 <script lang="ts">
@@ -76,10 +11,11 @@ import {useElectron} from '/@/use/electron';
 import {onClickOutside, useTitle} from '@vueuse/core';
 import {getAccessToken, saveAccessToken} from '/@/utils/videoProvider/providers/anime365';
 import ShikiOauth from '/@/components/ShikiOauth.vue';
+import OptionAnime365 from '/@/components/OptionAnime365.vue';
 
 export default defineComponent({
   name: 'OptionsPage',
-  components: {ShikiOauth},
+  components: {OptionAnime365, ShikiOauth},
   setup() {
     //
     // Заголовок страницы

packages/renderer/src/components/ShikiOauth.vue

@@ -1,40 +1,79 @@
 <template>
-  <p>
-    <button @click="login">
-      Авторизоваться
-    </button>
-    Вы вошли как {{ userName }}
-  </p>
+  <section class="card p-3">
+    <p>
+      Если вы подключите ваш аккаунт Шикимори, то прогресс просмотра В этом приложении будет автоматически
+      синхронизироваться с вашими списками на Шикимори
+    </p>
+    <p class="d-flex flex-row-reverse gap-2 align-items-center">
+      <template v-if="isLoading">
+        <span
+          v-if="isLoading"
+          class="spinner-border spinner-border-sm"
+          role="status"
+          aria-hidden="true"
+        />
+      </template>
+      <template v-else>
+        <template v-if="profile">
+          <button
+            class="btn btn-danger"
+            @click="logOut"
+          >
+            Отключить
+          </button>
+          <span>
+            Подключенный аккаунт Шикимори:
+            <strong><a
+              :href="profile.url"
+              @click.prevent="openExternalElement"
+            >{{ profile.nickname }}</a></strong>
+          </span>
+        </template>
+        <button
+          v-else
+          class="btn btn-dark"
+          @click="login"
+        >
+          Подключить аккаунт Шикимори
+        </button>
+      </template>
+    </p>
+  </section>
 </template>
 
 <script lang="ts">
 import {defineComponent, ref} from 'vue';
 import {useElectron} from '/@/use/electron';
-import * as shiki from '/@/utils/shikimori-api';
+import type {ShikiUser} from '/@/utils/shikimori-api';
+import {clearCredentials, getAuthUrl, getUser, refreshCredentials} from '/@/utils/shikimori-api';
 import {showErrorMessage} from '/@/utils/dialogs';
 import {useRouter} from 'vue-router';
+import {openExternalElement} from '/@/use/openExternal';
 
 
 export default defineComponent({
   name: 'ShikiOauth',
   setup() {
     const {openURL} = useElectron();
-    const login = () => openURL(shiki.getAuthUrl());
+    const login = () => openURL(getAuthUrl());
 
-    const userName = ref('');
+    const isLoading = ref(true);
+    const profile = ref<ShikiUser | null>(null);
 
     const updateName = async () => {
-      const data = await shiki.getUser();
-      if (data) {
-        userName.value = data.nickname;
+      isLoading.value = true;
+      try {
+        profile.value = await getUser();
+      } finally {
+        isLoading.value = false;
       }
     };
 
     const code = new URL(location.href).searchParams.get('code') || '';
     if (code) {
       const router = useRouter();
       router.replace({query: {}});
-      shiki.refreshCredentials({type: 'authorization_code', code})
+      refreshCredentials({type: 'authorization_code', code})
         .then(() => {
           updateName();
         })
@@ -53,8 +92,13 @@ export default defineComponent({
       updateName();
     }
 
+    const logOut = () => {
+      clearCredentials();
+      profile.value = null;
+    };
+
 
-    return {login, userName};
+    return {login, profile, isLoading, openExternalElement, logOut};
   },
 });
 </script>

packages/renderer/src/use/openExternal.ts

@@ -0,0 +1,16 @@
+import {useElectron} from '/@/use/electron';
+
+
+const {openURL} = useElectron();
+export const openExternalElement = (event: MouseEvent) => {
+  if (!event.target) {
+    return;
+  }
+
+  const target = event.target as HTMLAnchorElement;
+  if (!target.href) {
+    return;
+  }
+
+  openURL(target.href);
+};

packages/renderer/src/utils/shikimori-api.ts

@@ -69,6 +69,9 @@ function isValidCredentials(data: unknown): data is Credentials {
     && 'created_at' in data;
 }
 
+export function clearCredentials(): void {
+  return localStorage.removeItem('shiki-token');
+}
 
 function saveCredentials(credentials: unknown): void {
   if (!isValidCredentials(credentials)) {
@@ -149,7 +152,7 @@ export function getUserRate(seriesId: number): Promise<ShikiUserRate | null> {
 }
 
 
-interface ShikiUser {
+export interface ShikiUser {
   id: number
   nickname: string,
   avatar: string

packages/renderer/src/utils/videoProvider/providers/anime365.ts

@@ -245,6 +245,6 @@ export function saveAccessToken(token?: string): void {
 }
 
 
-function clearAccessToken() {
+export function clearAccessToken() {
   return localStorage.removeItem(ACCESS_TOKEN_STORAGE_KEY);
 }