Skip to content

Commit 5a0d420

Browse files
marcode24marcode24
authored
Merge pull request #2 from marcode24/dev
💄 add initial styles UI
2 parents 5d7fdd7 + 3f5b326 commit 5a0d420

39 files changed

+1035
-10
lines changed

‎.eslintrc.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,11 @@
8888
"group": "builtin",
8989
"position": "before"
9090
},
91+
{
92+
"pattern": "@shared/**",
93+
"group": "builtin",
94+
"position": "before"
95+
},
9196
{
9297
"pattern": "@services/**",
9398
"group": "builtin",

‎src/app/auth/auth.module.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
import { CommonModule } from '@angular/common';
22
import { NgModule } from '@angular/core';
3+
import { RouterModule } from '@angular/router';
34

45
import { LoginComponent } from './login/login.component';
6+
import { RegisterComponent } from './register/register.component';
57

68
@NgModule({
79
declarations: [
8-
LoginComponent
10+
LoginComponent,
11+
RegisterComponent
912
],
1013
imports: [
11-
CommonModule
14+
CommonModule,
15+
RouterModule
1216
]
1317
})
1418
export class AuthModule { }

‎src/app/auth/auth.routing.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,16 @@ import { NgModule } from "@angular/core";
22
import { RouterModule, Routes } from "@angular/router";
33

44
import { LoginComponent } from "./login/login.component";
5+
import { RegisterComponent } from "./register/register.component";
56

67
const routes: Routes = [
78
{
89
path: 'login',
910
component: LoginComponent
11+
},
12+
{
13+
path: 'register',
14+
component: RegisterComponent
1015
}
1116
];
1217

‎src/app/auth/login/login.component.html

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,38 @@
1-
<p>login works!</p>
1+
<div class="auth-wrapper">
2+
<div class="container">
3+
<section class="logo-content">
4+
<div class="logo">
5+
<img src="" alt="logo_image">
6+
</div>
7+
<img src="assets/images/login.svg" alt="media" class="login-image">
8+
</section>
9+
<section class="form-group">
10+
<div class="main">
11+
<span class="title">Iniciar sesión</span>
12+
<span class="sign-up">¿No tienes una cuenta?
13+
<a routerLink="/register">Regístrate</a>
14+
</span>
15+
</div>
16+
<form>
17+
<div class="input-group">
18+
<label for="email">Correo electrónico</label>
19+
<input type="email" id="email" placeholder="Correo electrónico">
20+
</div>
21+
<div class="input-group">
22+
<label for="password">Contraseña</label>
23+
<input type="password" id="password" placeholder="Contraseña">
24+
</div>
25+
<div class="options">
26+
<div class="input-group row">
27+
<input type="checkbox" id="remember">
28+
<label for="remember">Recordar</label>
29+
</div>
30+
<a routerLink="/forgot-password">¿Olvidaste tu contraseña?</a>
31+
</div>
32+
<div class="input-container">
33+
<button class="btn btn-primary">Iniciar sesión</button>
34+
</div>
35+
</form>
36+
</section>
37+
</div>
38+
</div>

‎src/app/auth/login/login.component.scss

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
@import 'settings/_colors.scss';
2+
@import 'settings/_typography.scss';
3+
4+
.logo-content {
5+
flex: 2;
6+
}
7+
8+
.logo {
9+
position: absolute;
10+
top: 1rem;
11+
left: 1rem;
12+
}
13+
14+
.login-image {
15+
width: 100%;
16+
height: 100%;
17+
max-width: 80rem;
18+
background-repeat: no-repeat;
19+
background-size: cover;
20+
background-position: center;
21+
}
22+
23+
24+
.options {
25+
display: flex;
26+
flex-direction: row;
27+
justify-content: space-between;
28+
align-items: center;
29+
gap: 1rem;
30+
31+
& a {
32+
@include fs-6;
33+
@include fw-500;
34+
color: var(--fc-purple);
35+
text-decoration: none;
36+
37+
&:hover {
38+
cursor: pointer;
39+
text-decoration: underline;
40+
}
41+
}
42+
}
43+
44+
.btn {
45+
width: 100%;
46+
border-radius: 0.5rem;
47+
}

‎src/app/auth/register/register.component.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<div class="auth-wrapper">
2+
<div class="container">
3+
<section class="logo-content">
4+
<div class="logo">
5+
<img src="" alt="logo_image">
6+
</div>
7+
<img src="assets/images/register.svg" alt="media" class="register-image">
8+
</section>
9+
<section class="form-group">
10+
<div class="main">
11+
<span class="title">Regístrate</span>
12+
<span class="sign-up">¿Ya tienes una cuenta?
13+
<a routerLink="/login">Inicia sesión</a>
14+
</span>
15+
</div>
16+
<form>
17+
<div class="input-group">
18+
<label for="name">Nombre</label>
19+
<input type="text" id="name" placeholder="Nombre">
20+
</div>
21+
<div class="input-group">
22+
<label for="email">Correo electrónico</label>
23+
<input type="email" id="email" placeholder="Correo electrónico">
24+
</div>
25+
<div class="input-group">
26+
<label for="password">Contraseña</label>
27+
<input type="password" id="password" placeholder="Contraseña">
28+
</div>
29+
<div class="input-group">
30+
<label for="confirm-password">Confirmar contraseña</label>
31+
<input type="password" id="confirm-password" placeholder="Confirmar contraseña">
32+
</div>
33+
<div class="input-container">
34+
<button class="btn btn-primary">Regístrarme</button>
35+
</div>
36+
</form>
37+
</section>
38+
</div>
39+
</div>

‎src/app/auth/register/register.component.scss

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
@import 'settings/_colors.scss';
2+
@import 'settings/_typography.scss';
3+
4+
.logo-content {
5+
flex: 2;
6+
}
7+
8+
.logo {
9+
position: absolute;
10+
top: 1rem;
11+
left: 1rem;
12+
}
13+
14+
.register-image {
15+
width: 100%;
16+
height: 100%;
17+
max-width: 80rem;
18+
background-repeat: no-repeat;
19+
background-size: cover;
20+
background-position: center;
21+
}
22+
23+
24+
.btn {
25+
width: 100%;
26+
border-radius: 0.5rem;
27+
}

‎src/app/auth/register/register.component.spec.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { RegisterComponent } from './register.component';
4+
5+
describe('RegisterComponent', () => {
6+
let component: RegisterComponent;
7+
let fixture: ComponentFixture<RegisterComponent>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
declarations: [ RegisterComponent ]
12+
})
13+
.compileComponents();
14+
});
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(RegisterComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎src/app/auth/register/register.component.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-register',
5+
templateUrl: './register.component.html',
6+
styleUrls: ['./register.component.scss']
7+
})
8+
export class RegisterComponent {}
9+

‎src/app/core/components/components.module.ts

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { CommonModule } from '@angular/common';
2+
import { NgModule } from '@angular/core';
3+
import { RouterModule } from '@angular/router';
4+
5+
import { HeaderComponent } from './header/header.component';
6+
import { SidebarComponent } from './sidebar/sidebar.component';
7+
8+
@NgModule({
9+
declarations: [
10+
SidebarComponent,
11+
HeaderComponent
12+
],
13+
imports: [
14+
CommonModule,
15+
RouterModule
16+
],
17+
exports: [
18+
SidebarComponent,
19+
HeaderComponent
20+
]
21+
})
22+
export class ComponentsModule { }

0 commit comments

Comments
 (0)