Example Angular login component

login.component.html

<div>
  <h1>Welcome to e-folio <!--Or whatsoever--> </h1>
  <form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
      <input formControlName="email"
             type="email"
             id="email"
             placeholder="[email protected]"/>
      <input formControlName="password"
             id="password"
             type="password" /> 
       
      <button type="submit">Sign in</button>  
  </form>
</div>
  

login.component.scss

div {
    position: absolute;
    margin: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    height: 60%;
    width: 35%;     

    h1{
        font-size: 24px;
        margin: 0 0 1em 0;
    }
   
    form{
        background-color: #F9F9F9;
        padding: 3.6em 1.2em 1.2em 1.2em;
        
        input{ 
            box-sizing: border-box;
            width: 100%;
            font-family: 'Montserrat', sans-serif;
            font-size: 14px;
            padding: 0.4em 0 0.4em 0.6em;
            margin-bottom: 0.8em;
            height: 3.2em; 
            outline: none;
            border-radius: 4px;
            border: 0px solid;
            box-shadow: 0 0 1.2px rgba(0,0,0,0.5);
            display: block;
        }        
        
        button{
            width: 100%;
            font-family: 'Montserrat', sans-serif;
            padding: 0.8em;
            margin-top:1.2em;
            outline: none;
            font-size: 14px;
            font-weight: 400;
            background-color: #009e74;
            color: white; 
            border-radius: 2px;
            border: 0px solid;   
            cursor: pointer;
        }
    }
}
 

login.component.spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { LoginComponent } from './login.component';

describe('LoginComponent', () => {
  let component: LoginComponent;
  let fixture: ComponentFixture<LoginComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ LoginComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(LoginComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

login.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  signupForm: FormGroup;  

  onSubmit() {
    console.log(this.signupForm);
  }

  constructor() { }

  ngOnInit() {
    this.signupForm = new FormGroup({
      "email": new FormControl(null, [Validators.required, Validators.email]),
      "password": new FormControl(null, Validators.required), 
    });
  }

}

styles.scss

//global styles

html, body { 
    height: 100vh; 
}
body {
     //font-family: Roboto, "Helvetica Neue", sans-serif;
     font-family: 'Montserrat', sans-serif;
     margin:0;
 }