Merge branch 'dev' of https://github.com/Team-Kaleidoscope/DevHive into dev

21 files changed, 499 insertions, 51 deletions

diff --git a/src/DevHive.Angular/.editorconfig b/src/DevHive.Angular/.editorconfig
index 59d9a3a..3d9a482 100644
--- a/src/DevHive.Angular/.editorconfig
+++ b/src/DevHive.Angular/.editorconfig
@@ -3,8 +3,8 @@ root = true
 
 [*]
 charset = utf-8
-indent_style = space
-indent_size = 2
+indent_style = tab
+indent_size = 4
 insert_final_newline = true
 trim_trailing_whitespace = true
 
diff --git a/src/DevHive.Angular/angular.json b/src/DevHive.Angular/angular.json
index c4b2bf6..2f7de40 100644
--- a/src/DevHive.Angular/angular.json
+++ b/src/DevHive.Angular/angular.json
@@ -29,7 +29,8 @@
             ],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
-              "src/styles.css"
+              "src/styles.css",
+              "src/theme.scss"
             ],
             "scripts": []
           },
diff --git a/src/DevHive.Angular/src/app/app.component.html b/src/DevHive.Angular/src/app/app.component.html
index c021c8c..2bb3494 100644
--- a/src/DevHive.Angular/src/app/app.component.html
+++ b/src/DevHive.Angular/src/app/app.component.html
@@ -1,6 +1,7 @@
 <div class="main">
   <!-- <app-login></app-login> -->
-  <app-register></app-register>
+  <!-- <app-register></app-register> -->
+  <app-feed></app-feed>
 </div>
 
 <!-- <router-outlet></router-outlet> -->
diff --git a/src/DevHive.Angular/src/app/app.module.ts b/src/DevHive.Angular/src/app/app.module.ts
index 3c7c98b..6270561 100644
--- a/src/DevHive.Angular/src/app/app.module.ts
+++ b/src/DevHive.Angular/src/app/app.module.ts
@@ -10,12 +10,16 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { LoginComponent } from './components/login/login.component';
 import { RegisterComponent } from './components/register/register.component';
