added login,register, about and imprint page

src/app/app.component.html

@@ -1 +1,4 @@
-<app-home id="content"></app-home>
+<!--<app-login id="login"></app-login>-->
+<!--<registration id="register"></registration>-->
+<app-imprint id="imprint"></app-imprint>
+<!--<app-about id="about"></app-about>-->

src/app/app.component.sass

@@ -5,4 +5,33 @@
   grid-template: 7.5% 92.5% / 25% 50% 25%
   display: grid
   min-height: 100vh
-  max-height: 100vh
+  max-height: 100vh
+
+#imprint
+  background-color:  $cSecondaryBackground
+  grid-template: 15% 70% 15% / 15% 70% 15% 
+  display: grid
+  min-height: 100vh
+  max-height: 100vh
+
+#about
+  background-color:  $cSecondaryBackground
+  grid-template: 15% 70% 15% / 15% 70% 15% 
+  display: grid
+  min-height: 100vh
+  max-height: 100vh
+
+#login
+  background-color:  $cSecondaryBackground
+  grid-template: 15% 70% 15% / 15% 70% 15% 
+  display: grid
+  min-height: 100vh
+  max-height: 100vh
+
+#register
+  background-color:  $cSecondaryBackground
+  grid-template: 15% 70% 15% / 15% 70% 15% 
+  display: grid
+  min-height: 100vh
+  max-height: 100vh
+ 

src/app/app.component.ts

@@ -1,9 +1,11 @@
 import { Component, OnInit } from '@angular/core';
+import { RegisterService } from './services/register/register.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.sass']
+  styleUrls: ['./app.component.sass'],
+  providers: [RegisterService]
 })
 export class AppComponent implements OnInit {
   constructor() { }

src/app/app.module.ts

@@ -15,6 +15,8 @@ import { FeedComponent } from './components/feed/feed.component';
 import { HomeComponent } from './components/home/home.component';
 import { SocialComponent } from './components/social/social.component';
 import { GroupsComponent } from './components/social/groups/groups.component';
+import { ImprintComponent } from './components/imprint/imprint.component';
+import { AboutComponent } from './components/about/about.component';
 
 const config: SocketIoConfig = { url: 'http://localhost:4444', options: {} };
 
@@ -25,6 +27,8 @@ const config: SocketIoConfig = { url: 'http://localhost:4444', options: {} };
     DocumentComponent,
     RegisterComponent,
     LoginComponent,
+    ImprintComponent,
+    AboutComponent,
     AppScaffoldComponent,
     ChatComponent,
     FriendsComponent,

src/app/components/about/about.component.html

@@ -0,0 +1,8 @@
+
+<div id="aboutcontainer">
+  <h1>What´s Greenvironment?</h1>
+  <h2>Hello Greenvironment!</h2>
+  <p>We, the greenviroment team want to create a netwok for environmentalists who care for our nature and our planet as much as we do.</p>
+  <p>We believe, that together we can do amazing things to protect our environment and keep it clean and green.</p>
+  <a href="/register">You aren´t part of greenvironment yet? - join us here</a>
+</div>

src/app/components/about/about.component.sass

@@ -0,0 +1,10 @@
+@import '../../../styles/mixins.sass'
+@import '../../../styles/vars.sass'
+    
+#aboutcontainer
+    @include gridPosition(2, 2,2,2)
+    background-color: $cPrimaryBackground
+input
+    margin: 0.25em
+#header
+    @include gridPosition(1, 2, 1, 2)

src/app/components/about/about.component.spec.ts

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

src/app/components/about/about.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-about',
+  templateUrl: './about.component.html',
+  styleUrls: ['./about.component.sass']
+})
+export class AboutComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/components/home/home.component.sass

@@ -14,11 +14,7 @@
   grid-template: 7.5% 92.5% /100%
   background-color: $cBoxBodyBackground
 
-#feedcontainer
-  @include gridPosition(2, 3, 2, 3)
-  display: grid
-  grid-template: 10% 90% /100%
-  background-color: $cSecondaryBackground
+
 
 #socialcontainer
   @include gridPosition(2, 3, 3, 4)

src/app/components/imprint/imprint.component.html

