* [MOD] New Material Design using Google MDL (work in progress).

inc/themes/classic/index.php

@@ -24,7 +24,7 @@
  */
 
 $themeInfo = array(
-    'name' => 'Default',
+    'name' => 'Classic',
     'creator' => 'nuxsmin',
     'version' => '1.0',
     'targetversion' => '1.2.0'

inc/themes/material-blue/backup.inc

@@ -34,7 +34,7 @@
         </tr>
     </table>
 
-    <form method="post" name="frmBackup" id="frmBackup">
+    <form method="post" name="frmBackup" id="frmBackup" onsubmit="configMgmt('backup');return false;">
         <input type="hidden" name="activeTab" value="<?php echo $backup_tabIndex; ?>"/>
         <input type="hidden" name="isAjax" value="1"/>
         <input type="hidden" name="actionId" value="<?php echo \SP\Controller\ActionsInterface::ACTION_CFG_BACKUP; ?>"/>
@@ -42,7 +42,7 @@
     </form>
 
     <div class="action">
-        <button id="help_backup_button"
+        <button id="help_backup_button" type="button"
                 class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored"
                 title="<?php echo _('Ayuda'); ?>">
             <i class="material-icons">help_outline</i>
@@ -54,7 +54,7 @@
             <p class="help-text"><?php echo _('Con este método es posible guardar todos los datos de sysPass en otro lugar o utilizarlos para hacer la aplicación portable.'); ?></p>
         </div>
 
-        <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored"
+        <button form="frmBackup" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored bg-green80"
                 OnClick="configMgmt('backup');" title="<?php echo _('Realizar'); ?>">
             <i class="material-icons">play_circle_filled</i>
         </button>
@@ -64,7 +64,7 @@
         <?php echo _('Exportar Cuentas'); ?>
     </div>
 
-    <form method="post" name="frmExport" id="frmExport">
+    <form method="post" name="frmExport" id="frmExport" onsubmit="configMgmt('export'); return false;" >
         <table class="data round">
             <tr>
                 <td class="descField">
@@ -95,13 +95,11 @@
                 </td>
                 <td class="valField">
                     <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-                        <input id="exportPwd" name="exportPwd" type="password" class="mdl-textfield__input fg-blue100"
+                        <input id="exportPwd" name="exportPwd" type="password" class="mdl-textfield__input passwordfield__input fg-blue100"
                                maxlength="255"/>
                         <label class="mdl-textfield__label"
                                for="exportPwd"><?php echo _('Clave de Exportación'); ?></label>
                     </div>
-                    <i class="showpass material-icons" title="<?php echo _('Mostrar Clave'); ?>">remove_red_eye</i>
-                    <i id="passGen" class="material-icons" title="<?php echo _('Generar clave aleatoria'); ?>">settings</i>
                 </td>
             </tr>
             <tr>
@@ -126,7 +124,7 @@
     </form>
 
     <div class="action">
-        <button id="help_export_button"
+        <button id="help_export_button" type="button"
                 class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored"
                 title="<?php echo _('Ayuda'); ?>">
             <i class="material-icons">help_outline</i>
@@ -142,8 +140,8 @@
             <p class="help-text"><?php echo _('Es posible establecer una clave de exportación para guardar todos los datos encriptados en el archivo XML.'); ?></p>
         </div>
 
-        <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored"
-                OnClick="configMgmt('export');" title="<?php echo _('Realizar'); ?>">
+        <button form="frmExport" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored bg-green80"
+                title="<?php echo _('Realizar'); ?>">
             <i class="material-icons">play_circle_filled</i>
         </button>
 

inc/themes/material-blue/config.inc

@@ -4,7 +4,7 @@
         <?php echo _('Sitio'); ?>
     </div>
 
-    <form method="post" name="frmConfig" id="frmConfig">
+    <form method="post" name="frmConfig" id="frmConfig" onsubmit="configMgmt('saveconfig'); return false;">
 
         <table id="tblSite" class="data tblConfig round">
 
@@ -451,12 +451,10 @@
                     <td class="valField">
                         <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                             <input id="ldap_bindpass" name="ldap_bindpass" type="password"
-                                   class="mdl-textfield__input fg-blue100"
+                                   class="mdl-textfield__input passwordfield__input fg-blue100"
                                    maxlength="128" value="<?php echo $ldapBindPass; ?>" <?php echo $isDisabled; ?>/>
                             <label class="mdl-textfield__label" for="ldap_bindpass"><?php echo _('Clave'); ?></label>
                         </div>
-                        <i class="showpass material-icons" title="<?php echo _('Mostrar Clave'); ?>">remove_red_eye</i>
-                        <i id="passGen" class="material-icons" title="<?php echo _('Generar clave aleatoria'); ?>">settings</i>
                     </td>
                 </tr>
                 <tr>
@@ -670,13 +668,10 @@
                 </td>
                 <td class="valField">
                     <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-                        <input id="mail_pass" name="mail_pass" type="password" class="mdl-textfield__input fg-blue100"
+                        <input id="mail_pass" name="mail_pass" type="password" class="mdl-textfield__input fg-blue100 passwordfield__input"
                                maxlength="128" value="<?php echo $mailPass; ?>" <?php echo $isDisabled; ?>/>
                         <label class="mdl-textfield__label" for="mail_pass"><?php echo _('Clave'); ?></label>
                     </div>
-                    <i class="showpass material-icons" title="<?php echo _('Mostrar Clave'); ?>">remove_red_eye</i>
-                    <i id="passGen" class="material-icons"
-                       title="<?php echo _('Generar clave aleatoria'); ?>">settings</i>
                 </td>
             </tr>
             <tr>
@@ -740,8 +735,8 @@
     </form>
 
     <div class="action">
-        <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored"
-                OnClick="configMgmt('saveconfig');" title="<?php echo _('Guardar'); ?>">
+        <button form="frmConfig" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored bg-green80"
+                title="<?php echo _('Guardar'); ?>">
             <i class="material-icons">save</i>
         </button>
     </div>

inc/themes/material-blue/css/css.php

@@ -25,7 +25,7 @@
 
 $cssFilesTheme = array(
 //    array('href' => 'https://fonts.googleapis.com/icon?family=Material+Icons', 'min' => false),
-    array('href' => 'http://fonts.googleapis.com/css?family=Roboto:300,400,500,700', 'min' => false),
+    array('href' => 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700', 'min' => false),
     array('href' => \SP\Init::$THEMEPATH . '/css/fonts.css', 'min' => true),
     array('href' => \SP\Init::$THEMEPATH . '/css/material.min.css', 'min' => false),
     array('href' => \SP\Init::$THEMEPATH . '/css/material-custom.css', 'min' => true),

inc/themes/material-blue/css/material-custom.css

@@ -27,6 +27,7 @@
 .material-icons.md-24 { font-size: 24px; }
 .material-icons.md-36 { font-size: 36px; }
 .material-icons.md-48 { font-size: 48px; }
+.material-icons.md-60 { font-size: 60px; }
 
 .material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
 .material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

inc/themes/material-blue/css/styles.css

@@ -424,11 +424,9 @@ a:hover, a:active, a:focus {
 }
 
 #content .data #dropzone {
-    width: 350px;
-    padding: 5px;
-    height: 50px;
-    margin-top: 10px;
-    border: 2px dashed #d9d9d9;
+    width: 30em;
+    padding: 1em;
+    border: 2px dashed rgb(0, 150, 136);
     text-align: center;
 }
 

inc/themes/material-blue/encryption.inc

@@ -8,7 +8,7 @@ echo $encryption_tabIndex; ?>">
         <?php echo _('Clave Maestra'); ?>
     </div>
 
-    <form method="post" name="frmCrypt" id="frmCrypt">
+    <form method="post" name="frmCrypt" id="frmCrypt" onsubmit="configMgmt('savempwd'); return false;">
         <table class="data tblConfig round">
             <?php if ($lastUpdateMPass > 0): ?>
                 <tr>
@@ -110,7 +110,8 @@ echo $encryption_tabIndex; ?>">
         <input type="hidden" name="sk" value="<?php echo $sk; ?>">
     </form>
     <div class="action">
-        <button id="help_mpass_button" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored" OnClick="configMgmt('savempwd');" title="<?php echo _('Ayuda'); ?>">
+        <button id="help_mpass_button" type="button" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored"
+                title="<?php echo _('Ayuda'); ?>">
             <i class="material-icons">help_outline</i>
         </button>
 
@@ -120,7 +121,8 @@ echo $encryption_tabIndex; ?>">
             <p class="help-text"><?php echo _('Es recomendable cambiarla cada cierto tiempo y utilizar una clave compleja que incluya números, letras y símbolos.'); ?></p>
         </div>
 
-        <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored" OnClick="configMgmt('savempwd');" title="<?php echo _('Realizar'); ?>">
+        <button form="frmCrypt" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored bg-green80"
+                title="<?php echo _('Realizar'); ?>">
             <i class="material-icons">play_circle_filled</i>
         </button>
     </div>
@@ -129,7 +131,7 @@ echo $encryption_tabIndex; ?>">
         <?php echo _('Clave Temporal'); ?>
     </div>
 
-    <form method="post" name="frmTempMasterPass" id="frmTempMasterPass">
+    <form method="post" name="frmTempMasterPass" id="frmTempMasterPass" onsubmit="configMgmt('gentmpass'); return false;">
         <table class="data tblConfig round">
             <tr>
                 <td class="descField">
@@ -181,7 +183,8 @@ echo $encryption_tabIndex; ?>">
             <p class="help-text"><?php echo _('La clave temporal es utilizada como clave maestra para los usuarios que necesitan introducirla al iniciar la sesión, así no es necesario facilitar la clave maestra original.'); ?></p>
         </div>
 
-        <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored" OnClick="configMgmt('gentmpass');" title="<?php echo _('Generar'); ?>">
+        <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored bg-green80"
+                title="<?php echo _('Generar'); ?>">
             <i class="material-icons">play_circle_filled</i>
         </button>
     </div>

inc/themes/material-blue/header.inc

@@ -4,7 +4,7 @@
         <title><?php echo $appInfo['appname'],' :: ',$appInfo['appdesc']; ?></title>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="icon" TYPE="image/png" href="<?php echo $logo; ?>">
+        <link rel="icon" type="image/png" href="<?php echo $logo; ?>">
         <link rel="stylesheet" href="<?php echo $cssLink;?>" />
         <script type="text/javascript" src="<?php echo $jsLink?>"></script>
     </head>

inc/themes/material-blue/import.inc

@@ -90,7 +90,7 @@ echo $import_tabIndex; ?>">
                 </form>
                 <div id="dropzone" class="round"
                      title="<?php echo _('Soltar archivo aquí o click para seleccionar'); ?>">
-                    <img src="imgs/upload.png" alt="upload" class="opacity50"/>
+                    <i class="material-icons md-60 fg-green80">cloud_upload</i>
                 </div>
             </td>
         </tr>
@@ -123,7 +123,7 @@ echo $import_tabIndex; ?>">
         <?php echo _('Importar phpPMS'); ?>
     </div>
 
-    <form method="post" name="frmMigrate" id="frmMigrate">
+    <form method="post" name="frmMigrate" id="frmMigrate" onsubmit="configMgmt('migrate'); return false;">
         <table class="data round">
             <tr>
                 <td class="descField">
@@ -216,8 +216,8 @@ echo $import_tabIndex; ?>">
     </form>
 
     <div class="action">
-        <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored"
-                OnClick="configMgmt('migrate');" title="<?php echo _('Realizar'); ?>">
+        <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored bg-green80" form="frmMigrate"
+                title="<?php echo _('Realizar'); ?>">
             <i class="material-icons">play_circle_filled</i>
         </button>
     </div>

inc/themes/material-blue/js-common.inc

@@ -17,15 +17,6 @@
             no_results_text: "<?php echo _('Sin resultados'); ?>"
         });
 
