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

package-lock.json

@@ -9443,6 +9443,11 @@
         "tslib": "^1.9.3"
       }
     },
+    "ts-md5": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/ts-md5/-/ts-md5-1.2.6.tgz",
+      "integrity": "sha512-VFW6O4CTZsgTPDBhF31i83hPhfwd9Dcp5RnbfGOIJPDRro9IhvXMYd8xBycD0yXqHZiAvv+iDG8F+UFrPEyQ5w=="
+    },
     "ts-node": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-7.0.1.tgz",

package.json

@@ -23,16 +23,17 @@
     "@angular/platform-browser-dynamic": "~7.0.0",
     "@angular/router": "~7.0.0",
     "apollo-angular": "^1.7.0",
-    "core-js": "^2.5.4",
-    "ngx-socket-io": "^2.0.0",
-    "rxjs": "~6.3.3",
-    "zone.js": "~0.8.26",
     "apollo-angular-link-http": "^1.6.0",
-    "apollo-link": "^1.2.11",
-    "apollo-client": "^2.6.0",
     "apollo-cache-inmemory": "^1.3.2",
+    "apollo-client": "^2.6.0",
+    "apollo-link": "^1.2.11",
+    "core-js": "^2.5.4",
+    "graphql": "^14.3.1",
     "graphql-tag": "^2.10.0",
