From 34597f8209a2b2b800cb8d85f457d9406e22ef87 Mon Sep 17 00:00:00 2001
From: Pablo Bonilla <pbonilla29@hotmail.com>
Date: Thu, 8 Jul 2021 17:07:42 -0600
Subject: [PATCH] Update user profile layout design

---
 .../account/settings/settings.component.html  | 276 +++++++++++++++++-
 1 file changed, 275 insertions(+), 1 deletion(-)

diff --git a/src/main/webapp/app/account/settings/settings.component.html b/src/main/webapp/app/account/settings/settings.component.html
index 752a136..e906001 100644
--- a/src/main/webapp/app/account/settings/settings.component.html
+++ b/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">
@@ -163,4 +163,278 @@
       </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">
+        <div class="row">
+          <div class="form-group w-100">
+            <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>
+        <div class="row">
+          <div class="form-group w-100">
+            <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>
+      </div>
+    </div>
+
+    <!-- <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>