Merge pull request #30 from teamq-ec/DM2-2707-aplicar-angular-interna…

…tionalization-en-el-proyecto DM2-2707-aplicar-angular-internationalization-en-el-proyecto
teamq-ec · Jul 23, 2024 · 323dc70 · 323dc70
2 parents aee9adb + 684a9ac
commit 323dc70
Show file tree

Hide file tree

Showing 12 changed files with 117 additions and 123 deletions.
diff --git a/src/app/components/auth/login/login.component.html b/src/app/components/auth/login/login.component.html
@@ -1,7 +1,8 @@
 <div class="relative min-h-screen flex items-center justify-center bg-gray-50">
   <img [src]="kitchenImage" alt="Fondo" class="absolute inset-0 w-full h-full object-cover z-0">
   <div class="absolute inset-0 bg-gray-900/50 z-0"></div>
-  <div class="relative z-10 w-full max-w-7xl grid grid-cols-1 lg:grid-cols-2 px-4 pt-12 pb-24 sm:px-6 sm:pt-16 sm:pb-32 lg:px-8">
+  <div
+    class="relative z-10 w-full max-w-7xl grid grid-cols-1 lg:grid-cols-2 px-4 pt-12 pb-24 sm:px-6 sm:pt-16 sm:pb-32 lg:px-8">
     <div class="relative hidden lg:block">
       <img [src]="kitchenImageTwo" alt="Lado" class="w-full h-full object-cover rounded-lg shadow-lg">
     </div>
@@ -34,7 +35,8 @@ <h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gr
                 [class.border-red-500]="isFieldInvalid('email')"
                 class="block w-full px-3 py-2 placeholder-gray-400 border rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
             </div>
-            <div *ngIf="loginForm.get('email')?.invalid && (loginForm.get('email')?.dirty || loginForm.get('email')?.touched)">
+            <div
+              *ngIf="loginForm.get('email')?.invalid && (loginForm.get('email')?.dirty || loginForm.get('email')?.touched)">
               <div *ngIf="loginForm.get('email')?.errors?.['required']" class="text-red-500 text-sm">
                 {{ 'login.requiredFieldError' | translate }}
               </div>
@@ -49,15 +51,17 @@ <h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gr
               {{ 'login.passwordLabel' | translate }} <span class="text-red-500">*</span>
             </label>
             <div class="mt-2 relative">
-              <input [type]="showPassword ? 'text' : 'password'" id="password" name="password" formControlName="password"
+              <input [type]="showPassword ? 'text' : 'password'" id="password" name="password"
+                formControlName="password"
                 class="block w-full px-3 py-2 placeholder-gray-400 border rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm pr-10"
                 placeholder="Ingrese su contraseña">
               <button type="button" (click)="togglePasswordVisibility()"
                 class="absolute inset-y-0 right-0 pr-3 flex items-center text-purple-600">
                 <i class="fas" [ngClass]="showPassword ? 'fa-eye-slash' : 'fa-eye'"></i>
               </button>
             </div>
-            <div *ngIf="loginForm.get('password')?.invalid && (loginForm.get('password')?.dirty || loginForm.get('password')?.touched)">
+            <div
+              *ngIf="loginForm.get('password')?.invalid && (loginForm.get('password')?.dirty || loginForm.get('password')?.touched)">
               <div *ngIf="loginForm.get('password')?.errors?.['required']" class="text-red-500 text-sm">
                 {{ 'login.requiredFieldError' | translate }}
               </div>
@@ -77,12 +81,12 @@ <h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gr
 
         <p class="mt-10 text-center text-sm text-gray-500">
           {{ 'login.registerPrompt' | translate }}
-          <a routerLink="/auth/register"
-            class="font-semibold leading-6 text-indigo-600 hover:text-indigo-500">
+          <a routerLink="/auth/register" class="font-semibold leading-6 text-indigo-600 hover:text-indigo-500">
             {{ 'login.registerLink' | translate }}
           </a>
         </p>
       </div>
     </div>
   </div>
 </div>