+import { FeedComponent } from './components/feed/feed.component';
+import { PostComponent } from './components/post/post.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     LoginComponent,
-    RegisterComponent
+    RegisterComponent,
+    FeedComponent,
+    PostComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/DevHive.Angular/src/app/components/feed/feed.component.css b/src/DevHive.Angular/src/app/components/feed/feed.component.css
new file mode 100644
index 0000000..d81f233
--- /dev/null
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.css
@@ -0,0 +1,40 @@
+#feed-page {
+	width: 75%;
+	margin-left: auto;
+	margin-right: auto;
+
+	margin-top: 10px;
+}
+
+.top-bar {
+	display: inline-grid;
+	width: 100%;
+
+	grid-template-columns: 50px auto 50px;
+	grid-template-rows: 50px;
+	place-items: stretch stretch;
+	place-content: stretch stretch;
+}
+
+.top-bar img {
+	width: 50px;
+	height: 50px;
+}
+
+.on-your-mind {
+	margin-left: 10px;
+	margin-right: 10px;
+}
+
+.on-your-mind input {
+	box-sizing: border-box;
+	width: 100%;
+	height: 100%;
+
+	border: 2px solid black;
+	border-radius: 10px;
+}
+
+.post {
+	padding: 1% 0%;
+}
\ No newline at end of file
diff --git a/src/DevHive.Angular/src/app/components/feed/feed.component.html b/src/DevHive.Angular/src/app/components/feed/feed.component.html
new file mode 100644
index 0000000..44ae438
--- /dev/null
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.html
@@ -0,0 +1,117 @@
+<div id="feed-page">
+	<nav class="top-bar">
+		<div class="nav-bar-profile-pic">
+			<a href=""><img src="assets/images/feed/profile-pic.png" alt="profile-pic"></a>
+		</div>
+		<div class="on-your-mind">
+			<a href=""><input type="text" placeholder="What's on yo' mind?"></a>
+		</div>
+		<div class="nav-bar-chat-pic">
+			<a href=""><img src="assets/images/feed/chat-pic.png" alt="chat-pic"></a>
+		</div>
+	</nav>
+	<ul>
+		<li *ngFor="let post of posts" class="post">
+			<app-post></app-post>
+		</li>
+	</ul>
+	<!-- <div class="post">
+									<div class="post-content">
+										<div class="content">
+											<div class="author">
+												<img src="https://cdn.pixabay.com/photo/2020/03/01/12/36/fire-4892711_960_720.jpg" class="profile-picture">
+												<div class="author-info">
+													<div class="name">
+														Gosho Ivanov
+													</div>
+													<div class="handle">
+														@givanov
+													</div>
+												</div>
+											</div>
+											<div class="message">
+												Here, a cool way to style elements in CSS
+											</div>
+											<div class="timestamp">
+												17:41 - 27 Dec 2020
+											</div>
+										</div>
+										<div class="rating">
+											<div class="upvote">
+												ᐃ
+											</div>
+											<div class="score">
+												11
+											</div>
+											<div class="downvote">
+												ᐁ
+											</div>
+										</div>
+									</div>
+									<div class="attachments">
+										<div class="attachment">
+											<div class="filename">
+												index.html
+												<div class="info-reminder">
+													Click to preview
+												</div>
+											</div>
+											<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn.iconscout.com%2Ficon%2Ffree%2Fpng-256%2Ftxt-file-20-504249.png&f=1&nofb=1" class="file-picture">
+																</div>
+										<div class="attachment">
+											<div class="filename">
+												styles.css
+												<div class="info-reminder">
+													Click to preview
+												</div>
+											</div>
+											<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn.iconscout.com%2Ficon%2Ffree%2Fpng-256%2Ftxt-file-20-504249.png&f=1&nofb=1" class="file-picture">
+										</div>
+									</div>
+								</div>
+								<div class="post">
+									<div class="post-content">
+										<div class="content">
+											<div class="author">
+												<img src="https://cdn.pixabay.com/photo/2020/09/06/20/21/cat-5550033_960_720.jpg" class="profile-picture">
+												<div class="author-info">
+													<div class="name">
+														Petio Draganov
+													</div>
+													<div class="handle">
+														@pen15
+													</div>
+												</div>
+											</div>
+											<div class="message">
+												Your opinion on my idea?
+											</div>
+											<div class="timestamp">
+												17:41 - 27 Dec 2020
+											</div>
+										</div>
+										<div class="rating">
+											<div class="upvote">
+												ᐃ
+											</div>
+											<div class="score">
+												-2
+											</div>
+											<div class="downvote">
+												ᐁ
+											</div>
+										</div>
+									</div>
+									<div class="attachments">
+										<div class="attachment">
+											<div class="filename">
+												my_new_idea1.txt
+												<div class="info-reminder">
+													Click to preview
+												</div>
+											</div>
+											<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn.iconscout.com%2Ficon%2Ffree%2Fpng-256%2Ftxt-file-20-504249.png&f=1&nofb=1" class="file-picture">
+										</div>
+									</div>
+								</div> -->
+</div>
diff --git a/src/DevHive.Angular/src/app/components/feed/feed.component.ts b/src/DevHive.Angular/src/app/components/feed/feed.component.ts
new file mode 100644
index 0000000..fa2575f
--- /dev/null
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.ts
@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import { FeedService } from 'src/app/services/feed.service';
+import { PostComponent } from '../post/post.component';
+
+@Component({
+  selector: 'app-feed',
+  templateUrl: './feed.component.html',
+  styleUrls: ['./feed.component.css']
+})
+export class FeedComponent implements OnInit {
+  private _title = 'Feed';
+  public posts: PostComponent[];
+
+  constructor(private titleService: Title, private service: FeedService) {
+    this.titleService.setTitle(this._title);
+   }
+
+  ngOnInit(): void {
+    this.posts = [
+      new PostComponent(),
+      new PostComponent(),
+      new PostComponent(),
+      new PostComponent(),
+    ]
+  }
+}
diff --git a/src/DevHive.Angular/src/app/components/post/post.component.css b/src/DevHive.Angular/src/app/components/post/post.component.css
new file mode 100644
index 0000000..3a3300d
--- /dev/null
+++ b/src/DevHive.Angular/src/app/components/post/post.component.css
@@ -0,0 +1,120 @@
+.post {
+	width: 100%;
+	display: grid;
+	position: relative;
+
+	grid-template-columns: 25% auto 40px;
+	grid-template-rows: 10% 10% auto 5% 10%;
+
+	/* justify-content: space-between;
+	align-items: center; */
+
+	border: 2px solid black;
+	border-radius: 10px;
+	padding: 4px;
+}
+
+.post-info {
+	grid-column-start: 1;
+	grid-column-end: 2;
+
+	grid-row-start: 1;
+	grid-row-end: 4;
+}
+
+/* Start of navigation */
+
+.profile {
+	width: 25%;
+	display: grid;
+	box-sizing: border-box;
+
+	grid-column-start: 1;
+	grid-column-end: 2;
+
+	grid-row-start: 1;
+	grid-row-end: 2;
+}
+
+.post-profile-pic img {
+	width: 60px;
+	height: 60px;
+
+	grid-column-start: 1;
+	grid-column-end: 1;
+
+	grid-row-start: 1;
+	grid-row-end: 2;
+}
+
+.user-info {
+	width: 100%;
+	padding-left: 5px;
+
+	grid-column-start: 2;
+	grid-column-end: 2;
+
+	grid-row-start: 1;
+	grid-row-end: 2;
+}
+
+.profile-names {
+	grid-row: 1;
+}
+
+.profile-username {
+	grid-row: 2;
+}
+
+/* End of navigation */
+
+
+/* Start of post */
+
+.content {
+	grid-column-start: 1;
+	grid-column-end: 2;
+}
+
+.message {
+	grid-row-start: 3;
+	grid-row-end: 3;
+}
+
+.date-created {
+	grid-row-start: 4;
+	grid-row-end: 4;
+}
+
+.separator {
+	width: 100%;
+}
+
+/* End of post */
+
+
+/* Start of ranking */
+
+.ranking {
+	width: 40px;
+	height: 100%;
+	text-align: center;
+
+	grid-column-start: 3;
+	grid-column-end: 3;
+
+	grid-row-start: 1;
+	grid-row-end: 4;
+}
+
+.ranking button {
+	background-color: transparent;
+	background-repeat: no-repeat;
+	border: none;
+}
+
+.ranking button:hover {
+	cursor: pointer;
+}
+
+/* End of ranking */
diff --git a/src/DevHive.Angular/src/app/components/post/post.component.html b/src/DevHive.Angular/src/app/components/post/post.component.html
new file mode 100644
index 0000000..ee8f495
--- /dev/null
+++ b/src/DevHive.Angular/src/app/components/post/post.component.html
@@ -0,0 +1,30 @@
+<div class="post">
+	<div class="post-info">
+		<nav class="profile">
+			<div class="post-profile-pic">
+				<img
+					src="assets/images/feed/profile-pic.png"
+					alt="profile-pic"
+				/>
+			</div>
+			<div class="user-info">
+				<div class="profile-names">
+					{{ user.firstName }} {{ user.lastName }}
+				</div>
+				<div class="profile-username">@{{ user.userName }}</div>
+			</div>
+		</nav>
+
+		<div class="content">
+			<div class="message">Here, a cool way to style elements in CSS</div>
+			<div class="date-created">12.01.2021</div>
+		</div>
+		<hr class="separator" />
+		<div class="files">idk.html</div>
+	</div>
+	<div class="ranking">
+		<button class="upvote">++</button>
+		<div class="number-votes">{{ votesNumber }}</div>
+		<button class="downvote">&ndash;&ndash;</button>
+	</div>
+</div>
diff --git a/src/DevHive.Angular/src/app/components/post/post.component.ts b/src/DevHive.Angular/src/app/components/post/post.component.ts
new file mode 100644
index 0000000..72c7aec
--- /dev/null
+++ b/src/DevHive.Angular/src/app/components/post/post.component.ts
@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+import { Guid } from 'guid-typescript';
+import { User } from 'src/models/identity/user';
+
+@Component({
+	selector: 'app-post',
+	templateUrl: './post.component.html',
+	styleUrls: ['./post.component.css'],
+})
+export class PostComponent implements OnInit {
+	public user: User;
+	public votesNumber: number;
+
+	constructor() {}
+
+	ngOnInit(): void {
+		//Fetch data in post service
+		this.user = new User(
+			Guid.create(),
+			'gosho_trapov',
+			'Gosho',
+			'Trapov',
+			'assets/images/feed/profile-pic.png'
+		);
+
+		this.votesNumber = 23;
+	}
+}
diff --git a/src/DevHive.Angular/src/app/components/register/register.component.css b/src/DevHive.Angular/src/app/components/register/register.component.css
index 396a27c..06c8c52 100644
--- a/src/DevHive.Angular/src/app/components/register/register.component.css
+++ b/src/DevHive.Angular/src/app/components/register/register.component.css
@@ -27,6 +27,10 @@
 	font-weight: bold;
 }
 
