Auth Card

新粗野主义风格的认证卡片，包含社交登录按钮、邮箱/密码表单和忘记密码链接。

预览

Welcome back

Sign in to your account to continue

or email login

安装

npx brutx@latest add --block auth-card

用法

<script setup>
import AuthCard from '@/components/ui/AuthCard.vue'

function handleLogin() {
    console.log('Login submitted')
}

function handleForgotPassword() {
    console.log('Forgot password clicked')
}

function handleGoogle() {
    console.log('Google auth clicked')
}

function handleGithub() {
    console.log('GitHub auth clicked')
}
</script>

<template>
    <AuthCard
        title="Welcome back"
        description="Sign in to your account to continue"
        @login-submit="handleLogin"
        @forgot-password="handleForgotPassword"
        @google-click="handleGoogle"
        @github-click="handleGithub"
    />
</template>

Props

属性	类型	默认值
title	string	'Welcome back'
description	string	'Sign in to your account to continue'
class	string	—

事件

事件	载荷
loginSubmit	[]
forgotPassword	[]
googleClick	[]
githubClick	[]

布局

AuthCard 包含：

• 头部：标题和描述
• 社交按钮：Google 和 GitHub，2 列网格布局
• 分隔线："or email login" 分隔符
• 邮箱表单：带图标的邮箱输入框、带图标的密码输入框、忘记密码链接
• 提交按钮：primary 变体，全宽
• 底部：注册链接