UPDATE

frontend/main/package.json

@@ -19,6 +19,7 @@
     "@angular/platform-browser-dynamic": "^14.0.0",
     "@angular/router": "^14.0.0",
     "admin-lte": "3.0",
+    "jquery": "^3.6.1",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
@@ -28,6 +29,7 @@
     "@angular/cli": "^14.2.1",
     "@angular/compiler-cli": "^14.0.0",
     "@types/jasmine": "~4.0.0",
+    "@types/jquery": "^3.5.14",
     "jasmine-core": "~4.3.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.1.0",

frontend/main/src/app/home/home.component.css

@@ -0,0 +1,13 @@
+.card-title{
+  font-size: 25px;
+}
+#cards .row{
+  margin-left: 100px;
+  margin-top: 80px;
+}
+.card-body ul li a{
+  color: white;
+}
+.card-body ul li a:hover{
+  color: lightslategrey;
+}

frontend/main/src/app/home/home.component.html

@@ -1,75 +1,104 @@
 <main class="container-fluid">
-    <div class="row">
-        <div class="col">
-            <div class="card bg-gray-dark mt-4">
-                <div class="card-body mt-2">
-                    <h1>Welcome!!</h1>
-                    <h3>Where do you want to go?</h3>
-                </div>
-            </div>
+  <div class="row">
+    <div class="col">
+      <div class="card bg-gray-dark mt-4">
+        <div class="card-body mt-2">
+          <h1>Welcome!!</h1>
+          <h3>Where do you want to go?</h3>
         </div>
+      </div>
     </div>
+  </div>
 
-    
-</main>
-<div class="row">
-    <div class="col">
+
+  <div id="cards">
+    <div class="row">
+      <div class="col">
         <div class="card bg-warning mr-2" style="max-width: 18rem">
-            <div class="card-body">
-                <h3 class="card-title">Dashboards</h3>
-                <p class="card-text mt-4"><br><br> Clique para ver os Dashboards <br></p>
-            </div>
+          <div class="card-body" routerLink="dashboard">
+            <h3 class="card-title"> <span class="fas fa-chart-bar"></span>&nbsp;&nbsp;Dashboards</h3>
+            <p class="card-text mt-5"><br><br> <a href="" routerLink="dashboard">Click here to go to Dashboards!</a> <br></p>
+          </div>
         </div>
-    </div>
-<div class="col">
-    <div class="card bg-primary mr-2" style="max-width: 18rem">
-        <div class="card-body">
-            <h3 class="card-title">User</h3>
-            <p class="card-text mt-4"><br><br> Clique para ver User</p>
+      </div>
+      <div class="col">
+        <div class="card bg-primary mr-2" style="max-width: 18rem">
+          <div class="card-body">
+            <h3 class="card-title"><span class="fas fa-users"></span>&nbsp;&nbsp;User</h3>
+            <br>
+            <ul class="card-text mt-5">
+              <li>
+                <a href="">Clients</a>
+              </li>
+              <li>
+                <a href="">Carriers</a>
+              </li>
+            </ul>
+          </div>
         </div>
-    </div>
-</div>
-<div class="col">
-    <div class="card bg-olive" style="max-width: 18rem">
-        <div class="card-body">
-            <h3 class="card-title">Packages</h3>
-            <p class="card-text mt-4"><br><br> Clique para ver Packages</p>
+      </div>
+      <div class="col">
+        <div class="card bg-olive" style="max-width: 18rem">
+          <div class="card-body">
+            <h3 class="card-title"><span class="fas fa-box"></span>&nbsp;&nbsp;Packages</h3>
+            <br>
+            <ul class="card-text mt-5">
+              <li>
+                <a href="">Register</a>
+              </li>
+              <li>
+                <a href="">Tracking</a>
+              </li>
+            </ul>
+          </div>
         </div>
+      </div>
     </div>
-</div>
-</div>
 
     <div class="row">
-        <div class="col">
-            <div class="card bg-orange" style="max-width: 18rem">
-                <div class="card-body">
-                    <h3 class="card-title">Finance</h3>
-                    <p class="card-text mt-4"><br><br> Clique para ver Finance</p>
-                </div>
-            </div>
+      <div class="col">
+        <div class="card bg-orange" style="max-width: 18rem">
+          <div class="card-body">
+            <h3 class="card-title"><span class="fas fa-dollar-sign"></span>&nbsp;&nbsp;Finance</h3>
+            <br>
+            <ul class="card-text mt-4">
+              <li>
+                <a href="">Receipt</a>
+              </li>
+              <li>
+                <a href="">Cost</a>
+              </li>
+              <li>
+                <a href="">Balance</a>
+              </li>
+            </ul>
+          </div>
         </div>
