Personalizzazione della pagina di login

Ora che abbiamo il form di login possiamo dare un'occhiata ai file che il MakerBundle ha creato per noi. All'interno di security.yaml sono state aggiunte delle regole per abilitare il logout e per definire qual è la classe Authenticator che utilizzeremo.

Questa classe serve per verificare le credenziali immesse e per effettuare concretamente il login. La modificheremo in seguito per caricare gli utenti dal database ma, in questo momento, ci limiteremo a definire la pagina su cui effettuare il redirect quando il login va a buon fine.

Apriamo quindi il file src/Security/LoginFormAuthenticator.php alla riga 96 sostituiamo l'eccezione con un redirect alla home page a cui avevamo assegnato index come nome della rotta:

return new RedirectResponse($this->urlGenerator->generate('index'));

Possiamo ora dedicarci al controller per impostare un redirect qualora aprissimo la pagina di login da utente già autenticato. Apriamo il file app/src/Controller/SecurityController.php e decommentiamo le prime righe che verificano lo stato dell'utente.

A questo punto non ci resta che adeguare lo stile grafico della pagina di login in maniera che sia congruente con il template statico relativo.

Come prima cosa, come per la home page nelle precedenti lezioni, prendiamo il contenuto del tag body e lo incolliamo wrappando gli asset statici con la funzione asset() di Twig. Dopodiché possiamo definire le classi del body nel relativo blocco.

Ora possiamo sostituire il form creato da Symfony con lo stile e i tag del nostro, è sufficiente spostare il blocco if per mostrare eventuali errori di login, modificare i due campi di input e aggiungere il campo hidden necessario al CSFR token.

Un token CSRF è un valore univoco e segreto generato dall'applicazione lato server e trasmesso al client in modo tale da essere incluso in una successiva richiesta HTTP effettuata dal client. Quando viene effettuata la richiesta successiva l'applicazione lato server verifica che la richiesta includa il token previsto e rifiuta la richiesta se il token è mancante o non valido.

<form class="form" method="post">
    <div class="card-header text-center">
        <h1 class="display-1">KVAK</h1>
        {% if error %}
            <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
        {% endif %}
    </div>
    <div class="card-body">
        <div class="input-group no-border input-lg">
            <div class="input-group-prepend">
                                    <span class="input-group-text">
                                      <i class="now-ui-icons users_circle-08"></i>
                                    </span>
            </div>
            <input type="text" value="{{ last_username }}" name="username" id="inputUsername" class="form-control"
                   required autofocus>
        </div>
        <div class="input-group no-border input-lg">
            <div class="input-group-prepend">
                                    <span class="input-group-text">
                                      <i class="now-ui-icons text_caps-small"></i>
                                    </span>
            </div>
            <input type="password" name="password" id="inputPassword" class="form-control" required>
        </div>
    </div>
    <div class="card-footer text-center">
        <button class="btn btn-primary btn-round btn-lg btn-block" type="submit">Log In</button>
        <div class="pull-left">
            <h6>
                <a href="#pablo" class="link">Create Account</a>
            </h6>
        </div>
        <div class="pull-right">
            <h6>
                <a href="#" class="link">Need Help?</a>
            </h6>
        </div>
    </div>
    <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
</form>

Il codice della lezione è disponibile con il tag login-page all'interno del repository.