+form :nth-last-child(3) {
+	padding-bottom: 1%;
+}
+
 .submit-btn {
 	width: 100%;
 	background-color: black;
diff --git a/src/DevHive.Angular/src/app/components/register/register.component.html b/src/DevHive.Angular/src/app/components/register/register.component.html
index ee9c2ba..3c8a563 100644
--- a/src/DevHive.Angular/src/app/components/register/register.component.html
+++ b/src/DevHive.Angular/src/app/components/register/register.component.html
@@ -7,44 +7,44 @@
 		<hr> -->
 
 		<mat-form-field class="firstNameField">
-			<mat-label>First Name* </mat-label>
+			<mat-label>First Name*</mat-label>
 			<input matInput placeholder="Goshko, is that u?" formControlName="firstName">
 
-			<mat-error *ngIf="firstName?.invalid">Min length of 3</mat-error>
-			<!-- <mat-error *ngIf="!firstName.required">* This is required</mat-error> -->
+			<mat-error *ngIf="registerUserFormGroup.get('firstName')?.hasError('required')">* This is required</mat-error>
+			<mat-error *ngIf="firstName?.invalid">* Min length of 3</mat-error>
 		</mat-form-field>
 		
 		<mat-form-field class="lastNameField">
-			<mat-label>Last Name* </mat-label>
+			<mat-label>Last Name*</mat-label>
 			<input matInput placeholder="Trapov? Really??" formControlName="lastName">
-
-			<mat-error *ngIf="lastName?.invalid">Min length of 3</mat-error>
-			<!-- <mat-error *ngIf="!firstName.required">* This is required</mat-error> -->
+			
+			<mat-error *ngIf="registerUserFormGroup.get('lastName')?.hasError('required')">* This is required</mat-error>
+			<mat-error *ngIf="lastName?.invalid">* Min length of 3</mat-error>
 		</mat-form-field>
 		
 		<mat-form-field class="usernameField">
-			<mat-label>Username* </mat-label>
+			<mat-label>Username*</mat-label>
 			<input matInput placeholder="Think of something cool to flex on other kids" formControlName="username">
 
-			<mat-error *ngIf="username?.invalid">Min length of 3</mat-error>
-			<!-- <mat-error *ngIf="!firstName.required">* This is required</mat-error> -->
+			<mat-error *ngIf="username?.invalid">* Min length of 3</mat-error>
+			<mat-error *ngIf="registerUserFormGroup.get('username')?.hasError('required')">* This is required</mat-error>
 		</mat-form-field>
 		
 		<mat-form-field class="emailField">
-			<mat-label>Email* </mat-label>
+			<mat-label>Email*</mat-label>
 			<input matInput placeholder="You expect an email joke? I have none, mail me one" formControlName="email">
 
-			<mat-error *ngIf="email?.invalid">You dummy, enter @</mat-error>
-			<!-- <mat-error *ngIf="!firstName.required">* This is required</mat-error> -->
+			<mat-error *ngIf="email?.invalid">* You dummy, enter @</mat-error>
+			<mat-error *ngIf="registerUserFormGroup.get('email')?.hasError('required')">* This is required</mat-error>
 		</mat-form-field>
 		
 		<mat-form-field class="passwordField">
-			<mat-label>Password* </mat-label>
+			<mat-label>Password*</mat-label>
 			<input matInput type="password" placeholder="Make sure it's long & strong(just like my d***)" formControlName="password">
 
 			<mat-hint align="end">You must have at least one number</mat-hint>
-			<mat-error *ngIf="password?.invalid">Min length of 5</mat-error>
-			<!-- <mat-error *ngIf="!firstName.required">* This is required</mat-error> -->
+			<mat-error *ngIf="password?.invalid">* Min length of 5</mat-error>
+			<mat-error *ngIf="registerUserFormGroup.get('password')?.hasError('required')">* This is required</mat-error>
 		</mat-form-field>
 		<hr>
 		<button mat-button class="submit-btn" type="submit">Submit</button>
diff --git a/src/DevHive.Angular/src/app/services/feed.service.spec.ts b/src/DevHive.Angular/src/app/services/feed.service.spec.ts
new file mode 100644
index 0000000..656b960
--- /dev/null
+++ b/src/DevHive.Angular/src/app/services/feed.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { FeedService } from './feed.service';
+
+describe('FeedService', () => {
+  let service: FeedService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(FeedService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/DevHive.Angular/src/app/services/feed.service.ts b/src/DevHive.Angular/src/app/services/feed.service.ts
new file mode 100644
index 0000000..23284b9
--- /dev/null
+++ b/src/DevHive.Angular/src/app/services/feed.service.ts
@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FeedService {
+
+  constructor() { }
+}
diff --git a/src/DevHive.Angular/src/app/services/login.service.spec.ts b/src/DevHive.Angular/src/app/services/login.service.spec.ts
new file mode 100644
index 0000000..299b0d5
--- /dev/null
+++ b/src/DevHive.Angular/src/app/services/login.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { LoginService } from './login.service';
+
+describe('LoginService', () => {
+  let service: LoginService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(LoginService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/DevHive.Angular/src/app/services/login.service.ts b/src/DevHive.Angular/src/app/services/login.service.ts
new file mode 100644
index 0000000..92c777e
--- /dev/null
+++ b/src/DevHive.Angular/src/app/services/login.service.ts
@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LoginService {
+
+  constructor() { }
+}
diff --git a/src/DevHive.Angular/src/assets/images/feed/chat-pic.png b/src/DevHive.Angular/src/assets/images/feed/chat-pic.png
new file mode 100644
index 0000000..60241fa
--- /dev/null
+++ b/src/DevHive.Angular/src/assets/images/feed/chat-pic.png
diff --git a/src/DevHive.Angular/src/assets/images/feed/profile-pic.png b/src/DevHive.Angular/src/assets/images/feed/profile-pic.png
new file mode 100644
index 0000000..87f67f5
--- /dev/null
+++ b/src/DevHive.Angular/src/assets/images/feed/profile-pic.png
diff --git a/src/DevHive.Angular/src/models/identity/user.ts b/src/DevHive.Angular/src/models/identity/user.ts
index 7fcda42..e16c908 100644
--- a/src/DevHive.Angular/src/models/identity/user.ts
+++ b/src/DevHive.Angular/src/models/identity/user.ts
@@ -1,15 +1,52 @@
 import { Guid } from "guid-typescript";
 
 export class User {
-	private id: Guid;
-	private userName: string;
-	private firstName: string;
-	private lastName: string;
+	private _id : Guid;
+	private _lastName : string;
+	private _firstName : string;
+	private _userName : string;
+	private _imageUrl : string;
 
-	constructor(id: Guid, userName: string, firstName: string, lastName: string) {
+	constructor(id: Guid, userName: string, firstName: string, lastName: string, imageUrl: string) {
 		this.id = id;
 		this.userName = userName;
 		this.firstName = firstName;
 		this.lastName = lastName;
 	}
+
+	
+	public get id() : Guid {
+		return this._id;
+	}
+	public set id(v : Guid) {
+		this._id = v;
+	}
+	
+	public get userName() : string {
+		return this._userName;
+	}
+	public set userName(v : string) {
+		this._userName = v;
+	}
+	
+	public get firstName() : string {
+		return this._firstName;
+	}
+	public set firstName(v : string) {
+		this._firstName = v;
+	}
+	
+	public get lastName() : string {
+		return this._lastName;
+	}
+	public set lastName(v: string) {
+		this._lastName = v;
+	}
+	
+	public get imageUrl() : string {
+		return this._imageUrl;
+	}
+	public set imageUrl(v : string) {
+		this._imageUrl = v;
+	}
 }
diff --git a/src/DevHive.Angular/src/test.ts b/src/DevHive.Angular/src/test.ts
deleted file mode 100644
index 50193eb..0000000
--- a/src/DevHive.Angular/src/test.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import 'zone.js/dist/zone-testing';
-import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
-
-declare const require: {
-  context(path: string, deep?: boolean, filter?: RegExp): {
-    keys(): string[];
-    <T>(id: string): T;
-  };
-};
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
-);
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);
diff --git a/src/DevHive.Angular/src/theme.scss b/src/DevHive.Angular/src/theme.scss
new file mode 100644
index 0000000..a87ae45
--- /dev/null
+++ b/src/DevHive.Angular/src/theme.scss
@@ -0,0 +1,14 @@
+// Import theming functions
+@import '~@angular/material/theming';
+@import './styles.css';
+@include mat-core();
+
+// Custom Angular theme
+
+// $my-custom-primary: mat-palette($mat-deep-purple);
+// $my-custom-accent: mat-palette($mat-pink, 100, 500, A100);
+// $my-custom-warn: mat-palette($mat-lime);
+
+// $my-custom-theme: mat-light-theme($my-custom-primary, $my-custom-accent, $my-custom-warn);
+
+// @include angular-material-theme($my-custom-theme);
\ No newline at end of file