wip: 複数の認証プロバイダとのアカウント連携機能を実装

Co-authored-by: Shin Ando <arata-nvm@users.noreply.github.com>

Co-authored-by: Shina <s7tya@users.noreply.github.com

src/domain/user.ts

@@ -1,6 +1,10 @@
 export type User = {
   id: string;
-  name: string;
+  authentication: {
+    twitter: boolean;
+    google: boolean;
+    apple: boolean;
+  };
 };
 
 export type Provider = "google" | "apple" | "twitter";

src/infrastructure/api/aspida/@types/index.ts

@@ -151,7 +151,11 @@ export type TagIdOnly = {
 
 export type User = {
   id: string;
-  name: string;
+  authentication: {
+    twitter: boolean;
+    google: boolean;
+    apple: boolean;
+  };
 };
 
 export type Payment = {

src/repositories/development/UserRepositoryInMemory.ts

@@ -9,7 +9,11 @@ export class UserRepositoryInMemory extends UserRepository {
     super();
     this.#user = {
       id: createId(),
-      name: "Twin:te",
+      authentication: {
+        twitter: true,
+        google: false,
+        apple: false,
+      },
     };
   }
 

src/ui/components/Button.vue

@@ -24,7 +24,7 @@ export default defineComponent({
       default: "flexible",
     },
     color: {
-      type: String as PropType<"base" | "primary" | "danger">,
+      type: String as PropType<"base" | "primary" | "danger" | "text-danger">,
       default: "base",
     },
     icon: {
@@ -129,6 +129,9 @@ export default defineComponent({
     background: getColor(--color-danger);
     color: getColor(--color-white);
   }
+  &--text-danger {
+    color: getColor(--color-danger);
+  }
   &--flexible {
     @include flexible;
   }

src/ui/pages/settings.vue

@@ -96,12 +96,52 @@ declare global {
             >通知設定を開く</Button
           >
         </div>
+
+        <h2 class="main__content--heading">アカウント連携</h2>
+
+        <div
+          v-for="provider in providers"
+          :key="provider.name"
+          class="main__content"
+        >
+          <p>{{ provider.name }}</p>
+          <Button
+            v-if="provider.linked"
+            class="button"
+            size="small"
+            color="base"
+            :pauseActiveStyle="false"
+            :state="
+              providers?.filter((provider) => provider.linked).length === 1
+                ? 'disabled'
+                : 'default'
+            "
+            @click="
+              () => {}
+            "
+            >連携を解除</Button
+          >
+          <Button
+            v-if="!provider.linked"
+            class="button"
+            size="small"
+            color="primary"
+            :pauseActiveStyle="false"
+            @click="
+              () => {}
+            "
+            >連携する</Button
+          >
+        </div>
+
+        <h2 class="main__content--heading">アカウントの削除</h2>
+
         <div class="main__content">
           <p>アカウント情報</p>
           <Button
             class="button"
             size="small"
-            color="danger"
+            color="text-danger"
             :pauseActiveStyle="false"
             @click="onClickAccountDeleteModel()"
             >アカウントを削除する</Button
@@ -146,6 +186,7 @@ import { computed } from "vue";
 import { useRouter } from "vue-router";
 import { usePorts } from "~/adapter";
 import Usecase from "~/application/usecases";
+import { getUser } from "~/application/usecases/user/getUser";
 import {
   InternalServerError,
   isNotResultError,
@@ -201,6 +242,43 @@ const openNotificationSetting = () => {
   }, 300);
 };
 
+/** Multiple Auth Provider */
+
+// データ取得がこれでいいのかわからない
+const ports = usePorts();
+const user = await getUser(ports)();
+
+type Provider = { name: string; linked: boolean };
+const getProviders = (): Provider[] | null => {
+  if (user instanceof NetworkError || user instanceof InternalServerError) {
+    displayToast("サーバーエラーが発生しました。", { type: "danger" });
+    return null;
+  }
+
+  const providers: Provider[] = [
+    {
+      name: "Twitter (X)",
+      linked: user?.authentication.twitter ?? false,
+    },
+    {
+      name: "Google",
+      linked: user?.authentication.google ?? false,
+    },
+    {
+      name: "Apple",
+      linked: user?.authentication.apple ?? false,
+    },
+  ];
+
+  return providers;
+};
+
+const providers = getProviders();
+
+const onClineRevokeProvider = (provider: string) => {
+  // TODO
+};
+
 /** Account Delete modal */
 const [
   isAccountDeletionModalVisible,