Added services; Tweeked register

15 files changed, 322 insertions, 3 deletions

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..bb3fbbb 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-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..7715234
--- /dev/null
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.css
@@ -0,0 +1,109 @@
+#feed {
+	max-width: 50%;
+	margin-left: auto;
+	margin-right: auto;
+}
+	
+.post {
+	margin: 1em 0;
+}
+	
+.post-content {
+	background-color: var(--dark-blue);
+	border: 2px solid var(--orange);
+	border-radius: 0.5em;
+	padding: 0.6em;
+	overflow: hidden;
+	display: flex;
+}
+	
+.author {
+	margin-bottom: 0.5em;
+	display: flex;
+	position: relative;
+}
+	
+.profile-picture {
+	height: 2.1em;
+	width: 2.1em;
+	border-radius: 50%;
+	margin-right: 0.5em;
+	object-fit: cover;
+}
+	
+.author-info > .name {
+	font-weight: bold;
+}
+	
+.author-info > .handle {
+	font-size: 0.9em;
+}
+	
+.post-content > .rating {
+	margin-left: auto;
+	display: flex;
+	align-items: center;
+	flex-direction: column;
+}
+	
+.timestamp {
+	font-size: 0.5em;
+	color: var(--gray);
+	padding-top: 0.8em;
+}
+	
+.score {
+	margin-top: auto;
+	margin-bottom: auto;
+}
+	
+.attachments {
+	position: relative;
+	z-index: -1;
+	display: flex;
+}
+	
+.attachment {
+	background-color: var(--dark-blue);
+	border: 1px solid var(--orange);
+	border-bottom-width: 2px;
+	border-radius: 0 0 0.5em 0.5em;
+	padding: 0.5em;
+	margin-top: -0.6em;
+	padding-top: 1em;
+	flex: 1;
+	display: flex;
+	overflow: hidden;
+}
+	
+.attachment:nth-of-type(1) {
+	border-left-width: 2px;
+}
+	
+.attachment:nth-last-of-type(1) {
+	border-right-width: 2px;
+}
+	
+.filename {
+	font-style: italic;
+	text-shadow: 0.1em 0.1em 0.1em black;
+}
+	
+.file-picture {
+	height: 1.9em;
+	width: 1.9em;
+	object-fit: cover;
+	margin-left: auto;
+}
+	
+.info-reminder {
+	font-size: 0.5em;
+	color: var(--gray);
+	padding-top: 0.2em;
+	align-self: flex-end;
+}
+	
+.loading-more {
+	text-align: center;
+}
+	
\ 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..96864c7
--- /dev/null
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.html
@@ -0,0 +1,107 @@
+<div id="feed">
+	<ul>
+		<li *ngFor="let post of posts; let c = count;">
+			<h1> {{ c }} post</h1>
+			<!-- <app-post class="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>
\ No newline at end of file
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..a0efd17
--- /dev/null
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.ts
@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+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 {
+  public posts: PostComponent[] = [ ];
+
+  constructor(private service: FeedService) { }
+
+  ngOnInit(): void {
+  }
+}
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..e69de29
--- /dev/null
+++ b/src/DevHive.Angular/src/app/components/post/post.component.css
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..71b500c
--- /dev/null
+++ b/src/DevHive.Angular/src/app/components/post/post.component.html
@@ -0,0 +1 @@
+<p>post works!</p>
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..c61410b
--- /dev/null
+++ b/src/DevHive.Angular/src/app/components/post/post.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-post',
+  templateUrl: './post.component.html',
+  styleUrls: ['./post.component.css']
+})
+export class PostComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
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..837f812 100644
--- a/src/DevHive.Angular/src/app/components/register/register.component.html
+++ b/src/DevHive.Angular/src/app/components/register/register.component.html
@@ -11,7 +11,7 @@
 			<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.getError('required')">* This is required</mat-error>
 		</mat-form-field>
 		
 		<mat-form-field class="lastNameField">
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/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