首页 发现 帮助
注册 登录
ITTEC
/
SistemaMantenimiento
3
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

login

Fernanda Zavala Alpuche 3 年之前
父节点
4e8126c5cb
当前提交
7400cdc121
共有 8 个文件被更改，包括 253 次插入 和 76 次删除
分列视图 显示文件统计
  1. 1 1
      sistema-mantenimiento-front/src/app/app-routing.module.ts
  2. 34 0
      sistema-mantenimiento-front/src/app/components/login/login.component.css
  3. 38 1
      sistema-mantenimiento-front/src/app/components/login/login.component.html
  4. 43 1
      sistema-mantenimiento-front/src/app/components/login/login.component.ts
  5. 16 0
      sistema-mantenimiento-front/src/app/services/login.service.spec.ts
  6. 26 0
      sistema-mantenimiento-front/src/app/services/login.service.ts
  7. 0 0
      sistema-mantenimiento-front/src/assets/img/img-login.svg
  8. 95 73
      sistema-mantenimiento-front/src/styles.css

+ 1 - 1
sistema-mantenimiento-front/src/app/app-routing.module.ts
查看文件 

@@ -5,7 +5,7 @@ import { NgModule } from '@angular/core';
 
 import { RouterModule, Routes } from '@angular/router';
 
 
 const routes: Routes = [
 
-  { path: 'login', component: LoginComponent },
 
+  { path: '', component: LoginComponent },
 
   { path: 'users-profiles', component: UsersProfilesComponent },
 
   { path: 'new-user', component: NewUserComponent }
 
 ];

+ 34 - 0
sistema-mantenimiento-front/src/app/components/login/login.component.css
查看文件 

@@ -0,0 +1,34 @@
 
+mat-card {
 
+  width: 1000px;
 
+}
 
+
 
+.card-inicio {
 
+  position: absolute;
 
+  left: 50%;
 
+  top: 50%;
 
+  -moz-transform: translate(-50%, -50%);
 
+  -webkit-transform: translate(-50%, -50%);
 
+  -ms-transform: translate(-50%, -50%);
 
+  -o-transform: translate(-50%, -50%);
 
+  transform: translate(-50%, -50%);
 
+  padding: 10px 10px 10px 10px;
 
+  /* background-color: rgba(255, 255, 255, 0.589); */
 
+}
 
+
 
+mat-form-field.mat-form-field {
 
+  width: 100%;
 
+  font-size: 16px;
 
+}
 
+
 
+.inicio {
 
+  font-family: Arial, Helvetica, sans-serif;
 
+}
 
+
 
+.body-inicio {
 
+  height: 100%;
 
+  top: 0;
 
+  margin: 0;
 
+  font-family: Arial, Helvetica, sans-serif;
 
+  background-color: #465fc1;
 
+  /* background: linear-gradient(to bottom right, #1A43FE, #e7d9fa); */
 
+}

+ 38 - 1
sistema-mantenimiento-front/src/app/components/login/login.component.html
查看文件 

@@ -1 +1,38 @@
 
-<p>login works!</p>
 
+<head>
 
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
+</head>
 
+<div class="body-inicio">
 
+    <mat-card class="card-inicio mat-elevation-z8 animated fadeIn fast centre">
 
+        <mat-grid-list cols="2">
 
+            <mat-grid-tile>
 
+                <form [formGroup]="formGroup">
 
+                    <mat-card-title style="margin-top: 25px; font-size: 26px;">Sistema de Apoyo al Mantenimiento
 
+                    </mat-card-title>
 
+                    <h4 class="inicio" style="margin-top: 35px;">Inicio de sesión</h4>
 
+                    <mat-form-field appearance="standard">
 
+                        <mat-label>Correo Electrónico</mat-label>
 
+                        <input matInput placeholder="Ingrese el correo electrónico" formControlName="email" required />
 
+                        <mat-icon matSuffix>email</mat-icon>
 
+                    </mat-form-field>
 
+
 
+                    <mat-form-field appearance="standard" style="margin-top: 25px;">
 
+                        <mat-label>Contraseña</mat-label>
 
+                        <input matInput placeholder="Ingrese la contraseña" formControlName="password" required />
 
+                        <a class="mat-form-field" mat-icon-button matSuffix>
 
+                            <mat-icon>visibility</mat-icon>
 
+                        </a>
 
+                    </mat-form-field>
 
+                    <div style="margin-top: 15px;">
 
+                        <button mat-raised-button style="background-color: #7c8cf4;" matTooltip="Iniciar Sesion"
 
+                            (click)="login()">
 
+                            Iniciar sesión
 
+                        </button>
 
+                    </div>
 
+                </form>
 
+            </mat-grid-tile>
 
+            <mat-grid-tile>
 
+                <img src="../../../assets/img/img-login.svg" alt="" width="310" />
 