@@ -0,0 +1,7 @@
+
+<div id="imprintcontainer">
+  <h1>Imprint</h1>
+  <p>The greenvironment network is being developed by Bliblablub</p>
+  <h2>Contact</h2>
+  <p>Email: mailadress</p>
+</div>

src/app/components/imprint/imprint.component.sass

@@ -0,0 +1,10 @@
+@import '../../../styles/mixins.sass'
+@import '../../../styles/vars.sass'
+    
+#imprintcontainer
+    @include gridPosition(2, 2,2,2)
+    background-color: $cPrimaryBackground
+input
+    margin: 0.25em
+#header
+    @include gridPosition(1, 2, 1, 2)

src/app/components/imprint/imprint.component.spec.ts

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

src/app/components/imprint/imprint.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-imprint',
+  templateUrl: './imprint.component.html',
+  styleUrls: ['./imprint.component.sass']
+})
+export class ImprintComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

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

@@ -1,3 +1,16 @@
-<p>
-  login works!
-</p>
+
+<div id="logincontainer">
+  <table style="width:100%">
+    <tr>
+      <td>username: </td>
+      <td><input type="inputBox" name="username"><br></td>
+    </tr>
+    <tr>
+        <td>password:</td>
+        <td> <input type="text" name="password"><br></td>
+      </tr>
+  </table>
+    <button type="loginbutton">Login</button>
+    <br>
+  <a href="/register">You aren´t part of greenvironment yet? - join us here</a>
+</div>

src/app/components/login/login.component.sass

@@ -0,0 +1,11 @@
+@import '../../../styles/mixins.sass'
+@import '../../../styles/vars.sass'
+    
+#logincontainer
+    @include gridPosition(2, 2,2,2)
+    grid-template: 15% 15% 15% 15% 15% 15% / 100%
+    background-color: $cPrimaryBackground
+input
+    margin: 0.25em
+#header
+    @include gridPosition(1, 2, 1, 2)

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

@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-login',
   templateUrl: './login.component.html',
-  styleUrls: ['./login.component.scss']
+  styleUrls: ['./login.component.sass']
 })
 export class LoginComponent implements OnInit {
 

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

@@ -1,3 +1,23 @@
-<p>
-  register works!
-</p>
+<div id="registercontainer">
+    <table style="width:100%">
+        <tr>
+          <td>username: </td>
+          <td><input type="inputBox" name="username"><br></td>
+        </tr>
+        <tr>
+          <td>email:</td>
+          <td><input type="text" name="email"><br></td>
+        </tr>
+        <tr>
+            <td>password:</td>
+            <td> <input type="text" name="password"><br></td>
+          </tr>
+        <tr>
+            <td>repeat password:</td>
+            <td> <input type="text" name="repeatpassword"><br></td>
+        </tr>
+      </table>
+  <button type="registerbutton">Register</button>
+  <br>
+  <a href="/login">You are already part of greenvironment? - login</a>
+</div>

src/app/components/register/register.component.sass

@@ -0,0 +1,13 @@
+@import '../../../styles/mixins.sass'
+@import '../../../styles/vars.sass'
+    
+#registercontainer
+    @include gridPosition(2, 2,2,2)
+    grid-template: 15% 15% 15% 15% 15% 15% / 100%
+    background-color: $cPrimaryBackground
+    padding: 1em
+input
+    margin: 0.25em
+    
+#header
+    @include gridPosition(1, 2, 1, 2)

src/app/components/register/register.component.ts

@@ -5,12 +5,12 @@ import {Registration} from '../../models/registration';
 @Component({
   selector: 'registration',
   templateUrl: './register.component.html',
-  styleUrls: ['./register.component.scss']
-})
+  styleUrls: ['./register.component.sass']
+})/*
 export class RegisterComponent implements OnInit {
   registration: Registration
-
-  constructor(private registerService: RegisterService) { }
+ 
+  constructor(private registerService: RegisterService) {}
 
   onClickSubmit(pUsername: string, pEmail: string, pPasswordHash: string) {
     this.registration.username = pUsername
@@ -20,6 +20,14 @@ export class RegisterComponent implements OnInit {
     this.registerService.register(this.registration)
   }
 
+  ngOnInit() {}
+
+}
+*/
+export class RegisterComponent implements OnInit {
+
+  constructor() { }
+
   ngOnInit() {
   }