visual adjustments, permissions, users activate

src/app/components/confirm-account/confirm-account.component.html

@@ -22,32 +22,45 @@
               <div class="form-group">
                 <label for="name">Nombre</label>
                 <input type="text" class="form-control"
-                formControlName="first_name" required />
+                formControlName="first_name" [ngClass]="{ 'is-invalid': submitted && f.first_name.errors }"/>
+                <div *ngIf="submitted && f.first_name.errors" class="invalid-feedback">
+                  <div *ngIf="f.first_name.errors.required">Campo requerido</div>
+                </div>
               </div>
 
               
               <div class="form-group">
                   <label for="name">Apellido</label>
                   <input type="text" class="form-control"
-                  formControlName="last_name" required />
+                  formControlName="last_name" [ngClass]="{ 'is-invalid': submitted && f.last_name.errors }"/>
+                  <div *ngIf="submitted && f.last_name.errors" class="invalid-feedback">
+                    <div *ngIf="f.last_name.errors.required">Campo requerido</div>
+                  </div>
                 </div>
 
               <div class="form-group">
                 <label for="password">Contraseña</label>
                 <input type="password" class="form-control"
-                formControlName="password" required minlength="6" />
+                formControlName="password" [ngClass]="{ 'is-invalid': submitted && f.password.errors }"/>
+                <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
+                  <div *ngIf="f.password.errors.required">Campo requerido</div>
+                </div>
               </div>
 
               <div class="form-group">
                 <label for="confirm_password">Confirmar contraseña</label>
                 <input type="password" class="form-control"
-                formControlName="confirm_password" required minlength="6" />
+                formControlName="confirm_password" [ngClass]="{ 'is-invalid': submitted && f.confirm_password.errors }"/>
+                <div *ngIf="submitted && f.confirm_password.errors" class="invalid-feedback">
+                  <div *ngIf="f.confirm_password.errors.required">Campo requerido</div>
+                  <div *ngIf="f.confirm_password.errors.mustMatch">Las contraseñas deben coincidir</div>
+                </div>
               </div>
 
               <br>
 
               <div class="div-center">
-                <button class="btn btn-primary" type="submit" [disabled]="!activateForm.valid"> 
+                <button class="btn btn-primary" type="submit"> 
                   Confirmar cuenta
                 </button>
               </div>

src/app/components/confirm-account/confirm-account.component.ts

@@ -1,8 +1,11 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { FormGroup, FormBuilder } from '@angular/forms';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { UserService } from '@app/services/user.service';
 import Swal from 'sweetalert2';
