#19 - Implement design of login page.

src/app/app.module.ts

@@ -23,6 +23,11 @@ import { HomeBlogPostsComponent } from './home/home-blog-posts/home-blog-posts.c
 import { HomeFooterComponent } from './home/home-footer/home-footer.component';
 import { HomeProjectsComponent } from './home/home-projects/home-projects.component';
 import { HomeComponent } from './home/home.component';
+import { FacebookIconComponent } from './icons/facebook-icon/facebook-icon.component';
+import { GithubIconComponent } from './icons/github-icon/github-icon.component';
+import { GoogleIconComponent } from './icons/google-icon/google-icon.component';
+import { MicrosoftIconComponent } from './icons/microsoft-icon/microsoft-icon.component';
+import { TwitterIconComponent } from './icons/twitter-icon/twitter-icon.component';
 import { ImageComponent } from './image/image.component';
 import { UploadImageComponent } from './image/upload-image/upload-image.component';
 import { httpInterceptorProviders } from './interceptors/interceptors';
@@ -77,6 +82,11 @@ export * from 'highlight.js';
     BlogPostViewComponent,
     UserComponent,
     UsersComponent,
+    GithubIconComponent,
+    TwitterIconComponent,
+    MicrosoftIconComponent,
+    FacebookIconComponent,
+    GoogleIconComponent,
   ],
   imports: [
     BrowserModule,

src/app/icons/facebook-icon/facebook-icon.component.html

@@ -0,0 +1,10 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+>
+  <path
+    d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"
+  />
+</svg>

src/app/icons/facebook-icon/facebook-icon.component.scss

@@ -0,0 +1,4 @@
+svg {
+    fill: white;
+
+}

src/app/icons/facebook-icon/facebook-icon.component.spec.ts

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

src/app/icons/facebook-icon/facebook-icon.component.ts

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

src/app/icons/github-icon/github-icon.component.html

@@ -0,0 +1,13 @@
+<svg
+  fill="#000000"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 32 32"
+  width="32px"
+  height="32px"
+  fill-rule="evenodd"
+>
+  <path
+    fill-rule="evenodd"
+    d="M 16 4 C 9.371094 4 4 9.371094 4 16 C 4 21.300781 7.4375 25.800781 12.207031 27.386719 C 12.808594 27.496094 13.027344 27.128906 13.027344 26.808594 C 13.027344 26.523438 13.015625 25.769531 13.011719 24.769531 C 9.671875 25.492188 8.96875 23.160156 8.96875 23.160156 C 8.421875 21.773438 7.636719 21.402344 7.636719 21.402344 C 6.546875 20.660156 7.71875 20.675781 7.71875 20.675781 C 8.921875 20.761719 9.554688 21.910156 9.554688 21.910156 C 10.625 23.746094 12.363281 23.214844 13.046875 22.910156 C 13.15625 22.132813 13.46875 21.605469 13.808594 21.304688 C 11.144531 21.003906 8.34375 19.972656 8.34375 15.375 C 8.34375 14.0625 8.8125 12.992188 9.578125 12.152344 C 9.457031 11.851563 9.042969 10.628906 9.695313 8.976563 C 9.695313 8.976563 10.703125 8.65625 12.996094 10.207031 C 13.953125 9.941406 14.980469 9.808594 16 9.804688 C 17.019531 9.808594 18.046875 9.941406 19.003906 10.207031 C 21.296875 8.65625 22.300781 8.976563 22.300781 8.976563 C 22.957031 10.628906 22.546875 11.851563 22.421875 12.152344 C 23.191406 12.992188 23.652344 14.0625 23.652344 15.375 C 23.652344 19.984375 20.847656 20.996094 18.175781 21.296875 C 18.605469 21.664063 18.988281 22.398438 18.988281 23.515625 C 18.988281 25.121094 18.976563 26.414063 18.976563 26.808594 C 18.976563 27.128906 19.191406 27.503906 19.800781 27.386719 C 24.566406 25.796875 28 21.300781 28 16 C 28 9.371094 22.628906 4 16 4 Z"
+  />
+</svg>

src/app/icons/github-icon/github-icon.component.scss

@@ -0,0 +1,3 @@
+svg {
+    fill: white;
+}

src/app/icons/github-icon/github-icon.component.spec.ts

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

src/app/icons/github-icon/github-icon.component.ts

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

src/app/icons/google-icon/google-icon.component.html

@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  viewBox="0 0 48 48"
+>
+  <defs>
+    <path
+      id="a"
+      d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z"
+    />
+  </defs>
+  <clipPath id="b"><use xlink:href="#a" overflow="visible" /></clipPath>
+  <path clip-path="url(#b)" fill="#FBBC05" d="M0 37V11l17 13z" />
+  <path clip-path="url(#b)" fill="#EA4335" d="M0 11l17 13 7-6.1L48 14V0H0z" />
+  <path clip-path="url(#b)" fill="#34A853" d="M0 37l30-23 7.9 1L48 0v48H0z" />
+  <path clip-path="url(#b)" fill="#4285F4" d="M48 48L17 24l-4-3 35-10z" />
+</svg>

src/app/icons/google-icon/google-icon.component.scss

@@ -0,0 +1,5 @@
+svg {
+    path {
+        fill: white !important;
+    }
+}

src/app/icons/google-icon/google-icon.component.spec.ts

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

src/app/icons/google-icon/google-icon.component.ts

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

src/app/icons/microsoft-icon/microsoft-icon.component.html

@@ -0,0 +1,11 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 48 48"
+  width="48px"
+  height="48px"
+>
+  <path fill="#ff5722" d="M6 6H22V22H6z" transform="rotate(-180 14 14)" />
+  <path fill="#4caf50" d="M26 6H42V22H26z" transform="rotate(-180 34 14)" />
+  <path fill="#ffc107" d="M26 26H42V42H26z" transform="rotate(-180 34 34)" />
+  <path fill="#03a9f4" d="M6 26H22V42H6z" transform="rotate(-180 14 34)" />
+</svg>

src/app/icons/microsoft-icon/microsoft-icon.component.scss

@@ -0,0 +1,5 @@
+svg {
+    path {
+        fill: white;
+    }
+}

src/app/icons/microsoft-icon/microsoft-icon.component.spec.ts

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

src/app/icons/microsoft-icon/microsoft-icon.component.ts

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

src/app/icons/twitter-icon/twitter-icon.component.html

@@ -0,0 +1,10 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+>
+  <path
+    d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"
+  />
+</svg>

src/app/icons/twitter-icon/twitter-icon.component.scss

@@ -0,0 +1,3 @@
+svg {
+    fill: white;
+}

src/app/icons/twitter-icon/twitter-icon.component.spec.ts

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

src/app/icons/twitter-icon/twitter-icon.component.ts

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

src/app/login/login.component.html

@@ -1,18 +1,56 @@
-<div class="login-wrapper">
-  <button (click)="login(AuthProviders.Google)" mat-button>
-    Login with google
-  </button>
-  <button (click)="login(AuthProviders.Facebook)" mat-button>
-    Login with facebook
-  </button>
-  <button (click)="login(AuthProviders.Github)" mat-button>
-    Login with github
-  </button>
-  <button (click)="login(AuthProviders.Twitter)" mat-button>
-    Login with twitter
-  </button>
-  <button (click)="login(AuthProviders.Microsoft)" mat-button>
-    Login with microsoft
-  </button>
-  <div class="email-password"></div>
+<div class="login">
+  <div class="login-inner">
+    <h1 class="title">
+      Login with social media accounts or using the traditional email/password
+      form
+    </h1>
+    <div class="login-wrapper">
+      <div class="social-media">
+        <button class="google" (click)="login(AuthProviders.Google)" mat-button>
+          <app-google-icon class="icon"></app-google-icon>
+          <span>Login with google</span>
+        </button>
+        <button
+          class="facebook"
+          (click)="login(AuthProviders.Facebook)"
+          mat-button
+        >
+          <app-facebook-icon class="icon"></app-facebook-icon>
+          <span>Login with facebook</span>
+        </button>
+        <button class="github" (click)="login(AuthProviders.Github)" mat-button>
+          <app-github-icon class="icon"></app-github-icon>
+          <span>Login with github</span>
+        </button>
+        <button
+          class="twitter"
+          (click)="login(AuthProviders.Twitter)"
+          mat-button
+        >
+          <app-twitter-icon class="icon"></app-twitter-icon>
+          <span>Login with twitter</span>
+        </button>
+        <button
+          class="microsoft"
+          (click)="login(AuthProviders.Microsoft)"
+          mat-button
+        >
+          <app-microsoft-icon class="icon"></app-microsoft-icon>
+          <span>Login with microsoft</span>
+        </button>
+      </div>
+      <div class="division"></div>
+      <form class="email-password">
+        <mat-form-field class="example-full-width" appearance="fill">
+          <mat-label>Email</mat-label>
+          <input type="email" matInput />
+        </mat-form-field>
+        <mat-form-field class="example-full-width" appearance="fill">
+          <mat-label>Password</mat-label>
+          <input type="password" matInput />
+        </mat-form-field>
+        <button mat-raised-button color="primary">Login</button>
+      </form>
+    </div>
+  </div>
 </div>