[sf 1.4.x] Personnaliser le module d'identification

[sylvain640]

Bonjour à tous

J'avance petit à petit dans la création de mon site avec le framework symfony. Tout va bien, seulement je suis passé à la section authentification de l'utilisateur (jour 13). J'ai créé mon administrateur, ma page d'identification fonctionne à merveille, seulement, j'aimerais pouvoir modifier la page d'identification!

Ma question est donc la suivante : quel est le fichier à modifier pour pouvoir personnaliser cette interface ?



Je voudrais donc modifier par exemple le "username", "password" etc... et modifier les nom des blocs pour pouvoir les personnaliser dans mon css.

Merci d'avance à tous

[Michel Rotta]

M'est avis que tu travailles avec sfGuard.

Tu as deux pistes :

• sfGuard est prévu pour l'internationalisation, tous les libellés sont prévu pour être traduit, tu peux donc faire un fichier xliff qui reprend ces libellés et effectue la traduction.
• tu veux faire plus que juste changer les libellés (en rajouter, changer l'ordre,...)
  Crée dossier : apps/<monApplication>/modules/sfGuardAuth/templates/
  et dans ce dossier un fichier : _signin_form.php
  c'est le partial qui affiche la form de login. Le code original est le suivant :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
<?php use_helper('I18N') ?>
 
<form action="<?php echo url_for('@sf_guard_signin') ?>" method="post">
  <table>
    <tbody>
      <?php echo $form ?>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="2">
          <input type="submit" value="<?php echo __('Signin', null, 'sf_guard') ?>" />
 
          <?php $routes = $sf_context->getRouting()->getRoutes() ?>
          <?php if (isset($routes['sf_guard_forgot_password'])): ?>
            <a href="<?php echo url_for('@sf_guard_forgot_password') ?>"><?php echo __('Forgot your password?', null, 'sf_guard') ?></a>
          <?php endif; ?>
 
          <?php if (isset($routes['sf_guard_register'])): ?>
            &nbsp; <a href="<?php echo url_for('@sf_guard_register') ?>"><?php echo __('Want to register?', null, 'sf_guard') ?></a>
          <?php endif; ?>
        </td>
      </tr>
    </tfoot>
  </table>
</form>

Bonne chance.

[sylvain640]

Merci pour ta réponse

J'avais bien repéré ce fichier dans le dossier des plugins, mais après avoir analysé le code, j'ai l'impression que l'affichage du formulaire (labels et champs) est fait à l'aide de la ligne <?php echo $form ?>. Donc comment modifier ceci ?

EDIT :

Faut-il modifier le fichier \<nomProjet>\plugins\sfDoctrineGuardPlugin\lib\form\doctrine\sfGuardFormSignin.class.php en y insérant les widget et les validateurs ?

[gmarsay]

Attention, on ne doit jamais modifier un plugin ou tout autres éléments appartenant au "core" du framework. On procède par surcharge des fichiers/classes déjà existants.

Pour récupérer les différents champs du formulaire rien t'empêches de faire un $form['ton_champs'] afin de placer les éléments comme tu le souhaites.

[Michel Rotta]

Toutes les informations pour "exploser" le "echo $form" sont disponible dans cette documentation (en anglais). Cependant les exemples de code et les schémas la rende abordable pour presque tous.

[sylvain640]

Merci pour vos réponses

Voici le fichier que j'ai généré à l'aide de vos conseils :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 
<form action="<?php echo url_for('@sf_guard_signin') ?>" method="post">
	<table>
			<tr><td>Identifiant ou adresse mail :</td><td><?php echo $form['username'] ?></td></tr>
			<tr><td>Mot de passe :</td><td><?php echo $form['password'] ?></td></tr>
			<tr><td>Se souvenir ?</td><td><?php echo $form['remember'] ?></td></tr>
		<?php echo $form['_csrf_token'] ?>
	</table>
	<br>
	<input type="submit" value="<?php echo __('S\'identifier', null, 'sf_guard') ?>">
 
</form>

Le formulaire s'affiche bien, je peux ajouter ou supprimer les champs, seulement quand l'identifiant et le mot de passe sont bons, j'accède au module, mais quand un des deux est mauvais, la page ne bouge pas et j'ai seulement un message dans la barre de débogage de symfony, qui m'indique "The username and/or password is invalid." Je voudrais que cela s'affiche sur ma page de connexion !

Qu'ai-je oublié ?

[Herode]

Si je ne m'abuse

Code :

echo $form['password']

appelle la méthode render() du widget 'password'.

Si ce que tu veux c'est afficher les messages d'erreur à côté des champs concernés, il faut donc travailler au niveau de chaque widget en ajoutant des appels à ses méthodes hasError() et renderError(). Idem si jamais tu as besoin d'afficher l'aide, avec renderHelp().

Exemple :

Code :

1
2
3
4
5
6
7
8
9
10
 
<div class="field_custom <?php echo ($field->hasError() ? ' errors' : '') ?>">
    <?php
	echo $field->render();
	echo $field->hasError() ? $field->renderError() : '';
    ?>
    <div class="help">
	<?php echo $field->renderHelp() ?>
    </div>
</div>

[sylvain640]

Génial, merci beaucoup ça fonctionne ! Faut que je revoie un peu la mise en forme, et c'est bueno

Par contre, j'ai mis ton code pour chaque champ, mais à chaque le "username and/or password is invalid" vient se loger entre les deux champs ^^ Comment le déplacer ? De plus, Où aller pour modifier le texte de ce message d'erreur ?

[Michel Rotta]

Pour le déplacer, il faut revoir ton schéma HTML...

Pour le traduire, les form sont prévu pour être internationalisé, le plus simple est de faire un fichier xliff de traduction.

[sylvain640]

Pour l'internationalisation, c'est prévu pour ma prochaine étape

Par contre, en ce qui concerne la mise en page de ce formulaire d'identification, j'avoue être complètement perdu...

Voici mon code :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
	<center><table>
 
	<div class="champ_id">
	   	<tr>
			<td>
				<p>Identifiant</p>
			</td>
			<td>
				<?php echo $form['username']->render() ?>
			</td>
	   		<td class="champRequis">
				<?php echo $form['username']->renderError()?>
	   		</td>
		</tr>
	</div>
 
	<div class="champ_pass">
		<tr>
			<td>
				<p>Mot de passe</p>
			</td>
			<td>
				<?php echo $form['password']->render() ?>
			</td>
	   		<td class="champRequis">
				<?php echo $form['password']->renderError()?>
	   		</td>
		</tr>
	</div>
	<tr>
      <td colspan="2">
			<center><input type="submit" value="<?php echo __('S\'identifier', null, 'sf_guard') ?>"></center>
      </td>
    </tr>

Et voici l'affichage :



Pourtant, le message "invalid password..." s'affiche systématiquement sur la ligne de l'identifiant ! Ce que je voudrais, c'est qu'il s'affiche au dessus du formulaire, mais je ne vois pas quelle instruction déplacer !!

[Michel Rotta]

Le test est global pour le mot de passe et le login, ils constituent un tout inséparable. De tête, c'est sur le validateur du nom que ce fait le test, donc le message d'erreur apparaît pour le nom. A noter que le message est le même si le nom est mal saisi.


Pour le reste du code :

Évites les div dans un tableau !

Tu mets les libellés en dur dans ton template. Hors ils sont gérés par le form et peuvent avantageusement être récupérés par un renderName() (?).

La balise P dans le tableau présente peu d'avantage.

La balise CENTER est dépréciée et ne devrait plus être utilisée.


En fait, je ne vois pas l'intérêt que tu as à redéfinir le form alors que tu en sort un équivalent. Un peu de travail sur les CSS devrait largement suffire à obtenir le rendu que tu souhaites.

Il est possible de regrouper tous les messages d'erreur en haut d'un écran, il faut faire une boucles foreach sur les widgets défini, vérifier s'ils ont une erreur (hasError) et le cas échéant afficher le message. Vu que tu n'en as que deux, tu dois pouvoir te passer de la boucle et faire les deux tests directement.

N'oublie pas d'afficher les erreurs globales éventuels. N'oublie pas d'afficher les champs cachés.

[sylvain640]

Bonjour


En fait, si je voulais le redéfinir, c'était pour pouvoir appliquer un CSS spécial. Si je garde le formulaire de base, dans quel CSS vais-je paramétrer la mise en forme ? S'agit-il du CSS admin ?

Je me rends compte que je suis vraiment perdu sur les formulaires dans symfony...

EDIT : Je pense finalement que c'est le default.css dans le dossier \web\sfDoctrinePlugin\css\default.css.

Du coup, je vais m'attaquer à la traduction avec un fichier xliff. Mais en exécutant la tâche "symfony i18n:extract backend fr --auto-save", il ne me trouve pas les "Username" , "Password" etc...

[Michel Rotta]

En fait il est possible de construire un dossier :
apps/<monApplication>/modules/sfGuardAuth/config/
dans lequel on peut mettre un fichier view.yml et y définir un paramètre stylesheet avec les css a utiliser pour ce module ou pour juste l'action.

Il est alors possible de charger une css supplémentaire uniquement pour le module auth. Les paramètres de CSS qui y seront définit venant surcharger ceux préexistant dans la default.css ou mains.csss suivant le cas.

La commande est un peu légère dans sa mise en place. Elle ne considère que les commandes i18n présentes dans les templates, pas celle dans les form. Ce qui ne les empêches pas de fonctionner.

[sylvain640]

Ce qui signifie que si je modifie le \apps\backend\i18n\fr\messages.xml généré, en ajoutant par exemple :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xliff PUBLIC "-//XLIFF//DTD XLIFF//EN" "http://www.oasis-open.org/committees/xliff/documents/xliff.dtd">
<xliff version="1.0">
  <file source-language="EN" target-language="fr" datatype="plaintext" original="messages" date="2011-02-24T09:25:41Z" product-name="messages">
    <header/>
    <body>
.
.
.
<trans-unit id="11">
   <source>Password</source>
   <target>Mot de passe</target>
</trans-unit>
..
    </body>
  </file>
</xliff>

il devrait me le traduire sur la page d'identification ? Parce que actuellement, c'est ce que j'ai fait et ça ne marche pas. J'ai de plus ajouté dans mon \apps\backend\config\view.yml

all:
.settings:
i18n: on
default_culture: fr_FR

Que manque-t-il ?

[Michel Rotta]

Supprime le dossier cache à la main. Tous le contenu (sauf le dossier lui même). Avant tout essais sur le i18n. C'est un bug connu. Possible que tu sois dedans.

[sylvain640]

J'ai beau supprimer ce dossier, rien à faire... j'ai du oublier quelque chose par là...

[Michel Rotta]

Je viens de vérifier.

Le plugin est livré avec des fichier xliff déjà existant pour le français et l'espagnol.

Je pense que tu es tombé sur un autre bug de l'i18n (ne t'inquiète pas, il n'y en a que deux)(de référencé du moins !).

Modifie le default_culture: en fr.

Ensuite suppression manuel de cache et test.

[sylvain640]

Bonjour

Bon j'ai réussi à traduire toute mon interface d'administration, mais le module d'identification reste en anglais. Je dois voir un connaisseur en symfony dans les jours qui viennent, je lui en parlerai, il aura le code sous yeux.

En tout cas, merci beaucoup pour tout

Et bonne journée !

[Michel Rotta]

Tous les fichiers de traductions passent sauf celui du login ?

J'ai vu en passant qu'il y a au moins un libellé traduit qu'il n'est pas bon, il y a peut-être plus qu'un libellé, mais tous, cela fait beaucoup.

Tiens nous au courant...

[Despecrew]

Bonjour !

Pour traduire le module d'identification je suppose qu'il faut placer un fichier settings.yml dans le dossier config du plugin sfGuardDoctrinePlugin :

Code :

1
2
3
4
all:
  .settings:
    i18n: on
    default_culture: fr

C'est ce que j'ai fait, néanmoins, moi non plus je n'arrive pas à traduire le module d'identification.