💄 add register UI styles

Author: marcode24

src/app/auth/auth.module.ts

@@ -1,14 +1,18 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
 
 import { LoginComponent } from './login/login.component';
+import { RegisterComponent } from './register/register.component';
 
 @NgModule({
   declarations: [
-    LoginComponent
+    LoginComponent,
+    RegisterComponent
   ],
   imports: [
-    CommonModule
+    CommonModule,
+    RouterModule
   ]
 })
 export class AuthModule { }

src/app/auth/auth.routing.ts

@@ -2,11 +2,16 @@ import { NgModule } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
 
 import { LoginComponent } from "./login/login.component";
+import { RegisterComponent } from "./register/register.component";
 
 const routes: Routes = [
  {
   path: 'login',
   component: LoginComponent
+ },
+ {
+  path: 'register',
+  component: RegisterComponent
  }
 ];
 

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

@@ -20,42 +20,6 @@
   background-position: center;
 }
 
-.form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
-  flex: 1;
-}
-
-.main {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 0.5rem;
-
-  & .title {
-    @include fs-1;
-    @include fw-600;
-    color: var(--fc-purple);
-  }
-
-  & .sign-up {
-    @include fs-5;
-    @include fw-400;
-    color: var(--fc-secondary);
-
-    & a {
-      color: var(--fc-purple);
-      text-decoration: none;
-
-      &:hover {
-        cursor: pointer;
-        text-decoration: underline;
-      }
-    }
-  }
-}
 
 .options {
   display: flex;

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

@@ -0,0 +1,39 @@
+<div class="auth-wrapper">
+  <div class="container">
+    <section class="logo-content">
+      <div class="logo">
+        <img src="" alt="logo_image">
+      </div>
+      <img src="assets/images/register.svg" alt="media" class="register-image">
+    </section>
+    <section class="form-group">
+      <div class="main">
+        <span class="title">Regístrate</span>
+        <span class="sign-up">¿Ya tienes una cuenta?
+          <a routerLink="/login">Inicia sesión</a>
+        </span>
+      </div>
+      <form>
+        <div class="input-group">
+          <label for="name">Nombre</label>
+          <input type="text" id="name" placeholder="Nombre">
+        </div>
+        <div class="input-group">
+          <label for="email">Correo electrónico</label>
+          <input type="email" id="email" placeholder="Correo electrónico">
+        </div>
+        <div class="input-group">
+          <label for="password">Contraseña</label>
+          <input type="password" id="password" placeholder="Contraseña">
+        </div>
+        <div class="input-group">
+          <label for="confirm-password">Confirmar contraseña</label>
+          <input type="password" id="confirm-password" placeholder="Confirmar contraseña">
+        </div>
+        <div class="input-container">
+          <button class="btn btn-primary">Regístrarme</button>
+        </div>
+      </form>
+    </section>
+  </div>
+</div>

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

@@ -0,0 +1,27 @@
+@import 'settings/_colors.scss';
+@import 'settings/_typography.scss';
+
+.logo-content {
+  flex: 2;
+}
+
+.logo {
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+}
+
+.register-image {
+  width: 100%;
+  height: 100%;
+  max-width: 80rem;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+}
+
+
+.btn {
+  width: 100%;
+  border-radius: 0.5rem;
+}

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

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RegisterComponent } from './register.component';
+
+describe('RegisterComponent', () => {
+  let component: RegisterComponent;
+  let fixture: ComponentFixture<RegisterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ RegisterComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RegisterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-register',
+  templateUrl: './register.component.html',
+  styleUrls: ['./register.component.scss']
+})
+export class RegisterComponent {}
+

src/assets/images/register.svg

@@ -130,3 +130,41 @@ form {
     }
   }
 }
+
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  flex: 1;
+}
+
+.main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0.5rem;
+
+  & .title {
+    @include fs-1;
+    @include fw-600;
+    color: var(--fc-purple);
+  }
+
+  & .sign-up {
+    @include fs-5;
+    @include fw-400;
+    color: var(--fc-secondary);
+
+    & a {
+      color: var(--fc-purple);
+      text-decoration: none;
+
+      &:hover {
+        cursor: pointer;
+        text-decoration: underline;
+      }
+    }
+  }
+}