Mirrors/sysPass
2
0
Fork 0
mirror of https://github.com/nuxsmin/sysPass.git synced 2026-03-07 00:46:59 +01:00
Code Issues Packages Projects Releases Wiki Activity

* [MOD] UI tweaks on login and password reset views

Browse Source
This commit is contained in:
nuxsmin
2018-03-28 12:36:46 +02:00
parent 4b45e206c9
commit d7c8daf0ff
14 changed files with 400 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/modules/web/Controllers/LoginController.php
View File

@@ -128,8 +128,8 @@ class LoginController extends ControllerBase
->send(true);
}
$layoutHelper = $this->dic->get(LayoutHelper::class);
$layoutHelper->getCustomLayout('index', 'login');
$this->dic->get(LayoutHelper::class)
->getCustomLayout('index', 'login');
$this->view->assign('mailEnabled', $this->configData->isMailEnabled());
// $this->view->assign('updated', SessionFactory::getAppUpdated());

16
app/modules/web/Controllers/UserPassResetController.php
View File

@@ -61,14 +61,14 @@ class UserPassResetController extends ControllerBase
*
* @throws \Psr\Container\ContainerExceptionInterface
* @throws \Psr\Container\NotFoundExceptionInterface
* @throws \SP\Core\Dic\ContainerException
*/
public function indexAction()
{
$this->dic->get(LayoutHelper::class)->getPublicLayout('request', 'passreset');
$this->dic->get(LayoutHelper::class)
->getCustomLayout('request', 'passreset');
if (!$this->configData->isMailEnabled()) {
ErrorUtil::showErrorInView($this->view, self::ERR_UNAVAILABLE);
ErrorUtil::showErrorInView($this->view, self::ERR_UNAVAILABLE, 'request');
}
$this->view();
@@ -140,16 +140,16 @@ class UserPassResetController extends ControllerBase
/**
* @param null $hash
* @throws \SP\Core\Dic\ContainerException
*/
public function resetAction($hash = null)
{
$this->dic->get(LayoutHelper::class)->getPublicLayout('reset', 'passreset');
$this->dic->get(LayoutHelper::class)
->getCustomLayout('reset', 'passreset');
if ($hash && $this->configData->isMailEnabled()) {
$this->view->assign('hash', $hash);
} else {
ErrorUtil::showErrorInView($this->view, self::ERR_UNAVAILABLE);
ErrorUtil::showErrorInView($this->view, self::ERR_UNAVAILABLE, 'reset');
}
$this->view();
@@ -163,8 +163,8 @@ class UserPassResetController extends ControllerBase
try {
$this->checkTracking();
$pass = Request::analyzeEncrypted('pass');
$passR = Request::analyzeEncrypted('passR');
$pass = Request::analyzeEncrypted('password');
$passR = Request::analyzeEncrypted('password_repeat');
if (!$pass || !$passR) {
throw new ValidationException(__u('La clave no puede estar en blanco'));

1
app/modules/web/themes/material-blue/css/_elements.scss
View File

@@ -7,6 +7,7 @@ html, body {
font-size: 12px;
font-weight: normal;
box-sizing: border-box;
max-width: 100%;
}
* {

101
app/modules/web/themes/material-blue/css/_login.scss
View File

@@ -1,66 +1,22 @@
@mixin background-logo-outline() {
background: transparent url($public-path + "/images/logo_full_nobg_outline.png") no-repeat top center;
background-size: auto 125px;
}
body.login, body.logout {
background: $color-bluegrey-fg;
#wrap {
background: transparent;
}
footer {
background: #78909C;
a {
color: #f2f2f2;
}
}
}
#login-logo {
position: fixed;
top: 11em;
top: 15em;
left: 0;
width: 100%;
height: 15em;
height: 20em;
@include background-logo-outline;
}
#login-container {
@include background-logo-outline;
padding: 1em;
width: 40em;
margin: 0 auto;
#boxSpacer {
height: 11em;
background-color: transparent;
}
#boxLogin {
@include shadow-full();
#box-pub-noheader {
#box-login {
position: relative;
margin: 0 auto;
width: 100%;
min-height: 14em;
padding: 1em;
background-color: #f2f2f2;
#boxData {
height: 100%;
min-height: 14em;
text-align: left;
background-color: transparent;
i {
margin-right: .5em;
opacity: .5;
}
.extra-hidden {
display: none;
}
}
#boxButton {
#box-buttons {
position: absolute;
top: 2em;
right: 2em;
}
#boxActions {
#box-actions {
width: 100%;
text-align: right;
a {
@@ -68,19 +24,7 @@ body.login, body.logout {
}
}
}
#boxLogout {
margin-top: 4em;
width: 100%;
& > div {
margin: 0 auto;
width: 250px;
font-size: 14px;
padding: 0.5em;
text-align: center;
@include color-amber();
}
}
#boxUpdated {
#box-updated {
width: 350px;
margin: 3em auto;
font-size: 14px;
@@ -89,11 +33,11 @@ body.login, body.logout {
@include color-teal();
}
#demo-info {
margin: 3em auto;
padding: .5em;
margin: 3em auto 0 auto;
color: #c9c9c9;
border-top: 1px solid #d9d9d9;
border-bottom: 1px solid #d9d9d9;
padding: .5em;
ul {
display: flex;
justify-content: space-around;
@@ -105,3 +49,30 @@ body.login, body.logout {
}
}
@media screen and (max-width: 600px) {
#box-pub-noheader {
#box-login {
#box-buttons {
position: relative;
top: 0;
right: 0;
text-align: right;
}
#box-actions {
margin-top: 1em;
}
}
#demo-info {
ul {
display: flex;
flex-direction: column;
justify-content: space-between;
list-style: none;
li span {
margin: 0 2em;
}
}
}
}
}