+
diff --git a/src/app/components/auth/login/login.component.ts b/src/app/components/auth/login/login.component.ts
@@ -84,9 +84,12 @@ export class LoginComponent {
     this.showPassword = !this.showPassword;
   }
   isFieldInvalid(field: string): boolean {
-    const control = this.loginForm.get(field) ?? { invalid: false, dirty: false, touched: false };
+    const control = this.loginForm.get(field) ?? {
+      invalid: false,
+      dirty: false,
+      touched: false,
+    };
     return control.invalid && (control.dirty || control.touched);
   }
-
 }
 
diff --git a/src/app/components/auth/register/register.component.html b/src/app/components/auth/register/register.component.html
@@ -9,7 +9,8 @@
     <div class="bg-white p-8 rounded-lg shadow-lg lg:-ml-1">
       <div class="sm:mx-auto sm:w-full sm:max-w-md">
         <img class="mx-auto h-10 w-auto" [src]="urls.logos.logo" alt="Your Company">
-        <h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">{{ 'register.title' | translate }}
+        <h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">{{ 'register.title' |
+          translate }}
         </h2>
       </div>
 
@@ -35,10 +36,14 @@ <h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gr
                   autocomplete="first_name" required [class.border-red-500]="isFieldInvalid('first_name')"
                   class="block w-full px-3 py-2 placeholder-gray-400 border rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
               </div>
-              <div *ngIf="form.get('first_name')?.invalid && (form.get('first_name')?.dirty || form.get('first_name')?.touched)">
-                <div *ngIf="form.get('first_name')?.errors?.['required']" class="text-red-500 text-sm">{{ 'register.first_name_required' | translate }}</div>
-                <div *ngIf="form.get('first_name')?.errors?.['minlength']" class="text-red-500 text-sm">{{ 'register.first_name_minlength' | translate }}</div>
-                <div *ngIf="form.get('first_name')?.errors?.['maxlength']" class="text-red-500 text-sm">{{ 'register.first_name_maxlength' | translate }}</div>
+              <div
+                *ngIf="form.get('first_name')?.invalid && (form.get('first_name')?.dirty || form.get('first_name')?.touched)">
+                <div *ngIf="form.get('first_name')?.errors?.['required']" class="text-red-500 text-sm">{{
+                  'register.first_name_required' | translate }}</div>
+                <div *ngIf="form.get('first_name')?.errors?.['minlength']" class="text-red-500 text-sm">{{
+                  'register.first_name_minlength' | translate }}</div>
+                <div *ngIf="form.get('first_name')?.errors?.['maxlength']" class="text-red-500 text-sm">{{
+                  'register.first_name_maxlength' | translate }}</div>
               </div>
             </div>
             <div>
@@ -50,10 +55,14 @@ <h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gr
                   required [class.border-red-500]="isFieldInvalid('last_name')"
                   class="block w-full px-3 py-2 placeholder-gray-400 border rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
               </div>
-              <div *ngIf="form.get('last_name')?.invalid && (form.get('last_name')?.dirty || form.get('last_name')?.touched)">
-                <div *ngIf="form.get('last_name')?.errors?.['required']" class="text-red-500 text-sm">{{ 'register.last_name_required' | translate }}</div>
-                <div *ngIf="form.get('last_name')?.errors?.['minlength']" class="text-red-500 text-sm">{{ 'register.last_name_minlength' | translate }}</div>
-                <div *ngIf="form.get('last_name')?.errors?.['maxlength']" class="text-red-500 text-sm">{{ 'register.last_name_maxlength' | translate }}</div>
+              <div
+                *ngIf="form.get('last_name')?.invalid && (form.get('last_name')?.dirty || form.get('last_name')?.touched)">
+                <div *ngIf="form.get('last_name')?.errors?.['required']" class="text-red-500 text-sm">{{
+                  'register.last_name_required' | translate }}</div>
+                <div *ngIf="form.get('last_name')?.errors?.['minlength']" class="text-red-500 text-sm">{{
+                  'register.last_name_minlength' | translate }}</div>
+                <div *ngIf="form.get('last_name')?.errors?.['maxlength']" class="text-red-500 text-sm">{{
+                  'register.last_name_maxlength' | translate }}</div>
               </div>
             </div>
           </div>
@@ -68,8 +77,10 @@ <h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gr
                 class="block w-full px-3 py-2 placeholder-gray-400 border rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
             </div>
             <div *ngIf="form.get('email')?.invalid && (form.get('email')?.dirty || form.get('email')?.touched)">
