Merge pull request nishant0708#4 from TanishqMehrunkarIIPSDAVV/Tanishq

Tanishq

.gitignore

@@ -1,6 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
+test.txt
 /node_modules
 /.pnp
 .pnp.js

src/Login/Login.css

@@ -1,68 +1,118 @@
-body {
-  height: 100vh;
-  margin: 0;
-}
-
-.login-container {
-  width: 100%;
-  max-width: 400px;
-  padding: 20px;
-  border: 1px solid #ccc;
-  border-radius: 8px;
-  background-color: #282828;
-  box-shadow: 0 0 10px 0 white;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.login-container img {
-  width: 100px;
-  height: 100px;
-  margin-bottom: 20px;
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.login-container h2 {
-  text-align: center;
-  margin-bottom: 20px;
-  color: #fffcfc;
-}
-
-.login-container form {
-  display: flex;
-  flex-direction: column;
-}
-
-.login-container label {
-  margin-bottom: 8px;
-  color: #fffcfc;
-}
-
-.login-container input {
-  padding: 10px;
-  margin-bottom: 20px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  font-size: 16px;
-  width: 95%;
-  background-color: #6e6e6e;
-  color: white;
-}
-
-.login-container button {
-  padding: 10px;
-  border: none;
-  border-radius: 4px;
-  background-color: #4caf50;
+body ::placeholder
+{
   color: white;
-  font-size: 16px;
-  cursor: pointer;
-}
-
-.login-container button:hover {
-  background-color: #45a049;
 }
+body {
+    height: 100vh;
+    margin: 0;
+  }
+  .password-eye-container
+  {
+      position: relative;
+  }
+  .display-flex
+  {
+    display: flex;
+    justify-content: space-between;
+  }
+  .display-flex div
+  {
+    width: 225px;
+  }
+  .display-flex div:nth-child(even)
+  {
+    margin-right: 13px;
+  }
+  .eyes-login
+  {
+    position: absolute;
+    right: 7px;
+    top:12px;
+  }
+  .eyes-login:hover
+  {
+      cursor: pointer;
+  }
+  .eyes-login:nth-child(2)
+  {
+      display: none;
+  }
+  .login-container {
+    width: 100%;
+    max-width: 500px;
+    padding: 20px;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    background-color: #282828;
+    box-shadow: 0 0 10px 0 white;
+    position:absolute;
+    top:50%;
+    left:50%;
+    transform: translate(-50%,-50%);
+  }
+
+  .login-container img {
+    width: 100px;
+    height: 100px;
+    margin-bottom: 20px;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .login-container h2 {
+    text-align: center;
+    margin-bottom: 20px;
+    color: #fffcfc;
+  }
+
+  .login-container form {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .login-container label {
+    margin-bottom: 8px;
+    color: #fffcfc;
+  }
+
+  .login-container input {
+    padding: 10px;
+    margin-bottom: 20px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 16px;
+    width: 95%;
+    background-color: #6e6e6e;
+    color: white;
+  }
+
+  .login-container button {
+    padding: 10px;
+    border: none;
+    border-radius: 4px;
+    background-color: #4CAF50;
+    color: white;
+    font-size: 16px;
+    cursor: pointer;
+  }
+
+  .login-container button:hover {
+    background-color: #45a049;
+  }
+
+  @media(max-width: 720px)
+  {
+      .login-container
+      {
+        width: 275px;
+      }
+      .display-flex div
+      {
+        width: 120px;
+      }
+      .display-flex div:nth-child(even)
+      {
+        margin-right: 9px;
+      }
+  }

src/Login/Login.jsx

@@ -1,20 +1,33 @@
 import React, { useState } from "react";
 import "./Login.css"; // Import the CSS file
 import logo from "../assets/iips_logo2.png"; // Corrected the import statement
+import { FaEye } from "react-icons/fa6";
+import { FaEyeSlash } from "react-icons/fa6";
 
 function Login() {
-  const [email, setEmail] = useState("");
+  const [name, setName] = useState("");
   const [password, setPassword] = useState("");
+  const [rollno, setRollNo] = useState("");
+  const [enrollno,setEnrollNo] = useState("");
+  const [subcode,setSubcode] = useState("");
+  const [subname,setSubname] = useState("");
+  const [date,setDate] = useState("");
+  const [d,setDisplay] = useState("none");
+
+  const toggled=()=>
+  {
+      d === "block" ? setDisplay("none") : setDisplay("block");
+  }
 
   const handleSubmit = (e) => {
     e.preventDefault();
 
     // Simulate a login process
-    if (email && password) {
+    if (name && password && rollno && enrollno && subcode && subname && date) {
       alert("Login successful!");
       // Proceed with your login logic here
     } else {
-      alert("Please enter both email and password.");
+      alert("Please enter all fields!!!");
     }
   };
 
@@ -24,27 +37,86 @@ function Login() {
       <h2>Student: Login</h2>
       <form onSubmit={handleSubmit}>
         <div>
-          <label>
-            Email:
-            <input
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              required
-            />
-          </label>
+          <label>Name:</label>
+          <input
+          type="text"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          placeholder="Enter the Name:"
+          required
+          />
         </div>
         <div>
           <label>
             Password:
-            <input
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              required
-            />
+            <div className="password-eye-container">
+              <input
+                id="password-eye"
+                type={d === "block" ? "text" : "password"}
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder="Enter the Password:"
+                required
+              />
+              <FaEye className="eyes-login" onClick={() => toggled()} style={{display: d}}/>
+              <FaEyeSlash className="eyes-login" onClick={() => toggled()} style={{display: (d === "block" ? "none" : "block")}}/>
+            </div>
           </label>
         </div>
+        <div className="display-flex">
+          <div>
+            <label>Roll No. :</label>
+            <input 
+            type="text"
+            value={rollno}
+            onChange={(e) => setRollNo(e.target.value)}
+            placeholder="Enter the Roll No:"
+            required
+            />
+          </div>
+          <div>
+            <label>Enrollment No. :</label>
+            <input 
+            type="text"
+            value={enrollno}
+            onChange={(e) => setEnrollNo(e.target.value)}
+            placeholder="Enter the Enrollment No:"
+            required
+            />
+        </div>
+        </div>
+        <div className="display-flex">
+          <div>
+            <label>Subject Code:</label>
+            <input 
+            type="text"
+            value={subcode}
+            onChange={(e) => setSubcode(e.target.value)}
+            placeholder="Enter the Subject Code:"
+            required
+            />
+          </div>
+          <div>
+            <label>Subject:</label>
+            <input 
+            type="text"
+            value={subname}
+            onChange={(e) => setSubname(e.target.value)}
+            placeholder="Enter the Subject:"
+            required
+            />
+          </div>
+        </div>
+        <div>
+            <label>Date:</label>
+            <input 
+            type="date"
+            value={date}
+            onChange={(e) => setDate(e.target.value)}
+            style={{colorScheme: "dark"}}
+            required
+            />
+        </div>
         <button type="submit">Login</button>
       </form>
     </div>