added user variables to AppComonent & login functionality

src/app/app.component.html

@@ -1 +1,2 @@
+<app-scaffold id="headerbar"></app-scaffold>
 <router-outlet></router-outlet>

src/app/app.component.sass

@@ -34,3 +34,10 @@
   display: grid
   min-height: 100vh
   max-height: 100vh
+
+#headerbar
+  @include gridPosition(1, 1, 1, 4)
+  display: grid
+  grid-template: 100% /30% 10% 10% 10% 10% 10% 15% 5%
+  background-color: $cHeadPrimaryBackground
+  color: $cHeadFontColor

src/app/app.component.ts

@@ -8,5 +8,19 @@ import { Component, OnInit } from '@angular/core';
 export class AppComponent implements OnInit {
   constructor() { }
 
+  loggedIn : boolean = false;
+  userID : number;
+  username : string;
+  handle : string;
+  email : string;
+  points : number;
+  level : number;
+
+  friendIDs : number[];
+  groupIDs : number[];
+  chatIDs : number[];
+
+  requestIDs : number[];
+
   ngOnInit() { }
 }

src/app/components/app-scaffold/app-scaffold.component.html

@@ -1,10 +1,10 @@
 <h1>Greenvironment</h1>
   <button id="tab-home" routerLink="">Home</button>
-  <button id="tab-profile" routerLink="/profile">Profile</button>
-  <button id="tab-rank">Rank</button>
+  <button id="tab-profile" routerLink="/profile" *ngIf="loggedIn">Profile</button>
+  <button id="tab-rank" *ngIf="loggedIn">Rank</button>
   <button id="tab-about" routerLink="/about">About</button>
   <button id="tab-imprint" routerLink="/imprint">Imprint</button>
-  <div id="dropdown">
+  <div id="dropdown" *ngIf="loggedIn">
     <div>
       <span><i class="fa fa-caret-down" aria-hidden="true"></i></span>
       <span> Niklas Lampe</span>
@@ -13,4 +13,4 @@
       Hallo
     </div>
   </div>
-  <button id="logoutbutton"><span><i class="fa fa-sign-out-alt fa-2x" aria-hidden="true"></i></span></button>
+  <button id="logoutbutton" *ngIf="loggedIn"><span><i class="fa fa-sign-out-alt fa-2x" aria-hidden="true"></i></span></button>

src/app/components/app-scaffold/app-scaffold.component.ts

@@ -1,12 +1,14 @@
 import { Component, OnInit } from '@angular/core';
+import { LoginComponent } from '../login/login.component';
 
 @Component({
   selector: 'app-scaffold',
   templateUrl: './app-scaffold.component.html',
   styleUrls: ['./app-scaffold.component.sass']
 })
-export class AppScaffoldComponent implements OnInit {
 
+export class AppScaffoldComponent implements OnInit {
+  
   constructor() { }
 
   ngOnInit() {

src/app/components/login/login.component.html

@@ -1,6 +1,5 @@
 
 <div id="login">
-  <app-scaffold id="headerbar"></app-scaffold>
   <div id="logincontainer">
     <table style="width:100%">
       <tr>

src/app/components/login/login.component.sass

@@ -13,11 +13,4 @@
     grid-template: 15% 15% 15% 15% 15% 15% / 100%
     background-color: $cPrimaryBackground
 input
-    margin: 0.25em
-
-#headerbar
-  @include gridPosition(1, 1, 1, 4)
-  display: grid
-  grid-template: 100% /30% 10% 10% 10% 10% 10% 15% 5%
-  background-color: $cHeadPrimaryBackground
-  color: $cHeadFontColor
+    margin: 0.25em

src/app/components/login/login.component.ts

@@ -9,7 +9,8 @@ import { LoginService } from 'src/app/services/login/login.service';
 })
 export class LoginComponent implements OnInit {
   login: Login 
- 
+  user: User
+
   constructor(private loginService: LoginService) {
     this.login = {passwordHash: null, email: null};
   }
@@ -21,6 +22,7 @@ export class LoginComponent implements OnInit {
 
     this.loginService.login(this.login)
   }
+
   ngOnInit() {}
 }
 

src/app/components/register/register.component.html

@@ -1,5 +1,4 @@
 <div id="register">
-    <app-scaffold id="headerbar"></app-scaffold>
   <div id="registercontainer">
       <table style="width:100%">
           <tr>

src/app/components/register/register.component.sass

@@ -16,9 +16,3 @@
 input
     margin: 0.25em
 
-#headerbar
-  @include gridPosition(1, 1, 1, 4)
-  display: grid
-  grid-template: 100% /30% 10% 10% 10% 10% 10% 15% 5%
-  background-color: $cHeadPrimaryBackground
-  color: $cHeadFontColor

src/app/models/user.ts

@@ -0,0 +1,15 @@
+export interface User {
+  loggedIn : boolean;
+  userID : number;
+  username : string;
+  handle : string;
+  email : string;
+  points : number;
+  level : number;
+
+  friendIDs : number[];
+  groupIDs : number[];
+  chatIDs : number[];
+
+  requestIDs : number[];
+  }

src/app/services/login/login.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, EventEmitter, Output } from '@angular/core';
 import {Http, URLSearchParams, Headers} from '@angular/http';
 import { Login } from '../../models/login';
 
@@ -9,6 +9,8 @@ export class LoginService {
 
   constructor(private http: Http) { }
 
+  @Output() showChatEvent = new EventEmitter<Chatinfo>();
+
   public login(login : Login) {
  
     //let url = './graphql'
@@ -17,16 +19,25 @@ export class LoginService {
     let headers = new Headers();
     headers.set('Content-Type', 'application/json');
  
-    return this.http.post(url, this.buildJson(login)).subscribe(response => console.log(response.text()));
+    return this.http.post(url, this.buildJson(login))
+      .subscribe(response => {
+        console.log(response.text());
+        this.saveUserData(response.json())
+      });
+  }
+
+  public saveUserData(text : any){
+    app = text.name;
+    
   }
 
   public buildJson(login: Login): any {
     const body =  {query: `mutation($email: String, $pwHash: String) {
-      login(email: $email, passwordHash: $pwHash) {id}
+      login(email: $email, passwordHash: $pwHash) {id, name, handle, points, level, friends{id}, groups{id},chats{id}} 
     }`, variables: {
         email: login.email,
         pwHash: login.passwordHash,
       }};
     return body;
   }
-}
+}//add ,receivedRequests{id} later