Merge branch '65-login-screen-page' into 'master'

Resolve "login screen - page"

Closes #65

See merge request swtp-block-ws17/arsnova-angular-frontend!18

src/app/app-routing.module.ts

 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
-
+import { LoginScreenComponent } from './login-screen/login-screen.component';
 
 const routes: Routes = [
-{ path: 'errorpage', component: PageNotFoundComponent }
+  { path: 'errorpage', component: PageNotFoundComponent },
+  { path: 'home', component: LoginScreenComponent },
+  { path: '', redirectTo: '/home', pathMatch: 'full' }
 ];
 
 
@@ -17,4 +19,5 @@ const routes: Routes = [
   ],
   declarations: []
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {
+}

src/app/app.module.ts

@@ -44,16 +44,22 @@ import {
   MatToolbarModule,
   MatTooltipModule
 } from '@angular/material';
+import { LoginScreenComponent } from './login-screen/login-screen.component';
 import { NotificationService } from './notification.service';
 
 @NgModule({
   declarations: [
     AppComponent,
     LoginComponent,
+    LoginScreenComponent,
     PageNotFoundComponent,
     PasswordResetComponent,
     RegisterComponent
   ],
+  entryComponents: [
+    RegisterComponent,
+    PasswordResetComponent
+  ],
   imports: [
     AppRoutingModule,
     BrowserModule,

src/app/login-screen/login-screen.component.html

+<div fxLayout="column" fxLayoutGap="20px">
+  <div fxLayout="row">
+    <app-login></app-login>
+  </div>
+  <div fxLayout="row" fxLayoutGap="5px">
+    <button mat-raised-button color="primary" (click)="openRegisterDialog()">Register</button>
+    <button mat-raised-button color="primary" (click)="openPasswordDialog()">Password reset</button>
+  </div>
+</div>

src/app/login-screen/login-screen.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginScreenComponent } from './login-screen.component';
+
+describe('LoginScreenComponent', () => {
+  let component: LoginScreenComponent;
+  let fixture: ComponentFixture<LoginScreenComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LoginScreenComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginScreenComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/login-screen/login-screen.component.ts

+import { Component, OnInit } from '@angular/core';
+import { MatDialog } from '@angular/material';
+import { RegisterComponent } from '../register/register.component';
+import { PasswordResetComponent } from '../password-reset/password-reset.component';
+
+@Component({
+  selector: 'app-login-screen',
+  templateUrl: './login-screen.component.html',
+  styleUrls: ['./login-screen.component.scss']
+})
+export class LoginScreenComponent implements OnInit {
+
+  constructor(public dialog: MatDialog) {
+  }
+
+  openRegisterDialog(): void {
+    this.dialog.open(RegisterComponent, {
+      width: '350px'
+    });
+  }
+
+  openPasswordDialog(): void {
+    this.dialog.open(PasswordResetComponent, {
+      width: '350px'
+    });
+  }
+
+  ngOnInit() {
+  }
+
+}

src/app/register/register.component.html

 <form>
 
   <mat-form-field class="input-block">
-    <input matInput #email maxlength="256" placeholder="e-mail">
+    <input matInput #email maxlength="256" placeholder="E-mail">
     <mat-hint align="start"><strong></strong></mat-hint>
   </mat-form-field>
 
   <mat-form-field class="input-block">
-    <input matInput type="password" #passwd maxlength="256" placeholder="password">
+    <input matInput type="password" #passwd maxlength="256" placeholder="Password">
     <mat-hint align="start"><strong></strong></mat-hint>
-    <mat-hint align="end">{{passwd.value.length}} / 12</mat-hint>
+    <mat-hint align="end">{{passwd.value.length}} / 256</mat-hint>
   </mat-form-field>
 
   <mat-form-field class="input-block">
-    <input matInput type="password" #passwd2 maxlength="256" placeholder="verify password">
+    <input matInput type="password" #passwd2 maxlength="256" placeholder="Verify password">
     <mat-hint align="start"><strong></strong></mat-hint>
-    <mat-hint align="end">{{passwd2.value.length}} / 12</mat-hint>
+    <mat-hint align="end">{{passwd2.value.length}} / 256</mat-hint>
   </mat-form-field>
   <div *ngIf="passwd.value === passwd2.value && passwd.value.length !== 0">
     <mat-icon>check_circle</mat-icon>
@@ -23,7 +23,6 @@
     <mat-icon>clear</mat-icon>
   </div>
 
-  <button mat-raised-button color="primary">back</button>
-  <button mat-raised-button color="primary" (click)="save(email.value, passwd.value, passwd2.value)">save</button>
+  <button mat-raised-button color="primary" (click)="save(email.value, passwd.value, passwd2.value)">Register</button>
 
 </form>

src/app/register/register.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
 
 @Component({
   selector: 'app-register',
@@ -8,7 +9,12 @@ import { Component, OnInit } from '@angular/core';
 export class RegisterComponent implements OnInit {
   check = 0;
 
-  constructor() {
+  constructor(public dialogRef: MatDialogRef<RegisterComponent>,
+              @Inject(MAT_DIALOG_DATA) public data: any) {
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close();
   }
 
   ngOnInit() {