-        <div class="col">
-            <div class="card bg-info" style="max-width: 18rem">
-                <div class="card-body">
-                    <h3 class="card-title">Quotes</h3>
-                    <p class="card-text mt-4"><br><br> Clique para ver Quotes</p>
-                </div>
-            </div>
+      </div>
+      <div class="col">
+        <div class="card bg-info" style="max-width: 18rem">
+          <div class="card-body">
+            <h3 class="card-title"><span class="fas fa-truck"></span>&nbsp;&nbsp;Quotes</h3>
+            <br>
+            <ul class="card-text mt-5">
+              <li>
+                <a href="">Shipping Quote</a>
+              </li>
+              <li>
+                <a href="">Recents Quotes</a>
+              </li>
+            </ul>
+          </div>
         </div>
-        <div class="col">
-            <div class="card bg-success" style="max-width: 18rem">
-                <div class="card-body">
-                    <h3 class="card-title">About us</h3>
-                    <p class="card-text mt-4"><br><br> Clique para ver About Us</p>
-                </div>
-            </div>
+      </div>
+      <div class="col">
+        <div class="card bg-success" style="max-width: 18rem">
+          <div class="card-body">
+            <h3 class="card-title"><span class="fas fa-building"></span>&nbsp;&nbsp;About us</h3>
+            <p class="card-text mt-5"><br><br> <a href="">Click here to go to About Us</a></p>
+          </div>
         </div>
+      </div>
     </div>
-
-
-
-
-
-
-
-
+  </div>
+</main>

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

@@ -22,7 +22,7 @@ <h4 class="mb-4 pb-3">Log In</h4>
                         autocomplete="on" [(ngModel)]="password" required>
                       <i class="input-icon uil uil-lock-alt"></i>
                     </div>
-                    <a class="btn mt-4" (click)="submit()">submit</a>
+                    <a class="btn mt-4" id="submitButton" (click)="submit()">submit</a>
                     <p class="mb-0 mt-4 text-center"><a routerLink="forgetPassword" class="link">Forgot your password?</a></p>
                   </div>
                 </div>

frontend/main/src/app/login/login.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { catchError, of } from 'rxjs';
 import { LoginserviceService } from '../loginservice.service';
+import * as $ from 'jquery'
 
 @Component({
   selector: 'app-login',
@@ -21,12 +22,16 @@ export class LoginComponent implements OnInit {
 
   ngOnInit(): void {
     this.loginService.succeed = false
+    document.addEventListener("keypress", function(e){
+      if(e.key === 'Enter'){
+        $('#submitButton')
+        alert('Ainda na luta pra fazer funcionar esse button pelo Enter')
+      }
+    })
   }
 
   submit():void{
     if(this.user != null && this.password != null){
-      this.loginService.succeed = true
-      this.router.navigateByUrl('home')
       this.loginService.logging(this.user, this.password)
       .pipe(
         catchError((error)=>{
@@ -41,6 +46,10 @@ export class LoginComponent implements OnInit {
     }
   }
 
+  gotoHome(){
+    this.router.navigateByUrl('home')
+  }
+
   register(){
     if(this.nameReg != null && this.passwordReg != null && this.emailReg != null){
       this.loginService.succeed = true

frontend/main/src/app/loginservice.service.ts

@@ -1,21 +1,36 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
+import { InjectSetupWrapper } from '@angular/core/testing';
 import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
 import { Observable } from 'rxjs';
+import { LoginComponent } from './login/login.component';
 
 @Injectable({
   providedIn: 'root'
 })
 export class LoginserviceService implements CanActivate {
 
   user!:string
-  TMSLoginAPI:string = "https://imagina-uma-api-bem-daora-aqui.com"
+  TMSLoginAPI:string = "https://randomuser.me/api/?results=1"
   succeed!:boolean
 
   constructor(private router:Router, private http:HttpClient) {}
 
   logging(user:string, password:string){
-    this.user = user
+    fetch(this.TMSLoginAPI)
+    .then((resp) => resp.json())
+    .then((data) =>{
+      let ranUsers = data.results;
+      return ranUsers.map((ranUser:any) =>{
+        this.user = `${ranUser.name.first}`
+        this.succeed = true
+        new LoginComponent(this.router, this).gotoHome()
+      })
+    })
+    .catch(function(error){
+      console.log(error);
+    })
+
     return this.http.get<any>(this.TMSLoginAPI+'/'+user+'/'+password)
   }
 

webpage/css/styles.css

@@ -11410,7 +11410,7 @@ header.masthead {
   padding-bottom: 6rem;
   text-align: center;
   color: #fff;
-  background-image: url("../assets/img/header-bg.jpg");
+  background-image: url("../assets/img/pexels-karolina-grabowska-4506249.jpg");
   background-repeat: no-repeat;
   background-attachment: scroll;
   background-position: center center;