Basic structure

angular.json

@@ -10,7 +10,7 @@
       "prefix": "app",
       "schematics": {
         "@schematics/angular:component": {
-          "styleext": "scss"
+          "styleext": "sass"
         }
       },
       "architect": {
@@ -27,7 +27,7 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.scss"
+              "src/styles.sass"
             ],
             "scripts": []
           },
@@ -83,7 +83,7 @@
             "tsConfig": "src/tsconfig.spec.json",
             "karmaConfig": "src/karma.conf.js",
             "styles": [
-              "src/styles.scss"
+              "src/styles.sass"
             ],
             "scripts": [],
             "assets": [

package.json

@@ -11,11 +11,12 @@
   },
   "private": true,
   "dependencies": {
+    "@angular-devkit/build-angular": "^0.13.0",
     "@angular/animations": "~7.0.0",
     "@angular/cdk": "^7.0.3",
     "@angular/common": "~7.0.0",
     "@angular/compiler": "~7.0.0",
-    "@angular/core": "~7.0.0",
+    "@angular/core": "^7.0.4",
     "@angular/forms": "~7.0.0",
     "@angular/http": "~7.0.0",
     "@angular/platform-browser": "~7.0.0",
@@ -27,13 +28,12 @@
     "zone.js": "~0.8.26"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.10.0",
     "@angular/cli": "~7.0.4",
     "@angular/compiler-cli": "~7.0.0",
     "@angular/language-service": "~7.0.0",
-    "@types/node": "~8.9.4",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "~2.0.3",
+    "@types/node": "~8.9.4",
     "codelyzer": "~4.5.0",
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",

src/app/app.component.html

@@ -1,2 +1 @@
-<app-document-list></app-document-list>
+<app-home id="content"></app-home>
-<app-document></app-document>

src/app/app.component.sass

@@ -0,0 +1,8 @@
+@import '../styles/mixins.sass'
+@import '../styles/vars.sass'
+
+#content
+  grid-template: 7.5% 92.5% / 25% 50% 25%
+  display: grid
+  min-height: 100vh
+  max-height: 100vh

src/app/app.component.ts

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

src/app/app.module.ts

@@ -6,6 +6,15 @@ import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
 import { AppComponent } from './app.component';
 import { DocumentListComponent } from './components/document-list/document-list.component';
 import { DocumentComponent } from './components/document/document.component';
+import { RegisterComponent } from './components/register/register.component';
+import { LoginComponent } from './components/login/login.component';
+import { AppScaffoldComponent } from './components/app-scaffold/app-scaffold.component';
+import { ChatComponent } from './components/chat/chat.component';
+import { FriendsComponent } from './components/social/friends/friends.component';
+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';
 
 const config: SocketIoConfig = { url: 'http://localhost:4444', options: {} };
 
@@ -13,7 +22,16 @@ const config: SocketIoConfig = { url: 'http://localhost:4444', options: {} };
   declarations: [
     AppComponent,
     DocumentListComponent,
-    DocumentComponent
+    DocumentComponent,
+    RegisterComponent,
+    LoginComponent,
+    AppScaffoldComponent,
+    ChatComponent,
+    FriendsComponent,
+    FeedComponent,
+    HomeComponent,
+    SocialComponent,
+    GroupsComponent
   ],
   imports: [
     BrowserModule,

src/app/components/app-scaffold/app-scaffold.component.html

@@ -0,0 +1,5 @@
+<h1>Greenvironment</h1>
+  <button id="tab-home">Home</button>
+  <button id="tab-profile">Profile</button>
+  <button id="tab-rank">Rank</button>
+  <button id="logoutbutton">Log out</button>

src/app/components/app-scaffold/app-scaffold.component.sass

@@ -0,0 +1,37 @@
+@import '../../../styles/mixins.sass'
+@import '../../../styles/vars.sass'
+
+button
+  border: 2px solid $cHeadPrimaryBackground
+  margin-top: 0.125em
+  padding: 0.125em
+  background-color: $cHeadPrimaryBackground
+  color: $cHeadFontColor
+  font-weight: bold
+  transition-duration: 0.25s
+
+button:hover
+  background-color: lighten($cHeadPrimaryBackground, 10%)
+  cursor: pointer
+
+button:active
+  background-color: darken($cHeadPrimaryBackground, 5%)
+  box-shadow: inset 0.25em 0.25em 0.1em rgba(0, 0, 0, 0.25)
+
+h1
+  @include gridPosition(1, 2, 1, 2)
+  line-height: 100%
+  margin-left: 0.5em
+  margin-top: 0.25em
+
+#tab-home
+  @include gridPosition(1, 2, 2, 3)
+
+#tab-profile
+  @include gridPosition(1, 2, 3, 4)
+
+#tab-rank
+  @include gridPosition(1, 2, 4, 5)
+
+#logoutbutton
+  @include gridPosition(1, 2, 8, 9)

src/app/components/app-scaffold/app-scaffold.component.spec.ts

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

src/app/components/app-scaffold/app-scaffold.component.ts

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

src/app/components/chat/chat.component.html

@@ -0,0 +1,10 @@
+<div id="header">
+        <span class="title">Chats</span>
+        <button id="newchat" type="submit"><span><i class="fa fa-plus fa-3x" aria-hidden="true"></i></span></button>
+</div>
+<div id="chats">
+    <div class="chatitem">
+        <div class="title"> <span>Name</span></div>
+        <div class="date"> <a>Datum</a></div>
+    </div>
+</div>

src/app/components/chat/chat.component.sass

@@ -0,0 +1,59 @@
+@import '../../../styles/mixins.sass'
+@import '../../../styles/vars.sass'
+
+#header
+  @include gridPosition(1, 2, 1, 2)
+  background-color: $cBoxHeaderBackground
+  display: grid
+  grid-template: 100% /80% 20%
+
+  span
+    color: $cFontWhite
+  span.title
+    @include gridPosition(1, 2, 1, 2)
+    margin-top: 0.25em
+    margin-left: 0.25em
+    line-height: 100%
+    font-size: 2em
+
+  button
+    background-color: $cBoxHeaderBackground
+    border: none
+  
+  button:hover
+    background-color: lighten($cBoxHeaderBackground, 10%)
+    cursor: pointer
+
+  button:active
+    background-color: darken($cBoxHeaderBackground, 5%)
+  
+    #newchat
+      @include gridPosition(1, 2, 2, 3)
+
+#chats
+  overflow: auto
+  @include gridPosition(2, 3, 1, 2)
+
+  .chatitem
+    background-color: $cPrimaryBackground
+    height: 3em
+    margin: 0.2em
+    padding: 0.25em
+    border-radius: 0.25em
+    border: solid
+    display: flex;
+    .title, .date
+      margin: auto
+    .title
+      font-weight: bold
+      text-align: left
+      border: solid
+      width: 60%
+      padding-left: 1em
+      span
+        font-size: 125%
+    .date
+      color: $cInactiveText
+      text-align: right
+      border: solid
+      width: 40%

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

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

src/app/components/chat/chat.component.ts

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

src/app/components/feed/feed.component.html

@@ -0,0 +1,20 @@
+<div id="postinput">
+  <textarea id='input' placeholder="Post something ..." rows='3' wrap="soft"></textarea>
+  <button id="attach" type='submit'><span><i class="fa fa-paperclip fa-2x" aria-hidden="true"></i></span></button>
+  <button id="submit" type='submit'><span><i class="fa fa-send-o fa-2x" aria-hidden="true"></i></span></button>
+</div>
+<div id='completeFeed'>
+  <div id='feedchooser'>
+    <button id="new">New</button>
+    <button id='mostliked'>Most Liked</button>
+  </div>
+  <div id='feedlist'>
+    <div class="feeditem">
+        <div class="itemhead">
+          <span class="title">Testuser</span>
+          <span class="handle"><a href="#">@testuser</a></span>
+          <span class="date">23.09.19 10:07</span></div>
+          <p class="text">Example Test text. This is a test</p>
+    </div>
+  </div>
+</div>

src/app/components/feed/feed.component.sass

@@ -0,0 +1,92 @@
+@import '../../../styles/mixins.sass'
+@import '../../../styles/vars.sass'
+
+#postinput
+  @include gridPosition(1, 2, 1, 2)
+  margin: 0.5em
+  display: grid
+  grid-template: 100% /80% 10% 10%
+  #input
+    @include gridPosition(1, 2, 1, 2)
+    border-radius: 0.25em
+    border: 1px solid $cFeedInputBorder
+    padding: 0.125em
+  #attach
+    @include gridPosition(1, 2, 2, 3)
+  #submit
+    @include gridPosition(1, 2, 3, 4)
+    
+#completeFeed
+  @include gridPosition(2, 3, 1, 2)
+  display: grid
+  grid-template: 5% 95% /100%
+
+  #feedchooser
+    @include gridPosition(1, 2, 1, 2)
+    display: grid
+    grid-template: 100% /50% 50%
+    background-color: $cFontWhite
+    padding: 0
+    margin: 0
+    button
+      background-color: $cFeedChooserBackground
+      border: none
+      font-size: 1.5em
+      color: $cFontWhite
+    button:hover
+      background-color: lighten($cFeedChooserBackground, 10%)
+      cursor: pointer
+    #new
+      @include gridPosition(1, 2, 1, 2)
+    #mostliked
+      @include gridPosition(1, 2, 2, 3)
+
+  #feedlist
+    @include gridPosition(2, 3, 1, 2)
+    overflow: auto
+    background-color: $cFeedBackground
+    .feeditem
+      background-color: $cFeedItemBackground
+      min-height: 2em
+      margin: 0.5em
+      padding: 0.25em
+      border-radius: 0.25em
+      .itemhead
+        align-items: flex-start
+
+        .title, .handle, .date
+          margin: 0.125em
+        .title
+          font-weight: bold
+
+        .handle, .date
+          color: $cInactiveText
+        .handle a
+          text-decoration: none
+          color: $cInactiveText
+          font-style: normal
+        .handle a:hover
+          text-decoration: underline
+
+    .feeditemPicture
+      background-color: $cFeedItemBackground
+      min-height: 2em
+      margin: 0.5em
+      padding: 0.25em
+      border-radius: 0.25em
+      .itemhead
+        align-items: flex-start
+
+        .title, .handle, .date
+          margin: 0.125em
+        .title
+          font-weight: bold
+
+        .handle, .date
+          color: $cInactiveText
+        .handle a
+          text-decoration: none
+          color: $cInactiveText
+          font-style: normal
+        .handle a:hover
+          text-decoration: underline

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

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

src/app/components/feed/feed.component.ts

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

src/app/components/home/home.component.html

@@ -0,0 +1,4 @@
+<app-scaffold id="headerbar"></app-scaffold>
+<home-chat id="chatcontainer"></home-chat>
+<home-feed id="feedcontainer"></home-feed>
+<home-social id="socialcontainer"></home-social>

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

@@ -0,0 +1,27 @@
+@import '../../../styles/mixins.sass'
+@import '../../../styles/vars.sass'
+
+#headerbar
+  @include gridPosition(1, 2, 1, 4)
+  display: grid
+  grid-template: 100% /30% 10% 10% 10% 10% 10% 10% 10%
+  background-color: $cHeadPrimaryBackground
+  color: $cHeadFontColor
+
+#chatcontainer
+  @include gridPosition(2, 3, 1, 2)
+  display: grid
+  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)
+  display: grid
+  grid-template: 50% 50% /100%
+  background-color: $cBoxBodyBackground

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

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

src/app/components/home/home.component.ts

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

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

@@ -0,0 +1,3 @@
+<p>
+  login works!
+</p>

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

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

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

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

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

@@ -0,0 +1,3 @@
+<p>
+  register works!
+</p>

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

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

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

@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import {RegisterService} from '../../services/register/register.service';
+import {Registration} from '../../models/registration';
+
+@Component({
+  selector: 'registration',
+  templateUrl: './register.component.html',
+  styleUrls: ['./register.component.scss']
+})
+export class RegisterComponent implements OnInit {
+  registration: Registration
+
+  constructor(private registerService: RegisterService) { }
+
+  onClickSubmit(pUsername: string, pEmail: string, pPasswordHash: string) {
+    this.registration.username = pUsername
+    this.registration.email = pEmail
+    this.registration.passwordHash = pPasswordHash 
+
+    this.registerService.register(this.registration)
+  }
+
+  ngOnInit() {
+  }
+
+}

src/app/components/social/friends/friends.component.html

@@ -0,0 +1,10 @@
+<div id="header">
+  <span class="title">Friends</span>
+  <button id="new" type="submit"><span><i class="fa fa-plus fa-3x" aria-hidden="true"></i></span></button>
+  <button id="invitations" type="submit"><span><i class="fa fa-envelope-o fa-3x" aria-hidden="true"></i></span></button>
+</div>
+<div id="friendslist">
+    <div class="frienditem" *ngFor="let friend of friends"> 
+      <div class="friendname">{{friend}}</div>
+    </div>
+</div>

src/app/components/social/friends/friends.component.sass

@@ -0,0 +1,24 @@
+@import '../../../../styles/mixins.sass'
+@import '../../../../styles/vars.sass'
+@import '../social.component.sass'
+
+#friendslist
+  overflow: auto
+  @include gridPosition(2, 3, 1, 2)
+  .frienditem
+    background-color: $cPrimaryBackground
+    height: 3em
+    margin: 0.2em
+    padding: 0.25em
+    border-radius: 0.25em
+    border: solid
+    display: flex;
+    .friendname
+      font-weight: bold
+      text-align: left
+      border: solid
+      width: 60%
+      padding-left: 1em
+      margin: auto
+      span
+        font-size: 125%

src/app/components/social/friends/friends.component.spec.ts

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

src/app/components/social/friends/friends.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'social-friends',
+  templateUrl: './friends.component.html',
+  styleUrls: ['./friends.component.sass']
+})
+export class FriendsComponent implements OnInit {
+  friends: Array<String> = ["Friend 1", "Friend 2", "Friend 3", "Friend 4", "Friend 5", "Friend 6"]
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/components/social/groups/groups.component.html

@@ -0,0 +1,10 @@
+<div id="header">
+    <span class="title">Groups</span>
+    <button id="new" type="submit"><span><i class="fa fa-plus fa-3x" aria-hidden="true"></i></span></button>
+    <button id="invitations" type="submit"><span><i class="fa fa-envelope-o fa-3x" aria-hidden="true"></i></span></button>
+</div>
+<div id="groupslist">
+    <div class="groupitem" *ngFor="let group of groups"> 
+      <div class="groupname">{{group}}</div>
+    </div>
+</div>

src/app/components/social/groups/groups.component.sass

@@ -0,0 +1,24 @@
+@import '../../../../styles/mixins.sass'
+@import '../../../../styles/vars.sass'
+@import '../social.component.sass'
+
+#groupslist
+  overflow: auto
+  @include gridPosition(2, 3, 1, 2)
+  .groupitem
+    background-color: $cPrimaryBackground
+    height: 3em
+    margin: 0.2em
+    padding: 0.25em
+    border-radius: 0.25em
+    border: solid
+    display: flex;
+    .groupname
+      font-weight: bold
+      text-align: left
+      border: solid
+      width: 60%
+      padding-left: 1em
+      margin: auto
+      span
+        font-size: 125%

src/app/components/social/groups/groups.component.spec.ts

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

src/app/components/social/groups/groups.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'social-groups',
+  templateUrl: './groups.component.html',
+  styleUrls: ['./groups.component.sass']
+})
+export class GroupsComponent implements OnInit {
+  groups: Array<String> = ["Group 1", "Group 2", "Group 3", "Group 4", "Group 5", "Group 6"]
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/components/social/social.component.html

@@ -0,0 +1,2 @@
+<social-friends id="friendscontainer"></social-friends>
+<social-groups id="groupscontainer"></social-groups>

src/app/components/social/social.component.sass

@@ -0,0 +1,44 @@
+@import '../../../styles/mixins.sass'
+@import '../../../styles/vars.sass'
+
+#friendscontainer
+    @include gridPosition(1, 2, 1, 2)
+    display: grid
+    grid-template: 15% 85% /100%
+    
+#groupscontainer
+    @include gridPosition(2, 3, 1, 2)
+    display: grid
+    grid-template: 15% 85% /100%
+
+#header
+  @include gridPosition(1, 2, 1, 2)
+  background-color: $cBoxHeaderBackground
+  display: grid
+  grid-template: 100% /60% 20% 20%
+
+  span
+    color: $cFontWhite
+  span.title
+      @include gridPosition(1, 2, 1, 2)
+      margin-top: 0.25em
+      margin-left: 0.25em
+      line-height: 100%
+      font-size: 2em
+    
+  button
+    background-color: $cBoxHeaderBackground
+    border: none
+  
+  button:hover
+    background-color: lighten($cBoxHeaderBackground, 10%)
+    cursor: pointer
+
+  button:active
+    background-color: darken($cBoxHeaderBackground, 5%)
+  
+    #new
+      @include gridPosition(1, 2, 2, 3)
+
+    #invitations
+      @include gridPosition(1, 2, 3, 4)

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

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

src/app/components/social/social.component.ts

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

src/app/models/registration.ts

@@ -0,0 +1,5 @@
+export interface Registration {
+    username: string;
+    email: string;
+    passwordHash: string
+  }

src/app/services/login/login.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { LoginService } from './login.service';
+
+describe('LoginService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: LoginService = TestBed.get(LoginService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/login/login.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LoginService {
+
+  constructor() { }
+}

src/app/services/register/register.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { RegisterService } from './register.service';
+
+describe('RegisterService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: RegisterService = TestBed.get(RegisterService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/register/register.service.ts

@@ -0,0 +1,30 @@
+import { Injectable } from '@angular/core';
+import {Http, URLSearchParams, Headers} from '@angular/http';
+import { Registration } from '../../models/registration';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class RegisterService {
+
+  constructor(private http: Http) { }
+
+  public register(registration: Registration) {
+ 
+    let url = './graphql'
+ 
+    let headers = new Headers();
+    headers.set('Content-Type', 'application/json');
+ 
+    return this.http.post(url, headers, this.buildJson(registration));
+  }
+
+  public buildJson(registration: Registration): String {
+    const body = 'mutation {'
+      + 'register(username: ' + registration.username + ', email: ' + registration.email
+      + 'passwordHash: ' + registration.passwordHash + ') {'
+        'id} }'
+    return body
+  }
+}
+

src/index.html

@@ -4,9 +4,9 @@
   <meta charset="utf-8">
   <title>SocketApp</title>
   <base href="/">
-
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <script src="https://kit.fontawesome.com/84cf838715.js"></script>
 </head>
 <body>
   <app-root></app-root>

src/main.ts

@@ -3,6 +3,7 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
+import 'rxjs';
 
 if (environment.production) {
   enableProdMode();

src/styles.sass

@@ -0,0 +1,9 @@
+@import 'styles/mixins.sass'
+@import 'styles/vars.sass'
+
+body
+  font-family: Arial, serif
+  margin: 0
+  padding: 0
+  min-height: 100vh
+  

src/styles.scss

@@ -1 +0,0 @@
-/* You can add global styles to this file, and also import other style files */

src/styles/mixins.sass

@@ -0,0 +1,5 @@
+@mixin gridPosition($rowStart, $rowEnd, $columnStart, $columnEnd)
+  grid-row-start: $rowStart
+  grid-row-end: $rowEnd
+  grid-column-start: $columnStart
+  grid-column-end: $columnEnd

src/styles/vars.sass

@@ -0,0 +1,23 @@
+$cPrimaryBackground: #fff
+$cSecondaryBackground: #ddd
+$cInactiveText: #555
+$cPrimarySurface: #fff
+
+//Headerbar
+$cHeadPrimaryBackground: #0d6b14
+$cHeadFontColor: #243dca
+
+//Home -- Feed
+$cFeedPrimaryFontColor: #243dca
+$cFeedSecondaryFontColor: #243dca
+$cFeedInputBorder: #396d51
+$cFeedItemBackground: #7fd4a7
+$cFeedChooserBackground: #259145
+$cFeedBackground: #0d6b14
+
+//Home -- Chat, Friends, Groups
+$cFontWhite: #243dca
+$cBoxHeaderBackground: #259145
+$cBoxBodyBackground: #3deb71
+
+