feat: added login page

src/app/app-routing.module.ts

@@ -3,6 +3,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { HomePageComponent as AgentHomePageComponent } from './agent/pages/home-page/home-page.component';
 import { HomePageComponent as PassengerHomePageComponent } from './passenger/pages/home-page/home-page.component';
 import { HomePageComponent as SupervisorHomePageComponent } from './supervisor/pages/home-page/home-page.component';
+import { SignInComponent } from './security/pages/sign-in/sign-in.component';
 
 const routes: Routes = [
   {
@@ -19,6 +20,10 @@ const routes: Routes = [
     path: 'supervisors',
     component: SupervisorHomePageComponent,
     loadChildren: () => import('./supervisor/supervisor.module').then(m => m.SupervisorModule)
+  },
+  {
+    path: 'sign-in',
+    component: SignInComponent,
   }
 ];
 

src/app/app.module.ts

@@ -5,19 +5,23 @@ import { AppComponent } from './app.component';
 import { SupervisorModule } from './supervisor/supervisor.module';
 import { PassengerModule } from './passenger/passenger.module';
 import { AgentModule } from './agent/agent.module';
-import { AgentRoutingModule } from './agent/agent-routing.module';
+import { SharedModule } from './shared/shared.module';
+import { SignInComponent } from './security/pages/sign-in/sign-in.component';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    SignInComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
+    SharedModule,
     AgentModule,
-    AgentRoutingModule,
     SupervisorModule,
     PassengerModule,
+    FormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/security/pages/sign-in/sign-in.component.css

+.container-login {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  background-color: #f3f3f4;
+}
+
+.login {
+  max-width: 600px;
+  display: flex;
+  flex-direction: column;
+  width: auto;
+  width: 100%;
+}
+
+.login__enterprise {
+  display: flex;
+  justify-content: center;
+  padding-top: 10px;
+  padding-bottom: 40px;
+}
+
+.login__enterprise img {
+  width: 100px;
+}
+
+.login__content {
+  background-color: white;
+  padding: 20px 40px 30px 40px;
+  width: 100%;
+}
+
+.login__content-lenguage {
+  display: flex;
+  justify-content: end;
+  margin-bottom: 40px;
+}
+
+.login__content-lenguage select {
+  font-size: 12px;
+  border: 0;
+  color: rgba(45, 109, 238, 0.76);
+  outline: none;
+}
+
+.login__content-security {
+  display: flex;
+  flex-direction: column;
+  row-gap: 20px;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+}
+
+.field__label {
+  margin-bottom: 8px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.field__input {
+  padding: 7px 5px;
+  font-size: 12px;
+  font-size: 500;
+  border: 1px solid gray;
+  outline: none;
+}
+
+.field__input:hover {
+  border: 1px solid rgba(77, 130, 236, 0.76);
+}
+
+.field__input:focus {
+  box-shadow: 0 0 6px rgba(60, 119, 238, 0.76);
+  border: 1px solid rgba(45, 109, 238, 0.76);
+}
+
+.actions {
+  margin-top: 30px;
+}
+
+.actions input {
+  width: 100%;
+  background-color: #1ab394;
+  color: white;
+  border: none;
+  border-radius: 0;
+}

src/app/security/pages/sign-in/sign-in.component.html

+<div class="container-login">
+  <div class="login">
+    <div class="login__enterprise">
+      <img src="assets/bytea-logo-color.png" alt="Logo Byte">
+    </div>
+    <div class="login__content">
+      <div class="login__content-lenguage">
+        <select [(ngModel)]="lenguage" name="lenguage" id="lenguage">
+          <option *ngFor="let leng of lenguages" [value]="leng.value">{{leng.text}}</option>
+        </select>
+      </div>
+      <form class="login__content-security">
+        <div class="field">
+          <label class="field__label" for="user">{{ text[lenguage].email }}</label>
+          <input class="field__input" type="text" name="user" id="user">
+        </div>
+        <div class="field">
+          <label class="field__label" for="password">{{ text[lenguage].password }}</label>
+          <input class="field__input" type="password" name="password" id="password">
+        </div>
+        <div class="actions">
+          <input class="btn" type="submit" [value]="text[lenguage].button">
+        </div>
+      </form>
+    </div>
+  </div>
+</div>

src/app/security/pages/sign-in/sign-in.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-sign-in',
+  templateUrl: './sign-in.component.html',
+  styleUrls: ['./sign-in.component.css']
+})
+export class SignInComponent {
+
+  public lenguage: string = 'es';
+  public lenguages: any[] = [
+    {
+      value: 'es',
+      text: 'Español'
+    },
+    {
+      value: 'en',
+      text: 'English'
+    }
+  ];
+
+  public text: any = {
+    es: {
+      email: 'Usuario o email',
+      password: 'Contraseña',
+      button: 'Iniciar sesión'
+    },
+    en: {
+      email: 'Username or email',
+      password: 'Password',
+      button: 'Sign in'
+    }
+  }
+
+  changeLenguage(lenguage: string) {
+    this.lenguage = lenguage;
+  }
+}