configure main components

festival/frontend/src/app.module.ts

@@ -2,6 +2,7 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { HttpModule } from '@angular/http';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
@@ -34,11 +35,12 @@ import {
 // components
 import {
   NotFoundComponent,
-  NewsComponent,
   LoginComponent,
   RegisterComponent,
   NewsItemComponent,
-  AboutComponent
+  AboutComponent,
+  SidenavComponent,
+  HeaderComponent
 } from './app/components';
 // routes
 const appRoutes: Routes = [
@@ -125,11 +127,12 @@ const appRoutes: Routes = [
     ApproveComponent,
     // components
     NotFoundComponent,
-    NewsComponent,
     LoginComponent,
     NewsItemComponent,
     RegisterComponent,
-    AboutComponent
+    AboutComponent,
+    SidenavComponent,
+    HeaderComponent
   ],
   imports: [
     BrowserModule,

festival/frontend/src/app/components/header/header.component.html

@@ -0,0 +1,19 @@
+<sf-common-header>
+    <sf-common-button class="toggle-button" (click)="toggle()">
+        <sf-common-icon class="toggle-button__icon" type="menu"></sf-common-icon>
+    </sf-common-button>
+    <div class="logo">
+        SCIENCE FESTIVAL
+    </div>
+    <div class="right-contols">
+        <sf-common-dropdown class="right-contols__localization" [dropdownOptions]="localization" (selectedValueChange)="localizationChange($event)"></sf-common-dropdown>
+        <div class="right-contols__enter-group">
+            <div class="login">
+                <sf-common-button routerLink="/login" routerLinkActive="active"> LOGIN</sf-common-button>
+            </div>
+            <div class="register">
+                <sf-common-button routerLink="/register" routerLinkActive="active">REGISTER</sf-common-button>
+            </div>
+        </div>
+    </div>
+</sf-common-header>

festival/frontend/src/app/components/header/header.component.less

@@ -0,0 +1,18 @@
+.logo {
+    flex: 1 1 auto;
+}
+
+.toggle-button {
+    margin-left: -16px;
+    &__icon {
+        width: 100%;
+    }
+}
+
+.right-contols {
+    display: flex;
+    align-items: center;
+    &__enter-group {
+        display: flex;
+    }
+}

festival/frontend/src/app/components/header/header.component.ts

@@ -0,0 +1,24 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+    selector: 'sf-header',
+    templateUrl: 'header.component.html',
+    styleUrls: ['./header.component.less']
+})
+
+export class HeaderComponent implements OnInit {
+    @Input() public isToggledButton: boolean;
+    @Output() public onTogledButton: EventEmitter<boolean> = new EventEmitter<boolean>();
+    @Input() public localization: sf.common.DropdownOptions<string>;
+    @Output() public onLocalizationChange: EventEmitter<string> = new EventEmitter<string>();
+
+    constructor() { }
+
+    ngOnInit() { }
+    public toggle(isToggled: boolean): void {
+        this.onTogledButton.emit(isToggled);
+    }
+    public localizationChange(option: string): void {
+        this.onLocalizationChange.emit(option);
+    }
+}

festival/frontend/src/app/components/header/index.ts

@@ -0,0 +1 @@
+export * from './header.component';

festival/frontend/src/app/components/index.ts

@@ -3,3 +3,5 @@ export * from './news-item';
 export * from './login';
 export * from './register';
 export * from './about';
+export * from './sidenav';
+export * from './header';

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

@@ -1,37 +1,29 @@
-<div class="form">
-    <sf-common-form>
-        <form-header>
-            Login
-        </form-header>
-        <form-body>
-            <form class="form__body" [formGroup]="loginForm">
-                <div class="form__body__group">
-                    <label class="form__body__group__block"> user name:
-                    <md-input-container>
-                        <input mdInput placeholder="user name" value="" formControlName="name">
-                    </md-input-container>
+<sf-common-form>
+    <form-header>
+        Login
+    </form-header>
+    <form-body>
+        <form class="form">
+            <div class="form__group">
+                <label class="group__block"> email:
+                    <sf-common-input #email [placeholder]="'email'"></sf-common-input>
                 </label>
-                    <label class="form__body__group__block"> password:
-                    <md-input-container>
-                        <input mdInput type="password" placeholder="password" value="" formControlName="password" >
-                    </md-input-container>
+                <label class="group__block"> password:
+                    <sf-common-input #password [placeholder]="'password'" [isSecure]="true"></sf-common-input>
                 </label>
-                </div>
-            </form>
-        </form-body>
-        <form-actions>
-            <div class="form__actions">
-                <div class="form__actions__item">
-                    <sf-common-button (click)="onSubmit()">
-                        submit
-                    </sf-common-button>
-                </div>
-                <div class="form__actions__item">
-                    <sf-common-button (click)="onReset()">
-                        reset
-                    </sf-common-button>
-                </div>
             </div>
-        </form-actions>
-    </sf-common-form>
-</div>
+        </form>
+    </form-body>
+    <form-actions class="actions">
+        <div class="actions__item">
+            <sf-common-button (click)="submit()">
+                submit
+            </sf-common-button>
+        </div>
+        <div class="actions__item">
+            <sf-common-button (click)="reset()">
+                reset
+            </sf-common-button>
+        </div>
+    </form-actions>
+</sf-common-form>

festival/frontend/src/app/components/login/login.component.less

@@ -1,20 +1,18 @@
 .form {
-    margin: 16px;
-    &__body {
-        &__group {
-            display: flex;
-            flex-direction: column;
-            &__block {}
-        }
-    }
-    &__actions {
+    &__group {
         display: flex;
-        flex-direction: row;
-        justify-content: center;
-        &__item {}
+        flex-direction: column;
+        &__block {}
     }
 }
 
+.actions {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    &__item {}
+}
+
 form-actions {
     width: 100%;
 }

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

@@ -1,32 +1,38 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild, ElementRef, Output, EventEmitter } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
 @Component({
     selector: 'sf-login',
     templateUrl: 'login.component.html',
     styleUrls: ['./login.component.less']
 })
 
 export class LoginComponent implements OnInit {
-    public loginForm: FormGroup;
-    constructor(private fb: FormBuilder) {
-        this.createForm();
-    }
+    public loginForm: sf.entities.User;
+    @ViewChild('email') public email: sf.common.StringInput;
+    @ViewChild('password') public password: sf.common.StringInput;
+    @Output() public onSubmitted: EventEmitter<sf.entities.User> = new EventEmitter<sf.entities.User>();
 
-    ngOnInit() { }
+    constructor() { }
 
-    public onSubmit(): User {
-        const formModel: User = this.loginForm.value;
-        console.log(formModel);
-        return formModel;
+    ngOnInit() {
+        this.loginForm = {
+            email: this.email.value,
+            password: this.password.value
+        };
     }
 
-    public onReset(): void {
-        this.loginForm.reset();
+    public submit(): void {
+        this.loginForm = {
+            email: this.email.value,
+            password: this.password.value
+        };
+        console.log(this.loginForm);
+        this.onSubmitted.emit(this.loginForm);
     }
-    private createForm(): void {
-        this.loginForm = this.fb.group({
-            name: ['', Validators.required],
-            password: ['', Validators.required]
-        });
+
+    public reset(): void {
+        this.email.value = '';
+        this.password.value = '';
     }
 }

festival/frontend/src/app/components/news-item/news-item.component.html

@@ -1,19 +1,14 @@
 <sf-common-card class="news-item">
   <card-title class="news-item__title">
-    <div *ngIf="flag; else elseBlock">
-      <div class="news-feed__title-text">{{news.header}}</div>
-    </div>
-    <ng-template #elseBlock>
       <div class="news-feed__title-text">{{news.header}}</div>
       <div class="news-item__title-buttons">
-        <!--<sf-common-button class="button__edit">-->
+        <!--<sf-common-button class="button__edit"> title block-->
         <sf-common-icon class="icon__edit" type="edit"></sf-common-icon>
         <!--</sf-common-button>-->
         <!--<sf-common-button class="button__close">-->
         <sf-common-icon class="icon__close" type="close"></sf-common-icon>
         <!--</sf-common-button>-->
       </div>
-    </ng-template>
   </card-title>
   <card-content class="news-item__content">
     {{news.description}}

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

@@ -1,3 +1,37 @@
-<div>
-    register form here
-</div>
+<sf-common-form>
+    <form-header>
+        Register
+    </form-header>
+    <form-body>
+        <form class="form">
+            <div class="form__group">
+                <label class="group__block"> email:
+                    <sf-common-input #email class="group__block__item" [placeholder]="'email'"></sf-common-input>
+                </label>
+                <label class="group__block"> password:
+                    <sf-common-input class="group__block__item" #password [placeholder]="'password'" [isSecure]="true"></sf-common-input>
+                </label>
+                <label class="group__block"> phone:
+                    <sf-common-inputNumb class="group__block__item" #phone></sf-common-inputNumb>
+                    </label>
+                <label class="group__block"> position:
+                        <sf-common-dropdown class="group__block__item" class="dropdown" #position [dropdownOptions]="positions" (selectedValueChange)="getPosition($event)"></sf-common-dropdown>
+                </label>
+            </div>
+        </form>
+    </form-body>
+    <form-actions>
+        <div class="actions">
+            <div class="actions__item">
+                <sf-common-button (click)="submit()">
+                    submit
+                </sf-common-button>
+            </div>
+            <div class="actions__item">
+                <sf-common-button (click)="reset()">
+                    reset
+                </sf-common-button>
+            </div>
+        </div>
+    </form-actions>
+</sf-common-form>

festival/frontend/src/app/components/register/register.component.less

@@ -0,0 +1,22 @@
+.form {
+    &__group {
+        display: flex;
+        flex-direction: column;
+        & .group__block {
+            &__item {
+                margin-left: 64px;
+            }
+        }
+    }
+}
+
+.actions {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    &__item {}
+}
+
+form-actions {
+    width: 100%;
+}