[ECRAN] Page d'inscription # Input de type password

[roddet]

Dans le formulaire d'inscription actuel : http://jcertiflab.github.io/jcertif-web-2013/#/register

Les caractères saisis dans les champs "mot de passe" et "confirmez mot de passe" ne doivent pas être lisibles.

2 alternatives techniques :

• Soit créer un nouveau composant inputPassword à l'image du inputText (https://github.com/JCERTIFLab/jcertif-web-2013/tree/master/app/directives/form/inputText)
• Soit faire évoluer le composant inputText en lui passant un champ supplémentaire le type. ça serait bien que ce nouveau champ soit optionnel dans l'utilisation du composant

[DanielleAkini]

Dans un premier temps, j'éssaye de modifier modifier ce composant pour masquer les caractères. Mais j'avoue que je ne comprend pas ces lignes de code. Plus tard, je vais examiner ces liens http://docs.angularjs.org/guide/dev_guide.unit-testing http://docs.angularjs.org/guide/scope Mais si quelqu'un peut déjà me donner un coup de main, çà me permettrait de gagner en temps, et aussi de mieux comprendre la doc après. Merci.

---

'use strict'; app.directive('jcInputText', function () { return { restrict: 'E', replace: true, templateUrl: 'directives/form/inputText/inputText.html', scope: { property: '=', label: '=', model: '='

    },
    link: function (scope, element, attributes) {

    }
};

});

---

{{label | i18n}}

---

[roddet]

Danielle, j'ai écrit quelques mots pour t'apporter des éléments de compréhension supplémentaire : https://github.com/JCERTIFLab/jcertif-web-2013/wiki

Pour ce développement, tu peux procéder comme suit :

1. Ajouter un nouveau paramètre au composant Dans le fichier https://github.com/JCERTIFLab/jcertif-web-2013/blob/master/app/directives/form/inputText/inputText.js ajouter inputType : '=' dans la propriété scope.
2. Utiliser ce nouveau paramètre dans le template Dans le fichier https://github.com/JCERTIFLab/jcertif-web-2013/blob/master/app/directives/form/inputText/inputText.html remplacer type="text" par type="{{inputType}}"
3. Modifier l'utilisation du composant Dans le fichier https://github.com/JCERTIFLab/jcertif-web-2013/blob/master/app/pages/register/register.html ajouter l'information inputType="text" ou inputType="password" suivant les cas.
4. Pour aller plus loin, mettre en place une valeur par défaut pour la nouvelle propriété Là, il y a du code à mettre dans le propriété link dans le fichier https://github.com/JCERTIFLab/jcertif-web-2013/blob/master/app/directives/form/inputText/inputText.js

Si quelque chose n'est pas clair, si tu manques d'infos ou si tu continues à bloquer, n'hésites surtout pas.

[DanielleAkini]

Bonsoir Rossi, j'ai bien lu la doc que tu as fourni, je comprend mieux l'organisation des fichiers. Mais, j'ai bien appliqué les étapes, j'ai pas l'impression que çà marche. J'ai l'impression qu'il manque un petit quelques chose. Voici les extraits de code

---

inputText.js

app.directive('jcInputText', function () {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: 'directives/form/inputText/inputText.html',
        scope: {
            property: '=',
            label: '=',
            model: '=',
           inputType : '=',
        },
        link: function (scope, element, attributes) {

        }
    };
});

---

inputText.html

<div class="control-group">
    <label class="control-label" for="{{property}}">{{label | i18n}}</label>

    <div class="controls">
        <input type="{{inputType}}" id="{{property}}" ng-model="model" />
    </div>
</div>

---

register.html

<jc-input-text inputType="text" label="'register.form.email'" property="email" model="user.email" ></jc-input-text>
            <jc-input-text inputType="text" label="'register.form.confirmEmail'" property="confirmEmail" model="user.confirmEmail"></jc-input-text>
            <jc-input-text inputType="password" label="'register.form.password'" property="password" model="user.password" type=""></jc-input-text>

[roddet]

Tu avais raison, il y avait des coquilles dans le composant inputText. C'est corrigé maintenant :) On va avancer sur d'autres tâches.

[DanielleAkini]

Bonjour, j'ai fait des modifications en local input-type="email" au lieu de input-type="text" pour les champs d'email

---

J'ai crée un composant ComboboxPays

ComboboxPays.html

<div class="control-group">
    <label class="control-label" for="{{property}}">{{label | i18n}}</label>

    <div class="controls">

        <select id="{{property}}" ng-multiple="checked">
                    <option>Canada</option>
                       <option>Congo</option>
                    <option>France</option>
                    <option>Autres</option>
         </select>

</div>
</div>

ComboboxPays.js

'use strict';

app.directive('jcComboboxPays', function () {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: 'directives/form/inputText/ComboboxPays.html',
        scope: {
            property: '@',
            label: '=',
            model: '=', 
        },
        link: function (scope, element, attributes) {

        }
    };
});

register.html

<jc-input-text input-type="email" label="'register.form.email'" property="email" model="user.email" ></jc-input-text>
.
.      
.
<jc-combobox-pays label="'register.form.country'" property="country" model="user.country"></jc-combobox-pays> 

Mais la balise jc-combobox-pays ne fonctionne pas

Et pourtant, quand j'insère directement le code suivant dans register.html, çà marche sans soucis.

 <select id="select" ng-multiple="checked">
        <option>{{'register.form.country.Cameroon' | i18n}}</option>
        <option>Canada</option>
        <option>Congo</option>
        <option>France</option>
        <option>Autres</option>
</select>

Quelqu'un voit pourquoi çà ne marche pas. En attendant de savoir pourquoi çà ne marche pas, je vais entamer une autre tache.

[roddet]

As-tu importer le nouveau fichier Javascript dans app/index.html ?

Par exemple : <script src="directives/form/ComboboxPays/ComboboxPays.js"></script> à insérer après <script src="app.js"></script>

[DanielleAkini]

Je viens d'importer le fichier javascript comme indiqué précédemment, mais çà ne donne rien.