From 5597bf5d1e3d1296267e072f7c05105077d04545 Mon Sep 17 00:00:00 2001
From: Azalea <22280294+hykilpikonna@users.noreply.github.com>
Date: Thu, 22 Feb 2024 19:06:18 -0500
Subject: [PATCH] [O] Show confirm dialog when unlinking a card

---
 AquaNet/src/app.sass                   |  6 +++--
 AquaNet/src/components/Confirm.svelte  | 32 ++++++++++++++------------
 AquaNet/src/libs/generalTypes.ts       |  9 ++++++++
 AquaNet/src/pages/Home/LinkCard.svelte | 19 ++++++++++++---
 4 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/AquaNet/src/app.sass b/AquaNet/src/app.sass
index 622f93b8..472e067f 100644
--- a/AquaNet/src/app.sass
+++ b/AquaNet/src/app.sass
@@ -79,8 +79,10 @@ button:focus, button:focus-visible
 button.error
   color: unset
   &:hover
-    background: $c-error
-    border-color: transparent
+    border-color: $c-error
+    color: $c-error
+    //background: $c-error
+    //border-color: transparent
 
 button.icon
   padding: 0.6em
diff --git a/AquaNet/src/components/Confirm.svelte b/AquaNet/src/components/Confirm.svelte
index 04838b29..3b86511d 100644
--- a/AquaNet/src/components/Confirm.svelte
+++ b/AquaNet/src/components/Confirm.svelte
@@ -2,13 +2,8 @@
 
 <script lang="ts">
   import { fade } from 'svelte/transition'
-
-  interface ConfirmProps {
-    title: string
-    message: string
-    confirm: () => void
-    cancel?: () => void
-  }
+  import { clz } from "../libs/ui";
+  import type { ConfirmProps } from "../libs/generalTypes";
 
   // Props
   export let show: ConfirmProps
@@ -16,19 +11,26 @@
 
 {#if show}
   <div class="overlay" transition:fade>
-    <h1>{show.title}</h1>
-    <span>{show.message}</span>
+    <div>
+      <h2>{show.title}</h2>
+      <span>{show.message}</span>
 
-    <div class="actions">
-      {#if show.cancel}
-        <!-- Svelte LSP is very annoying here -->
-        <button on:click={() => show.cancel && show.cancel()}>Cancel</button>
-      {/if}
-      <button on:click={() => show.confirm()}>Confirm</button>
+      <div class="actions">
+        {#if show.cancel}
+          <!-- Svelte LSP is very annoying here -->
+          <button on:click={() => show.cancel && show.cancel()}>Cancel</button>
+        {/if}
+        <button on:click={() => show.confirm()} class={clz({error: show.dangerous})}>Confirm</button>
+      </div>
     </div>
   </div>
 {/if}
 
 <style lang="sass">
+  .actions
+    display: flex
+    gap: 16px
 
+    button
+      width: 100%
 </style>
\ No newline at end of file
diff --git a/AquaNet/src/libs/generalTypes.ts b/AquaNet/src/libs/generalTypes.ts
index 82712772..df5a5346 100644
--- a/AquaNet/src/libs/generalTypes.ts
+++ b/AquaNet/src/libs/generalTypes.ts
@@ -40,4 +40,13 @@ export interface CardSummary {
   chunithm: CardSummaryGame | null
   ongeki: CardSummaryGame | null
   diva: CardSummaryGame | null
+}
+
+
+export interface ConfirmProps {
+  title: string
+  message: string
+  confirm: () => void
+  cancel?: () => void
+  dangerous?: boolean
 }
\ No newline at end of file
diff --git a/AquaNet/src/pages/Home/LinkCard.svelte b/AquaNet/src/pages/Home/LinkCard.svelte
index 9f9d0b19..255b4639 100644
--- a/AquaNet/src/pages/Home/LinkCard.svelte
+++ b/AquaNet/src/pages/Home/LinkCard.svelte
@@ -3,13 +3,15 @@
 <script lang="ts">
   import { slide, fade } from "svelte/transition"
   import { clz } from "../../libs/ui";
-  import type { Card, CardSummary, CardSummaryGame, UserMe } from "../../libs/generalTypes";
+  import type { Card, CardSummary, CardSummaryGame, ConfirmProps, UserMe } from "../../libs/generalTypes";
   import { CARD, USER } from "../../libs/sdk";
   import moment from "moment"
   import Icon from "@iconify/svelte";
+  import Confirm from "../../components/Confirm.svelte";
 
   // State
   let state: 'ready' | 'linking-AC' | 'linking-SN' | 'loading' = "loading"
+  let showConfirm: ConfirmProps | null = null
 
   let error: string = ""
   let me: UserMe | null = null
@@ -141,8 +143,17 @@
   }
 
   async function unlink(card: Card) {
-    await CARD.unlink(card.luid)
-    await updateMe()
+    showConfirm = {
+      title: "Unlink Card",
+      message: "Are you sure you want to unlink this card?",
+      confirm: async () => {
+        await CARD.unlink(card.luid)
+        await updateMe()
+        showConfirm = null
+      },
+      cancel: () => showConfirm = null,
+      dangerous: true
+    }
   }
 
   // Access code input
@@ -298,6 +309,8 @@
       </div>
     </div>
   {/if}
+
+  <Confirm show={showConfirm} />
 </div>
 
 <style lang="sass">