From 6995673dbbe8e46dc6622d755496f138cc34d719 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lukas=20Mau=C3=9F?= <lukas.mauss@mni.thm.de>
Date: Tue, 12 Feb 2019 23:13:06 +0100
Subject: [PATCH] Create new home-component which replaces the login-page on
/home url
---
src/app/app-routing.module.ts | 4 +-
src/app/app.module.ts | 4 +-
.../home/home-page/home-page.component.html | 22 ++++++
.../home/home-page/home-page.component.scss | 67 +++++++++++++++++++
.../home-page/home-page.component.spec.ts | 25 +++++++
.../home/home-page/home-page.component.ts | 15 +++++
.../home/login-page/login-page.component.html | 65 +++++++-----------
.../home/login-page/login-page.component.scss | 66 ------------------
8 files changed, 157 insertions(+), 111 deletions(-)
create mode 100644 src/app/components/home/home-page/home-page.component.html
create mode 100644 src/app/components/home/home-page/home-page.component.scss
create mode 100644 src/app/components/home/home-page/home-page.component.spec.ts
create mode 100644 src/app/components/home/home-page/home-page.component.ts
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 1279c5b43..6c6a00c9e 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,10 +1,10 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
-import { LoginPageComponent } from './components/home/login-page/login-page.component';
import { FooterImprintComponent } from './components/shared/footer-imprint/footer-imprint.component';
import { PageNotFoundComponent } from './components/shared/page-not-found/page-not-found.component';
import { CreatorModule } from './components/creator/creator.module';
import { ParticipantModule } from './components/participant/participant.module';
+import { HomePageComponent } from './components/home/home-page/home-page.component';
const routes: Routes = [
{
@@ -14,7 +14,7 @@ const routes: Routes = [
},
{
path: 'home',
- component: LoginPageComponent
+ component: HomePageComponent
},
{
path: 'creator',
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 88468b8ff..44b86dafb 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -26,6 +26,7 @@ import { LanguageService } from './services/util/language.service';
import { MarkdownService, MarkedOptions } from 'ngx-markdown';
import { NewLandingComponent } from './components/home/new-landing/new-landing.component';
import { RoomCreateComponent } from './components/creator/_dialogs/room-create/room-create.component';
+import { HomePageComponent } from './components/home/home-page/home-page.component';
export function dialogClose(dialogResult: any) {
}
@@ -38,7 +39,8 @@ export function dialogClose(dialogResult: any) {
RegisterComponent,
UserActivationComponent,
NewLandingComponent,
- RoomCreateComponent
+ RoomCreateComponent,
+ HomePageComponent
],
entryComponents: [
RegisterComponent,
diff --git a/src/app/components/home/home-page/home-page.component.html b/src/app/components/home/home-page/home-page.component.html
new file mode 100644
index 000000000..25128dd66
--- /dev/null
+++ b/src/app/components/home/home-page/home-page.component.html
@@ -0,0 +1,22 @@
+<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill>
+ <div fxLayout="row" fxLayoutAlign="center">
+ <mat-card class="outer">
+ <mat-card-header>
+ <mat-card-title>
+ <h1>
+ <span class="main-heading-secondary">{{ 'login-page.welcome' | translate }}</span>
+ <span class="main-heading-primary">ARSnova</span>
+ </h1>
+ </mat-card-title>
+ </mat-card-header>
+ <mat-card-content>
+ <div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill>
+ <div fxLayout="row" fxLayoutAlign="center">
+ <app-new-landing></app-new-landing>
+ </div>
+ </div>
+ </mat-card-content>
+ </mat-card>
+ </div>
+</div>
+
diff --git a/src/app/components/home/home-page/home-page.component.scss b/src/app/components/home/home-page/home-page.component.scss
new file mode 100644
index 000000000..fdb966021
--- /dev/null
+++ b/src/app/components/home/home-page/home-page.component.scss
@@ -0,0 +1,67 @@
+@import '../../../../styles';
+
+.outer {
+ width: 50%;
+ min-width: 300px;
+ background-color: #bbdefb;
+}
+
+.main-heading {
+ text-align: center;
+}
+
+.main-heading-primary {
+ display: block;
+ font-size: 120%;
+ font-weight: bold;
+ text-align: center;
+ letter-spacing: 10px;
+ color: mat-color($arsnova-primary,500);
+ animation: moveInLeft 2s ease-out;
+}
+
+.main-heading-secondary {
+ font-family: sans-serif;
+ display: block;
+ font-size: 40%;
+ text-align: center;
+ letter-spacing: 10px;
+ color: mat-color($arsnova-accent,500);
+ animation: moveInRight 1s ease-out;
+}
+
+@keyframes moveInLeft {
+ 0% {
+ opacity: 0;
+ transform: translateX(-100px);
+ }
+
+ 80% {
+ transform: translateX(10px);
+ }
+
+ 100% {
+ opacity: 1;
+ transform: translate(0);
+ }
+}
+
+@keyframes moveInRight {
+ 0% {
+ opacity: 0;
+ transform: translateX(100px);
+ }
+
+ 80% {
+ transform: translateX(-10px);
+ }
+
+ 100% {
+ opacity: 1;
+ transform: translate(0);
+ }
+}
+
+mat-card-header {
+ justify-content: center;
+}
diff --git a/src/app/components/home/home-page/home-page.component.spec.ts b/src/app/components/home/home-page/home-page.component.spec.ts
new file mode 100644
index 000000000..e1803322c
--- /dev/null
+++ b/src/app/components/home/home-page/home-page.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomePageComponent } from './home-page.component';
+
+describe('HomePageComponent', () => {
+ let component: HomePageComponent;
+ let fixture: ComponentFixture<HomePageComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ HomePageComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(HomePageComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/components/home/home-page/home-page.component.ts b/src/app/components/home/home-page/home-page.component.ts
new file mode 100644
index 000000000..4f4959515
--- /dev/null
+++ b/src/app/components/home/home-page/home-page.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-home-page',
+ templateUrl: './home-page.component.html',
+ styleUrls: ['./home-page.component.scss']
+})
+export class HomePageComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/src/app/components/home/login-page/login-page.component.html b/src/app/components/home/login-page/login-page.component.html
index dfe844f45..cfb9020ca 100644
--- a/src/app/components/home/login-page/login-page.component.html
+++ b/src/app/components/home/login-page/login-page.component.html
@@ -1,45 +1,26 @@
-<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill>
- <div fxLayout="row" fxLayoutAlign="center">
- <mat-card class="outer">
- <mat-card-header>
- <mat-card-title>
- <h1>
- <span class="main-heading-secondary">{{ 'login-page.welcome' | translate }}</span>
- <span class="main-heading-primary">ARSnova</span>
- </h1>
- </mat-card-title>
- </mat-card-header>
- <mat-card-content>
- <div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill>
- <div fxLayout="row" fxLayoutAlign="center">
- <!-- <mat-tab-group class="login-tab-group">
- <mat-tab label="{{ 'login-page.creator' | translate }}">
- <div fxLayout="column" fxLayoutAlign="start" fxLayoutGap="20px">
- <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="5px">
- <app-login fxFill [role]="UserRole.CREATOR" [username]="username" [password]="password"></app-login>
- </div>
- </div>
- </mat-tab>
- <mat-tab label="{{ 'login-page.participant' | translate }}">
- <div fxLayout="column" fxLayoutAlign="start" fxLayoutGap="20px">
- <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="5px">
- <app-login fxFill [role]="UserRole.PARTICIPANT"></app-login>
- </div>
- </div>
- </mat-tab>
- </mat-tab-group>
- <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="15px">
- <button mat-raised-button class="regButton" color="primary" (click)="openRegisterDialog()">
- {{ 'login-page.register' | translate }}
- </button>
- <button mat-raised-button class="pwButton" color="primary" (click)="openPasswordDialog()">
- {{ 'login-page.password-reset' | translate }}
- </button>
- </div> -->
- <app-new-landing></app-new-landing>
- </div>
+<div fxFill fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px">
+ <mat-tab-group class="login-tab-group">
+ <mat-tab label="{{ 'login-page.creator' | translate }}">
+ <div fxLayout="column" fxLayoutAlign="start" fxLayoutGap="20px">
+ <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="5px">
+ <app-login [password]="password" [role]="UserRole.CREATOR" [username]="username" fxFill></app-login>
</div>
- </mat-card-content>
- </mat-card>
+ </div>
+ </mat-tab>
+ <mat-tab label="{{ 'login-page.participant' | translate }}">
+ <div fxLayout="column" fxLayoutAlign="start" fxLayoutGap="20px">
+ <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="5px">
+ <app-login [role]="UserRole.PARTICIPANT" fxFill></app-login>
+ </div>
+ </div>
+ </mat-tab>
+ </mat-tab-group>
+ <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="15px">
+ <button (click)="openRegisterDialog()" class="regButton" color="primary" mat-raised-button>
+ {{ 'login-page.register' | translate }}
+ </button>
+ <button (click)="openPasswordDialog()" class="pwButton" color="primary" mat-raised-button>
+ {{ 'login-page.password-reset' | translate }}
+ </button>
</div>
</div>
diff --git a/src/app/components/home/login-page/login-page.component.scss b/src/app/components/home/login-page/login-page.component.scss
index b6391c812..85aa03915 100644
--- a/src/app/components/home/login-page/login-page.component.scss
+++ b/src/app/components/home/login-page/login-page.component.scss
@@ -4,68 +4,6 @@
margin-top: 2%;
}
-.outer {
- width: 50%;
- min-width: 300px;
- background-color: #bbdefb;
-}
-
-.main-heading {
- text-align: center;
-}
-
-.main-heading-primary {
- display: block;
- font-size: 120%;
- font-weight: bold;
- text-align: center;
- letter-spacing: 10px;
- color: mat-color($arsnova-primary,500);
- animation: moveInLeft 2s ease-out;
-}
-
-.main-heading-secondary {
- font-family: sans-serif;
- display: block;
- font-size: 40%;
- text-align: center;
- letter-spacing: 10px;
- color: mat-color($arsnova-accent,500);
- animation: moveInRight 1s ease-out;
-}
-
-@keyframes moveInLeft {
- 0% {
- opacity: 0;
- transform: translateX(-100px);
- }
-
- 80% {
- transform: translateX(10px);
- }
-
- 100% {
- opacity: 1;
- transform: translate(0);
- }
-}
-
-@keyframes moveInRight {
- 0% {
- opacity: 0;
- transform: translateX(100px);
- }
-
- 80% {
- transform: translateX(-10px);
- }
-
- 100% {
- opacity: 1;
- transform: translate(0);
- }
-}
-
.regButton {
min-width: 107px;
}
@@ -73,7 +11,3 @@
.pwButton {
min-width: 178px;
}
-
-mat-card-header {
- justify-content: center;
-}
--
GitLab