added functionality to login page

master
Max 5 years ago
parent ad1ab6ecd2
commit 838487a9fc

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

@ -3,7 +3,7 @@
#login #login
background-color: $cSecondaryBackground background-color: $cSecondaryBackground
grid-template: 15% 70% 15% / 15% 70% 15% grid-template: 8% 77% 15% / 15% 70% 15%
display: grid display: grid
min-height: 100vh min-height: 100vh
max-height: 100vh max-height: 100vh
@ -14,5 +14,10 @@
background-color: $cPrimaryBackground background-color: $cPrimaryBackground
input input
margin: 0.25em 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 { Component, OnInit } from '@angular/core';
import { Login } from 'src/app/models/login';
import { LoginService } from 'src/app/services/login/login.service';
@Component({ @Component({
selector: 'app-login', selector: 'app-login',
@ -6,10 +8,19 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./login.component.sass'] styleUrls: ['./login.component.sass']
}) })
export class LoginComponent implements OnInit { export class LoginComponent implements OnInit {
login: Login
constructor() { } constructor(private loginService: LoginService) {
this.login = {passwordHash: null, email: null};
ngOnInit() {
} }
onClickSubmit(pEmail: string, pPasswordHash: string) {
console.log('email: ' + pEmail);
this.login.email = pEmail
this.login.passwordHash = pPasswordHash
this.loginService.login(this.login)
} }
ngOnInit() {}
}

@ -1,4 +1,5 @@
<div id="register"> <div id="register">
<app-scaffold id="headerbar"></app-scaffold>
<div id="registercontainer"> <div id="registercontainer">
<table style="width:100%"> <table style="width:100%">
<tr> <tr>
@ -11,7 +12,7 @@
</tr> </tr>
<tr> <tr>
<td>password:</td> <td>password:</td>
<td> <input #password type="text" name="password"><br></td> <td> <input #password type="password" name="password"><br></td>
</tr> </tr>
<tr> <tr>
<td>repeat password:</td> <td>repeat password:</td>

@ -3,7 +3,7 @@
#register #register
background-color: $cSecondaryBackground background-color: $cSecondaryBackground
grid-template: 15% 70% 15% / 15% 70% 15% grid-template: 8% 77% 15% / 15% 70% 15%
display: grid display: grid
min-height: 100vh min-height: 100vh
max-height: 100vh max-height: 100vh
@ -16,5 +16,9 @@
input input
margin: 0.25em margin: 0.25em
#header #headerbar
@include gridPosition(1, 2, 1, 2) @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 { Injectable } from '@angular/core';
import {Http, URLSearchParams, Headers} from '@angular/http';
import { Login } from '../../models/login';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
}) })
export class LoginService { 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