auth

src/components/app.component.pug

@@ -1,2 +1,10 @@
 main(*ngIf='ready && user')
-login(*ngIf='ready && !user')
+.login-view(*ngIf='ready && !user')
+    .buttons
+        a.btn(
+            *ngFor='let provider of providers',
+            [class]='provider.cls',
+            href='/api/1/auth/social/login/{{provider.id}}'
+        )
+            fa-icon([icon]='provider.icon', [fixedWidth]='true')
+            span Log in with {{provider.name}}

src/components/app.component.scss

@@ -0,0 +1,25 @@
+:host {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    display: flex;
+}
+
+.login-view {
+    margin: auto;
+    flex: none;
+}
+
+.buttons > * {
+    min-width: 200px;
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+
+    >span {
+        margin: auto;
+    }
+}

src/components/app.component.ts

@@ -1,6 +1,8 @@
 import { Component } from '@angular/core'
 import { HttpClient } from '@angular/common/http'
 
+import { faGithub, faGitlab, faGoogle, faMicrosoft } from '@fortawesome/free-brands-svg-icons'
+
 @Component({
     selector: 'app',
     templateUrl: './app.component.pug',
@@ -10,6 +12,13 @@ export class AppComponent {
     user: any
     ready = false
 
+    providers = [
+        { name: 'GitHub', icon: faGithub, cls: 'btn-primary', id: 'github' },
+        { name: 'GitLab', icon: faGitlab, cls: 'btn-warning', id: 'gitlab' },
+        { name: 'Google', icon: faGoogle, cls: 'btn-secondary', id: 'google-oauth2' },
+        { name: 'Microsoft', icon: faMicrosoft, cls: 'btn-light', id: 'microsoft-graph' },
+    ]
+
     constructor (
         private http: HttpClient,
     ) { }