Grafica al inicio en el dashboard, realizar npm-install para ng2-charts

Creadas paginas para añadir unidades organizativas y clientes
Pagina de login rediseñada
Solucionados varios bugs
En environment cambiado frontend por backend

35 files changed, 1520 insertions, 863 deletions

diff --git a/admin/WebConsole3/frontend/angular.json b/admin/WebConsole3/frontend/angular.json
index c59e75a7..a951ab68 100644
--- a/admin/WebConsole3/frontend/angular.json
+++ b/admin/WebConsole3/frontend/angular.json
@@ -10,7 +10,8 @@
       "prefix": "app",
       "schematics": {
         "@schematics/angular:component": {
-          "styleext": "scss"
+          "styleext": "scss",
+          "viewEncapsulation": "None"
         }
       },
       "architect": {
@@ -184,7 +185,8 @@
   "defaultProject": "opengnsysAngular6",
   "schematics": {
     "@schematics/angular:component": {
-      "styleext": "scss"
+      "styleext": "scss",
+      "viewEncapsulation": "None"
     }
   }
 }
diff --git a/admin/WebConsole3/frontend/library/globunet-angular/core/providers/auth/auth.module.d.ts b/admin/WebConsole3/frontend/library/globunet-angular/core/providers/auth/auth.module.d.ts
index 8bd4d6c1..6c9936b9 100644
--- a/admin/WebConsole3/frontend/library/globunet-angular/core/providers/auth/auth.module.d.ts
+++ b/admin/WebConsole3/frontend/library/globunet-angular/core/providers/auth/auth.module.d.ts
@@ -5,10 +5,11 @@ import { AuthService } from './auth.service';
 import { GlobunetUser } from "../../models/globunet-user";
 export declare class AuthModule {
     private authService;
+    private storageKey;
     private loggedUser;
     constructor(authService: AuthService, parentModule: AuthModule);
     static forRoot(config: AuthConfig): ModuleWithProviders;
     login(username: string, password: string, user: GlobunetUser): Observable<GlobunetUser>;
     logout(): void;
-    getLoggedUser(): GlobunetUser;
+    getLoggedUser(user?: GlobunetUser): GlobunetUser;
 }
