ArtiGrid
v1.6

Login

Login with ArtiGrid

This example shows how to create a login with a custom form using ArtiGrid, PHP validation with callbacks, session handling, and frontend feedback.

1. Custom form template


$html = '
<div class="container d-flex justify-content-center align-items-center">
    <div class="col-md-8 col-lg-4">
        <div class="card shadow-lg border-0">
            <div class="card-body p-4">
                <h4 class="text-center mb-4">Login Example</h4>
                <div class="mb-3">
                    <label class="form-label">User *</label>
                    {user}
                </div>
                <div class="mb-3">
                    <label class="form-label">Password *</label>
                    {password}
                </div>
                <div class="d-grid">{action}</div>
            </div>
        </div>
    </div>
</div>';
$grid->setSelectFormTemplate($html);

The placeholders {user}, {password} y {action} They will be automatically replaced by ArtiGrid.

2. ArtiGrid login configuration


$grid->table('users')
     ->template('bootstrap5')
     ->required(false)
     ->validation_required('user')
     ->validation_required('password')
     ->formFields(['user','password']);

Define the required fields, the form, and the table that will be used to validate the login.

3. Callback to verify login


return [
    'beforeSelect' => [
        ['callback' => 'login', 'file' => 'functions.php'],
    ]
];

The function login It is executed before processing the form to validate the username and password:


function login($data){
    if (session_status() === PHP_SESSION_NONE) {
        session_start();
    }
    $db = DB::connect();
    $user = trim($data['user'] ?? '');
    $pass   = trim($data['password'] ?? '');
    if ($user === '' || $pass === '') {
        return [
            'success' => false,
            'message' => 'Empty username or password'
        ];
    }
    $q = new Queryfy($db);
    $row = $q->table('users')
            ->where('user', $user)
            ->limit(1)
            ->get();
    $row = $row[0] ?? null;
    if ($row && password_verify($pass, $row['password'])) {
        $permissions = getPermissionsByRole($row['rol']);
        $_SESSION['artigrid_auth'] = [
            'id'      => $row['id'],
            'rol'     => $row['rol'],
            'usuario' => $row['user'],
            'permissions' => $permissions
        ];
        return [
            'success' => true,
            'message' => 'Successful login',
            'redirect' => 'management.php'
        ];
    }
    return [
        'success' => false,
        'message' => 'Incorrect username or password'
    ];
}

function getPermissionsByRole($role){
    $map = [
        'admin' => ['add', 'view', 'edit', 'delete'],
        'editor' => ['view', 'edit'],
        'viewer' => ['view']
    ];
    return $map[$role] ?? [];
}

4. Frontend Management


document.addEventListener('artigrid_select_form_response', function(e){
    const { response } = e.detail;
    if (response.success && response.data?.success) {
        if (response.data?.redirect) window.location.href = response.data.redirect;
    } else {
        const msg = response.data?.message || response.message || 'Unknown error';
        Swal.fire({
            icon: 'error',
            title: 'Error',
            text: msg,
            confirmButtonText: 'Accept'
        });
    }
});

Listen for the form response. If the login is successful, redirect; if it fails, display an error message using SweetAlert2.


<?php
    if (session_status() === PHP_SESSION_NONE) {
        session_start();
    }
    if (isset($_SESSION['artigrid_auth'])) {
        header('Location: management.php');
        exit;
    }
    $grid = new ArtiGrid();
    $html = '
    <div class="container d-flex justify-content-center align-items-center">
        <div class="col-md-8 col-lg-4">
            <div class="card shadow-lg border-0">
                <div class="card-body p-4">
                    <h4 class="text-center mb-4">
                        Login Example
                    </h4>
                    <div class="mb-3">
                        <label class="form-label">User *</label>
                        {user}
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Password *</label>
                        {password}
                    </div>
                    <div class="d-grid">
                        {action}
                    </div>
                </div>
            </div>
        </div>
    </div>';
    $grid->setSelectFormTemplate($html);
    $grid->table('users')
        ->template('bootstrap5')
        ->required(false)
        ->validation_required('user')
        ->validation_required('password')
        ->formFields(['user','password']);
    echo $grid->render('select');
