Update user profile view

src/app/components/profile/profile.component.html

@@ -1,27 +1,4 @@
 <h2 class="floating-title">{{ title }}</h2>
-<div
-  class="header pb-6 d-flex align-items-center"
-  style="
-    min-height: 240px;
-    background-size: cover;
-    background-position: center top;
-  "
->
-  <!-- Mask -->
-  <span class="mask bg-gradient-default opacity-8"></span
-  ><!-- Header container -->
-  <div class="container-fluid d-flex align-items-center">
-    <div class="row">
-      <div class="col-lg-7 col-md-10">
-        <h1 class="display-2 text-white">Hola {{ first_name }}</h1>
-        <p class="text-white mt-0 mb-5">
-          Aquí podra editar la información general de la cuenta. Si eres usuario
-          pro, podras editar la información de la tarifa.
-        </p>
-      </div>
-    </div>
-  </div>
-</div>
 <div class="main-content">
   <div class="container-fluid">
     <div class="row justify-content-center">
@@ -29,263 +6,172 @@
         <div class="align-container">
           <div class="card">
             <div class="card-header">
-              <div class="row align-items-center">
-                <div class="col-8"><h3 class="mb-0">Editar perfil</h3></div>
-                <div class="col-4 text-right">
-                  <a href="#!" class="btn btn-sm btn-warning"
-                    >Actualizar a usuario pro</a
-                  >
-                </div>
-              </div>
+              <h2>Hola {{ first_name }}</h2>
+              <p class="card-category">Aquí podras editar la información general de la cuenta.</p>
             </div>
-            <div class="card-body" *ngIf="editProfile">
-              <form
-                class="form-auth-small ng-untouched ng-pristine ng-valid"
-                [formGroup]="userForm"
-                (ngSubmit)="editUser()"
-              >
-                <h6 class="heading-small text-muted mb-4">
-                  Información de usuario
-                </h6>
-                <div class="pl-lg-4">
-                  <div class="row">
-                    <div class="col-lg-6">
-                      <div class="form-group">
-                        <label for="first_name">Nombre: </label>
-                        <input
-                          type="text"
-                          formControlName="first_name"
-                          class="form-control"
-                          [ngClass]="{
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="row justify-content-center">
+      <div class="col-12">
+        <div class="card">
+          <div class="card-header card-header-inverlec">
+            <h3 class="card-title">Editar perfil</h3>
+            <p class="card-category">Información del Usuario</p>
+          </div>
+          <div class="card-body" *ngIf="editProfile">
+            <form class="form-auth-small ng-untouched ng-pristine ng-valid" [formGroup]="userForm"
+              (ngSubmit)="editUser()">
+              <div class="pl-lg-4">
+                <div class="row">
+                  <div class="col-lg-6">
+                    <div class="form-group">
+                      <label for="first_name">Nombre: </label>
+                      <input type="text" formControlName="first_name" class="form-control" [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 *ngIf="submitted && f.first_name.errors" class="invalid-feedback">
+                        <div *ngIf="f.first_name.errors.required">
+                          Campo requerido
                         </div>
                       </div>
                     </div>
-                    <div class="col-lg-6">
-                      <div class="form-group">
-                        <label for="last_name">Apellido: </label>
-                        <input
-                          type="text"
-                          formControlName="last_name"
-                          class="form-control"
-                          [ngClass]="{
+                  </div>
+                  <div class="col-lg-6">
+                    <div class="form-group">
+                      <label for="last_name">Apellido: </label>
+                      <input type="text" formControlName="last_name" class="form-control" [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 *ngIf="submitted && f.last_name.errors" class="invalid-feedback">
+                        <div *ngIf="f.last_name.errors.required">
+                          Campo requerido
                         </div>
                       </div>
                     </div>
-                    <div class="col-lg-6">
-                      <div class="form-group">
-                        <label for="email">Email: </label>
-                        <input
-                          type="text"
-                          formControlName="email"
-                          class="form-control"
-                          [ngClass]="{
+                  </div>
+                  <div class="col-lg-6">
+                    <div class="form-group">
+                      <label for="email">Email: </label>
+                      <input type="text" formControlName="email" class="form-control" [ngClass]="{
                             'is-invalid': submitted && f.email.errors
-                          }"
-                          readonly
-                        />
-                        <div
-                          *ngIf="submitted && f.email.errors"
-                          class="invalid-feedback"
-                        >
-                          <div *ngIf="f.email.errors.required">
-                            Campo requerido
-                          </div>
+                          }" readonly />
+                      <div *ngIf="submitted && f.email.errors" class="invalid-feedback">
+                        <div *ngIf="f.email.errors.required">
+                          Campo requerido
                         </div>
                       </div>
                     </div>