+            </mat-grid-tile>
 
+        </mat-grid-list>
 
+    </mat-card>
 
+</div>

+ 43 - 1
sistema-mantenimiento-front/src/app/components/login/login.component.ts
查看文件 

@@ -1,4 +1,7 @@
 
 import { Component, OnInit } from '@angular/core';
 
+import { FormControl, FormGroup, Validators } from '@angular/forms';
 
+import { Router } from '@angular/router';
 
+import { LoginService } from 'src/app/services/login.service';
 
 
 @Component({
 
   selector: 'app-login',
 
@@ -6,10 +9,49 @@ import { Component, OnInit } from '@angular/core';
 
   styleUrls: ['./login.component.css']
 
 })
 
 export class LoginComponent implements OnInit {
 
+  formGroup: FormGroup;
 
+  hide = true;
 
 
-  constructor() { }
 
+  constructor(
 
+    private router: Router,
 
+    private _serviceLogin: LoginService
 
+  ) {
 
+
 
+    this.formGroup = this.createFormGroup();
 
+  }
 
 
   ngOnInit(): void {
 
+
 
+  }
 
+
 
+  private createFormGroup() {
 
+    return new FormGroup({
 
+      email: new FormControl('', [Validators.required]),
 
+      password: new FormControl('', Validators.required)
 
+    });
 
+  }
 
+
 
+  procesarDatos(): any {
 
+    let datos: any = {
 
+      email: this.email?.value,
 
+      password: this.password?.value
 
+    }
 
+    return datos;
 
+  }
 
+
 
+  login() {
 
+    let informacion: any = this.procesarDatos();
 
+    console.log(informacion);
 
+    // this.router.navigate([
 
+    //   'users-profiles'
 
+    // ]);
 
   }
 
 
+  get email() {
 
+    return this.formGroup.get('email');
 
+  }
 
+
 
+  get password() {
 
+    return this.formGroup.get('password');
 
+  }
 
 }

+ 16 - 0
sistema-mantenimiento-front/src/app/services/login.service.spec.ts
查看文件 

@@ -0,0 +1,16 @@
 
+import { TestBed } from '@angular/core/testing';
 
+
 
+import { LoginService } from './login.service';
 
+
 
+describe('LoginService', () => {
 
+  let service: LoginService;
 
+
 
+  beforeEach(() => {
 
+    TestBed.configureTestingModule({});
 
+    service = TestBed.inject(LoginService);
 
+  });
 
+
 
+  it('should be created', () => {
 
+    expect(service).toBeTruthy();
 
+  });
 
+});

+ 26 - 0
sistema-mantenimiento-front/src/app/services/login.service.ts
查看文件 

@@ -0,0 +1,26 @@
 
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 
+import { Injectable } from '@angular/core';
 
+import { map } from 'rxjs';
 
+import { apiUriQA } from 'src/environments/environment';
 
+
 
+@Injectable({
 
+  providedIn: 'root'
 
+})
 
+export class LoginService {
 
+  token = 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJFZERTQSJ9.eyJpc3MiOiJqb3NlLmJAaXR0ZWMubXgiLCJhdWQiOiJkb21pbmlvLnN5cC5teCIsImlhdCI6MTY0NzYxMjc0NCwiY2FkIjoxNjQ3Njk5MTQ0fQ.BkpH8BMrx0hExtdU0EsNGxQxcbx_RqvTpGq12DqfbS0IEej5enf6V6q2DbqPsueK_0DMR_CWU9kMMYQCN2jrCg';
 
+
 
+  constructor(private http: HttpClient) { }
 
+
 
+  login (userInfo: any) {
 
+    return this.postQuery("login/", userInfo).pipe(map((data: any) => data))
 
+  }
 
+
 
+  postQuery(query: string, body: any){
 
+    const URL = `${apiUriQA}${query}`;
 
+    return this.http.post(URL, body, {
 
+      headers: new HttpHeaders({
 
+        Authorization: this.token
 
+      })
 
+    });
 
+  }
 
+}

文件差异内容过多而无法显示
+ 0 - 0
sistema-mantenimiento-front/src/assets/img/img-login.svg


+ 95 - 73
sistema-mantenimiento-front/src/styles.css
查看文件 

@@ -1,104 +1,126 @@
 
 /* You can add global styles to this file, and also import other style files */
 
 @import "~@angular/material/prebuilt-themes/indigo-pink.css";
 
-html, body { height: 100%; padding: 0; margin: 0; overflow: hidden;}
 
