From 5d88b15e7a92471eb880bdea358a06fa9b9c80eb Mon Sep 17 00:00:00 2001
From: ali josheghani <ali.josheghani2005@gmail.com>
Date: Thu, 30 May 2024 16:17:34 +0330
Subject: [PATCH] feat add login page and components

---
 src/App.tsx                                   |  5 ++
 .../header/components/navbar/Navbar.tsx       |  2 +-
 src/index.css                                 |  8 ++
 src/layout/AuthLayout.tsx                     | 15 ++++
 .../login/components/LoginNumberOrEmail.tsx   | 35 +++++++++
 src/pages/login/index.tsx                     | 78 +++++++++++++++++++
 6 files changed, 142 insertions(+), 1 deletion(-)
 create mode 100644 src/layout/AuthLayout.tsx
 create mode 100644 src/pages/login/components/LoginNumberOrEmail.tsx
 create mode 100644 src/pages/login/index.tsx

diff --git a/src/App.tsx b/src/App.tsx
index d3df451..6edf9a0 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,6 +6,8 @@ import Tutorial from "./pages/tutorial";
 import Rule from "./pages/rule";
 import About from "./pages/about";
 import ProgressBar from "./common/ProgressBar";
+import AuthLayout from "./layout/AuthLayout";
+import Login from "./pages/login";
 
 const App = () => {
   return (
@@ -21,6 +23,9 @@ const App = () => {
             <Route path="private" element={<p>private</p>} />
           </Route>
         </Route>
+        <Route path="login" element={<AuthLayout />} >
+          <Route index element={<Login />} />
+        </Route>
       </Routes>
     </Router>
   );
diff --git a/src/components/header/components/navbar/Navbar.tsx b/src/components/header/components/navbar/Navbar.tsx
index 09f02d2..7885176 100644
--- a/src/components/header/components/navbar/Navbar.tsx
+++ b/src/components/header/components/navbar/Navbar.tsx
@@ -42,7 +42,7 @@ const Navbar = () => {
             })}
           </div>
           <Button>
-            <Link to="login"> ورود </Link>
+            <Link to="/login"> ورود </Link>
           </Button>
           <div className="md:hidden">
             <MobileMenuButton isOpen={isOpen} onClick={toggleMenu} />
diff --git a/src/index.css b/src/index.css
index bae0092..afc84b5 100644
--- a/src/index.css
+++ b/src/index.css
@@ -21,6 +21,14 @@
     padding: 0;
     box-sizing: border-box;
   }