-        $(".showpass").each(function (index, input) {
-            // Cross-browser compatibility
-            $(this).on("mouseover", function () {
-                var pass = $(this).prev().find('[type="password"]').val();
-
-                $(this).attr('title', pass);
-            });
-        });
-
         $( ".download" ).button({
             icons: { primary: "	ui-icon-arrowthickstop-1-s"}
         });
@@ -52,9 +43,29 @@
 
         $(".help-box").dialog({autoOpen: false, title: '<?php echo _('Ayuda'); ?>', width: screen.width / 2.5  });
 
-        $('#passGen').click(function () {
-            password(11, true, true);
-        });
+        $('.passwordfield__input').parent().each(function(){
+            var target = $(this).find('.passwordfield__input').parent();
+            var targetId = $(this).find('.passwordfield__input').attr('id');
+
+            $(this)
+                .after('<i id="passGen" data-targetid="' + targetId + '" class="material-icons" title="<?php echo _('Generar clave aleatoria'); ?>" onclick="password(11, true, true, \'' + targetId + '\')">settings</i>')
+                .after('<i class="showpass material-icons" title="<?php echo _('Mostrar Clave'); ?>">remove_red_eye</i>');
+
+            $('#passGen').each(function(){
+                $(this).click(function () {
+                    password(11, true, true, "targetId");
+                });
+            });
+
+            $(".showpass").each(function (index, input) {
+                // Cross-browser compatibility
+                $(this).on("mouseover", function () {
+                    var pass = $('#' + targetId).val();
+
+                    $(this).attr('title', pass);
+                });
+            });
+        })
 
         // Stick the #nav to the top of the window
         var nav = $('#actionsBar');

