feat: delete account (#1653)

* feat: delete account

* fix: copy adjustments

Co-authored-by: Mo

packages/web/src/javascripts/Components/Preferences/Panes/Account/AccountPreferences.tsx

@@ -10,6 +10,7 @@ import FilesSection from './Files'
 import PreferencesPane from '../../PreferencesComponents/PreferencesPane'
 import SubscriptionSharing from './SubscriptionSharing/SubscriptionSharing'
 import Email from './Email'
+import DeleteAccount from '@/Components/Preferences/Panes/Account/DeleteAccount'
 
 type Props = {
   application: WebApplication
@@ -33,6 +34,7 @@ const AccountPreferences = ({ application, viewControllerManager }: Props) => (
     )}
     <Email application={application} />
     <SignOutWrapper application={application} viewControllerManager={viewControllerManager} />
+    <DeleteAccount application={application} viewControllerManager={viewControllerManager} />
   </PreferencesPane>
 )
 

packages/web/src/javascripts/Components/Preferences/Panes/Account/DeleteAccount.tsx

@@ -0,0 +1,42 @@
+import { observer } from 'mobx-react-lite'
+import PreferencesSegment from '@/Components/Preferences/PreferencesComponents/PreferencesSegment'
+import { Text, Title } from '@/Components/Preferences/PreferencesComponents/Content'
+import Button from '@/Components/Button/Button'
+import PreferencesGroup from '@/Components/Preferences/PreferencesComponents/PreferencesGroup'
+import { ViewControllerManager } from '@Controllers/ViewControllerManager'
+import { WebApplication } from '@/Application/Application'
+
+type Props = {
+  application: WebApplication
+  viewControllerManager: ViewControllerManager
+}
+
+const DeleteAccount = ({ application, viewControllerManager }: Props) => {
+  if (!application.hasAccount()) {
+    return null
+  }
+  return (
+    <PreferencesGroup>
+      <PreferencesSegment>
+        <Title>Delete account</Title>
+        <Text>
+          This action is irreversible. After deletion completes, you will be signed out on all devices. If you have an
+          active paid subscription, cancel the subscription first. Otherwise, if you'd like to keep the subscription,
+          you can re-register with the same email after deletion, and your subscription will be linked back up with your
+          account.
+        </Text>
+        <div className="mt-3 flex flex-row flex-wrap gap-3">
+          <Button
+            colorStyle="danger"
+            label="Delete my account"
+            onClick={() => {
+              viewControllerManager.accountMenuController.setDeletingAccount(true)
+            }}
+          />
+        </div>
+      </PreferencesSegment>
+    </PreferencesGroup>
+  )
+}
+
+export default observer(DeleteAccount)