<!-- <div>
<div class="row justify-content-center">
<div class="col-md-8">
<h2 jhiTranslate="settings.title" [translateValues]="{ username: account.login }" *ngIf="account">
User settings for [<strong>{{ account.login }}</strong
>]
</h2>
<div class="alert alert-success" *ngIf="success" jhiTranslate="settings.messages.success">
<strong>Settings saved!</strong>
</div>
<jhi-alert-error></jhi-alert-error>
<form name="form" role="form" (ngSubmit)="save()" [formGroup]="settingsForm" *ngIf="account" novalidate>
<div class="form-group">
<label class="form-control-label" for="firstName" jhiTranslate="settings.form.firstname">First Name</label>
<input
type="text"
class="form-control"
id="firstName"
name="firstName"
placeholder="{{ 'settings.form.firstname.placeholder' | translate }}"
formControlName="firstName"
data-cy="firstname"
/>
<div
*ngIf="
settingsForm.get('firstName')!.invalid && (settingsForm.get('firstName')!.dirty || settingsForm.get('firstName')!.touched)
"
>
<small
class="form-text text-danger"
*ngIf="settingsForm.get('firstName')?.errors?.required"
jhiTranslate="settings.messages.validate.firstname.required"
>
Your first name is required.
</small>
<small
class="form-text text-danger"
*ngIf="settingsForm.get('firstName')?.errors?.minlength"
jhiTranslate="settings.messages.validate.firstname.minlength"
>
Your first name is required to be at least 1 character.
</small>
<small
class="form-text text-danger"
*ngIf="settingsForm.get('firstName')?.errors?.maxlength"
jhiTranslate="settings.messages.validate.firstname.maxlength"
>
Your first name cannot be longer than 50 characters.
</small>
</div>
</div>
<div class="form-group">
<label class="form-control-label" for="lastName" jhiTranslate="settings.form.lastname">Last Name</label>
<input
type="text"
class="form-control"
id="lastName"
name="lastName"
placeholder="{{ 'settings.form.lastname.placeholder' | translate }}"
formControlName="lastName"
data-cy="lastname"
/>
<div
*ngIf="settingsForm.get('lastName')!.invalid && (settingsForm.get('lastName')!.dirty || settingsForm.get('lastName')!.touched)"
>
<small
class="form-text text-danger"
*ngIf="settingsForm.get('lastName')?.errors?.required"
jhiTranslate="settings.messages.validate.lastname.required"
>
Your last name is required.
</small>
<small
class="form-text text-danger"
*ngIf="settingsForm.get('lastName')?.errors?.minlength"
jhiTranslate="settings.messages.validate.lastname.minlength"
>
Your last name is required to be at least 1 character.
</small>
<small
class="form-text text-danger"
*ngIf="settingsForm.get('lastName')?.errors?.maxlength"
jhiTranslate="settings.messages.validate.lastname.maxlength"
>
Your last name cannot be longer than 50 characters.
</small>
</div>
</div>
<div class="form-group">
<label class="form-control-label" for="email" jhiTranslate="global.form.email.label">Email</label>
<input
type="email"
class="form-control"
id="email"
name="email"
placeholder="{{ 'global.form.email.placeholder' | translate }}"
formControlName="email"
data-cy="email"
/>
<div *ngIf="settingsForm.get('email')!.invalid && (settingsForm.get('email')!.dirty || settingsForm.get('email')!.touched)">
<small
class="form-text text-danger"
*ngIf="settingsForm.get('email')?.errors?.required"
jhiTranslate="global.messages.validate.email.required"
>
Your email is required.
</small>
<small
class="form-text text-danger"
*ngIf="settingsForm.get('email')?.errors?.email"
jhiTranslate="global.messages.validate.email.invalid"
>
Your email is invalid.
</small>
<small
class="form-text text-danger"
*ngIf="settingsForm.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="settingsForm.get('email')?.errors?.maxlength"
jhiTranslate="global.messages.validate.email.maxlength"
>
Your email cannot be longer than 100 characters.
</small>
</div>
</div>
<div class="form-group" *ngIf="languages && languages.length > 0">
<label for="langKey" jhiTranslate="settings.form.language">Language</label>
<select class="form-control" id="langKey" name="langKey" formControlName="langKey" data-cy="langKey">
<option *ngFor="let language of languages" [value]="language">{{ language | findLanguageFromKey }}</option>
</select>
</div>
<button
type="submit"
[disabled]="settingsForm.invalid"
class="btn btn-primary"
jhiTranslate="settings.form.button"
data-cy="submit"
>
Save
</button>
</form>
</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 de info usuario -->
<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="alert alert-danger"
*ngIf="error"
jhiTranslate="global.messages.info.authenticated.updateForm"
data-cy="loginError"
></div>
<div *ngIf="success" class="alert alert-success alert-dismissible fade show" role="alert">
Sus datos fueron actualizados de manera exitosa
<!--<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>-->
</div>
<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="date"
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> <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"
>
<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 class="alert alert-danger" *ngIf="isGoogle" jhiTranslate="login.messages.error.isGoogle" data-cy="loginError"></div>
</div>
</div>
<!-- Form de password-->
<form
autocomplete="off"
class="ds-form col-lg ml-lg-5 mr-lg-5 pr-lg-5"
name="passwordForm"
role="form"
novalidate
(ngSubmit)="savePassword()"
[formGroup]="passwordForm"
>
<div class="row mb-3 pb-3" style="border-bottom: 1px solid #e7ebf3">
<div
class="alert alert-danger"
*ngIf="errorPassword && !doNotMatch && !successPassword && !samePassword"
jhiTranslate="global.messages.info.authenticated.passwordForm"
data-cy="loginError"
></div>
<div
*ngIf="successPassword && !errorPassword && !samePassword && !doNotMatch"
class="alert alert-success alert-dismissible fade show"
role="alert"
>
Sus contraseña fue actualizada de manera exitosa
<!-- <button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>-->
</div>
<div
class="alert alert-danger"
*ngIf="doNotMatch && !successPassword && !errorPassword"
jhiTranslate="global.messages.error.dontmatch"
>
The password and its confirmation do not match!
</div>
<div
class="alert alert-danger"
*ngIf="samePassword && !successPassword && !errorPassword && !doNotMatch"
jhiTranslate="global.messages.error.samePassword"
>
The password and its confirmation do not match!
</div>
<div class="form-group w-100">
<label class="form-control-label" for="field_password">Contraseña actual</label>
<input
type="password"
class="form-control"
name="password"
id="field_password"
data-cy="password"
formControlName="password"
placeholder="Su contraseña actual"
[readOnly]="isGoogle"
/>
<div
*ngIf="
passwordForm.get('password')!.invalid &&
(passwordForm.get('password')!.dirty || passwordForm.get('password')!.touched) &&
!isGoogle
"
>
<small
class="form-text text-danger"
*ngIf="passwordForm.get('password')?.errors?.required"
jhiTranslate="entity.validation.required"
>
This field is required.
</small>
<small
class="form-text text-danger"
*ngIf="passwordForm.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="passwordForm.get('password')?.errors?.maxlength"
jhiTranslate="global.messages.validate.newpassword.maxlength"
>
Your password cannot be longer than 50 characters.
</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="password"
class="form-control"
name="passwordNew"
id="field_passwordNew"
data-cy="passwordNew"
formControlName="passwordNew"
placeholder="Contraseña nueva"
[readOnly]="isGoogle"
/>
<div
*ngIf="
passwordForm.get('passwordNew')!.invalid &&
(passwordForm.get('passwordNew')!.dirty || passwordForm.get('passwordNew')!.touched) &&
!isGoogle
"
>
<small
class="form-text text-danger"
*ngIf="passwordForm.get('passwordNew')?.errors?.required"
jhiTranslate="entity.validation.required"
>
This field is required.
</small>
<small
class="form-text text-danger"
*ngIf="passwordForm.get('passwordNew')?.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="passwordForm.get('passwordNew')?.errors?.maxlength"
jhiTranslate="global.messages.validate.newpassword.maxlength"
>
Your password cannot be longer than 50 characters.
</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="password"
class="form-control"
name="passwordNewConfirm"
id="field_passwordNewConfirm"
data-cy="passwordNewConfirm"
formControlName="passwordNewConfirm"
placeholder="Contraseña nueva"
[readOnly]="isGoogle"
/>
<div
*ngIf="
passwordForm.get('passwordNewConfirm')!.invalid &&
(passwordForm.get('passwordNewConfirm')!.dirty || passwordForm.get('passwordNewConfirm')!.touched) &&
!isGoogle
"
>
<small
class="form-text text-danger"
*ngIf="passwordForm.get('passwordNewConfirm')?.errors?.required"
jhiTranslate="entity.validation.required"
>
This field is required.
</small>
<small
class="form-text text-danger"
*ngIf="passwordForm.get('passwordNewConfirm')?.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="passwordForm.get('passwordNewConfirm')?.errors?.maxlength"
jhiTranslate="global.messages.validate.newpassword.maxlength"
>
Your password cannot be longer than 50 characters.
</small>
</div>
</div>
</div>
<div class="row">
<button
*ngIf="!isGoogle"
type="button"
id="cancel-save"
data-cy="entityCreateCancelButton"
class="ds-btn ds-btn--secondary"
(click)="previousState()"
>
<fa-icon icon="arrow-left"></fa-icon> <span jhiTranslate="entity.action.cancel">Cancel</span>
</button>
<button
*ngIf="!isGoogle"
type="submit"
id="save-entity"
data-cy="entityCreateSaveButton"
[disabled]="passwordForm.invalid || isSaving"
class="ds-btn ds-btn--primary"
>
<span jhiTranslate="entity.action.save">Save</span>
</button>
</div>
</form>
</div>
</div>