Login css fix

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

@@ -7,6 +7,13 @@ mat-card {
   margin: 10px;
 }
 
+.elements-card{
+  margin: 10px;
+  width: 800px;
+  background-color: #fafafa;
+  
+}
+
 .groups-button-row {
   display: flex;
   flex-grow: 1;
@@ -39,9 +46,3 @@ button {
   color: #212121;
 }
 
-.elements-card{
-  margin: 10px;
-  width: 800px;
-  background-color: #fafafa;
-  
-}

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

@@ -1,16 +1,17 @@
 .login {
     overflow: hidden;
-    background-color: rgb(255, 255, 255);
-    border: 1px solid grey;
-    padding: 40px 30px 30px 30px;
+    background-color: #fff;
+    border: 1px solid rgba(128, 128, 128, 0.801);
+    padding: 40px 30px;
     border-radius: 10px;
     position: absolute;
     top: 50%;
     left: 50%;
-    width: 400px;
+    width: 300px;
     transform: translate(-50%, -50%);
     transition: transform 300ms, box-shadow 300ms;
     box-shadow: 5px 10px 10px rgba(2, 128, 144, 0.2);
+    text-align: center;
 }
 
 .login::before, .login::after {
@@ -18,13 +19,17 @@
     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%;
+    border-radius: 40% 45% 35% 40%;
     z-index: -1;
 }
 
+.login-logo {
+    height: 100px;
+    width: 100px;
+    display: block;
+    margin: 0 auto 20px;
+}
+
 .login input {
     font-family: "Asap", sans-serif;
     display: block;
@@ -32,8 +37,9 @@
     font-size: 16px;
     background: rgba(230, 230, 230);
     width: 100%;
-    padding: 10px 10px;
+    padding: 10px;
     margin: 15px -10px;
+    text-align: center;
 }
 
 .login button {
@@ -48,7 +54,7 @@
     margin-top: 10px;
     margin-left: -5px;
     border-radius: 5px;
-    background-color: #0084ff;
+    background-color: #3f51b5;
     transition: background-color 300ms;
 }
 
@@ -64,3 +70,17 @@
     color: red;
     margin-top: 10px;
 }
+
+
+@keyframes rotate360 {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  
+  .rotating {
+    animation: rotate360 0.6s cubic-bezier(.42,0,1,1) infinite;
+  }

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

@@ -1,5 +1,7 @@
 <div>
     <form class="login" (ngSubmit)="onLogin()" #loginForm="ngForm">
+        <img src="assets/images/logo.png" alt="Opengnsys" 
+             class="login-logo" [class.rotating]="isLoading">
         <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}">

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

@@ -13,10 +13,14 @@ export class LoginComponent {
       "password": ""
     };
     errorMessage: string = '';
+    isLoading: boolean = false; 
 
     constructor(private http: HttpClient, private router: Router) { }
     
     onLogin() {
+        this.errorMessage = '';
+        this.isLoading = true; 
+
         if (!this.loginObj.username || !this.loginObj.password) {
             if (!this.loginObj.username) {
                 document.getElementById('username')?.classList.add('invalid');
@@ -29,6 +33,8 @@ export class LoginComponent {
             } else {
                 document.getElementById('password')?.classList.remove('invalid');
             }
+
+            this.isLoading = false; 
             return;
         }
 
@@ -40,8 +46,10 @@ export class LoginComponent {
                     localStorage.setItem('username', this.loginObj.username);
                     this.router.navigateByUrl('/dashboard');
                 }
+                this.isLoading = false;
             },
             error: (err) => {
+                this.isLoading = false;  
                 if (err.status === 401) {
                     this.errorMessage = 'Usuario o contraseña incorrectos';
                 } else {