-                    <div class="col-lg-6">
-                      <div class="form-group">
-                        <label for="phone">Telefono: </label>
-                        <input
-                          type="text"
-                          formControlName="phone"
-                          class="form-control"
-                          [ngClass]="{
+                  </div>
+                  <div class="col-lg-6">
+                    <div class="form-group">
+                      <label for="phone">Telefono: </label>
+                      <input type="text" formControlName="phone" class="form-control" [ngClass]="{
                             'is-invalid': submitted && f.phone.errors
-                          }"
-                        />
-                        <div
-                          *ngIf="submitted && f.phone.errors"
-                          class="invalid-feedback"
-                        >
-                          <div *ngIf="f.phone.errors.required">
-                            Campo requerido
-                          </div>
+                          }" />
+                      <div *ngIf="submitted && f.phone.errors" class="invalid-feedback">
+                        <div *ngIf="f.phone.errors.required">
+                          Campo requerido
                         </div>
                       </div>
                     </div>
+                  </div>
 
-                    <div class="col-lg-6">
-                      <div class="form-group">
-                        <label for="distribuidora">Distribuidora: </label>
+                  <div class="col-lg-6">
+                    <div class="form-group">
+                      <label for="distribuidora">Distribuidora: </label>
 
-                        <input
-                          *ngIf="user.distribuidora"
-                          type="text"
-                          class="form-control"
-                          [value]="user.distribuidora"
-                          readonly
-                        />
-                        <select
-                          *ngIf="!user.distribuidora"
-                          class="custom-select"
-                          formControlName="distribuidora"
-                          [ngClass]="{
+                      <input *ngIf="user.distribuidora" type="text" class="form-control" [value]="user.distribuidora"
+                        readonly />
+                      <select *ngIf="!user.distribuidora" class="custom-select" formControlName="distribuidora"
+                        [ngClass]="{
                             'is-invalid': submitted && f.distribuidora.errors
-                          }"
-                        >
-                          <option
-                            *ngFor="let item of distributor"
-                            [value]="item.codigo"
-                            [selected]="item.codigo == user.distribuidora"
-                            >{{ item.nombre }}</option
-                          >
-                        </select>
-                        <div
-                          *ngIf="submitted && f.distribuidora.errors"
-                          class="invalid-feedback"
-                        >
-                          <div *ngIf="f.distribuidora.errors.required">
-                            Campo requerido
-                          </div>
+                          }">
+                        <option *ngFor="let item of distributor" [value]="item.codigo"
+                          [selected]="item.codigo == user.distribuidora">{{ item.nombre }}</option>
+                      </select>
+                      <div *ngIf="submitted && f.distribuidora.errors" class="invalid-feedback">
+                        <div *ngIf="f.distribuidora.errors.required">
+                          Campo requerido
                         </div>
                       </div>
                     </div>
-                    <div class="col-lg-6">
-                      <div class="form-group">
-                        <label for="tarifa">Código de tarifa: </label>
-                        <input
-                          *ngIf="user.cod_tarifa"
-                          type="text"
-                          class="form-control"
-                          [value]="user.cod_tarifa"
-                          readonly
-                        />
-                        <select
-                          *ngIf="!user.cod_tarifa"
-                          class="custom-select"
-                          formControlName="tarifa"
-                          [ngClass]="{
+                  </div>
+                  <div class="col-lg-6">
+                    <div class="form-group">
+                      <label for="tarifa">Código de tarifa: </label>
+                      <input *ngIf="user.cod_tarifa" type="text" class="form-control" [value]="user.cod_tarifa"
+                        readonly />
+                      <select *ngIf="!user.cod_tarifa" class="custom-select" formControlName="tarifa" [ngClass]="{
                             'is-invalid': submitted && f.tarifa.errors
