Components / Verification code

Verification code

# Introduction
# Usage
# Length
# Size
# Center
# Livewire model
# Event name
# Error handling

# Introduction

The verification code component is display a set of input fields that are used to enter a verification code.
Such components are commonly used in applications that require two-factor authentication or email verification.

# Usage

To display a verification code component, simply use the zinq:verification-code tag. The length attribute is used to specify the number of input fields that will be displayed. The value attribute is used to bind the value of the verification code to a variable in your component.

<zinq:verification-code />

# Length

The length attribute is used to specify the number of input fields that will be displayed. The default value is 6 .

<zinq:verification-code length="4" />

# Size

You can make the input fields larger by using the lg attribute.

<zinq:verification-code lg />

# Center

By default, the input fields are aligned to the left. You can center them by using the center attribute.

<zinq:verification-code center />

# Livewire model

As verification code component may contain multiple input fields, Zinq's JavaScripts dispatches an event named token-entered when the value of an input field changes.
You can listen to this event and process the value of the verification code.

#[On('token-entered')]
public function verify(string $token): void
{
    Zinq::toastSuccess("Your PIN is $token");
}

public function render(): string
{
    return <<<HTML
        <zinq:verification-code length="4" />
    HTML;
}

# Event name

The default event name is token-entered . You can change this by using the event attribute.

<zinq:verification-code event="custom-event" />

# Error handling

To display an error message when the verification code is invalid, simply use addError method available within Livewire component.
By default the verification code component uses code as the attribute name. You can change this by using the attribute attribute.

#[On('token-entered')]
public function verify(string $token): void
{
    if ($token == '1111') {
        Zinq::toastSuccess('Your PIN is 1111');
        return;
    }

    Zinq::toast('Try with 1111');
    $this->addError('code', 'Invalid code');
}

public function render(): string
{
    return <<<HTML
        <zinq:verification-code length="4" />
    HTML;
}