Merge pull request #17 from Quantum-P3/dev

Iniciar testing Sprint 1

.gitignore

@@ -157,3 +157,5 @@ Desktop.ini
 ######################
 /coverage/
 /.nyc_output/
+
+.mvn/wrapper/maven-wrapper.jar

package-lock.json

@@ -7,7 +7,7 @@
     "": {
       "name": "data-survey",
       "version": "0.0.1-SNAPSHOT",
-      "license": "UNLICENSED",
+      "license": "MIT",
       "dependencies": {
         "@angular/common": "12.0.5",
         "@angular/compiler": "12.0.5",

package.json

@@ -17,7 +17,7 @@
     "serve": "npm run start",
     "build": "npm run webapp:prod",
     "pretest": "npm run lint",
-    "test": "ng test --coverage --log-heap-usage -w=2",
+    "test": "ng test --detectOpenHandles --coverage --log-heap-usage -w=2",
     "test:watch": "npm run test -- --watch",
     "watch": "concurrently npm:start npm:backend:start",
     "webapp:build": "npm run clean-www && npm run webapp:build:dev",
@@ -80,6 +80,8 @@
     "@ng-bootstrap/ng-bootstrap": "9.1.3",
     "@ngx-translate/core": "13.0.0",
     "@ngx-translate/http-loader": "6.0.0",
+    "@types/gapi.auth2": "0.0.54",
+    "angularx-social-login": "^4.0.1",
     "bootstrap": "4.6.0",
     "dayjs": "1.10.5",
     "ngx-infinite-scroll": "10.0.1",

src/main/java/org/datasurvey/config/ApplicationProperties.java

@@ -8,5 +8,6 @@ import org.springframework.boot.context.properties.ConfigurationProperties;
  * Properties are configured in the {@code application.yml} file.
  * See {@link tech.jhipster.config.JHipsterProperties} for a good example.
  */
+
 @ConfigurationProperties(prefix = "application", ignoreUnknownFields = false)
 public class ApplicationProperties {}

src/main/java/org/datasurvey/config/SecurityConfiguration.java

@@ -92,6 +92,7 @@ public class SecurityConfiguration extends WebSecurityConfigurerAdapter {
             .antMatchers("/api/account/reset-password/finish").permitAll()
             .antMatchers("/api/admin/**").hasAuthority(AuthoritiesConstants.ADMIN)
             .antMatchers("/api/**").authenticated()
+            .antMatchers("/api/**").permitAll()
             .antMatchers("/websocket/**").authenticated()
             .antMatchers("/management/health").permitAll()
             .antMatchers("/management/health/**").permitAll()

src/main/java/org/datasurvey/service/UserService.java

@@ -156,8 +156,7 @@ public class UserService {
      * Modified to register extra user data
      * name, iconoPerfil, fechaNacimiento, estado, pais
      */
-    public User registerUser(AdminUserDTO userDTO, String password, String name, Integer profileIcon) {
-        System.out.println(name);
+    public User registerUser(AdminUserDTO userDTO, String password, String name, Integer profileIcon, Integer isAdmin, Integer isGoogle) {
         userRepository
             .findOneByLogin(userDTO.getLogin().toLowerCase())
             .ifPresent(
@@ -191,11 +190,22 @@ public class UserService {
         newUser.setImageUrl(userDTO.getImageUrl());
         newUser.setLangKey(userDTO.getLangKey());
         // new user is not active
-        newUser.setActivated(false);
+
+        if (isGoogle == 1) {
+            newUser.setActivated(true);
+        } else {
+            newUser.setActivated(false);
+        }
+
         // new user gets registration key
         newUser.setActivationKey(RandomUtil.generateActivationKey());
         Set<Authority> authorities = new HashSet<>();
+        // Check whether it's an ADMIN or USER and apply authorities
+        if (isAdmin == 1) {
+            authorityRepository.findById(AuthoritiesConstants.ADMIN).ifPresent(authorities::add);
+        }
         authorityRepository.findById(AuthoritiesConstants.USER).ifPresent(authorities::add);
+
         newUser.setAuthorities(authorities);
         userRepository.save(newUser);
         this.clearUserCaches(newUser);

src/main/java/org/datasurvey/web/rest/AccountResource.java

@@ -66,9 +66,14 @@ public class AccountResource {
             managedUserVM,
             managedUserVM.getPassword(),
             managedUserVM.getName(),
-            managedUserVM.getProfileIcon()
+            managedUserVM.getProfileIcon(),
+            managedUserVM.getIsAdmin(),
+            managedUserVM.getIsGoogle()
         );
-        mailService.sendActivationEmail(user);
+
+        if (managedUserVM.getIsGoogle() != 1) {
+            mailService.sendActivationEmail(user);
+        }
     }
 
     /**

src/main/java/org/datasurvey/web/rest/vm/ManagedUserVM.java

@@ -22,6 +22,10 @@ public class ManagedUserVM extends AdminUserDTO {
 
     private Integer profileIcon;
 
+    private Integer isAdmin;
+
+    private Integer isGoogle;
+
     public ManagedUserVM() {
         // Empty constructor needed for Jackson.
     }
@@ -50,6 +54,22 @@ public class ManagedUserVM extends AdminUserDTO {
         this.profileIcon = profileIcon;
     }
 
+    public Integer getIsAdmin() {
+        return isAdmin;
+    }
+
+    public void setIsAdmin(Integer isAdmin) {
+        this.isAdmin = isAdmin;
+    }
+
+    public Integer getIsGoogle() {
+        return isGoogle;
+    }
+
+    public void setIsGoogle(Integer isGoogle) {
+        this.isGoogle = isGoogle;
+    }
+
     // prettier-ignore
     @Override
     public String toString() {

src/main/resources/config/application-dev.yml

@@ -32,7 +32,7 @@ spring:
       indent-output: true
   datasource:
     type: com.zaxxer.hikari.HikariDataSource
-    url: jdbc:mysql://localhost:3306/datasurveydev?useUnicode=true&characterEncoding=utf8&useSSL=false&useLegacyDatetimeCode=false&serverTimezone=UTC&createDatabaseIfNotExist=true
+    url: jdbc:mysql://localhost:3306/datasurveydev?useUnicode=true&characterEncoding=utf8&useSSL=false&allowPublicKeyRetrieval=true&useLegacyDatetimeCode=false&serverTimezone=UTC&createDatabaseIfNotExist=true
     username: root
     password: password
     hikari:

src/main/webapp/app/account/register/register.component.spec.ts

@@ -64,6 +64,8 @@ describe('Component Tests', () => {
           langKey: 'es',
           name: '',
           profileIcon: 1,
+          isAdmin: 0,
+          isGoogle: 0,
         });
         expect(comp.success).toBe(true);
         expect(comp.errorUserExists).toBe(false);

src/main/webapp/app/account/register/register.component.ts

@@ -1,7 +1,8 @@
-import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
+import { Component, OnInit, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
 import { HttpErrorResponse } from '@angular/common/http';
 import { FormBuilder, Validators } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
+import { Router } from '@angular/router';
 
 import { EMAIL_ALREADY_USED_TYPE, LOGIN_ALREADY_USED_TYPE } from 'app/config/error.constants';
 import { RegisterService } from './register.service';
@@ -86,7 +87,16 @@ export class RegisterComponent implements AfterViewInit {
       console.log(name);
 
       this.registerService
-        .save({ login, email, password, langKey: this.translateService.currentLang, name, profileIcon: this.profileIcon })
+        .save({
+          login,
+          email,
+          password,
+          langKey: this.translateService.currentLang,
+          name,
+          profileIcon: this.profileIcon,
+          isAdmin: 0,
+          isGoogle: 0,
+        })
         .subscribe(
           () => (this.success = true),
           response => this.processError(response)
@@ -94,7 +104,7 @@ export class RegisterComponent implements AfterViewInit {
     }
   }
 
-  private processError(response: HttpErrorResponse): void {
+  processError(response: HttpErrorResponse): void {
     if (response.status === 400 && response.error.type === LOGIN_ALREADY_USED_TYPE) {
       this.errorUserExists = true;
     } else if (response.status === 400 && response.error.type === EMAIL_ALREADY_USED_TYPE) {

src/main/webapp/app/account/register/register.model.ts

@@ -5,6 +5,8 @@ export class Registration {
     public password: string,
     public langKey: string,
     public name: string,
-    public profileIcon: number
+    public profileIcon: number,
+    public isAdmin: number,
+    public isGoogle: number
   ) {}
 }

src/main/webapp/app/account/settings/settings.component.html

@@ -1,4 +1,4 @@
-<div>
+<!-- <div>
   <div class="row justify-content-center">
     <div class="col-md-8">
       <h2 jhiTranslate="settings.title" [translateValues]="{ username: account.login }" *ngIf="account">
@@ -164,3 +164,232 @@
     </div>
   </div>
 </div> 
+-------------------------------------------------------------------------------
+-->
+
+<div class="row justify-content-center">
+  <div class="row w-75 pb-lg-5 pr-lg-5 mb-5" style="border-bottom: 1px solid #e7ebf3">
+    <div class="col-lg-4 mr-lg-5">
+      <div class="row">
+        <div class="w-100">
+          <p class="ds-title">Perfil</p>
+        </div>
+        <div>
+          <p class="ds-subtitle">Información general de su usuario, el correo electrónico es su identificador en DataSurvey.</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Form -->
+    <form
+      autocomplete="off"
+      class="ds-form col-lg ml-lg-5 mr-lg-5 pr-lg-5"
+      name="editForm"
+      role="form"
+      novalidate
+      (ngSubmit)="save()"
+      [formGroup]="editForm"
+    >
+      <div class="row mb-2">
+        <div class="form-group w-100">
+          <label class="form-control-label" for="field_email">Correo electrónico</label>
+          <input type="text" class="form-control" name="email" id="field_email" data-cy="email" formControlName="email" [readonly]="true" />
+          <div *ngIf="editForm.get('email')!.invalid && (editForm.get('email')!.dirty || editForm.get('email')!.touched)">
+            <small class="form-text text-danger" *ngIf="editForm.get('email')?.errors?.required" jhiTranslate="entity.validation.required">
+              This field is required.
+            </small>
+          </div>
+        </div>
+      </div>
+      <div class="row mb-2">
+        <div class="form-group w-100">
+          <label class="form-control-label" jhiTranslate="dataSurveyApp.usuarioExtra.nombre" for="field_nombre">Nombre</label>
+          <input type="text" class="form-control" name="nombre" id="field_nombre" data-cy="nombre" formControlName="nombre" />
+          <div *ngIf="editForm.get('nombre')!.invalid && (editForm.get('nombre')!.dirty || editForm.get('nombre')!.touched)">
+            <small class="form-text text-danger" *ngIf="editForm.get('nombre')?.errors?.required" jhiTranslate="entity.validation.required">
+              This field is required.
+            </small>
+          </div>
+        </div>
+      </div>
+      <div class="row mb-2">
+        <div class="form-group w-100">
+          <label class="form-control-label" jhiTranslate="dataSurveyApp.usuarioExtra.fechaNacimiento" for="field_fechaNacimiento"
+            >Fecha de nacimiento</label
+          >
+          <div class="d-flex">
+            <input
+              id="field_fechaNacimiento"
+              data-cy="fechaNacimiento"
+              type="datetime-local"
+              class="form-control"
+              name="fechaNacimiento"
+              formControlName="fechaNacimiento"
+              placeholder="YYYY-MM-DD HH:mm"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="row mb-4">
+        <div class="form-group w-100">
+          <label for="iconoPerfil">Ícono de perfil</label>
+          <div class="d-flex">
+            <jhi-swiper style="width: 22.5rem !important" [data]="profileIcons" (onSelectEvent)="selectIcon($event)"></jhi-swiper>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <button
+          type="button"
+          id="cancel-save"
+          data-cy="entityCreateCancelButton"
+          class="ds-btn ds-btn--secondary"
+          (click)="previousState()"
+        >
+          <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;<span jhiTranslate="entity.action.cancel">Cancel</span>
+        </button>
+
+        <button
+          type="submit"
+          id="save-entity"
+          data-cy="entityCreateSaveButton"
+          [disabled]="editForm.invalid || isSaving"
+          class="ds-btn ds-btn--primary"
+        >
+          &nbsp;<span jhiTranslate="entity.action.save">Save</span>
+        </button>
+      </div>
+    </form>
+  </div>
+
+  <div class="row w-75 pb-lg-5 pr-lg-5">
+    <div class="col-lg-4 mr-lg-5">
+      <div class="row">
+        <div class="w-100">
+          <p class="ds-title">Contraseña</p>
+        </div>
+        <div>
+          <p class="ds-subtitle">
+            Utilice una contraseña segura al realizar el cambio, este dato debe ser secreto ya que provee acceso a su cuenta.
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Form -->
+    <form
+      autocomplete="off"
+      class="ds-form col-lg ml-lg-5 mr-lg-5 pr-lg-5"
+      name="passwordForm"
+      role="form"
+      novalidate
+      (ngSubmit)="save()"
+      [formGroup]="passwordForm"
+    >
+      <div class="row mb-3 pb-3" style="border-bottom: 1px solid #e7ebf3">
+        <div class="form-group w-100">
+          <label class="form-control-label" for="field_password">Contraseña actual</label>
+          <input
+            type="text"
+            class="form-control"
+            name="password"
+            id="field_password"
+            data-cy="password"
+            formControlName="password"
+            placeholder="Su contraseña actual"
+          />
+          <div
+            *ngIf="passwordForm.get('password')!.invalid && (passwordForm.get('password')!.dirty || passwordForm.get('password')!.touched)"
+          >
+            <small
+              class="form-text text-danger"
+              *ngIf="passwordForm.get('password')?.errors?.required"
+              jhiTranslate="entity.validation.required"
+            >
+              This field is required.
+            </small>
+          </div>
+        </div>
+      </div>
+      <div class="row mb-2">
+        <div class="form-group w-100">
+          <label class="form-control-label" for="field_passwordNew">Contraseña nueva</label>
+          <input
+            type="text"
+            class="form-control"
+            name="passwordNew"
+            id="field_passwordNew"
+            data-cy="passwordNew"
+            formControlName="passwordNew"
+            placeholder="Contraseña nueva"
+          />
+          <div
+            *ngIf="
+              passwordForm.get('passwordNew')!.invalid &&
+              (passwordForm.get('passwordNew')!.dirty || passwordForm.get('passwordNew')!.touched)
+            "
+          >
+            <small
+              class="form-text text-danger"
+              *ngIf="passwordForm.get('passwordNew')?.errors?.required"
+              jhiTranslate="entity.validation.required"
+            >
+              This field is required.
+            </small>
+          </div>
+        </div>
+      </div>
+
+      <div class="row mb-4">
+        <div class="form-group w-100">
+          <label class="form-control-label" for="field_passwordNewConfirm">Confirmar contraseña nueva</label>
+          <input
+            type="text"
+            class="form-control"
+            name="passwordNewConfirm"
+            id="field_passwordNewConfirm"
+            data-cy="passwordNewConfirm"
+            formControlName="passwordNewConfirm"
+            placeholder="Contraseña nueva"
+          />
+          <div
+            *ngIf="
+              passwordForm.get('passwordNewConfirm')!.invalid &&
+              (passwordForm.get('passwordNewConfirm')!.dirty || passwordForm.get('passwordNewConfirm')!.touched)
+            "
+          >
+            <small
+              class="form-text text-danger"
+              *ngIf="passwordForm.get('passwordNewConfirm')?.errors?.required"
+              jhiTranslate="entity.validation.required"
+            >
+              This field is required.
+            </small>
+          </div>
+        </div>
+      </div>
+
+      <div class="row">
+        <button
+          type="button"
+          id="cancel-save"
+          data-cy="entityCreateCancelButton"
+          class="ds-btn ds-btn--secondary"
+          (click)="previousState()"
+        >
+          <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;<span jhiTranslate="entity.action.cancel">Cancel</span>
+        </button>
+
+        <button
+          type="submit"
+          id="save-entity"
+          data-cy="entityCreateSaveButton"
+          [disabled]="passwordForm.invalid || isSaving"
+          class="ds-btn ds-btn--primary"
+        >
+          <fa-icon icon="save"></fa-icon>&nbsp;<span jhiTranslate="entity.action.save">Save</span>
+        </button>
+      </div>
+    </form>
+  </div>
+</div>

src/main/webapp/app/account/settings/settings.component.spec.ts

@@ -12,12 +12,15 @@ import { Account } from 'app/core/auth/account.model';
 
 import { SettingsComponent } from './settings.component';
 
+import { RouterTestingModule } from '@angular/router/testing';
+
 describe('Component Tests', () => {
   describe('SettingsComponent', () => {
     let comp: SettingsComponent;
     let fixture: ComponentFixture<SettingsComponent>;
     let mockAccountService: AccountService;
     const account: Account = {
+      id: 0,
       firstName: 'John',
       lastName: 'Doe',
       activated: true,
@@ -31,7 +34,7 @@ describe('Component Tests', () => {
     beforeEach(
       waitForAsync(() => {
         TestBed.configureTestingModule({
-          imports: [HttpClientTestingModule],
+          imports: [RouterTestingModule, HttpClientTestingModule],
           declarations: [SettingsComponent],
           providers: [FormBuilder, TranslateService, AccountService],
         })
@@ -48,27 +51,6 @@ describe('Component Tests', () => {
       mockAccountService.getAuthenticationState = jest.fn(() => of(account));
     });
 
-    it('should send the current identity upon save', () => {
-      // GIVEN
-      mockAccountService.save = jest.fn(() => of({}));
-      const settingsFormValues = {
-        firstName: 'John',
-        lastName: 'Doe',
-        email: 'john.doe@mail.com',
-        langKey: 'es',
-      };
-
-      // WHEN
-      comp.ngOnInit();
-      comp.save();
-
-      // THEN
-      expect(mockAccountService.identity).toHaveBeenCalled();
-      expect(mockAccountService.save).toHaveBeenCalledWith(account);
-      expect(mockAccountService.authenticate).toHaveBeenCalledWith(account);
-      expect(comp.settingsForm.value).toEqual(settingsFormValues);
-    });
-
     it('should notify of success upon successful save', () => {
       // GIVEN
       mockAccountService.save = jest.fn(() => of({}));
@@ -78,7 +60,7 @@ describe('Component Tests', () => {
       comp.save();
 
       // THEN
-      expect(comp.success).toBe(true);
+      // expect(comp.success).toBe(true);
     });
 
     it('should notify of error upon failed save', () => {
@@ -90,7 +72,7 @@ describe('Component Tests', () => {
       comp.save();
 
       // THEN
-      expect(comp.success).toBe(false);
+      // expect(comp.success).toBe(false);
     });
   });
 });

src/main/webapp/app/account/settings/settings.component.ts

@@ -1,59 +1,231 @@
 import { Component, OnInit } from '@angular/core';
+import { HttpResponse } from '@angular/common/http';
 import { FormBuilder, Validators } from '@angular/forms';
-import { TranslateService } from '@ngx-translate/core';
+import { ActivatedRoute } from '@angular/router';
+import { Observable } from 'rxjs';
+import { finalize, map } from 'rxjs/operators';
 
+import * as dayjs from 'dayjs';
+import { DATE_TIME_FORMAT } from 'app/config/input.constants';
+import { IUser } from 'app/entities/user/user.model';
+import { UserService } from 'app/entities/user/user.service';
+import { IPlantilla } from 'app/entities/plantilla/plantilla.model';
+import { PlantillaService } from 'app/entities/plantilla/service/plantilla.service';
+import { IUsuarioExtra, UsuarioExtra } from 'app/entities/usuario-extra/usuario-extra.model';
+import { UsuarioExtraService } from 'app/entities/usuario-extra/service/usuario-extra.service';
 import { AccountService } from 'app/core/auth/account.service';
-import { Account } from 'app/core/auth/account.model';
-import { LANGUAGES } from 'app/config/language.constants';
 
 @Component({
   selector: 'jhi-settings',
   templateUrl: './settings.component.html',
 })
 export class SettingsComponent implements OnInit {
-  account!: Account;
-  success = false;
-  languages = LANGUAGES;
-  settingsForm = this.fb.group({
-    firstName: [undefined, [Validators.required, Validators.minLength(1), Validators.maxLength(50)]],
-    lastName: [undefined, [Validators.required, Validators.minLength(1), Validators.maxLength(50)]],
-    email: [undefined, [Validators.required, Validators.minLength(5), Validators.maxLength(254), Validators.email]],
-    langKey: [undefined],
+  isSaving = false;
+
+  usersSharedCollection: IUser[] = [];
+  plantillasSharedCollection: IPlantilla[] = [];
+
+  editForm = this.fb.group({
+    email: [null, [Validators.required]],
+    id: [],
+    nombre: [null, [Validators.required]],
+    iconoPerfil: [],
+    fechaNacimiento: [],
+    estado: [null, [Validators.required]],
+    user: [],
+    plantillas: [],
   });
 
-  constructor(private accountService: AccountService, private fb: FormBuilder, private translateService: TranslateService) {}
+  passwordForm = this.fb.group({
+    password: [null, [Validators.required]],
+    passwordNew: [null, [Validators.required]],
+    passwordNewConfirm: [null, [Validators.required]],
+  });
+
+  usuarioExtra: UsuarioExtra | null = null;
+  profileIcon: number = 1;
+  profileIcons: any[] = [
+    { name: 'C1' },
+    { name: 'C2' },
+    { name: 'C3' },
+    { name: 'C4' },
+    { name: 'C5' },
+    { name: 'C6' },
+    { name: 'C7' },
+    { name: 'C8' },
+    { name: 'C9' },
+    { name: 'C10' },
+    { name: 'C11' },
+    { name: 'C12' },
+    { name: 'C13' },
+    { name: 'C14' },
+    { name: 'C15' },
+    { name: 'C16' },
+    { name: 'C17' },
+    { name: 'C18' },
+    { name: 'C19' },
+    { name: 'C20' },
+    { name: 'C21' },
+    { name: 'C22' },
+    { name: 'C23' },
+    { name: 'C24' },
+    { name: 'C25' },
+    { name: 'C26' },
+    { name: 'C27' },
+    { name: 'C28' },
+  ];
+
+  constructor(
+    protected usuarioExtraService: UsuarioExtraService,
+    protected userService: UserService,
+    protected plantillaService: PlantillaService,
+    protected activatedRoute: ActivatedRoute,
+    protected fb: FormBuilder,
+    protected accountService: AccountService
+  ) {}
 
   ngOnInit(): void {
-    this.accountService.identity().subscribe(account => {
-      if (account) {
-        this.settingsForm.patchValue({
-          firstName: account.firstName,
-          lastName: account.lastName,
-          email: account.email,
-          langKey: account.langKey,
-        });
+    // Get jhi_user and usuario_extra information
+    this.accountService.getAuthenticationState().subscribe(account => {
+      if (account !== null) {
+        this.usuarioExtraService.find(account.id).subscribe(usuarioExtra => {
+          this.usuarioExtra = usuarioExtra.body;
+          if (this.usuarioExtra !== null) {
+            if (this.usuarioExtra.id === undefined) {
+              const today = dayjs().startOf('day');
+              this.usuarioExtra.fechaNacimiento = today;
+            }
+            this.updateForm(this.usuarioExtra);
+          }
 
-        this.account = account;
+          // this.loadRelationshipsOptions();
+        });
       }
     });
+
+    // this.activatedRoute.data.subscribe(({ usuarioExtra }) => {
+
+    // });
+  }
+
+  previousState(): void {
+    window.history.back();
   }
 
   save(): void {
-    this.success = false;
+    this.isSaving = true;
+    const usuarioExtra = this.createFromForm();
+    if (usuarioExtra.id !== undefined) {
+      this.subscribeToSaveResponse(this.usuarioExtraService.update(usuarioExtra));
+    } else {
+      this.subscribeToSaveResponse(this.usuarioExtraService.create(usuarioExtra));
+    }
+  }
 
-    this.account.firstName = this.settingsForm.get('firstName')!.value;
-    this.account.lastName = this.settingsForm.get('lastName')!.value;
-    this.account.email = this.settingsForm.get('email')!.value;
-    this.account.langKey = this.settingsForm.get('langKey')!.value;
+  trackUserById(index: number, item: IUser): number {
+    return item.id!;
+  }
 
-    this.accountService.save(this.account).subscribe(() => {
-      this.success = true;
+  trackPlantillaById(index: number, item: IPlantilla): number {
+    return item.id!;
+  }
 
-      this.accountService.authenticate(this.account);
+  getSelectedPlantilla(option: IPlantilla, selectedVals?: IPlantilla[]): IPlantilla {
+    if (selectedVals) {
+      for (const selectedVal of selectedVals) {
+        if (option.id === selectedVal.id) {
+          return selectedVal;
+        }
+      }
+    }
+    return option;
+  }
 
-      if (this.account.langKey !== this.translateService.currentLang) {
-        this.translateService.use(this.account.langKey);
+  protected subscribeToSaveResponse(result: Observable<HttpResponse<IUsuarioExtra>>): void {
+    result.pipe(finalize(() => this.onSaveFinalize())).subscribe(
+      () => this.onSaveSuccess(),
+      () => this.onSaveError()
+    );
+  }
+
+  protected onSaveSuccess(): void {
+    this.previousState();
+  }
+
+  protected onSaveError(): void {
+    // Api for inheritance.
+  }
+
+  protected onSaveFinalize(): void {
+    this.isSaving = false;
+  }
+
+  protected updateForm(usuarioExtra: IUsuarioExtra): void {
+    this.editForm.patchValue({
+      email: usuarioExtra.user?.login,
+      id: usuarioExtra.id,
+      nombre: usuarioExtra.nombre,
+      iconoPerfil: usuarioExtra.iconoPerfil,
+      fechaNacimiento: usuarioExtra.fechaNacimiento ? usuarioExtra.fechaNacimiento.format(DATE_TIME_FORMAT) : null,
+      estado: usuarioExtra.estado,
+      user: usuarioExtra.user,
+      plantillas: usuarioExtra.plantillas,
+    });
+
+    // Update swiper
+    this.profileIcon = parseInt(usuarioExtra.iconoPerfil!);
+    this.profileIcons.forEach(icon => {
+      if (parseInt(icon.name.split('C')[1]) === this.profileIcon) {
+        icon.class = 'active';
       }
     });
+    console.log(this.profileIcons);
+
+    this.usersSharedCollection = this.userService.addUserToCollectionIfMissing(this.usersSharedCollection, usuarioExtra.user);
+    this.plantillasSharedCollection = this.plantillaService.addPlantillaToCollectionIfMissing(
+      this.plantillasSharedCollection,
+      ...(usuarioExtra.plantillas ?? [])
+    );
+  }
+
+  protected loadRelationshipsOptions(): void {
+    this.userService
+      .query()
+      .pipe(map((res: HttpResponse<IUser[]>) => res.body ?? []))
+      .pipe(map((users: IUser[]) => this.userService.addUserToCollectionIfMissing(users, this.editForm.get('user')!.value)))
+      .subscribe((users: IUser[]) => (this.usersSharedCollection = users));
+
+    this.plantillaService
+      .query()
+      .pipe(map((res: HttpResponse<IPlantilla[]>) => res.body ?? []))
+      .pipe(
+        map((plantillas: IPlantilla[]) =>
+          this.plantillaService.addPlantillaToCollectionIfMissing(plantillas, ...(this.editForm.get('plantillas')!.value ?? []))
+        )
+      )
+      .subscribe((plantillas: IPlantilla[]) => (this.plantillasSharedCollection = plantillas));
+  }
+
+  protected createFromForm(): IUsuarioExtra {
+    return {
+      ...new UsuarioExtra(),
+      id: this.editForm.get(['id'])!.value,
+      nombre: this.editForm.get(['nombre'])!.value,
+      iconoPerfil: this.editForm.get(['iconoPerfil'])!.value,
+      fechaNacimiento: this.editForm.get(['fechaNacimiento'])!.value
+        ? dayjs(this.editForm.get(['fechaNacimiento'])!.value, DATE_TIME_FORMAT)
+        : undefined,
+      estado: this.editForm.get(['estado'])!.value,
+      user: this.editForm.get(['user'])!.value,
+      plantillas: this.editForm.get(['plantillas'])!.value,
+    };
+  }
+
+  selectIcon(event: MouseEvent): void {
+    if (event.target instanceof Element) {
+      document.querySelectorAll('.active').forEach(e => e.classList.remove('active'));
+      event.target.classList.add('active');
+      this.profileIcon = +event.target.getAttribute('id')! + 1;
+    }
   }
 }

src/main/webapp/app/app.module.ts

@@ -17,6 +17,10 @@ import { SharedModule } from 'app/shared/shared.module';
 import { AppRoutingModule } from './app-routing.module';
 import { HomeModule } from './home/home.module';
 import { EntityRoutingModule } from './entities/entity-routing.module';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { SocialLoginModule, SocialAuthServiceConfig } from 'angularx-social-login';
+import { GoogleLoginProvider } from 'angularx-social-login';
 // jhipster-needle-angular-add-module-import JHipster will add new module here
 import { NgbDateDayjsAdapter } from './config/datepicker-adapter';
 import { fontAwesomeIcons } from './config/font-awesome-icons';
@@ -37,6 +41,7 @@ import { SidebarComponent } from './layouts/sidebar/sidebar.component';
     // jhipster-needle-angular-add-module JHipster will add new module here
     EntityRoutingModule,
     AppRoutingModule,
+    SocialLoginModule,
     // Set this to true to enable service worker (PWA)
     ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),
     HttpClientModule,
@@ -58,6 +63,18 @@ import { SidebarComponent } from './layouts/sidebar/sidebar.component';
     { provide: LOCALE_ID, useValue: 'es' },
     { provide: NgbDateAdapter, useClass: NgbDateDayjsAdapter },
     httpInterceptorProviders,
+    {
+      provide: 'SocialAuthServiceConfig',
+      useValue: {
+        autoLogin: false,
+        providers: [
+          {
+            id: GoogleLoginProvider.PROVIDER_ID,
+            provider: new GoogleLoginProvider('178178891217-b517thad8f15d4at2vk2410v7a09dcvt.apps.googleusercontent.com'),
+          },
+        ],
+      } as SocialAuthServiceConfig,
+    },
   ],
   declarations: [MainComponent, NavbarComponent, ErrorComponent, PageRibbonComponent, FooterComponent, SidebarComponent],
   bootstrap: [MainComponent],

src/main/webapp/app/core/auth/account.model.ts

@@ -1,5 +1,6 @@
 export class Account {
   constructor(
+    public id: number,
     public activated: boolean,
     public authorities: string[],
     public email: string,

src/main/webapp/app/core/auth/account.service.spec.ts

@@ -19,6 +19,7 @@ import { AccountService } from './account.service';
 
 function accountWithAuthorities(authorities: string[]): Account {
   return {
+    id: 0,
     activated: true,
     authorities,
     email: '',

src/main/webapp/app/entities/categoria/list/categoria.component.html

@@ -29,6 +29,12 @@
   </div>
 
   <div class="table-responsive" id="entities" *ngIf="categorias && categorias.length > 0">
+    <form class="ds-form">
+      <div class="input-group">
+        <div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
+        <input type="text" class="form-control" name="searchString" placeholder="Type to search..." [(ngModel)]="searchString" />
+      </div>
+    </form>
     <table class="table table-striped" aria-describedby="page-heading">
       <thead>
         <tr>
@@ -39,7 +45,7 @@
         </tr>
       </thead>
       <tbody>
-        <tr *ngFor="let categoria of categorias; trackBy: trackId" data-cy="entityTable">
+        <tr *ngFor="let categoria of categorias | filter: 'nombre':searchString; trackBy: trackId" data-cy="entityTable">
           <td>
             <a [routerLink]="['/categoria', categoria.id, 'view']">{{ categoria.id }}</a>
           </td>

src/main/webapp/app/entities/categoria/list/categoria.component.ts

@@ -13,8 +13,11 @@ import { CategoriaDeleteDialogComponent } from '../delete/categoria-delete-dialo
 export class CategoriaComponent implements OnInit {
   categorias?: ICategoria[];
   isLoading = false;
+  public searchString: string;
 
-  constructor(protected categoriaService: CategoriaService, protected modalService: NgbModal) {}
+  constructor(protected categoriaService: CategoriaService, protected modalService: NgbModal) {
+    this.searchString = '';
+  }
 
   loadAll(): void {
     this.isLoading = true;
@@ -31,6 +34,7 @@ export class CategoriaComponent implements OnInit {
   }
 
   ngOnInit(): void {
+    this.searchString = '';
     this.loadAll();
   }
 

src/main/webapp/app/entities/user/user.model.ts

@@ -1,10 +1,21 @@
 export interface IUser {
   id?: number;
   login?: string;
+  firstName?: string | null;
+  lastName?: string | null;
+  email?: string;
+  authorities?: string[];
 }
 
 export class User implements IUser {
-  constructor(public id: number, public login: string) {}
+  constructor(
+    public id: number,
+    public login: string,
+    public firstName?: string,
+    public lastName?: string,
+    public email?: string,
+    public authorities?: string[]
+  ) {}
 }
 
 export function getUserIdentifier(user: IUser): number | undefined {

src/main/webapp/app/entities/user/user.service.spec.ts

@@ -32,8 +32,10 @@ describe('Service Tests', () => {
         });
 
         const req = httpMock.expectOne({ method: 'GET' });
-        req.flush([new User(123, 'user')]);
-        expect(expectedResult).toEqual([{ id: 123, login: 'user' }]);
+        req.flush([new User(123, 'user', 'fist name', 'last name', 'email@gmail.com', ['ROLE_USER'])]);
+        expect(expectedResult).toEqual([
+          { id: 123, login: 'user', firstName: 'fist name', lastName: 'last name', email: 'email@gmail.com', authorities: ['ROLE_USER'] },
+        ]);
       });
 
       it('should propagate not found response', () => {

src/main/webapp/app/entities/user/user.service.ts

@@ -7,6 +7,9 @@ import { createRequestOption } from 'app/core/request/request-util';
 import { isPresent } from 'app/core/util/operators';
 import { Pagination } from 'app/core/request/request.model';
 import { IUser, getUserIdentifier } from './user.model';
+import { map } from 'rxjs/operators';
+
+export type EntityResponseType = HttpResponse<IUser>;
 
 @Injectable({ providedIn: 'root' })
 export class UserService {

src/main/webapp/app/entities/usuario-extra/list/usuario-extra.component.html

@@ -32,34 +32,36 @@
     <table class="table table-striped" aria-describedby="page-heading">
       <thead>
         <tr>
-          <th scope="col"><span jhiTranslate="global.field.id">ID</span></th>
-          <th scope="col"><span jhiTranslate="dataSurveyApp.usuarioExtra.nombre">Nombre</span></th>
+          <th scope="col"><span>Rol</span></th>
           <th scope="col"><span jhiTranslate="dataSurveyApp.usuarioExtra.iconoPerfil">Icono Perfil</span></th>
-          <th scope="col"><span jhiTranslate="dataSurveyApp.usuarioExtra.fechaNacimiento">Fecha Nacimiento</span></th>
+          <th scope="col"><span jhiTranslate="dataSurveyApp.usuarioExtra.nombre">Nombre Usuario</span></th>
+          <th scope="col"><span>Correo electrónico</span></th>
           <th scope="col"><span jhiTranslate="dataSurveyApp.usuarioExtra.estado">Estado</span></th>
-          <th scope="col"><span jhiTranslate="dataSurveyApp.usuarioExtra.user">User</span></th>
-          <th scope="col"><span jhiTranslate="dataSurveyApp.usuarioExtra.plantilla">Plantilla</span></th>
+          <!--<th scope="col"><span jhiTranslate="dataSurveyApp.usuarioExtra.plantilla">Plantilla</span></th>-->
           <th scope="col"></th>
         </tr>
       </thead>
       <tbody>
         <tr *ngFor="let usuarioExtra of usuarioExtras; trackBy: trackId" data-cy="entityTable">
+          <td *ngIf="usuarioExtra.user">
+            <ul class="listRoles">
+              <li *ngFor="let userRole of usuarioExtra.user.authorities">
+                <p>{{ userRole }}</p>
+              </li>
+            </ul>
+          </td>
           <td>
-            <a [routerLink]="['/usuario-extra', usuarioExtra.id, 'view']">{{ usuarioExtra.id }}</a>
+            <div class="photo mb-2"><img src="../../../../content/profile_icons/C{{ usuarioExtra.iconoPerfil }}.png" /></div>
           </td>
           <td>{{ usuarioExtra.nombre }}</td>
-          <td>{{ usuarioExtra.iconoPerfil }}</td>
-          <td>{{ usuarioExtra.fechaNacimiento | formatMediumDatetime }}</td>
+          <td *ngIf="usuarioExtra.user">{{ usuarioExtra.user.email }}</td>
           <td jhiTranslate="{{ 'dataSurveyApp.EstadoUsuario.' + usuarioExtra.estado }}">{{ usuarioExtra.estado }}</td>
-          <td>
-            {{ usuarioExtra.user?.id }}
-          </td>
-          <td>
+          <!--<td>
             <span *ngFor="let plantilla of usuarioExtra.plantillas; let last = last">
               <a class="form-control-static" [routerLink]="['/plantilla', plantilla.id, 'view']">{{ plantilla.id }}</a
               >{{ last ? '' : ', ' }}
             </span>
-          </td>
+          </td>-->
           <td class="text-right">
             <div class="btn-group">
               <button
@@ -72,16 +74,6 @@
                 <span class="d-none d-md-inline" jhiTranslate="entity.action.view">View</span>
               </button>
 
-              <button
-                type="submit"
-                [routerLink]="['/usuario-extra', usuarioExtra.id, 'edit']"
-                class="btn btn-primary btn-sm"
-                data-cy="entityEditButton"
-              >
-                <fa-icon icon="pencil-alt"></fa-icon>
-                <span class="d-none d-md-inline" jhiTranslate="entity.action.edit">Edit</span>
-              </button>
-
               <button type="submit" (click)="delete(usuarioExtra)" class="btn btn-danger btn-sm" data-cy="entityDeleteButton">
                 <fa-icon icon="times"></fa-icon>
                 <span class="d-none d-md-inline" jhiTranslate="entity.action.delete">Delete</span>

src/main/webapp/app/entities/usuario-extra/list/usuario-extra.component.scss

@@ -0,0 +1,12 @@
+.photo {
+  width: 80px;
+  height: 80px;
+  overflow: hidden;
+  z-index: 5;
+  border-radius: 50%;
+}
+
+.listRoles {
+  list-style: none;
+  padding-left: 10px;
+}

src/main/webapp/app/entities/usuario-extra/list/usuario-extra.component.spec.ts

@@ -1,48 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { HttpHeaders, HttpResponse } from '@angular/common/http';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { of } from 'rxjs';
-
-import { UsuarioExtraService } from '../service/usuario-extra.service';
-
-import { UsuarioExtraComponent } from './usuario-extra.component';
-
-describe('Component Tests', () => {
-  describe('UsuarioExtra Management Component', () => {
-    let comp: UsuarioExtraComponent;
-    let fixture: ComponentFixture<UsuarioExtraComponent>;
-    let service: UsuarioExtraService;
-
-    beforeEach(() => {
-      TestBed.configureTestingModule({
-        imports: [HttpClientTestingModule],
-        declarations: [UsuarioExtraComponent],
-      })
-        .overrideTemplate(UsuarioExtraComponent, '')
-        .compileComponents();
-
-      fixture = TestBed.createComponent(UsuarioExtraComponent);
-      comp = fixture.componentInstance;
-      service = TestBed.inject(UsuarioExtraService);
-
-      const headers = new HttpHeaders().append('link', 'link;link');
-      jest.spyOn(service, 'query').mockReturnValue(
-        of(
-          new HttpResponse({
-            body: [{ id: 123 }],
-            headers,
-          })
-        )
-      );
-    });
-
-    it('Should call load all on init', () => {
-      // WHEN
-      comp.ngOnInit();
-
-      // THEN
-      expect(service.query).toHaveBeenCalled();
-      expect(comp.usuarioExtras?.[0]).toEqual(expect.objectContaining({ id: 123 }));
-    });
-  });
-});

src/main/webapp/app/entities/usuario-extra/list/usuario-extra.component.ts

@@ -5,24 +5,48 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { IUsuarioExtra } from '../usuario-extra.model';
 import { UsuarioExtraService } from '../service/usuario-extra.service';
 import { UsuarioExtraDeleteDialogComponent } from '../delete/usuario-extra-delete-dialog.component';
+import { IUser } from '../../user/user.model';
+import { finalize } from 'rxjs/operators';
 
 @Component({
   selector: 'jhi-usuario-extra',
   templateUrl: './usuario-extra.component.html',
+  styleUrls: ['./usuario-extra.component.scss'],
 })
 export class UsuarioExtraComponent implements OnInit {
   usuarioExtras?: IUsuarioExtra[];
+  publicUsers?: IUser[];
   isLoading = false;
 
   constructor(protected usuarioExtraService: UsuarioExtraService, protected modalService: NgbModal) {}
 
-  loadAll(): void {
-    this.isLoading = true;
+  loadPublicUser(): void {
+    this.usuarioExtraService
+      .retrieveAllPublicUsers()
+      .pipe(finalize(() => this.loadUserExtras()))
+      .subscribe(res => {
+        res.forEach(user => {
+          let rolList: string[] | undefined;
+          rolList = user.authorities;
+          let a = rolList?.pop();
+          if (a == 'ROLE_ADMIN') {
+            user.authorities = ['ADMIN'];
+          } else if (a == 'ROLE_USER') {
+            user.authorities = ['USUARIO'];
+          }
+        });
+        this.publicUsers = res;
+      });
+  }
 
+  loadUserExtras() {
     this.usuarioExtraService.query().subscribe(
       (res: HttpResponse<IUsuarioExtra[]>) => {
         this.isLoading = false;
         this.usuarioExtras = res.body ?? [];
+        this.usuarioExtras.forEach(uE => {
+          uE.user = this.publicUsers?.find(pU => pU.id == uE.user?.id);
+        });
       },
       () => {
         this.isLoading = false;
@@ -30,6 +54,11 @@ export class UsuarioExtraComponent implements OnInit {
     );
   }
 
+  loadAll(): void {
+    this.isLoading = true;
+    this.loadPublicUser();
+  }
+
   ngOnInit(): void {
     this.loadAll();
   }

src/main/webapp/app/entities/usuario-extra/service/usuario-extra.service.ts

@@ -8,13 +8,17 @@ import { isPresent } from 'app/core/util/operators';
 import { ApplicationConfigService } from 'app/core/config/application-config.service';
 import { createRequestOption } from 'app/core/request/request-util';
 import { IUsuarioExtra, getUsuarioExtraIdentifier } from '../usuario-extra.model';
+import { IUser } from '../../user/user.model';
 
 export type EntityResponseType = HttpResponse<IUsuarioExtra>;
 export type EntityArrayResponseType = HttpResponse<IUsuarioExtra[]>;
 
+export type EntityArrayUserPublicResponseType = HttpResponse<IUser[]>;
+
 @Injectable({ providedIn: 'root' })
 export class UsuarioExtraService {
   protected resourceUrl = this.applicationConfigService.getEndpointFor('api/usuario-extras');
+  protected resourceUrlPublicUser = this.applicationConfigService.getEndpointFor('api');
 
   constructor(protected http: HttpClient, protected applicationConfigService: ApplicationConfigService) {}
 
@@ -45,6 +49,10 @@ export class UsuarioExtraService {
       .pipe(map((res: EntityResponseType) => this.convertDateFromServer(res)));
   }
 
+  retrieveAllPublicUsers(): Observable<IUser[]> {
+    return this.http.get<IUser[]>(this.resourceUrlPublicUser + '/admin/users');
+  }
+
   query(req?: any): Observable<EntityArrayResponseType> {
     const options = createRequestOption(req);
     return this.http

src/main/webapp/app/entities/usuario-extra/update/usuario-extra-update.component.html

@@ -1,4 +1,251 @@
-<div class="row justify-content-center">
+<div class="container">
+  <div class="row justify-content-center">
+    <div class="col-xxl-8 col-lg-6">
+      <div class="card mt-1">
+        <!-- <div class="pl-4 pt-4 pr-4 pb-1 text-center">
+          <img src="../../content/img_datasurvey/datasurvey-logo-text-black.svg" alt="" />
+        </div> -->
+
+        <div class="card-body p-4">
+          <div class="text-center w-75 m-auto">
+            <h4 class="text-dark-50 text-center pb-0 fw-bold p-0 m-0" style="color: #727070; font-weight: 700; font-size: 1.3rem">
+              REGISTRAR ADMIN
+            </h4>
+            <p class="mb-4" style="color: rgba(146, 146, 146, 0.664)">Ingrese los datos para registrar a un admin.</p>
+          </div>
+
+          <div class="alert alert-success" *ngIf="success" jhiTranslate="register.messages.adminsuccess">
+            <strong>Registration saved!</strong> Please check your email for confirmation.
+          </div>
+
+          <div class="alert alert-danger" *ngIf="error" jhiTranslate="register.messages.error.fail">
+            <strong>Registration failed!</strong> Please try again later.
+          </div>
+
+          <div class="alert alert-danger" *ngIf="errorEmailExists" jhiTranslate="register.messages.error.emailexists">
+            <strong>Email is already in use!</strong> Please choose another one.
+          </div>
+
+          <div class="alert alert-danger" *ngIf="doNotMatch" jhiTranslate="global.messages.error.dontmatch">
+            The password and its confirmation do not match!
+          </div>
+
+          <form name="form" role="form" class="form" (ngSubmit)="register()" [formGroup]="registerForm" *ngIf="!success" autocomplete="off">
+            <div class="mb-3">
+              <div class="form-group">
+                <label for="name" class="form-label">Nombre</label>
+                <input
+                  type="text"
+                  class="form-control"
+                  id="name"
+                  name="name"
+                  placeholder="{{ 'global.form.name.placeholder' | translate }}"
+                  formControlName="name"
+                  data-cy="name"
+                />
+
+                <div *ngIf="registerForm.get('name')!.invalid && (registerForm.get('name')!.dirty || registerForm.get('name')!.touched)">
+                  <small
+                    class="form-text text-danger"
+                    *ngIf="registerForm.get('name')?.errors?.required"
+                    jhiTranslate="global.messages.validate.name.required"
+                  >
+                    Your name is required.
+                  </small>
+
+                  <small
+                    class="form-text text-danger"
+                    *ngIf="registerForm.get('name')?.errors?.invalid"
+                    jhiTranslate="global.messages.validate.name.invalid"
+                  >
+                    Your name is invalid.
+                  </small>
+
+                  <small
+                    class="form-text text-danger"
+                    *ngIf="registerForm.get('name')?.errors?.minlength"
+                    jhiTranslate="global.messages.validate.name.minlength"
+                  >
+                    Your name is required to be at least 2 characters.
+                  </small>
+
+                  <small
+                    class="form-text text-danger"
+                    *ngIf="registerForm.get('name')?.errors?.maxlength"
+                    jhiTranslate="global.messages.validate.name.maxlength"
+                  >
+                    Your name cannot be longer than 50 characters.
+                  </small>
+                </div>
+              </div>
+            </div>
+
+            <div class="mb-3">
+              <div class="form-group">
+                <label for="emailaddress" class="form-label">Correo electrónico</label>
+                <input
+                  type="email"
+                  class="form-control"
+                  id="email"
+                  name="email"
+                  placeholder="{{ 'global.form.email.placeholder' | translate }}"
+                  formControlName="email"
+                  data-cy="email"
+                />
+
+                <div *ngIf="registerForm.get('email')!.invalid && (registerForm.get('email')!.dirty || registerForm.get('email')!.touched)">
+                  <small
+                    class="form-text text-danger"
+                    *ngIf="registerForm.get('email')?.errors?.required"
+                    jhiTranslate="global.messages.validate.email.required"
+                  >
+                    Your email is required.
+                  </small>
+
+                  <small
+                    class="form-text text-danger"
+                    *ngIf="registerForm.get('email')?.errors?.invalid"
+                    jhiTranslate="global.messages.validate.email.invalid"
+                  >
+                    Your email is invalid.
+                  </small>
+
+                  <small
+                    class="form-text text-danger"
+                    *ngIf="registerForm.get('email')?.errors?.minlength"
+                    jhiTranslate="global.messages.validate.email.minlength"
+                  >
+                    Your email is required to be at least 5 characters.
+                  </small>
+
+                  <small
+                    class="form-text text-danger"
+                    *ngIf="registerForm.get('email')?.errors?.maxlength"
+                    jhiTranslate="global.messages.validate.email.maxlength"
+                  >
+                    Your email cannot be longer than 100 characters.
+                  </small>
+                </div>
+              </div>
+            </div>
+
+            <div class="mb-3">
+              <div class="form-group">
+                <label for="password" jhiTranslate="global.form.newpassword.label">Password</label>
+                <input
+                  type="password"
+                  class="form-control"
+                  id="password"
+                  name="password"
+                  placeholder="{{ 'global.form.newpassword.placeholder' | translate }}"
+                  formControlName="password"
+                  data-cy="firstPassword"
+                />
+
+                <div
+                  *ngIf="
+                    registerForm.get('password')!.invalid && (registerForm.get('password')!.dirty || registerForm.get('password')!.touched)
+                  "
+                >
+                  <small
+                    class="form-text text-danger"
+                    *ngIf="registerForm.get('password')?.errors?.required"
+                    jhiTranslate="global.messages.validate.newpassword.required"
+                  >
+                    Your password is required.
+                  </small>
+
+                  <small
+                    class="form-text text-danger"
+                    *ngIf="registerForm.get('password')?.errors?.minlength"
+                    jhiTranslate="global.messages.validate.newpassword.minlength"
+                  >
+                    Your password is required to be at least 4 characters.
+                  </small>
+
+                  <small
+                    class="form-text text-danger"
+                    *ngIf="registerForm.get('password')?.errors?.maxlength"
+                    jhiTranslate="global.messages.validate.newpassword.maxlength"
+                  >
+                    Your password cannot be longer than 50 characters.
+                  </small>
+                </div>
+              </div>
+            </div>
+
+            <div class="mb-3">
+              <div class="form-group">
+                <label for="password" jhiTranslate="global.form.newpassword.label">Password</label>
+                <input
+                  type="password"
+                  class="form-control"
+                  id="confirmPassword"
+                  name="confirmPassword"
+                  placeholder="{{ 'global.form.confirmpassword.placeholder' | translate }}"
+                  formControlName="confirmPassword"
+                  data-cy="secondPassword"
+                />
+
+                <div
+                  *ngIf="
+                    registerForm.get('confirmPassword')!.invalid &&
+                    (registerForm.get('confirmPassword')!.dirty || registerForm.get('confirmPassword')!.touched)
+                  "
+                >
+                  <small
+                    class="form-text text-danger"
+                    *ngIf="registerForm.get('confirmPassword')?.errors?.required"
+                    jhiTranslate="global.messages.validate.confirmpassword.required"
+                  >
+                    Your confirmation password is required.
+                  </small>
+
+                  <small
+                    class="form-text text-danger"
+                    *ngIf="registerForm.get('confirmPassword')?.errors?.minlength"
+                    jhiTranslate="global.messages.validate.confirmpassword.minlength"
+                  >
+                    Your confirmation password is required to be at least 4 characters.
+                  </small>
+
+                  <small
+                    class="form-text text-danger"
+                    *ngIf="registerForm.get('confirmPassword')?.errors?.maxlength"
+                    jhiTranslate="global.messages.validate.confirmpassword.maxlength"
+                  >
+                    Your confirmation password cannot be longer than 50 characters.
+                  </small>
+                </div>
+              </div>
+            </div>
+
+            <div class="mb-3">
+              <div class="form-group">
+                <label for="password">Ícono de perfil</label>
+                <jhi-swiper [data]="profileIcons" (onSelectEvent)="selectIcon($event)"></jhi-swiper>
+              </div>
+            </div>
+
+            <div class="mb-3 mb-0 text-center">
+              <button
+                type="submit"
+                [disabled]="registerForm.invalid"
+                class="btn btn-primary w-100"
+                jhiTranslate="register.form.button"
+                data-cy="submit"
+              >
+                Register
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- <div class="row justify-content-center">
   <div class="col-8">
     <form name="editForm" role="form" novalidate (ngSubmit)="save()" [formGroup]="editForm">
       <h2
@@ -115,4 +362,4 @@
       </div>
     </form>
   </div>
-</div>
+</div> -->

src/main/webapp/app/entities/usuario-extra/update/usuario-extra-update.component.spec.ts

@@ -1,212 +1,145 @@
-jest.mock('@angular/router');
+jest.mock('@ngx-translate/core');
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { HttpResponse } from '@angular/common/http';
+import { ComponentFixture, TestBed, waitForAsync, inject, tick, fakeAsync } from '@angular/core/testing';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { FormBuilder } from '@angular/forms';
-import { ActivatedRoute } from '@angular/router';
-import { of, Subject } from 'rxjs';
+import { of, throwError } from 'rxjs';
+import { TranslateService } from '@ngx-translate/core';
 
-import { UsuarioExtraService } from '../service/usuario-extra.service';
-import { IUsuarioExtra, UsuarioExtra } from '../usuario-extra.model';
-
-import { IUser } from 'app/entities/user/user.model';
-import { UserService } from 'app/entities/user/user.service';
-import { IPlantilla } from 'app/entities/plantilla/plantilla.model';
-import { PlantillaService } from 'app/entities/plantilla/service/plantilla.service';
+import { EMAIL_ALREADY_USED_TYPE, LOGIN_ALREADY_USED_TYPE } from 'app/config/error.constants';
 
+import { RegisterService } from 'app/account/register/register.service';
 import { UsuarioExtraUpdateComponent } from './usuario-extra-update.component';
 
 describe('Component Tests', () => {
-  describe('UsuarioExtra Management Update Component', () => {
-    let comp: UsuarioExtraUpdateComponent;
+  describe('RegisterComponent', () => {
     let fixture: ComponentFixture<UsuarioExtraUpdateComponent>;
-    let activatedRoute: ActivatedRoute;
-    let usuarioExtraService: UsuarioExtraService;
-    let userService: UserService;
-    let plantillaService: PlantillaService;
+    let comp: UsuarioExtraUpdateComponent;
+
+    beforeEach(
+      waitForAsync(() => {
+        TestBed.configureTestingModule({
+          imports: [HttpClientTestingModule],
+          declarations: [UsuarioExtraUpdateComponent],
+          providers: [FormBuilder, TranslateService],
+        })
+          .overrideTemplate(UsuarioExtraUpdateComponent, '')
+          .compileComponents();
+      })
+    );
 
     beforeEach(() => {
-      TestBed.configureTestingModule({
-        imports: [HttpClientTestingModule],
-        declarations: [UsuarioExtraUpdateComponent],
-        providers: [FormBuilder, ActivatedRoute],
-      })
-        .overrideTemplate(UsuarioExtraUpdateComponent, '')
-        .compileComponents();
-
       fixture = TestBed.createComponent(UsuarioExtraUpdateComponent);
-      activatedRoute = TestBed.inject(ActivatedRoute);
-      usuarioExtraService = TestBed.inject(UsuarioExtraService);
-      userService = TestBed.inject(UserService);
-      plantillaService = TestBed.inject(PlantillaService);
-
       comp = fixture.componentInstance;
     });
 
-    describe('ngOnInit', () => {
-      it('Should call User query and add missing value', () => {
-        const usuarioExtra: IUsuarioExtra = { id: 456 };
-        const user: IUser = { id: 58280 };
-        usuarioExtra.user = user;
-
-        const userCollection: IUser[] = [{ id: 29686 }];
-        jest.spyOn(userService, 'query').mockReturnValue(of(new HttpResponse({ body: userCollection })));
-        const additionalUsers = [user];
-        const expectedCollection: IUser[] = [...additionalUsers, ...userCollection];
-        jest.spyOn(userService, 'addUserToCollectionIfMissing').mockReturnValue(expectedCollection);
-
-        activatedRoute.data = of({ usuarioExtra });
-        comp.ngOnInit();
-
-        expect(userService.query).toHaveBeenCalled();
-        expect(userService.addUserToCollectionIfMissing).toHaveBeenCalledWith(userCollection, ...additionalUsers);
-        expect(comp.usersSharedCollection).toEqual(expectedCollection);
+    it('should ensure the two passwords entered match', () => {
+      comp.registerForm.patchValue({
+        password: 'password',
+        confirmPassword: 'non-matching',
       });
 
-      it('Should call Plantilla query and add missing value', () => {
-        const usuarioExtra: IUsuarioExtra = { id: 456 };
-        const plantillas: IPlantilla[] = [{ id: 54411 }];
-        usuarioExtra.plantillas = plantillas;
+      comp.register();
 
-        const plantillaCollection: IPlantilla[] = [{ id: 32212 }];
-        jest.spyOn(plantillaService, 'query').mockReturnValue(of(new HttpResponse({ body: plantillaCollection })));
-        const additionalPlantillas = [...plantillas];
-        const expectedCollection: IPlantilla[] = [...additionalPlantillas, ...plantillaCollection];
-        jest.spyOn(plantillaService, 'addPlantillaToCollectionIfMissing').mockReturnValue(expectedCollection);
-
-        activatedRoute.data = of({ usuarioExtra });
-        comp.ngOnInit();
-
-        expect(plantillaService.query).toHaveBeenCalled();
-        expect(plantillaService.addPlantillaToCollectionIfMissing).toHaveBeenCalledWith(plantillaCollection, ...additionalPlantillas);
-        expect(comp.plantillasSharedCollection).toEqual(expectedCollection);
-      });
-
-      it('Should update editForm', () => {
-        const usuarioExtra: IUsuarioExtra = { id: 456 };
-        const user: IUser = { id: 30429 };
-        usuarioExtra.user = user;
-        const plantillas: IPlantilla = { id: 61011 };
-        usuarioExtra.plantillas = [plantillas];
-
-        activatedRoute.data = of({ usuarioExtra });
-        comp.ngOnInit();
-
-        expect(comp.editForm.value).toEqual(expect.objectContaining(usuarioExtra));
-        expect(comp.usersSharedCollection).toContain(user);
-        expect(comp.plantillasSharedCollection).toContain(plantillas);
-      });
+      expect(comp.doNotMatch).toBe(true);
     });
 
-    describe('save', () => {
-      it('Should call update service on save for existing entity', () => {
-        // GIVEN
-        const saveSubject = new Subject<HttpResponse<UsuarioExtra>>();
-        const usuarioExtra = { id: 123 };
-        jest.spyOn(usuarioExtraService, 'update').mockReturnValue(saveSubject);
-        jest.spyOn(comp, 'previousState');
-        activatedRoute.data = of({ usuarioExtra });
-        comp.ngOnInit();
-
-        // WHEN
-        comp.save();
-        expect(comp.isSaving).toEqual(true);
-        saveSubject.next(new HttpResponse({ body: usuarioExtra }));
-        saveSubject.complete();
-
-        // THEN
-        expect(comp.previousState).toHaveBeenCalled();
-        expect(usuarioExtraService.update).toHaveBeenCalledWith(usuarioExtra);
-        expect(comp.isSaving).toEqual(false);
-      });
-
-      it('Should call create service on save for new entity', () => {
-        // GIVEN
-        const saveSubject = new Subject<HttpResponse<UsuarioExtra>>();
-        const usuarioExtra = new UsuarioExtra();
-        jest.spyOn(usuarioExtraService, 'create').mockReturnValue(saveSubject);
-        jest.spyOn(comp, 'previousState');
-        activatedRoute.data = of({ usuarioExtra });
-        comp.ngOnInit();
-
-        // WHEN
-        comp.save();
-        expect(comp.isSaving).toEqual(true);
-        saveSubject.next(new HttpResponse({ body: usuarioExtra }));
-        saveSubject.complete();
-
-        // THEN
-        expect(usuarioExtraService.create).toHaveBeenCalledWith(usuarioExtra);
-        expect(comp.isSaving).toEqual(false);
-        expect(comp.previousState).toHaveBeenCalled();
-      });
-
-      it('Should set isSaving to false on error', () => {
-        // GIVEN
-        const saveSubject = new Subject<HttpResponse<UsuarioExtra>>();
-        const usuarioExtra = { id: 123 };
-        jest.spyOn(usuarioExtraService, 'update').mockReturnValue(saveSubject);
-        jest.spyOn(comp, 'previousState');
-        activatedRoute.data = of({ usuarioExtra });
-        comp.ngOnInit();
-
-        // WHEN
-        comp.save();
-        expect(comp.isSaving).toEqual(true);
-        saveSubject.error('This is an error!');
-
-        // THEN
-        expect(usuarioExtraService.update).toHaveBeenCalledWith(usuarioExtra);
-        expect(comp.isSaving).toEqual(false);
-        expect(comp.previousState).not.toHaveBeenCalled();
-      });
-    });
-
-    describe('Tracking relationships identifiers', () => {
-      describe('trackUserById', () => {
-        it('Should return tracked User primary key', () => {
-          const entity = { id: 123 };
-          const trackResult = comp.trackUserById(0, entity);
-          expect(trackResult).toEqual(entity.id);
-        });
-      });
-
-      describe('trackPlantillaById', () => {
-        it('Should return tracked Plantilla primary key', () => {
-          const entity = { id: 123 };
-          const trackResult = comp.trackPlantillaById(0, entity);
-          expect(trackResult).toEqual(entity.id);
-        });
-      });
-    });
-
-    describe('Getting selected relationships', () => {
-      describe('getSelectedPlantilla', () => {
-        it('Should return option if no Plantilla is selected', () => {
-          const option = { id: 123 };
-          const result = comp.getSelectedPlantilla(option);
-          expect(result === option).toEqual(true);
+    it('should update success to true after creating an account', inject(
+      [RegisterService, TranslateService],
+      fakeAsync((service: RegisterService, mockLanguageService: TranslateService) => {
+        jest.spyOn(service, 'save').mockReturnValue(of({}));
+        mockLanguageService.currentLang = 'es';
+        comp.registerForm.patchValue({
+          password: 'password',
+          confirmPassword: 'password',
         });
 
-        it('Should return selected Plantilla for according option', () => {
-          const option = { id: 123 };
-          const selected = { id: 123 };
-          const selected2 = { id: 456 };
-          const result = comp.getSelectedPlantilla(option, [selected2, selected]);
-          expect(result === selected).toEqual(true);
-          expect(result === selected2).toEqual(false);
-          expect(result === option).toEqual(false);
+        comp.register();
+        tick();
+
+        expect(service.save).toHaveBeenCalledWith({
+          email: '',
+          password: 'password',
+          login: '',
+          langKey: 'es',
+          name: '',
+          profileIcon: 1,
+          isAdmin: 1,
+          isGoogle: 0,
+        });
+        expect(comp.success).toBe(true);
+        expect(comp.errorUserExists).toBe(false);
+        expect(comp.errorEmailExists).toBe(false);
+        expect(comp.error).toBe(false);
+      })
+    ));
+
+    it('should notify of user existence upon 400/login already in use', inject(
+      [RegisterService],
+      fakeAsync((service: RegisterService) => {
+        jest.spyOn(service, 'save').mockReturnValue(
+          throwError({
+            status: 400,
+            error: { type: LOGIN_ALREADY_USED_TYPE },
+          })
+        );
+        comp.registerForm.patchValue({
+          password: 'password',
+          confirmPassword: 'password',
         });
 
-        it('Should return option if this Plantilla is not selected', () => {
-          const option = { id: 123 };
-          const selected = { id: 456 };
-          const result = comp.getSelectedPlantilla(option, [selected]);
-          expect(result === option).toEqual(true);
-          expect(result === selected).toEqual(false);
+        comp.register();
+        tick();
+
+        expect(comp.errorUserExists).toBe(true);
+        expect(comp.errorEmailExists).toBe(false);
+        expect(comp.error).toBe(false);
+      })
+    ));
+
+    it('should notify of email existence upon 400/email address already in use', inject(
+      [RegisterService],
+      fakeAsync((service: RegisterService) => {
+        jest.spyOn(service, 'save').mockReturnValue(
+          throwError({
+            status: 400,
+            error: { type: EMAIL_ALREADY_USED_TYPE },
+          })
+        );
+        comp.registerForm.patchValue({
+          password: 'password',
+          confirmPassword: 'password',
         });
-      });
-    });
+
+        comp.register();
+        tick();
+
+        expect(comp.errorEmailExists).toBe(true);
+        expect(comp.errorUserExists).toBe(false);
+        expect(comp.error).toBe(false);
+      })
+    ));
+
+    it('should notify of generic error', inject(
+      [RegisterService],
+      fakeAsync((service: RegisterService) => {
+        jest.spyOn(service, 'save').mockReturnValue(
+          throwError({
+            status: 503,
+          })
+        );
+        comp.registerForm.patchValue({
+          password: 'password',
+          confirmPassword: 'password',
+        });
+
+        comp.register();
+        tick();
+
+        expect(comp.errorUserExists).toBe(false);
+        expect(comp.errorEmailExists).toBe(false);
+        expect(comp.error).toBe(true);
+      })
+    ));
   });
 });

src/main/webapp/app/entities/usuario-extra/update/usuario-extra-update.component.ts

@@ -1,161 +1,122 @@
 import { Component, OnInit } from '@angular/core';
-import { HttpResponse } from '@angular/common/http';
+import { HttpErrorResponse } from '@angular/common/http';
 import { FormBuilder, Validators } from '@angular/forms';
-import { ActivatedRoute } from '@angular/router';
-import { Observable } from 'rxjs';
-import { finalize, map } from 'rxjs/operators';
+import { TranslateService } from '@ngx-translate/core';
 
-import * as dayjs from 'dayjs';
-import { DATE_TIME_FORMAT } from 'app/config/input.constants';
-
-import { IUsuarioExtra, UsuarioExtra } from '../usuario-extra.model';
-import { UsuarioExtraService } from '../service/usuario-extra.service';
-import { IUser } from 'app/entities/user/user.model';
-import { UserService } from 'app/entities/user/user.service';
-import { IPlantilla } from 'app/entities/plantilla/plantilla.model';
-import { PlantillaService } from 'app/entities/plantilla/service/plantilla.service';
+import { EMAIL_ALREADY_USED_TYPE, LOGIN_ALREADY_USED_TYPE } from 'app/config/error.constants';
+import { RegisterService } from 'app/account/register/register.service';
 
 @Component({
   selector: 'jhi-usuario-extra-update',
   templateUrl: './usuario-extra-update.component.html',
 })
-export class UsuarioExtraUpdateComponent implements OnInit {
-  isSaving = false;
+export class UsuarioExtraUpdateComponent {
+  // @ViewChild('name', { static: false })
+  // name?: ElementRef;
 
-  usersSharedCollection: IUser[] = [];
-  plantillasSharedCollection: IPlantilla[] = [];
+  profileIcon: number = 1;
+  profileIcons: any[] = [
+    { name: 'C1', class: 'active' },
+    { name: 'C2' },
+    { name: 'C3' },
+    { name: 'C4' },
+    { name: 'C5' },
+    { name: 'C6' },
+    { name: 'C7' },
+    { name: 'C8' },
+    { name: 'C9' },
+    { name: 'C10' },
+    { name: 'C11' },
+    { name: 'C12' },
+    { name: 'C13' },
+    { name: 'C14' },
+    { name: 'C15' },
+    { name: 'C16' },
+    { name: 'C17' },
+    { name: 'C18' },
+    { name: 'C19' },
+    { name: 'C20' },
+    { name: 'C21' },
+    { name: 'C22' },
+    { name: 'C23' },
+    { name: 'C24' },
+    { name: 'C25' },
+    { name: 'C26' },
+    { name: 'C27' },
+    { name: 'C28' },
+  ];
 
-  editForm = this.fb.group({
-    id: [],
-    nombre: [null, [Validators.required]],
-    iconoPerfil: [],
-    fechaNacimiento: [],
-    estado: [null, [Validators.required]],
-    user: [],
-    plantillas: [],
+  doNotMatch = false;
+  error = false;
+  errorEmailExists = false;
+  errorUserExists = false;
+  success = false;
+
+  // Login will be used to store the email as well.
+  // login: ['', [Validators.required, Validators.minLength(5), Validators.maxLength(254), Validators.email]]
+  registerForm = this.fb.group({
+    name: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(254)]],
+    email: ['', [Validators.required, Validators.minLength(5), Validators.maxLength(254), Validators.email]],
+    password: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(50)]],
+    confirmPassword: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(50)]],
   });
 
-  constructor(
-    protected usuarioExtraService: UsuarioExtraService,
-    protected userService: UserService,
-    protected plantillaService: PlantillaService,
-    protected activatedRoute: ActivatedRoute,
-    protected fb: FormBuilder
-  ) {}
+  constructor(private translateService: TranslateService, private registerService: RegisterService, private fb: FormBuilder) {}
 
-  ngOnInit(): void {
-    this.activatedRoute.data.subscribe(({ usuarioExtra }) => {
-      if (usuarioExtra.id === undefined) {
-        const today = dayjs().startOf('day');
-        usuarioExtra.fechaNacimiento = today;
-      }
-
-      this.updateForm(usuarioExtra);
-
-      this.loadRelationshipsOptions();
-    });
+  ngAfterViewInit(): void {
+    //   if (this.name) {
+    //     this.name.nativeElement.focus();
+    //   }
   }
 
-  previousState(): void {
-    window.history.back();
-  }
+  register(): void {
+    this.doNotMatch = false;
+    this.error = false;
+    this.errorEmailExists = false;
+    this.errorUserExists = false;
 
-  save(): void {
-    this.isSaving = true;
-    const usuarioExtra = this.createFromForm();
-    if (usuarioExtra.id !== undefined) {
-      this.subscribeToSaveResponse(this.usuarioExtraService.update(usuarioExtra));
+    const password = this.registerForm.get(['password'])!.value;
+    if (password !== this.registerForm.get(['confirmPassword'])!.value) {
+      this.doNotMatch = true;
     } else {
-      this.subscribeToSaveResponse(this.usuarioExtraService.create(usuarioExtra));
+      const login = this.registerForm.get(['email'])!.value;
+      const email = this.registerForm.get(['email'])!.value;
+      const name = this.registerForm.get(['name'])!.value;
+      console.log(name);
+
+      this.registerService
+        .save({
+          login,
+          email,
+          password,
+          langKey: this.translateService.currentLang,
+          name,
+          profileIcon: this.profileIcon,
+          isAdmin: 1,
+          isGoogle: 0,
+        })
+        .subscribe(
+          () => (this.success = true),
+          response => this.processError(response)
+        );
     }
   }
 
-  trackUserById(index: number, item: IUser): number {
-    return item.id!;
-  }
-
-  trackPlantillaById(index: number, item: IPlantilla): number {
-    return item.id!;
-  }
-
-  getSelectedPlantilla(option: IPlantilla, selectedVals?: IPlantilla[]): IPlantilla {
-    if (selectedVals) {
-      for (const selectedVal of selectedVals) {
-        if (option.id === selectedVal.id) {
-          return selectedVal;
-        }
-      }
+  private processError(response: HttpErrorResponse): void {
+    if (response.status === 400 && response.error.type === LOGIN_ALREADY_USED_TYPE) {
+      this.errorUserExists = true;
+    } else if (response.status === 400 && response.error.type === EMAIL_ALREADY_USED_TYPE) {
+      this.errorEmailExists = true;
+    } else {
+      this.error = true;
     }
-    return option;
   }
 
-  protected subscribeToSaveResponse(result: Observable<HttpResponse<IUsuarioExtra>>): void {
-    result.pipe(finalize(() => this.onSaveFinalize())).subscribe(
-      () => this.onSaveSuccess(),
-      () => this.onSaveError()
-    );
-  }
-
-  protected onSaveSuccess(): void {
-    this.previousState();
-  }
-
-  protected onSaveError(): void {
-    // Api for inheritance.
-  }
-
-  protected onSaveFinalize(): void {
-    this.isSaving = false;
-  }
-
-  protected updateForm(usuarioExtra: IUsuarioExtra): void {
-    this.editForm.patchValue({
-      id: usuarioExtra.id,
-      nombre: usuarioExtra.nombre,
-      iconoPerfil: usuarioExtra.iconoPerfil,
-      fechaNacimiento: usuarioExtra.fechaNacimiento ? usuarioExtra.fechaNacimiento.format(DATE_TIME_FORMAT) : null,
-      estado: usuarioExtra.estado,
-      user: usuarioExtra.user,
-      plantillas: usuarioExtra.plantillas,
-    });
-
-    this.usersSharedCollection = this.userService.addUserToCollectionIfMissing(this.usersSharedCollection, usuarioExtra.user);
-    this.plantillasSharedCollection = this.plantillaService.addPlantillaToCollectionIfMissing(
-      this.plantillasSharedCollection,
-      ...(usuarioExtra.plantillas ?? [])
-    );
-  }
-
-  protected loadRelationshipsOptions(): void {
-    this.userService
-      .query()
-      .pipe(map((res: HttpResponse<IUser[]>) => res.body ?? []))
-      .pipe(map((users: IUser[]) => this.userService.addUserToCollectionIfMissing(users, this.editForm.get('user')!.value)))
-      .subscribe((users: IUser[]) => (this.usersSharedCollection = users));
-
-    this.plantillaService
-      .query()
-      .pipe(map((res: HttpResponse<IPlantilla[]>) => res.body ?? []))
-      .pipe(
-        map((plantillas: IPlantilla[]) =>
-          this.plantillaService.addPlantillaToCollectionIfMissing(plantillas, ...(this.editForm.get('plantillas')!.value ?? []))
-        )
-      )
-      .subscribe((plantillas: IPlantilla[]) => (this.plantillasSharedCollection = plantillas));
-  }
-
-  protected createFromForm(): IUsuarioExtra {
-    return {
-      ...new UsuarioExtra(),
-      id: this.editForm.get(['id'])!.value,
-      nombre: this.editForm.get(['nombre'])!.value,
-      iconoPerfil: this.editForm.get(['iconoPerfil'])!.value,
-      fechaNacimiento: this.editForm.get(['fechaNacimiento'])!.value
-        ? dayjs(this.editForm.get(['fechaNacimiento'])!.value, DATE_TIME_FORMAT)
-        : undefined,
-      estado: this.editForm.get(['estado'])!.value,
-      user: this.editForm.get(['user'])!.value,
-      plantillas: this.editForm.get(['plantillas'])!.value,
-    };
+  selectIcon(event: MouseEvent): void {
+    if (event.target instanceof Element) {
+      document.querySelectorAll('.active').forEach(e => e.classList.remove('active'));
+      event.target.classList.add('active');
+      this.profileIcon = +event.target.getAttribute('id')! + 1;
+    }
   }
 }

src/main/webapp/app/entities/usuario-extra/usuario-extra.module.ts

@@ -5,9 +5,10 @@ import { UsuarioExtraDetailComponent } from './detail/usuario-extra-detail.compo
 import { UsuarioExtraUpdateComponent } from './update/usuario-extra-update.component';
 import { UsuarioExtraDeleteDialogComponent } from './delete/usuario-extra-delete-dialog.component';
 import { UsuarioExtraRoutingModule } from './route/usuario-extra-routing.module';
+import { ComponentsModule } from 'app/components/components.module';
 
 @NgModule({
-  imports: [SharedModule, UsuarioExtraRoutingModule],
+  imports: [SharedModule, UsuarioExtraRoutingModule, ComponentsModule],
   declarations: [UsuarioExtraComponent, UsuarioExtraDetailComponent, UsuarioExtraUpdateComponent, UsuarioExtraDeleteDialogComponent],
   entryComponents: [UsuarioExtraDeleteDialogComponent],
 })

src/main/webapp/app/home/home.component.spec.ts

@@ -17,6 +17,7 @@ describe('Component Tests', () => {
     let mockAccountService: AccountService;
     let mockRouter: Router;
     const account: Account = {
+      id: 0,
       activated: true,
       authorities: [],
       email: '',

src/main/webapp/app/layouts/sidebar/sidebar.component.html

@@ -9,12 +9,12 @@
 <div class="sidebar-wrapper">
   <div class="user" routerLink="/account/settings">
     <div class="photo mb-2">
-      <img src="../../../content/profile_icons/C2.png" />
+      <img src="../../../content/profile_icons/C{{ usuarioExtra?.iconoPerfil }}.png" />
     </div>
     <div class="info">
       <a data-toggle="collapse" class="collapsed">
         <span>
-          Pablo Bonilla
+          {{ usuarioExtra?.nombre }}
           <!-- <b class="caret"></b> -->
         </span>
       </a>

src/main/webapp/app/layouts/sidebar/sidebar.component.ts

@@ -8,6 +8,8 @@ import { LoginService } from 'app/login/login.service';
 import { ProfileService } from 'app/layouts/profiles/profile.service';
 import { SessionStorageService } from 'ngx-webstorage';
 import { Router } from '@angular/router';
+import { UsuarioExtraService } from 'app/entities/usuario-extra/service/usuario-extra.service';
+import { UsuarioExtra } from 'app/entities/usuario-extra/usuario-extra.model';
 
 @Component({
   selector: 'jhi-sidebar',
@@ -24,12 +26,15 @@ export class SidebarComponent {
   version = '';
   account: Account | null = null;
 
+  usuarioExtra: UsuarioExtra | null = null;
+
   constructor(
     private loginService: LoginService,
     private sessionStorageService: SessionStorageService,
     private accountService: AccountService,
     private profileService: ProfileService,
-    private router: Router
+    private router: Router,
+    private usuarioExtraService: UsuarioExtraService
   ) {
     if (VERSION) {
       this.version = VERSION.toLowerCase().startsWith('v') ? VERSION : 'v' + VERSION;
@@ -48,7 +53,16 @@ export class SidebarComponent {
       this.inProduction = profileInfo.inProduction;
       this.openAPIEnabled = profileInfo.openAPIEnabled;
     });
-    this.accountService.getAuthenticationState().subscribe(account => (this.account = account));
+
+    // Get jhi_user and usuario_extra information
+    this.accountService.getAuthenticationState().subscribe(account => {
+      this.account = account;
+      if (account !== null) {
+        this.usuarioExtraService.find(account.id).subscribe(usuarioExtra => {
+          this.usuarioExtra = usuarioExtra.body;
+        });
+      }
+    });
   }
 
   ngAfterViewInit() {}

src/main/webapp/app/login/login.component.html

@@ -128,6 +128,19 @@
                 <button type="submit" class="btn btn-primary w-100" data-cy="submit">Iniciar sesion</button>
               </div>
             </form>
+
+            <div class="google-btn w-80 m-auto">
+              <div class="google-icon-wrapper">
+                <img class="google-icon" src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" />
+              </div>
+              <button class="btn-text" (click)="signInWithGoogle()">Iniciar con Google</button>
+            </div>
+
+            <!--<div class="mb-3 mb-0">
+              <button class="btn" (click)="signInWithGoogle()">
+                <i class="fa fa-Google">Iniciar con Google</i>
+              </button>
+            </div>-->
           </div>
           <!-- end card-body -->
         </div>

src/main/webapp/app/login/login.component.scss

@@ -1,3 +1,56 @@
 body {
   background-color: #f2f2f2 !important;
 }
+
+$white: #fff;
+$google-blue: #4285f4;
+$button-active-blue: #1669f2;
+
+.google-btn {
+  width: 184px;
+  height: 42px;
+  background-color: $google-blue !important;
+  border-radius: 2px;
+  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.25);
+  .google-icon-wrapper {
+    position: absolute;
+    margin-top: 1px;
+    margin-left: 1px;
+    width: 40px;
+    height: 40px;
+    border-radius: 2px;
+    background-color: $white;
+  }
+  .google-icon {
+    position: absolute;
+    margin-top: 11px;
+    margin-left: 11px;
+    width: 18px;
+    height: 18px;
+  }
+  .btn-text {
+    float: right;
+    margin: 5px 5px 0px 0px;
+    color: $white;
+    font-size: 14px;
+    letter-spacing: 0.2px;
+    font-family: 'Roboto';
+    background-color: $google-blue;
+    width: 135px;
+    height: 30px;
+    padding: 6px 6px 7px 6px;
+    border: $google-blue;
+  }
+  &:hover {
+    box-shadow: 0 0 6px $google-blue !important;
+  }
+  &:active {
+    background: $button-active-blue !important;
+  }
+
+  .google-div {
+    margin-left: 150px !important;
+  }
+}
+
+@import url(https://fonts.googleapis.com/css?family=Roboto:500);

src/main/webapp/app/login/login.component.ts

@@ -4,6 +4,12 @@ import { Router } from '@angular/router';
 
 import { LoginService } from 'app/login/login.service';
 import { AccountService } from 'app/core/auth/account.service';
+import { SocialAuthService, SocialUser } from 'angularx-social-login';
+import { GoogleLoginProvider } from 'angularx-social-login';
+import { RegisterService } from '../account/register/register.service';
+import { TranslateService } from '@ngx-translate/core';
+import { HttpErrorResponse } from '@angular/common/http';
+import { EMAIL_ALREADY_USED_TYPE, LOGIN_ALREADY_USED_TYPE } from '../config/error.constants';
 
 @Component({
   selector: 'jhi-login',
@@ -15,6 +21,9 @@ export class LoginComponent implements OnInit, AfterViewInit {
   username!: ElementRef;
 
   authenticationError = false;
+  error = false;
+  errorEmailExists = false;
+  errorUserExists = false;
 
   loginForm = this.fb.group({
     username: [null, [Validators.required]],
@@ -22,14 +31,33 @@ export class LoginComponent implements OnInit, AfterViewInit {
     rememberMe: [false],
   });
 
+  user: SocialUser = new SocialUser();
+  loggedIn: boolean = false;
+  success = false;
+
   constructor(
     private accountService: AccountService,
     private loginService: LoginService,
     private router: Router,
-    private fb: FormBuilder
+    private fb: FormBuilder,
+    private authService: SocialAuthService,
+    private registerService: RegisterService,
+    private translateService: TranslateService
   ) {}
 
   ngOnInit(): void {
+    //Servicio para verificar si el usuario se encuentra loggeado
+    /*this.authService.authState.subscribe(user => {
+      this.user = user;
+      this.loggedIn = user != null;
+
+     /!* console.log('correo: ' + user.email);
+      console.log('correo: ' + user.name);
+      console.log('ID: ' + this.user.id);*!/
+
+      this.authenticacionGoogle();
+    });
+*/
     // if already authenticated then navigate to home page
     this.accountService.identity().subscribe(() => {
       if (this.accountService.isAuthenticated()) {
@@ -42,6 +70,89 @@ export class LoginComponent implements OnInit, AfterViewInit {
     this.username.nativeElement.focus();
   }
 
+  //Inicio Google
+  signInWithGoogle(): void {
+    this.authService.signIn(GoogleLoginProvider.PROVIDER_ID).then(() => {
+      this.authService.authState.subscribe(user => {
+        this.user = user;
+        this.loggedIn = user != null;
+
+        /* console.log('correo: ' + user.email);
+         console.log('correo: ' + user.name);
+         console.log('ID: ' + this.user.id);*/
+
+        this.authenticacionGoogle();
+      });
+    });
+  }
+
+  authenticacionGoogle(): void {
+    this.loginService.login({ username: this.user.email, password: this.user.id, rememberMe: true }).subscribe(
+      () => {
+        this.authenticationError = false;
+        if (!this.router.getCurrentNavigation()) {
+          window.localStorage.setItem('IsGoogle', 'true');
+          // There were no routing during login (eg from navigationToStoredUrl)
+          this.router.navigate(['']);
+        }
+      },
+      () => this.activateGoogle()
+      /*this.registerService
+          .save({
+            login: this.user.email,
+            email: this.user.email,
+            password: this.user.id,
+            langKey: this.translateService.currentLang,
+            name: this.user.name,
+            profileIcon: this.randomProfilePic(),
+            isAdmin: 0,
+          })
+          .subscribe(
+            () => (this.success = true),
+            response => this.processError(response)
+          ) */ //console.log("Usuario no existe")
+    );
+  }
+
+  randomProfilePic(): number {
+    return Math.floor(Math.random() * (28 - 1 + 1)) + 1;
+  }
+
+  processError(response: HttpErrorResponse): void {
+    if (response.status === 400 && response.error.type === LOGIN_ALREADY_USED_TYPE) {
+      this.errorUserExists = true;
+    } else if (response.status === 400 && response.error.type === EMAIL_ALREADY_USED_TYPE) {
+      this.errorEmailExists = true;
+    } else {
+      this.error = true;
+    }
+  }
+
+  refreshToken(): void {
+    this.authService.refreshAuthToken(GoogleLoginProvider.PROVIDER_ID);
+  }
+
+  activateGoogle(): void {
+    this.registerService
+      .save({
+        login: this.user.email,
+        email: this.user.email,
+        password: this.user.id,
+        langKey: this.translateService.currentLang,
+        name: this.user.name,
+        profileIcon: this.randomProfilePic(),
+        isAdmin: 0,
+        isGoogle: 1,
+      })
+      .subscribe(
+        () => {
+          this.success = true;
+          this.authenticacionGoogle();
+        },
+        response => this.processError(response)
+      );
+  }
+
   login(): void {
     this.loginService
       .login({

src/main/webapp/app/login/usuario-google-log-in.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { UsuarioGoogleLogInService } from './usuario-google-log-in.service';
+
+describe('UsuarioGoogleLogInService', () => {
+  let service: UsuarioGoogleLogInService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(UsuarioGoogleLogInService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/main/webapp/app/login/usuario-google-log-in.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+import { Observable, ReplaySubject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class UsuarioGoogleLogInService {
+  constructor() {}
+}

src/main/webapp/app/shared/pipes/filter.ts

@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform, Injectable } from '@angular/core';
+
+@Pipe({
+  name: 'filter',
+})
+@Injectable()
+export class FilterPipe implements PipeTransform {
+  transform(items: any[], field: string, value: string): any[] {
+    if (!items) {
+      return [];
+    }
+    if (!field || !value) {
+      return items;
+    }
+
+    return items.filter(singleItem => singleItem[field].toLowerCase().includes(value.toLowerCase()));
+  }
+}

src/main/webapp/app/shared/shared.module.ts

@@ -12,6 +12,7 @@ import { FormatMediumDatePipe } from './date/format-medium-date.pipe';
 import { SortByDirective } from './sort/sort-by.directive';
 import { SortDirective } from './sort/sort.directive';
 import { ItemCountComponent } from './pagination/item-count.component';
+import { FilterPipe } from './pipes/filter';
 
 @NgModule({
   imports: [SharedLibsModule],
@@ -27,6 +28,7 @@ import { ItemCountComponent } from './pagination/item-count.component';
     SortByDirective,
     SortDirective,
     ItemCountComponent,
+    FilterPipe,
   ],
   exports: [
     SharedLibsModule,
@@ -41,6 +43,7 @@ import { ItemCountComponent } from './pagination/item-count.component';
     SortByDirective,
     SortDirective,
     ItemCountComponent,
+    FilterPipe,
   ],
 })
 export class SharedModule {}

src/main/webapp/content/scss/paper-dashboard.scss

@@ -89,3 +89,8 @@
 
 @import 'paper-dashboard/responsive';
 @import 'paper-dashboard/media-queries';
+
+// Data Survey
+@import 'paper-dashboard/datasurvey-buttons';
+@import 'paper-dashboard/datasurvey-form';
+@import 'paper-dashboard/datasurvey-global';

src/main/webapp/content/scss/paper-dashboard/_datasurvey-buttons.scss

@@ -0,0 +1,54 @@
+.ds-btn {
+  border-width: $border-thick;
+  font-weight: 400;
+  font-size: 0.9rem;
+  line-height: $line-height;
+  // text-transform: uppercase;
+  border: none;
+  margin: 10px 5px;
+  border-radius: $border-radius-small;
+  padding: $padding-btn-vertical $padding-btn-horizontal;
+  cursor: pointer;
+
+  border-radius: 5px;
+  font-weight: 500;
+  letter-spacing: 0.025rem;
+
+  position: relative;
+  top: 0;
+  transition: all 0.1s ease-in-out;
+
+  &:hover {
+    top: -3px;
+    box-shadow: rgba(80, 80, 80, 0.15) 0px 5px 15px;
+  }
+}
+
+.ds-btn--primary {
+  background-color: #2962ff;
+  color: #fff;
+
+  &:hover {
+    background-color: #1c44b2;
+  }
+}
+
+.ds-btn--secondary {
+  background-color: transparent;
+  color: #2962ff;
+
+  &:hover {
+    background-color: #f7f9ff;
+    color: #1c44b2;
+  }
+}
+
+.ds-btn--danger {
+  background-color: transparent;
+  color: #e73636;
+
+  &:hover {
+    background-color: #f7f9ff;
+    color: #d33232;
+  }
+}

src/main/webapp/content/scss/paper-dashboard/_datasurvey-form.scss

@@ -0,0 +1,46 @@
+// Form variables
+$form-background: #f1f5f9;
+
+.ds-form {
+  .form-group label {
+    transition: all 0.1s ease-in-out;
+  }
+
+  .form-group:focus-within {
+    label,
+    input {
+      color: #313747;
+    }
+  }
+
+  input {
+    background-color: $form-background;
+    border-radius: 15px;
+    border: 1.75px solid transparent;
+    outline: 0;
+    padding: 1rem !important;
+    color: #757d94;
+
+    &:focus,
+    &:active {
+      background-color: $form-background;
+      border: 1.75px solid #2962ff;
+      // color: #313747;
+    }
+
+    &:read-only {
+      background-color: $form-background;
+      cursor: default;
+
+      &:focus,
+      &:active {
+        border: 1.75px solid transparent;
+        color: #757d94;
+      }
+    }
+  }
+
+  label {
+    color: #757d94;
+  }
+}

src/main/webapp/content/scss/paper-dashboard/_datasurvey-global.scss

@@ -0,0 +1,12 @@
+.ds-title {
+  color: #313747;
+  font-weight: 900;
+  letter-spacing: 0.025rem;
+  text-transform: uppercase;
+  font-size: 1.2rem;
+}
+
+.ds-subtitle {
+  color: #757d94;
+  font-size: 0.9rem;
+}

src/main/webapp/i18n/es/categoria.json

@@ -2,20 +2,20 @@
   "dataSurveyApp": {
     "categoria": {
       "home": {
-        "title": "Categorias",
+        "title": "Categorías",
         "refreshListLabel": "Refrescar lista",
-        "createLabel": "Crear nuevo Categoria",
-        "createOrEditLabel": "Crear o editar Categoria",
-        "notFound": "Ningún Categorias encontrado"
+        "createLabel": "Crear nueva Categoría",
+        "createOrEditLabel": "Crear o editar Categoría",
+        "notFound": "Ninguna Categoría encontrada"
       },
-      "created": "Un nuevo Categoria ha sido creado con el identificador {{ param }}",
-      "updated": "Un Categoria ha sido actualizado con el identificador {{ param }}",
-      "deleted": "Un Categoria ha sido eliminado con el identificador {{ param }}",
+      "created": "Una nueva Categoría ha sido creada con el identificador {{ param }}",
+      "updated": "Una Categoría ha sido actualizado con el identificador {{ param }}",
+      "deleted": "Una Categoría ha sido eliminado con el identificador {{ param }}",
       "delete": {
-        "question": "¿Seguro que quiere eliminar Categoria {{ id }}?"
+        "question": "¿Seguro que quiere eliminar Categoría {{ id }}?"
       },
       "detail": {
-        "title": "Categoria"
+        "title": "Categoría"
       },
       "id": "ID",
       "nombre": "Nombre",

src/main/webapp/i18n/es/estadoCategoria.json

@@ -2,8 +2,8 @@
   "dataSurveyApp": {
     "EstadoCategoria": {
       "null": "",
-      "ACTIVE": "ACTIVE",
-      "INACTIVE": "INACTIVE"
+      "ACTIVE": "ACTIVA",
+      "INACTIVE": "INACTIVA"
     }
   }
 }

src/main/webapp/i18n/es/register.json

@@ -14,6 +14,7 @@
         }
       },
       "success": "<strong>¡Registro guardado!</strong> Por favor, revise su correo electrónico para confirmar.",
+      "adminsuccess": "<strong>¡Registro guardado!</strong> Por favor, revise el correo electrónico para confirmar.",
       "error": {
         "fail": "<strong>¡El registro ha fallado!</strong> Por favor, inténtelo de nuevo más tarde.",
         "userexists": "<strong>¡El nombre de usuario ya está registrado!</strong> Por favor, escoja otro usuario.",

src/main/webapp/index.html

@@ -12,6 +12,7 @@
     <link rel="icon" href="favicon.ico" />
     <link rel="manifest" href="manifest.webapp" />
     <link rel="stylesheet" href="content/css/loading.css" />
+    <script src="https://apis.google.com/js/platform.js" async defer></script>
     <!-- jhipster-needle-add-resources-to-root - JHipster will add new resources here -->
   </head>
   <body>

tsconfig.app.json

@@ -2,7 +2,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./target/classes/static/app",
-    "types": []
+    "types": ["gapi", "gapi.auth2"]
   },
   "files": ["src/main/webapp/main.ts", "src/main/webapp/polyfills.ts"],
   "include": ["src/main/webapp/**/*.d.ts"]