My application consists of 3 main components: PageMenu, LoginSession, and LoginForm. The purpose is to establish a connection between the variables in LoginSession and PageMenu, allowing for the proper functionality of the LoginForm component.
PageMenu:
import {Component} from 'angular2/core';
import {LoginSession} from 'app/widgets/login-session/login-session';
import {LoginForm} from 'app/widgets/login-form/login-form';
@Component({
selector: 'page-menu',
templateUrl: 'app/widgets/page-menu/page-menu.html',
directives: [ROUTER_DIRECTIVES, LoginSession, LoginForm]
})
export class PageMenu {
loginFormVisible:boolean;
constructor(private _router:Router) {
this.loginFormVisible = false;
}
onClickNavbar(page) {
this._router.navigate([page]);
}
triggerLoginForm() {
this.loginFormVisible = LoginSession.loginFormVisibility;
}
}
LoginSession:
import {Component} from 'angular2/core';
@Component({
templateUrl: 'app/widgets/login-session/view/login-session.html',
selector: 'login-session'
})
export class LoginSession {
state:string;
message:string;
loginFormVisibility:boolean;
constructor() {
this.state = 'guest';
this.message = 'Log in';
}
onClick() {
switch (this.state) {
case 'guest':
{
this.triggerLoginForm();
break;
}
}
}
triggerLoginForm() {
this.loginFormVisibility = !this.loginFormVisibility;
}
}
LoginForm:
import {Component} from 'angular2/core';
import {FORM_DIRECTIVES,FormBuilder, Validators, ControlGroup, Control, NgClass} from 'angular2/common';
import {Output} from "angular2/core";
@Component({
templateUrl: 'app/widgets/login-form/view/login-form.html',
selector: 'login-form',
directives: [FORM_DIRECTIVES]
})
export class LoginForm {
state:string;
message:string;
loginForm:ControlGroup;
login:Control = new Control("", Validators.required);
password:Control = new Control("", Validators.required);
constructor(formBuilder:FormBuilder) {
this.loginForm = formBuilder.group({
'login': this.login,
'password': this.password,
});
console.log('LoginFORM!');
}
onSubmit() {
document.cookie = "sessionId=123456789";
}
}