-                          }"
-                        >
-                          <option
-                            *ngFor="let item of codigo_tarifa"
-                            [value]="item.codigo"
-                            [selected]="item.codigo == user.cod_tarifa"
-                            >{{ item.nombre }}</option
-                          >
-                        </select>
-                        <div
-                          *ngIf="submitted && f.tarifa.errors"
-                          class="invalid-feedback"
-                        >
-                          <div *ngIf="f.tarifa.errors.required">
-                            Campo requerido
-                          </div>
+                          }">
+                        <option *ngFor="let item of codigo_tarifa" [value]="item.codigo"
+                          [selected]="item.codigo == user.cod_tarifa">{{ item.nombre }}</option>
+                      </select>
+                      <div *ngIf="submitted && f.tarifa.errors" class="invalid-feedback">
+                        <div *ngIf="f.tarifa.errors.required">
+                          Campo requerido
                         </div>
-                        <button
-                          class="btn btn-sm btn-info"
-                          (click)="helpModal()"
-                        >
-                          ¿Donde encuentro mi tarifa?
-                        </button>
                       </div>
+                      <button class="btn btn-sm btn-info" (click)="helpModal()">
+                        ¿Donde encuentro mi tarifa?
+                      </button>
                     </div>
+                  </div>
 
-                    <div class="col-lg-12">
-                      <div class="form-group">
-                        <div class="hint-wrapper">
-                          <small class="hint">
-                            <i class="fas fa-exclamation-circle"></i>
-                            La contraseña debe contener letras mayusculas,
-                            minusculas, al menos un número y un símbolo.
-                          </small>
-                        </div>
+                  <div class="col-lg-12">
+                    <div class="form-group">
 
-                        <label for="password">Contraseña</label>
-                        <input
-                          type="password"
-                          class="form-control"
-                          formControlName="password"
-                          [ngClass]="{
+                      <label for="password">Contraseña</label>
+                      <input type="password" class="form-control" 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 *ngIf="f.password.errors.minlength">
-                            La contraseña debe contener al menos 8 caracteres
-                          </div>
-                          <div
-                            *ngIf="f.password.hasError('passwordStrength')"
-                            style="white-space: pre;"
-                          >
-                            {{ f.password.errors["passwordStrength"] }}
-                          </div>
+                          }" />
+                      <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
+                        <div *ngIf="f.password.errors.required">
+                          Campo requerido
+                        </div>
+                        <div *ngIf="f.password.errors.minlength">
+                          La contraseña debe contener al menos 8 caracteres
+                        </div>
+                        <div *ngIf="f.password.hasError('passwordStrength')" style="white-space: pre;">
+                          {{ f.password.errors["passwordStrength"] }}
                         </div>
                       </div>
-                      <div class="form-group">
-                        <label for="confirm_password"
-                          >Confirmar contraseña</label
-                        >
-                        <input
-                          type="password"
-                          class="form-control"
-                          formControlName="confirm_password"
-                          [ngClass]="{
+                    </div>
+                    <div class="form-group">
+                      <label for="confirm_password">Confirmar contraseña</label>
+                      <input type="password" class="form-control" 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 *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>
-
-                      <br />
-                      <button class="btn btn-primary">
-                        Actualizar información
-                      </button>
+                      <div class="hint-wrapper">
+                        <small class="hint">
+                          <i class="fas fa-exclamation-circle"></i>
+                          La contraseña debe contener letras mayusculas,
+                          minusculas, al menos un número y un símbolo.
+                        </small>
+                      </div>
                     </div>
+
+                    <br />
+                    <button class="btn btn-primary">
+                      Actualizar información
+                    </button>
                   </div>
                 </div>
-              </form>
-            </div>
+              </div>
+            </form>
           </div>
         </div>
+
       </div>
     </div>
   </div>

src/app/components/profile/profile.component.ts