95
app/modules/web/themes/material-blue/css/_noheader.scss Normal file
View File

@@ -0,0 +1,95 @@
@mixin background-logo-outline() {
background: transparent url($public-path + "/images/logo_full_nobg_outline.png") no-repeat top center;
background-size: 75% auto;
}
body.login,
body.logout,
body.passreset {
background: $color-bluegrey-fg;
#wrap {
background: transparent;
}
footer {
background: #78909C;
a {
color: #f2f2f2;
}
}
}
#box-pub-noheader {
@include background-logo-outline;
width: 40em;
margin: 0 auto;
> div {
width: 100%;
padding: 1em;
margin: 0 auto;
}
.box-spacer {
height: 15em;
background-color: transparent;
}
.box-header {
width: 100%;
color: #f2f2f2;
font-size: 16px;
font-weight: bold;
text-align: center;
margin: 1em 0;
letter-spacing: .1em;
padding: 0.2em 0;
}
.box-form {
@include shadow-full();
background-color: #f2f2f2;
form {
fieldset#box-data {
height: 100%;
min-height: 14em;
text-align: left;
background-color: transparent;
legend {
width: 100%;
color: $color-bluegrey-fg;
font-size: 14px;
font-weight: bold;
text-align: center;
margin: 1em 0;
letter-spacing: .1em;
padding: 0.2em 0;
}
i {
margin-right: .5em;
opacity: .5;
}
.extra-hidden {
display: none;
}
margin-bottom: 2em;
}
}
div#box-buttons {
margin-top: 2em;
text-align: center;
}
}
}
@media screen and (max-width: 600px) {
#box-pub-noheader {
width: 25em;
.box-spacer {
height: 10em;
}
form {
fieldset#box-data {
.mdl-textfield {
width: 100%;
}
}
}
}
}

212
app/modules/web/themes/material-blue/css/styles.css
View File

