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

<!-- <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>
  <div class="row justify-content-center">
    <div class="row pb-lg-5 pr-lg-5" style="border-bottom: 1px solid #e7ebf3">
      <div class="col-lg mr-lg-5">
        <div class="row">
          <div class="w-100">
            <p><b>Perfil</b></p>
          </div>
          <div>
            <p>Información general de su usuario, el correo electrónico es su identificador en DataSurvey.</p>
          </div>
        </div>
      </div>

      <div class="col-lg ml-lg-5 mr-lg-5 pr-lg-5" name="editForm" role="form" novalidate (ngSubmit)="save()" [formGroup]="editForm">
        <div class="row">
          <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">
          <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">
          <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>
    </div>
  </div>
</div>

<!-- <div class="row justify-content-center">
  <div class="col-8">
    <form name="editForm" role="form" novalidate (ngSubmit)="save()" [formGroup]="editForm">
      <h2
        id="jhi-usuario-extra-heading"
        data-cy="UsuarioExtraCreateUpdateHeading"
        jhiTranslate="dataSurveyApp.usuarioExtra.home.createOrEditLabel"
      >
        Create or edit a Usuario Extra
      </h2>

      <div>
        <jhi-alert-error></jhi-alert-error>

        <div class="form-group" [hidden]="editForm.get('id')!.value == null">
          <label class="form-control-label" jhiTranslate="global.field.id" for="field_id">ID</label>
          <input type="number" class="form-control" name="id" id="field_id" data-cy="id" formControlName="id" [readonly]="true" />
        </div>

        <div class="form-group">
          <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 class="form-group">
          <label class="form-control-label" jhiTranslate="dataSurveyApp.usuarioExtra.iconoPerfil" for="field_iconoPerfil"
            >Icono Perfil</label
          >
          <input
            type="text"
            class="form-control"
            name="iconoPerfil"
            id="field_iconoPerfil"
            data-cy="iconoPerfil"
            formControlName="iconoPerfil"
          />
        </div>

        <div class="form-group">
          <label class="form-control-label" jhiTranslate="dataSurveyApp.usuarioExtra.fechaNacimiento" for="field_fechaNacimiento"
            >Fecha 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 class="form-group">
          <label class="form-control-label" jhiTranslate="dataSurveyApp.usuarioExtra.estado" for="field_estado">Estado</label>
          <select class="form-control" name="estado" formControlName="estado" id="field_estado" data-cy="estado">
            <option [ngValue]="null">{{ 'dataSurveyApp.EstadoUsuario.null' | translate }}</option>
            <option value="ACTIVE">{{ 'dataSurveyApp.EstadoUsuario.ACTIVE' | translate }}</option>
            <option value="SUSPENDED">{{ 'dataSurveyApp.EstadoUsuario.SUSPENDED' | translate }}</option>
          </select>
          <div *ngIf="editForm.get('estado')!.invalid && (editForm.get('estado')!.dirty || editForm.get('estado')!.touched)">
            <small class="form-text text-danger" *ngIf="editForm.get('estado')?.errors?.required" jhiTranslate="entity.validation.required">
              This field is required.
            </small>
          </div>
        </div>

        <div class="form-group">
          <label class="form-control-label" jhiTranslate="dataSurveyApp.usuarioExtra.user" for="field_user">User</label>
          <select class="form-control" id="field_user" data-cy="user" name="user" formControlName="user">
            <option [ngValue]="null"></option>
            <option
              [ngValue]="userOption.id === editForm.get('user')!.value?.id ? editForm.get('user')!.value : userOption"
              *ngFor="let userOption of usersSharedCollection; trackBy: trackUserById"
            >
              {{ userOption.id }}
            </option>
          </select>
        </div>

        <div class="form-group">
          <label jhiTranslate="dataSurveyApp.usuarioExtra.plantilla" for="field_plantillas">Plantilla</label>
          <select class="form-control" id="field_plantillas" data-cy="plantilla" multiple name="plantillas" formControlName="plantillas">
            <option
              [ngValue]="getSelectedPlantilla(plantillaOption, editForm.get('plantillas')!.value)"
              *ngFor="let plantillaOption of plantillasSharedCollection; trackBy: trackPlantillaById"
            >
              {{ plantillaOption.id }}
            </option>
          </select>
        </div>
      </div>

      <div>
        <button type="button" id="cancel-save" data-cy="entityCreateCancelButton" class="btn btn-secondary" (click)="previousState()">
          <fa-icon icon="ban"></fa-icon>&nbsp;<span jhiTranslate="entity.action.cancel">Cancel</span>
        </button>

        <button
          type="submit"
          id="save-entity"
          data-cy="entityCreateSaveButton"
          [disabled]="editForm.invalid || isSaving"
          class="btn btn-primary"
        >
          <fa-icon icon="save"></fa-icon>&nbsp;<span jhiTranslate="entity.action.save">Save</span>
        </button>
      </div>
    </form>
  </div>
</div> -->