Add notifications on auth button (#68)

* Add notifications

* Fix prettier

src-tauri/src/plugins/cohdb/auth/mod.rs

@@ -81,7 +81,7 @@ impl PluginState {
 }
 
 #[tauri::command]
-async fn authenticate<R: Runtime>(handle: AppHandle<R>) -> Result<()> {
+async fn authenticate<R: Runtime>(handle: AppHandle<R>) -> Result<String> {
     let state = handle.state::<PluginState>();
     let request = ActiveRequestState::new();
 
@@ -96,7 +96,8 @@ async fn authenticate<R: Runtime>(handle: AppHandle<R>) -> Result<()> {
     *state.request.lock().await = Some(request);
 
     info!("redirecting to auth URL: {auth_url}");
-    open(&handle.shell_scope(), auth_url, None).map_err(Shell)
+    open(&handle.shell_scope(), auth_url.clone(), None).map_err(Shell);
+    Ok(auth_url.to_string())
 }
 
 pub async fn retrieve_token<R: Runtime>(request: &str, handle: &AppHandle<R>) -> Result<()> {

src/utils/notifications.tsx

@@ -5,21 +5,30 @@ import React from "react"
 const showNotification = ({
   title,
   message,
-  type,
+  type = "success",
+  autoCloseInMs = 10000,
 }: {
   title: string
-  message: string
-  type: "success" | "error"
+  message: string | React.ReactNode
+  type?: "success" | "error" | "info"
+  autoCloseInMs?: number // Default is 10 seconds
 }) => {
   if (type === "success") {
     notifications.show({
       title: title,
       message: message,
       color: "green",
       // 10 seconds
-      autoClose: 10000,
+      autoClose: autoCloseInMs,
       icon: <IconCheck />,
     })
+  } else if (type === "info") {
+    notifications.show({
+      title: title,
+      message: message,
+      color: "blue",
+      autoClose: autoCloseInMs,
+    })
   } else {
     notifications.show({
       title: title,

src/views/Replays.tsx

@@ -18,7 +18,7 @@ import {
   Code,
 } from "@mantine/core"
 import { useEffect, useState } from "react"
-import { IconCheck, IconX } from "@tabler/icons-react"
+import { IconCheck, IconCopy, IconX } from "@tabler/icons-react"
 import { open } from "@tauri-apps/api/dialog"
 import { open as openLink } from "@tauri-apps/api/shell"
 import {
@@ -33,6 +33,7 @@ import { COHDBIcon } from "../components/other/COHDB-icon"
 import { showNotification } from "../utils/notifications"
 import { cohdbBaseUrl, cohdbPlayerOverView } from "../utils/external-routes"
 import HelperIcon from "../components/other/helper-icon"
+import { writeText } from "@tauri-apps/api/clipboard"
 
 interface CohdbUser {
   name: string
@@ -149,9 +150,34 @@ export const Replays: React.FC = () => {
             ) : (
               <Button
                 variant="default"
-                onClick={() => {
-                  invoke("plugin:cohdb|authenticate")
+                onClick={async () => {
+                  const authUrl = await invoke("plugin:cohdb|authenticate")
                   events.connect_coh_db()
+
+                  showNotification({
+                    title: "Opening browser window",
+                    message: (
+                      <>
+                        If it didn't open, please copy this url into your
+                        browser:
+                        <Space h={"xs"} />
+                        <Group spacing={"xs"} noWrap>
+                          <Tooltip label="Copy">
+                            <ActionIcon
+                              onClick={() => {
+                                writeText(`${authUrl}`)
+                              }}
+                            >
+                              <IconCopy size="22" />
+                            </ActionIcon>
+                          </Tooltip>
+                          <Code block>{`${authUrl}`}</Code>
+                        </Group>
+                      </>
+                    ),
+                    type: "info",
+                    autoCloseInMs: 20000,
+                  })
                 }}
               >
                 <span style={{ paddingRight: 10 }}>