@@ -6,7 +6,8 @@ html, body {
color: #555;
font-size: 12px;
font-weight: normal;
box-sizing: border-box; }
box-sizing: border-box;
max-width: 100%; }
* {
font-family: "Roboto Regular", Verdana, Tahoma, sans-serif;
@@ -112,6 +113,79 @@ pre, code, samp, kbd {
box-shadow: inset 0 0 .3em #ccc;
border-radius: 2px; }
body.login,
body.logout,
body.passreset {
background: #607d8b; }
body.login #wrap,
body.logout #wrap,
body.passreset #wrap {
background: transparent; }
body.login footer,
body.logout footer,
body.passreset footer {
background: #78909C; }
body.login footer a,
body.logout footer a,
body.passreset footer a {
color: #f2f2f2; }
#box-pub-noheader {
background: transparent url("../../../../../../public/images/logo_full_nobg_outline.png") no-repeat top center;
background-size: 75% auto;
width: 40em;
margin: 0 auto; }
#box-pub-noheader > div {
width: 100%;
padding: 1em;
margin: 0 auto; }
#box-pub-noheader .box-spacer {
height: 15em;
background-color: transparent; }
#box-pub-noheader .box-header {
width: 100%;
color: #f2f2f2;
font-size: 16px;
font-weight: bold;
text-align: center;
margin: 1em 0;
letter-spacing: .1em;
padding: 0.2em 0; }
#box-pub-noheader .box-form {
-moz-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
background-color: #f2f2f2; }
#box-pub-noheader .box-form form fieldset#box-data {
height: 100%;
min-height: 14em;
text-align: left;
background-color: transparent;
margin-bottom: 2em; }
#box-pub-noheader .box-form form fieldset#box-data legend {
width: 100%;
color: #607d8b;
font-size: 14px;
font-weight: bold;
text-align: center;
margin: 1em 0;
letter-spacing: .1em;
padding: 0.2em 0; }
#box-pub-noheader .box-form form fieldset#box-data i {
margin-right: .5em;
opacity: .5; }
#box-pub-noheader .box-form form fieldset#box-data .extra-hidden {
display: none; }
#box-pub-noheader .box-form div#box-buttons {
margin-top: 2em;
text-align: center; }
@media screen and (max-width: 600px) {
#box-pub-noheader {
width: 25em; }
#box-pub-noheader .box-spacer {
height: 10em; }
#box-pub-noheader form fieldset#box-data .mdl-textfield {
width: 100%; } }
#nojs {
width: 80%;
text-align: center;
@@ -168,7 +242,7 @@ pre, code, samp, kbd {
#container {
margin: auto;
width: 100%; }
#container.login {
#container.login, #container.passreset {
padding-top: 5%; }
#container.error, #container.install, #container.passreset {
width: 100%; }
@@ -915,6 +989,9 @@ h5.datagrid-header-title {
border: transparent 1px solid;
letter-spacing: .2em; }
.dialog-button {
width: 150px; }
.dialog-buttons {
text-align: center;
padding: .5em;
@@ -1059,95 +1136,64 @@ fieldset.warning {
.opacity50 {
opacity: .5 !important; }
body.login, body.logout {
background: #607d8b; }
body.login #wrap, body.logout #wrap {
background: transparent; }
body.login footer, body.logout footer {
background: #78909C; }
body.login footer a, body.logout footer a {
color: #f2f2f2; }
#login-logo {
position: fixed;
top: 11em;
top: 15em;
left: 0;
width: 100%;
height: 15em;
height: 20em;
background: transparent url("../../../../../../public/images/logo_full_nobg_outline.png") no-repeat top center;
background-size: auto 125px; }
background-size: 75% auto; }
#login-container {
background: transparent url("../../../../../../public/images/logo_full_nobg_outline.png") no-repeat top center;
background-size: auto 125px;
padding: 1em;
width: 40em;
margin: 0 auto; }
#login-container #boxSpacer {
height: 11em;
background-color: transparent; }
#login-container #boxLogin {
-moz-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
position: relative;
margin: 0 auto;
#box-pub-noheader #box-login {
position: relative;
min-height: 14em; }
#box-pub-noheader #box-login #box-buttons {
position: absolute;
top: 2em;
right: 2em; }
#box-pub-noheader #box-login #box-actions {
width: 100%;
min-height: 14em;
padding: 1em;
background-color: #f2f2f2; }
#login-container #boxLogin #boxData {
height: 100%;
min-height: 14em;
text-align: left;
background-color: transparent; }
#login-container #boxLogin #boxData i {
margin-right: .5em;
opacity: .5; }
#login-container #boxLogin #boxData .extra-hidden {
display: none; }
#login-container #boxLogin #boxButton {
position: absolute;
top: 2em;
right: 2em; }
#login-container #boxLogin #boxActions {
width: 100%;
text-align: right; }
#login-container #boxLogin #boxActions a {
color: #c9c9c9; }
#login-container #boxLogout {
margin-top: 4em;
width: 100%; }
#login-container #boxLogout > div {
margin: 0 auto;
width: 250px;
font-size: 14px;
padding: 0.5em;
text-align: center;
color: #ffca28;
background-color: #fff8e1;
border: 1px solid #ffca28; }
#login-container #boxUpdated {
width: 350px;
margin: 3em auto;
font-size: 14px;
text-align: center;
padding: 0.5em;
color: #26a69a;
background-color: #e0f2f1;
border: 1px solid #26a69a; }
#login-container #demo-info {
margin: 3em auto;
color: #c9c9c9;
border-top: 1px solid #d9d9d9;
border-bottom: 1px solid #d9d9d9;
padding: .5em; }
#login-container #demo-info ul {
display: flex;
justify-content: space-around;
list-style: none; }
#login-container #demo-info ul li span {
margin: 0 2em; }
text-align: right; }
#box-pub-noheader #box-login #box-actions a {
color: #c9c9c9; }
#box-pub-noheader #box-updated {
width: 350px;
margin: 3em auto;
font-size: 14px;
text-align: center;
padding: 0.5em;
color: #26a69a;
background-color: #e0f2f1;
border: 1px solid #26a69a; }
#box-pub-noheader #demo-info {
padding: .5em;
margin: 3em auto 0 auto;
color: #c9c9c9;
border-top: 1px solid #d9d9d9;
border-bottom: 1px solid #d9d9d9; }
#box-pub-noheader #demo-info ul {
display: flex;
justify-content: space-around;
list-style: none; }
#box-pub-noheader #demo-info ul li span {
margin: 0 2em; }
@media screen and (max-width: 600px) {
#box-pub-noheader #box-login #box-buttons {
position: relative;
top: 0;
right: 0;
text-align: right; }
#box-pub-noheader #box-login #box-actions {
margin-top: 1em; }
#box-pub-noheader #demo-info ul {
display: flex;
flex-direction: column;
justify-content: space-between;
list-style: none; }
#box-pub-noheader #demo-info ul li span {
margin: 0 2em; } }
/* Default styles first then media queries */
/*@media screen and (min-width: 400px) {}*/
/*@media screen and (min-width: 600px) {}*/

