discord login btn

.env.example

@@ -0,0 +1 @@
+API_URL="http://localhost:3001/api"

package.json

@@ -17,15 +17,15 @@
     "axios": "^1.6.8",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "dotenv": "^16.4.5",
     "jwt-decode": "^3.1.2",
     "lucide-react": "^0.378.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.4",
     "react-router-dom": "^6.23.1",
     "tailwind-merge": "^2.3.0",
-    "tailwindcss-animate": "^1.0.7",
-    "zod": "^3.23.8"
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@eslint/compat": "^1.0.1",
@@ -46,5 +46,13 @@
     "typescript": "^5.2.2",
     "typescript-eslint": "^7.9.0",
     "vite": "^5.2.0"
+  },
+  "overrides": {
+    "typescript": "^5.2.2"
+  },
+  "react-dotenv": {
+    "whitelist": [
+      "API_URL"
+    ]
   }
 }

public/env.js

@@ -0,0 +1,3 @@
+window.env = {
+  "API_URL": "http://localhost:3001/api"
+};

src/App.tsx

@@ -1,5 +1,4 @@
 // import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";
-
 import "./index.css";
 import { Outlet } from "react-router-dom";
 import Nav from "./components/home/NavBar";
@@ -12,7 +11,7 @@ import Footer from "./components/home/Footer";
 // });
 
 function App() {
-  console.log("Welcome to Tomodachi!");
+  console.log("Welcome to RonanServices! Want to contribute?");
   return (
     <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
       <Nav />

src/api/index.js

@@ -0,0 +1,17 @@
+import axios from "axios";
+
+const client = axios.create({
+  // https://api.ronanplugins.com
+  baseURL: import.meta.env.VITE_API_URL,
+  responseType: "json",
+  withCredentials: true,
+  crossdomain: true,
+});
+
+export default {
+  async loginDiscord() {
+    // const params = new URLSearchParams({ username, password });
+
+    return client.get(`/auth/discord`);
+  },
+};

src/components/dialogs/LoginDialog.tsx

@@ -0,0 +1,39 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Button } from "../ui/button";
+import api from "@/api";
+
+export default function LoginDialog() {
+  const loginHandler = () => {
+    api.loginDiscord();
+  };
+
+  return (
+    <Dialog>
+      <DialogTrigger className="font-bold">Login/Register</DialogTrigger>
+      <DialogContent className="h-1/3">
+        <DialogHeader>
+          <DialogTitle>Login/Register</DialogTitle>
+          <DialogDescription className="flex h-full items-center">
+            <Button
+              style={{ backgroundColor: "#5865F2" }}
+              className="flex items-center w-full"
+              variant={"default"}
+              onClick={loginHandler}
+            >
+              <img className="h-6 w-6 mr-2" src="/assets/discord.svg" />
+
+              <span>Continue with Discord</span>
+            </Button>
+          </DialogDescription>
+        </DialogHeader>
+      </DialogContent>
+    </Dialog>
+  );
+}