[#46] Emial Verification

https://project.mdnd-it.cc/work_packages/46
2025-05-16 20:12:31 +00:00
parent f089d314ca
commit 94702a33aa
1 changed files with 85 additions and 0 deletions
@@ -0,0 +1,85 @@
 import { useState, useRef } from "react";
 import Background from "../../assets/backgrounds/Background";
 import { motion } from "framer-motion";
 import Button from "../../components/Buttons/Button";
 export default function EmailVerification() {
  const [code, setCode] = useState(Array(6).fill(""));
  const inputRefs = useRef([]);
  const handleChange = (e, index) => {
    const { value } = e.target;
    if (/^\d*$/.test(value) && value.length <= 1) {
      const newCode = [...code];
      newCode[index] = value;
      setCode(newCode);
      if (value && index < 5) {
        inputRefs.current[index + 1].focus();
      }
    }
  };
  const handleKeyDown = (e, index) => {
    if (e.key === "Backspace" && !code[index] && index > 0) {
      inputRefs.current[index - 1].focus();
    } else if (e.key === "ArrowLeft" && index > 0) {
      inputRefs.current[index - 1].focus();
    } else if (e.key === "ArrowRight" && index < 5) {
      inputRefs.current[index + 1].focus();
    } else if (/^\d$/.test(e.key) && code[index]) {
      e.preventDefault();
      const newCode = [...code];
      newCode[index] = e.key;
      setCode(newCode);
      if (index < 5) {
        setTimeout(() => {
          inputRefs.current[index + 1].focus();
        }, 0);
      }
    }
  };
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Code submitted:", code.join(""));
    // Logika a megerősítő kód ellenőrzésére
  };
  return (
    <div className="relative flex items-center justify-center min-h-screen bg-gray-100 p-0 font-poppins">
      <Background />
      <motion.div
        initial={{ height: "auto" }}
        animate={{ height: "300px" }}
        transition={{ duration: 0.5, ease: "easeInOut" }}
        className="absolute flex max-w-2xl w-full bg-white rounded-2xl shadow-lg overflow-hidden items-center justify-center"
      >
        <div className="w-full p-10 relative">
          <h2 className="text-4xl font-extrabold text-center mb-6 text-gray-800 tracking-wide">
            Email megerősítés
          </h2>
          <form onSubmit={handleSubmit}>
            <div className="mb-6 flex justify-center space-x-2">
              {code.map((digit, index) => (
                <input
                  key={index}
                  type="text"
                  value={digit}
                  onChange={(e) => handleChange(e, index)}
                  onKeyDown={(e) => handleKeyDown(e, index)}
                  ref={(el) => (inputRefs.current[index] = el)}
                  className={`w-12 h-12 px-2 py-3 border rounded-lg focus:ring-4 focus:ring-indigo-400 text-gray-700 placeholder-gray-400 bg-gray-50 text-center text-2xl tracking-widest ${!digit ? 'placeholder-opacity-100' : 'placeholder-opacity-0'}`}
                  // placeholder="_"
                  maxLength="1"
                />
              ))}
            </div>
            <Button text="Megerősít" type="submit" />
          </form>
        </div>
      </motion.div>
    </div>
  );
 }