4
app/modules/web/themes/material-blue/css/styles.css.map
View File

File diff suppressed because one or more lines are too long

2
app/modules/web/themes/material-blue/css/styles.min.css vendored
View File

File diff suppressed because one or more lines are too long

7
app/modules/web/themes/material-blue/css/styles.scss
View File

@@ -1,5 +1,6 @@
@import "base";
@import "elements";
@import "noheader";
#nojs {
width: 80%;
@@ -62,7 +63,7 @@
#container {
margin: auto;
width: 100%;
&.login {
&.login, &.passreset {
padding-top: 5%;
}
&.error, &.install, &.passreset {
@@ -969,6 +970,10 @@ h5.datagrid-header-title {
letter-spacing: .2em;
}
.dialog-button {
width: 150px;
}
.dialog-buttons {
text-align: center;
padding: .5em;

2
app/modules/web/themes/material-blue/views/_partials/error.inc
View File

@@ -9,7 +9,7 @@
<?php if (!isset($skipBackButton)): ?>
<div class="buttons">
<button id="btnBack" class="btn-back mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
<button id="btnBack" class="btn-back mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
<i class="material-icons"
title="<?php echo __('Volver'); ?>"><?php echo $icons->getIconBack()->getIcon(); ?></i>
<?php echo __('Volver'); ?>

6
app/modules/web/themes/material-blue/views/account/viewpass.inc
View File

@@ -13,8 +13,8 @@
<table>
<tbody>
<tr>
<td class="dialog-text dialog-user-text"><?php echo $login; ?></td>
<td class="right">
<td class="dialog-text dialog-user-text"><?php echo wordwrap($login, 50, PHP_EOL, true); ?></td>
<td class="dialog-button right">
<button class="dialog-clip-button mdl-button mdl-js-button mdl-js-ripple-effect"
title="<?php echo __('Copiar Usuario'); ?>" data-clipboard-target=".dialog-user-text">
<?php echo __('Usuario'); ?>
@@ -25,7 +25,7 @@
<tr>
<?php if (!$isImage): ?>
<td class="dialog-text dialog-pass-text"><?php echo wordwrap($pass, 50, PHP_EOL, true); ?></td>
<td class="right">
<td class="dialog-button right">
<button class="dialog-clip-button mdl-button mdl-js-button mdl-js-ripple-effect"
title="<?php echo __('Copiar Clave'); ?>" data-clipboard-target=".dialog-pass-text">
<?php echo __('Clave'); ?>

31
app/modules/web/themes/material-blue/views/login/index.inc
View File

@@ -1,10 +1,10 @@
<div id="login-container">
<div id="boxSpacer"></div>
<div id="boxLogin" class="round shadow">
<div id="box-pub-noheader">
<div class="box-spacer"></div>
<div id="box-login" class="box-form round">
<form method="post" name="frmLogin" id="frmLogin" class="form-action"
data-onsubmit="main/login"
data-route="login/login">
<div id="boxData">
<fieldset id="box-data">
<div>
<i class="material-icons">perm_identity</i>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
@@ -56,8 +56,8 @@
<input type="hidden" name="login" value="1"/>
<input type="hidden" name="isAjax" value="1"/>
</div>
<div id="boxButton">
</fieldset>
<div id="box-buttons">
<button id="btnLogin" type="submit" form="frmLogin"
class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored mdl-color--indigo-400"
title="<?php echo __('Acceder'); ?>">
@@ -68,24 +68,31 @@
<!-- Close boxData -->
<?php if ($mailEnabled): ?>
<div id="boxActions">
<div id="box-actions">
<a href="index.php?r=userPassReset"><?php echo __('¿Olvidó su clave?'); ?></a>
</div>
<?php endif; ?>
</div><!-- Close boxLogin -->
<?php if (isset($updated)): ?>
<div id="boxUpdated" class="round5"><?php echo __('Aplicación actualizada correctamente'); ?></div>
<div id="box-updated" class="round5"><?php echo __('Aplicación actualizada correctamente'); ?></div>
<?php endif; ?>
<?php if ($isDemoMode): ?>
<div id="demo-info">
<ul>
<li title="<?php echo __('Usuario'); ?>"><i class="material-icons">perm_identity</i><span>demo</span>
<li title="<?php echo __('Usuario'); ?>">
<i class="material-icons">perm_identity</i>
<span>demo</span>
</li>
<li title="<?php echo __('Clave'); ?>">
<i class="material-icons">vpn_key</i>
<span>syspass</span>
</li>
<li title="<?php echo __('Clave Maestra'); ?>">
<i class="material-icons">vpn_key</i>
<span>12345678900</span>
</li>
<li title="<?php echo __('Clave'); ?>"><i class="material-icons">vpn_key</i><span>syspass</span></li>
<li title="<?php echo __('Clave Maestra'); ?>"><i
class="material-icons">vpn_key</i><span>12345678900</span></li>
</ul>
</div>
<?php endif; ?>

85
app/modules/web/themes/material-blue/views/userpassreset/request.inc
View File

@@ -1,43 +1,52 @@
<?php /** @var $icons \SP\Core\UI\ThemeIcons */ ?>
<div id="actions">
<form id="frmPassReset" action="" method="post" class="form-action" data-onsubmit="user/passreset"
data-action-route="userPassReset/saveRequest">
<fieldset id="resetdata">
<legend><?php echo __('Solicitud de Cambio de Clave'); ?></legend>
<div id="box-pub-noheader">
<div class="box-spacer"></div>
<div class="box-header">
<?php echo __('Solicitud de Cambio de Clave'); ?>
</div>
<div id="box-passreset" class="box-form round">
<form id="frmPassReset" action="" method="post" class="form-action" data-onsubmit="user/passreset"
data-action-route="userPassReset/saveRequest">
<fieldset id="box-data">
<div>
<i class="material-icons">perm_identity</i>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input id="login" name="login" type="text" required
class="mdl-textfield__input mdl-color-text--indigo-400"
autocomplete="off" autofocus>
<label class="mdl-textfield__label"
for="login"><?php echo __('Usuario'); ?></label>
</div>
</div>
<div>
<i class="material-icons">email</i>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input id="email" name="email" type="email" required
class="mdl-textfield__input mdl-color-text--indigo-400"
autocomplete="off">
<label class="mdl-textfield__label"
for="email"><?php echo __('Email del Usuario'); ?></label>
</div>
</div>
<input type="hidden" name="isAjax" value="1">
<input type="hidden" name="sk" value="">
</fieldset>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input id="login" name="login" type="text" required
class="mdl-textfield__input mdl-color-text--indigo-400"
autocomplete="off" autofocus>
<label class="mdl-textfield__label"
for="login"><?php echo __('Usuario'); ?></label>
<div id="box-buttons">
<button id="btnBack" type="button"
class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
<i class="material-icons"
title="<?php echo __('Volver a iniciar sesión'); ?>"><?php echo $icons->getIconBack()->getIcon(); ?></i>
<?php echo __('Volver'); ?>
</button>
<button id="btnRequest" class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
<?php echo __('Solicitar'); ?>
<i class="material-icons"
title="<?php echo __('Solicitar'); ?>"><?php echo $icons->getIconPlay()->getIcon(); ?></i>
</button>
</div>
<br>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input id="email" name="email" type="email" required
class="mdl-textfield__input mdl-color-text--indigo-400"
autocomplete="off">
<label class="mdl-textfield__label"
for="email"><?php echo __('Email del Usuario'); ?></label>
</div>
<input type="hidden" name="isAjax" value="1">
<input type="hidden" name="sk" value="">
</fieldset>
<div class="buttons">
<button id="btnBack" type="button"
class="mdl-button mdl-js-button mdl-button--raised mdl-button--primary">
<i class="material-icons"
title="<?php echo __('Volver a iniciar sesión'); ?>"><?php echo $icons->getIconBack()->getIcon(); ?></i>
<?php echo __('Volver'); ?>
</button>
<button id="btnRequest" class="mdl-button mdl-js-button mdl-button--raised mdl-button--primary">
<?php echo __('Solicitar'); ?>
<i class="material-icons"
title="<?php echo __('Solicitar'); ?>"><?php echo $icons->getIconPlay()->getIcon(); ?></i>
</button>
</div>
</form>
</form>
</div>
</div>

89
app/modules/web/themes/material-blue/views/userpassreset/reset.inc
View File

@@ -1,44 +1,55 @@
<?php /** @var $icons \SP\Core\UI\ThemeIcons */ ?>
<div id="actions">
<form id="frmPassReset" action="" method="post" class="form-action" data-onsubmit="user/passreset"
data-action-route="userPassReset/saveReset">
<fieldset id="resetdata">
<legend><?php echo __('Solicitud de Cambio de Clave'); ?></legend>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input id="pass" name="pass" type="password" required
class="mdl-textfield__input mdl-color-text--indigo-400 passwordfield__input"
value="" maxlength="255"
autocomplete="off">
<label class="mdl-textfield__label"
for="pass"><?php echo __('Clave'); ?></label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input id="passR" name="passR" type="password" required
class="mdl-textfield__input mdl-color-text--indigo-400"
value="" maxlength="255"
autocomplete="off">
<label class="mdl-textfield__label"
for="pass"><?php echo __('Clave (repetir)'); ?></label>
</div>
<input type="hidden" name="hash" value="<?php echo $hash; ?>">
<input type="hidden" name="isAjax" value="1">
<input type="hidden" name="sk" value="">
</fieldset>
<div id="box-pub-noheader">
<div class="box-spacer"></div>
<div class="box-header">
<?php echo __('Solicitud de Cambio de Clave'); ?>
</div>
<div id="box-passreset" class="box-form round">
<form id="frmPassReset" action="" method="post" class="form-action" data-onsubmit="user/passreset"
data-action-route="userPassReset/saveReset">
<fieldset id="box-data">
<div>
<i class="material-icons">vpn_key</i>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input id="password" name="password" type="password" required
class="mdl-textfield__input mdl-color-text--indigo-400 passwordfield__input"
value="" maxlength="255"
autocomplete="off">
<label class="mdl-textfield__label"
for="password"><?php echo __('Clave'); ?></label>
</div>
</div>
<div>
<i class="material-icons">vpn_key</i>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input id="password_repeat" name="password_repeat" type="password" required
class="mdl-textfield__input mdl-color-text--indigo-400"
value="" maxlength="255"
autocomplete="off">
<label class="mdl-textfield__label"
for="password_repeat"><?php echo __('Clave (repetir)'); ?></label>
</div>
</div>
<input type="hidden" name="hash" value="<?php echo $hash; ?>">
<input type="hidden" name="isAjax" value="1">
<input type="hidden" name="sk" value="">
</fieldset>
<div class="buttons">
<button id="btnBack" type="button"
class="mdl-button mdl-js-button mdl-button--raised mdl-button--primary">
<i class="material-icons"
title="<?php echo __('Volver a iniciar sesión'); ?>"><?php echo $icons->getIconBack()->getIcon(); ?></i>
<?php echo __('Volver'); ?>
</button>
<div id="box-buttons">
<button id="btnBack" type="button"
class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
<i class="material-icons"
title="<?php echo __('Volver a iniciar sesión'); ?>"><?php echo $icons->getIconBack()->getIcon(); ?></i>
<?php echo __('Volver'); ?>
</button>
<button id="btnChange" class="mdl-button mdl-js-button mdl-button--raised mdl-button--primary">
<?php echo __('Cambiar'); ?>
<i class="material-icons"
title="<?php echo __('Cambiar'); ?>"><?php echo $icons->getIconPlay()->getIcon(); ?></i>
</button>
</div>
</form>
<button id="btnChange" class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
<?php echo __('Cambiar'); ?>
<i class="material-icons"
title="<?php echo __('Cambiar'); ?>"><?php echo $icons->getIconPlay()->getIcon(); ?></i>
</button>
</div>
</form>
</div>
</div>