-body { font-family: Roboto, "Helvetica Neue", sans-serif; }
 
 
-.card-content-container{
 
-    height: calc(100vh - 109px - 64px);
 
-    padding: 16px 0;
 
-    box-sizing: border-box;
 
+html,
 
+body {
 
+  height: 100%;
 
+  padding: 0;
 
+  margin: 0;
 
+  overflow: hidden;
 
 }
 
 
-.table-header{
 
-    background-color: #EEE;
 
-    padding: 8px 16px;
 
-    border-radius: 8px 8px 0 0;
 
-    border-color: #CCC;
 
-    border-width: 1px;
 
-    border-style: solid;
 
-    display: flex;
 
-    flex-direction: row;
 
+body {
 
+  font-family: Roboto, "Helvetica Neue", sans-serif;
 
 }
 
 
-.table-row-white{
 
-    padding: 8px 16px;
 
-    border-color: #CCC;
 
-    border-width: 0 1px 1px 1px;
 
-    border-style: solid;
 
-    display: flex;
 
-    flex-direction: row;
 
+.card-content-container {
 
+  height: calc(100vh - 109px - 64px);
 
+  padding: 16px 0;
 
+  box-sizing: border-box;
 
 }
 
 
-.table-row-gray{
 
-    padding: 8px 16px;
 
-    border-color: #CCC;
 
-    border-width: 0 1px 1px 1px;
 
-    border-style: solid;
 
-    display: flex;
 
-    flex-direction: row;
 
-    background-color: #EEE;
 
+.table-header {
 
+  background-color: #EEE;
 
+  padding: 8px 16px;
 
+  border-radius: 8px 8px 0 0;
 
+  border-color: #CCC;
 
+  border-width: 1px;
 
+  border-style: solid;
 
+  display: flex;
 
+  flex-direction: row;
 
 }
 
 
-.table-cell-header{
 
-    width: 100%;
 
-    font-weight: bold;
 
+.table-row-white {
 
+  padding: 8px 16px;
 
+  border-color: #CCC;
 
+  border-width: 0 1px 1px 1px;
 
+  border-style: solid;
 
+  display: flex;
 
+  flex-direction: row;
 
 }
 
 
-.table-cell{
 
-    width: 100%;
 
-    display: flex;
 
-    align-items: center;
 
+.table-row-gray {
 
+  padding: 8px 16px;
 
+  border-color: #CCC;
 
+  border-width: 0 1px 1px 1px;
 
+  border-style: solid;
 
+  display: flex;
 
+  flex-direction: row;
 
+  background-color: #EEE;
 
 }
 
 
-.table-container{
 
-    width: 100%;
 
-    overflow-y: auto;
 
-    height: 100%;
 
+.table-cell-header {
 
+  width: 100%;
 
+  font-weight: bold;
 
 }
 
 
-.loader-container{
 
-    width: 100%;
 
-    height: 100%;
 
-    display: flex;
 
-    flex-direction: column;
 
-    align-items: center;
 
-    justify-content: center;
 
+.table-cell {
 
+  width: 100%;
 
+  display: flex;
 
+  align-items: center;
 
 }
 
 
-.loader-label{
 
-    margin-top: 16px;
 
-    animation-name: label-fade;
 
-    animation-duration: 2s;
 
-    animation-iteration-count: infinite;
 
+.table-container {
 
+  width: 100%;
 
+  overflow-y: auto;
 
+  height: 100%;
 
 }
 
 
-@keyframes label-fade{
 
-    0% { opacity: 1; }
 
-    50% { opacity: 0.5; }
 
-    100% { opacity: 1; }
 
+.loader-container {
 
+  width: 100%;
 
+  height: 100%;
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: center;
 
+  justify-content: center;
 
 }
 
 
-.error-container{
 
-    width: 100%;
 
-    height: 100%;
 
-    display: flex;
 
-    flex-direction: column;
 
-    align-items: center;
 
-    justify-content: center;
 
+.loader-label {
 
+  margin-top: 16px;
 
+  animation-name: label-fade;
 
+  animation-duration: 2s;
 
+  animation-iteration-count: infinite;
 
 }
 
 
-.full-width{
 
-    width: 100%;
 
+@keyframes label-fade {
 
+  0% {
 
+    opacity: 1;
 
+  }
 
+
 
+  50% {
 
+    opacity: 0.5;
 
+  }
 
+
 
+  100% {
 
+    opacity: 1;
 
+  }
 
 }
 
 
-.ml-8{
 
-    margin-left: 8px;
 
+.error-container {
 
+  width: 100%;
 
+  height: 100%;
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: center;
 
+  justify-content: center;
 
 }
 
 
-.mr-8{
 
-    margin-right: 8px;
 
+.full-width {
 
+  width: 100%;
 
 }
 
 
-.mt-8{
 
-    margin-top: 8px;
 
-}
 
+.ml-8 {
 
+  margin-left: 8px;
 
+}
 
+
 
+.mr-8 {
 
+  margin-right: 8px;
 
+}
 
+
 
+.mt-8 {
 
+  margin-top: 8px;
 
+}
 
+
 
+.centre {
 
+  text-align: center !important;
 
+}

部分文件因为文件数量过多而无法显示