feat: Add Lamp-Controlled Login & Signup Form Lock/Unlock Mechanism

[ayushk687]

🚀 Feature: Lamp-Controlled Login & Signup Access

closes #1693
This PR introduces an interactive Lamp-Controlled authentication UI feature.

✨ Overview

A lamp toggle has been added to the Login/Signup interface.
The state of the lamp determines whether the form is usable or not.

🔴 When Lamp = OFF

• Dark overlay applied to page
• All form inputs disabled
• Submit button disabled
• User cannot interact with form

🟢 When Lamp = ON

• Overlay removed
• All inputs enabled
• Form functions normally

⚠️ Note: This is a UI-level lock only. Backend authentication logic remains unchanged.

---

📂 Implementation (React Version)

Login.jsx

import React, { useState } from "react";
import "./LampAuth.css";

export default function Login() {
  const [lampOn, setLampOn] = useState(false);

  const toggleLamp = () => {
    setLampOn(!lampOn);
  };

  return (
    <div className={`auth-container ${lampOn ? "light" : "dark"}`}>
      
      {/* Lamp Toggle */}
      <div className="lamp-toggle">
        <button onClick={toggleLamp} className="lamp-btn">
          {lampOn ? "💡 Lamp ON" : "🔌 Lamp OFF"}
        </button>
      </div>

      {/* Overlay */}
      {!lampOn && <div className="overlay"></div>}

      {/* Login Form */}
      <form className="auth-form">
        <h2>Login</h2>

        <input 
          type="email" 
          placeholder="Email" 
          disabled={!lampOn} 
        />

        <input 
          type="password" 
          placeholder="Password" 
          disabled={!lampOn} 
        />

        <button 
          type="submit" 
          disabled={!lampOn}
        >
          Login
        </button>
      </form>
    </div>
  );
}

.auth-container {
  position: relative;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f4f4f4;
  transition: background 0.3s ease;
}

.auth-container.dark {
  background: #121212;
}

.auth-form {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 30px;
  background: white;
  border-radius: 8px;
  width: 300px;
}

.auth-container.dark .auth-form {
  background: #1e1e1e;
  color: white;
}

input, button {
  padding: 8px;
  font-size: 14px;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10;
}

.lamp-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 30;
}

.lamp-btn {
  padding: 8px 12px;
  border: none;
  background: #ffd700;
  border-radius: 6px;
  cursor: pointer;
}

Future Improvements

Add smooth glow animation when lamp turns ON

Store lamp state in localStorage

Improve accessibility with ARIA attributes

[vercel]

@ayushk687 is attempting to deploy a commit to the Om Roy's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Thanks for creating a PR for your Issue! ☺️

We'll review it as soon as possible.
In the meantime, please double-check the file changes and ensure that all commits are accurate.

If there are any unresolved review comments, feel free to resolve them. 🙌🏼

[github-actions]

🎉 Congrats @ayushk687 on getting your PR merged! 🙌
Thanks for the contribution — looking forward to more from you 🚀