account deletion

apps/expo/src/app/sync/login.tsx

@@ -100,7 +100,7 @@ export default function Page() {
             Login
           </MWButton>
           {mutation.isError && (
-            <Text color="$red100" textAlign="center">
+            <Text color="$rose200" textAlign="center">
               {mutation.error.message}
             </Text>
           )}

apps/expo/src/app/sync/register/account.tsx

@@ -102,7 +102,7 @@ export default function Page() {
 
         <MWCard.Footer justifyContent="center" flexDirection="column" gap="$4">
           {errorMessage && (
-            <Paragraph color="$red100" textAlign="center">
+            <Paragraph color="$rose200" textAlign="center">
               {errorMessage}
             </Paragraph>
           )}

apps/expo/src/app/sync/register/confirm.tsx

@@ -88,7 +88,7 @@ export default function Page() {
 
         <MWCard.Footer justifyContent="center" flexDirection="column" gap="$4">
           {mutation.isError && (
-            <Paragraph color="$red100" textAlign="center">
+            <Paragraph color="$rose200" textAlign="center">
               {mutation.error.message}
             </Paragraph>
           )}

apps/expo/src/components/account/AccountInformation.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { Spinner, Text, XStack, YStack } from "tamagui";
+import { H3, Spinner, Text, XStack, YStack } from "tamagui";
 
 import {
   base64ToBuffer,
@@ -17,6 +17,7 @@ import { MWCard } from "../ui/Card";
 import { MWInput } from "../ui/Input";
 import { MWSeparator } from "../ui/Separator";
 import { Avatar } from "./Avatar";
+import { DeleteAccountAlert } from "./DeleteAccountAlert";
 import { getExpoIconFromDbIcon } from "./UserIconPicker";
 
 export function AccountInformation() {
@@ -115,6 +116,11 @@ export function AccountInformation() {
           </Text>
           <MWSeparator />
           {sessions.isLoading && <Spinner />}
+          {sessions.isError && (
+            <Text fontWeight="$bold" color="$rose200">
+              Error loading sessions
+            </Text>
+          )}
           {deviceListSorted.map((device) => (
             <MWCard bordered padded key={device.id}>
               <XStack gap="$4" alignItems="center">
@@ -136,6 +142,23 @@ export function AccountInformation() {
             </MWCard>
           ))}
         </YStack>
+
+        <YStack gap="$4">
+          <Text fontSize="$7" fontWeight="$bold">
+            Actions
+          </Text>
+          <MWSeparator />
+          <MWCard bordered padded>
+            <YStack gap="$3">
+              <H3 fontWeight="$bold">Delete account</H3>
+              <Text color="$ash300" fontWeight="$semibold">
+                This action is irreversible. All data will be deleted and
+                nothing can be recovered.
+              </Text>
+              <DeleteAccountAlert />
+            </YStack>
+          </MWCard>
+        </YStack>
       </YStack>
     </ScreenLayout>
   );

apps/expo/src/components/account/DeleteAccountAlert.tsx

@@ -0,0 +1,86 @@
+import { useMutation } from "@tanstack/react-query";
+import { AlertDialog, XStack, YStack } from "tamagui";
+
+import { deleteUser } from "@movie-web/api";
+
+import { useAuth } from "~/hooks/useAuth";
+import { useAuthStore } from "~/stores/settings";
+import { MWButton } from "../ui/Button";
+
+export function DeleteAccountAlert() {
+  const account = useAuthStore((state) => state.account);
+  const backendUrl = useAuthStore((state) => state.backendUrl);
+  const { logout } = useAuth();
+
+  const logoutMutation = useMutation({
+    mutationKey: ["logout"],
+    mutationFn: logout,
+  });
+
+  const deleteAccountMutation = useMutation({
+    mutationKey: ["deleteAccount"],
+    mutationFn: () => deleteUser(backendUrl, account!),
+    onSuccess: () => {
+      logoutMutation.mutate();
+    },
+  });
+
+  return (
+    <AlertDialog native>
+      <AlertDialog.Trigger asChild>
+        <MWButton type="danger" width="$14" alignSelf="flex-end">
+          Delete account
+        </MWButton>
+      </AlertDialog.Trigger>
+
+      <AlertDialog.Portal>
+        <AlertDialog.Overlay
+          key="overlay"
+          animation="quick"
+          opacity={0.5}
+          enterStyle={{ opacity: 0 }}
+          exitStyle={{ opacity: 0 }}
+        />
+        <AlertDialog.Content
+          bordered
+          elevate
+          key="content"
+          animation={[
+            "quick",
+            {
+              opacity: {
+                overshootClamping: true,
+              },
+            },
+          ]}
+          enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}
+          exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}
+          x={0}
+          scale={1}
+          opacity={1}
+          y={0}
+        >
+          <YStack gap="$4">
+            <AlertDialog.Title>Are you sure?</AlertDialog.Title>
+            <AlertDialog.Description>
+              This action is irreversible. All data will be deleted and nothing
+              can be recovered.
+            </AlertDialog.Description>
+
+            <XStack gap="$3" justifyContent="flex-end">
+              <AlertDialog.Cancel asChild>
+                <MWButton>Cancel</MWButton>
+              </AlertDialog.Cancel>
+              <AlertDialog.Action
+                asChild
+                onPress={() => deleteAccountMutation.mutate()}
+              >
+                <MWButton type="purple">I am sure</MWButton>
+              </AlertDialog.Action>
+            </XStack>
+          </YStack>
+        </AlertDialog.Content>
+      </AlertDialog.Portal>
+    </AlertDialog>
+  );
+}