inc/themes/material-blue/js/functions.js

@@ -997,9 +997,15 @@ function password(length, special, fancy, dstId) {
     }
 
     if (dstId) {
+        var dstParent = $('#' + dstId).parent();
+
         checkPassLevel(genPassword);
-        $('#' + dstId + ' input:password').val(genPassword);
-        $('#' + dstId + ' #passLevel').show(500);
+
+        // Poner la clave en el input de la
+        dstParent.find('input:password').val(genPassword);
+        // Poner la clave en el input de repetición
+        $('#' + dstId + 'R').val(genPassword);
+        dstParent.find('#passLevel').show(500);
     } else {
         checkPassLevel(genPassword);
         $('input:password, input.password').val(genPassword);

inc/themes/material-blue/login.inc

@@ -3,7 +3,7 @@
         <img id="imgLogo" src="<?php echo $logoMedium; ?>"/>
     </div>
     <div id="boxData">
-        <form method="post" name="frmLogin" id="frmLogin" action="" OnSubmit="return doLogin();">
+        <form method="post" name="frmLogin" id="frmLogin" action="" OnSubmit="doLogin(); return false;">
             <?php use SP\Html;
 
             if ($demoEnabled): ?>
@@ -104,11 +104,6 @@
 
 <script>
     $(function(){
-        $("#pass, #mpass").keyup(function(event){
-            if(event.keyCode == 13){
-                $('#frmLogin').submit();
-            }
-        });
         $('#imgLogo').click(function(){$('#smpass').show();});
     })
 </script>

js/js.php

@@ -35,7 +35,7 @@ $jsFilesBase = array(
     array('href' => 'js/jquery.placeholder.js', 'min' => true),
     array('href' => 'js/jquery-ui.min.js', 'min' => false),
     array('href' => 'js/jquery.fancybox.pack.js', 'min' => false),
-//    array('href' => 'js/jquery.powertip.min.js', 'min' => false),
+    array('href' => 'js/jquery.powertip.min.js', 'min' => false),
     array('href' => 'js/chosen.jquery.min.js', 'min' => false),
     array('href' => 'js/alertify.js', 'min' => true),
     array('href' => 'js/jquery.fileDownload.js', 'min' => true),
@@ -63,7 +63,7 @@ $arrJsLang = array(
     _('Eliminar archivo?'),
     _('Su navegador no soporta subir archivos con HTML5'),
     _('Demasiados archivos'),
-    _('No es posible guardar el archivo.<br>Tamaño máximo:'),
+    sprintf(_('No es posible guardar el archivo.%sTamaño máximo:'), '<br>'),
     _('Extensión no permitida'),
     _('Vaciar el registro de eventos?')
 );
@@ -80,4 +80,4 @@ if (file_exists($themeJsPath)){
     }
 }
 
-SP\Util::getMinified('js', $jsFilesBase, false);
+SP\Util::getMinified('js', $jsFilesBase, true);