Add log out button

Author: Hamuko

frontend/src/components/Header.css

@@ -42,3 +42,8 @@ header .user-info h5 {
 header .user-info h5 {
     font-weight: 500;
 }
+
+header .user-info h5 > a {
+    cursor: pointer;
+    font-weight: 600;
+}

frontend/src/components/Header.tsx

@@ -1,4 +1,5 @@
 import "./Header.css";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import type { User } from "../types";
 
 function ExpiryText({ expiry }: { expiry: number }) {
@@ -17,16 +18,39 @@ function ExpiryText({ expiry }: { expiry: number }) {
   return <span className="warn">{daysUntilExpiry} days</span>;
 }
 
+function LogoutButton() {
+  const queryClient = useQueryClient();
+
+  const { mutate } = useMutation({
+    mutationFn: async () => {
+      const response = await fetch("/api/user", {
+        method: "DELETE",
+      });
+      if (!response.ok) {
+        const data = await response.json();
+        throw Error(data.error);
+      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["user"] });
+    },
+  });
+
+  return <a onClick={() => mutate()}>Log out.</a>;
+}
+
 function UserInfo({ user }: { user: User | null }) {
   return (
     <div className="user-info">
       <h4>{user ? user.name : "No Anilist token set"}</h4>
 
       {user ? (
-        <h5>
-          Token will expire in approximately <ExpiryText expiry={user.expiry} />
-          .
-        </h5>
+        <>
+          <h5>
+            Token will expire in approximately{" "}
+            <ExpiryText expiry={user.expiry} />. <LogoutButton />
+          </h5>
+        </>
       ) : (
         <h5>Token must be set in order to use anifunnel</h5>
       )}

src/api.rs

@@ -183,3 +183,31 @@ pub async fn user_post(
     }
     Ok(status::Accepted(()))
 }
+
+#[delete("/api/user")]
+/// Clear the authentication data from the database and application state.
+pub async fn user_delete(
+    mut db: Connection<db::AnifunnelDatabase>,
+    state: &rocket::State<state::Global>,
+) -> Result<status::Accepted<()>, responders::ErrorResponder> {
+    match db::clear_authentication(&mut db).await {
+        Ok(_) => {
+            info!("Authentication data cleared from the database");
+        }
+        Err(err) => {
+            error!("Error while trying to clear authentication: {}", err);
+            return Err(responders::ErrorResponder::with_message(
+                "Error while clearing authentication data".into(),
+            ));
+        }
+    }
+
+    // Update the state to clear the client.
+    let anifunnel_state: &state::Global = state.inner();
+    {
+        let mut writer = anifunnel_state.anilist_client.write().await;
+        *writer = None;
+        info!("Application state cleared");
+    }
+    Ok(status::Accepted(()))
+}

src/db.rs

@@ -23,6 +23,13 @@ impl AnimeOverride {
     }
 }
 
+/// Clear all authentication data from the database.
+pub async fn clear_authentication(
+    db: &mut SqliteConnection,
+) -> Result<SqliteQueryResult, sqlx::Error> {
+    sqlx::query("DELETE FROM authentication").execute(db).await
+}
+
 /// Clean up expired tokens on start-up.
 async fn remove_expired_tokens(db: &mut SqliteConnection) {
     log::info!("Removing expired Anilist tokens...");

src/main.rs

@@ -215,6 +215,7 @@ fn build_server(
                 scrobble,
                 api::user_get,
                 api::user_post,
+                api::user_delete,
                 api::anime_get,
                 api::anime_override,
                 favicon_svg,