ユーザが希望したタイミングでアカウントを削除できるようにしましょう

[KATO-Hiro]

[prettyhappycatty]

• [x] データをどのように削除するか仕様を決める（cascadeで関連全部消す？/残して論理削除？）

• [x] ユーザーの個人ページに削除ボタンを追加 + 復元が困難な操作であることがUIから分かるようにする

• [x] ほんとうに削除しますか？の確認をはさみたい

---

2024/3/12追記 2024/3/16追記

• [ ] アカウントの削除中は、loading状態であることがユーザにも分かるようにする
• [x] モーダルを利用して、アカウントの削除の意向を確認できるようにする solved by #545
• [ ] アカウントの削除後に、操作が完了したことをポップアップで表示する

---

こんな感じでしょうか？

[KATO-Hiro]

ありがとうございます！

cascadeで関連全部消す？/残して論理削除？

データベースの容量を節約する観点からは前者だと思いますが、誤操作への対策としては後者がよいのではないかと思っています。 ただ、誤操作は少なそうな気がしますので、cascadeで関連全部消してもよいと思いますが、いかがでしょうか?

[prettyhappycatty]

@KATO-Hiro はい！良いと思います。 また、回答の状況がある程度AtCoderの回答状況からインポートできるようになったら、アカウント消してしまっても復旧もしやすいとも思います。

[KATO-Hiro]

自己解決したため、closeします

実現したいこと

• アカウント削除ボタンを押すとモーダルが開く
• モーダルにある削除ボタンを押すと、アカウントの削除ができる

試したこと / できているところ

• UIライブラリのモーダルを利用し、コンポーネント内に削除ボタンを設置
• アカウント削除ボタンを押す → モーダル表示 → 削除ボタンを押せる状態

分からないところ / できていないところ

• 削除ボタンからForm actionのdeleteを呼び出し
• buttonにformaction属性を付与したものの、ログで動作を確認できず

https://kit.svelte.dev/docs/form-actions#named-actions

暫定的な対処

一旦、モーダルがない状態で実装を進めます。

    <!-- アカウント削除 (ゲストを除いた一般ユーザのみ) -->
    {#if isGeneralUser(role, username)}
      <TabItem>
        <span slot="title" class="text-lg">アカウント削除</span>
        <ContainerWrapper>
          <FormWrapper action="?/delete" marginTop="">
            <!-- hiddenでusernameを持つのは共通 -->
            <Input size="sm" type="hidden" name="username" bind:value={username} />

            <ReadOnlyLabel labelName="ユーザ名" inputValue={username} />
            <Button readonly type="submit" class="w-full">アカウントを削除</Button>
            <Button class="w-full" on:click={() => (defaultModal = true)}>アカウントを削除</Button>
            <Modal title="Terms of Service" bind:open={defaultModal} autoclose outsideclose>
              <!-- <svelte:fragment slot="footer"> -->
              <!-- <Button on:click={() => alert('Handle "success"')}>削除</Button> -->
              <form method="POST">
                <Button readonly type="submit" class="w-full" formaction="edit?/delete">アカウントを削除</Button>
              </form>
              <!-- </svelte:fragment> -->
            </Modal>
          </FormWrapper>
        </ContainerWrapper>
      </TabItem>
    {/if}