toggle password

Bitbox-Connect · Oct 22, 2024 · f93f987 · f93f987
1 parent a093062
commit f93f987
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 38 deletions.
diff --git a/client/src/component/Login.jsx b/client/src/component/Login.jsx
@@ -81,8 +81,9 @@ const Login = ({ mode, showAlert }) => {
   };
 
   return (
+    <div className="h-screen">
     <div
-      className="wrapper"
+      className="wrapper h-3/4 mt-10"
       style={{
         backgroundColor: mode === "dark" ? "black" : "white",
         color: mode === "dark" ? "white" : "black",
@@ -104,6 +105,7 @@ const Login = ({ mode, showAlert }) => {
             onChange={onChange}
             autoComplete="on"
             required
+            className="h-10 text-xl"
             style={{
               backgroundColor: mode === "dark" ? "black" : "white",
               color: mode === "dark" ? "white" : "black",
@@ -119,27 +121,28 @@ const Login = ({ mode, showAlert }) => {
             value={credentials.password}
             onChange={onChange}
             autoComplete="on"
-            iconRender={(visible) =>
-              visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />
-            }
+            className="h-10 text-xl"
             style={{
               backgroundColor: mode === "dark" ? "black" : "white",
               color: mode === "dark" ? "white" : "black",
             }}
             required
+            iconRender={(visible) =>
+              visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />
+            }
           />
         </div>
 
-        <Button className="submit" type="submit" disabled={loading}>
+        <Button className="submit h-10 text-xl" type="submit" disabled={loading}>
           {loading ? <Spin size="small" /> : "Login"}
         </Button>
 
-        <p className="footer" style={{
+        <p className="footer text-xl" style={{
         backgroundColor: mode === "dark" ? "black" : "white",
         color: mode === "dark" ? "white" : "black",
       }}>
           Don&apos;t have an account?
-          <Link className="link" to="/Signup">
+          <Link className="link text-xl" to="/Signup">
             {" "}
             Sign Up
           </Link>
@@ -148,7 +151,7 @@ const Login = ({ mode, showAlert }) => {
         <Button
           style={{ backgroundColor: "#6366f1", color: "#FFFFFF" }}
           onClick={() => setForgotPasswordModalVisible(true)}
-          className="mt-3"
+          className="mt-3 h-10 text-xl"
         >
           Forgot Password?
         </Button>
@@ -200,6 +203,7 @@ const Login = ({ mode, showAlert }) => {
         </div>
       </Modal>
     </div>
+    </div>
   );
 };
 

diff --git a/client/src/component/Signup.jsx b/client/src/component/Signup.jsx
@@ -1,11 +1,15 @@
-import { Eye, EyeOff } from "lucide-react";
+
 import { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { Input } from "antd";
 import PropTypes from "prop-types";
 import "./css/Signup.css";
 import { registerValidation } from "../validations/validation";
 import toast from "react-hot-toast";
+import {
+  EyeInvisibleOutlined,
+  EyeTwoTone,
+} from "@ant-design/icons";
 
 const host = "http://localhost:5000";
 
@@ -156,8 +160,7 @@ const Signup = ({ mode }) => {
                 >
                   Password
                 </label>
-                <Input
-                  type={showPassword ? "text" : "password"}
+                <Input.Password
                   className="signup-input"
                   onChange={(e) => setPassword(e.target.value)}
                   id="password"
@@ -170,19 +173,11 @@ const Signup = ({ mode }) => {
                     backgroundColor: mode === "dark" ? "#333" : "white",
                     color: mode === "dark" ? "white" : "black",
                   }}
+                  iconRender={(visible) =>
+                    visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />
+                  }
                 />
-                <button
-                  type="button"
-                  onClick={() => setShowPassword(!showPassword)}
-                  className="absolute right-3 top-1/2 transform -translate-y-1/2 text-purple-200
-                   hover:text-purple-300 transition-colors duration-200"
-                >
-                  {showPassword ? (
-                    <EyeOff className="w-5 h-5" />
-                  ) : (
-                    <Eye className="w-5 h-5" />
-                  )}
-                </button>
+
               </div>
 
               <div className="signup-form-group relative">
@@ -195,8 +190,7 @@ const Signup = ({ mode }) => {
                 >
                   Confirm Password
                 </label>
-                <Input
-                  type={showConfirmPassword ? "text" : "password"}
+                <Input.Password
                   className="signup-input"
                   onChange={(e) => setCPassword(e.target.value)}
                   id="cpassword"
@@ -209,18 +203,11 @@ const Signup = ({ mode }) => {
                     backgroundColor: mode === "dark" ? "#333" : "white",
                     color: mode === "dark" ? "white" : "black",
                   }}
+                  iconRender={(visible) =>
+                    visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />
+                  }
                 />
-                <button
-                  type="button"
-                  onClick={() => setShowConfirmPassword(!showConfirmPassword)}
-                  className="absolute right-3 top-1/2 transform -translate-y-1/2 text-purple-200 hover:text-purple-300 transition-colors duration-200"
-                >
-                  {showConfirmPassword ? (
-                    <EyeOff className="w-5 h-5" />
-                  ) : (
-                    <Eye className="w-5 h-5" />
-                  )}
-                </button>
+
                 {errors.cpassword && (
                   <div className="text-danger">{errors.cpassword}</div>
                 )}

diff --git a/client/src/component/css/Login.css b/client/src/component/css/Login.css
@@ -82,7 +82,7 @@ body {
 
 .footer {
     margin-top: 20px;
-    font-size: 0.9rem;
+    /* font-size: 0.9rem; */
 }
 
 .link {
@@ -224,7 +224,7 @@ body {
 
     .footer {
         margin-top: 15px;
-        font-size: 0.85rem;
+        /* font-size: 0.85rem; */
     }
 
     .link {