navBar fixed + login + signup fixed

Author: JhostinD

frontend/src/app/app.routing.ts

@@ -7,6 +7,8 @@ import { NewsComponent } from './components/news/news.component';
 import { ShowNewsComponent } from './components/news/showNews.component';
 import { UserProfile } from './components/user/userProfile.component';
 import { AboutComponent } from './components/about/about.component';
+import { LoginComponent } from './components/login/login.component';
+import { SignUpComponent } from './components/login/signUp.component';
 
 //aquí tenemos que completar todo lo que queremos que se vaya cargando en el router-outlet
 //ojo, el template no debe llamar al servicio, hay que hacerlo a través del componente
@@ -19,6 +21,8 @@ const appRoutes = [
     { path: 'videogamecatalog', component: VideogameCatalogComponent },
     { path: 'videogame/:id', component: VideogameDetailComponent },
     { path: 'about', component: AboutComponent },
+    { path: 'login', component: LoginComponent },
+    { path: 'signUp', component: SignUpComponent },
     { path: '', redirectTo: 'home', pathMatch: 'full' }
 
 ]

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

@@ -13,7 +13,7 @@ <h1 class="fw-bolder text-white">Inicio de sesión</h1>
                 <div class="card-body">
                   <h3 class="card-title text-center">Login</h3>
                   <div class="card-text">
-                    <form *ngIf="!loginService.isLogged()">
+                    <form>
                       <!-- to error: add class "has-danger" -->
                       <div class="form-group">
                         <label>Nombre Usuario:</label>
@@ -25,14 +25,12 @@ <h3 class="card-title text-center">Login</h3>
                         <input #pass type="password" name="password" class="form-control form-control-sm"
                           placeholder="Password" id="exampleInputPassword1">
                         <br />
-                        <a href="login" style="float:right;font-size:12px;">¿Olvidaste tu contraseña?</a>
                         <br />
                       </div>
                       <!-- button to send the information-->
-                      <button type="submit" (click)="logIn($event, user.value, pass.value)"
-                        class="btn btn-default">Login</button>
+                      <a class="btn btn-primary btn-lg px-4 me-sm-3" type="submit" (click)="logIn($event, user.value, pass.value)">Login</a>
                       <div class="sign-up">
-                        ¿No tienes cuenta? <a [routerLink]="['/signup']">¡Créate una!</a>
+                        ¿No tienes cuenta? <a [routerLink]="['/signUp']">¡Créate una!</a>
                       </div>
                     </form>
                   </div>

frontend/src/app/components/login/signUp.component.html

@@ -15,7 +15,7 @@ <h1 class="fw-bolder text-white">Registrate gratis</h1>
                 <div class="card-body">
                   <h3 class="card-title text-center">Registro</h3>
                   <div class="card-text">
-                    <form *ngIf="!loginService.isLogged()">
+                    <form>
                       <div class="form-group">
                         <label for="exampleInputEmail1">Nick</label>
                         <input #nick name="nick" type="text" class="form-control form-control-sm"
@@ -47,9 +47,8 @@ <h3 class="card-title text-center">Registro</h3>
                           onkeyup="check()" required>
                         <span id="passwordMessage"></span>
                       </div>
-                      <button type="submit" (click)="createUser($event, nick.value, name.value, lastName.value, email.value,
-                                                                                        pass.value)"
-                        class="btn btn-default">registrarse</button>
+                      <a type="submit" (click)="createUser($event, nick.value, name.value, lastName.value, email.value,
+                          pass.value)" class="btn btn-primary btn-lg px-4 me-sm-3">registrarse</a>
                     </form>
                   </div>
                 </div>

frontend/src/app/components/navBar/navBar.component.html

@@ -10,7 +10,7 @@
                 <li class="nav-item"><a class="nav-link" [routerLink]="['/news']">Noticias</a></li>
                 <li class="nav-item"><a class="nav-link" [routerLink]="['/about']">About</a></li>
                 <li *ngIf="! loginService.isLogged()" class="nav-item"><a class="nav-link" [routerLink]="['/login']">Iniciar sesión</a></li>
-                <li *ngIf="! loginService.isLogged()" class="nav-item"><a class="nav-link" [routerLink]="['/signin']">Registrarse</a></li>
+                <li *ngIf="! loginService.isLogged()" class="nav-item"><a class="nav-link" [routerLink]="['/signUp']">Registrarse</a></li>
                 <li *ngIf="loginService.isLogged()" class="nav-item"><a class="nav-link" [routerLink]="['/userProfile']">Perfil</a></li>
                 <li *ngIf="loginService.isAdmin() && loginService.isLogged()" class="nav-item"><a class="nav-link" [routerLink]="['/admin']">Administrador</a></li>
             </ul>