Skip to content

Auth / Login

Formulários de autenticação — login e cadastro em abas.


vue
<script setup lang="ts">
import { ref } from 'vue'
import { Tabs, Input, Button, Checkbox } from '@halfbyte-labs/maka'

const email           = ref('')
const password        = ref('')
const name            = ref('')
const confirmPassword = ref('')
const agreed          = ref(false)

const tabs = [
  { value: 'login',  label: 'Entrar' },
  { value: 'signup', label: 'Criar conta' },
]
</script>

<template>
  <div class="auth-wrapper">
    <Tabs :tabs="tabs">
      <template #login>
        <Input v-model="email"    label="E-mail" placeholder="seu@email.com" />
        <Input v-model="password" label="Senha"  placeholder="••••••••" />
        <Button variant="primary">Entrar →</Button>
      </template>

      <template #signup>
        <Input v-model="name"            label="Nome completo" />
        <Input v-model="email"           label="E-mail" />
        <Input v-model="password"        label="Senha" />
        <Input v-model="confirmPassword" label="Confirmar senha" />
        <Checkbox v-model="agreed" label="Concordo com os Termos de Uso" />
        <Button variant="primary">Criar conta grátis →</Button>
      </template>
    </Tabs>
  </div>
</template>