@@ -1,27 +1,27 @@
-import { Component, OnInit } from "@angular/core";
-import { Title } from "@angular/platform-browser";
-import { FormGroup, FormBuilder, Validators, FormArray } from "@angular/forms";
-import { UserService } from "@app/services/user.service";
-import { CatalogsService } from "@app/services/catalogs.service";
-
-import Swal from "sweetalert2";
-import { AuthService } from "@app/services/auth2.service";
+import { Component, OnInit } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import { FormGroup, FormBuilder, Validators, FormArray } from '@angular/forms';
+import { UserService } from '@app/services/user.service';
+import { CatalogsService } from '@app/services/catalogs.service';
+
+import Swal from 'sweetalert2';
+import { AuthService } from '@app/services/auth2.service';
 import {
   ValidatorComponent,
   PasswordStrengthValidator,
-} from "../plugins/validator/validator.component";
+} from '../plugins/validator/validator.component';
 
 @Component({
-  selector: "app-profile",
-  templateUrl: "./profile.component.html",
-  styleUrls: ["./profile.component.scss"],
+  selector: 'app-profile',
+  templateUrl: './profile.component.html',
+  styleUrls: ['./profile.component.scss'],
 })
 export class ProfileComponent implements OnInit {
-  title = "Perfil del usuario";
+  title = 'Perfil del usuario';
   userForm: FormGroup;
   submitted: boolean = false;
   isLoadingOrganization: boolean;
-  first_name: string = "Usuario";
+  first_name: string;
   user: any;
   editProfile: boolean;
   distributor: any;
@@ -34,30 +34,30 @@ export class ProfileComponent implements OnInit {
 
     private formBuilder: FormBuilder,
     private authService: AuthService
-  ) {}
+  ) { }
 
   email: string;
 
   ngOnInit() {
     Swal.fire({
       allowOutsideClick: false,
-      type: "info",
-      text: "Espere por favor...",
+      type: 'info',
+      text: 'Espere por favor...',
     });
     Swal.showLoading();
 
-    this.catalogsService.getCatalogByName("distribuidoras").subscribe((res) => {
-      this.distributor = res["data"]["catalogo"]["records"];
+    this.catalogsService.getCatalogByName('distribuidoras').subscribe((res) => {
+      this.distributor = res.data.catalogo.records;
     });
 
-    this.catalogsService.getCatalogByName("tarifas").subscribe((res) => {
-      this.codigo_tarifa = res["data"]["catalogo"]["records"];
+    this.catalogsService.getCatalogByName('tarifas').subscribe((res) => {
+      this.codigo_tarifa = res.data.catalogo.records;
     });
 
     this.userService
       .getUserById(this.authService.getUserId())
       .subscribe((ans) => {
-        this.user = ans["data"]["user"];
+        this.user = ans.data.user;
         Swal.close();
         this.editProfile = true;
         this.first_name = this.user.first_name;
@@ -67,19 +67,19 @@ export class ProfileComponent implements OnInit {
             last_name: [this.user.last_name, Validators.required],
             email: [this.user.email, Validators.required],
             phone: [
-              this.user.phone_number == undefined ? "" : this.user.phone_number,
+              this.user.phone_number == undefined ? '' : this.user.phone_number,
               Validators.required,
             ],
             distribuidora: [this.user.distribuidora],
             tarifa: [this.user.cod_tarifa],
             password: [
-              "",
+              '',
               [Validators.minLength(8), PasswordStrengthValidator],
             ],
-            confirm_password: [""],
+            confirm_password: [''],
           },
           {
-            validator: ValidatorComponent("password", "confirm_password"),
+            validator: ValidatorComponent('password', 'confirm_password'),
           }
         );
       });
@@ -107,15 +107,15 @@ export class ProfileComponent implements OnInit {
       cod_tarifa: this.f.tarifa.value,
     };
 
-    if (this.f.password.value != "" && this.f.confirm_password.value != "") {
-      user["password"] = this.f.password.value;
-      user["confirm_password"] = this.f.confirm_password.value;
+    if (this.f.password.value != '' && this.f.confirm_password.value != '') {
+      user['password'] = this.f.password.value;
+      user['confirm_password'] = this.f.confirm_password.value;
     }
 
     Swal.fire({
       allowOutsideClick: false,
-      type: "info",
-      text: "Espere por favor...",
+      type: 'info',
+      text: 'Espere por favor...',
     });
     Swal.showLoading();
     this.userService.editCustomer(this.authService.getUserId(), user).subscribe(
@@ -123,10 +123,10 @@ export class ProfileComponent implements OnInit {
         if (success) {
           Swal.fire({
             allowOutsideClick: false,
-            type: "success",
+            type: 'success',
             showCancelButton: false,
-            title: "Exito",
-            confirmButtonText: "Se ha actualizado su perfil exitosamente",
+            title: 'Exito',
+            confirmButtonText: 'Se ha actualizado su perfil exitosamente',
           }).then((result) => {
             Swal.close();
             window.location.reload();
@@ -135,8 +135,8 @@ export class ProfileComponent implements OnInit {
       },
       (err) => {
         Swal.fire({
-          type: "error",
-          title: "Error al guardar",
+          type: 'error',
+          title: 'Error al guardar',
           text: err.message,
         });
       }
@@ -145,21 +145,21 @@ export class ProfileComponent implements OnInit {
 
   helpModal() {
     Swal.fire({
-      title: "<strong>¿Dónde encuentro mi tipo de tarifa?</strong>",
-      type: "info",
+      title: '<strong>¿Dónde encuentro mi tipo de tarifa?</strong>',
+      type: 'info',
       html:
-        "<p style='text-align: left'>Si tu distribuidora de energía es del grupo de empresas AES, puedes verificar el tipo de tarifa en la siguiente imagen:</p>" +
+        '<p style=\'text-align: left\'>Si tu distribuidora de energía es del grupo de empresas AES, puedes verificar el tipo de tarifa en la siguiente imagen:</p>' +
         '<img alt="Factura AES" src="./assets/img/AESFactura.png" style="width: 100%;"/><br><br> ' +
         '<p style="text-align: left">Para más información puedes visitar el sitio oficial de <a href="http://www.aes-elsalvador.com/servicio-al-cliente/conoce-tu-factura/" target="_blank">AES</a></p>' +
-        "<br><br>" +
-        "<p style='text-align: left'>Si tu distribuidora de energía es DelSur, puedes verificar el tipo de tarifa en la siguiente imagen:</p>" +
+        '<br><br>' +
+        '<p style=\'text-align: left\'>Si tu distribuidora de energía es DelSur, puedes verificar el tipo de tarifa en la siguiente imagen:</p>' +
         '<img alt="Factura AES" src="./assets/img/DelSurFactura2.png" style="width: 100%;"/>' +
         '<p style="text-align: left">Para más información puedes visitar el sitio oficial de <a href="https://www.delsur.com.sv/conoce-tu-factura/" target="_blank">DelSur</a></p>' +
-        "<br><br>",
+        '<br><br>',
       showCloseButton: true,
       width: 600,
       confirmButtonText: '<i class="fa fa-thumbs-up"></i> Cerrar',
-      confirmButtonAriaLabel: "Thumbs up, great!",
+      confirmButtonAriaLabel: 'Thumbs up, great!',
     });
   }
 }

src/app/components/rates/rates.component.scss

@@ -133,22 +133,3 @@
     }
   }
 }
-
-.card {
-
-  .card-header-inverlec .card-icon,
-  .card-header-inverlec .card-text,
-  .card-header-inverlec:not(.card-header-icon):not(.card-header-text),
-  &.bg-inverlec,
-  &.card-rotate.bg-inverlec .front,
-  &.card-rotate.bg-inverlec .back {
-    background: linear-gradient(60deg, lighten($blue-custom, 3), $blue-custom);
-  }
-
-  .card-header-inverlec .card-icon,
-  .card-header-inverlec:not(.card-header-icon):not(.card-header-text),
-  .card-header-inverlec .card-text {
-    @include shadow-big-color($blue-custom);
-  }
-
-}

src/assets/scss/material-dashboard.scss

@@ -217,3 +217,22 @@ input.form-control.is-invalid {
   color: black;
   z-index: 1;
 }
+
+.card {
+
+  .card-header-inverlec .card-icon,
+  .card-header-inverlec .card-text,
+  .card-header-inverlec:not(.card-header-icon):not(.card-header-text),
+  &.bg-inverlec,
+  &.card-rotate.bg-inverlec .front,
+  &.card-rotate.bg-inverlec .back {
+    background: linear-gradient(60deg, lighten($blue-custom, 3), $blue-custom);
+  }
+
+  .card-header-inverlec .card-icon,
+  .card-header-inverlec:not(.card-header-icon):not(.card-header-text),
+  .card-header-inverlec .card-text {
+    @include shadow-big-color($blue-custom);
+  }
+
+}