?>

//Create the file users.php in this path: callbacks/users.php
return [
    'beforeSelect' => [
        ['callback' => 'login', 'file' => 'functions.php'],
    ]
];

//in functions.php 
function login($data){
    if (session_status() === PHP_SESSION_NONE) {
        session_start();
    }

    $db = DB::connect();

    $user = trim($data['user'] ?? '');
    $pass   = trim($data['password'] ?? '');

    if ($user === '' || $pass === '') {
        return [
            'success' => false,
            'message' => 'Empty username or password'
        ];
    }

    $q = new Queryfy($db);
    $row = $q->table('users')
            ->where('user', $user)
            ->limit(1)
            ->get();

    $row = $row[0] ?? null;

    if ($row && password_verify($pass, $row['password'])) {
        $permissions = getPermissionsByRole($row['rol']);
        $_SESSION['artigrid_auth'] = [
            'id'      => $row['id'],
            'rol'     => $row['rol'],
            'usuario' => $row['user'],
            'permissions' => $permissions
        ];

        return [
            'success' => true,
            'message' => 'Successful login',
            'redirect' => 'management.php'
        ];
    }

    return [
        'success' => false,
        'message' => 'Incorrect username or password'
    ];
}

function getPermissionsByRole($role){
    $map = [
        'admin' => ['add', 'view', 'edit', 'delete'],
        'editor' => ['view', 'edit'],
        'viewer' => ['view']
    ];
    return $map[$role] ?? [];
}

// in front end
<script>
document.addEventListener('artigrid_select_form_response', function(e){
    const { response } = e.detail;
    console.log("Answer:", response);
    if (response.success && response.data?.success) {
        if (response.data?.redirect) {
            window.location.href = response.data.redirect;
        }
    } else {
        const msg = response.data?.message || response.message || 'Unknown error';
        Swal.fire({
            icon: 'error',
            title: 'Error',
            text: msg,
            confirmButtonText: 'Accept'
        });
    }
});
</script>

Authentication, Roles & Permissions

ArtiGrid provides a simple authentication helper through the auth() method, which allows you to access the current logged-in user stored in the session.

The auth() method returns an array with the user data, such as: id, usuario, rol and permissions.

You can use this information to display user details in your interface, for example showing the username and role in the UI.

Additionally, ArtiGrid includes a can() method to validate permissions easily. This allows you to control which actions (add, edit, delete, etc.) are available for each user based on their assigned permissions.

By combining auth() and can(), you can build role-based access control (RBAC) in a simple and flexible way.


<?php
    if (session_status() === PHP_SESSION_NONE) {
        session_start();
    }
    if (!isset($_SESSION['artigrid_auth'])) {
        header('Location: login.php');
        exit;
    }
    $grid = new ArtiGrid();
    $auth = $grid->auth();
    if ($auth) {
        echo "<div>";
        echo "<h4>Bienvenido, {$auth['usuario']}</h4>";
        echo "<p><strong>Rol:</strong> {$auth['role']}</p>";
        echo "</div>";
    }
    if (!$grid->can('add')) {
        $grid->unset('add', false);
    }
    if (!$grid->can('delete')) {
        $grid->unset('delete', false);
    }
    if (!$grid->can('edit')) {
        $grid->unset('edit', false);
    }
    if ($grid->canAny(['add', 'edit', 'delete'])) {
        echo "<div>Management panel available</div>";
    }
    if ($grid->isRole('admin')) {
        $grid->unset("refresh", false);
    }
    $grid->formFields([
        'username',
        'email',
        'password',
        'role'
    ]);
    echo $grid->table("users")->render();
?>