Refs #364 añadida interactividad inputs y estilos css

ogWebconsole/src/app/components/login/login.component.css

@@ -0,0 +1,66 @@
+.login {
+    overflow: hidden;
+    background-color: rgb(255, 255, 255);
+    border: 1px solid grey;
+    padding: 40px 30px 30px 30px;
+    border-radius: 10px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 400px;
+    transform: translate(-50%, -50%);
+    transition: transform 300ms, box-shadow 300ms;
+    box-shadow: 5px 10px 10px rgba(2, 128, 144, 0.2);
+}
+
+.login::before, .login::after {
+    content: "";
+    position: absolute;
+    width: 600px;
+    height: 600px;
+    border-top-left-radius: 40%;
+    border-top-right-radius: 45%;
+    border-bottom-left-radius: 35%;
+    border-bottom-right-radius: 40%;
+    z-index: -1;
+}
+
+.login input {
+    font-family: "Asap", sans-serif;
+    display: block;
+    border-radius: 5px;
+    font-size: 16px;
+    background: rgba(230, 230, 230);
+    width: 100%;
+    padding: 10px 10px;
+    margin: 15px -10px;
+}
+
+.login button {
+    font-family: "Asap", sans-serif;
+    cursor: pointer;
+    color: #fff;
+    font-size: 16px;
+    text-transform: uppercase;
+    width: 80px;
+    border: 0;
+    padding: 10px 0;
+    margin-top: 10px;
+    margin-left: -5px;
+    border-radius: 5px;
+    background-color: #0084ff;
+    transition: background-color 300ms;
+}
+
+.login button:hover {
+    background-color: #0271da;
+}
+
+.invalid {
+    border: 1px solid red;
+}
+
+.error-message {
+    color: red;
+    margin-top: 10px;
+}

ogWebconsole/src/app/components/login/login.component.html

@@ -1,14 +1,9 @@
 <div>
-    <h2>Login</h2>
-    <form>
-        <div>
-            <label for="username">Username:</label>
-            <input [(ngModel)]="loginObj.username" type="text" id="username" name="username" required>
-        </div>
-        <div>
-            <label for="password">Password:</label>
-            <input [(ngModel)]="loginObj.password" type="password" id="password" name="password" required>
-        </div>
-        <button (click)="onLogin()">Login</button>
+    <form class="login" (ngSubmit)="onLogin()" #loginForm="ngForm">
+        <h2>Opengnsys</h2>
+        <input [(ngModel)]="loginObj.username" type="text" id="username" name="username" placeholder="usuario" required #usernameInput="ngModel" [ngClass]="{'invalid': !usernameInput.valid && usernameInput.touched}">
+        <input [(ngModel)]="loginObj.password" type="password" id="password" name="password" placeholder="contraseña" required #passwordInput="ngModel" [ngClass]="{'invalid': !passwordInput.valid && passwordInput.touched}">
+        <button type="submit">Login</button>
+        <div *ngIf="errorMessage" class="error-message">{{ errorMessage }}</div>
     </form>
-</div>
+</div>

ogWebconsole/src/app/components/login/login.component.ts

@@ -3,7 +3,6 @@ import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { Router } from '@angular/router';
 
-
 @Component({
   selector: 'app-login',
   templateUrl: './login.component.html',
@@ -14,18 +13,41 @@ export class LoginComponent {
       "username": "",
       "password": ""
     };
+    errorMessage: string = '';
+
     constructor(private http: HttpClient, private router: Router) { }
     
     onLogin() {
-      this.http.post('http://127.0.0.1:8080/auth/login', this.loginObj).subscribe((res: any) => {
-        if(res.token){
-          localStorage.setItem('loginToken', res.token);
-          localStorage.setItem('refreshToken', res.refreshToken);
-          this.router.navigateByUrl('/dashboard');
+        if (!this.loginObj.username || !this.loginObj.password) {
+            if (!this.loginObj.username) {
+                document.getElementById('username')?.classList.add('invalid');
+            } else {
+                document.getElementById('username')?.classList.remove('invalid');
+            }
+
+            if (!this.loginObj.password) {
+                document.getElementById('password')?.classList.add('invalid');
+            } else {
+                document.getElementById('password')?.classList.remove('invalid');
+            }
+            return;
         }
-        else(
-          alert("invalid credentials")
-        )
-      })
+
+        this.http.post('http://127.0.0.1:8080/auth/login', this.loginObj).subscribe({
+            next: (res: any) => {
+                if (res.token) {
+                    localStorage.setItem('loginToken', res.token);
+                    localStorage.setItem('refreshToken', res.refreshToken);
+                    this.router.navigateByUrl('/dashboard');
+                }
+            },
+            error: (err) => {
+                if (err.status === 401) {
+                    this.errorMessage = 'Usuario o contraseña incorrectos';
+                } else {
+                    this.errorMessage = 'Ha ocurrido un error. Por favor, inténtelo de nuevo.';
+                }
+            }
+        });
     }
 }