+  /* استایل‌های سفارشی برای autofill */
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  input:-webkit-autofill:active {
+    -webkit-box-shadow: 0 0 0 30px #2d3748 inset !important; /* رنگ پس‌زمینه مورد نظر */
+    -webkit-text-fill-color: #e2e8f0 !important; /* رنگ متن مورد نظر */
+  }
 
   body {
     font-family: "kalameh";
diff --git a/src/layout/AuthLayout.tsx b/src/layout/AuthLayout.tsx
new file mode 100644
index 0000000..8511231
--- /dev/null
+++ b/src/layout/AuthLayout.tsx
@@ -0,0 +1,15 @@
+import { Outlet } from "react-router-dom"
+import Particle from "../components/particle"
+
+const AuthLayout = () => {
+  return (
+    <>
+    <Particle />
+    <div className="relative w-full bg-noisy min-h-screen flex flex-col justify-center items-center overflow-hidden">
+        <Outlet />
+    </div>
+    </>
+  )
+}
+
+export default AuthLayout
\ No newline at end of file
diff --git a/src/pages/login/components/LoginNumberOrEmail.tsx b/src/pages/login/components/LoginNumberOrEmail.tsx
new file mode 100644
index 0000000..fbaee5a
--- /dev/null
+++ b/src/pages/login/components/LoginNumberOrEmail.tsx
@@ -0,0 +1,35 @@
+import { motion } from "framer-motion";
+import { Dispatch, SetStateAction } from "react";
+
+const LoginNumberOrEmail = ({
+  loginWithEmail,
+  setLoginWithEmail,
+}: {
+  loginWithEmail: boolean;
+  setLoginWithEmail: Dispatch<SetStateAction<boolean>>;
+}) => {
+  return (
+    <ul className="w-full h-full grid grid-cols-2 bg-gray-800 py-1 px-1 rounded-md text-sm md:text-base gap-3 justify-center items-center">
+      <motion.li
+        className={`text-center hover:cursor-pointer ${
+          !loginWithEmail && "bg-gray-700"
+        } rounded-md`}
+        onClick={() => setLoginWithEmail(false)}
+        whileHover={{ fontSize: "17px" }}
+      >
+        با شماره
+      </motion.li>
+      <motion.li
+        className={`text-center hover:cursor-pointer ${
+          loginWithEmail && "bg-gray-700"
+        } rounded-md`}
+        onClick={() => setLoginWithEmail(true)}
+        whileHover={{ fontSize: "17px" }}
+      >
+        با ایمیل
+      </motion.li>
+    </ul>
+  );
+};
+
+export default LoginNumberOrEmail;
diff --git a/src/pages/login/index.tsx b/src/pages/login/index.tsx
new file mode 100644
index 0000000..8a5c667
--- /dev/null
+++ b/src/pages/login/index.tsx
@@ -0,0 +1,78 @@
+import Input from "../../components/input";
+import Button from "../../components/button";
+import { useState } from "react";
+import LoginNumberOrEmail from "./components/LoginNumberOrEmail";
+import { motion } from "framer-motion";
+import Rabbit from "./components/Rabbit";
+
+const Login = () => {
+  const [loginWithEmail, setLoginWithEmail] = useState<boolean>(false);
+  const [inputText, setInputText] = useState<boolean>(false);
+  const [inputPassword, setInputPassword] = useState<boolean>(false);
+
+  return (
+    <>
+      <div className="w-4/5 rounded-lg shadow md:mt-0 sm:max-w-md xl:p-0 glass">
+        <Rabbit focusInputText={inputText} focusInputPassword={inputPassword} />
+        <div className="p-6 space-y-4 md:space-y-6 sm:p-8">
+          <h1 className="text-2xl font-bold text-center leading-tight tracking-tight md:text-3xl text-white">
+            ورود
+          </h1>
+          <LoginNumberOrEmail
+            loginWithEmail={loginWithEmail}
+            setLoginWithEmail={setLoginWithEmail}
+          />
+          <form className="flex flex-col gap-10">
+            <div className="w-full h-full flex flex-col gap-2">
+              {!loginWithEmail && (
+                <motion.div
+                  initial={{ x: "100vw", opacity: 0 }}
+                  animate={{ x: 0, opacity: 1 }}
+                >
+                  <Input
+                    id="number"
+                    type="text"
+                    label="شماره:"
+                    placeholder="sghl"
+                    onFocus={() => setInputText(true)}
+                    onBlur={() => setInputText(false)}
+                  />
+                </motion.div>
+              )}
+              {loginWithEmail && (
+                <motion.div
+                  initial={{ x: "-100vw", opacity: 0 }}
+                  animate={{ x: 0, opacity: 1 }}
+                >
+                  <Input
+                    id="ss"
+                    type="text"
+                    label="ایمیل:"
+                    placeholder="sghl"
+                    onFocus={() => setInputText(true)}
+                    onBlur={() => setInputText(false)}
+                  />
+                </motion.div>
+              )}
+
+              <Input
+                id="ss"
+                type="password"
+                label="رمز عبور"
+                placeholder="sghl"
+                onFocus={() => setInputPassword(true)}
+                onBlur={() => setInputPassword(false)}
+              />
+            </div>
+
+            <div className="w-full h-full grid grid-cols-1">
+              <Button extra="py-2">ورود</Button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Login;