From cef0a0e431399475bc8c171159fe38067c88290e Mon Sep 17 00:00:00 2001
From: Ryoga-exe <49950206+Ryoga-exe@users.noreply.github.com>
Date: Tue, 5 Sep 2023 09:27:20 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=80=A3=E6=90=BA=E8=A7=A3=E9=99=A4?=
 =?UTF-8?q?=E6=99=82=E3=81=AE=E3=83=A2=E3=83=BC=E3=83=80=E3=83=AB=E3=82=92?=
 =?UTF-8?q?=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Shin Ando <arata-nvm@users.noreply.github.com>
Co-authored-by: Shina <s7tya@users.noreply.github.com>
---
 src/ui/pages/settings.vue | 73 +++++++++++++++++++++++++++++++++------
 1 file changed, 62 insertions(+), 11 deletions(-)

diff --git a/src/ui/pages/settings.vue b/src/ui/pages/settings.vue
index 575f52c0..35d632cc 100644
--- a/src/ui/pages/settings.vue
+++ b/src/ui/pages/settings.vue
@@ -116,9 +116,7 @@ declare global {
                 ? 'disabled'
                 : 'default'
             "
-            @click="
-              () => {}
-            "
+            @click="onClineRevokeProvider(provider.name)"
             >連携を解除</Button
           >
           <Button
@@ -127,9 +125,7 @@ declare global {
             size="small"
             color="primary"
             :pauseActiveStyle="false"
-            @click="
-              () => {}
-            "
+            @click="() => {}"
             >連携する</Button
           >
         </div>
@@ -149,6 +145,40 @@ declare global {
         </div>
       </div>
     </div>
+    <Modal
+      v-if="isProviderRevocationModalVisible"
+      class="provider-revocation-modal"
+      @click="closeProviderRevocationModal"
+    >
+      <template #title>連携を解除しますか？</template>
+      <template #contents>
+        <p class="modal__text">
+          再度連携するまで{{
+            selectedProvider ?? "aaaa"
+          }}を使ってTwin:teにログインできなくなります。
+        </p>
+      </template>
+      <template #button>
+        <Button
+          size="medium"
+          layout="fill"
+          color="base"
+          @click="closeProviderRevocationModal"
+          >キャンセル</Button
+        >
+        <Button
+          size="medium"
+          layout="fill"
+          color="danger"
+          @click="
+            () => {
+              /* TODO */
+            }
+          "
+          >解除</Button
+        >
+      </template>
+    </Modal>
     <Modal
       v-if="isAccountDeletionModalVisible"
       class="account-delete-modal"
@@ -182,7 +212,7 @@ declare global {
 
 <script setup lang="ts">
 import { useHead } from "@vueuse/head";
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { useRouter } from "vue-router";
 import { usePorts } from "~/adapter";
 import Usecase from "~/application/usecases";
@@ -258,15 +288,15 @@ const getProviders = (): Provider[] | null => {
   const providers: Provider[] = [
     {
       name: "Twitter (X)",
-      linked: user?.authentication.twitter ?? false,
+      linked: user?.authentication?.twitter ?? false,
     },
     {
       name: "Google",
-      linked: user?.authentication.google ?? false,
+      linked: user?.authentication?.google ?? false,
     },
     {
       name: "Apple",
-      linked: user?.authentication.apple ?? false,
+      linked: user?.authentication?.apple ?? false,
     },
   ];
 
@@ -275,8 +305,17 @@ const getProviders = (): Provider[] | null => {
 
 const providers = getProviders();
 
+const selectedProvider = ref<string | undefined>(undefined);
+
+const [
+  isProviderRevocationModalVisible,
+  openProviderRevocationModal,
+  closeProviderRevocationModal,
+] = useSwitch(false);
+
 const onClineRevokeProvider = (provider: string) => {
-  // TODO
+  selectedProvider.value = provider;
+  openProviderRevocationModal();
 };
 
 /** Account Delete modal */
@@ -365,4 +404,16 @@ const confirmDeleteAccount = async () => {
     }
   }
 }
+
+.provider-revocation-modal {
+  .button {
+    width: calc(50% - $spacing-3);
+    &:first-child {
+      margin-right: $spacing-3;
+    }
+    &:last-child {
+      margin-left: $spacing-3;
+    }
+  }
+}
 </style>