Merge branch 'master' of Software_Engineering_I/greenvironment-frontend into niklas_dev2

package-lock.json

@@ -5808,6 +5808,11 @@
       "integrity": "sha512-M7kLczedRMYX4L8Mdh4MzyAMM9O5osx+4FcOQuTvr3A9F2D9S5JXheN0ewNbrvK2UatkTRhL5ejGmGSjNMiZuw==",
       "optional": true
     },
+    "js-sha512": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/js-sha512/-/js-sha512-0.8.0.tgz",
+      "integrity": "sha512-PWsmefG6Jkodqt+ePTvBZCSMFgN7Clckjd0O7su3I0+BW2QWUTJNzjktHsztGLhncP2h8mcF9V9Y2Ha59pAViQ=="
+    },
     "js-tokens": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",

package.json

@@ -30,6 +30,7 @@
     "core-js": "^2.5.4",
     "graphql": "^14.3.1",
     "graphql-tag": "^2.10.0",
+    "js-sha512": "^0.8.0",
     "ngx-socket-io": "^2.0.0",
     "rxjs": "~6.3.3",
     "ts-md5": "^1.2.7",

src/app/app.component.sass

@@ -36,8 +36,10 @@
   max-height: 100vh
 
 #headerbar
+  height: 10vh
   @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

@@ -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
 
@@ -32,5 +33,8 @@ export class AppComponent implements OnInit {
       console.log(this.userInfo);
       this.data.changeChatIDs(user.chatIDs)
     })
+    if(this.loggedIn != true){
+      this.selfservice.checkIfLoggedIn();
+    }
   }
 }

src/app/components/about/about.component.sass

@@ -5,13 +5,18 @@
   background-color:  $cSecondaryBackground
   grid-template: 15% 70% 15% / 15% 70% 15% 
   display: grid
-  min-height: 100vh
-  max-height: 100vh
+  min-height: 90vh
+  max-height: 90vh
     
 #aboutcontainer
     @include gridPosition(2, 2,2,2)
     background-color: $cPrimaryBackground
+    padding: 1em
+    overflow: auto
+
 input
     margin: 0.25em
 #header
     @include gridPosition(1, 2, 1, 2)
+a
+  color: $cHeadPrimaryBackground

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 (click)="showDropdown()"><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

@@ -24,6 +24,7 @@ export class AppScaffoldComponent implements OnInit {
   profileUrl: string;
 
   dropdownShown: boolean = false
+  constructor(private data: DatasharingService) { }
 
   constructor(private data: DatasharingService,private selfservice: SelfService, private http: Http, private router: Router) { }
 
@@ -36,13 +37,7 @@ export class AppScaffoldComponent implements OnInit {
       this.level = this.levellist.getLevelName(user.level)
       this.points = user.points
       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)
   }
 
   showDropdown() {

src/app/components/chatlist/chatlist.component.ts

@@ -29,4 +29,8 @@ export class ChatlistComponent implements OnInit {
     this.showChatEvent.emit(this.selectedChat)
   }
 
+
+  newChat() {
+    console.error("not implemented")
+  }
 }

src/app/components/chatmanager/chatcontacts/chatcontacts.component.ts

@@ -27,4 +27,8 @@ export class ChatcontactsComponent implements OnInit {
     this.goBack()
   }
 
+  contactList() {
+    console.error("Not Imlemented!")
+  }
+
 }

src/app/components/feed/feed.component.sass

@@ -28,6 +28,7 @@
   @include gridPosition(2, 3, 1, 2)
   display: grid
   grid-template: 5% 95% /100%
+  overflow: auto
   background-color: $cFontWhite
 
   #feedchooser

src/app/components/home/home.component.sass

@@ -4,22 +4,25 @@
 #content
   grid-template: 100%/ 25% 50% 25%
   display: grid
-  min-height: 100vh
-  max-height: 100vh
+  min-height: 90vh
+  max-height: 90vh
   background-color: $cFontWhite
 
 #chatcontainer
   @include gridPosition(1, 3, 1, 2)
   background-color: $cBoxBodyBackground
+  overflow: auto
 
 #feedcontainer
   @include gridPosition(1, 3, 2, 3)
   display: grid
   grid-template: 10% 90% /100%
   background-color: $cFontWhite
+  overflow: auto
 
 #socialcontainer
   @include gridPosition(1, 3, 3, 4)
   display: grid
   grid-template: 50% 50% /100%
   background-color: $cBoxBodyBackground
+  overflow: auto

src/app/components/imprint/imprint.component.html

@@ -1,8 +1,8 @@
 <div id="imprint">
   <div id="imprintcontainer">
     <h1>Imprint</h1>
-    <p>The greenvironment network is being developed by Bliblablub</p>
+    <p>The greenvironment network is being developed by the greenvironment team</p>
     <h2>Contact</h2>
-    <p>Email: mailadress</p>
+    <p>Email: nick.derkoenig@greenvironment.net</p>
   </div>
 </div>

src/app/components/imprint/imprint.component.sass

@@ -5,12 +5,14 @@
   background-color:  $cSecondaryBackground
   grid-template: 15% 70% 15% / 15% 70% 15% 
   display: grid
