بطاقة المصادقة
كتل تسجيل الدخول وإنشاء الحساب مبنية على أزرار تسجيل الدخول الاجتماعي. يقع المزودون أسفل نموذج البريد الإلكتروني ويُرتَّبون بثلاث طرق من نفس المصفوفة: مكدسة مع تسميات، أو مضمّنة كأيقونات مدمجة، أو موزعة عبر أعمدة متساوية. مرّر وسائط للتقسيم بعمودين مع عمل فني. يغطي وضع التحقق خطوة الرمز لمرة واحدة. النموذج غير متحكم به ويسلّمك FormData الخاص به، لذا يلتف حول أي مكتبة مصادقة تستخدمها بالفعل.
التثبيت
يمكنك إضافة كتلة بطاقة المصادقة باستخدام CLI الخاص بنا أو يدويًا:
الوضع الداكن جاهز - هذا مكوّن يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.
تنسخ CLI مصدر المكوّن (مع تبعياته الداخلية) إلى مشروعك وتثبّت أي حزم npm مطلوبة.
npx boardui@latest add auth-cardهل تستخدم حزمة واجهة مستخدم مشتركة أو أسماء استيراد مختصرة مخصصة؟ تهيئة مسارات التثبيت قبل تشغيل CLI. تستخدم أمثلة النسخ واللصق الاستيرادات الافتراضية.
التخطيطات
يضع كلا التخطيطين المزوّدين بعد نموذج البريد الإلكتروني، إذ هذا هو المسار الذي بُنيت البطاقة حوله. مكدّس يمنح كل مزوّد زراً بعرض كامل يحمل اسمه، وهو ما يناسب صفحة تسجيل دخول مخصصة حيث تتوفر مساحة لكتابتها كاملة. inline يضغطها إلى مربعات بأيقونات فقط، مدمجة بما يكفي لنافذة مشروطة أو لوحة ضيقة وقادرة على استيعاب مزيد من المزودين في المساحة ذاتها. كلاهما يقرأ نفس providers المصفوفة، لذا فإن التبديل يتم بخاصية واحدة.
{/* Stacked: full-width buttons with labels, under the form */}<AuthCard layout="stacked" providers={["google", "apple", "github"]} />
{/* Inline: icon-only squares, under the form */}<AuthCard layout="inline" providers={["google", "apple", "github", "x", "figma", "slack"]}/>
{/* Grid: icon-only buttons across equal columns */}<AuthCard layout="grid" providers={["apple", "google", "figma"]} />مقسّم مع عمل فني
تمرير media يحوّل البطاقة إلى تقسيم عمودين: النموذج على اليسار، وأي محتوى تمرره على اليمين. وهو الشكل المناسب لصفحة تسجيل مخصصة، حيث يوجد مساحة للأعمال الفنية والحقول الإضافية المرتبطة بها. أدناه md يُسقط الوسائط بدلاً من تكديسها، إذ إن وضع صورة طويلة فوق الحقول يدفع النموذج خارج شاشة الهاتف دون فائدة.
media يقبل أي عقدة، لذا تعمل صورة واحدة أو مقطع فيديو بشكل جيد. AuthMediaCarousel يُشحن جنبًا إلى جنب مع البطاقة للحالة الشائعة: مرّر له قائمة من الصور وسيتنقل بينها تلقائيًا بتأثير التلاشي المتقاطع، مع التوقف عند الأولى تحت prefers-reduced-motion. لا يوفر أسهمًا عن قصد — الأعمال الفنية بجانب نموذج تسجيل الدخول هي للأجواء، والعناصر التفاعلية تُبعد الزائر عمّا جاء من أجله.
عادةً ما تُرفق به ثلاثة خيارات: centered للعنوان، confirmPassword لإقران حقلَي كلمة المرور في صف واحد، و footnote للنص الصغير الذي يظهر أسفل البطاقة بدلاً من ازدحام زر الإجراء. يستخدم المزودون layout="grid"، يوزّع الأزرار التي تحتوي على أيقونات فقط عبر أعمدة متساوية لتُقرأ كصف واحد من عناصر التحكم.
أنشئ حسابك
أدخل بريدك الإلكتروني أدناه لإنشاء حسابك
Already have an account? تسجيل الدخول
بالنقر على متابعة، فإنك توافق على شروط الخدمة وسياسة الخصوصية الخاصة بنا.
import { AuthMediaCarousel } from "@/components/application/auth/auth-media-carousel";
<AuthCard mode="signup" layout="grid" centered confirmPassword providers={["apple", "google", "figma"]} footnote="By clicking continue, you agree to our Terms of Service and Privacy Policy." media={ <AuthMediaCarousel slides={[ { src: "/art/one.webp" }, { src: "/art/two.webp" }, { src: "/art/three.webp" }, { src: "/art/four.webp" }, ]} /> }/>
{/* Any node works — a single image, a video, a gradient */}<AuthCard media={<img src="/art/one.webp" alt="" className="size-full object-cover" />} />مع شعار
logo يضع علامة فوق العنوان، وفق centered لمحاذاته. يأخذ عقدة بدلاً من مسار صورة عن قصد: تبقى البطاقة محايدة من حيث العلامة التجارية، لذا لا تحمل النسخة المثبتة أياً من أعمال BoardUI الفنية وتستخدم أعمالك الخاصة. يمرر العرض التوضيحي شارة Pro المتحركة.
{/* logo takes a node, so it is your mark, not a src the card owns */}<AuthCard centered logo={<ProLogoMark scale={40 / 56} animated />} title="Sign in to BoardUI Pro" description="Your license unlocks every Pro component and template."/>
{/* Left-aligned when centered is off */}<AuthCard mode="signup" logo={<AppLogo className="size-10" />} />تسجيل الدخول وإنشاء الحساب
mode يستبدل النسخة والحقول. signin يحتوي على خيار تذكرني ورابط نسيت كلمة المرور؛ signup يضيف حقل اسم وسطر الشروط، ويحذف عنصري التحكم اللذين لا معنى لهما إلا عند الزيارة العائدة.
<AuthCard mode="signin" /> {/* Welcome back, remember me, forgot password */}<AuthCard mode="signup" /> {/* Adds a name field and the terms line */}رمز التحقق
mode="verify" هي الخطوة التالية بعد تسجيل الدخول أو الاشتراك: تحل مربعات OTP محل حقلي البريد الإلكتروني وكلمة المرور، ويحل إجراء إعادة الإرسال محل الرابط للوضع الآخر، وتختفي مزوّدات الخدمة كلياً، إذ إن من يرى هذه الشاشة قد اختار بالفعل طريقة تسجيل دخوله. يحتفظ بنفس الشكل المحاذي لليسار كالوضعين الآخرين، فتبدو الخطوة جزءاً من نفس التدفق، وتأخذ رمز البريد افتراضياً، وهو logo التجاوزات.
تمرير البريد الإلكتروني لتسمية العنوان في الوصف، و onComplete للتصرف فور وصول الرقم الأخير بدلًا من انتظار الزر.
<AuthCard mode="verify" email="mertcan@boardui.com" codeLength={6} onComplete={(code) => verifyCode(code)} onResend={() => resend()}/>
{/* Four boxes instead of six */}<AuthCard mode="verify" email={email} codeLength={4} />المزودون
أي من العلامات الـ 24 لزر التواصل الاجتماعي، بالترتيب الذي تحدده. تستخدم مظهر white المظهر، وهو الذي يعرض العلامة متعددة الألوان الحقيقية لكل مزوّد: تتنافس مجموعة من ألوان العلامات التجارية المشبعة مع بعضها مما يجعل أي خيار منفرد غير مقروء.
{/* Any of the 24 social button brands, in any order */}<AuthCard providers={["google", "microsoft", "okta"]} />
{/* Email only: pass an empty array and the divider disappears with it */}<AuthCard providers={[]} />ربطه
البطاقة هي الغلاف، وليست رأياً حول المصادقة. النموذج غير متحكَّم به و onSubmit يسلّمك FormData، بينما onProvider يُطلَق مع العلامة التجارية التي تم النقر عليها، لذا يتجه كلاهما مباشرةً إلى NextAuth أو Clerk أو Supabase أو نقطة النهاية الخاصة بك.
<AuthCard mode="signup" // The form is uncontrolled; you get its FormData on submit. onSubmit={(data) => { const email = data.get("email"); const password = data.get("password"); // ...hand these to your auth library }} onProvider={(provider) => signIn(provider)} switchHref="/sign-in"/>