-    "graphql": "^14.3.1"
+    "ngx-socket-io": "^2.0.0",
+    "rxjs": "~6.3.3",
+    "ts-md5": "^1.2.6",
+    "zone.js": "~0.8.26"
   },
   "devDependencies": {
     "@angular/cli": "~7.0.4",

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

@@ -1,6 +1,6 @@
 <h1>Greenvironment</h1>
   <button id="tab-home" routerLink="">Home</button>
-  <button id="tab-profile" routerLink="/profile" *ngIf="loggedIn">Profile</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>

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

@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { LoginComponent } from '../login/login.component';
+import { DatasharingService } from '../../services/datasharing.service';
+import { SelfService } from '../../services/selfservice/self.service';
 
 @Component({
   selector: 'app-scaffold',
@@ -8,10 +10,24 @@ import { LoginComponent } from '../login/login.component';
 })
 
 export class AppScaffoldComponent implements OnInit {
+  loggedIn: boolean = false;
+  userId: number;
+  profileUrl: string;
 
-  constructor() { }
+  constructor(private data: DatasharingService,private selfservice: SelfService) { }
 
   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/home/home.component.html

@@ -1,5 +1,4 @@
 <div id="content">
-    <app-scaffold id="headerbar"></app-scaffold>
     <home-chatmanager id="chatcontainer"></home-chatmanager>
     <home-feed id="feedcontainer"></home-feed>
     <home-social id="socialcontainer"></home-social>

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

@@ -2,30 +2,23 @@
 @import '../../../styles/vars.sass'
 
 #content
-  grid-template: 7.5% 92.5% / 25% 50% 25%
+  grid-template: 100%/ 25% 50% 25%
   display: grid
   min-height: 100vh
   max-height: 100vh
 
-#headerbar
-  @include gridPosition(1, 2, 1, 4)
-  display: grid
-  grid-template: 100% /30% 10% 10% 10% 10% 10% 15% 5%
-  background-color: $cHeadPrimaryBackground
-  color: $cHeadFontColor
-
 #chatcontainer
-  @include gridPosition(2, 3, 1, 2)
+  @include gridPosition(1, 3, 1, 2)
   background-color: $cBoxBodyBackground
 
 #feedcontainer
-  @include gridPosition(2, 3, 2, 3)
+  @include gridPosition(1, 3, 2, 3)
   display: grid
   grid-template: 10% 90% /100%
   background-color: $cSecondaryBackground
 
 #socialcontainer
-  @include gridPosition(2, 3, 3, 4)
+  @include gridPosition(1, 3, 3, 4)
   display: grid
   grid-template: 50% 50% /100%
   background-color: $cBoxBodyBackground

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

@@ -12,6 +12,7 @@
         </tr>
     </table>
       <button type="loginbutton" (click)="onClickSubmit(email.value,password.value)">Login</button>
+      <p *ngIf="errorOccurred">{{errorMessage}}</p>
       <br>
     <a href="/register">You aren´t part of greenvironment yet? - join us here</a>
   </div>

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

@@ -12,5 +12,6 @@
     @include gridPosition(2, 2,2,2)
     grid-template: 15% 15% 15% 15% 15% 15% / 100%
     background-color: $cPrimaryBackground
+    padding: 1em
 input
     margin: 0.25em

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

@@ -1,6 +1,9 @@
 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';
 
 @Component({
   selector: 'app-login',
@@ -9,17 +12,28 @@ import { LoginService } from 'src/app/services/login/login.service';
 })
 export class LoginComponent implements OnInit {
   login: Login
+  errorOccurred: boolean = false;
+  errorMessage: string;
 
-  constructor(private loginService: LoginService) {
+  constructor(private loginService: LoginService,private router: Router) {
     this.login = {passwordHash: null, email: null};
   }
 
+  public loginError(error : any){
+    console.log(error.errors[0].message);
+    this.errorOccurred = true;
+    this.errorMessage = error.errors[0].message;
+  }
+
   onClickSubmit(pEmail: string, pPasswordHash: string) {
-    console.log('email: ' + pEmail); 
+    console.log('try to login with mail adress:' + pEmail); 
+    this.errorOccurred = false;
+    this.errorMessage = " ";
     this.login.email = pEmail
-    this.login.passwordHash = pPasswordHash 
+    const md5 = new Md5();
+    this.login.passwordHash = md5.appendStr(pPasswordHash).end() as string
 
-    this.loginService.login(this.login)
+    this.loginService.login(this.login, error => this.loginError(error.json()));
   }
 
   ngOnInit() {}

src/app/components/profile/profile.component.html

@@ -1,4 +1,57 @@
-<app-scaffold id="headerbar"></app-scaffold>
+
-<home-chatmanager id="chatcontainer"></home-chatmanager>
+<div id="profile">
-<!--<home-feed id="feedcontainer"></home-feed>-->
+    <div id="profilecontainer" *ngIf="profileNotFound == false">
-<home-social id="socialcontainer"></home-social>
+        <h1>Profile</h1>
+        <table style="width:100%">
+            <tr>
+                <td>name: </td>
+                <td>{{user.username}}</td>
+            </tr>
+            <tr>
+                <td>handle: </td>
+                <td>{{user.handle}}</td>
+            </tr>
+            <tr>
+                <td>profile ID: </td>
+                <td>{{user.userID}}</td>
+            </tr>
+            <tr>
+                <td>points: </td>
+                <td>{{user.points}}</td>
+            <tr>
+                <td>level: </td>
+                <td>{{user.level}} ({{rankname}})</td>
+            </tr>
+        </table>
+        <h2>What´s the level?</h2>
+            <p>There are different levels you can reach through green behaviour.
+                Collect 100 points to level up! The levels are called: 
+            </p>
+            <ol>
+                <li *ngFor= "let level of levellist.levels">
+                    {{level.name}}
+                </li>
+            </ol> 
+        <h2>How to level up?</h2>
+            <p>There is an always growing list of things you can do,
+                 to support your environment
+                and earn points to level up at the same time.
+                 You can get a different amount of points
+                for differnet actions you can see in the list below:
+            </p>
+            <table style="width:100%">
+                <tr>
+                    <th>points </th>
+                    <th>action</th>
+                </tr>
+                <tr *ngFor= "let action of actionlist.actions">
+                    <td>{{action.points}}</td>
+                    <td>{{action.name}}</td>
+                </tr>
+            </table>
+        </div>
+    <div id="profilecontainer" *ngIf="profileNotFound">
+            <h1>Profile not found :(</h1>
+    </div>
+  </div>
+  

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

@@ -1,25 +1,18 @@
 @import '../../../styles/mixins.sass'
 @import '../../../styles/vars.sass'
 
-#headerbar
+#profile
-  @include gridPosition(1, 2, 1, 4)
+  background-color:  $cSecondaryBackground
+  grid-template: 3% 94% 3% / 10% 80% 10% 
   display: grid
-  grid-template: 100% /30% 10% 10% 10% 10% 10% 10% 10%
+  min-height: 100vh
-  background-color: $cHeadPrimaryBackground
+  max-height: 100vh
-  color: $cHeadFontColor
 
-#chatcontainer
+#profilecontainer
-  @include gridPosition(2, 3, 1, 2)
+  @include gridPosition(2, 2,2,2)
-  background-color: $cBoxBodyBackground
+  //grid-template: 15% 15% 15% 15% 15% 15% / 100%
+  background-color: $cPrimaryBackground
+  padding: 1em
 
-#feedcontainer
+th
-  @include gridPosition(2, 3, 2, 3)
+  text-align: left
-  display: grid
-  grid-template: 10% 90% /100%
-  background-color: $cSecondaryBackground
-
-#socialcontainer
-  @include gridPosition(2, 3, 3, 4)
-  display: grid
-  grid-template: 50% 50% /100%
-  background-color: $cBoxBodyBackground

src/app/components/profile/profile.component.ts

@@ -1,4 +1,9 @@
 import { Component, OnInit } from '@angular/core';
+import {Router} from '@angular/router';
+import {Http, URLSearchParams, Headers} from '@angular/http';
+import { User } from 'src/app/models/user';
+import { Actionlist } from 'src/app/models/actionlist';
+import { Levellist } from 'src/app/models/levellist';
 
 @Component({
   selector: 'app-profile',
@@ -6,10 +11,66 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./profile.component.sass']
 })
 export class ProfileComponent implements OnInit {
+  actionlist: Actionlist = new Actionlist();
+  levellist: Levellist = new Levellist();
+  user: User = new User()
+  id : string
+  rankname: string;
+  profileNotFound : boolean = false;
+  constructor(private router: Router,private http: Http) { }
   
-  constructor() { }
 
   ngOnInit() {
+    this.id = this.router.url.substr(this.router.url.lastIndexOf("/") + 1);
+    //let url = './graphql'
+    let url = 'https://greenvironment.net/graphql'
+    let headers = new Headers();
+    headers.set('Content-Type', 'application/json');
+ 
+    return this.http.post(url, this.buildJson(this.id))
+      .subscribe(response => {
+        console.log(response.text());
+        this.updateUserInfo(response.json());
+      }
+      );
+  }
+
+  public updateUserInfo(response : any){
+    if(response.data.getUser != null){
+      this.profileNotFound = false;
+      this.user.loggedIn = true;
+      this.user.userID = response.data.getUser.id;
+      this.user.username = response.data.getUser.name;
+      this.user.handle = response.data.getUser.handle;
+      this.user.points = response.data.getUser.points;
+      this.user.level = response.data.getUser.level;
+      this.rankname = this.levellist.getLevelName(this.user.level);
+      this.user.friendIDs = response.data.getUser.friends;
+    } else{
+      this.profileNotFound = true;
+    }
   }
 
+  public buildJson(id: string): any {
+    const body =  {query: `query($userId: ID) {
+      getUser(userId:$userId){
+        id
+        handle
+        name
+        profilePicture
+        points
+        level    
+        friendCount
+        friends{
+          id
+        }
+        posts{
+          content
+        }   
+      }
+    }`, variables: {
+        userId: this.id 
+      }};
+    return body;
+  }
 }

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

@@ -15,10 +15,11 @@
             </tr>
           <tr>
               <td>repeat password:</td>
-              <td> <input #repeatpassword type="text" name="repeatpassword"><br></td>
+              <td> <input #repeatpassword type="password" name="repeatpassword"><br></td>
           </tr>
         </table>
     <button type="registerbutton" (click)="onClickSubmit(username.value,email.value,password.value, repeatpassword.value)">Register</button>
+    <p *ngIf="errorOccurred">{{errorMessage}}</p>
     <br>
     <a href="/login">You are already part of greenvironment? - login</a>
   </div>

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

@@ -1,6 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import {RegisterService} from '../../services/register/register.service';
 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';
 
 @Component({
   selector: 'registration',
@@ -9,23 +12,40 @@ import {Registration} from '../../models/registration';
 })
 export class RegisterComponent implements OnInit {
   registration: Registration 
+  errorOccurred: boolean = false;
+  errorMessage: string;
  
   constructor(private registerService: RegisterService) {
     this.registration = {username: null, passwordHash: null, email: null};
   }
 
-  onClickSubmit(pUsername: string, pEmail: string, pPasswordHash: string,pPasswordHashRepeat: string ) {
+  public registerError(error : any){
-    console.log('username: ' + pUsername);
+    console.log(error.errors[0].message);
-    console.log('email: ' + pEmail);
+    this.errorOccurred = true;
+    this.errorMessage = error.errors[0].message;
+  }
 
-    if(pPasswordHash == pPasswordHashRepeat){
+  onClickSubmit(pUsername: string, pEmail: string, pPasswordHash: string,pPasswordHashRepeat: string ) {
-      console.log('password same');  
+    this.errorOccurred = false;
+    this.errorMessage = " ";
+    if(this.passwordSame(pPasswordHash,pPasswordHashRepeat)){
       this.registration.username = pUsername
       this.registration.email = pEmail
-    this.registration.passwordHash = pPasswordHash 
+      const md5 = new Md5();
+      this.registration.passwordHash = md5.appendStr(pPasswordHash).end() as string
+      this.registerService.register(this.registration, error => this.registerError(error.json()));
+    }
+  }
 
-    this.registerService.register(this.registration)
+  passwordSame(pwd: string,pwd2: string){
-    } else{console.log('password NOT same'); }
+    if(pwd == pwd2){
+      console.log('password same'); 
+      return true;
+    } else{
+      this.errorOccurred = true;
+      this.errorMessage = "not the same password";
+      return false;
+    }
   }
 
   ngOnInit() {}

src/app/models/actionlist.ts

@@ -0,0 +1,15 @@
+export class Actionlist{
+    actions: { id: number, name: string, points: number}[] = [
+      { id: 0, name: "collect much trash",points: 25},
+      { id: 1, name: "collect a bit trash",points: 5 },
+      { id: 2, name: "trash seperation", points: 5 },
+      { id: 3, name: "plant a tree", points: 2 },
+      { id: 4, name: "beautify yout surroundings", points: 8 },
+      { id: 5, name: "reduce waste", points: 5 },
+      { id: 6, name: "reduce CO2 emission", points: 5 },
+      { id: 7, name: "eat a vegetarian meal", points: 2 },
+      { id: 8, name: "don´t use the car", points: 10 },
+      { id: 9, name: "buy fair trade/ local product", points: 1 },
+      { id: 10, name: "donate money to an environment organisation ", points: 3 },
+    ];
+}

src/app/models/levellist.ts

@@ -0,0 +1,25 @@
+export class Levellist{
+    levels: {level: number, name: string, points: number}[] = [
+      {level: 0, name: "Green Horn",points: 0},
+      {level: 1, name: "Good Willed",points: 100 },
+      {level: 2, name: "Helper", points: 200 },
+      {level: 3, name: "World Saver", points: 300 },
+      {level: 4, name: "Hero of the Green Country", points: 400 },
+      {level: 5, name: "Champion of the Earth", points: 500 },
+      {level: 6, name: "Intergallactic Superhero", points: 600 },
+    ];
+
+  getLevelName(lev:number): any{
+    var name: string = 'not defined';
+    console.log(lev);
+    this.levels.forEach(rank => {
+      console.log(rank.level);
+      if(lev == rank.level){
+        console.log('found matching level');
+        name = rank.name;
+      } 
+    });
+    return name
+  }
+
+}

src/app/models/login.ts

@@ -1,3 +1,5 @@
+import { Hash } from "crypto";
+
 export interface Login {
     email: string;
     passwordHash: string

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

@@ -4,15 +4,16 @@ import { Login } from '../../models/login';
 import { User } from 'src/app/models/user';
 import { DatasharingService } from '../datasharing.service';
 import { userInfo } from 'os';
+import {Router} from '@angular/router';
 
 @Injectable({
   providedIn: 'root'
 })
 export class LoginService {
 
-  constructor(private http: Http, private data: DatasharingService) { }
+  constructor(private http: Http, private data: DatasharingService,private router: Router) { }
 
-  public login(login : Login) {
+  public login(login : Login, errorCb: any) {
  
     //let url = './graphql'
     let url = 'https://greenvironment.net/graphql'
@@ -23,8 +24,15 @@ export class LoginService {
     return this.http.post(url, this.buildJson(login))
       .subscribe(response => {
         console.log(response.text());
+        this.loginSuccess();
         this.updateUserInfo(response.json())
-      });
+      }, errorCb
+      );
+  }
+  public loginSuccess(){
+    console.log('alles supi dupi');
+    //do routing
+    this.router.navigateByUrl('');
   }
 
   public updateUserInfo(response : any){

src/app/services/register/register.service.ts

@@ -1,15 +1,18 @@
 import { Injectable } from '@angular/core';
 import {Http, URLSearchParams, Headers} from '@angular/http';
 import { Registration } from '../../models/registration';
+import {Router} from '@angular/router';
+import { DatasharingService } from '../datasharing.service';
+import { User } from 'src/app/models/user';
 
 @Injectable({
   providedIn: 'root'
 })
 export class RegisterService {
 
-  constructor(private http: Http) { }
+  constructor(private http: Http, private data: DatasharingService,private router: Router) { }
 
-  public register(registration: Registration) {
+  public register(registration: Registration, errorCb: any) {
  
     //let url = './graphql'
     let url = 'https://greenvironment.net/graphql'
@@ -17,12 +20,42 @@ export class RegisterService {
     let headers = new Headers();
     headers.set('Content-Type', 'application/json');
  
-    return this.http.post(url, this.buildJson(registration)).subscribe(response => console.log(response.text()));
+    return this.http.post(url, this.buildJson(registration))
+      .subscribe(response => {
+        console.log(response.text());
+        this.registerSuccess();
+        this.updateUserInfo(response.json())
+      }, errorCb
+      );
+  }
+
+  public registerSuccess(){
+    console.log('alles supi dupi');
+    //do routing
+    this.router.navigateByUrl('');
+  }
+
+  public updateUserInfo(response : any){
+    const user: User = new User();
+    user.loggedIn = true;
+    user.userID = response.data.register.id;
+    user.username = response.data.register.name;
+    user.handle = response.data.register.handle;
+    user.email = response.data.register.email;
+    user.points = response.data.register.points;
+    user.level = response.data.register.level;
+    user.friendIDs = response.data.register.friends;
+    user.groupIDs = response.data.register.groups;
+    user.chatIDs = response.data.register.chats;
+    user.requestIDs = response.data.register.requests;
+
+    this.data.changeUserInfo(user)
+    
   }
 
   public buildJson(registration: Registration): any {
     const body =  {query: `mutation($username: String, $email: String, $pwHash: String) {
-      register(username: $username, email: $email, passwordHash: $pwHash) {id}
+      register(username: $username, email: $email, passwordHash: $pwHash) {id, name, handle, points, level, friends{id}, groups{id},chats{id}} 
     }`, variables: {
         email: registration.email,
         pwHash: registration.passwordHash,

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

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SelfService } from './self.service';
+
+describe('Selfservice', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: SelfService = TestBed.get(SelfService);
+    expect(service).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,69 @@
+import { Injectable, EventEmitter, Output } from '@angular/core';
+import {Http, URLSearchParams, Headers} from '@angular/http';
+import { Login } from '../../models/login';
+import { User } from 'src/app/models/user';
+import { DatasharingService } from '../datasharing.service';
+import { userInfo } from 'os';
+import {Router} from '@angular/router';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SelfService {
+
+  constructor(private http: Http, private data: DatasharingService,private router: Router) { }
+
+  public checkIfLoggedIn() {
+    console.log('check if logged in...');
+    //let url = './graphql'
+    let url = 'https://greenvironment.net/graphql'
+ 
+    let headers = new Headers();
+    headers.set('Content-Type', 'application/json');
+ 
+    return this.http.post(url, this.buildJson())
+      .subscribe(response => {
+        console.log(response.text());
+        this.stillLoggedIn();
+        this.updateUserInfo(response.json())
+      }, error => {
+        this.notLoggedIn()
+        console.log(error.text())
+      }
+      );
+  }
+  public stillLoggedIn(){
+    console.log('user was logged in');
+  }
+
+  public notLoggedIn(){
+    console.log('user was not logged in');
+    //do routing
+    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;
+
+    this.data.changeUserInfo(user)
+  }
+
+  public buildJson(): any {
+    const body =  {query: `query() {
+      getSelf(){id, name, handle, points, level, friends{id}, groups{id},chats{id}} 
+    }`, variables: {
+      }};
+    return body;
+  }
+}//add ,receivedRequests{id} later