-  min-height: 100vh
-  max-height: 100vh
+  height: 90vh
     
 #imprintcontainer
     @include gridPosition(2, 2,2,2)
     background-color: $cPrimaryBackground
+    padding: 1em
+    overflow: auto
+    
 input
     margin: 0.25em
 #header

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

@@ -1,7 +1,8 @@
 
 <div id="login">
   <div id="logincontainer">
-    <table style="width:100%">
+    <h1>Login</h1>
+    <table style="width:100%" (keyup.enter)="onClickSubmit(email.value,password.value)">
       <tr>
         <td>email: </td>
         <td><input #email type="text" name="email"><br></td>
@@ -14,6 +15,7 @@
       <button type="loginbutton" (click)="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

@@ -5,13 +5,18 @@
   background-color:  $cSecondaryBackground
   grid-template: 8% 77% 15% / 15% 70% 15% 
   display: grid
-  min-height: 100vh
-  max-height: 100vh
+  height: 90vh
 
 #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
+  overflow: auto
+
 input
-    margin: 0.25em
+  margin: 0.25em
+
+a
+  color: $cHeadPrimaryBackground
+
+

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

@@ -1,9 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { Login } from 'src/app/models/login';
 import { LoginService } from 'src/app/services/login/login.service';
-import { RouterLink } from '@angular/router';
 import {Router} from '@angular/router';
-import {Md5} from 'ts-md5/dist/md5';
+import * as sha512 from 'js-sha512';
 
 @Component({
   selector: 'app-login',
@@ -30,8 +29,8 @@ export class LoginComponent implements OnInit {
     this.errorOccurred = false;
     this.errorMessage = " ";
     this.login.email = pEmail
-    const md5 = new Md5();
-    this.login.passwordHash = md5.appendStr(pPasswordHash).end() as string
+    this.login.passwordHash = sha512.sha512(pPasswordHash);
+    console.log(this.login.passwordHash);
 
     console.log(this.login.passwordHash)
 

src/app/components/profile/profile.component.sass

@@ -5,14 +5,16 @@
   background-color:  $cSecondaryBackground
   grid-template: 3% 94% 3% / 10% 80% 10% 
   display: grid
-  min-height: 100vh
-  max-height: 100vh
+  min-height: 90vh
+  max-height: 90vh
+  
 
 #profilecontainer
   @include gridPosition(2, 2,2,2)
   //grid-template: 15% 15% 15% 15% 15% 15% / 100%
   background-color: $cPrimaryBackground
   padding: 1em
+  overflow: auto
 
 th
   text-align: left

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

@@ -1,6 +1,7 @@
 <div id="register">
   <div id="registercontainer">
-      <table style="width:100%">
+      <h1>Register</h1>
+      <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 +22,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

@@ -5,14 +5,17 @@
   background-color:  $cSecondaryBackground
   grid-template: 8% 77% 15% / 15% 70% 15% 
   display: grid
-  min-height: 100vh
-  max-height: 100vh
+  min-height: 90vh
+  max-height: 90vh
     
 #registercontainer
     @include gridPosition(2, 2,2,2)
     grid-template: 15% 15% 15% 15% 15% 15% / 100%
     background-color: $cPrimaryBackground
     padding: 1em
+    overflow: auto
 input
     margin: 0.25em
 
+a
+  color: $cHeadPrimaryBackground

src/app/components/register/register.component.ts

@@ -4,6 +4,7 @@ import {Registration} from '../../models/registration';
 import {Router} from '@angular/router';
 import {Md5} from 'ts-md5/dist/md5';
 import { parseWebDriverCommand } from 'blocking-proxy/built/lib/webdriver_commands';
+import * as sha512 from 'js-sha512';
 
 @Component({
   selector: 'registration',
@@ -31,8 +32,7 @@ export class RegisterComponent implements OnInit {
     if(this.passwordSame(pPasswordHash,pPasswordHashRepeat)){
       this.registration.username = pUsername
       this.registration.email = pEmail
-      const md5 = new Md5();
-      this.registration.passwordHash = md5.appendStr(pPasswordHash).end() as string
+      this.registration.passwordHash = sha512.sha512(pPasswordHash);
       this.registerService.register(this.registration, error => this.registerError(error.json()));
     }
   }

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,29 +39,29 @@ 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){
     const user: User = new User();
     user.loggedIn = true;
-    user.userID = response.data.login.id;
-    user.username = response.data.login.name;
-    user.handle = response.data.login.handle;
-    user.email = response.data.login.email;
-    user.points = response.data.login.points;
-    user.level = response.data.login.level;
-    user.friendIDs = response.data.login.friends;
-    user.groupIDs = response.data.login.groups;
-    user.chatIDs = response.data.login.chats;
-    user.requestIDs = response.data.login.requests;
+    user.userID = response.data.getSelf.id;
+    user.username = response.data.getSelf.name;
+    user.handle = response.data.getSelf.handle;
+    user.email = response.data.getSelf.email;
+    user.points = response.data.getSelf.points;
+    user.level = response.data.getSelf.level;
+    user.friendIDs = response.data.getSelf.friends;
+    user.groupIDs = response.data.getSelf.groups;
+    user.chatIDs = response.data.getSelf.chats;
+    user.requestIDs = response.data.getSelf.requests;
 
     this.data.changeUserInfo(user)
   }
 
   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;