-              <div *ngIf="form.get('email')?.errors?.['required']" class="text-red-500 text-sm">{{ 'register.email_required' | translate }}</div>
-              <div *ngIf="form.get('email')?.errors?.['pattern']" class="text-red-500 text-sm">{{ 'register.email_pattern' | translate }}</div>
+              <div *ngIf="form.get('email')?.errors?.['required']" class="text-red-500 text-sm">{{
+                'register.email_required' | translate }}</div>
+              <div *ngIf="form.get('email')?.errors?.['pattern']" class="text-red-500 text-sm">{{
+                'register.email_pattern' | translate }}</div>
             </div>
           </div>
 
@@ -88,14 +99,17 @@ <h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gr
                   <i class="fas" [ngClass]="showPassword ? 'fa-eye-slash' : 'fa-eye'"></i>
                 </button>
               </div>
-              <div *ngIf="form.get('password')?.invalid && (form.get('password')?.dirty || form.get('password')?.touched)">
-                <div *ngIf="form.get('password')?.errors?.['required']" class="text-red-500 text-sm">{{ 'register.password_required' | translate }}</div>
-                <div *ngIf="form.get('password')?.errors?.['pattern']" class="text-red-500 text-sm">{{ 'register.password_pattern' | translate }}</div>
+              <div
+                *ngIf="form.get('password')?.invalid && (form.get('password')?.dirty || form.get('password')?.touched)">
+                <div *ngIf="form.get('password')?.errors?.['required']" class="text-red-500 text-sm">{{
+                  'register.password_required' | translate }}</div>
+                <div *ngIf="form.get('password')?.errors?.['pattern']" class="text-red-500 text-sm">{{
+                  'register.password_pattern' | translate }}</div>
               </div>
             </div>
           </div>
 
-          <div class="sm:col-span-3" >
+          <div class="sm:col-span-3">
             <label for="phone_number" class="block text-sm font-medium leading-6 text-gray-900">
               {{ 'formProduct.PHONE_NUMBER_LABEL' | translate }} <span class="text-red-500">*</span>
             </label>
@@ -105,8 +119,10 @@ <h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gr
                 placeholder="(123) 456-7890" pattern="[0-9]*">
               <div
                 *ngIf="form.get('phone_number')?.invalid && (form.get('phone_number')?.dirty || form.get('phone_number')?.touched)">
-                <div *ngIf="form.get('phone_number')?.errors?.['required']" class="text-red-500 text-sm">{{ 'formProduct.STATE_REQUIRED' | translate }}</div>
-                <div *ngIf="form.get('phone_number')?.errors?.['pattern']" class="text-red-500 text-sm">{{ 'formProduct.PHONE_NUMBER_PATTERN_ERROR' | translate }}</div>
+                <div *ngIf="form.get('phone_number')?.errors?.['required']" class="text-red-500 text-sm">{{
+                  'formProduct.STATE_REQUIRED' | translate }}</div>
+                <div *ngIf="form.get('phone_number')?.errors?.['pattern']" class="text-red-500 text-sm">{{
+                  'formProduct.PHONE_NUMBER_PATTERN_ERROR' | translate }}</div>
               </div>
             </div>
           </div>
@@ -121,7 +137,8 @@ <h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gr
                 class="block w-full px-3 py-2 placeholder-gray-400 border rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
             </div>
             <div *ngIf="form.get('address')?.invalid && (form.get('address')?.dirty || form.get('address')?.touched)">
-              <div *ngIf="form.get('address')?.errors?.['required']" class="text-red-500 text-sm">{{ 'register.address_required' | translate }}</div>
+              <div *ngIf="form.get('address')?.errors?.['required']" class="text-red-500 text-sm">{{
+                'register.address_required' | translate }}</div>
             </div>
           </div>
 
@@ -144,3 +161,4 @@ <h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gr
 <div *ngIf="showAlertForm" class="fixed inset-0 flex items-center justify-center z-50">
   <app-alert-form (alertClosed)="onAlertClosed()"></app-alert-form>
 </div>
