Skip to main content

Vistes: login/logout + dashboard

Pàgina login

Fitxer: app/Views/userdemo/login.php

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Login d'Usuari</title>
    <style>
        body { font-family: sans-serif; padding: 20px; }
        .alert { padding: 10px; margin-bottom: 15px; border-radius: 4px; }
        .alert-error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
        .alert-success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
        form { background: #f9f9f9; padding: 20px; border: 1px solid #ddd; width: 300px; }
        label { display: block; margin-top: 10px; }
        button { margin-top: 15px; cursor: pointer; }
    </style>
</head>
<body>

    <h2>Accés Privat</h2>

    <?php if (session()->getFlashdata('msg')): ?>
        <div class="alert alert-success">
            <?= session()->getFlashdata('msg') ?>
        </div>
    <?php endif; ?>

    <?php if (session()->getFlashdata('error')): ?>
        <div class="alert alert-error">
            <?= session()->getFlashdata('error') ?>
        </div>
    <?php endif; ?>

    <form action="<?= base_url('userdemo/auth') ?>" method="post">
        <?= csrf_field() ?>
        
        <label for="email">Email:</label>
        <input type="email" name="email" id="email" value="<?= old('email') ?>" required>
        
        <label for="password">Contrasenya:</label>
        <input type="password" name="password" id="password" required>
        
        <button type="submit">Entrar</button>
    </form>

</body>
</html>

Pàgina dashboard

Fitxer: app/Views/userdemo/dashboard.php

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard - Àrea Privada</title>
    <style>
        body { font-family: sans-serif; background-color: #f4f4f4; margin: 0; padding: 0; }
        
        /* Barra superior */
        .navbar {
            background-color: #333;
            color: #fff;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .navbar h3 { margin: 0; }
        .user-info { font-size: 0.9em; }
        
        /* Contingut principal */
        .container {
            max-width: 800px;
            margin: 40px auto;
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        /* Botó de logout */
        .btn-logout {
            background-color: #dc3545; /* Vermell per indicar acció de sortida */
            color: white;
            text-decoration: none;
            padding: 8px 15px;
            border-radius: 4px;
            font-size: 0.9em;
            transition: background 0.3s;
        }
        .btn-logout:hover { background-color: #c82333; }
    </style>
</head>
<body>

    <div class="navbar">
        <h3>El Meu Lloc Web</h3>
        <div class="user-info">
            Hola, <strong><?= session()->get('name') ?></strong> 
            &nbsp; | &nbsp; 
            <a href="<?= base_url('userdemo/logout') ?>" class="btn-logout">Tancar Sessió</a>
        </div>
    </div>

    <div class="container">
        <h1>Benvingut, <?= session()->get('name') ?>!</h1>
        <hr>
        
        <p>Has accedit correctament a l'àrea restringida.</p>
        
        <p>
            El teu email registrat és: 
            <code><?= session()->get('email') ?></code>
        </p>

        <div style="margin-top: 30px; padding: 15px; background-color: #e9ecef; border-left: 5px solid #007bff;">
            <strong>Nota tècnica:</strong> 
            Aquesta pàgina està protegida pel filtre <code>AuthFilter</code> (o <code>Autentica</code>). 
            Si intentes accedir directament a la URL sense sessió, seràs redirigit al login.
        </div>
    </div>

</body>
</html>

 

Back to top