مخفی کردن/نمایش رمز عبور در React – انجمن DEV 👩‍💻👨‍💻

هنگام ورود به سیستم یا ایجاد حساب کاربری برای یک وب سایت یا برنامه، برای کاربر مفید است که بتواند رمز عبور خود را ببیند، به خصوص زمانی که رمزهای عبور طولانی و دارای نمادهای مختلف باشد. من این قابلیت نمایش/پنهان کردن رمز عبور را در پروژه React frontend capstone خود در مدرسه Flatiron اجرا کردم. انواع مختلفی از این عملکرد مانند دکمه جابجایی یا تغییر آیکون وجود دارد. من انتخاب کردم که از نماد چشم و خط خطی برای وب سایت خود استفاده کنم.

ابتدا کتابخانه React Icons Kit را نصب کردم و کتابخانه و دو نماد را به کامپوننت React خود وارد کردم:

import {Icon} from 'react-icons-kit';
import {eyeOff} from 'react-icons-kit/feather/eyeOff';
import {eye} from 'react-icons-kit/feather/eye'

بعد، من سه حالت ایجاد کردم. اولین حالت مدیریت و در نهایت تنظیم رمز عبور یک کاربر با حالت اولیه یک رشته خالی بود. حالت دوم برای نوع بود که حالت اولیه “رمز عبور” داشت. این در فرم کنترل شده برای نمایش رمز عبور در صفحه استفاده می شود. آخرین حالت مربوط به نماد بود که حالت اولیه آن به عنوان نماد “eyeOff” تنظیم شده بود زیرا می خواهیم رمز عبور کاربر در ابتدا مخفی شود:

const [password, setPassword] = useState("");
const [type, setType] = useState('password');
const [icon, setIcon] = useState(eyeOff);

سپس یک تابع ایجاد کردم که می تواند بین رمز عبور پنهان (نماد eyeOff) و رمز عبور نمایش (نماد چشم) جابجا شود:

const handleToggle = () => {
   if (type==='password'){
      setIcon(eye);
      setType('text')
   } else {
      setIcon(eyeOff)
      setType('password')
   }
}

این تابع handleToggle می گوید: وقتی نوع برابر با “گذرواژه” است، نماد را به عنوان نماد چشم باز تنظیم کنید و رمز عبور را به صورت متن نشان دهید، و وقتی نوع هر چیز دیگری است، نماد را به عنوان نماد eyeOff تنظیم کنید و مخفی کنید. رمز عبور

اکنون که منطق ساخته شده است، می‌خواهیم رمز عبور و کلید hid/show را در صفحه نمایش دهیم. داخل بازگشت:

return (
     <div>
        <div>
           <div class="mb-4 flex">
              <input
                  type={type}
                  name="password"
                  placeholder="Password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  autoComplete="current-password"
             />
             <span class="flex justify-around items-center" onClick={handleToggle}>
                  <Icon class="absolute mr-10" icon={icon} size={25}/>
              </span>
            </div>
         </div>
      </div>
); 

من از فریم ورک Tailwind CSS برای استایل دادن به موقعیت نماد استفاده کردم تا نماد در ورودی رمز عبور قرار گیرد.

این فرم با نماد eyeOff با رمز عبور پنهان به نظر می رسد:

و این شکلی است که با نماد چشمی با رمز عبور نشان داده شده است:

و بس! من در ابتدا فکر می کردم که این عملکرد بسیار دشوار است، اما من شگفت زده شدم که اجرای این ویژگی چقدر آسان است. امیدوارم این یک آموزش مفید بوده باشد!