diff --git a/admin/WebConsole3/frontend/library/globunet-angular/core/providers/auth/auth.module.js b/admin/WebConsole3/frontend/library/globunet-angular/core/providers/auth/auth.module.js
index 47df72d9..d8a2ac50 100644
--- a/admin/WebConsole3/frontend/library/globunet-angular/core/providers/auth/auth.module.js
+++ b/admin/WebConsole3/frontend/library/globunet-angular/core/providers/auth/auth.module.js
@@ -21,10 +21,20 @@ const globunet_user_1 = require("../../models/globunet-user");
 let AuthModule = AuthModule_1 = class AuthModule {
     constructor(authService, parentModule) {
         this.authService = authService;
+        this.storageKey = '';
         this.loggedUser = new globunet_user_1.GlobunetUser();
         if (parentModule) {
             throw new Error('AuthModule is already loaded. Import it in the AppModule only');
         }
+        // Comprobar sesion anterior
+        if (localStorage.getItem("AuthModule.storageKey")) {
+            this.storageKey = localStorage.getItem("AuthModule.storageKey") || '';
+            let userSession = JSON.parse(localStorage.getItem(this.storageKey) || '');
+            if (userSession) {
+                this.authService.setAuthorizationToken(userSession.data);
+                this.loggedUser = userSession.user;
+            }
+        }
     }
     static forRoot(config) {
         return {
@@ -37,9 +47,17 @@ let AuthModule = AuthModule_1 = class AuthModule {
     login(username, password, user) {
         return new rxjs_1.Observable((observer) => {
             this.authService.getAccessToken(username, password).subscribe(data => {
+                this.storageKey = username + "_" + btoa(password);
+                localStorage.setItem("AuthModule.storageKey", this.storageKey);
                 // Obtener los datos del usuario
-                this.authService.me().subscribe(data => {
-                    this.loggedUser = Object.assign(user, data);
+                this.authService.me().subscribe(userMe => {
+                    this.loggedUser = Object.assign(user, userMe);
+                    // Guardar todo en sesion
+                    let userSession = {
+                        data: data,
+                        user: this.loggedUser
+                    };
+                    localStorage.setItem(this.storageKey, JSON.stringify(userSession));
                     observer.next(this.loggedUser);
                 });
             }, error => {
@@ -49,9 +67,14 @@ let AuthModule = AuthModule_1 = class AuthModule {
     }
     logout() {
         delete this.loggedUser;
+        localStorage.removeItem(this.storageKey);
+        localStorage.removeItem("AuthModule.storageKey");
         this.authService.logout();
     }
-    getLoggedUser() {
+    getLoggedUser(user) {
+        if (user) {
+            this.loggedUser = Object.assign(user, this.loggedUser);
+        }
         return this.loggedUser;
     }
 };
diff --git a/admin/WebConsole3/frontend/package.json b/admin/WebConsole3/frontend/package.json
index bbf1334f..fd197606 100644
--- a/admin/WebConsole3/frontend/package.json
+++ b/admin/WebConsole3/frontend/package.json
@@ -38,6 +38,7 @@
     "font-awesome": "^4.7.0",
     "ionicons": "^4.5.5",
     "lodash": "^4.17.11",
+    "ng2-charts": "^2.2.2",
     "ng2-completer": "^2.0.8",
     "ng2-smart-table": "^1.4.0",
     "ng6-toastr-notifications": "^1.0.4",
@@ -57,6 +58,8 @@
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "~8.9.4",
     "codelyzer": "~4.3.0",
+    "globunet-angular": "git+https://gitlab.globunet.com/globunet/angular2-shared.git",
+    "globunet-schematics": "git+https://gitlab.globunet.com/globunet/globunet-angular-schematics.git",
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~3.0.0",
diff --git a/admin/WebConsole3/frontend/src/app/api/organizational-unit.service.ts b/admin/WebConsole3/frontend/src/app/api/organizational-unit.service.ts
index 001587da..99dfb791 100644
--- a/admin/WebConsole3/frontend/src/app/api/organizational-unit.service.ts
+++ b/admin/WebConsole3/frontend/src/app/api/organizational-unit.service.ts
@@ -1,20 +1,19 @@
-import { Injectable } from '@angular/core';

-import { HttpClient} from '@angular/common/http';

-

-import { environment } from '../../environments/environment';

-import { OrganizationalUnit } from "../model/organizational-unit";

-import { OrganizationalUnitSerializer } from "../serializer/organizational-unit.serializer";

-

-import {ResourceService} from "globunet-angular/core/providers/api/resource.service";

-

-

-@Injectable({

-	providedIn: 'root'

-})

-export class OrganizationalUnitService extends ResourceService<OrganizationalUnit> {

-

-	constructor(http: HttpClient){

-		super(http, environment.API_URL,"organizationalunits", new OrganizationalUnitSerializer());

-	}

-

-}

+import { Injectable } from '@angular/core';
+import { HttpClient} from '@angular/common/http';
+
+import { environment } from '../../environments/environment';
+import { OrganizationalUnit } from '../model/organizational-unit';
+import { OrganizationalUnitSerializer } from '../serializer/organizational-unit.serializer';
+
+import {ResourceService} from 'globunet-angular/core/providers/api/resource.service';
+
+
+@Injectable({
+	providedIn: 'root'
+})
+export class OrganizationalUnitService extends ResourceService<OrganizationalUnit> {
+    constructor(http: HttpClient){
+		super(http, environment.API_URL, 'organizationalunits', new OrganizationalUnitSerializer());
+	}
+
+}
diff --git a/admin/WebConsole3/frontend/src/app/app-routing.module.ts b/admin/WebConsole3/frontend/src/app/app-routing.module.ts
index 514a5115..7e5c4c63 100644
--- a/admin/WebConsole3/frontend/src/app/app-routing.module.ts
+++ b/admin/WebConsole3/frontend/src/app/app-routing.module.ts
@@ -15,6 +15,8 @@ import {NetbootEditComponent} from './pages/netboot/edit/netboot-edit.component'
 import {HardwareComponentComponent} from './pages/hardware-component/hardware-component.component';
 import {ImageEditComponent} from './pages/image/edit/image-edit.component';
 import {ProfileComponent} from './pages/profile/profile.component';
+import {OrganizationalUnitEditComponent} from './pages/organizational-unit/edit/organizational-unit-edit.component';
+import {ClientComponent} from './pages/client/client.component';
 
 
 const routes: Routes = [
@@ -40,6 +42,26 @@ const routes: Routes = [
         component: OrganizationalUnitComponent
       },
       {
+        path: 'ous/create',
+        component: OrganizationalUnitEditComponent
+      },
+      {
+        path: 'ous/edit/:id',
+        component: OrganizationalUnitEditComponent
+      },
+      {
+        path: 'clients/create',
+        component: ClientComponent
+      },
+      {
+        path: 'clients/edit/:id',
+        component: ClientComponent
+      },
+      {
+        path: 'clients/dhcp',
+        component: ClientComponent
+      },
+      {
         path: 'images',
         component: ImageComponent
       },
diff --git a/admin/WebConsole3/frontend/src/app/app.module.ts b/admin/WebConsole3/frontend/src/app/app.module.ts
index 79943697..3dd55fe6 100644
--- a/admin/WebConsole3/frontend/src/app/app.module.ts
+++ b/admin/WebConsole3/frontend/src/app/app.module.ts
@@ -1,12 +1,12 @@
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import {NgModule, ViewEncapsulation} from '@angular/core';
 import {AdminLteConf } from './admin-lte.conf';
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 import { CoreModule } from './core/core.module';
 import {DropdownModule, LayoutModule, LayoutService, LayoutState, LayoutStore} from 'library/angular-admin-lte/src';
 import {environment} from '../environments/environment';
-import {AuthModule, TokenInterceptorService} from 'library/globunet-angular/core';
+import {AuthModule, TokenInterceptorService} from 'globunet-angular/core';
 import {HTTP_INTERCEPTORS, HttpClient, HttpClientModule} from '@angular/common/http';
 import {LoginComponent} from './pages/login/login.component';
 import {ImageComponent} from './pages/image/image.component';
@@ -54,6 +54,10 @@ import {NetbootEditComponent} from './pages/netboot/edit/netboot-edit.component'
 import {ImageEditComponent} from './pages/image/edit/image-edit.component';
 import {ProfileComponent} from './pages/profile/profile.component';
 import {layoutProvider} from '../../library/angular-admin-lte/src/lib/layout/layout.provider';
+import {OrganizationalUnitEditComponent} from './pages/organizational-unit/edit/organizational-unit-edit.component';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {ClientComponent} from './pages/client/client.component';
+import {ChartsModule} from 'ng2-charts';
 
 
 
@@ -66,6 +70,7 @@ import {layoutProvider} from '../../library/angular-admin-lte/src/lib/layout/lay
     DashboardComponent,
     RepositoryComponent,
     OrganizationalUnitComponent,
+    OrganizationalUnitEditComponent,
     Ng2TableActionComponent,
     FormInputComponent,
     HardwareComponentComponent,
@@ -80,6 +85,7 @@ import {layoutProvider} from '../../library/angular-admin-lte/src/lib/layout/lay
     HardwareComponentsGroupComponent,
     OuGroupComponent,
     OuClientComponent,
+    ClientComponent,
     CommandComponent,
     EditCommandComponent,
     IcheckDirective,
@@ -105,6 +111,7 @@ import {layoutProvider} from '../../library/angular-admin-lte/src/lib/layout/lay
     ImageComponent,
     ImageEditComponent,
     OrganizationalUnitComponent,
+    OrganizationalUnitEditComponent,
     Ng2TableActionComponent,
     ProfilesTableComponent,
     ProfilesGroupComponent,
@@ -112,6 +119,7 @@ import {layoutProvider} from '../../library/angular-admin-lte/src/lib/layout/lay
     HardwareComponentsGroupComponent,
     OuGroupComponent,
     OuClientComponent,
+    ClientComponent,
     CommandComponent,
     EditCommandComponent,
     OgOuGeneralOptionsComponent,
@@ -139,7 +147,8 @@ import {layoutProvider} from '../../library/angular-admin-lte/src/lib/layout/lay
     }),
     ToastrModule.forRoot(),
     Ng2SmartTableModule,
-    FormsModule
+    FormsModule,
+    ChartsModule
   ],
   providers: [
     {provide: HTTP_INTERCEPTORS, useClass: TokenInterceptorService, multi: true}
@@ -148,6 +157,11 @@ import {layoutProvider} from '../../library/angular-admin-lte/src/lib/layout/lay
 })
 export class AppModule {}
 
+platformBrowserDynamic().bootstrapModule(AppModule, [
+  {
+    defaultEncapsulation: ViewEncapsulation.None
+  }
+]);
 
 export function createTranslateLoader(http: HttpClient) {
   return new TranslateHttpLoader(http, './assets/i18n/', '.json');
diff --git a/admin/WebConsole3/frontend/src/app/form-type/client.form-type.ts b/admin/WebConsole3/frontend/src/app/form-type/client.form-type.ts
new file mode 100644
index 00000000..2ee85086
--- /dev/null
+++ b/admin/WebConsole3/frontend/src/app/form-type/client.form-type.ts
@@ -0,0 +1,28 @@
+import {GlobunetFormType} from './globunet.form-type';
+import {Client} from '../model/client';
+
+
+export class ClientFormType extends GlobunetFormType {
+  getForm() {
+    const form =  GlobunetFormType.getForm(new Client());
+    this.setFieldType(form, 'repository', 'select');
+    this.setFieldType(form, 'hardwareProfile', 'select');
+    this.setFieldType(form, 'oglive', 'select');
+    this.setFieldType(form, 'netboot', 'select');
+    this.getField(form, 'oglive').options = {
+      label: 'iso',
+      value: 'iso'
+    };
+    this.getField(form, 'repository').options = {
+      label: 'name',
+    };
+    this.getField(form, 'hardwareProfile').options = {
+      label: 'name',
+    };
+    this.getField(form, 'netboot').options = {
+      label: 'name',
+    };
+
+    return form;
+  }
+}
diff --git a/admin/WebConsole3/frontend/src/app/form-type/organizational-unit.form-type.ts b/admin/WebConsole3/frontend/src/app/form-type/organizational-unit.form-type.ts
new file mode 100644
index 00000000..4b6de040
--- /dev/null
+++ b/admin/WebConsole3/frontend/src/app/form-type/organizational-unit.form-type.ts
@@ -0,0 +1,9 @@
+import {GlobunetFormType} from './globunet.form-type';
+import {OrganizationalUnit} from '../model/organizational-unit';
+
+
+export class OrganizationalUnitFormType {
+  getForm() {
+    return GlobunetFormType.getForm(new OrganizationalUnit());
+  }
+}
diff --git a/admin/WebConsole3/frontend/src/app/model/client.ts b/admin/WebConsole3/frontend/src/app/model/client.ts
index 407fa234..dbc9976e 100644
--- a/admin/WebConsole3/frontend/src/app/model/client.ts
+++ b/admin/WebConsole3/frontend/src/app/model/client.ts
@@ -1,20 +1,22 @@
-import { Resource } from 'globunet-angular/core/models/api/resource';

-import {Repository} from './repository';

-import {HardwareProfile} from './hardware-profile';

-

-export class Client extends Resource {

-  public name: string;

-  public mac: string;

-  public ip: string;

-  public serialno: string;

-  public netiface: string;

-  public netdriver: string;

-  public repository: Repository;

-  public hardwareProfile: HardwareProfile;

-  public oglive: string;

-  public netboot: string;

-  public organizationalUnit: any;

-  // Variables temporales para la vista, no vienen del servidor

-  public status?: string;

-  public selected?: boolean;

-}

+import { Resource } from 'globunet-angular/core/models/api/resource';
+import {Repository} from './repository';
+import {HardwareProfile} from './hardware-profile';
+import {Netboot} from './netboot';
+
+export class Client extends Resource {
+  public name = '';
+  public mac = '';
+  public ip = '';
+  public serialno = '';
+  public netiface = '';
+  public netdriver = '';
+  public repository: Repository = null;
+  public hardwareProfile: HardwareProfile = null;
+  public oglive = null;
+  public netboot: Netboot = null;
+  public organizationalUnit: number;
+  // Variables temporales para la vista, no vienen del servidor
+  public status?: string;
+  public selected?: boolean;
+
+}
diff --git a/admin/WebConsole3/frontend/src/app/model/organizational-unit.ts b/admin/WebConsole3/frontend/src/app/model/organizational-unit.ts
index 87fbe9c7..c479a43c 100644
--- a/admin/WebConsole3/frontend/src/app/model/organizational-unit.ts
+++ b/admin/WebConsole3/frontend/src/app/model/organizational-unit.ts
@@ -1,25 +1,40 @@
-import { Resource } from 'globunet-angular/core/models/api/resource';

-import {Client} from './client';

-

-export class OrganizationalUnit extends Resource {

-  name: string;

-  capacity: number;

-  defclients: number;

-  inremotepc: boolean;

-  projector: boolean;

-  board: boolean;

-  description: string;

-  routerip: string;

-  netmask: string;

-  dns: string;

-  ntp: string;

-  proxyurl: string;

-  mcastmode: string[] = ['full-duplex', 'half-duplex'];

-  mcastip: string;

-  mcastport: number;

-  mcastspeed: number;

-  p2pmode: string;

-  p2ptime: number;

-  parent: string;

-  clients?: Client[];

-}

+import { Resource } from 'globunet-angular/core/models/api/resource';
+import {Client} from './client';
+
+export class NetworkSettings {
+  router = '';
+  netmask = '';
+  proxy = '';
+  dns = '';
+  ntp = '';
+  mcastMode = '';
+  mcastIp = '';
+  mcastSpeed = 100;
+  mcastPort = 9000;
+  p2pMode = '';
+  p2pTime = 60;
+}
+
+export class OrganizationalUnit extends Resource {
+  name: string;
+  capacity: number;
+  defclients: number;
+  inremotepc: boolean;
+  projector: boolean;
+  board: boolean;
+  description: string;
+  routerip: string;
+  netmask: string;
+  dns: string;
+  ntp: string;
+  proxyurl: string;
+  mcastmode: string[] = ['full-duplex', 'half-duplex'];
+  mcastip: string;
+  mcastport: number;
+  mcastspeed: number;
+  p2pmode: string;
+  p2ptime: number;
+  parent: string;
+  clients?: Client[];
+  networkSettings?: NetworkSettings;
+}
diff --git a/admin/WebConsole3/frontend/src/app/pages/client/client.component.html b/admin/WebConsole3/frontend/src/app/pages/client/client.component.html
index 443b3b54..0ba00d7d 100644
--- a/admin/WebConsole3/frontend/src/app/pages/client/client.component.html
+++ b/admin/WebConsole3/frontend/src/app/pages/client/client.component.html
@@ -1 +1,122 @@
-<div>Html template for class Client</div>
\ No newline at end of file
+<section class="content-header">
+    <h1 translate="{{client.name||'new_client'}}">
+    </h1>
+    <ol class="breadcrumb">
+        <li><a [routerLink]="'/app/dashboard'"><i class="fa fa-dashboard"></i> {{'dashboard'|translate}}</a></li>
+        <li><a [routerLink]="'/app/ous'" ><i class="fa fa-th"></i> {{'ous'|translate}}</a></li>
+        <li class="active" translate="client"></li>
+    </ol>
+</section>
+<section fixed-toolboxbar class="toolboxbar">
+    <div>
+        <div class="col-md-12">
+            <div class="box-tools pull-right">
+                <button class="btn btn-primary" translate="save" (click)="save()"></button>
+            </div>
+        </div>
+    </div>
+</section>
+<section class="content">
+    <div class="row">
+        <div class="col-md-12">
+            <mk-box class="box box-primary" [isRemovable]="false" [isCollapsable]="false">
+                <mk-box-header class="box-header with-border">
+                    <h3 class="box-title" translate="client_data"></h3>
+                    <div class="box-tools pull-right">
+                        <div class="btn-group" *ngIf="client.id !== 0">
+                            <app-og-information-options ></app-og-information-options>
+                            <app-og-commands-options></app-og-commands-options>
+                        </div>
+                    </div>
+                </mk-box-header>
+                <mk-box-content>
+                    <form role="form" name="Form">
+                        <app-form-input [formType]="form" [cols]="2" [model]="client" ></app-form-input>
+                    </form>
+                </mk-box-content>
+                <mk-box-footer >
+                    <mk-box class="box box-default box-solid" *ngFor="let diskConfig of client.diskConfig">
+                        <mk-box-header class="box-header with-border">
+                            <div class="row">
+                                <div class="col-md-4">
+                                    <span translate="num_disk"></span>: <b>{{diskConfig.disk}}</b>
+                                </div>
+                                <div class="col-md-4">
+                                    <span translate="part_table"></span>: <b>{{diskConfig.parttable}}</b>
+                                </div>
+                                <div class="col-md-4">
+                                    <span translate="size"></span>: <b>{{getSizeInGB(diskConfig.size)}} GB</b>
+                                </div>
+                            </div>
+                            <div class="box-tools pull-right">
+                                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
+                                </button>
+                            </div>
+                            <!-- /.box-tools -->
+                        </mk-box-header>
+                        <!-- /.box-header -->
+                        <mk-box-content class="box-body">
+                            <div class="row">
+                                <div class="col-md-8">
+                                    <table class="table table-condensed table-striped">
+                                        <tbody>
+                                        <tr>
+                                            <th translate="partition"></th>
+                                            <th translate="part_type"></th>
+                                            <th translate="filesystem"></th>
+                                            <th translate="size"></th>
+                                            <th translate="usage"></th>
+                                            <th translate="os"></th>
+                                        </tr>
+                                        </tbody>
+                                        <ng-template *ngIf="partition.size > 0">
+                                            <tbody *ngFor="let partition of diskConfig.partitions" >
+                                        <tr ng-class="{'odd': $index%2 == 0, 'even': $index%2 != 0}">
+                                            <td>{{partition.numPartition}}</td>
+                                            <td>{{partition.parttype}}</td>
+                                            <td>{{partition.filesystem}}</td>
+                                            <td>{{getSizeInGB(partition.size)}} GB</td>
+                                            <td><span class="badge" ng-class="{'bg-green': partition.usage < 60, 'bg-yellow': partition.usage >= 60 && partition.usage < 80, 'bg-red': partition.usage >= 80}">{{partition.usage}}%</span></td>
+                                            <td>{{partition.osName}}</td>
+                                        </tr>
+                                        <tr *ngIf="partition.partitionCode == 'ca' && partition.cacheContent.files.length > 0" class="client-cache-info" ng-class="{'odd': $index%2 == 0, 'even': $index%2 != 0}">
+                                            <td colspan="6">
+                                                <span style="font-weight: bold" translate="cache_content"></span>
+                                                <table class="table">
+                                                    <thead>
+                                                    <tr>
+                                                        <th translate="type"></th>
+                                                        <th translate="name"></th>
+                                                        <th translate="size"></th>
+                                                    </tr>
+                                                    </thead>
+                                                    <tbody>
+                                                    <tr *ngFor="let file of partition.cacheContent.files">
+                                                        <td>{{file.type}}</td>
+                                                        <td>{{file.name}}</td>
+                                                        <td>{{file.size}}</td>
+                                                    </tr>
+                                                    <tr>
+                                                        <td style="font-weight: bold" translate="free_space" colspan="2"></td>
+                                                        <td>{{partition.cacheContent.freeSpace}}</td>
+                                                    </tr>
+                                                    </tbody>
+                                                </table>
+                                            </td>
+                                        </tr>
+                                        </tbody>
+                                        </ng-template>
+                                    </table>
+                                </div>
+                                <div class="col-md-4">
+                                    <!--flot dataset="diskConfig.diskChartData" options="diskConfig.diskChartOptions" height="200px"></flot-->
+                                </div>
+                            </div>
+                        </mk-box-content>
+                        <!-- /.box-body -->
+                    </mk-box>
+                </mk-box-footer>
+            </mk-box>
+        </div>
+    </div>
+</section>
diff --git a/admin/WebConsole3/frontend/src/app/pages/client/client.component.scss b/admin/WebConsole3/frontend/src/app/pages/client/client.component.scss
index 708e0b0e..0bbea7e4 100644
--- a/admin/WebConsole3/frontend/src/app/pages/client/client.component.scss
+++ b/admin/WebConsole3/frontend/src/app/pages/client/client.component.scss
@@ -1,3 +1,5 @@
-client {

-

-}

+::ng-deep app-client {
+  ::ng-deep .box-title {
+    width: 100%;
+  }
+}
diff --git a/admin/WebConsole3/frontend/src/app/pages/client/client.component.ts b/admin/WebConsole3/frontend/src/app/pages/client/client.component.ts
index 46a9328d..50346ffd 100644
--- a/admin/WebConsole3/frontend/src/app/pages/client/client.component.ts
+++ b/admin/WebConsole3/frontend/src/app/pages/client/client.component.ts
@@ -1,17 +1,150 @@
-import { Component } from '@angular/core';

-

-import { ClientService } from 'src/app/api/client.service';

-import { Client } from 'src/app/model/client';

-

-@Component({

-  selector: 'client',

-  templateUrl: './client.component.html',

-  styleUrls: [ './client.component.scss' ]

-})

-export class ClientComponent {

-  // this tells the tabs component which Pages

-  // should be each tab's root Page

-  constructor(public clientService: ClientService) {

-  }

-  

-}

+import {Component, NgZone, OnInit} from '@angular/core';
+
+import {ClientService} from 'src/app/api/client.service';
+import {Client} from 'src/app/model/client';
+import {ActivatedRoute, ParamMap, Router} from '@angular/router';
+import {Observable} from 'rxjs';
+import {NetbootService} from '../../api/netboot.service';
+import {ToasterService} from '../../service/toaster.service';
+import {RepositoryService} from '../../api/repository.service';
+import {HardwareProfileService} from '../../api/hardware-profile.service';
+import {Repository} from '../../model/repository';
+import {HardwareProfile} from '../../model/hardware-profile';
+import {OgCommonService} from '../../service/og-common.service';
+import {ClientFormType} from '../../form-type/client.form-type';
+import {GlobunetFormType} from '../../form-type/globunet.form-type';
+
+@Component({
+    selector: 'app-client',
+    templateUrl: './client.component.html',
+    styleUrls: ['./client.component.scss']
+})
+export class ClientComponent implements OnInit {
+    public client: Client;
+    public netboots: any = [];
+    public repositories: Repository[] = [];
+    public hardwareProfiles: HardwareProfile[] = [];
+    public oglives: any[] = [];
+    private formType: ClientFormType;
+    public form;
+
+    // this tells the tabs component which Pages
+    // should be each tab's root Page
+    constructor(private router: Router,
+                private activatedRouter: ActivatedRoute,
+                private clientService: ClientService,
+                private netbootService: NetbootService,
+                private toaster: ToasterService,
+                private repositoryService: RepositoryService,
+                private hardwareProfileService: HardwareProfileService,
+                private ogCommonService: OgCommonService) {
+        this.client = new Client();
+        this.formType = new ClientFormType();
+        this.form = this.formType.getForm();
+    }
+
+    ngOnInit(): void {
+        this.loadNetboots();
+        this.loadOgLives();
+        this.loadRepositories();
+        this.loadHardwareProfiles();
+        // Comprobar por un lado si es edicion o un nuevo cliente
+        this.activatedRouter.paramMap.subscribe(
+            (data: ParamMap) => {
+                if (data.get('id')) {
+                    // @ts-ignore
+                    const id: number = data.get('id');
+                    this.clientService.read(id).subscribe(
+                        client => {
+                            this.client = client;
+                        }
+                    );
+                }
+                this.activatedRouter.queryParams.subscribe(
+                    query => {
+                        this.client.organizationalUnit = query.ou;
+                    }
+                );
+            },
+            error => {
+                console.log(error);
+            }
+        );
+
+
+
+
+    }
+
+    private loadOgLives() {
+        this.ogCommonService.loadEngineConfig().subscribe(
+            data => {
+                this.oglives = data.constants.ogliveinfo;
+                this.formType.getField(this.form, 'oglive').options.items = this.oglives;
+            }
+        );
+    }
+
+    private loadNetboots() {
+        this.netbootService.list().subscribe(
+            (result) => {
+                this.netboots = result;
+                this.formType.getField(this.form, 'netboot').options.items = this.netboots;
+            },
+            (error) => {
+                this.toaster.pop({type: 'error', title: 'error', body: error});
+            }
+        );
+    }
+
+    private loadRepositories() {
+        this.repositoryService.list().subscribe(
+            list => {
+                this.repositories = list;
+                this.formType.getField(this.form, 'repository').options.items = this.repositories;
+            },
+            error => {
+                this.toaster.pop({type: 'error', title: 'error', body: error});
+            }
+        );
+    }
+
+    private loadHardwareProfiles() {
+        this.hardwareProfileService.list().subscribe(
+            list => {
+                this.hardwareProfiles = list;
+                this.formType.getField(this.form, 'hardwareProfile').options.items = this.hardwareProfiles;
+
+            },
+            error => {
+                this.toaster.pop({type: 'error', title: 'error', body: error});
+            }
+        );
+    }
+
+    save() {
+        let request: Observable<Client>;
+        if (this.client.id !== 0) {
+            request = this.clientService.update(this.client);
+        } else {
+            request = this.clientService.create(this.client);
+        }
+        request.subscribe(
+            data => {
+                this.toaster.pop({type: 'success', title: 'success', body: 'Successfully saved'});
+                this.router.navigate(['/app/ous']);
+            },
+            error => {
+                this.toaster.pop({type: 'error', title: 'error', body: error});
+            }
+        );
+    }
+
+    getSizeInGB(size) {
+        size = size / (1024 * 1024);
+        return Math.round(size * 100) / 100;
+    }
+
+
+
+}
diff --git a/admin/WebConsole3/frontend/src/app/pages/common/forms/form-input.component.ts b/admin/WebConsole3/frontend/src/app/pages/common/forms/form-input.component.ts
index dcb00466..86412ad0 100644
--- a/admin/WebConsole3/frontend/src/app/pages/common/forms/form-input.component.ts
+++ b/admin/WebConsole3/frontend/src/app/pages/common/forms/form-input.component.ts
@@ -1,46 +1,46 @@
-import {Component, Input} from '@angular/core';

-

-@Component({

-  selector: 'app-form-input',

-  templateUrl: 'form-input.component.html'

-})

-export class FormInputComponent {

-  private _formType: any;

-  private _cols: number;

-

-  @Input() model;

-

-  @Input()

-  set cols(cols) {

-    this._cols = (typeof cols !== 'undefined') ? (12 / cols) : 6;

-  }

-  get cols() {

-    return this._cols;

-  }

-  @Input()

-  set formType(formType) {

-    if (typeof formType.rows === 'undefined') {

-      formType.rows = [formType];

-    }

-    this._formType = formType;

-  }

-  get formType() {

-    return this._formType;

-  }

-

-

-  getCol(rowNumber) {

-    const elems: number = this.formType.rows[rowNumber].length;

-    const nCol = ((this._cols) ? this._cols : Math.ceil(12 / elems));

-

-    return  'col-' + nCol + ' col-md-' + nCol;

-  }

-

-  getValue(field: any, option: any) {

-    let result = option;

-    if (field.value) {

-      result = option[field.value];

-    }

-    return result;

-  }

-}

+import {Component, Input} from '@angular/core';
+
+@Component({
+  selector: 'app-form-input',
+  templateUrl: 'form-input.component.html'
+})
+export class FormInputComponent {
+  private _formType: any;
+  private _cols: number;
+
+  @Input() model;
+
+  @Input()
+  set cols(cols) {
+    this._cols = (typeof cols !== 'undefined') ? (12 / cols) : 6;
+  }
+  get cols() {
+    return this._cols;
+  }
+  @Input()
+  set formType(formType) {
+    if (typeof formType.rows === 'undefined') {
+      formType.rows = [formType];
+    }
+    this._formType = formType;
+  }
+  get formType() {
+    return this._formType;
+  }
+
+
+  getCol(rowNumber) {
+    const elems: number = this.formType.rows[rowNumber].length;
+    const nCol = ((this._cols) ? this._cols : Math.ceil(12 / elems));
+
+    return  'col-' + nCol + ' col-md-' + nCol;
+  }
+
+  getValue(field: any, option: any) {
+    let result = option;
+    if (field.options.value) {
+      result = option[field.options.value];
+    }
+    return result;
+  }
+}
diff --git a/admin/WebConsole3/frontend/src/app/pages/common/og-options/og-ou-general-options/og-ou-general-options.component.html b/admin/WebConsole3/frontend/src/app/pages/common/og-options/og-ou-general-options/og-ou-general-options.component.html
index 8f5225fc..7437198e 100644
--- a/admin/WebConsole3/frontend/src/app/pages/common/og-options/og-ou-general-options/og-ou-general-options.component.html
+++ b/admin/WebConsole3/frontend/src/app/pages/common/og-options/og-ou-general-options/og-ou-general-options.component.html
@@ -3,7 +3,7 @@
       <span translate="options"></span><span class="caret"></span>
   </mk-dropdown-toggle>
   <mk-dropdown-menu>
-    <li role="presentation"><a role="menuitem" tabindex="-1" [routerLink]="'/app/ous/new'" translate="add_ou"></a></li>
+    <li role="presentation"><a role="menuitem" tabindex="-1" [routerLink]="'/app/ous/create'" translate="add_ou"></a></li>
     <li role="presentation" class="{{ogCommonService.getSelectionSize() == 0?'disable-links':''}}">
       <a role="menuitem" tabindex="-1" href="javascript:void(0)" (click)="moveClientsToOu()">
         <span *ngIf="!ogCommonService.isMovingClients()" translate="move_clients_to_ou"></span>
diff --git a/admin/WebConsole3/frontend/src/app/pages/dashboard/dashboard.component.html b/admin/WebConsole3/frontend/src/app/pages/dashboard/dashboard.component.html
index cbdd44f0..8262ba9d 100644
--- a/admin/WebConsole3/frontend/src/app/pages/dashboard/dashboard.component.html
+++ b/admin/WebConsole3/frontend/src/app/pages/dashboard/dashboard.component.html
@@ -135,7 +135,7 @@
               </div>
                 <div class="box-body">
                   <div>
-                    <canvas id="canvas" height="300px">{{ chart }}</canvas>
+                    <canvas id="canvas" width="1000" height="300" baseChart [chartType]="'line'" [options]="status.options" [datasets]="status.datasets" [labels]="status.xData"></canvas>
                   </div>
                 </div>
               </div>
diff --git a/admin/WebConsole3/frontend/src/app/pages/dashboard/dashboard.component.ts b/admin/WebConsole3/frontend/src/app/pages/dashboard/dashboard.component.ts
index cb65778b..97d26ae1 100644
--- a/admin/WebConsole3/frontend/src/app/pages/dashboard/dashboard.component.ts
+++ b/admin/WebConsole3/frontend/src/app/pages/dashboard/dashboard.component.ts
@@ -41,7 +41,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
 
   constructor(private authModule: AuthModule, private translate: TranslateService, private ogCommonService: OgCommonService, private statusService: StatusService) {
     this.status = {
-      data: [
+      datasets: [
         {
           label: translate.instant('memory'),
           data: [],
@@ -53,6 +53,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
           color: '#00FF00'
         }
       ],
+      xData: [],
       options: {
         grid: {
           borderColor: '#f3f3f3',
@@ -134,14 +135,15 @@ export class DashboardComponent implements OnInit, OnDestroy {
         // Calcular porcentaje de memoria
         const mem = Math.round(((response.memInfo.used * 100) / response.memInfo.total) * 100) / 100;
         let index = 0;
-        if (this.status.data[0].data.length > 0) {
-          index = this.status.data[0].data[this.status.data[0].data.length - 1][0] + 1;
+        if (this.status.datasets[0].data.length > 0) {
+          index = this.status.xData[this.status.datasets[0].data.length - 1] + 1;
         }
-        this.status.data[0].data.push([index, mem]);
-        this.status.data[1].data.push([index, response.cpu.usage]);
-        if (this.status.data[0].data.length > this.maxLength) {
-          this.status.data[0].data.shift();
-          this.status.data[1].data.shift();
+        this.status.datasets[0].data.push(mem);
+        this.status.datasets[1].data.push(response.cpu.usage);
+        this.status.xData.push(index);
+        if (this.status.datasets[0].data.length > this.maxLength) {
+          this.status.datasets[0].data.shift();
+          this.status.datasets[1].data.shift();
         }
       },
       (error) => {
diff --git a/admin/WebConsole3/frontend/src/app/pages/hardware-component/hardware-component.component.html b/admin/WebConsole3/frontend/src/app/pages/hardware-component/hardware-component.component.html
index bcbfd6c8..0ddd6b5c 100644
--- a/admin/WebConsole3/frontend/src/app/pages/hardware-component/hardware-component.component.html
+++ b/admin/WebConsole3/frontend/src/app/pages/hardware-component/hardware-component.component.html
@@ -1,36 +1,36 @@
-<section class="content-header">

-  <h1 translate="hardware">

-  </h1>

-  <ol class="breadcrumb">

-    <li><a [routerLink]="'app/dashboard'"><i class="fa fa-dashboard"></i> {{'dashboard'|translate}}</a></li>

-    <li><a [routerLink]="'app/hardware'"><i class="fa  fa-server"></i> {{'hardware'|translate}}</a></li>

-    <li class="active" translate="hardware_component"></li>

-  </ol>

-</section>

-<section fixed-toolboxbar class="toolboxbar">

-  <div>

-    <div class="col-md-12">

-      <div class="box-tools pull-right">

-        <button class="btn btn-primary" translate="save" ng-click="vm.save(Form)"></button>

-      </div>

-    </div>

-  </div>

-</section>

-<section class="content">

-  <div class="row">

-    <div class="col-md-12">

-      <div class="box box-primary">

-        <div class="box-header with-border">

-          <h3 ng-if="!vm.hardwareComponent.id" class="box-title" translate="new_hardware_component"></h3>

-          <h3 ng-if="vm.hardwareComponent.id" class="box-title" translate="hardware_component"></h3>

-        </div>

-        <div class="box-body">

-          <form role="form" gbn-auto-form name="Form" form-options="vm.formOptions" form-model="vm.hardwareComponent">

-

-          </form>

-        </div>

-      </div>

-    </div>

-

-  </div>

-</section>

+<section class="content-header">
+  <h1 translate="hardware">
+  </h1>
+  <ol class="breadcrumb">
+    <li><a [routerLink]="'/app/dashboard'"><i class="fa fa-dashboard"></i> {{'dashboard'|translate}}</a></li>
+    <li><a [routerLink]="'/app/hardware'"><i class="fa  fa-server"></i> {{'hardware'|translate}}</a></li>
+    <li class="active" translate="hardware_component"></li>
+  </ol>
+</section>
+<section fixed-toolboxbar class="toolboxbar">
+  <div>
+    <div class="col-md-12">
+      <div class="box-tools pull-right">
+        <button class="btn btn-primary" translate="save" ng-click="vm.save(Form)"></button>
+      </div>
+    </div>
+  </div>
+</section>
+<section class="content">
+  <div class="row">
+    <div class="col-md-12">
+      <div class="box box-primary">
+        <div class="box-header with-border">
+          <h3 ng-if="!vm.hardwareComponent.id" class="box-title" translate="new_hardware_component"></h3>
+          <h3 ng-if="vm.hardwareComponent.id" class="box-title" translate="hardware_component"></h3>
+        </div>
+        <div class="box-body">
+          <form role="form" gbn-auto-form name="Form" form-options="vm.formOptions" form-model="vm.hardwareComponent">
+
+          </form>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</section>
diff --git a/admin/WebConsole3/frontend/src/app/pages/image/image.component.html b/admin/WebConsole3/frontend/src/app/pages/image/image.component.html
index b56f0344..09ba6036 100644
--- a/admin/WebConsole3/frontend/src/app/pages/image/image.component.html
+++ b/admin/WebConsole3/frontend/src/app/pages/image/image.component.html
@@ -1,56 +1,56 @@
-<ng-container>

-  <section class="content-header">

-    <h1 translate="images">

-    </h1>

-    <ol class="breadcrumb">

-      <li><a [routerLink]="'app/dashboard'"><i class="fa fa-dashboard"></i> {{'dashboard'|translate}}</a></li>

-      <li class="active" translate="images"></li>

-    </ol>

-  </section>

-  <section fixed-toolboxbar class="toolboxbar">

-    <div class="row">

-      <div class="col-10">

-        <div class="input-group">

-          <input type="text" name="q" class="form-control" placeholder="{{'search'|translate}}..." ng-model="vm.ngTableSearch.text">

-          <span class="input-group-btn">

-            <button type="button" name="search" id="search-btn" class="btn btn-flat btn-default"><i class="fa fa-search"></i>

-            </button>

-          </span>

-        </div>

-      </div>

-      <div class="col-2" style="margin-top: 5px;margin-bottom: 5px;">

-        <div class="box-tools">

-          <mk-dropdown class="btn-group" [isWrapper]="false" >

-            <mk-dropdown-toggle>

-                <span translate="new"></span><span class="caret"></span>

-            </mk-dropdown-toggle>

-            <mk-dropdown-menu>

-              <li role="presentation"><a role="menuitem" tabindex="-1" [routerLink]="'app/images/create/monolithic'" translate="monolithic_image"></a></li>

-              <li role="presentation"><a role="menuitem" tabindex="-1" [routerLink]="'app/images/create/basic'"  translate="basic_image"></a></li>

-            </mk-dropdown-menu>

-          </mk-dropdown>

-        </div>

-      </div>

-    </div>

-  </section>

-  <!-- Main content -->

-  <section class="content">

-    <div class="row">

-      <div class="col-md-12">

-        <!-- Info boxes -->

-        <div class="box box-primary">

-          <div class="box-header with-border">

-            <h3 class="box-title" translate="image_list"></h3>

-          </div>

-          <div class="box-body">

-            <ng2-smart-table [source]="images" [settings]="tableSettings"></ng2-smart-table>

-          </div>

-          <div class="box-footer">

-          </div>

-          <!-- /.col -->

-        </div>

-      </div>

-    </div>

-    <!-- /.row -->

-  </section>

-</ng-container>

+<ng-container>
+  <section class="content-header">
+    <h1 translate="images">
+    </h1>
+    <ol class="breadcrumb">
+      <li><a [routerLink]="'/app/dashboard'"><i class="fa fa-dashboard"></i> {{'dashboard'|translate}}</a></li>
+      <li class="active" translate="images"></li>
+    </ol>
+  </section>
+  <section fixed-toolboxbar class="toolboxbar">
+    <div class="row">
+      <div class="col-10">
+        <div class="input-group">
+          <input type="text" name="q" class="form-control" placeholder="{{'search'|translate}}..." ng-model="vm.ngTableSearch.text">
+          <span class="input-group-btn">
+            <button type="button" name="search" id="search-btn" class="btn btn-flat btn-default"><i class="fa fa-search"></i>
+            </button>
+          </span>
+        </div>
+      </div>
+      <div class="col-2" style="margin-top: 5px;margin-bottom: 5px;">
+        <div class="box-tools">
+          <mk-dropdown class="btn-group" [isWrapper]="false" >
+            <mk-dropdown-toggle>
+                <span translate="new"></span><span class="caret"></span>
+            </mk-dropdown-toggle>
+            <mk-dropdown-menu>
+              <li role="presentation"><a role="menuitem" tabindex="-1" [routerLink]="'/app/images/create/monolithic'" translate="monolithic_image"></a></li>
+              <li role="presentation"><a role="menuitem" tabindex="-1" [routerLink]="'/app/images/create/basic'"  translate="basic_image"></a></li>
+            </mk-dropdown-menu>
+          </mk-dropdown>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- Main content -->
+  <section class="content">
+    <div class="row">
+      <div class="col-md-12">
+        <!-- Info boxes -->
+        <div class="box box-primary">
+          <div class="box-header with-border">
+            <h3 class="box-title" translate="image_list"></h3>
+          </div>
+          <div class="box-body">
+            <ng2-smart-table [source]="images" [settings]="tableSettings"></ng2-smart-table>
+          </div>
+          <div class="box-footer">
+          </div>
+          <!-- /.col -->
+        </div>
+      </div>
+    </div>
+    <!-- /.row -->
+  </section>
+</ng-container>
diff --git a/admin/WebConsole3/frontend/src/app/pages/login/login.component.html b/admin/WebConsole3/frontend/src/app/pages/login/login.component.html
index 3f4f0eab..0db08e4a 100644
--- a/admin/WebConsole3/frontend/src/app/pages/login/login.component.html
+++ b/admin/WebConsole3/frontend/src/app/pages/login/login.component.html
@@ -2,7 +2,7 @@
 <div class="hold-transition login-page">
   <div class="login-box">
     <div class="login-logo">
-      <a routerLink="/"><b>Admin</b>LTE</a>
+      <a routerLink="/"><b>OpenGnsys</b> Console</a>
     </div>
     <!-- /.login-logo -->
     <div class="login-box-body">
@@ -19,12 +19,13 @@
         </div>
         <div class="row">
           <div class="col-xs-8">
-            <input type="checkbox" icheck class="icheckbox_square-blue">
-            <div class="checkbox icheck">
-              <label>
-                Remember Me
-              </label>
+            <div style="float: left">
+              <input type="checkbox" icheck class="icheckbox_square-blue">
             </div>
+            <label>
+              <span  translate="REMEMBER_ME">Remember Me</span>
+            </label>
+
           </div>
           <!-- /.col -->
           <div class="col-xs-4">
diff --git a/admin/WebConsole3/frontend/src/app/pages/login/login.component.scss b/admin/WebConsole3/frontend/src/app/pages/login/login.component.scss
index 8ced9f51..fe31dbaa 100644
--- a/admin/WebConsole3/frontend/src/app/pages/login/login.component.scss
+++ b/admin/WebConsole3/frontend/src/app/pages/login/login.component.scss
@@ -1,6 +1,17 @@
-login {

-  .login-page {

-    overflow: hidden;

-    min-height: 100%;

-  }

-}

+app-login {
+  .login-page {
+    overflow: hidden;
+    min-height: 100%;
+    position: absolute;
+    width: 100%;
+    background: white;
+  }
+
+  .login-box {
+    border: 1px solid;
+  }
+
+  .login-logo {
+    background: #d2d6de;
+  }
+}
diff --git a/admin/WebConsole3/frontend/src/app/pages/login/login.component.ts b/admin/WebConsole3/frontend/src/app/pages/login/login.component.ts
index 59130b16..60e5d962 100644
--- a/admin/WebConsole3/frontend/src/app/pages/login/login.component.ts
+++ b/admin/WebConsole3/frontend/src/app/pages/login/login.component.ts
@@ -1,43 +1,47 @@
-import {Component, NgZone} from '@angular/core';

-import {AuthModule, GlobunetUser} from 'globunet-angular/core';

-import {Router} from '@angular/router';

-

-

-@Component({

-  selector: 'app-login',

-  templateUrl: './login.component.html',

-  styleUrls: [ './login.component.scss' ]

-})

-export class LoginComponent {

-  private user: GlobunetUser;

-  login = {

-    username: '',

-    password: ''

-  };

-  // this tells the tabs component which Pages

-  // should be each tab's root Page

-  constructor(public authModule: AuthModule, private router: Router) {

-    this.user = new GlobunetUser();

-  }

-

-  goToDashboard() {

-    this.router.navigate(['/app/dashboard']).then(

-      success => {

-        console.log(success);

-      },

-      error => {

-        console.log(error);

-      }

-    );

-

-  }

-

-  signIn() {

-    this.authModule.login(this.login.username, this.login.password, this.user).subscribe(

-      data => {

-          this.user = data;

-          this.goToDashboard();

-      }

-    );

-  }

-}

+import {Component, NgZone, ViewEncapsulation} from '@angular/core';
+import {AuthModule, GlobunetUser} from 'globunet-angular/core';
+import {Router} from '@angular/router';
+import {User} from '../../model/user';
+
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: [ './login.component.scss' ]
+})
+export class LoginComponent {
+  private user: GlobunetUser;
+  login = {
+    username: '',
+    password: ''
+  };
+  // this tells the tabs component which Pages
+  // should be each tab's root Page
+  constructor(public authModule: AuthModule, private router: Router) {
+    this.user = new GlobunetUser();
+    if (this.authModule.getLoggedUser(new User()).id !== 0) {
+      this.goToDashboard();
+    }
+  }
+
+  goToDashboard() {
+    this.router.navigate(['/app/dashboard']).then(
+      success => {
+        console.log(success);
+      },
+      error => {
+        console.log(error);
+      }
+    );
+
+  }
+
+  signIn() {
+    this.authModule.login(this.login.username, this.login.password, this.user).subscribe(
+      data => {
+          this.user = data;
+          this.goToDashboard();
+      }
+    );
+  }
+}
diff --git a/admin/WebConsole3/frontend/src/app/pages/organizational-unit/edit/organizational-unit-edit.component.css b/admin/WebConsole3/frontend/src/app/pages/organizational-unit/edit/organizational-unit-edit.component.css
new file mode 100644
index 00000000..9ecf6604
--- /dev/null
+++ b/admin/WebConsole3/frontend/src/app/pages/organizational-unit/edit/organizational-unit-edit.component.css
@@ -0,0 +1,4 @@
+::ng-deep .dropdown-menu .icheck {
+  float: left;
+}
+
diff --git a/admin/WebConsole3/frontend/src/app/pages/organizational-unit/edit/organizational-unit-edit.component.html b/admin/WebConsole3/frontend/src/app/pages/organizational-unit/edit/organizational-unit-edit.component.html
new file mode 100644
index 00000000..5b721246
--- /dev/null
+++ b/admin/WebConsole3/frontend/src/app/pages/organizational-unit/edit/organizational-unit-edit.component.html
@@ -0,0 +1,127 @@
+<section class="content-header">
+  <h1>
+    <span translate="ou"></span> {{ou.name}}
+  </h1>
+  <ol class="breadcrumb">
+    <li><a [routerLink]="'/app/dashboard'"><i class="fa fa-dashboard"></i> {{'dashboard'|translate}}</a></li>
+    <li><a [routerLink]="'/app/ous'" ><i class="fa fa-th"></i> {{'ous'|translate}}</a></li>
+    <li class="active" translate="ou"></li>
+  </ol>
+</section>
+<section fixed-toolboxbar class="toolboxbar">
+  <div>
+    <div class="col-md-12">
+      <div class="box-tools pull-right">
+        <button class="btn btn-primary" translate="save" (click)="save()"></button>
+      </div>
+    </div>
+  </div>
+</section>
+<section class="content">
+  <!-- /.row -->
+  <div class="row">
+    <form role="form" name="ouForm">
+      <div class="col-lg-12">
+        <div class="panel panel-primary">
+          <div class="panel-heading" translate="main_options">
+          </div>
+          <div class="panel-body">
+            <div class="form-group" ng-class="{'has-error':ouForm.name.$dirty && ouForm.name.$invalid, 'has-success':ouForm.name.$valid}">
+              <label translate="name"></label>
+              <input [(ngModel)]="ou.name" name="name" required="true" class="form-control">
+            </div>
+            <div class="form-group">
+              <label translate="description"></label>
+              <textarea [(ngModel)]="ou.description" name="description" class="form-control"></textarea>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-lg-12">
+        <div class="panel panel-primary">
+          <div class="panel-heading" translate="connectivity_options">
+          </div>
+          <div class="panel-body">
+            <div>
+              <div class="col-md-4 form-group" ng-class="{'has-error':ouForm.router.$dirty && ouForm.router.$invalid, 'has-success':ouForm.router.$valid}" >
+                <label translate="router_ip"></label>
+                <input type="text" name="router" required="true" [(ngModel)]="ou.networkSettings.router" class="form-control">
+              </div>
+              <div class="col-md-4 form-group" ng-class="{'has-error':ouForm.netmask.$dirty && ouForm.netmask.$invalid, 'has-success':ouForm.netmask.$valid}" >
+                <label translate="netmask"></label>
+                <input type="text" name="netmask" required="true" [(ngModel)]="ou.networkSettings.netmask" class="form-control">
+              </div>
+              <div class="col-md-4 form-group" ng-class="{'has-error':ouForm.proxy.$dirty && ouForm.proxy.$invalid, 'has-success':ouForm.proxy.$valid}">
+                <label translate="proxy"></label> (<span translate="optional"></span>)
+                <input type="text" name="proxy" [(ngModel)]="ou.networkSettings.proxy" class="form-control">
+              </div>
+            </div>
+            <div class="form-group">
+              <div class="col-md-4 form-group" ng-class="{'has-error':ouForm.dns.$dirty && ouForm.dns.$invalid, 'has-success':ouForm.dns.$valid}" >
+                <label translate="dns"></label> (<span translate="optional"></span>)
+                <input type="text" name="dns" [(ngModel)]="ou.networkSettings.dns" class="form-control">
+              </div>
+              <div class="col-md-4 form-group" ng-class="{'has-error':ouForm.ntp.$dirty && ouForm.ntp.$invalid, 'has-success':ouForm.ntp.$valid}">
+                <label translate="ntp"></label> (<span translate="optional"></span>)
+                <input type="text" name="ntp" [(ngModel)]="ou.networkSettings.ntp" class="form-control">
+                <p class="help-block" translate="ntp_hint"></p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-lg-12">
+        <div class="panel panel-primary">
+          <div class="panel-heading" translate="multicast_options">
+          </div>
+          <div class="panel-body">
+            <div>
+              <div class="col-md-3 form-group" ng-class="{'has-error':ouForm.mcastMode.$dirty && ouForm.mcastMode.$invalid, 'has-success':ouForm.mcastMode.$valid}" >
+                <label translate="multicast_mode"></label>
+                <select name="mcastMode" required="true" [(ngModel)]="ou.networkSettings.mcastMode" class="form-control">
+                  <option *ngFor="let mode of constants.ou.options.multicast.modes" [value]="mode">{{mode}}</option>
+                </select>
+              </div>
+              <div class="col-md-3 form-group" ng-class="{'has-error':ouForm.mcastIp.$dirty && ouForm.mcastIp.$invalid, 'has-success':ouForm.mcastIp.$valid}" >
+                <label translate="multicast_ip"></label>
+                <input name="mcastIp" required="true" type="text" [(ngModel)]="ou.networkSettings.mcastIp" class="form-control">
+                <p class="help-block">Ej. 239.194.{{getMcastIpExpample(ou.networkSettings.router)}}</p>
+              </div>
+              <div class="col-md-3 form-group" ng-class="{'has-error':ouForm.mcastPort.$dirty && ouForm.mcastPort.$invalid, 'has-success':ouForm.mcastPort.$valid}" >
+                <label translate="multicast_port"></label>
+                <select name="mcastPort" required="true" [(ngModel)]="ou.networkSettings.mcastPort" class="form-control">
+                  <option *ngFor="let port of constants.ou.options.multicast.ports()" [value]="port" >{{port}}</option>
+                </select>
+              </div>
+              <div class="col-md-3 form-group" ng-class="{'has-error':ouForm.mcastSpeed.$dirty && ouForm.mcastSpeed.$invalid, 'has-success':ouForm.mcastSpeed.$valid}" >
+                <label translate="multicast_speed"></label>
+                <input name="mcastSpeed" required="true" type="text" [(ngModel)]="ou.networkSettings.mcastSpeed" class="form-control">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-lg-12">
+        <div class="panel panel-primary">
+          <div class="panel-heading" translate="p2p_options">
+          </div>
+          <div class="panel-body">
+            <div>
+              <div class="col-md-6 form-group" ng-class="{'has-error':ouForm.p2pMode.$dirty && ouForm.p2pMode.$invalid, 'has-success':ouForm.p2pMode.$valid}" >
+                <label translate="p2p_mode"></label>
+                <select name="p2pMode" required="true" [(ngModel)]="ou.networkSettings.p2pMode" class="form-control">
+                  <option *ngFor="let mode of constants.ou.options.p2p.modes" [value]="mode">{{mode}}</option>
+                </select>
+              </div>
+              <div class="col-md-6 form-group" ng-class="{'has-error':ouForm.p2pTime.$dirty && ouForm.p2pTime.$invalid, 'has-success':ouForm.p2pTime.$valid}" >
+                <label translate="p2p_time"></label>
+                <input name="p2pTime" required="true" type="text" [(ngModel)]="ou.networkSettings.p2pTime" class="form-control">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </form>
+  </div>
+</section>
diff --git a/admin/WebConsole3/frontend/src/app/pages/organizational-unit/edit/organizational-unit-edit.component.ts b/admin/WebConsole3/frontend/src/app/pages/organizational-unit/edit/organizational-unit-edit.component.ts
new file mode 100644
index 00000000..b65f60b0
--- /dev/null
+++ b/admin/WebConsole3/frontend/src/app/pages/organizational-unit/edit/organizational-unit-edit.component.ts
@@ -0,0 +1,103 @@
+import {Component, OnInit} from '@angular/core';
+
+import { OrganizationalUnitService } from 'src/app/api/organizational-unit.service';
+import {NetworkSettings, OrganizationalUnit} from 'src/app/model/organizational-unit';
+import {OgCommonService} from '../../../service/og-common.service';
+import {AuthModule} from 'globunet-angular/core';
+import {ClientService} from '../../../api/client.service';
+import {OgSweetAlertService} from '../../../service/og-sweet-alert.service';
+import {ToasterService} from '../../../service/toaster.service';
+import {TranslateService} from '@ngx-translate/core';
+import {ActivatedRoute, Router} from '@angular/router';
+import {OrganizationalUnitFormType} from '../../../form-type/organizational-unit.form-type';
+import {Observable} from 'rxjs';
+
+@Component({
+  selector: 'app-organizational-unit',
+  templateUrl: './organizational-unit-edit.component.html',
+  styleUrls: [ './organizational-unit-edit.component.css' ]
+})
+export class OrganizationalUnitEditComponent implements OnInit {
+  public formType: any;
+  ou: OrganizationalUnit;
+  constants: any;
+
+  // this tells the tabs component which Pages
+  // should be each tab's root Page
+  constructor(private authModule: AuthModule,
+              private ogCommonService: OgCommonService,
+              private organizationalUnitService: OrganizationalUnitService,
+              private clientService: ClientService,
+              private router: Router,
+              private activatedRoute: ActivatedRoute,
+              private translate: TranslateService,
+              private ogSweetAlert: OgSweetAlertService,
+              private toaster: ToasterService) {
+      this.ou = new OrganizationalUnit();
+  }
+
+  ngOnInit(): void {
+      this.ogCommonService.loadEngineConfig().subscribe(
+          data => {
+              this.constants = data.constants;
+              this.formType = new OrganizationalUnitFormType().getForm();
+              this.activatedRoute.paramMap.subscribe(
+                  (route: any) => {
+                      if (route.params.id) {
+                          this.organizationalUnitService.read(route.params.id).subscribe(
+                              response => {
+                                  this.ou = response;
+                              },
+                              error => {
+                                  this.toaster.pop({type: 'error', title: 'error', body: error});
+                              }
+                          );
+                      } else {
+                          this.ou = new OrganizationalUnit();
+                          this.ou.networkSettings = new NetworkSettings();
+                          this.ou.networkSettings.p2pMode = this.constants.ou.options.p2p.modes[0];
+                          this.ou.networkSettings.mcastMode = this.constants.ou.options.multicast.modes[0];
+                      }
+                  }
+              );
+          }
+      );
+
+  }
+
+  save() {
+    let request: Observable<OrganizationalUnit>;
+
+    // comprobar si necesita una ou "padre"
+      this.activatedRoute.queryParams.subscribe(
+          query => {
+              if (query.parent) {
+                  this.ou.parent = query.parent;
+              }
+              if (this.ou.id !== 0) {
+                  request = this.organizationalUnitService.update(this.ou);
+              } else {
+                  request = this.organizationalUnitService.create(this.ou);
+              }
+              request.subscribe(
+                  data => {
+                      this.router.navigate(['/app/ous']);
+
+                      this.toaster.pop({type: 'success', title: 'success', body: 'Successfully saved'});
+                  },
+                  error => {
+                      this.toaster.pop({type: 'error', title: 'error', body: error});
+                  }
+              );
+          }
+      );
+  }
+
+    getMcastIpExpample(router: string) {
+        let result = '';
+        if (router && router.split('.').length > 2) {
+            result = router.split('.')[1] + '.' + router.split('.')[2];
+        }
+        return result;
+    }
+}
diff --git a/admin/WebConsole3/frontend/src/app/pages/organizational-unit/organizational-unit.component.ts b/admin/WebConsole3/frontend/src/app/pages/organizational-unit/organizational-unit.component.ts
index 4618668a..8a59d77b 100644
--- a/admin/WebConsole3/frontend/src/app/pages/organizational-unit/organizational-unit.component.ts
+++ b/admin/WebConsole3/frontend/src/app/pages/organizational-unit/organizational-unit.component.ts
@@ -1,193 +1,197 @@
-import {Component, OnDestroy, OnInit} from '@angular/core';

-

-import { OrganizationalUnitService } from 'src/app/api/organizational-unit.service';

-import { OrganizationalUnit } from 'src/app/model/organizational-unit';

-import {OgCommonService} from '../../service/og-common.service';

-import {AuthModule} from 'globunet-angular/core';

-import {ClientService} from '../../api/client.service';

-import {forkJoin, Observable} from 'rxjs';

-import {OgSweetAlertService} from '../../service/og-sweet-alert.service';

-import {ToasterService} from '../../service/toaster.service';

-import {TranslateService} from '@ngx-translate/core';

-import {Router} from '@angular/router';

-import * as _ from 'lodash';

-import {environment} from '../../../environments/environment';

-

-@Component({

-  selector: 'app-organizational-unit',

-  templateUrl: './organizational-unit.component.html',

-  styleUrls: [ './organizational-unit.component.css' ]

-})

-export class OrganizationalUnitComponent implements OnInit, OnDestroy {

-  public config: any;

-  public ous: OrganizationalUnit[];

-  public movingClients: boolean;

-  public options: { scope: { moveChildren: boolean } };

-  public searchText: any;

-  public user: any;

-  public selectedStatus: any[] = [];

-  public clientStatus: any;

-

-  // this tells the tabs component which Pages

-  // should be each tab's root Page

-  constructor(private authModule: AuthModule,

-              private ogCommonService: OgCommonService,

-              private organizationalUnitService: OrganizationalUnitService,

-              private clientService: ClientService,

-              private router: Router,

-              private translate: TranslateService,

-              private ogSweetAlert: OgSweetAlertService,

-              private toaster: ToasterService) {

-    this.clientStatus = [];

-  }

-

-  ngOnDestroy(): void {

-    if (this.config.timers && this.config.timers.clientsStatusInterval) {

-      clearInterval(this.config.timers.clientsStatusInterval.object);

-    }

-  }

-

-  ngOnInit(): void {

-    this.ogCommonService.loadEngineConfig().subscribe(

-        data => {

-          this.config = data;

-          this.user = this.authModule.getLoggedUser();

-          this.user.preferences = this.user.preferences || environment.user.preferences;

-

-          for (let index = 0; index < this.config.constants.clientstatus.length; index++) {

-            this.selectedStatus[this.config.constants.clientstatus[index].id] = true;

-          }

-          let request = null;

-          if (this.user.ou && this.user.ou.id) {

-            // @ts-ignore

-            request = this.organizationalUnitService.read(this.user.ou.id + '?children=1');

-          } else {

-            request = this.organizationalUnitService.list();

-          }

-

-          request.subscribe(

-            (response) => {

-              this.ous = Array.isArray(response) ? response : [response];

-              // La primera vez que entra

-              if (this.config.timers.clientsStatusInterval.object == null) {

-                this.getClientStatus();

-                const self = this;

-                this.config.timers.clientsStatusInterval.object = window.setInterval(function() {

-                  self.getClientStatus();

-                }, this.config.timers.clientsStatusInterval.tick);

-              } else {

-                this.getClientStatus();

-              }

-

-            },

-            (error) => {

-              // TODO error

-              alert(error);

-            }

-          );

-

-        }

-    );

-

-

-

-  }

-

-  showGrid(show) {

-    this.user.preferences.ous.showGrid = show;

-    localStorage.setItem('user', JSON.stringify(this.user));

-  }

-

-  getClientStatus() {

-    let promises = [];

-    for (let index = 0; index < this.ous.length; index++) {

-      promises = promises.concat(this.getOuClientStatus(this.ous[index]));

-    }

-

-    forkJoin(promises).subscribe(

-      response => {

-        for (let p = 0; p < response.length; p++) {

-          // @ts-ignore

-          for (let elem = 0; elem < response[p].length; elem++) {

-            this.clientStatus[response[p][elem].id] = response[p][elem].status;

-          }

-        }

-      },

-      (error) => {

-        // TODO

-        console.log(error);

-      }

-    );

-  }

-

-  private getOuClientStatus(ou): Observable<any>[] {

-    let promises = [];

-    promises.push(this.clientService.statusAll(ou.id));

-    if (ou.children ) {

-      for (let index = 0; index < ou.children.length; index++) {

-        promises = promises.concat(this.getOuClientStatus(ou.children[index]));

-      }

-    }

-    return promises;

-  }

-

-  getGroup(classroomGroups, groupId) {

-    let found = false;

-    let result = null;

-    let index = 0;

-    while (!found && index < classroomGroups.length) {

-      if (classroomGroups[index].id === groupId) {

-        found = true;

-        result = classroomGroups[index];

-      } else if (classroomGroups[index].classroomGroups.length > 0) {

-        result = this.getGroup(classroomGroups[index].classroomGroups, groupId);

-        if (result != null) {

-          found = true;

-        }

-      }

-      index++;

-    }

-    return result;

-  }

-

-

-  selectClients(clients, selected) {

-    if (typeof clients !== 'undefined') {

-      for (let index = 0; index < clients.length; index++) {

-        clients[index].selected = selected;

-      }

-    }

-  }

-

-  selectGroup(group, selected) {

-    group.selected = selected;

-    this.selectClients(group.clients, selected);

-    for (let index = 0; index < group.classroomGroups.length; index++) {

-      this.selectGroup(group.classroomGroups[index], selected);

-    }

-  }

-

-

-  editGroupName(group) {

-    group.name = group.tmpName;

-    delete group.tmpName;

-    group.editing = true;

-  }

-

-

-  transformToTree(arr) {

-    const nodes = {};

-    return arr.filter(function(obj) {

-      const id = obj.id;

-      const parentId = obj.parent ? obj.parent.id : undefined;

-

-      nodes[id] = _.defaults(obj, nodes[id], { groups: [] });

-      if (parentId) {

-        (nodes[parentId] = (nodes[parentId] || {groups: []}))['groups'].push(obj);

-      }

-

-      return !parentId;

-    });

-  }

-

-}

+import {Component, OnDestroy, OnInit} from '@angular/core';
+
+import { OrganizationalUnitService } from 'src/app/api/organizational-unit.service';
+import { OrganizationalUnit } from 'src/app/model/organizational-unit';
+import {OgCommonService} from '../../service/og-common.service';
+import {AuthModule} from 'globunet-angular/core';
+import {ClientService} from '../../api/client.service';
+import {forkJoin, Observable} from 'rxjs';
+import {OgSweetAlertService} from '../../service/og-sweet-alert.service';
+import {ToasterService} from '../../service/toaster.service';
+import {TranslateService} from '@ngx-translate/core';
+import {Router} from '@angular/router';
+import * as _ from 'lodash';
+import {environment} from '../../../environments/environment';
+
+@Component({
+  selector: 'app-organizational-unit',
+  templateUrl: './organizational-unit.component.html',
+  styleUrls: [ './organizational-unit.component.css' ]
+})
+export class OrganizationalUnitComponent implements OnInit, OnDestroy {
+  public config: any;
+  public ous: OrganizationalUnit[];
+  public movingClients: boolean;
+  public options: { scope: { moveChildren: boolean } };
+  public searchText: any;
+  public user: any;
+  public selectedStatus: any[] = [];
+  public clientStatus: any;
+
+  // this tells the tabs component which Pages
+  // should be each tab's root Page
+  constructor(private authModule: AuthModule,
+              private ogCommonService: OgCommonService,
+              private organizationalUnitService: OrganizationalUnitService,
+              private clientService: ClientService,
+              private router: Router,
+              private translate: TranslateService,
+              private ogSweetAlert: OgSweetAlertService,
+              private toaster: ToasterService) {
+    this.user = this.authModule.getLoggedUser();
+    this.user.preferences = this.user.preferences || environment.user.preferences;
+    this.clientStatus = [];
+    this.config = {
+      constants: {
+        clientstatus: []
+      }
+    };
+  }
+
+  ngOnDestroy(): void {
+    if (this.config.timers && this.config.timers.clientsStatusInterval) {
+      clearInterval(this.config.timers.clientsStatusInterval.object);
+    }
+  }
+
+  ngOnInit(): void {
+    this.ogCommonService.loadEngineConfig().subscribe(
+        data => {
+          this.config = data;
+
+          for (let index = 0; index < this.config.constants.clientstatus.length; index++) {
+            this.selectedStatus[this.config.constants.clientstatus[index].id] = true;
+          }
+          let request = null;
+          if (this.user.ou && this.user.ou.id) {
+            // @ts-ignore
+            request = this.organizationalUnitService.read(this.user.ou.id + '?children=1');
+          } else {
+            request = this.organizationalUnitService.list();
+          }
+
+          request.subscribe(
+            (response) => {
+              this.ous = Array.isArray(response) ? response : [response];
+              // La primera vez que entra
+              if (this.config.timers.clientsStatusInterval.object == null) {
+                this.getClientStatus();
+                const self = this;
+                this.config.timers.clientsStatusInterval.object = window.setInterval(function() {
+                  self.getClientStatus();
+                }, this.config.timers.clientsStatusInterval.tick);
+              } else {
+                this.getClientStatus();
+              }
+
+            },
+            (error) => {
+              // TODO error
+              alert(error);
+            }
+          );
+
+        }
+    );
+
+
+
+  }
+
+  showGrid(show) {
+    this.user.preferences.ous.showGrid = show;
+    localStorage.setItem('user', JSON.stringify(this.user));
+  }
+
+  getClientStatus() {
+    let promises = [];
+    for (let index = 0; index < this.ous.length; index++) {
+      promises = promises.concat(this.getOuClientStatus(this.ous[index]));
+    }
+
+    forkJoin(promises).subscribe(
+        (response: any[]) => {
+        for (let p = 0; p < response.length; p++) {
+          for (let elem = 0; elem < response[p].length; elem++) {
+            this.clientStatus[response[p][elem].id] = response[p][elem].status;
+          }
+        }
+      },
+      (error) => {
+        // TODO
+        console.log(error);
+      }
+    );
+  }
+
+  private getOuClientStatus(ou): Observable<any>[] {
+    let promises = [];
+    promises.push(this.clientService.statusAll(ou.id));
+    if (ou.children ) {
+      for (let index = 0; index < ou.children.length; index++) {
+        promises = promises.concat(this.getOuClientStatus(ou.children[index]));
+      }
+    }
+    return promises;
+  }
+
+  getGroup(classroomGroups, groupId) {
+    let found = false;
+    let result = null;
+    let index = 0;
+    while (!found && index < classroomGroups.length) {
+      if (classroomGroups[index].id === groupId) {
+        found = true;
+        result = classroomGroups[index];
+      } else if (classroomGroups[index].classroomGroups.length > 0) {
+        result = this.getGroup(classroomGroups[index].classroomGroups, groupId);
+        if (result != null) {
+          found = true;
+        }
+      }
+      index++;
+    }
+    return result;
+  }
+
+
+  selectClients(clients, selected) {
+    if (typeof clients !== 'undefined') {
+      for (let index = 0; index < clients.length; index++) {
+        clients[index].selected = selected;
+      }
+    }
+  }
+
+  selectGroup(group, selected) {
+    group.selected = selected;
+    this.selectClients(group.clients, selected);
+    for (let index = 0; index < group.classroomGroups.length; index++) {
+      this.selectGroup(group.classroomGroups[index], selected);
+    }
+  }
+
+
+  editGroupName(group) {
+    group.name = group.tmpName;
+    delete group.tmpName;
+    group.editing = true;
+  }
+
+
+  transformToTree(arr) {
+    const nodes = {};
+    return arr.filter(function(obj) {
+      const id = obj.id;
+      const parentId = obj.parent ? obj.parent.id : undefined;
+
+      nodes[id] = _.defaults(obj, nodes[id], { groups: [] });
+      if (parentId) {
+        (nodes[parentId] = (nodes[parentId] || {groups: []}))['groups'].push(obj);
+      }
+
+      return !parentId;
+    });
+  }
+
+}
diff --git a/admin/WebConsole3/frontend/src/app/pages/organizational-unit/ou-clients/ou-client.component.html b/admin/WebConsole3/frontend/src/app/pages/organizational-unit/ou-clients/ou-client.component.html
index a39e413d..86508a31 100644
--- a/admin/WebConsole3/frontend/src/app/pages/organizational-unit/ou-clients/ou-client.component.html
+++ b/admin/WebConsole3/frontend/src/app/pages/organizational-unit/ou-clients/ou-client.component.html
@@ -1,80 +1,80 @@
-<table *ngIf="showGrid == false && clients.length > 0" class="table table-hover table-no-border">

-  <thead>

-  <tr>

-    <th translate="select"></th>

-    <th translate="name"></th>

-    <th translate="ip"></th>

-    <th translate="mac"></th>

-    <th translate="status"></th>

-    <th translate="options"></th>

-  </tr>

-  </thead>

-  <tbody>

-  <!-- *ngIf="selectedStatus[client.status] == true" -->

-  <ng-container *ngFor="let client of clients; let index = index" >

-    <tr *ngIf='mustShow(client)' class="{{(index%2 == 0)?'odd':'even'}}">

-      <td>

-        <input icheck checkbox-class="icheckbox_square-blue" radio-class="iradio_square-blue" type="checkbox" class="selection-checkbox" [(ngModel)]="client.selected" (change)="selectClient(client)" />

-      </td>

-      <td>{{client.name}}</td>

-      <td>{{client.ip}}</td>

-      <td>{{client.mac}}</td>

-      <td>

-        <span class="badge client-color-{{clientStatus[client.id]}}">{{clientStatus[client.id] | translate}}</span>

-      </td>

-      <td class="right">

-        <div class="btn-group visible-md visible-lg hidden-sm hidden-xs">

-          <button class="btn btn-default " translate="edit" [routerLink]="'app/client.edit({ou: content.id, clientId: client.id})'"></button>

-          <button class="btn btn-danger " translate="delete" (click)="deleteClient(client)"></button>

-        </div>

-        <div class="btn-group hidden-md hidden-lg">

-          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">

-            <i class="fa fa-gear"></i>

-            <span class="caret"></span>

-            <span class="sr-only">Toggle Dropdown</span>

-          </button>

-          <ul class="dropdown-menu" role="menu">

-            <li class="btn-group-vertical">

-              <button class="btn btn-default" href="javascript:void(0)" translate="edit" [routerLink]="'app/client.edit({ou: content.id, clientId: client.id})'"></button>

-              <button class="btn btn-danger" href="javascript:void(0)" translate="delete" (click)="deleteClient(client)"></button>

-            </li>

-          </ul>

-        </div>

-      </td>

-    </tr>

-  </ng-container>

-  </tbody>

-</table>

-<div *ngIf="showGrid == true" class="box-body bg-lab">

-  <!-- *ngIf="selectedStatus[client.status] == true" -->

-  <div class="row">

-    <ng-container *ngFor="let client of ou.clients">

-      <div class="col-md-2 col-xs-6 padding-5">

-        <div class="info-box client " *ngIf="mustShow(client)">

-              <span style="position: absolute;">

-                <input icheck checkbox-class="icheckbox_square-blue" radio-class="iradio_square-blue" type="checkbox" class="selection-checkbox" [(ngModel)]="client.selected" (change)="selectClient(client)" />

-              </span>

-      <span class="info-box-icon">

-                      <i class="fa fa-desktop">

-                      </i>

-                      <small class="label client-color-{{clientStatus[client.id]}}">{{clientStatus[client.id] | translate}}</small>

-                    </span>

-      <div class="info-box-content">

-        <a href="javascript:void(0)" (click)="deleteClient(client)" class="small-box-footer pull-right">

-          <i class="fa fa-times"></i>

-        </a>

-        <span class="info-box-text">{{client.name}}</span>

-        <span class="info-box-text">{{client.ip}}</span>

-        <span class="info-box-text">{{client.mac}}</span>

-        <div class="btn-group pull-right">

-          <a href="javascript:void(0)" [routerLink]="'/app/clients/'+client.id+'/edita'" class="btn btn-xs small-box-footer">

-            <span translate="edit"></span> <i class="fa fa-arrow-circle-right"></i>

-          </a>

-        </div>

-      </div>

-      <!-- /.info-box-content -->

-    </div>

-      </div>

-    </ng-container>

-  </div>

-</div>

+<table *ngIf="showGrid == false && clients.length > 0" class="table table-hover table-no-border">
+  <thead>
+  <tr>
+    <th translate="select"></th>
+    <th translate="name"></th>
+    <th translate="ip"></th>
+    <th translate="mac"></th>
+    <th translate="status"></th>
+    <th translate="options"></th>
+  </tr>
+  </thead>
+  <tbody>
+  <!-- *ngIf="selectedStatus[client.status] == true" -->
+  <ng-container *ngFor="let client of clients; let index = index" >
+    <tr *ngIf='mustShow(client)' class="{{(index%2 == 0)?'odd':'even'}}">
+      <td>
+        <input icheck checkbox-class="icheckbox_square-blue" radio-class="iradio_square-blue" type="checkbox" class="selection-checkbox" [(ngModel)]="client.selected" (change)="selectClient(client)" />
+      </td>
+      <td>{{client.name}}</td>
+      <td>{{client.ip}}</td>
+      <td>{{client.mac}}</td>
+      <td>
+        <span class="badge client-color-{{clientStatus[client.id]}}">{{clientStatus[client.id] | translate}}</span>
+      </td>
+      <td class="right">
+        <div class="btn-group visible-md visible-lg hidden-sm hidden-xs">
+          <button class="btn btn-default " translate="edit" [routerLink]="'app/client.edit({ou: content.id, clientId: client.id})'"></button>
+          <button class="btn btn-danger " translate="delete" (click)="deleteClient(client)"></button>
+        </div>
+        <div class="btn-group hidden-md hidden-lg">
+          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+            <i class="fa fa-gear"></i>
+            <span class="caret"></span>
+            <span class="sr-only">Toggle Dropdown</span>
+          </button>
+          <ul class="dropdown-menu" role="menu">
+            <li class="btn-group-vertical">
+              <button class="btn btn-default" href="javascript:void(0)" translate="edit" [routerLink]="'app/client.edit({ou: content.id, clientId: client.id})'"></button>
+              <button class="btn btn-danger" href="javascript:void(0)" translate="delete" (click)="deleteClient(client)"></button>
+            </li>
+          </ul>
+        </div>
+      </td>
+    </tr>
+  </ng-container>
+  </tbody>
+</table>
+<div *ngIf="showGrid == true" class="box-body bg-lab">
+  <!-- *ngIf="selectedStatus[client.status] == true" -->
+  <div class="row">
+    <ng-container *ngFor="let client of ou.clients">
+      <div class="col-md-2 col-xs-6 padding-5">
+        <div class="info-box client " *ngIf="mustShow(client)">
+              <span style="position: absolute;">
+                <input icheck checkbox-class="icheckbox_square-blue" radio-class="iradio_square-blue" type="checkbox" class="selection-checkbox" [(ngModel)]="client.selected" (change)="selectClient(client)" />
+              </span>
+      <span class="info-box-icon">
+                      <i class="fa fa-desktop">
+                      </i>
+                      <small class="label client-color-{{clientStatus[client.id]}}">{{clientStatus[client.id] | translate}}</small>
+                    </span>
+      <div class="info-box-content">
+        <a href="javascript:void(0)" (click)="deleteClient(client)" class="small-box-footer pull-right">
+          <i class="fa fa-times"></i>
+        </a>
+        <span class="info-box-text">{{client.name}}</span>
+        <span class="info-box-text">{{client.ip}}</span>
+        <span class="info-box-text">{{client.mac}}</span>
+        <div class="btn-group pull-right">
+          <a href="javascript:void(0)" [routerLink]="'/app/clients/edit/'+client.id" class="btn btn-xs small-box-footer">
+            <span translate="edit"></span> <i class="fa fa-arrow-circle-right"></i>
+          </a>
+        </div>
+      </div>
+      <!-- /.info-box-content -->
+    </div>
+      </div>
+    </ng-container>
+  </div>
+</div>
diff --git a/admin/WebConsole3/frontend/src/app/pages/organizational-unit/ou-group/ou-group.component.html b/admin/WebConsole3/frontend/src/app/pages/organizational-unit/ou-group/ou-group.component.html
index 0e7562de..7f6a9cbf 100644
--- a/admin/WebConsole3/frontend/src/app/pages/organizational-unit/ou-group/ou-group.component.html
+++ b/admin/WebConsole3/frontend/src/app/pages/organizational-unit/ou-group/ou-group.component.html
@@ -1,51 +1,51 @@
-<button *ngIf="(ogCommonService.movingOu != null && ogCommonService.movingOu != content && !content.selectedForMove)" class="btn btn-box-tool" (click)="doMove()">

-  <i class="fa fa-level-down"></i>

-</button>

-<mk-box class="box box-default {{(ogCommonService.movingOu == content)?'bg-info':''}}"  [isRemovable]="false" >

-  <mk-box-header class="box-header with-border">

-    <h3 class="box-title bg-og">

-      <div class="btn-group ou-options">

-        <div class="ou-selector">

-          <input icheck checkbox-class="icheckbox_square-blue" radio-class="iradio_square-blue" type="checkbox" class="selection-checkbox" [(ngModel)]="content.selected" (change)="selectOu(content)"/>

-        </div>

-        <mk-dropdown>

-          <mk-dropdown-toggle>

-            <a href="javascript:void(0)" class="btn-flat" >{{content.name}}</a>

-          </mk-dropdown-toggle>

-          <mk-dropdown-menu>

-              <li role="presentation">

-                <a role="menuitem" tabindex="-1" [routerLink]="'app/ous.new({parent: content.id})'" translate="add_ou"></a>

-              </li>

-              <li role="presentation">

-                <a role="menuitem" tabindex="-1" [routerLink]="'app/client.new({ou: content.id})'" translate="add_client"></a>

-              </li>

-              <li role="presentation">

-                <a role="menuitem" tabindex="-1" [routerLink]="'app/client.dhcp({ou: content.id})'" translate="add_clients_from_dhcp"></a>

-              </li>

-              <li role="presentation" class="divider"></li>

-              <li>

-                <a class="" href="javascript:void(0)" translate="edit" [routerLink]="'app/ous.edit({ou: content.id})'"></a>

-              </li>

-              <li role="presentation" class="divider"></li>

-              <li role="presentation" class="delete-option">

-                <a class="" href="javascript:void(0)" translate="delete" (click)="deleteOu(content)"></a>

-              </li>

-          </mk-dropdown-menu>

-        </mk-dropdown>

-      </div>

-      <button *ngIf="(ogCommonService.movingOu != null && ogCommonService.movingOu != content && !content.selectedForMove)||(ogCommonService.movingClients == true)" class="btn btn-box-tool" (click)="doMove(content)">

-        <i class="fa fa-level-down"></i>

-      </button>

-      <div class="box-tools pull-right">

-        <button type="button" class="btn btn-box-tool" (click)="selectForMove(content)"><i class="fa fa-arrows"></i></button>

-      </div>

-    </h3>

-    <!-- /.box-tools -->

-  </mk-box-header>

-  <!-- /.box-header -->

-  <mk-box-content class="box-body folders" style="display: block;">

-    <app-ou-group-component *ngFor="let child of content.children" [content]="child" [ous]="ous" [clientStatus]="clientStatus" [selectedStatus]="selectedStatus" [showGrid]="showGrid"  ></app-ou-group-component>

-    <app-ou-client-component *ngIf="content.clients" [ou]="content" [clientStatus]="clientStatus" [showGrid]="showGrid" [selectedStatus]="selectedStatus"></app-ou-client-component>

-  </mk-box-content>

-  <!-- /.box-body -->

-</mk-box>

+<button *ngIf="(ogCommonService.movingOu != null && ogCommonService.movingOu != content && !content.selectedForMove)" class="btn btn-box-tool" (click)="doMove()">
+  <i class="fa fa-level-down"></i>
+</button>
+<mk-box class="box box-default {{(ogCommonService.movingOu == content)?'bg-info':''}}"  [isRemovable]="false" >
+  <mk-box-header class="box-header with-border">
+    <h3 class="box-title bg-og">
+      <div class="btn-group ou-options">
+        <div class="ou-selector">
+          <input icheck checkbox-class="icheckbox_square-blue" radio-class="iradio_square-blue" type="checkbox" class="selection-checkbox" [(ngModel)]="content.selected" (change)="selectOu(content)"/>
+        </div>
+        <mk-dropdown>
+          <mk-dropdown-toggle>
+            <a href="javascript:void(0)" class="btn-flat" >{{content.name}}</a>
+          </mk-dropdown-toggle>
+          <mk-dropdown-menu>
+              <li role="presentation">
+                <a role="menuitem" tabindex="-1" [routerLink]="['/app/ous/create']" [queryParams]="{'parent': content.id}" translate="add_ou"></a>
+              </li>
+              <li role="presentation">
+                <a role="menuitem" tabindex="-1" [routerLink]="['/app/clients/create']" [queryParams]="{'ou': content.id}" translate="add_client"></a>
+              </li>
+              <li role="presentation">
+                <a role="menuitem" tabindex="-1" [routerLink]="['/app/clients/dhcp']" [queryParams]="{'ou': content.id}" translate="add_clients_from_dhcp"></a>
+              </li>
+              <li role="presentation" class="divider"></li>
+              <li>
+                <a class="" href="javascript:void(0)" translate="edit" [routerLink]="['/app/ous/edit',content.id]"></a>
+              </li>
+              <li role="presentation" class="divider"></li>
+              <li role="presentation" class="delete-option">
+                <a class="" href="javascript:void(0)" translate="delete" (click)="deleteOu(content)"></a>
+              </li>
+          </mk-dropdown-menu>
+        </mk-dropdown>
+      </div>
+      <button *ngIf="(ogCommonService.movingOu != null && ogCommonService.movingOu != content && !content.selectedForMove)||(ogCommonService.movingClients == true)" class="btn btn-box-tool" (click)="doMove(content)">
+        <i class="fa fa-level-down"></i>
+      </button>
+      <div class="box-tools pull-right">
+        <button type="button" class="btn btn-box-tool" (click)="selectForMove(content)"><i class="fa fa-arrows"></i></button>
+      </div>
+    </h3>
+    <!-- /.box-tools -->
+  </mk-box-header>
+  <!-- /.box-header -->
+  <mk-box-content class="box-body folders" style="display: block;">
+    <app-ou-group-component *ngFor="let child of content.children" [content]="child" [ous]="ous" [clientStatus]="clientStatus" [selectedStatus]="selectedStatus" [showGrid]="showGrid"  ></app-ou-group-component>
+    <app-ou-client-component *ngIf="content.clients" [ou]="content" [clientStatus]="clientStatus" [showGrid]="showGrid" [selectedStatus]="selectedStatus"></app-ou-client-component>
+  </mk-box-content>
+  <!-- /.box-body -->
+</mk-box>
diff --git a/admin/WebConsole3/frontend/src/app/pages/organizational-unit/ou-group/ou-group.component.ts b/admin/WebConsole3/frontend/src/app/pages/organizational-unit/ou-group/ou-group.component.ts
index 8326d0b9..9d04c84e 100644
--- a/admin/WebConsole3/frontend/src/app/pages/organizational-unit/ou-group/ou-group.component.ts
+++ b/admin/WebConsole3/frontend/src/app/pages/organizational-unit/ou-group/ou-group.component.ts
@@ -1,227 +1,242 @@
-import {Component, EventEmitter, Input, Output} from '@angular/core';

-import {OrganizationalUnit} from '../../../model/organizational-unit';

-import {Client} from '../../../model/client';

-import {forkJoin, Observable} from 'rxjs';

-import {OrganizationalUnitService} from '../../../api/organizational-unit.service';

-import {OgSweetAlertService} from '../../../service/og-sweet-alert.service';

-import {ToasterService} from '../../../service/toaster.service';

-import {ClientService} from '../../../api/client.service';

-import {TranslateService} from '@ngx-translate/core';

-import {OgCommonService} from '../../../service/og-common.service';

-

-@Component({

-  selector: 'app-ou-group-component',

-  templateUrl: 'ou-group.component.html',

-  styleUrls: ['ou-group.component.css']

-})

-export class OuGroupComponent {

-  @Input() ous;

-  @Input() content;

-  @Input() clientStatus;

-  @Input() showGrid;

-  @Input() selectedStatus;

-

-  public config: any;

-

-  public moveChildren = false;

-

-  constructor(public ogCommonService: OgCommonService,

-              private organizationalUnitService: OrganizationalUnitService,

-              private clientService: ClientService,

-              private ogSweetAlert: OgSweetAlertService,

-              private toaster: ToasterService,

-              private translate: TranslateService) {

-  }

-

-  doMove(ou) {

-    // Comprobar si hay que mover clientes o una ou a la ou pasada por parametro

-    if (this.ogCommonService.movingOu != null) {

-      /**/

-      const id = ou ? ou.id : null;

-      const obj = new OrganizationalUnit();

-      // @ts-ignore

-      obj.id = this.ogCommonService.movingOu.id;

-      // @ts-ignore

-      obj.parent = id;

-      this.organizationalUnitService.update(obj).subscribe(

-        (response) => {

-          this.toaster.pop({type: 'success', title: 'success', body: 'Successfully moved'});

-          this.deleteOuFromModel(this.ous, this.ogCommonService.movingOu);

-          if (ou) {

-            ou.children.push(this.ogCommonService.movingOu);

-          } else {

-            this.ous.push(this.ogCommonService.movingOu);

-          }

-          this.ogCommonService.movingOu = null;

-        },

-        (error) => {

-          this.toaster.pop({type: 'error', title: 'error', body: error});

-        }

-      );

-      /**/

-

-    } else if (this.ogCommonService.movingClients === true) {

-      const clientIds = Object.keys(this.ogCommonService.selectedClients);

-      let cId = '';

-      const promises = [];

-      for (let i = 0; i < clientIds.length; i++) {

-        cId = clientIds[i];

-        const client = new Client();

-        // @ts-ignore

-        client.id = cId;

-        client.organizationalUnit = ou.id;

-        promises.push(this.clientService.update(client));

-      }

-      forkJoin(promises).subscribe(

-        (response)  => {

-          for (let i = 0; i < clientIds.length; i++) {

-            cId = clientIds[i];

-            this.deleteClientFromOu(this.ous, this.ogCommonService.selectedClients[cId]);

-            ou.clients.push(this.ogCommonService.selectedClients[cId]);

-            this.ogCommonService.selectClient(this.ogCommonService.selectedClients[cId], ou);

-          }

-          this.toaster.pop({type: 'success', title: 'success', body: 'Successfully moved'});

-          this.ogCommonService.movingClients = false;

-        },

-        (error) => {

-          this.toaster.pop({type: 'error', title: 'error', body: error});

-          this.ogCommonService.movingClients = false;

-        }

-      );

-    }

-  }

-

-  deleteOuFromModel(ous, ou) {

-    let found = false;

-    const nOus = ous.length;

-    let index = 0;

-    while (!found && index < nOus) {

-      if (ous[index] === ou) {

-        found = true;

-        ous.splice(index, 1);

-      } else if (ous[index].children.length > 0) {

-        found = this.deleteOuFromModel(ous[index].children, ou);

-      }

-      index++;

-    }

-    return found;

-  }

-

-  deleteClientFromOu(ous, client) {

-    let found = false;

-    const nOus = ous.length;

-    let index = 0;

-    while (!found && index < nOus) {

-      if (ous[index].id === client.parent.id) {

-        found = true;

-        const cIndex = ous[index].clients.indexOf(client);

-        if (cIndex !== -1) {

-          ous[index].clients.splice(cIndex, 1);

-        }

-      } else if (ous[index].children.length > 0) {

-        found = this.deleteClientFromOu(ous[index].children, client);

-      }

-      index++;

-    }

-    return found;

-  }

-

-  selectForMove(content) {

-    this.ogCommonService.selectForMove(content);

-  }

-

-  selectOu(ou) {

-    // seleccionar/deseleccionar todos los elementos dentro de ou

-    for (let i = 0; i < ou.children.length; i++){

-      ou.children[i].selected = ou.selected;

-      this.selectOu(ou.children[i]);

-    }

-    for (let i = 0; i < ou.clients.length; i++) {

-      ou.clients[i].selected = ou.selected;

-      this.ogCommonService.selectClient(ou.clients[i], ou);

-    }

-  }

-

-

-  deleteOu(ou) {

-    this.ogSweetAlert.swal(

-      {

-        title: this.translate.instant('sure_to_delete') + '?',

-        input: 'checkbox',

-        inputValue: 1,

-        inputPlaceholder:

-          this.translate.instant('move_children_to_parent'),

-        type: 'warning',

-        showCancelButton: true,

-        confirmButtonColor: '#DD6B55',

-        confirmButtonText: this.translate.instant('yes_delete')

-      }).then(

-      function(answer) {

-        if (!answer.dismiss) {

-          const promises = [];

-

-          new Observable((observer) => {

-            // Se eligió mover los clientes

-            if (answer.value === 1) {

-              // Obtener la ou para saber el id de su padre

-              this.organizationalUnitService.read(ou.id + '?parent= 1').subscribe(

-                (response) => {

-                  // Mover todos los hijos al nivel superior de la ou actual

-                  const parentId = response.parent.id;

-                  for (let i = 0; i < ou.children.length; i++) {

-                    ou.children[i].parent = parentId;

-                    promises.push(this.organizationalUnitService.update({id: ou.children[i].id, parent: parentId}));

-                  }

-                  ou.clients = ou.clients || [];

-                  for (let i = 0; i < ou.clients.length; i++) {

-                    ou.clients[i].organizationalUnit = parentId;

-                    promises.push(this.clientService.update({id: ou.clients[i].id, organizationalUnit: parentId}));

-                  }

-                  forkJoin(promises).subscribe(

-                    (success) => {

-                      observer.next(true);

-                    },

-                    (error) => {

-                      observer.error(error);

-                    }

-                  );

-                },

-                (error) => {

-                  observer.error(error);

-                }

-              );

-            } else {

-              observer.next(true);

-            }

-          }).subscribe(

-            (response) => {

-              this.organizationalUnitService.delete(ou.id).subscribe(

-                (success) => {

-                  // Si la unidad organizativa es un nivel superior, se recarga la lista y se borra la unidad organizativa del usuario

-                  if (ou.parent == null) {

-                    delete this.config.ous;

-                    this.user.ou = null;

-                  }

-

-                  this.toaster.pop({type: 'success', title: 'success', body: 'Successfully deleted'});

-                  window.setTimeout(function() {

-                    this.router.navigate(['app.ous']);

-                  }, 500);

-                },

-                (error) => {

-                  this.toaster.pop({type: 'error', title: 'error', body: error});

-                }

-              );

-            },

-            (error) => {

-              this.toaster.pop({type: 'error', title: 'error', body: error});

-            }

-          );

-        }

-      },

-      function(cancel) {

-      }

-    );

-

-  }

-}

+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {OrganizationalUnit} from '../../../model/organizational-unit';
+import {Client} from '../../../model/client';
+import {forkJoin, Observable} from 'rxjs';
+import {OrganizationalUnitService} from '../../../api/organizational-unit.service';
+import {OgSweetAlertService} from '../../../service/og-sweet-alert.service';
+import {ToasterService} from '../../../service/toaster.service';
+import {ClientService} from '../../../api/client.service';
+import {TranslateService} from '@ngx-translate/core';
+import {OgCommonService} from '../../../service/og-common.service';
+import {AuthModule, tr} from 'globunet-angular/core';
+import {Router} from '@angular/router';
+
+@Component({
+  selector: 'app-ou-group-component',
+  templateUrl: 'ou-group.component.html',
+  styleUrls: ['ou-group.component.css']
+})
+export class OuGroupComponent {
+  @Input() ous;
+  @Input() content;
+  @Input() clientStatus;
+  @Input() showGrid;
+  @Input() selectedStatus;
+
+  public config: any;
+
+  public moveChildren = false;
+
+  constructor(public ogCommonService: OgCommonService,
+              private organizationalUnitService: OrganizationalUnitService,
+              private clientService: ClientService,
+              private ogSweetAlert: OgSweetAlertService,
+              private toaster: ToasterService,
+              private translate: TranslateService,
+              private authModule: AuthModule,
+              private router: Router) {
+  }
+
+  doMove(ou) {
+    // Comprobar si hay que mover clientes o una ou a la ou pasada por parametro
+    if (this.ogCommonService.movingOu != null) {
+      /**/
+      const id = ou ? ou.id : null;
+      const obj = new OrganizationalUnit();
+      // @ts-ignore
+      obj.id = this.ogCommonService.movingOu.id;
+      // @ts-ignore
+      obj.parent = id;
+      this.organizationalUnitService.update(obj).subscribe(
+        (response) => {
+          this.toaster.pop({type: 'success', title: 'success', body: 'Successfully moved'});
+          this.deleteOuFromModel(this.ous, this.ogCommonService.movingOu);
+          if (ou) {
+            ou.children.push(this.ogCommonService.movingOu);
+          } else {
+            this.ous.push(this.ogCommonService.movingOu);
+          }
+          this.ogCommonService.movingOu = null;
+        },
+        (error) => {
+          this.toaster.pop({type: 'error', title: 'error', body: error});
+        }
+      );
+      /**/
+
+    } else if (this.ogCommonService.movingClients === true) {
+      const clientIds = Object.keys(this.ogCommonService.selectedClients);
+      let cId = '';
+      const promises = [];
+      for (let i = 0; i < clientIds.length; i++) {
+        cId = clientIds[i];
+        const client = new Client();
+        // @ts-ignore
+        client.id = cId;
+        client.organizationalUnit = ou.id;
+        promises.push(this.clientService.update(client));
+      }
+      forkJoin(promises).subscribe(
+        (response)  => {
+          for (let i = 0; i < clientIds.length; i++) {
+            cId = clientIds[i];
+            this.deleteClientFromOu(this.ous, this.ogCommonService.selectedClients[cId]);
+            ou.clients.push(this.ogCommonService.selectedClients[cId]);
+            this.ogCommonService.selectClient(this.ogCommonService.selectedClients[cId], ou);
+          }
+          this.toaster.pop({type: 'success', title: 'success', body: 'Successfully moved'});
+          this.ogCommonService.movingClients = false;
+        },
+        (error) => {
+          this.toaster.pop({type: 'error', title: 'error', body: error});
+          this.ogCommonService.movingClients = false;
+        }
+      );
+    }
+  }
+
+  deleteOuFromModel(ous, ou) {
+    let found = false;
+    const nOus = ous.length;
+    let index = 0;
+    while (!found && index < nOus) {
+      if (ous[index] === ou) {
+        found = true;
+        ous.splice(index, 1);
+      } else if (ous[index].children.length > 0) {
+        found = this.deleteOuFromModel(ous[index].children, ou);
+      }
+      index++;
+    }
+    return found;
+  }
+
+  deleteClientFromOu(ous, client) {
+    let found = false;
+    const nOus = ous.length;
+    let index = 0;
+    while (!found && index < nOus) {
+      if (ous[index].id === client.parent.id) {
+        found = true;
+        const cIndex = ous[index].clients.indexOf(client);
+        if (cIndex !== -1) {
+          ous[index].clients.splice(cIndex, 1);
+        }
+      } else if (ous[index].children.length > 0) {
+        found = this.deleteClientFromOu(ous[index].children, client);
+      }
+      index++;
+    }
+    return found;
+  }
+
+  selectForMove(content) {
+    this.ogCommonService.selectForMove(content);
+  }
+
+  selectOu(ou) {
+    // seleccionar/deseleccionar todos los elementos dentro de ou
+    for (let i = 0; i < ou.children.length; i++) {
+      ou.children[i].selected = ou.selected;
+      this.selectOu(ou.children[i]);
+    }
+    for (let i = 0; i < ou.clients.length; i++) {
+      ou.clients[i].selected = ou.selected;
+      this.ogCommonService.selectClient(ou.clients[i], ou);
+    }
+  }
+
+
+  deleteOu(ou) {
+    const self = this;
+    this.ogSweetAlert.swal(
+      {
+        title: this.translate.instant('sure_to_delete') + '?',
+        input: 'checkbox',
+        inputValue: 1,
+        inputPlaceholder:
+          this.translate.instant('move_children_to_parent'),
+        type: 'warning',
+        showCancelButton: true,
+        confirmButtonColor: '#DD6B55',
+        confirmButtonText: this.translate.instant('yes_delete')
+      }).then(
+      function(answer) {
+        if (!answer.dismiss) {
+          const promises = [];
+
+          new Observable((observer) => {
+            // Se eligió mover los clientes
+            if (answer.value === 1) {
+              // Obtener la ou para saber el id de su padre
+                // @ts-ignore
+                self.organizationalUnitService.read(ou.id + '?parent= 1').subscribe(
+                (response) => {
+                  // Mover todos los hijos al nivel superior de la ou actual si tiene un nivel superior, sino no será posible realizar la acción
+                    if (response.parent && response.parent.id || ou.clients.length === 0) {
+                        const parentId = response.parent ? response.parent.id : null;
+                        for (let i = 0; i < ou.children.length; i++) {
+                            ou.children[i].parent = parentId;
+                            // @ts-ignore
+                            promises.push(self.organizationalUnitService.update({id: ou.children[i].id, parent: parentId}));
+                        }
+                        ou.clients = ou.clients || [];
+                        for (let i = 0; i < ou.clients.length; i++) {
+                            ou.clients[i].organizationalUnit = parentId;
+                            // @ts-ignore
+                            promises.push(self.clientService.update({id: ou.clients[i].id, organizationalUnit: parentId}));
+                        }
+                        forkJoin(promises).subscribe(
+                            (success) => {
+                                observer.next(true);
+                            },
+                            (error) => {
+                                observer.error(error);
+                            }
+                        );
+                    } else {
+                        observer.error(self.translate.instant(tr('SUPERIOR_LEVEL_NOT_EXIST_CHILDREN_NOT_MOVED')));
+                    }
+
+                },
+                (error) => {
+                  observer.error(error);
+                }
+              );
+            } else {
+              observer.next(true);
+            }
+          }).subscribe(
+            (response) => {
+                self.organizationalUnitService.delete(ou.id).subscribe(
+                (success) => {
+                    /**
+                        // Si la unidad organizativa es un nivel superior, se recarga la lista y se borra la unidad organizativa del usuario
+                        if (ou.parent == null) {
+                            delete self.config.ous;
+                            self.authModule.getLoggedUser().ou = null;
+                        }
+                    /**/
+                    window.setTimeout(function() {
+                        self.deleteOuFromModel(self.ous, self.content);
+                        self.toaster.pop({type: 'success', title: 'success', body: 'Successfully deleted'});
+                    }, 0);
+
+                },
+                (error) => {
+                    self.toaster.pop({type: 'error', title: 'error', body: error});
+                }
+              );
+            },
+            (error) => {
+                self.toaster.pop({type: 'error', title: 'error', body: error});
+            }
+          );
+        }
+      },
+      function(cancel) {
+      }
+    );
+
+  }
+}
diff --git a/admin/WebConsole3/frontend/src/app/serializer/client.serializer.ts b/admin/WebConsole3/frontend/src/app/serializer/client.serializer.ts
index ac2b88a9..694e15f9 100644
--- a/admin/WebConsole3/frontend/src/app/serializer/client.serializer.ts
+++ b/admin/WebConsole3/frontend/src/app/serializer/client.serializer.ts
@@ -1,5 +1,15 @@
-import { Serializer } from "globunet-angular/core/providers/api/serializer";

-

-export class ClientSerializer extends Serializer {

-

-}
\ No newline at end of file
+import { Serializer } from 'globunet-angular/core/providers/api/serializer';
+import {Client} from '../model/client';
+
+export class ClientSerializer extends Serializer {
+
+    toJson(client: Client): any {
+        // @ts-ignore
+        client.repository = (client.repository) ? client.repository.id : null;
+        // @ts-ignore
+        client.hardwareProfile = (client.hardwareProfile) ? client.hardwareProfile.id : null;
+        // @ts-ignore
+        client.netboot = (client.netboot) ? client.netboot.id : null;
+        return super.toJson(client);
+    }
+}
diff --git a/admin/WebConsole3/frontend/src/app/serializer/organizational-unit.serializer.ts b/admin/WebConsole3/frontend/src/app/serializer/organizational-unit.serializer.ts
index 310eb563..f442d3e2 100644
--- a/admin/WebConsole3/frontend/src/app/serializer/organizational-unit.serializer.ts
+++ b/admin/WebConsole3/frontend/src/app/serializer/organizational-unit.serializer.ts
@@ -1,5 +1,5 @@
-import { Serializer } from "globunet-angular/core/providers/api/serializer";

-

-export class OrganizationalUnitSerializer extends Serializer {

-

-}
\ No newline at end of file
+import { Serializer } from "globunet-angular/core/providers/api/serializer";
+
+export class OrganizationalUnitSerializer extends Serializer {
+
+}
diff --git a/admin/WebConsole3/frontend/src/app/service/og-common.service.ts b/admin/WebConsole3/frontend/src/app/service/og-common.service.ts
index 7834e812..ee5a8a9d 100644
--- a/admin/WebConsole3/frontend/src/app/service/og-common.service.ts
+++ b/admin/WebConsole3/frontend/src/app/service/og-common.service.ts
@@ -39,6 +39,7 @@ export class OgCommonService {
         this.engineService.list().subscribe(
           data => {
             this.constants = {
+              ou: environment.ou,
               themes: environment.themes,
               menus: environment.menus,
               languages: environment.languages
diff --git a/admin/WebConsole3/frontend/src/assets/i18n/es.json b/admin/WebConsole3/frontend/src/assets/i18n/es.json
index 684983df..dfc609c3 100644
--- a/admin/WebConsole3/frontend/src/assets/i18n/es.json
+++ b/admin/WebConsole3/frontend/src/assets/i18n/es.json
@@ -285,5 +285,6 @@
 	"yes": "Sí",
 	"yes_delete": "Sí borrar",
 	"you_have_x_exectution_taks": "Tienes {{values}} tareas en ejecución",
-	"you_must_to_select_any_clients": "Debes seleccionar al menos un cliente"
+	"you_must_to_select_any_clients": "Debes seleccionar al menos un cliente",
+	"REMEMBER_ME": "Remember me"
 }
diff --git a/admin/WebConsole3/frontend/src/environments/environment.ts b/admin/WebConsole3/frontend/src/environments/environment.ts
index 2078a153..fcc0dcba 100644
--- a/admin/WebConsole3/frontend/src/environments/environment.ts
+++ b/admin/WebConsole3/frontend/src/environments/environment.ts
@@ -5,10 +5,10 @@ const url = 'https://SERVERIP/opengnsys3';
 export const environment = {
   production: false,
   BASE_URL: url,
-  API_URL: url + '/frontend/web/app_dev.php/api/private',
+  API_URL: url + '/backend/web/app_dev.php/api/private',
   API_PUBLIC_URL: url + '/api',
-  API_BASE_URL: '/frontend/web/app_dev.php/api',
-  OAUTH_DOMAIN: '/frontend/web/app_dev.php/oauth/v2/token',
+  API_BASE_URL: '/backend/web/app_dev.php/api',
+  OAUTH_DOMAIN: '/backend/web/app_dev.php/oauth/v2/token',
   OAUTH_CLIENT_ID: '1_23amzbdp4kskg80444oscko4w0w8wokocs88k0g8w88o4oggs4',
   OAUTH_CLIENT_SECRET: '46rttt2trwo4gocgoc4w80k4s8ok48sg8s84kk0cw48csks8o8',
   BASE_DIR: 'opengnsys3',