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

master
Niklas_L 5 years ago committed by Gitea
commit a11a5c4473

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

@ -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

@ -1,4 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { User } from './models/user';
import { DatasharingService } from './services/datasharing.service';
@Component({
selector: 'app-root',
@ -6,7 +8,28 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./app.component.sass']
})
export class AppComponent implements OnInit {
constructor() { }
constructor(private data: DatasharingService) { }
ngOnInit() { }
userInfo: User
loggedIn : boolean = false;
userID : number;
username : string;
handle : string;
email : string;
points : number;
level : number;
friendIDs : number[];
groupIDs : number[];
chatIDs : number[];
requestIDs : number[];
ngOnInit() {
this.data.currentUserInfo.subscribe(user => {
this.userInfo = user;
console.log(this.userInfo);
})
}
}

@ -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>

@ -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() {

@ -1,17 +1,19 @@
<div id="login">
<div id="logincontainer">
<table style="width:100%">
<tr>
<td>username: </td>
<td><input type="inputBox" name="username"><br></td>
<td>email: </td>
<td><input #email type="text" name="email"><br></td>
</tr>
<tr>
<td>password:</td>
<td> <input type="text" name="password"><br></td>
<td> <input #password type="password" name="password"><br></td>
</tr>
</table>
<button type="loginbutton">Login</button>
<button type="loginbutton" (click)="onClickSubmit(email.value,password.value)">Login</button>
<br>
<a href="/register">You aren´t part of greenvironment yet? - join us here</a>
</div>
</div>
</div>

@ -3,16 +3,14 @@
#login
background-color: $cSecondaryBackground
grid-template: 15% 70% 15% / 15% 70% 15%
grid-template: 8% 77% 15% / 15% 70% 15%
display: grid
min-height: 100vh
max-height: 100vh
#logincontainer
@include gridPosition(2, 2,2,2)
grid-template: 15% 15% 15% 15% 15% 15% / 100%
background-color: $cPrimaryBackground
input
margin: 0.25em
#header
@include gridPosition(1, 2, 1, 2)
margin: 0.25em

@ -1,4 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { Login } from 'src/app/models/login';
import { LoginService } from 'src/app/services/login/login.service';
@Component({
selector: 'app-login',
@ -6,10 +8,20 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./login.component.sass']
})
export class LoginComponent implements OnInit {
login: Login
constructor() { }
constructor(private loginService: LoginService) {
this.login = {passwordHash: null, email: null};
}
onClickSubmit(pEmail: string, pPasswordHash: string) {
console.log('email: ' + pEmail);
this.login.email = pEmail
this.login.passwordHash = pPasswordHash
ngOnInit() {
this.loginService.login(this.login)
}
ngOnInit() {}
}

@ -11,7 +11,7 @@
</tr>
<tr>
<td>password:</td>
<td> <input #password type="text" name="password"><br></td>
<td> <input #password type="password" name="password"><br></td>
</tr>
<tr>
<td>repeat password:</td>

@ -3,7 +3,7 @@
#register
background-color: $cSecondaryBackground
grid-template: 15% 70% 15% / 15% 70% 15%
grid-template: 8% 77% 15% / 15% 70% 15%
display: grid
min-height: 100vh
max-height: 100vh
@ -15,6 +15,4 @@
padding: 1em
input
margin: 0.25em
#header
@include gridPosition(1, 2, 1, 2)

@ -0,0 +1,4 @@
export interface Login {
email: string;
passwordHash: string
}

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

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

@ -0,0 +1,18 @@
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { User } from '../models/user';
@Injectable({
providedIn: 'root'
})
export class DatasharingService {
private userInfoSource = new BehaviorSubject<User>(new User())
currentUserInfo = this.userInfoSource.asObservable();
constructor() { }
changeUserInfo(pUserInfo: User) {
this.userInfoSource.next(pUserInfo)
}
}

@ -1,9 +1,57 @@
import { Injectable } from '@angular/core';
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';
@Injectable({
providedIn: 'root'
})
export class LoginService {
constructor() { }
}
constructor(private http: Http, private data: DatasharingService) { }
public login(login : Login) {
//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(login))
.subscribe(response => {
console.log(response.text());
this.updateUserInfo(response.json())
});
}
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(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}}
}`, variables: {
email: login.email,
pwHash: login.passwordHash,
}};
return body;
}
}//add ,receivedRequests{id} later

Loading…
Cancel
Save