improved login page, fixed SelfService and DataService

src/app/app.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { User } from './models/user';
 import { DatasharingService } from './services/datasharing.service';
+import { SelfService } from './services/selfservice/self.service';
 
 @Component({
   selector: 'app-root',
@@ -8,7 +9,7 @@ import { DatasharingService } from './services/datasharing.service';
   styleUrls: ['./app.component.sass']
 })
 export class AppComponent implements OnInit {
-  constructor(private data: DatasharingService) { }
+  constructor(private data: DatasharingService, private selfservice: SelfService) { }
 
   userInfo: User
 
@@ -31,5 +32,8 @@ export class AppComponent implements OnInit {
       this.userInfo = user;
       console.log(this.userInfo);
     })
+    if(this.loggedIn != true){
+      this.selfservice.checkIfLoggedIn();
+    }
   }
 }

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

@@ -1,9 +1,9 @@
 <h1>Greenvironment</h1>
   <button id="tab-home" routerLink="">Home</button>
   <button id="tab-profile" routerLink={{profileUrl}} *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>
+  <button id="tab-login" routerLink="/login" *ngIf="loggedIn != true">Login</button>
   <div id="dropdown" *ngIf="loggedIn">
     <div>
       <span><i class="fa fa-caret-down" aria-hidden="true"></i></span>

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

@@ -30,13 +30,13 @@ h1
 #tab-profile
   @include gridPosition(1, 2, 3, 4)
 
-#tab-rank
+#tab-about
   @include gridPosition(1, 2, 4, 5)
 
-#tab-about
+#tab-imprint
   @include gridPosition(1, 2, 5, 6)
 
-#tab-about
+#tab-login
   @include gridPosition(1, 2, 6, 7)
 
 #dropdown

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

@@ -14,20 +14,14 @@ export class AppScaffoldComponent implements OnInit {
   userId: number;
   profileUrl: string;
 
-  constructor(private data: DatasharingService,private selfservice: SelfService) { }
+  constructor(private data: DatasharingService) { }
 
   ngOnInit() {
     this.data.currentUserInfo.subscribe(user => {
       this.loggedIn = user.loggedIn;
       this.userId = user.userID;
       this.profileUrl = '/profile/' + this.userId;
-      console.log(user.loggedIn);
-    })
-    if(this.loggedIn != true){
-      console.log('user is not logged in');
-      this.selfservice.checkIfLoggedIn;
-    };
-    console.log('loggedIn is ' + this.loggedIn)
+    })    
   }
 
 }

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

@@ -1,7 +1,7 @@
 
 <div id="login">
   <div id="logincontainer">
-    <table style="width:100%">
+    <table style="width:100%" (keyup.enter)="onClickSubmit(email.value,password.value)">
       <tr>
         <td>email: </td>
         <td><input #email type="text" name="email"><br></td>
@@ -11,9 +11,10 @@
           <td> <input #password type="password" name="password"><br></td>
         </tr>
     </table>
-      <button type="loginbutton" (click)="onClickSubmit(email.value,password.value)">Login</button>
+      <button type="loginbutton" (onClick)="onClickSubmit(email.value,password.value)">Login</button>
       <p *ngIf="errorOccurred">{{errorMessage}}</p>
       <br>
+      <br>
     <a href="/register">You aren´t part of greenvironment yet? - join us here</a>
   </div>
 </div>

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

@@ -9,9 +9,14 @@
   max-height: 100vh
 
 #logincontainer
-    @include gridPosition(2, 2,2,2)
-    grid-template: 15% 15% 15% 15% 15% 15% / 100%
-    background-color: $cPrimaryBackground
-    padding: 1em
+  @include gridPosition(2, 2,2,2)
+  background-color: $cPrimaryBackground
+  padding: 1em
+
 input
-    margin: 0.25em
+  margin: 0.25em
+
+a
+  color: $cHeadPrimaryBackground
+
+

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

@@ -1,6 +1,6 @@
 <div id="register">
   <div id="registercontainer">
-      <table style="width:100%">
+      <table style="width:100%" (keyup.enter)="onClickSubmit(username.value,email.value,password.value, repeatpassword.value)">
           <tr>
             <td>username: </td>
             <td><input #username type="text" name="username" username.value=''><br></td>
@@ -21,6 +21,7 @@
     <button type="registerbutton" (click)="onClickSubmit(username.value,email.value,password.value, repeatpassword.value)">Register</button>
     <p *ngIf="errorOccurred">{{errorMessage}}</p>
     <br>
+    <br>
     <a href="/login">You are already part of greenvironment? - login</a>
   </div>
 </div>

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

@@ -16,3 +16,5 @@
 input
     margin: 0.25em
 
+a
+  color: $cHeadPrimaryBackground

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

@@ -55,7 +55,7 @@ export class LoginService {
 
   public buildJson(login: Login): any {
     const body =  {query: `mutation($email: String, $pwHash: String) {
-      login(email: $email, passwordHash: $pwHash) {id, name, handle, points, level, friends{id}, groups{id},chats{id}} 
+      login(email: $email, passwordHash: $pwHash) {id, name,email, handle, points, level, friends{id}, groups{id},chats{id}} 
     }`, variables: {
         email: login.email,
         pwHash: login.passwordHash,

src/app/services/selfservice/self.service.ts

@@ -39,7 +39,7 @@ export class SelfService {
   public notLoggedIn(){
     console.log('user was not logged in');
     //do routing
-    this.router.navigateByUrl('/login');
+    //this.router.navigateByUrl('/login');
   }
 
   public updateUserInfo(response : any){
@@ -60,8 +60,8 @@ export class SelfService {
   }
 
   public buildJson(): any {
-    const body =  {query: `query() {
-      getSelf(){id, name, handle, points, level, friends{id}, groups{id},chats{id}} 
+    const body =  {query: `{
+      getSelf{id, name,email, handle, points, level, friends{id}, groups{id},chats{id}} 
     }`, variables: {
       }};
     return body;