Dilos

package.json

@@ -27,6 +27,6 @@
     "prettier": "3.0.3",
     "prettier-plugin-tailwindcss": "0.5.6",
     "tailwindcss": "3.3.4",
-    "vite": "4.5.0"
+    "vite": "^4.5.14"
   }
-}
+}

src/api/axiosConfig.js

@@ -0,0 +1,28 @@
+import axios from "axios";
+
+
+const apiClient = axios.create({
+    baseURL: "https://localhost:7093/api",
+});
+
+
+apiClient.interceptors.request.use(
+    (config) => {
+
+        const token = localStorage.getItem("authToken");
+
+
+        if (token) {
+
+            config.headers.Authorization = `Bearer ${token}`;
+        }
+
+        return config;
+    },
+    (error) => {
+
+        return Promise.reject(error);
+    }
+);
+
+export default apiClient;

src/pages/auth/index.js

@@ -1,2 +1,2 @@
 export * from "@/pages/auth/sign-in";
-export * from "@/pages/auth/sign-up";
+

src/pages/auth/sign-in.jsx

@@ -1,126 +1,108 @@
-import {
-  Card,
-  Input,
-  Checkbox,
-  Button,
-  Typography,
-} from "@material-tailwind/react";
-import { Link } from "react-router-dom";
-
+import React, { useState } from "react"; // YENİ: useState eklendi
+import { Card, Input, Button, Typography } from "@material-tailwind/react";
+import { Link, useNavigate } from "react-router-dom"; // YENİ: useNavigate eklendi
 
 export function SignIn() {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const navigate = useNavigate();
+
+
+  const handleSignIn = async () => {
+    const loginData = {
+      username: username,
+      password: password,
+    };
+
+    try {
+      const response = await fetch("https://localhost:7093/api/Auth/Login", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(loginData),
+      });
+
+      if (response.ok) {
+        const token = await response.text();
+
+
+        localStorage.setItem("authToken", token);
+        console.log("Giriş Başarılı!");
+        navigate("/dashboard/home");
+      } else {
+        alert("Kullanıcı adı veya şifre hatalı!");
+      }
+    } catch (error) {
+      console.error("Sunucuya bağlanırken bir hata oluştu:", error);
+      alert("Sunucuya bağlanılamadı.");
+    }
+  };
+
   return (
-    <section className="m-8 flex gap-4">
-      <div className="w-full lg:w-3/5 mt-24">
-        <div className="text-center">
-          <Typography variant="h2" className="font-bold mb-4">Sign In</Typography>
-          <Typography variant="paragraph" color="blue-gray" className="text-lg font-normal">Enter your email and password to Sign In.</Typography>
-        </div>
-        <form className="mt-8 mb-2 mx-auto w-80 max-w-screen-lg lg:w-1/2">
-          <div className="mb-1 flex flex-col gap-6">
-            <Typography variant="small" color="blue-gray" className="-mb-3 font-medium">
-              Your email
-            </Typography>
-            <Input
-              size="lg"
-              placeholder="[email protected]"
-              className=" !border-t-blue-gray-200 focus:!border-t-gray-900"
-              labelProps={{
-                className: "before:content-none after:content-none",
-              }}
-            />
-            <Typography variant="small" color="blue-gray" className="-mb-3 font-medium">
-              Password
+      <section
+          className="min-h-screen flex items-center justify-center bg-cover bg-center"
+          style={{ backgroundImage: `url(/img/background.jpg)` }} // Arka plan resminizin yolu
+      >
+        <Card className="w-full max-w-md p-8 bg-white/90 backdrop-blur-sm shadow-2xl rounded-2xl">
+          <div className="text-center">
+            <Typography variant="h2" className="font-bold mb-6 text-gray-800">
+              LOGO
             </Typography>
-            <Input
-              type="password"
-              size="lg"
-              placeholder="********"
-              className=" !border-t-blue-gray-200 focus:!border-t-gray-900"
-              labelProps={{
-                className: "before:content-none after:content-none",
-              }}
-            />
           </div>
-          <Checkbox
-            label={
+          {/* YENİ: form etiketini div ile değiştirdik */}
+          <div className="flex flex-col gap-6">
+            <div>
               <Typography
-                variant="small"
-                color="gray"
-                className="flex items-center justify-start font-medium"
+                  variant="small"
+                  color="blue-gray"
+                  className="mb-2 font-medium"
               >
-                I agree the&nbsp;
-                <a
-                  href="#"
-                  className="font-normal text-black transition-colors hover:text-gray-900 underline"
-                >
-                  Terms and Conditions
-                </a>
+                Kullanıcı Adı
               </Typography>
-            }
-            containerProps={{ className: "-ml-2.5" }}
-          />
-          <Button className="mt-6" fullWidth>
-            Sign In
-          </Button>
+              <Input
+                  size="lg"
+                  placeholder="Kullanıcı Adı"
+                  className="!border-t-blue-gray-200 focus:!border-t-gray-900"
+                  labelProps={{
+                    className: "before:content-none after:content-none",
+                  }}
+                  // YENİ: State bağlantıları
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+              />
+            </div>
 
-          <div className="flex items-center justify-between gap-2 mt-6">
-            <Checkbox
-              label={
-                <Typography
+            <div>
+              <Typography
                   variant="small"
-                  color="gray"
-                  className="flex items-center justify-start font-medium"
-                >
-                  Subscribe me to newsletter
-                </Typography>
-              }
-              containerProps={{ className: "-ml-2.5" }}
-            />
-            <Typography variant="small" className="font-medium text-gray-900">
-              <a href="#">
-                Forgot Password
-              </a>
-            </Typography>
-          </div>
-          <div className="space-y-4 mt-8">
-            <Button size="lg" color="white" className="flex items-center gap-2 justify-center shadow-md" fullWidth>
-              <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <g clipPath="url(#clip0_1156_824)">
-                  <path d="M16.3442 8.18429C16.3442 7.64047 16.3001 7.09371 16.206 6.55872H8.66016V9.63937H12.9813C12.802 10.6329 12.2258 11.5119 11.3822 12.0704V14.0693H13.9602C15.4741 12.6759 16.3442 10.6182 16.3442 8.18429Z" fill="#4285F4" />
-                  <path d="M8.65974 16.0006C10.8174 16.0006 12.637 15.2922 13.9627 14.0693L11.3847 12.0704C10.6675 12.5584 9.7415 12.8347 8.66268 12.8347C6.5756 12.8347 4.80598 11.4266 4.17104 9.53357H1.51074V11.5942C2.86882 14.2956 5.63494 16.0006 8.65974 16.0006Z" fill="#34A853" />
-                  <path d="M4.16852 9.53356C3.83341 8.53999 3.83341 7.46411 4.16852 6.47054V4.40991H1.51116C0.376489 6.67043 0.376489 9.33367 1.51116 11.5942L4.16852 9.53356Z" fill="#FBBC04" />
-                  <path d="M8.65974 3.16644C9.80029 3.1488 10.9026 3.57798 11.7286 4.36578L14.0127 2.08174C12.5664 0.72367 10.6469 -0.0229773 8.65974 0.000539111C5.63494 0.000539111 2.86882 1.70548 1.51074 4.40987L4.1681 6.4705C4.8001 4.57449 6.57266 3.16644 8.65974 3.16644Z" fill="#EA4335" />
-                </g>
-                <defs>
-                  <clipPath id="clip0_1156_824">
-                    <rect width="16" height="16" fill="white" transform="translate(0.5)" />
-                  </clipPath>
-                </defs>
-              </svg>
-              <span>Sign in With Google</span>
-            </Button>
-            <Button size="lg" color="white" className="flex items-center gap-2 justify-center shadow-md" fullWidth>
-              <img src="/img/twitter-logo.svg" height={24} width={24} alt="" />
-              <span>Sign in With Twitter</span>
-            </Button>
-          </div>
-          <Typography variant="paragraph" className="text-center text-blue-gray-500 font-medium mt-4">
-            Not registered?
-            <Link to="/auth/sign-up" className="text-gray-900 ml-1">Create account</Link>
-          </Typography>
-        </form>
+                  color="blue-gray"
+                  className="mb-2 font-medium"
+              >
+                Şifre
+              </Typography>
+              <Input
+                  type="password"
+                  size="lg"
+                  placeholder="********"
+                  className="!border-t-blue-gray-200 focus:!border-t-gray-900"
+                  labelProps={{
+                    className: "before:content-none after:content-none",
+                  }}
+
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+              />
+            </div>
 
-      </div>
-      <div className="w-2/5 h-full hidden lg:block">
-        <img
-          src="/img/pattern.png"
-          className="h-full w-full object-cover rounded-3xl"
-        />
-      </div>
 
-    </section>
+            <Button className="mt-4" fullWidth onClick={handleSignIn}>
+              Giriş Yap
+            </Button>
+          </div>
+        </Card>
+      </section>
   );
 }
 
-export default SignIn;
+export default SignIn;

src/pages/dashboard/home.jsx

@@ -98,7 +98,7 @@ export function Home() {
               <MenuList>
                 <MenuItem>Action</MenuItem>
                 <MenuItem>Another Action</MenuItem>
-                <MenuItem>Something else here</MenuItem>
+                <MenuItem>lllll else here</MenuItem>
               </MenuList>
             </Menu>
           </CardHeader>