fixed login but design is bruh

src/App.tsx

@@ -1,7 +1,14 @@
 import { BrowserRouter as Router, Routes, Route, Navigate, Outlet, useLocation } from 'react-router-dom';
-import {useContext, useEffect, useState } from "react";
+import {useEffect, useState } from "react";
 
-import AuthContext, { AuthProvider } from "./auth/auth-provider"
+import { ToastContainer } from "react-toastify";
+import {
+  argbFromHex,
+  themeFromSourceColor,
+  applyTheme,
+} from "@material/material-color-utilities";
+
+import { AuthProvider } from "./auth/auth-provider"
 import ping from "./auth/ping";
 
 import Login from "./pages/login/login"
@@ -14,8 +21,22 @@ import useAuth from './auth/auth';
 
 
 function App() {
+  const theme = themeFromSourceColor(argbFromHex("ffddaf"));
+  const systemDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+  applyTheme(theme, { target: document.body, dark: systemDark });
   return (
     <AuthProvider>
+    <>
+      <ToastContainer
+        position="top-right"
+        autoClose={2000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick={false}
+        rtl={false}
+        theme={"light"}
+        // transition={Bounce}
+      />
       <Router>
         <Routes>
           <Route path="/login" element={<Login />} />
@@ -30,13 +51,14 @@ function App() {
           <Route path="*" element={<div>404</div>} />
         </Routes>
       </Router>
+    </>
     </AuthProvider>
   );
 }
 
 
 const PrivateRoute = () => {
-  const { token } = useAuth();
+  const { token, loading } = useAuth();
   const location = useLocation();
   const [checked, setChecked] = useState(false);
   const [isValid, setIsValid] = useState(false);
@@ -49,14 +71,15 @@ const PrivateRoute = () => {
         return;
       }
       const result = await ping(token);
-      console.log(result)
       setIsValid(result);
       setChecked(true);
     };
-    checkAuth();
-  }, [token]);
+    if (!loading) {
+      checkAuth();
+    }
+  }, [token, loading]);
 
-  if (!checked) {
+  if (loading || !checked) {
     return <div>Checking server availability...</div>;
   }
 

src/auth/auth-provider.tsx

@@ -4,40 +4,40 @@ import { type JSX, useEffect, useState, createContext } from "react"
 type AuthContextType = {
   token: string | null;
   setToken: (token: string | null) => void;
+  loading: boolean;
 };
 
 
 const AuthContext = createContext<AuthContextType>({
   token: null,
   setToken: () => {},
+  loading: true,
 });
 
 
 export const AuthProvider = ({ children }: { children: JSX.Element }) => {
   const [token, setTokenState] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     const savedToken = localStorage.getItem("token");
     if (savedToken) {
       setTokenState(savedToken);
-      console.log("meow")
     }
-    console.log(savedToken)
+    setLoading(false)
   }, []);
 
   const setToken = (newToken: string | null) => {
     setTokenState(newToken);
     if (newToken) {
       localStorage.setItem("token", newToken);
-      console.log("saved")
     } else {
       localStorage.removeItem("token");
-      console.log("removed")
     }
   };
 
   return (
-    <AuthContext.Provider value={{ token, setToken }}>
+    <AuthContext.Provider value={{ token, setToken, loading }}>
       {children}
     </AuthContext.Provider>
   );

src/pages/login/login.tsx

@@ -1,5 +1,8 @@
 import { useState } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
+
+import { toast } from "react-toastify"
+
 import useAuth from "../../auth/auth";
 
 
@@ -12,36 +15,52 @@ const Login = () => {
 
   const from = location.state?.from?.pathname || "/";
 
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-
+  const handleSubmit = () => {
     // TODO: request to API
-    if (username === "admin" && password === "1234") {
+    if ((username === "admin" && password === "1234") || (username === "a" && password === "a")) {
       const token = "todo.jwt.token";
       setToken(token);
       navigate(from, { replace: true });
     } else {
-      alert("Wrong login or password");
+      toast.error("Wrong login or password");
     }
   };
 
   return (
-    <div style={{ padding: "20px" }}>
+    <div style={{
+        display: "flex",
+        justifyContent: "right",
+        alignItems: "center",
+        minHeight: "100vh",
+        flexDirection: "column",
+        gap: "15px",
+        margin: "0 15px"
+    }}>
       <h2>Login</h2>
-      <form onSubmit={handleSubmit}>
+      <form onSubmit={(e) => {e.preventDefault(); handleSubmit()}}
+        id="form-id"
+        style={{
+          flexDirection: "column",
+          display: "flex",
+          gap: "5px",
+          width: "100%",
+          maxWidth: "400px",
+          alignItems: "center",
+        }}
+      >
         <div>
-          <label>Username:</label>
           <input
             type="text"
+            placeholder=" Username"
             value={username}
             onChange={(e) => setUsername(e.target.value)}
             required
           />
         </div>
         <div>
-          <label>Password:</label>
           <input
             type="password"
+            placeholder=" Password"
             value={password}
             onChange={(e) => setPassword(e.target.value)}
             required