feat(account settings): Add signout functionality (#16)

* Create account.vue with logout button

* Update auth.rs to add signout command

* Update lib.rs to pass sign_out command to frontend

desktop/pages/account.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="mx-auto max-w-7xl px-8">
+    <div class="border-b border-zinc-700 py-5">
+      <h3 class="text-base font-semibold font-display leading-6 text-zinc-100">
+        Account
+      </h3>
+    </div>
+
+    <div class="mt-5">
+      <div class="divide-y divide-zinc-700">
+        <div class="py-6">
+          <div class="flex flex-col gap-4">
+            <div class="flex flex-row items-center justify-between">
+              <div>
+                <h3 class="text-sm font-medium leading-6 text-zinc-100">Sign out</h3>
+                <p class="mt-1 text-sm leading-6 text-zinc-400">
+                  Sign out of your Drop account on this device
+                </p>
+              </div>
+              <button
+                @click="signOut"
+                type="button"
+                class="rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
+              >
+                Sign out
+              </button>
+            </div>
+
+            <div v-if="error" class="rounded-md bg-red-600/10 p-4">
+              <div class="flex">
+                <div class="flex-shrink-0">
+                  <XCircleIcon class="h-5 w-5 text-red-600" aria-hidden="true" />
+                </div>
+                <div class="ml-3">
+                  <h3 class="text-sm font-medium text-red-600">
+                    {{ error }}
+                  </h3>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { invoke } from "@tauri-apps/api/core";
+import { listen } from '@tauri-apps/api/event'
+import { useRouter } from '#imports'
+import { XCircleIcon } from "@heroicons/vue/16/solid";
+
+const router = useRouter()
+const error = ref<string | null>(null)
+
+// Listen for auth events
+onMounted(async () => {
+  await listen('auth/signedout', () => {
+    router.push('/auth/signedout')
+  })
+})
+
+async function signOut() {
+  try {
+    error.value = null
+    await invoke('sign_out')
+  } catch (e) {
+    error.value = `Failed to sign out: ${e}`
+  }
+}
+</script> 

desktop/src-tauri/src/auth.rs

@@ -232,3 +232,29 @@ pub fn setup() -> Result<(AppStatus, Option<User>), ()> {
 
     Ok((AppStatus::SignedOut, None))
 }
+
+#[tauri::command]
+pub fn sign_out(app: AppHandle) -> Result<(), String> {
+    info!("Signing out user");
+    
+    // Clear auth from database
+    {
+        let mut handle = DB.borrow_data_mut().unwrap();
+        handle.auth = None;
+        drop(handle);
+        DB.save().unwrap();
+    }
+
+    // Update app state
+    {
+        let app_state = app.state::<Mutex<AppState>>();
+        let mut app_state_handle = app_state.lock().unwrap();
+        app_state_handle.status = AppStatus::SignedOut;
+        app_state_handle.user = None;
+    }
+
+    // Emit event for frontend
+    app.emit("auth/signedout", ()).unwrap();
+
+    Ok(())
+}

desktop/src-tauri/src/lib.rs

@@ -12,7 +12,7 @@ mod tests;
 mod autostart;
 
 use crate::db::DatabaseImpls;
-use auth::{auth_initiate, generate_authorization_header, manual_recieve_handshake, recieve_handshake, retry_connect};
+use auth::{auth_initiate, generate_authorization_header, manual_recieve_handshake, recieve_handshake, retry_connect, sign_out};
 use cleanup::{cleanup_and_exit, quit};
 use db::{
     add_download_dir, delete_download_dir, fetch_download_dir_stats, DatabaseInterface, GameStatus,
@@ -221,6 +221,7 @@ pub fn run() {
             auth_initiate,
             retry_connect,
             manual_recieve_handshake,
+            sign_out,
             // Remote
             use_remote,
             gen_drop_url,