نمایش راز (SecretDisplay)

ردیف فقط‌خواندنی کلید API/توکن — مقدار ماسک‌شده با نمایش زمان‌دار و دکمهٔ کپی

معرفی

SecretDisplay یک ردیف فقط‌خواندنی برای راز/کلید API است: یک مقدار ماسک‌شده و monospace با یک دکمهٔ «نمایش» زمان‌دار و یک دکمهٔ کپی. برگرفته از ترکیب واقعی ApiKeyPill/SecretRow در Supabase Studio. مقدار تا وقتی کاربر آن را «نمایش» ندهد ماسک می‌ماند و پس از revealDuration دوباره خودکار پنهان می‌شود. کپی از CopyButton استفاده می‌کند. هر دو اقدام را می‌توان پشت یک بررسی مجوز با canReveal قفل کرد.

این کامپوننت مکمل فقط‌خواندنیِ PasswordInput است — از SecretDisplay برای نمایش یک راز موجود و از PasswordInput برای وارد کردن یک راز جدید استفاده کنید.

چه زمانی استفاده کنیم:

برای نمایش یک کلید API، توکن یا secret موجود که کاربر باید ببیند/کپی کند اما نه ویرایش
وقتی می‌خواهید مقدار حساس به‌صورت پیش‌فرض ماسک باشد و فقط عمدی و موقت نمایش داده شود
برای صفحات تنظیمات/اعتبارنامه‌ها که دسترسی به راز باید بر اساس مجوز کنترل شود

چه زمانی استفاده نکنیم:

برای وارد کردن رمز عبور یا راز — از PasswordInput/Input استفاده کنید
برای متن معمولی و غیرحساس قابل کپی — از CopyButton کنار متن استفاده کنید
برای نمایش یک بلوک بزرگ چندخطی راز (مثل کلید خصوصی PEM) — از یک بلوک کد با کپی استفاده کنید

pk_live_••••••••••••••••

sk_test_••••••••••••••••

استفاده

import { SecretDisplay } from '@partodata/ui'

export default function ApiKeyRow() {
  return <SecretDisplay value="pk_live_9f8a7b6c5d4e3f2a1b0c" visiblePrefix={8} />
}

visiblePrefix تعداد کاراکترهای ابتدایی است که همیشه در وضوح دیده می‌شوند (مثلاً پیشوند کلید pk_live_) و بقیه ماسک می‌شود.

حالت‌ها و انواع

قفل مجوز با `canReveal`

وقتی canReveal={false} باشد، نمایش و کپی غیرفعال می‌شوند و یک tooltip توضیح می‌دهد که دسترسی بیشتری لازم است.

<SecretDisplay value="sk_test_1a2b3c4d5e6f7a8b9c0d" visiblePrefix={8} canReveal={false} />

تنظیم مدت نمایش

مقدار پس از revealDuration میلی‌ثانیه دوباره پنهان می‌شود؛ با 0 این پنهان‌سازی خودکار غیرفعال می‌شود.

<SecretDisplay value="pk_live_9f8a7b6c5d4e" revealDuration={30000} />
<SecretDisplay value="pk_live_9f8a7b6c5d4e" revealDuration={0} />

فقط کپی یا فقط نمایش

<SecretDisplay value="pk_live_9f8a7b6c5d4e" hideReveal />
<SecretDisplay value="pk_live_9f8a7b6c5d4e" hideCopy />

اندازه‌ها و زبان

<SecretDisplay value="pk_live_9f8a7b6c5d4e" size="xs" />
<SecretDisplay value="pk_live_9f8a7b6c5d4e" size="md" locale="en" />

راهنمای استفاده

بکنید

راز را به‌صورت پیش‌فرض ماسک نگه دارید و فقط با اقدام عمدی کاربر نمایش دهید - دسترسی به نمایش/کپی را با canReveal بر اساس نقش/مجوز کاربر کنترل کنید - visiblePrefix را برای پیشوند شناسه‌ای کلید (مثل pk_live_) تنظیم کنید تا کاربر کلید را تشخیص دهد

نکنید

راز را در حالت وضوح دائمی رها نکنید؛ پنهان‌سازی خودکار (revealDuration) را حفظ کنید مگر دلیل روشنی باشد - از SecretDisplay برای ورودی رمز استفاده نکنید — آن PasswordInput است - کل مقدار راز را در visiblePrefix نمایش ندهید؛ هدف، پنهان‌ماندن بخش حساس است

جدول ویژگی‌ها

SecretDisplay

Prop

Type

دسترسی‌پذیری

دکمهٔ نمایش aria-pressed (وضعیت نمایش) و aria-label توصیفی (نمایش/پنهان‌کردن مقدار) دارد
وقتی canReveal={false} است، دکمه‌ها disabled می‌شوند و tooltip دلیل («دسترسی بیشتری لازم است») را اعلام می‌کند
مقدار در حالت وضوح select-all است تا انتخاب و کپی دستی هم ممکن باشد؛ کپی از CopyButton استفاده می‌کند که وضعیت کپی‌شدن را اعلام می‌کند

کامپوننت‌های مرتبط

CopyButton — اگر فقط می‌خواهید یک متن غیرحساس را قابل کپی کنید، از CopyButton استفاده کنید
Input — برای وارد کردن یک راز یا رمز (مکمل ویرایش‌پذیر)، از Input/PasswordInput استفاده کنید
Tooltip — پیام مجوز و برچسب نمایش/پنهان از Tooltip استفاده می‌کنند