front/salix/components/app/app.html

@@ -3,7 +3,11 @@
 </vn-layout>
 <ui-view
     name="login"
-    ng-if="!$ctrl.showLayout">
+    ng-if="!$ctrl.showLayout && !$ctrl.isRecover">
+</ui-view>
+<ui-view
+    name="recover-password"
+    ng-if="!$ctrl.showLayout && $ctrl.isRecover">
 </ui-view>
 <vn-snackbar vn-id="snackbar"></vn-snackbar>
 <vn-debug-info></vn-debug-info>

front/salix/components/app/app.js

@@ -15,7 +15,12 @@ export default class App extends Component {
 
     get showLayout() {
         let state = this.$state.current.name;
-        return state && state != 'login';
+        return state && !state.includes('login');
+    }
+
+    get isRecover() {
+        let state = this.$state.current.name;
+        return state == 'login.recover-password';
     }
 
     $onDestroy() {

front/salix/components/login/locale/es.yml

@@ -1,5 +1,8 @@
 User: Usuario
 Password: Contraseña
+Email: Correo electrónico
 Do not close session: No cerrar sesión
 Enter: Entrar
 I do not remember my password: No recuerdo mi contraseña
+Recover password: Recuperar contraseña
+We will sent you an email to recover your password: Te enviaremos un correo para restablecer tu contraseña

front/salix/components/login/recover-password.html

@@ -1,11 +1,21 @@
 <div class="box">
-	<img src="./logo.svg"/>
 	<form name="form" ng-submit="$ctrl.submit()">
+        <h5 class="vn-mb-lg" translate>Recover password</h5>
 		<vn-textfield
-			label="User"
-			ng-model="$ctrl.user"
-			vn-id="userField"
+			label="Email"
+			ng-model="$ctrl.email"
 			vn-focus>
 		</vn-textfield>
+        <div
+            class="text-secondary"
+            translate>
+            We will sent you an email to recover your password
+        </div>
+		<div class="footer">
+			<vn-submit label="Recover password"></vn-submit>
+			<div class="spinner-wrapper">
+				<vn-spinner enable="$ctrl.loading"></vn-spinner>
+			</div>
+		</div>
 	</form>
 </div>

front/salix/components/login/style.scss

@@ -1,6 +1,7 @@
 @import "variables";
 
-vn-login {
+vn-login,
+vn-recover-password{
 	position: absolute;
 	height: 100%;
 	width: 100%;
@@ -61,6 +62,16 @@ vn-login {
 				}
 			}
 		}
+
+        h5{
+            color: $color-primary;
+        }
+
+        .text-secondary{
+            text-align: center;
+            padding-bottom: 16px;
+        }
+
 	}
 
 	@media screen and (max-width: 600px) {

front/salix/routes.js

@@ -10,15 +10,13 @@ function config($stateProvider, $urlRouterProvider) {
             url: '/login?continue',
             description: 'Login',
             views: {
-                login: {template: '<vn-login></vn-login>'}
+                'login': {template: '<vn-login></vn-login>'},
+                'recover-password': {template: '<vn-recover-password></vn-recover-password>'}
             }
         })
         .state('login.recover-password', {
             url: '/recover-password',
-            description: 'Recover-password',
-            views: {
-                recoverPassword: {template: '<vn-recover-password></vn-recover-password>'}
-            }
+            description: 'Recover-password'
         })
         .state('home', {
             url: '/',