Toggle to set password visible

TODO

@@ -18,6 +18,7 @@ TODO :
 * Add / Edit a bill
 * JSON output
 * Arrow to toggle visible password
+* Change tpl easily
 
 To test :
 =========

index.php

@@ -10,6 +10,7 @@
     require_once('inc/CSRF.inc.php');
     raintpl::$tpl_dir = 'tpl/';
     raintpl::$cache_dir = 'tmp/';
+    raintpl::configure('base_url', htmlspecialchars(BASE_URL));
 
     // Define raintpl instance
     $tpl = new raintpl();
@@ -21,6 +22,9 @@
     $tpl->assign('currency', htmlspecialchars(CURRENCY));
     $tpl->assign('email_webmaster', htmlspecialchars(EMAIL_WEBMASTER));
     
+    // TODO : Avoid a bug in rainTPL with img near input
+    $tpl->configure('path_replace_list', array('a', 'img', 'link', 'script'));
+
     // Set sessions parameters
     ini_set('session.use_cookies', 1);
     ini_set('session.use_only_cookies', 1);

install.php

@@ -139,7 +139,7 @@
                 <p><label for="mysql_host">MySQL host : </label><input type="text" name="mysql_host" id="mysql_host" value="<?php echo (!empty($_POST['mysql_host'])) ? htmlspecialchars($_POST['mysql_host']) : 'localhost';?>"/></p>
 
                 <p><label for="mysql_login">MySQL login : </label><input type="text" name="mysql_login" id="mysql_login" value="<?php echo (!empty($_POST['mysql_login'])) ? htmlspecialchars($_POST['mysql_login']) : '';?>"/></p>
-                <p><label for="mysql_password">MySQL password : </label><input type="password" name="mysql_password" id="mysql_password"/> <a href="" onclick="toggle_password('mysql_password'); return false;"><img src="img/toggle_password.jpg" alt="Toggle visible"/></a></p>
+                <p><label for="mysql_password">MySQL password : </label><input type="password" name="mysql_password" id="mysql_password"/> <a href="" onclick="toggle_password('mysql_password'); return false;"><img src="tpl/img/toggleVisible.png" alt="Toggle visible"/></a></p>
                 <p>
                 <label for="mysql_db">Name of the MySQL database to use : </label><input type="text" name="mysql_db" id="mysql_db" value="<?php echo (!empty($_POST['mysql_db'])) ? htmlspecialchars($_POST['mysql_db']) : 'Bouffe@Ulm';?>"/><br/>
                     <em>Note :</em> You <em>must</em> create this database first.
@@ -165,7 +165,7 @@
                 <legend>Administrator</legend>
                 <p><label for="admin_login">Username of the admin : </label><input type="text" name="admin_login" id="admin_login" <?php echo (!empty($_POST['admin_login'])) ? 'value="'.htmlspecialchars($_POST['admin_login']).'"' : '';?>/></p>
                 <p><label for="admin_display_name">Displayed name for admin user : </label><input type="text" name="admin_display_name" id="admin_display_name" <?php echo (!empty($_POST['admin_display_name']) ? 'value="'.htmlspecialchars($_POST['admin_display_name']).'"' : '');?>/></p>
-                <p><label for="admin_password">Password for the admin : </label><input type="password" name="admin_password" id="admin_password"/> <a href="" onclick="toggle_password('admin_password'); return false;"><img src="img/toggle_password.jpg" alt="Toggle visible"/></a></p>
+                <p><label for="admin_password">Password for the admin : </label><input type="password" name="admin_password" id="admin_password"/> <a href="" onclick="toggle_password('admin_password'); return false;"><img src="tpl/img/toggleVisible.jpg" alt="Toggle visible"/></a></p>
             </fieldset>
             <p class="center"><input <?php echo (!empty($block_form)) ? 'disabled ' : '';?>type="submit" value="Install"><input type="hidden" name="token" value="<?php echo generate_token('install');?>"/></p>
         </form>

tpl/connection.html

@@ -4,7 +4,7 @@
 
 <form method="post" action="index.php?do=connect" id="connexion_form">
     <p><label for="login" class="label-block">Username : </label><input type="text" name="login" id="login" value="{$user_post}"/></p>
-    <p><label for="password" class="label-block">Password : </label><input type="password" name="password" id="password"/></p>
+    <p><label for="password" class="label-block">Password : </label><input type="password" name="password" id="password"/> <a href="" onclick="toggle_password('password'); return false;"><img src="img/toggleVisible.png" alt="Toggle visible"/></a></p>
     <p><input type="checkbox" name="remember_me" id="remember_me" value="1"/><label for="remember_me"> Remember me ?</label></p>
     <p><input type="submit" value="Connect"/><input type="hidden" name="token" value="{$token}"/></p>
     <p><a href="mailto:{$email_webmaster}?subject={$instance_title}%20password">Forgotten password ?</a></p>

tpl/css/style.css

@@ -15,6 +15,17 @@ fieldset {
     margin-bottom: 1em;
 }
 
+form a {
+    position: relative;
+}
+
+form img {
+    height: 1.5em;
+    vertical-align: middle;
+    position: absolute;
+    left: .5em;
+}
+
 table {
     margin: auto;
     text-align: center;

tpl/edit_users.html

@@ -37,7 +37,7 @@
         <label for="display_name" class="label-block">Displayed name : </label><input type="text" name="display_name" id="display_name" {if condition="$display_name_post != ''"} value="{$display_name_post}" {else} {$user_id != -1 ? 'value="'.$user_data->getDisplayName().'"' : ''} {/if}/>
     </p>
     <p>
-        <label for="password" class="label-block">Password : </label><input type="password" name="password" id="password"/>
+        <label for="password" class="label-block">Password : </label><input type="password" name="password" id="password"/>  <a href="" onclick="toggle_password('password'); return false;"><img src="img/toggleVisible.png" alt="Toggle visible"/></a>
         {if condition="$user_id != -1"}
             <br/><em>Note :</em> Leave blank this field if you don't want to edit password.
         {/if}
@@ -58,7 +58,7 @@
 <h2>Edit your password</h2>
 <form method="post" action="index.php?do=password" id="edit_password_form">
     <p><label for="password" class="label-block">New password : </label><input type="password" id="password" name="password"/></p>
-    <p><label for="password_confirm" class="label-block">Confirm new password : </label><input type="password" id="password_confirm" name="password_confirm"/></p>
+    <p><label for="password_confirm" class="label-block">Confirm new password : </label><input type="password" id="password_confirm" name="password_confirm"/> <a href="" onclick="toggle_password('password_confirm'); return false;"><img src="img/toggleVisible.png" alt="Toggle visible"/></a></p>
     <p class="center"><input type="submit" value="Update"/><input type="hidden" name="token" value="{$token}"</p>
 </form>
 {/if}

tpl/settings.html

@@ -26,7 +26,7 @@
 
         <p><label for="mysql_login">MySQL login : </label><input type="text" name="mysql_login" id="mysql_login" value="{$mysql_login}"/></p>
         <p>
-            <label for="mysql_password">MySQL password : </label><input type="password" name="mysql_password" id="mysql_password"/> <a href="" onclick="toggle_password('mysql_password'); return false;"><img src="img/toggle_password.jpg" alt="Toggle visible"/></a><br/>
+            <label for="mysql_password">MySQL password : </label><input type="password" name="mysql_password" id="mysql_password"/> <a href="" onclick="toggle_password('mysql_password'); return false;"><img src="img/toggleVisible.png" alt="Toggle visible"/></a><br/>
             <em>Note :</em> Leave the above field blank if you don't want to change your password.
         </p>
         <p>