+
diff --git a/src/app/components/auth/register/register.component.ts b/src/app/components/auth/register/register.component.ts
@@ -10,7 +10,6 @@ import { UrlsConstants } from 'src/app/constants/urls.constants';
 import { DataTransferServiceService } from 'src/app/pages/services/data-transfer-service.service';
 import { TranslateService } from '@ngx-translate/core';
 
-
 @Component({
   selector: 'app-register',
   templateUrl: './register.component.html',
@@ -72,7 +71,11 @@ export class RegisterComponent {
   }
 
   isFieldInvalid(field: string): boolean {
-    const control = this.form.get(field) ?? { invalid: false, dirty: false, touched: false };
+    const control = this.form.get(field) ?? {
+      invalid: false,
+      dirty: false,
+      touched: false,
+    };
     return control.invalid && (control.dirty || control.touched);
   }
 
@@ -86,7 +89,7 @@ export class RegisterComponent {
   onSubmit(): void {
     if (this.form.invalid) {
       this.showAlertForm = true;
-      Object.keys(this.form.controls).forEach(key => {
+      Object.keys(this.form.controls).forEach((key) => {
         this.form.get(key)?.markAsTouched();
       });
       return;
@@ -112,6 +115,4 @@ export class RegisterComponent {
   onAlertClosed(): void {
     this.showAlertForm = false;
   }
-
 }
-
diff --git a/src/app/constants/routes.constants.ts b/src/app/constants/routes.constants.ts
@@ -4,3 +4,5 @@ export const RoutesConstants = {
     home: '',
     dashboard: '/pages/home',
   };
+
+
diff --git a/src/app/pages/appliance-registration/appliance-registration.component.html b/src/app/pages/appliance-registration/appliance-registration.component.html
@@ -1,53 +0,0 @@
-<body>
-    <div style="position: relative;">
-        <div class="mx-auto max-w-full py-16 sm:py-20 lg:py-28 flex items-center justify-center gap-12 relative bg-white border-l-8 border-r-8 border-gray-200 rounded-lg shadow-lg"
-            style="margin-left: 100px; margin-right: 100px; margin-top: 90px;">
-            <div class="flex-1" style="margin-left: 60px;">
-                <h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl">
-                    Registro de Electrodomésticos
-                </h1>
-                <p class="mt-6 text-lg leading-8 text-gray-600" style="text-align: justify;">
-                    Completa el formulario para registrar tu electrodoméstico. Asegúrate de proporcionar todos los detalles necesarios.
-                </p>
-            </div>
-            <div class="flex-shrink-0" style="margin-right: 70px;">
-                <img src="your-image-url.jpg" alt="Registro de Electrodomésticos" class="w-96 h-96 object-cover rounded-lg shadow-lg">
-            </div>
-        </div>
-        <div class="mx-auto mt-10 max-w-2xl p-4 bg-white border border-gray-200 rounded-lg shadow-lg"
-            style="margin-left: 100px; margin-right: 100px;">
-            <form>
-                <div class="grid grid-cols-1 gap-4">
-                    <div>
-                        <label for="name" class="block text-sm font-medium text-gray-700">Nombre</label>
-                        <input id="name" name="name" type="text" required
-                            class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
-                    </div>
-                    <div>
-                        <label for="brand" class="block text-sm font-medium text-gray-700">Marca</label>
-                        <input id="brand" name="brand" type="text" required
-                            class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
-                    </div>
-                    <div>
-                        <label for="model" class="block text-sm font-medium text-gray-700">Modelo</label>
-                        <input id="model" name="model" type="text" required
-                            class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
-                    </div>
-                    <div>
-                        <label for="purchaseDate" class="block text-sm font-medium text-gray-700">Fecha de Compra</label>
-                        <input id="purchaseDate" name="purchaseDate" type="date" required
-                            class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
-                    </div>
-                </div>
-                <div class="mt-6 flex justify-end">
-                    <button type="submit" class="py-2 px-4 bg-blue-500 text-white font-medium rounded-md hover:bg-blue-600">
-                        Registrar
-                    </button>
-                </div>
-            </form>
-        </div>
-    </div>
-    <div style="margin-top: 100px;">
-
-    </div>
-</body>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,3 +4,5 @@ export const RoutesConstants = {
		home: '',
		dashboard: '/pages/home',
		};