+import { ValidatorComponent } from '../plugins/validator/validator.component';
+
+
 
 @Component({
   selector: 'app-confirm-account',
@@ -18,10 +21,10 @@ export class ConfirmAccountComponent implements OnInit {
   successActivation: boolean;
   activateMessage: string;
   invalidToken: boolean;
+  submitted: boolean = false;
 
   constructor(private formBuilder: FormBuilder, private route: ActivatedRoute, private userService: UserService) {
     this.route.queryParams.subscribe(params => {
-      console.log(params);
       this.token = params['token'];
     });
   }
@@ -35,16 +38,18 @@ export class ConfirmAccountComponent implements OnInit {
         }
       ).subscribe(res => {
         
-        let userData = res.data.user;
+        let userData = res["data"].user;
 
         this.validToken = true;
         this.activateForm = this.formBuilder.group({
           // Load information
           email: [(userData.email)],
-          first_name: [(userData.first_name)],
-          last_name: [(userData.last_name)],
-          password: [''],
-          confirm_password: ['']
+          first_name: [(userData.first_name),Validators.required],
+          last_name: [(userData.last_name),Validators.required],
+          password: ['',[Validators.required, Validators.minLength(6)]],
+          confirm_password: ['',Validators.required]
+        },{
+            validator: ValidatorComponent('password', 'confirm_password')
         });
       }, (err) => {
        
@@ -64,6 +69,14 @@ export class ConfirmAccountComponent implements OnInit {
 
 
   activateAccount(){
+
+    this.submitted = true;
+
+    // stop here if form is invalid
+    if (this.activateForm.invalid) {
+      return;
+    }
+
     this.userService.activateUser(
       {
         email: this.f.email.value,

src/app/components/dashboard/dashboard.component.ts

@@ -103,20 +103,8 @@ export class DashboardComponent implements OnInit {
       });
     });
   
-    
-    /*if (localStorage.getItem("installedCapacityTotal_kW") == undefined){
-      this.plantsService.getInstalledCapacity().subscribe(res => {
-        this.totalMetersInstalled = res["installedCapacityTotal_kW"];
-        localStorage.setItem("totalMetersInstalled", this.totalMetersInstalled);
-      });
-    }
-    else {
-      this.totalMetersInstalled = localStorage.getItem("installedCapacityTotal_kW");
-    }*/
-
   }
 
-
   ngOnInit(): void {
 
     var responsiveOptions: any[] = [

src/app/components/login/login.component.html

@@ -15,16 +15,23 @@
                 <label for="email">Correo electrónico</label>
                 
                 <input type="text" name="email" class="form-control"
-                formControlName="email" required email />
+                formControlName="email" email [ngClass]="{ 'is-invalid': submitted && f.email.errors }"/>
+                <div *ngIf="submitted && f.email.errors" class="invalid-feedback">
+                  <div *ngIf="f.email.errors.required">Ingresar un correo válido</div>
+                </div>
   
               </div>
               <div class="form-group">
                 <label for="password">Contraseña</label>
                 <input type="password" name="password"  class="form-control"
-                formControlName="password" required minlength="5" />
+                formControlName="password" minlength="5"  [ngClass]="{ 'is-invalid': submitted && f.password.errors }"/>
+                <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
+                  <div *ngIf="f.password.errors.required">Ingresar contraseña</div>
+                </div>
+  
               </div>
   
-              <button class="btn btn-primary" type="submit" [disabled]="!loginForm.valid"> 
+              <button class="btn btn-primary" type="submit"> 
                 Iniciar sesión
               </button>
             </form>

src/app/components/login/login.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder } from '@angular/forms';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { AuthService } from '@app/services/auth2.service';
 import Swal from 'sweetalert2';
@@ -12,19 +12,26 @@ import Swal from 'sweetalert2';
 export class LoginComponent implements OnInit {
 
   loginForm: FormGroup;
+  submitted:boolean = false;
 
   constructor(private authService: AuthService, private formBuilder: FormBuilder, private router: Router) { }
 
   ngOnInit() {
     this.loginForm = this.formBuilder.group({
-      email: [''],
-      password: ['']
+      email: ['', Validators.required, Validators.email],
+      password: ['', Validators.required]
     });
   }
 
   get f() { return this.loginForm.controls; }
 
   login() {
+    this.submitted = true;
+
+    // stop here if form is invalid
+    if (this.loginForm.invalid) {
+      return;
+    }
 
     Swal.fire({
       allowOutsideClick: false,

src/app/components/organizations/new-organization/new-organization.component.ts

@@ -57,18 +57,18 @@ export class NewOrganizationComponent implements OnInit {
         Swal.fire({
           allowOutsideClick: false,
           type: 'success',
-          text: 'Registro agregado con exito'
+          showCancelButton: false,
+          title: 'Exito',
+          confirmButtonText: 'El registro ha sido guardado'
+        }).then((result) => {
+          if (result.value) {
+            window.location.href="#/organizations";
+          }
         });
-        //window.location.href="#/dashboard";
-
       }
       
     });
-    Swal.fire({
-      allowOutsideClick: false,
-      type: 'success',
-      text: 'Registro agregado con exito'
-    });
+    
 
 
   }

src/app/components/organizations/organizations.component.html

@@ -14,7 +14,7 @@
             </ol>
           </nav>
 
-          <a class="btn btn-primary" [routerLink]="['/organizations/new']">
+          <a class="btn btn-primary" [routerLink]="['/organizations/new']" *ngIf="allowedUser()">
             Nuevo registro
           </a>
         </div>
@@ -58,10 +58,10 @@
                     <th mat-header-cell *matHeaderCellDef>&nbsp;</th>
                     <td mat-cell *matCellDef="let row">
                       <div class="action-buttons">
-                        <a class="btn btn-primary btn-sm" [routerLink]="['/organization', row.id, 'edit']"  >
+                        <a class="btn btn-primary btn-sm" [routerLink]="['/organization', row.id, 'edit']" *ngIf="allowedUser()" >
                           Editar
                         </a>
-                        <a class="btn btn-danger btn-sm" (click)="delete_organization(row.id)"  >
+                        <a class="btn btn-danger btn-sm" (click)="delete_organization(row.id)" *ngIf="allowedUser()" >
                           Eliminar
                         </a>
                       </div>

src/app/components/organizations/organizations.component.ts

@@ -5,6 +5,8 @@ import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import Swal from 'sweetalert2';
+import { Router } from '@angular/router';
+import { AuthService } from '@app/services/auth2.service';
 
 @Component({
   selector: 'app-organizations',
@@ -30,7 +32,7 @@ export class OrganizationsComponent implements OnInit {
   role_number: any;
 
 
-  constructor(private orgService: OrganizationsService) {
+  constructor(private orgService: OrganizationsService, private router: Router, private authService: AuthService ) {
     Swal.fire({
       allowOutsideClick: false,
       type: 'info',
@@ -40,6 +42,7 @@ export class OrganizationsComponent implements OnInit {
   }
 
   ngOnInit() {
+
     this.orgService.getListOrganizations().subscribe(res =>
       this.listData = res
     );
@@ -92,6 +95,10 @@ export class OrganizationsComponent implements OnInit {
             allowOutsideClick: false,
             type: 'success',
             text: 'Registro eliminado con exito'
+          }).then((result) => {
+            if (result.value) {
+              this.reloadComponent();
+            }
           });
           //window.location.href="#/organizations";
         }
@@ -112,6 +119,13 @@ export class OrganizationsComponent implements OnInit {
       });
   }
 
+
+  reloadComponent(){
+    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
+    this.router.onSameUrlNavigation = 'reload';
+    this.router.navigate(['/organizations']);
+  }
+
   applyFilter(filterValue: string) {
     this.dataSource.filter = filterValue.trim().toLowerCase();
     if (this.dataSource.paginator) {
@@ -119,4 +133,16 @@ export class OrganizationsComponent implements OnInit {
     }
   }
 
+  allowedUser(){
+    let is_allowed: boolean;
+    if(+this.authService.getUserLevel() < 3){
+      is_allowed = false;
+    }
+    else {
+      is_allowed = true;
+    }
+    console.log(is_allowed);
+    return is_allowed
+  }
+
 }

src/app/components/plants/plants.component.html

@@ -14,7 +14,7 @@
             </ol>
           </nav>
 
-          <a class="btn btn-primary" [routerLink]="['/plants/new']">
+          <a class="btn btn-primary" [routerLink]="['/plants/new']" *ngIf="allowedUser()">
             Nuevo registro
           </a>
         </div>
@@ -51,9 +51,16 @@
                   <ng-container matColumnDef="id">
                     <th mat-header-cell *matHeaderCellDef>&nbsp;</th>
                     <td mat-cell *matCellDef="let row">
-                      <a class="btn btn-primary btn-sm" [routerLink]="['/plant', row.id, 'edit']"  >
-                        Editar
-                      </a>
+
+                      <div class="action-buttons">
+                        <a class="btn btn-primary btn-sm" [routerLink]="['/plant', row.id, 'edit']" *ngIf="allowedUser()" >
+                          Editar
+                        </a>
+                        <!--
+                        <a class="btn btn-danger btn-sm" (click)="delete_organization(row.id)" *ngIf="allowedUser()" >
+                          Eliminar
+                        </a>-->
+                      </div>
                     </td>
                   </ng-container>
           

src/app/components/plants/plants.component.ts

@@ -7,6 +7,8 @@ import {MatSort} from '@angular/material/sort';
 
 import {MatTableDataSource} from '@angular/material/table';
 import Swal from 'sweetalert2';
+import { UserService } from '@app/services/user.service';
+import { AuthService } from '@app/services/auth2.service';
 
 @Component({
   selector: 'app-plants',
@@ -32,7 +34,7 @@ export class PlantsComponent implements OnInit {
   @ViewChild(MatSort, {static: true}) sort: MatSort;
 
 
-  constructor(private orgService: PlantsService) {
+  constructor(private orgService: PlantsService, private authService: AuthService) {
     Swal.fire({
       allowOutsideClick: false,
       type: 'info',
@@ -61,4 +63,16 @@ export class PlantsComponent implements OnInit {
     }
   }
 
+  allowedUser(){
+    let is_allowed: boolean;
+    if(+this.authService.getUserLevel() < 3){
+      is_allowed = false;
+    }
+    else {
+      is_allowed = true;
+    }
+    console.log(is_allowed);
+    return is_allowed
+  }
+
 }

src/app/components/shared/navbar/navbar.component.html

@@ -17,13 +17,14 @@
     <div class="collapse navbar-collapse justify-content-end" id="navigation">
       <ul class="navbar-nav">
         <li class="nav-item">
-          <a class="nav-link" href="javascript:void(0)">
+          <a class="nav-link" href="javascript:void(0)" title="Dashboard">
             <i class="material-icons">dashboard</i>
             <p>
               <span class="d-lg-none d-md-block">Stats</span>
             </p>
           </a>
         </li>
+        <!--
         <li class="nav-item">
           <a class="nav-link" title="Account" href="#/profile">
             <i class="material-icons">person</i>
@@ -31,9 +32,9 @@
               <span class="d-lg-none d-md-block">Account</span>
             </p>
           </a>
-        </li>
+        </li>-->
         <li class="nav-item">
-          <a class="nav-link" title="Logout" (click)="logout()" href="javascript:void(0)">
+          <a class="nav-link" title="Cerrar sesión" (click)="logout()" href="javascript:void(0)">
             <i class="material-icons">exit_to_app</i>
             <p>
               <span class="d-lg-none d-md-block">Logout</span>

src/app/components/shared/sidebar/sidebar.component.ts

@@ -14,7 +14,6 @@ declare interface RouteInfo {
 export const ROUTES: RouteInfo[] = [
     { path: '/dashboard', title: 'Dashboard',  icon: 'dashboard', class: '' },
     { path: '/assets', title: 'Plantas',  icon: 'wb_sunny', class: '' },
-    { path: '/profile', title: 'Perfil',  icon: 'person', class: '' },
     //{ path: '/profile', title: 'Perfil',  icon:'person', class: '' },
     /*{ path: '/table-list', title: 'Table List',  icon:'content_paste', class: '' },
     { path: '/typography', title: 'Typography',  icon:'library_books', class: '' },

src/app/components/users/new-user/new-user.component.html

@@ -55,10 +55,45 @@
                   
                   <div class="form-group">
                     <label for="role">Rol: </label>
-                    <input type="text" formControlName="role" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.role.errors }"/>
-                    <div *ngIf="submitted && f.role.errors" class="invalid-feedback">
-                      <div *ngIf="f.role.errors.required">Campo requerido</div>
-                    </div>
+                    <br>
+                    
+                    <div class="form-check form-check-inline">
+                        <input class="form-check-input" type="radio" formControlName="role" id="roleRadios1" value="0" 
+                        [ngClass]="{ 'is-invalid': submitted && f.role.errors }">
+                        <label class="form-check-label" for="roleRadios1">
+                          Invitado
+                        </label>
+                      </div>
+                      <div class="form-check form-check-inline">
+                        <input class="form-check-input" type="radio" formControlName="role" id="roleRadios2" value="1" 
+                        [ngClass]="{ 'is-invalid': submitted && f.role.errors }">
+                        <label class="form-check-label" for="roleRadios2">
+                          Usuario
+                        </label>
+                      </div>
+                      <div class="form-check form-check-inline">
+                        <input class="form-check-input" type="radio" formControlName="role" id="roleRadios3" value="2" 
+                        [ngClass]="{ 'is-invalid': submitted && f.role.errors }">
+                        <label class="form-check-label" for="roleRadios3">
+                          Administrador
+                        </label>
+                      </div>
+                      <div class="form-check form-check-inline">
+                        <input class="form-check-input" type="radio" formControlName="role" id="roleRadios3" value="3" 
+                        [ngClass]="{ 'is-invalid': submitted && f.role.errors }">
+                        <label class="form-check-label" for="roleRadios3">
+                          Super Admin
+                        </label>
+                      </div>
+                      
+                    <!--<select class="form-control" formControlName="role" [ngClass]="{ 'is-invalid': submitted && f.role.errors }" >
+                      <option>Seleccione una opción</option>
+                      <option value="0">Invitado</option>
+                      <option value="1">Usuario</option>
+                      <option value="2">Administrador</option>
+                      <option value="3">Super Admin</option>
+                    </select> -->
+                    
                   </div>
                   <br>
                   <button class="btn btn-primary">

src/app/components/users/new-user/new-user.component.ts

@@ -46,18 +46,22 @@ export class NewUserComponent implements OnInit {
           role: +this.f.role.value,
         }
       )
-    .subscribe(success => {
-      if (success) {
-        Swal.fire({
-          allowOutsideClick: false,
-          type: 'info',
-          text: 'Usuario creado con exito'
-        });
-        //window.location.href="#/dashboard";
-
-      }
-      
-    });
+      .subscribe(success => {
+        if (success) {
+          Swal.fire({
+            allowOutsideClick: false,
+            type: 'success',
+            showCancelButton: false,
+            title: 'Exito',
+            confirmButtonText: 'El usuario ha sido creado'
+          }).then((result) => {
+            if (result.value) {
+              window.location.href="#/users";
+            }
+          });
+        }
+        
+      });
   }
 
 

src/app/services/user.service.ts

@@ -59,7 +59,7 @@ export class UserService {
       errorMessage = error.error;
     } else {
       // Get server-side error
-      errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;      
+      errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
     }
     return throwError(errorMessage);
  }

src/assets/scss/core/_sidebar-and-main-panel.scss

@@ -410,7 +410,7 @@
     @include transition (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1));
 
      .main-content{
-        margin-top: 50px;
+        margin-top: 30px;
         padding: 20px 10px;
         min-height: calc(100vh - 123px);
     }

src/assets/scss/material-dashboard.scss

@@ -183,3 +183,14 @@ table {
     color: $white;
   }
 }
+
+
+.form-check .form-check-input {
+  opacity: 1;
+  height: 20px;
+  width: 20px;
+  overflow: hidden;
+  background: black;
+  color: black;
+  z-index: 1;
+}