added functionality to login page

master
Max 5 years ago
parent ad1ab6ecd2
commit 838487a9fc

@ -1,17 +1,20 @@
<div id="login">
<app-scaffold id="headerbar"></app-scaffold>
<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,21 @@
#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)
#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 { Login } from 'src/app/models/login';
import { LoginService } from 'src/app/services/login/login.service';
@Component({
selector: 'app-login',
@ -6,10 +8,19 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./login.component.sass']
})
export class LoginComponent implements OnInit {
login: Login
constructor(private loginService: LoginService) {
this.login = {passwordHash: null, email: null};
}
constructor() { }
onClickSubmit(pEmail: string, pPasswordHash: string) {
console.log('email: ' + pEmail);
this.login.email = pEmail
this.login.passwordHash = pPasswordHash
ngOnInit() {
this.loginService.login(this.login)
}
ngOnInit() {}
}

@ -1,4 +1,5 @@
<div id="register">
<app-scaffold id="headerbar"></app-scaffold>
<div id="registercontainer">
<table style="width:100%">
<tr>
@ -11,7 +12,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,10 @@
padding: 1em
input
margin: 0.25em
#header
@include gridPosition(1, 2, 1, 2)
#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

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

@ -1,9 +1,32 @@
import { Injectable } from '@angular/core';
import {Http, URLSearchParams, Headers} from '@angular/http';
import { Login } from '../../models/login';
@Injectable({
providedIn: 'root'
})
export class LoginService {
constructor() { }
constructor(private http: Http) { }
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()));
}
public buildJson(login: Login): any {
const body = {query: `mutation($email: String, $pwHash: String) {
login(email: $email, passwordHash: $pwHash) {id}
}`, variables: {
email: login.email,
pwHash: login.passwordHash,
}};
return body;
}
}

Loading…
Cancel
Save