;
+ let modalSpy;
+ let modalCtrlSpy;
+ beforeEach(async(() => {
+ modalSpy = jasmine.createSpyObj('Modal', ['present']);
+ modalCtrlSpy = jasmine.createSpyObj('ModalController', ['create']);
+ modalCtrlSpy.create.and.callFake(function () {
+ return modalSpy;
+ });
+
+ TestBed.configureTestingModule({
+ providers: [
+ {
+ provide: ModalController,
+ useValue: modalCtrlSpy
+ }
+ ],
+ declarations: [ AuthMenuButtonComponent ],
+ schemas: [CUSTOM_ELEMENTS_SCHEMA],
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(AuthMenuButtonComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/udagram-frontend/src/app/auth/auth-menu-button/auth-menu-button.component.ts b/udagram-frontend/src/app/auth/auth-menu-button/auth-menu-button.component.ts
new file mode 100755
index 0000000..0b1cd31
--- /dev/null
+++ b/udagram-frontend/src/app/auth/auth-menu-button/auth-menu-button.component.ts
@@ -0,0 +1,48 @@
+import { Component, OnInit } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+import { AuthMenuUserComponent } from './auth-menu-user/auth-menu-user.component';
+
+import { AuthService } from '../services/auth.service';
+import { AuthLoginComponent } from '../auth-login/auth-login.component';
+import { AuthRegisterComponent } from '../auth-register/auth-register.component';
+
+@Component({
+ selector: 'app-auth-menu-button',
+ templateUrl: './auth-menu-button.component.html',
+ styleUrls: ['./auth-menu-button.component.scss'],
+})
+export class AuthMenuButtonComponent implements OnInit {
+
+ constructor(
+ private auth: AuthService,
+ public modalController: ModalController
+ ) {}
+
+ async presentmodal(ev: any) {
+ const modal = await this.modalController.create({
+ component: AuthMenuUserComponent,
+ });
+ return await modal.present();
+ }
+
+ async presentLogin(ev: any) {
+ const modal = await this.modalController.create({
+ component: AuthLoginComponent,
+ });
+ return await modal.present();
+ }
+
+ async presentRegister(ev: any) {
+ const modal = await this.modalController.create({
+ component: AuthRegisterComponent,
+ });
+ return await modal.present();
+ }
+
+ logout() {
+ this.auth.logout();
+ }
+
+ ngOnInit() {}
+
+}
diff --git a/udagram-frontend/src/app/auth/auth-menu-button/auth-menu-user/auth-menu-user.component.html b/udagram-frontend/src/app/auth/auth-menu-button/auth-menu-user/auth-menu-user.component.html
new file mode 100755
index 0000000..e0eac1a
--- /dev/null
+++ b/udagram-frontend/src/app/auth/auth-menu-button/auth-menu-user/auth-menu-user.component.html
@@ -0,0 +1,5 @@
+Dismiss
+
+
+ auth-menu-user works!
+
diff --git a/udagram-frontend/src/app/auth/auth-menu-button/auth-menu-user/auth-menu-user.component.scss b/udagram-frontend/src/app/auth/auth-menu-button/auth-menu-user/auth-menu-user.component.scss
new file mode 100755
index 0000000..e69de29
diff --git a/udagram-frontend/src/app/auth/auth-menu-button/auth-menu-user/auth-menu-user.component.spec.ts b/udagram-frontend/src/app/auth/auth-menu-button/auth-menu-user/auth-menu-user.component.spec.ts
new file mode 100755
index 0000000..7fe48ad
--- /dev/null
+++ b/udagram-frontend/src/app/auth/auth-menu-button/auth-menu-user/auth-menu-user.component.spec.ts
@@ -0,0 +1,42 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AuthMenuUserComponent } from './auth-menu-user.component';
+import { ModalController } from '@ionic/angular';
+
+describe('AuthMenuUserPage', () => {
+ let component: AuthMenuUserComponent;
+ let fixture: ComponentFixture;
+ let modalSpy;
+ let modalCtrlSpy;
+
+ beforeEach(async(() => {
+ modalSpy = jasmine.createSpyObj('Modal', ['dismiss']);
+ modalCtrlSpy = jasmine.createSpyObj('ModalController', ['create']);
+ modalCtrlSpy.create.and.callFake(function () {
+ return modalSpy;
+ });
+
+ TestBed.configureTestingModule({
+ providers: [
+ {
+ provide: ModalController,
+ useValue: modalCtrlSpy
+ }
+ ],
+ declarations: [ AuthMenuUserComponent ],
+ schemas: [CUSTOM_ELEMENTS_SCHEMA],
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(AuthMenuUserComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/udagram-frontend/src/app/auth/auth-menu-button/auth-menu-user/auth-menu-user.component.ts b/udagram-frontend/src/app/auth/auth-menu-button/auth-menu-user/auth-menu-user.component.ts
new file mode 100755
index 0000000..2f602a7
--- /dev/null
+++ b/udagram-frontend/src/app/auth/auth-menu-button/auth-menu-user/auth-menu-user.component.ts
@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+
+@Component({
+ selector: 'app-auth-menu-user',
+ templateUrl: './auth-menu-user.component.html',
+ styleUrls: ['./auth-menu-user.component.scss'],
+})
+export class AuthMenuUserComponent implements OnInit {
+
+ constructor(private modalCtrl: ModalController) { }
+
+ ngOnInit() {}
+
+ dismissModal() {
+ this.modalCtrl.dismiss();
+ }
+}
diff --git a/udagram-frontend/src/app/auth/auth-register/auth-register.component.html b/udagram-frontend/src/app/auth/auth-register/auth-register.component.html
new file mode 100755
index 0000000..66d58ca
--- /dev/null
+++ b/udagram-frontend/src/app/auth/auth-register/auth-register.component.html
@@ -0,0 +1,25 @@
+
+
\ No newline at end of file
diff --git a/udagram-frontend/src/app/auth/auth-register/auth-register.component.scss b/udagram-frontend/src/app/auth/auth-register/auth-register.component.scss
new file mode 100755
index 0000000..e69de29
diff --git a/udagram-frontend/src/app/auth/auth-register/auth-register.component.spec.ts b/udagram-frontend/src/app/auth/auth-register/auth-register.component.spec.ts
new file mode 100755
index 0000000..e45a285
--- /dev/null
+++ b/udagram-frontend/src/app/auth/auth-register/auth-register.component.spec.ts
@@ -0,0 +1,29 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { AuthRegisterComponent } from './auth-register.component';
+
+describe('AuthRegisterPage', () => {
+ let component: AuthRegisterComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ imports: [ ReactiveFormsModule ],
+ declarations: [ AuthRegisterComponent ],
+ schemas: [CUSTOM_ELEMENTS_SCHEMA],
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(AuthRegisterComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/udagram-frontend/src/app/auth/auth-register/auth-register.component.ts b/udagram-frontend/src/app/auth/auth-register/auth-register.component.ts
new file mode 100755
index 0000000..7b20c93
--- /dev/null
+++ b/udagram-frontend/src/app/auth/auth-register/auth-register.component.ts
@@ -0,0 +1,61 @@
+import { Component, OnInit } from '@angular/core';
+import { Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms';
+import { AuthService } from '../services/auth.service';
+import { User } from '../models/user.model';
+import { ModalController } from '@ionic/angular';
+
+@Component({
+ selector: 'app-auth-register',
+ templateUrl: './auth-register.component.html',
+ styleUrls: ['./auth-register.component.scss'],
+})
+export class AuthRegisterComponent implements OnInit {
+
+ registerForm: FormGroup;
+ error: string;
+
+ constructor(
+ private formBuilder: FormBuilder,
+ private auth: AuthService,
+ private modal: ModalController
+ ) { }
+
+ ngOnInit() {
+ this.registerForm = this.formBuilder.group({
+ password_confirm: new FormControl('', Validators.required),
+ password: new FormControl('', Validators.required),
+ email: new FormControl('', Validators.compose([
+ Validators.required,
+ Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
+ ])),
+ name: new FormControl('', Validators.compose([
+ Validators.required,
+ Validators.pattern('^[a-zA-Z0-9_.+-]+$')
+ ]))
+ }, { validators: this.passwordsMatch });
+ }
+
+ onSubmit($event) {
+ $event.preventDefault();
+
+ if (!this.registerForm.valid) { return; }
+
+ const newuser: User = {
+ email: this.registerForm.controls.email.value,
+ name: this.registerForm.controls.name.value
+ };
+
+ this.auth.register(newuser, this.registerForm.controls.password.value)
+ .then((user) => {
+ this.modal.dismiss();
+ })
+ .catch((e) => {
+ this.error = e.statusText;
+ throw e;
+ });
+ }
+
+ passwordsMatch(group: FormGroup) {
+ return group.controls.password.value === group.controls.password_confirm.value ? null : { passwordsMisMatch: true };
+ }
+}
diff --git a/udagram-frontend/src/app/auth/auth.module.ts b/udagram-frontend/src/app/auth/auth.module.ts
new file mode 100755
index 0000000..943f17a
--- /dev/null
+++ b/udagram-frontend/src/app/auth/auth.module.ts
@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { IonicModule } from '@ionic/angular';
+
+import { AuthMenuButtonComponent } from './auth-menu-button/auth-menu-button.component';
+import { AuthLoginComponent } from './auth-login/auth-login.component';
+import { AuthRegisterComponent } from './auth-register/auth-register.component';
+import { AuthMenuUserComponent } from './auth-menu-button/auth-menu-user/auth-menu-user.component';
+
+import { ApiModule } from '../api/api.module';
+
+const entryComponents = [AuthMenuUserComponent, AuthMenuButtonComponent, AuthLoginComponent, AuthRegisterComponent];
+const components = [...entryComponents];
+
+@NgModule({
+ imports: [
+ CommonModule,
+ FormsModule,
+ IonicModule,
+ ReactiveFormsModule,
+ ApiModule
+ ],
+ entryComponents: entryComponents,
+ declarations: components,
+ exports: components,
+ providers: []
+})
+export class AuthModule {}
diff --git a/udagram-frontend/src/app/auth/models/user.model.ts b/udagram-frontend/src/app/auth/models/user.model.ts
new file mode 100755
index 0000000..135078d
--- /dev/null
+++ b/udagram-frontend/src/app/auth/models/user.model.ts
@@ -0,0 +1,4 @@
+export interface User {
+ email: string;
+ name: string;
+}
diff --git a/udagram-frontend/src/app/auth/services/auth.guard.service.spec.ts b/udagram-frontend/src/app/auth/services/auth.guard.service.spec.ts
new file mode 100755
index 0000000..459c042
--- /dev/null
+++ b/udagram-frontend/src/app/auth/services/auth.guard.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthGuardService } from './auth.guard.service';
+import { RouterTestingModule } from '@angular/router/testing';
+
+describe('AuthGuardService', () => {
+ beforeEach(() => TestBed.configureTestingModule({
+ imports: [ RouterTestingModule ]
+ }));
+
+ it('should be created', () => {
+ const service: AuthGuardService = TestBed.get(AuthGuardService);
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/udagram-frontend/src/app/auth/services/auth.guard.service.ts b/udagram-frontend/src/app/auth/services/auth.guard.service.ts
new file mode 100755
index 0000000..2facce6
--- /dev/null
+++ b/udagram-frontend/src/app/auth/services/auth.guard.service.ts
@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import { Router, CanActivate, RouterStateSnapshot, ActivatedRouteSnapshot, UrlTree } from '@angular/router';
+import { AuthService } from './auth.service';
+import { Observable } from 'rxjs';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class AuthGuardService implements CanActivate {
+
+ constructor(
+ private auth: AuthService,
+ private router: Router
+ ) {}
+
+ canActivate(route: ActivatedRouteSnapshot,
+ state: RouterStateSnapshot): boolean
+ | UrlTree
+ | Observable
+ | Promise {
+ if (!this.auth.currentUser$.value) {
+ this.router.navigateByUrl('/login');
+ }
+
+ return this.auth.currentUser$.value !== null;
+ }
+
+}
diff --git a/udagram-frontend/src/app/auth/services/auth.service.spec.ts b/udagram-frontend/src/app/auth/services/auth.service.spec.ts
new file mode 100755
index 0000000..f3d964d
--- /dev/null
+++ b/udagram-frontend/src/app/auth/services/auth.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthService } from './auth.service';
+
+describe('AuthService', () => {
+ beforeEach(() => TestBed.configureTestingModule({}));
+
+ it('should be created', () => {
+ const service: AuthService = TestBed.get(AuthService);
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/udagram-frontend/src/app/auth/services/auth.service.ts b/udagram-frontend/src/app/auth/services/auth.service.ts
new file mode 100755
index 0000000..7f8eaf3
--- /dev/null
+++ b/udagram-frontend/src/app/auth/services/auth.service.ts
@@ -0,0 +1,59 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { User } from '../models/user.model';
+import { ApiService } from 'src/app/api/api.service';
+import { catchError, tap } from 'rxjs/operators';
+
+const JWT_LOCALSTORE_KEY = 'jwt';
+const USER_LOCALSTORE_KEY = 'user';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class AuthService {
+ currentUser$: BehaviorSubject = new BehaviorSubject(null);
+ constructor( private api: ApiService ) {
+ this.initToken();
+ }
+
+ initToken() {
+ const token = localStorage.getItem(JWT_LOCALSTORE_KEY);
+ const user = JSON.parse(localStorage.getItem(USER_LOCALSTORE_KEY));
+ if (token && user) {
+ this.setTokenAndUser(token, user);
+ }
+ }
+
+ setTokenAndUser(token: string, user: User) {
+ localStorage.setItem(JWT_LOCALSTORE_KEY, token);
+ localStorage.setItem(USER_LOCALSTORE_KEY, JSON.stringify(user));
+ this.api.setAuthToken(token);
+ this.currentUser$.next(user);
+ }
+
+ async login(email: string, password: string): Promise {
+ return this.api.post('/users/auth/login',
+ {email: email, password: password})
+ .then((res) => {
+ this.setTokenAndUser(res.token, res.user);
+ return res;
+ })
+ .catch((e) => { throw e; });
+ // return user !== undefined;
+ }
+
+ logout(): boolean {
+ this.setTokenAndUser(null, null);
+ return true;
+ }
+
+ register(user: User, password: string): Promise {
+ return this.api.post('/users/auth/',
+ {email: user.email, password: password})
+ .then((res) => {
+ this.setTokenAndUser(res.token, res.user);
+ return res;
+ })
+ .catch((e) => { throw e; });
+ }
+}
diff --git a/udagram-frontend/src/app/feed/feed-item/feed-item.component.html b/udagram-frontend/src/app/feed/feed-item/feed-item.component.html
new file mode 100755
index 0000000..13cc6ea
--- /dev/null
+++ b/udagram-frontend/src/app/feed/feed-item/feed-item.component.html
@@ -0,0 +1,6 @@
+
+
+ {{feedItem.caption}}
+
+
\ No newline at end of file
diff --git a/udagram-frontend/src/app/feed/feed-item/feed-item.component.scss b/udagram-frontend/src/app/feed/feed-item/feed-item.component.scss
new file mode 100755
index 0000000..8ec6d96
--- /dev/null
+++ b/udagram-frontend/src/app/feed/feed-item/feed-item.component.scss
@@ -0,0 +1,14 @@
+.photo-card{
+ max-width: 500px;
+ overflow: hidden;
+ background: var(--ion-color-primary-contrast);
+ margin: 30px 0px;
+ }
+
+.photo-card ion-img {
+ max-height: 532px;
+ overflow: hidden;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
diff --git a/udagram-frontend/src/app/feed/feed-item/feed-item.component.spec.ts b/udagram-frontend/src/app/feed/feed-item/feed-item.component.spec.ts
new file mode 100755
index 0000000..6224c97
--- /dev/null
+++ b/udagram-frontend/src/app/feed/feed-item/feed-item.component.spec.ts
@@ -0,0 +1,42 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FeedItemComponent } from './feed-item.component';
+import { feedItemMocks } from '../models/feed-item.model';
+
+describe('FeedItemComponent', () => {
+ let component: FeedItemComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ FeedItemComponent ],
+ schemas: [CUSTOM_ELEMENTS_SCHEMA],
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(FeedItemComponent);
+ component = fixture.componentInstance;
+ component.feedItem = feedItemMocks[0];
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('should set the image url to the feedItem', () => {
+ const app = fixture.nativeElement;
+ const img = app.querySelectorAll('ion-img');
+ expect(img.length).toEqual(1);
+ expect(img[0].src).toEqual(feedItemMocks[0].url);
+ });
+
+ it('should display the caption', () => {
+ const app = fixture.nativeElement;
+ const paragraphs = app.querySelectorAll('p');
+ expect(([].slice.call(paragraphs)).map((x) => x.innerText)).toContain(feedItemMocks[0].caption);
+ });
+});
diff --git a/udagram-frontend/src/app/feed/feed-item/feed-item.component.ts b/udagram-frontend/src/app/feed/feed-item/feed-item.component.ts
new file mode 100755
index 0000000..dd55d6e
--- /dev/null
+++ b/udagram-frontend/src/app/feed/feed-item/feed-item.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core';
+import { FeedItem } from '../models/feed-item.model';
+
+@Component({
+ selector: 'app-feed-item',
+ templateUrl: './feed-item.component.html',
+ styleUrls: ['./feed-item.component.scss'],
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class FeedItemComponent implements OnInit {
+ @Input() feedItem: FeedItem;
+
+ constructor() { }
+
+ ngOnInit() {}
+}
diff --git a/udagram-frontend/src/app/feed/feed-list/feed-list.component.html b/udagram-frontend/src/app/feed/feed-list/feed-list.component.html
new file mode 100755
index 0000000..6c10337
--- /dev/null
+++ b/udagram-frontend/src/app/feed/feed-list/feed-list.component.html
@@ -0,0 +1,6 @@
+
\ No newline at end of file
diff --git a/udagram-frontend/src/app/feed/feed-list/feed-list.component.scss b/udagram-frontend/src/app/feed/feed-list/feed-list.component.scss
new file mode 100755
index 0000000..f12b046
--- /dev/null
+++ b/udagram-frontend/src/app/feed/feed-list/feed-list.component.scss
@@ -0,0 +1,7 @@
+
+ .feed {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background: var(--ion-color-light-tint);
+ }
\ No newline at end of file
diff --git a/udagram-frontend/src/app/feed/feed-list/feed-list.component.spec.ts b/udagram-frontend/src/app/feed/feed-list/feed-list.component.spec.ts
new file mode 100755
index 0000000..6713af1
--- /dev/null
+++ b/udagram-frontend/src/app/feed/feed-list/feed-list.component.spec.ts
@@ -0,0 +1,47 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FeedListComponent } from './feed-list.component';
+import { FeedProviderService } from '../services/feed.provider.service';
+import { feedItemMocks } from '../models/feed-item.model';
+
+describe('FeedListComponent', () => {
+ let component: FeedListComponent;
+ let fixture: ComponentFixture;
+ let feedProvider: FeedProviderService;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ FeedListComponent ],
+ schemas: [CUSTOM_ELEMENTS_SCHEMA],
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(FeedListComponent);
+
+ // SET UP SPIES AND MOCKS
+ feedProvider = fixture.debugElement.injector.get(FeedProviderService);
+ // spyOn(feedProvider, 'fetch').and.returnValue(Promise.resolve(feedItemMocks));
+
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('should fetch on load', () => {
+ expect(feedProvider.getFeed).toHaveBeenCalled();
+ });
+
+ it('should display all of the fetched items', () => {
+ component.feedItems = feedItemMocks;
+ fixture.detectChanges();
+ const app = fixture.nativeElement;
+ const items = app.querySelectorAll('app-feed-item');
+ expect(items.length).toEqual(feedItemMocks.length);
+ });
+});
diff --git a/udagram-frontend/src/app/feed/feed-list/feed-list.component.ts b/udagram-frontend/src/app/feed/feed-list/feed-list.component.ts
new file mode 100755
index 0000000..bc7d022
--- /dev/null
+++ b/udagram-frontend/src/app/feed/feed-list/feed-list.component.ts
@@ -0,0 +1,30 @@
+import { Component, OnInit, Input, OnDestroy } from '@angular/core';
+import { FeedItem } from '../models/feed-item.model';
+import { FeedProviderService } from '../services/feed.provider.service';
+import { Subscription } from 'rxjs';
+
+@Component({
+ selector: 'app-feed-list',
+ templateUrl: './feed-list.component.html',
+ styleUrls: ['./feed-list.component.scss'],
+})
+export class FeedListComponent implements OnInit, OnDestroy {
+ @Input() feedItems: FeedItem[];
+ subscriptions: Subscription[] = [];
+ constructor( private feed: FeedProviderService ) { }
+
+ async ngOnInit() {
+ this.subscriptions.push(
+ this.feed.currentFeed$.subscribe((items) => {
+ this.feedItems = items;
+ }));
+
+ await this.feed.getFeed();
+ }
+
+ ngOnDestroy(): void {
+ for (const subscription of this.subscriptions) {
+ subscription.unsubscribe();
+ }
+ }
+}
diff --git a/udagram-frontend/src/app/feed/feed-upload/feed-upload-button/feed-upload-button.component.html b/udagram-frontend/src/app/feed/feed-upload/feed-upload-button/feed-upload-button.component.html
new file mode 100755
index 0000000..64197d2
--- /dev/null
+++ b/udagram-frontend/src/app/feed/feed-upload/feed-upload-button/feed-upload-button.component.html
@@ -0,0 +1,7 @@
+
+ Create a New Post
+
\ No newline at end of file
diff --git a/udagram-frontend/src/app/feed/feed-upload/feed-upload-button/feed-upload-button.component.scss b/udagram-frontend/src/app/feed/feed-upload/feed-upload-button/feed-upload-button.component.scss
new file mode 100755
index 0000000..e69de29
diff --git a/udagram-frontend/src/app/feed/feed-upload/feed-upload-button/feed-upload-button.component.spec.ts b/udagram-frontend/src/app/feed/feed-upload/feed-upload-button/feed-upload-button.component.spec.ts
new file mode 100755
index 0000000..d418676
--- /dev/null
+++ b/udagram-frontend/src/app/feed/feed-upload/feed-upload-button/feed-upload-button.component.spec.ts
@@ -0,0 +1,27 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FeedUploadButtonComponent } from './feed-upload-button.component';
+
+describe('FeedUploadButtonPage', () => {
+ let component: FeedUploadButtonComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ FeedUploadButtonComponent ],
+ schemas: [CUSTOM_ELEMENTS_SCHEMA],
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(FeedUploadButtonComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/udagram-frontend/src/app/feed/feed-upload/feed-upload-button/feed-upload-button.component.ts b/udagram-frontend/src/app/feed/feed-upload/feed-upload-button/feed-upload-button.component.ts
new file mode 100755
index 0000000..88f4ef1
--- /dev/null
+++ b/udagram-frontend/src/app/feed/feed-upload/feed-upload-button/feed-upload-button.component.ts
@@ -0,0 +1,38 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+import { FeedUploadComponent } from '../feed-upload.component';
+import { AuthService } from 'src/app/auth/services/auth.service';
+import { Subscription } from 'rxjs';
+
+@Component({
+ selector: 'app-feed-upload-button',
+ templateUrl: './feed-upload-button.component.html',
+ styleUrls: ['./feed-upload-button.component.scss'],
+})
+export class FeedUploadButtonComponent implements OnInit, OnDestroy {
+
+ isLoggedIn: boolean;
+ loginSub: Subscription;
+
+ constructor(private modalController: ModalController, private auth: AuthService) { }
+
+ ngOnInit() {
+ this.auth.currentUser$.subscribe((user) => {
+ this.isLoggedIn = user !== null;
+ });
+ }
+
+ ngOnDestroy(): void {
+ if (this.loginSub) {
+ this.loginSub.unsubscribe();
+ }
+ }
+
+ async presentUploadForm(ev: any) {
+ const modal = await this.modalController.create({
+ component: FeedUploadComponent,
+ });
+ return await modal.present();
+ }
+
+}
diff --git a/udagram-frontend/src/app/feed/feed-upload/feed-upload.component.html b/udagram-frontend/src/app/feed/feed-upload/feed-upload.component.html
new file mode 100755
index 0000000..0268f0f
--- /dev/null
+++ b/udagram-frontend/src/app/feed/feed-upload/feed-upload.component.html
@@ -0,0 +1,19 @@
+
diff --git a/udagram-frontend/src/app/feed/feed-upload/feed-upload.component.scss b/udagram-frontend/src/app/feed/feed-upload/feed-upload.component.scss
new file mode 100755
index 0000000..e69de29
diff --git a/udagram-frontend/src/app/feed/feed-upload/feed-upload.component.spec.ts b/udagram-frontend/src/app/feed/feed-upload/feed-upload.component.spec.ts
new file mode 100755
index 0000000..c0fd4c8
--- /dev/null
+++ b/udagram-frontend/src/app/feed/feed-upload/feed-upload.component.spec.ts
@@ -0,0 +1,27 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FeedUploadComponent } from './feed-upload.component';
+
+describe('FeedUploadPage', () => {
+ let component: FeedUploadComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ FeedUploadComponent ],
+ schemas: [CUSTOM_ELEMENTS_SCHEMA],
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(FeedUploadComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/udagram-frontend/src/app/feed/feed-upload/feed-upload.component.ts b/udagram-frontend/src/app/feed/feed-upload/feed-upload.component.ts
new file mode 100755
index 0000000..039a611
--- /dev/null
+++ b/udagram-frontend/src/app/feed/feed-upload/feed-upload.component.ts
@@ -0,0 +1,67 @@
+import { Component, OnInit } from '@angular/core';
+
+import { Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms';
+import { FeedProviderService } from '../services/feed.provider.service';
+
+import { LoadingController, ModalController } from '@ionic/angular';
+
+
+@Component({
+ selector: 'app-feed-upload',
+ templateUrl: './feed-upload.component.html',
+ styleUrls: ['./feed-upload.component.scss'],
+})
+export class FeedUploadComponent implements OnInit {
+ previewDataUrl;
+ file: File;
+ uploadForm: FormGroup;
+
+ constructor(
+ private feed: FeedProviderService,
+ private formBuilder: FormBuilder,
+ private loadingController: LoadingController,
+ private modalController: ModalController
+ ) { }
+
+ ngOnInit() {
+ this.uploadForm = this.formBuilder.group({
+ caption: new FormControl('', Validators.required)
+ });
+ }
+
+ setPreviewDataUrl(file: Blob) {
+ const reader = new FileReader();
+ reader.onloadend = () => {
+ this.previewDataUrl = reader.result;
+ };
+
+ reader.readAsDataURL(file);
+ }
+
+ selectImage(event) {
+ const file = event.srcElement.files;
+
+ if (!file) {
+ return;
+ }
+ this.file = file[0];
+ this.setPreviewDataUrl(this.file);
+
+ }
+
+ onSubmit($event) {
+ $event.preventDefault();
+ this.loadingController.create();
+
+ if (!this.uploadForm.valid || !this.file) { return; }
+ this.feed.uploadFeedItem(this.uploadForm.controls.caption.value, this.file)
+ .then((result) => {
+ this.modalController.dismiss();
+ this.loadingController.dismiss();
+ });
+ }
+
+ cancel() {
+ this.modalController.dismiss();
+ }
+}
diff --git a/udagram-frontend/src/app/feed/feed.module.ts b/udagram-frontend/src/app/feed/feed.module.ts
new file mode 100755
index 0000000..a14ea07
--- /dev/null
+++ b/udagram-frontend/src/app/feed/feed.module.ts
@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { IonicModule } from '@ionic/angular';
+
+import { FeedListComponent } from './feed-list/feed-list.component';
+import { FeedItemComponent } from './feed-item/feed-item.component';
+import { FeedUploadComponent } from './feed-upload/feed-upload.component';
+import { FeedUploadButtonComponent } from './feed-upload/feed-upload-button/feed-upload-button.component';
+
+import { FeedProviderService } from './services/feed.provider.service';
+
+const entryComponents = [FeedUploadComponent];
+const components = [FeedListComponent, FeedItemComponent, FeedUploadComponent, FeedUploadButtonComponent];
+
+@NgModule({
+ imports: [
+ CommonModule,
+ FormsModule,
+ IonicModule,
+ ReactiveFormsModule
+ ],
+ declarations: components,
+ exports: components,
+ entryComponents: entryComponents,
+ providers: [FeedProviderService]
+})
+export class FeedModule {}
diff --git a/udagram-frontend/src/app/feed/models/feed-item.model.ts b/udagram-frontend/src/app/feed/models/feed-item.model.ts
new file mode 100755
index 0000000..5ac4633
--- /dev/null
+++ b/udagram-frontend/src/app/feed/models/feed-item.model.ts
@@ -0,0 +1,23 @@
+export interface FeedItem {
+ id: number;
+ url: string;
+ caption: string;
+}
+
+export const feedItemMocks: FeedItem[] = [
+ {
+ id: 0,
+ url: '/assets/mock/xander0.jpg',
+ caption: 'Such a cute pup'
+ },
+ {
+ id: 0,
+ url: '/assets/mock/xander1.jpg',
+ caption: 'Who\'s a good boy?'
+ },
+ {
+ id: 0,
+ url: '/assets/mock/xander2.jpg',
+ caption: 'Majestic.'
+ }
+];
diff --git a/udagram-frontend/src/app/feed/services/feed.provider.service.spec.ts b/udagram-frontend/src/app/feed/services/feed.provider.service.spec.ts
new file mode 100755
index 0000000..39f6b12
--- /dev/null
+++ b/udagram-frontend/src/app/feed/services/feed.provider.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { FeedProviderService } from './feed.provider.service';
+
+describe('Feed.ProviderService', () => {
+ beforeEach(() => TestBed.configureTestingModule({}));
+
+ it('should be created', () => {
+ const service: FeedProviderService = TestBed.get(FeedProviderService);
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/udagram-frontend/src/app/feed/services/feed.provider.service.ts b/udagram-frontend/src/app/feed/services/feed.provider.service.ts
new file mode 100755
index 0000000..33c6799
--- /dev/null
+++ b/udagram-frontend/src/app/feed/services/feed.provider.service.ts
@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import { FeedItem, feedItemMocks } from '../models/feed-item.model';
+import { BehaviorSubject } from 'rxjs';
+
+import { ApiService } from '../../api/api.service';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class FeedProviderService {
+ currentFeed$: BehaviorSubject = new BehaviorSubject([]);
+
+ constructor(private api: ApiService) { }
+
+ async getFeed(): Promise> {
+ const req = await this.api.get('/feed');
+ const items = req.rows;
+ this.currentFeed$.next(items);
+ return Promise.resolve(this.currentFeed$);
+ }
+
+ async uploadFeedItem(caption: string, file: File): Promise {
+ const res = await this.api.upload('/feed', file, {caption: caption, url: file.name});
+ const feed = [res, ...this.currentFeed$.value];
+ this.currentFeed$.next(feed);
+ return res;
+ }
+
+}
\ No newline at end of file
diff --git a/udagram-frontend/src/app/home/home.module.ts b/udagram-frontend/src/app/home/home.module.ts
new file mode 100755
index 0000000..cacd46a
--- /dev/null
+++ b/udagram-frontend/src/app/home/home.module.ts
@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IonicModule } from '@ionic/angular';
+import { RouterModule } from '@angular/router';
+import { FeedModule } from '../feed/feed.module';
+import { HomePage } from './home.page';
+
+@NgModule({
+ imports: [
+ FeedModule,
+ CommonModule,
+ FormsModule,
+ IonicModule,
+ RouterModule.forChild([
+ {
+ path: '',
+ component: HomePage
+ }
+ ])
+ ],
+ declarations: [HomePage]
+})
+export class HomePageModule {}
diff --git a/udagram-frontend/src/app/home/home.page.html b/udagram-frontend/src/app/home/home.page.html
new file mode 100755
index 0000000..b8934ae
--- /dev/null
+++ b/udagram-frontend/src/app/home/home.page.html
@@ -0,0 +1,4 @@
+
+
diff --git a/udagram-frontend/src/app/home/home.page.scss b/udagram-frontend/src/app/home/home.page.scss
new file mode 100755
index 0000000..e69de29
diff --git a/udagram-frontend/src/app/home/home.page.spec.ts b/udagram-frontend/src/app/home/home.page.spec.ts
new file mode 100755
index 0000000..4935667
--- /dev/null
+++ b/udagram-frontend/src/app/home/home.page.spec.ts
@@ -0,0 +1,28 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomePage } from './home.page';
+
+describe('HomePage', () => {
+ let component: HomePage;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ HomePage ],
+ schemas: [CUSTOM_ELEMENTS_SCHEMA],
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(HomePage);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+});
diff --git a/udagram-frontend/src/app/home/home.page.ts b/udagram-frontend/src/app/home/home.page.ts
new file mode 100755
index 0000000..ff86e81
--- /dev/null
+++ b/udagram-frontend/src/app/home/home.page.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { environment } from '../../environments/environment';
+
+@Component({
+ selector: 'app-home',
+ templateUrl: 'home.page.html',
+ styleUrls: ['home.page.scss'],
+})
+export class HomePage {
+ appName = environment.appName;
+}
diff --git a/udagram-frontend/src/app/menubar/menubar.component.html b/udagram-frontend/src/app/menubar/menubar.component.html
new file mode 100755
index 0000000..68dc329
--- /dev/null
+++ b/udagram-frontend/src/app/menubar/menubar.component.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+ {{ appName }}
+
+
+
+
+
\ No newline at end of file
diff --git a/udagram-frontend/src/app/menubar/menubar.component.scss b/udagram-frontend/src/app/menubar/menubar.component.scss
new file mode 100755
index 0000000..4dcab3e
--- /dev/null
+++ b/udagram-frontend/src/app/menubar/menubar.component.scss
@@ -0,0 +1,5 @@
+ion-title {
+ font-weight: bold;
+ font-family: 'Dancing Script', cursive;
+ font-size: 180%;
+ }
\ No newline at end of file
diff --git a/udagram-frontend/src/app/menubar/menubar.component.spec.ts b/udagram-frontend/src/app/menubar/menubar.component.spec.ts
new file mode 100755
index 0000000..b9a82ea
--- /dev/null
+++ b/udagram-frontend/src/app/menubar/menubar.component.spec.ts
@@ -0,0 +1,36 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MenubarComponent } from './menubar.component';
+import { environment } from '../../environments/environment';
+
+
+describe('MenubarPage', () => {
+ let component: MenubarComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ MenubarComponent ],
+ schemas: [CUSTOM_ELEMENTS_SCHEMA],
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(MenubarComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('title should be enviornment.AppTitle', () => {
+ const app = fixture.nativeElement;
+ const title = app.querySelectorAll('ion-title');
+ expect(title.length).toEqual(1);
+ expect(title[0].innerText).toEqual(environment.appName);
+ });
+});
diff --git a/udagram-frontend/src/app/menubar/menubar.component.ts b/udagram-frontend/src/app/menubar/menubar.component.ts
new file mode 100755
index 0000000..41fcbe5
--- /dev/null
+++ b/udagram-frontend/src/app/menubar/menubar.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+import { environment } from '../../environments/environment';
+
+@Component({
+ selector: 'app-menubar',
+ templateUrl: './menubar.component.html',
+ styleUrls: ['./menubar.component.scss'],
+})
+export class MenubarComponent implements OnInit {
+ public appName = environment.appName;
+
+ constructor() { }
+
+ ngOnInit() {}
+
+}
diff --git a/udagram-frontend/src/assets/icon/favicon.png b/udagram-frontend/src/assets/icon/favicon.png
new file mode 100755
index 0000000..51888a7
Binary files /dev/null and b/udagram-frontend/src/assets/icon/favicon.png differ
diff --git a/udagram-frontend/src/assets/shapes.svg b/udagram-frontend/src/assets/shapes.svg
new file mode 100755
index 0000000..d370b4d
--- /dev/null
+++ b/udagram-frontend/src/assets/shapes.svg
@@ -0,0 +1 @@
+