;
11 | let modalSpy;
12 | let modalCtrlSpy;
13 | beforeEach(async(() => {
14 | modalSpy = jasmine.createSpyObj('Modal', ['present']);
15 | modalCtrlSpy = jasmine.createSpyObj('ModalController', ['create']);
16 | modalCtrlSpy.create.and.callFake(function () {
17 | return modalSpy;
18 | });
19 |
20 | TestBed.configureTestingModule({
21 | providers: [
22 | {
23 | provide: ModalController,
24 | useValue: modalCtrlSpy
25 | }
26 | ],
27 | declarations: [ AuthMenuButtonComponent ],
28 | schemas: [CUSTOM_ELEMENTS_SCHEMA],
29 | })
30 | .compileComponents();
31 | }));
32 |
33 | beforeEach(() => {
34 | fixture = TestBed.createComponent(AuthMenuButtonComponent);
35 | component = fixture.componentInstance;
36 | fixture.detectChanges();
37 | });
38 |
39 | it('should create', () => {
40 | expect(component).toBeTruthy();
41 | });
42 | });
43 |
--------------------------------------------------------------------------------
/udagram-frontend/src/app/auth/auth-menu-button/auth-menu-button.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { IonicModule, ModalController } from '@ionic/angular';
3 | import { CommonModule } from '@angular/common';
4 | import { AuthMenuUserComponent } from './auth-menu-user/auth-menu-user.component';
5 | import { AuthService } from '../services/auth.service';
6 | import { AuthLoginComponent } from '../auth-login/auth-login.component';
7 | import { AuthRegisterComponent } from '../auth-register/auth-register.component';
8 |
9 | @Component({
10 | selector: 'app-auth-menu-button',
11 | templateUrl: './auth-menu-button.component.html',
12 | styleUrls: ['./auth-menu-button.component.scss'],
13 | standalone: true,
14 | imports: [
15 | IonicModule,
16 | CommonModule
17 | ]
18 | })
19 | export class AuthMenuButtonComponent {
20 | constructor(
21 | public auth: AuthService,
22 | public modalController: ModalController
23 | ) {}
24 |
25 | async presentmodal() {
26 | const modal = await this.modalController.create({
27 | component: AuthMenuUserComponent,
28 | });
29 | return await modal.present();
30 | }
31 |
32 | async presentLogin() {
33 | const modal = await this.modalController.create({
34 | component: AuthLoginComponent,
35 | });
36 | return await modal.present();
37 | }
38 |
39 | async presentRegister() {
40 | const modal = await this.modalController.create({
41 | component: AuthRegisterComponent,
42 | });
43 | return await modal.present();
44 | }
45 |
46 | logout() {
47 | this.auth.logout();
48 | }
49 | }
--------------------------------------------------------------------------------
/udagram-frontend/src/app/auth/auth-menu-button/auth-menu-user/auth-menu-user.component.html:
--------------------------------------------------------------------------------
1 | Dismiss
2 |
3 |
4 | auth-menu-user works!
5 |
6 |
--------------------------------------------------------------------------------
/udagram-frontend/src/app/auth/auth-menu-button/auth-menu-user/auth-menu-user.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/udacity/cd0354-monolith-to-microservices-project/eb4b5a2565773ef192e23b370bb51b841ab2257f/udagram-frontend/src/app/auth/auth-menu-button/auth-menu-user/auth-menu-user.component.scss
--------------------------------------------------------------------------------
/udagram-frontend/src/app/auth/auth-menu-button/auth-menu-user/auth-menu-user.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
3 |
4 | import { AuthMenuUserComponent } from './auth-menu-user.component';
5 | import { ModalController } from '@ionic/angular';
6 |
7 | describe('AuthMenuUserPage', () => {
8 | let component: AuthMenuUserComponent;
9 | let fixture: ComponentFixture;
10 | let modalSpy;
11 | let modalCtrlSpy;
12 |
13 | beforeEach(async(() => {
14 | modalSpy = jasmine.createSpyObj('Modal', ['dismiss']);
15 | modalCtrlSpy = jasmine.createSpyObj('ModalController', ['create']);
16 | modalCtrlSpy.create.and.callFake(function () {
17 | return modalSpy;
18 | });
19 |
20 | TestBed.configureTestingModule({
21 | providers: [
22 | {
23 | provide: ModalController,
24 | useValue: modalCtrlSpy
25 | }
26 | ],
27 | declarations: [ AuthMenuUserComponent ],
28 | schemas: [CUSTOM_ELEMENTS_SCHEMA],
29 | })
30 | .compileComponents();
31 | }));
32 |
33 | beforeEach(() => {
34 | fixture = TestBed.createComponent(AuthMenuUserComponent);
35 | component = fixture.componentInstance;
36 | fixture.detectChanges();
37 | });
38 |
39 | it('should create', () => {
40 | expect(component).toBeTruthy();
41 | });
42 | });
43 |
--------------------------------------------------------------------------------
/udagram-frontend/src/app/auth/auth-menu-button/auth-menu-user/auth-menu-user.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { IonicModule, ModalController } from '@ionic/angular';
3 | import { CommonModule } from '@angular/common';
4 |
5 | @Component({
6 | selector: 'app-auth-menu-user',
7 | templateUrl: './auth-menu-user.component.html',
8 | styleUrls: ['./auth-menu-user.component.scss'],
9 | standalone: true,
10 | imports: [
11 | IonicModule,
12 | CommonModule
13 | ]
14 | })
15 | export class AuthMenuUserComponent {
16 | constructor(private modalCtrl: ModalController) { }
17 |
18 | dismissModal() {
19 | this.modalCtrl.dismiss();
20 | }
21 | }
--------------------------------------------------------------------------------
/udagram-frontend/src/app/auth/auth-register/auth-register.component.html:
--------------------------------------------------------------------------------
1 |
25 |
--------------------------------------------------------------------------------
/udagram-frontend/src/app/auth/auth-register/auth-register.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/udacity/cd0354-monolith-to-microservices-project/eb4b5a2565773ef192e23b370bb51b841ab2257f/udagram-frontend/src/app/auth/auth-register/auth-register.component.scss
--------------------------------------------------------------------------------
/udagram-frontend/src/app/auth/auth-register/auth-register.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
3 | import { FormsModule, ReactiveFormsModule } from '@angular/forms';
4 |
5 | import { AuthRegisterComponent } from './auth-register.component';
6 |
7 | describe('AuthRegisterPage', () => {
8 | let component: AuthRegisterComponent;
9 | let fixture: ComponentFixture;
10 |
11 | beforeEach(async(() => {
12 | TestBed.configureTestingModule({
13 | imports: [ ReactiveFormsModule ],
14 | declarations: [ AuthRegisterComponent ],
15 | schemas: [CUSTOM_ELEMENTS_SCHEMA],
16 | })
17 | .compileComponents();
18 | }));
19 |
20 | beforeEach(() => {
21 | fixture = TestBed.createComponent(AuthRegisterComponent);
22 | component = fixture.componentInstance;
23 | fixture.detectChanges();
24 | });
25 |
26 | it('should create', () => {
27 | expect(component).toBeTruthy();
28 | });
29 | });
30 |
--------------------------------------------------------------------------------
/udagram-frontend/src/app/auth/auth-register/auth-register.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { FormBuilder, FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
3 | import { IonicModule, ModalController } from '@ionic/angular';
4 | import { CommonModule } from '@angular/common';
5 | import { AuthService } from '../services/auth.service';
6 | import { User } from '../models/user.model';
7 |
8 | @Component({
9 | selector: 'app-auth-register',
10 | templateUrl: './auth-register.component.html',
11 | styleUrls: ['./auth-register.component.scss'],
12 | standalone: true,
13 | imports: [
14 | IonicModule,
15 | CommonModule,
16 | ReactiveFormsModule
17 | ]
18 | })
19 | export class AuthRegisterComponent implements OnInit {
20 | registerForm!: FormGroup;
21 | error: string = '';
22 |
23 | constructor(
24 | private formBuilder: FormBuilder,
25 | private auth: AuthService,
26 | private modal: ModalController
27 | ) { }
28 |
29 | ngOnInit() {
30 | this.registerForm = this.formBuilder.group({
31 | password_confirm: new FormControl('', Validators.required),
32 | password: new FormControl('', Validators.required),
33 | email: new FormControl('', Validators.compose([
34 | Validators.required,
35 | Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
36 | ])),
37 | name: new FormControl('', Validators.compose([
38 | Validators.required,
39 | Validators.pattern('^[a-zA-Z0-9_.+-]+$')
40 | ]))
41 | }, { validators: this.passwordsMatch });
42 | }
43 |
44 | onSubmit($event: Event) {
45 | $event.preventDefault();
46 |
47 | if (!this.registerForm.valid) { return; }
48 |
49 | const newuser: User = {
50 | email: this.registerForm.controls['email'].value,
51 | name: this.registerForm.controls['name'].value
52 | };
53 |
54 | this.auth.register(newuser, this.registerForm.controls['password'].value)
55 | .then((user) => {
56 | this.modal.dismiss();
57 | })
58 | .catch((e) => {
59 | this.error = e.statusText;
60 | throw e;
61 | });
62 | }
63 |
64 | passwordsMatch(group: FormGroup) {
65 | return group.controls['password'].value === group.controls['password_confirm'].value
66 | ? null
67 | : { passwordsMisMatch: true };
68 | }
69 | }
--------------------------------------------------------------------------------
/udagram-frontend/src/app/auth/models/user.model.ts:
--------------------------------------------------------------------------------
1 | export interface User {
2 | email: string;
3 | name: string;
4 | }
5 |
--------------------------------------------------------------------------------
/udagram-frontend/src/app/auth/services/auth.guard.service.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 |
3 | import { AuthGuardService } from './auth.guard.service';
4 | import { RouterTestingModule } from '@angular/router/testing';
5 |
6 | describe('AuthGuardService', () => {
7 | beforeEach(() => TestBed.configureTestingModule({
8 | imports: [ RouterTestingModule ]
9 | }));
10 |
11 | it('should be created', () => {
12 | const service: AuthGuardService = TestBed.get(AuthGuardService);
13 | expect(service).toBeTruthy();
14 | });
15 | });
16 |
--------------------------------------------------------------------------------
/udagram-frontend/src/app/auth/services/auth.guard.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { Router, CanActivate, RouterStateSnapshot, ActivatedRouteSnapshot, UrlTree } from '@angular/router';
3 | import { AuthService } from './auth.service';
4 | import { Observable } from 'rxjs';
5 |
6 | @Injectable({
7 | providedIn: 'root'
8 | })
9 | export class AuthGuardService implements CanActivate {
10 |
11 | constructor(
12 | private auth: AuthService,
13 | private router: Router
14 | ) {}
15 |
16 | canActivate(route: ActivatedRouteSnapshot,
17 | state: RouterStateSnapshot): boolean
18 | | UrlTree
19 | | Observable
21 | | Promise {
22 | if (!this.auth.currentUser$.value) {
23 | this.router.navigateByUrl('/login');
24 | }
25 |
26 | return this.auth.currentUser$.value !== null;
27 | }
28 |
29 | }
30 |
--------------------------------------------------------------------------------
/udagram-frontend/src/app/auth/services/auth.service.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 |
3 | import { AuthService } from './auth.service';
4 |
5 | describe('AuthService', () => {
6 | beforeEach(() => TestBed.configureTestingModule({}));
7 |
8 | it('should be created', () => {
9 | const service: AuthService = TestBed.get(AuthService);
10 | expect(service).toBeTruthy();
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/udagram-frontend/src/app/auth/services/auth.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { BehaviorSubject, Observable } from 'rxjs';
3 | import { User } from '../models/user.model';
4 | import { ApiService } from 'src/app/api/api.service';
5 | import { catchError, tap } from 'rxjs/operators';
6 |
7 | const JWT_LOCALSTORE_KEY = 'jwt';
8 | const USER_LOCALSTORE_KEY = 'user';
9 |
10 | @Injectable({
11 | providedIn: 'root'
12 | })
13 | export class AuthService {
14 | currentUser$: BehaviorSubject = new BehaviorSubject(null);
15 | constructor( private api: ApiService ) {
16 | this.initToken();
17 | }
18 |
19 | initToken() {
20 | const token = localStorage.getItem(JWT_LOCALSTORE_KEY);
21 | const user = JSON.parse(localStorage.getItem(USER_LOCALSTORE_KEY));
22 | if (token && user) {
23 | this.setTokenAndUser(token, user);
24 | }
25 | }
26 |
27 | setTokenAndUser(token: string, user: User) {
28 | localStorage.setItem(JWT_LOCALSTORE_KEY, token);
29 | localStorage.setItem(USER_LOCALSTORE_KEY, JSON.stringify(user));
30 | this.api.setAuthToken(token);
31 | this.currentUser$.next(user);
32 | }
33 |
34 | async login(email: string, password: string): Promise {
35 | return this.api.post('/users/auth/login',
36 | {email: email, password: password})
37 | .then((res) => {
38 | this.setTokenAndUser(res.token, res.user);
39 | return res;
40 | })
41 | .catch((e) => { throw e; });
42 | // return user !== undefined;
43 | }
44 |
45 | logout(): boolean {
46 | this.setTokenAndUser(null, null);
47 | return true;
48 | }
49 |
50 | register(user: User, password: string): Promise {
51 | return this.api.post('/users/auth/',
52 | {email: user.email, password: password})
53 | .then((res) => {
54 | this.setTokenAndUser(res.token, res.user);
55 | return res;
56 | })
57 | .catch((e) => { throw e; });
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/udagram-frontend/src/app/feed/feed-item/feed-item.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | {{feedItem.caption}}
5 |
6 |
--------------------------------------------------------------------------------
/udagram-frontend/src/app/feed/feed-item/feed-item.component.scss:
--------------------------------------------------------------------------------
1 | .photo-card{
2 | max-width: 500px;
3 | overflow: hidden;
4 | background: var(--ion-color-primary-contrast);
5 | margin: 30px 0px;
6 | }
7 |
8 | .photo-card ion-img {
9 | max-height: 532px;
10 | overflow: hidden;
11 | display: flex;
12 | justify-content: center;
13 | align-items: center;
14 | }
15 |
--------------------------------------------------------------------------------
/udagram-frontend/src/app/feed/feed-item/feed-item.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
3 |
4 | import { FeedItemComponent } from './feed-item.component';
5 | import { feedItemMocks } from '../models/feed-item.model';
6 |
7 | describe('FeedItemComponent', () => {
8 | let component: FeedItemComponent;
9 | let fixture: ComponentFixture;
10 |
11 | beforeEach(async(() => {
12 | TestBed.configureTestingModule({
13 | declarations: [ FeedItemComponent ],
14 | schemas: [CUSTOM_ELEMENTS_SCHEMA],
15 | })
16 | .compileComponents();
17 | }));
18 |
19 | beforeEach(() => {
20 | fixture = TestBed.createComponent(FeedItemComponent);
21 | component = fixture.componentInstance;
22 | component.feedItem = feedItemMocks[0];
23 | fixture.detectChanges();
24 | });
25 |
26 | it('should create', () => {
27 | expect(component).toBeTruthy();
28 | });
29 |
30 | it('should set the image url to the feedItem', () => {
31 | const app = fixture.nativeElement;
32 | const img = app.querySelectorAll('ion-img');
33 | expect(img.length).toEqual(1);
34 | expect(img[0].src).toEqual(feedItemMocks[0].url);
35 | });
36 |
37 | it('should display the caption', () => {
38 | const app = fixture.nativeElement;
39 | const paragraphs = app.querySelectorAll('p');
40 | expect(([].slice.call(paragraphs)).map((x) => x.innerText)).toContain(feedItemMocks[0].caption);
41 | });
42 | });
43 |
--------------------------------------------------------------------------------
/udagram-frontend/src/app/feed/feed-item/feed-item.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
2 | import { IonicModule } from '@ionic/angular';
3 | import { CommonModule } from '@angular/common';
4 | import { FeedItem } from '../models/feed-item.model';
5 |
6 | @Component({
7 | selector: 'app-feed-item',
8 | templateUrl: './feed-item.component.html',
9 | styleUrls: ['./feed-item.component.scss'],
10 | standalone: true,
11 | imports: [
12 | IonicModule,
13 | CommonModule
14 | ],
15 | changeDetection: ChangeDetectionStrategy.OnPush
16 | })
17 | export class FeedItemComponent {
18 | @Input() feedItem!: FeedItem;
19 | }
--------------------------------------------------------------------------------
/udagram-frontend/src/app/feed/feed-list/feed-list.component.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/udagram-frontend/src/app/feed/feed-list/feed-list.component.scss:
--------------------------------------------------------------------------------
1 |
2 | .feed {
3 | display: flex;
4 | flex-direction: column;
5 | align-items: center;
6 | background: var(--ion-color-light-tint);
7 | }
--------------------------------------------------------------------------------
/udagram-frontend/src/app/feed/feed-list/feed-list.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
3 |
4 | import { FeedListComponent } from './feed-list.component';
5 | import { FeedProviderService } from '../services/feed.provider.service';
6 | import { feedItemMocks } from '../models/feed-item.model';
7 |
8 | describe('FeedListComponent', () => {
9 | let component: FeedListComponent;
10 | let fixture: ComponentFixture;
11 | let feedProvider: FeedProviderService;
12 |
13 | beforeEach(async(() => {
14 | TestBed.configureTestingModule({
15 | declarations: [ FeedListComponent ],
16 | schemas: [CUSTOM_ELEMENTS_SCHEMA],
17 | })
18 | .compileComponents();
19 | }));
20 |
21 | beforeEach(() => {
22 | fixture = TestBed.createComponent(FeedListComponent);
23 |
24 | // SET UP SPIES AND MOCKS
25 | feedProvider = fixture.debugElement.injector.get(FeedProviderService);
26 | // spyOn(feedProvider, 'fetch').and.returnValue(Promise.resolve(feedItemMocks));
27 |
28 | component = fixture.componentInstance;
29 | fixture.detectChanges();
30 | });
31 |
32 | it('should create', () => {
33 | expect(component).toBeTruthy();
34 | });
35 |
36 | it('should fetch on load', () => {
37 | expect(feedProvider.getFeed).toHaveBeenCalled();
38 | });
39 |
40 | it('should display all of the fetched items', () => {
41 | component.feedItems = feedItemMocks;
42 | fixture.detectChanges();
43 | const app = fixture.nativeElement;
44 | const items = app.querySelectorAll('app-feed-item');
45 | expect(items.length).toEqual(feedItemMocks.length);
46 | });
47 | });
48 |
--------------------------------------------------------------------------------
/udagram-frontend/src/app/feed/feed-list/feed-list.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, Input, OnDestroy } from '@angular/core';
2 | import { IonicModule } from '@ionic/angular';
3 | import { CommonModule } from '@angular/common';
4 | import { FeedItem } from '../models/feed-item.model';
5 | import { FeedProviderService } from '../services/feed.provider.service';
6 | import { FeedItemComponent } from '../feed-item/feed-item.component';
7 | import { Subscription } from 'rxjs';
8 |
9 | @Component({
10 | selector: 'app-feed-list',
11 | templateUrl: './feed-list.component.html',
12 | styleUrls: ['./feed-list.component.scss'],
13 | standalone: true,
14 | imports: [
15 | IonicModule,
16 | CommonModule,
17 | FeedItemComponent
18 | ]
19 | })
20 | export class FeedListComponent implements OnInit, OnDestroy {
21 | @Input() feedItems: FeedItem[];
22 | subscriptions: Subscription[] = [];
23 |
24 | constructor(private feed: FeedProviderService) { }
25 |
26 | async ngOnInit() {
27 | this.subscriptions.push(
28 | this.feed.currentFeed$.subscribe((items) => {
29 | this.feedItems = items;
30 | })
31 | );
32 |
33 | await this.feed.getFeed();
34 | }
35 |
36 | ngOnDestroy(): void {
37 | for (const subscription of this.subscriptions) {
38 | subscription.unsubscribe();
39 | }
40 | }
41 | }
--------------------------------------------------------------------------------
/udagram-frontend/src/app/feed/feed-upload/feed-upload-button/feed-upload-button.component.html:
--------------------------------------------------------------------------------
1 |
6 | Create a New Post
7 |
--------------------------------------------------------------------------------
/udagram-frontend/src/app/feed/feed-upload/feed-upload-button/feed-upload-button.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/udacity/cd0354-monolith-to-microservices-project/eb4b5a2565773ef192e23b370bb51b841ab2257f/udagram-frontend/src/app/feed/feed-upload/feed-upload-button/feed-upload-button.component.scss
--------------------------------------------------------------------------------
/udagram-frontend/src/app/feed/feed-upload/feed-upload-button/feed-upload-button.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
3 |
4 | import { FeedUploadButtonComponent } from './feed-upload-button.component';
5 |
6 | describe('FeedUploadButtonPage', () => {
7 | let component: FeedUploadButtonComponent;
8 | let fixture: ComponentFixture;
9 |
10 | beforeEach(async(() => {
11 | TestBed.configureTestingModule({
12 | declarations: [ FeedUploadButtonComponent ],
13 | schemas: [CUSTOM_ELEMENTS_SCHEMA],
14 | })
15 | .compileComponents();
16 | }));
17 |
18 | beforeEach(() => {
19 | fixture = TestBed.createComponent(FeedUploadButtonComponent);
20 | component = fixture.componentInstance;
21 | fixture.detectChanges();
22 | });
23 |
24 | it('should create', () => {
25 | expect(component).toBeTruthy();
26 | });
27 | });
28 |
--------------------------------------------------------------------------------
/udagram-frontend/src/app/feed/feed-upload/feed-upload-button/feed-upload-button.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, OnDestroy } from '@angular/core';
2 | import { IonicModule, ModalController } from '@ionic/angular';
3 | import { CommonModule } from '@angular/common';
4 | import { FeedUploadComponent } from '../feed-upload.component';
5 | import { AuthService } from '../../../auth/services/auth.service';
6 | import { Subscription } from 'rxjs';
7 |
8 | @Component({
9 | selector: 'app-feed-upload-button',
10 | templateUrl: './feed-upload-button.component.html',
11 | styleUrls: ['./feed-upload-button.component.scss'],
12 | standalone: true,
13 | imports: [
14 | IonicModule,
15 | CommonModule
16 | ]
17 | })
18 | export class FeedUploadButtonComponent implements OnInit, OnDestroy {
19 | isLoggedIn: boolean = false;
20 | loginSub?: Subscription;
21 |
22 | constructor(
23 | private modalController: ModalController,
24 | public auth: AuthService
25 | ) { }
26 |
27 | ngOnInit() {
28 | this.loginSub = this.auth.currentUser$.subscribe((user) => {
29 | this.isLoggedIn = user !== null;
30 | });
31 | }
32 |
33 | ngOnDestroy() {
34 | this.loginSub?.unsubscribe();
35 | }
36 |
37 | async presentUploadForm() {
38 | const modal = await this.modalController.create({
39 | component: FeedUploadComponent,
40 | });
41 | return await modal.present();
42 | }
43 | }
--------------------------------------------------------------------------------
/udagram-frontend/src/app/feed/feed-upload/feed-upload.component.html:
--------------------------------------------------------------------------------
1 |
20 |
--------------------------------------------------------------------------------
/udagram-frontend/src/app/feed/feed-upload/feed-upload.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/udacity/cd0354-monolith-to-microservices-project/eb4b5a2565773ef192e23b370bb51b841ab2257f/udagram-frontend/src/app/feed/feed-upload/feed-upload.component.scss
--------------------------------------------------------------------------------
/udagram-frontend/src/app/feed/feed-upload/feed-upload.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
3 |
4 | import { FeedUploadComponent } from './feed-upload.component';
5 |
6 | describe('FeedUploadPage', () => {
7 | let component: FeedUploadComponent;
8 | let fixture: ComponentFixture;
9 |
10 | beforeEach(async(() => {
11 | TestBed.configureTestingModule({
12 | declarations: [ FeedUploadComponent ],
13 | schemas: [CUSTOM_ELEMENTS_SCHEMA],
14 | })
15 | .compileComponents();
16 | }));
17 |
18 | beforeEach(() => {
19 | fixture = TestBed.createComponent(FeedUploadComponent);
20 | component = fixture.componentInstance;
21 | fixture.detectChanges();
22 | });
23 |
24 | it('should create', () => {
25 | expect(component).toBeTruthy();
26 | });
27 | });
28 |
--------------------------------------------------------------------------------
/udagram-frontend/src/app/feed/feed-upload/feed-upload.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { FormBuilder, FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
3 | import { IonicModule, LoadingController, ModalController } from '@ionic/angular';
4 | import { CommonModule } from '@angular/common';
5 | import { FeedProviderService } from '../services/feed.provider.service';
6 |
7 | @Component({
8 | selector: 'app-feed-upload',
9 | templateUrl: './feed-upload.component.html',
10 | styleUrls: ['./feed-upload.component.scss'],
11 | standalone: true,
12 | imports: [
13 | IonicModule,
14 | CommonModule,
15 | ReactiveFormsModule
16 | ]
17 | })
18 | export class FeedUploadComponent implements OnInit {
19 | previewDataUrl: string | ArrayBuffer | null = null;
20 | file: File | null = null;
21 | uploadForm!: FormGroup;
22 |
23 | constructor(
24 | private feed: FeedProviderService,
25 | private formBuilder: FormBuilder,
26 | private loadingController: LoadingController,
27 | private modalController: ModalController
28 | ) { }
29 |
30 | ngOnInit() {
31 | this.uploadForm = this.formBuilder.group({
32 | caption: new FormControl('', Validators.required)
33 | });
34 | }
35 |
36 | setPreviewDataUrl(file: Blob) {
37 | const reader = new FileReader();
38 | reader.onloadend = () => {
39 | this.previewDataUrl = reader.result;
40 | };
41 | reader.readAsDataURL(file);
42 | }
43 |
44 | selectImage(event: Event) {
45 | const element = event.currentTarget as HTMLInputElement;
46 | const fileList: FileList | null = element.files;
47 |
48 | if (fileList) {
49 | this.file = fileList[0];
50 | this.setPreviewDataUrl(this.file);
51 | }
52 | }
53 |
54 | async onSubmit(event: Event) {
55 | event.preventDefault();
56 | const loading = await this.loadingController.create();
57 | await loading.present();
58 |
59 | if (!this.uploadForm.valid || !this.file) { return; }
60 |
61 | try {
62 | await this.feed.uploadFeedItem(this.uploadForm.controls['caption'].value, this.file);
63 | await this.modalController.dismiss();
64 | } finally {
65 | await loading.dismiss();
66 | }
67 | }
68 |
69 | cancel() {
70 | this.modalController.dismiss();
71 | }
72 | }
--------------------------------------------------------------------------------
/udagram-frontend/src/app/feed/models/feed-item.model.ts:
--------------------------------------------------------------------------------
1 | export interface FeedItem {
2 | id: number;
3 | url: string;
4 | caption: string;
5 | }
6 |
7 | export const feedItemMocks: FeedItem[] = [
8 | {
9 | id: 0,
10 | url: '/assets/mock/xander0.jpg',
11 | caption: 'Such a cute pup'
12 | },
13 | {
14 | id: 0,
15 | url: '/assets/mock/xander1.jpg',
16 | caption: 'Who\'s a good boy?'
17 | },
18 | {
19 | id: 0,
20 | url: '/assets/mock/xander2.jpg',
21 | caption: 'Majestic.'
22 | }
23 | ];
24 |
--------------------------------------------------------------------------------
/udagram-frontend/src/app/feed/services/feed.provider.service.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 |
3 | import { FeedProviderService } from './feed.provider.service';
4 |
5 | describe('Feed.ProviderService', () => {
6 | beforeEach(() => TestBed.configureTestingModule({}));
7 |
8 | it('should be created', () => {
9 | const service: FeedProviderService = TestBed.get(FeedProviderService);
10 | expect(service).toBeTruthy();
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/udagram-frontend/src/app/feed/services/feed.provider.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { FeedItem, feedItemMocks } from '../models/feed-item.model';
3 | import { BehaviorSubject } from 'rxjs';
4 |
5 | import { ApiService } from '../../api/api.service';
6 |
7 | @Injectable({
8 | providedIn: 'root'
9 | })
10 | export class FeedProviderService {
11 | currentFeed$: BehaviorSubject = new BehaviorSubject([]);
12 |
13 | constructor(private api: ApiService) { }
14 |
15 | async getFeed(): Promise> {
16 | const req = await this.api.get('/feed');
17 | const items = req.rows;
18 | this.currentFeed$.next(items);
19 | return Promise.resolve(this.currentFeed$);
20 | }
21 |
22 | async uploadFeedItem(caption: string, file: File): Promise {
23 | const res = await this.api.upload('/feed', file, {caption: caption, url: file.name});
24 | const feed = [res, ...this.currentFeed$.value];
25 | this.currentFeed$.next(feed);
26 | return res;
27 | }
28 |
29 | }
--------------------------------------------------------------------------------
/udagram-frontend/src/app/home/home.page.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/udagram-frontend/src/app/home/home.page.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/udacity/cd0354-monolith-to-microservices-project/eb4b5a2565773ef192e23b370bb51b841ab2257f/udagram-frontend/src/app/home/home.page.scss
--------------------------------------------------------------------------------
/udagram-frontend/src/app/home/home.page.spec.ts:
--------------------------------------------------------------------------------
1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
3 |
4 | import { HomePage } from './home.page';
5 |
6 | describe('HomePage', () => {
7 | let component: HomePage;
8 | let fixture: ComponentFixture;
9 |
10 | beforeEach(async(() => {
11 | TestBed.configureTestingModule({
12 | declarations: [ HomePage ],
13 | schemas: [CUSTOM_ELEMENTS_SCHEMA],
14 | })
15 | .compileComponents();
16 | }));
17 |
18 | beforeEach(() => {
19 | fixture = TestBed.createComponent(HomePage);
20 | component = fixture.componentInstance;
21 | fixture.detectChanges();
22 | });
23 |
24 | it('should create', () => {
25 | expect(component).toBeTruthy();
26 | });
27 |
28 | });
29 |
--------------------------------------------------------------------------------
/udagram-frontend/src/app/home/home.page.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { IonicModule } from '@ionic/angular';
3 | import { CommonModule } from '@angular/common';
4 | import { FeedUploadButtonComponent } from '../feed/feed-upload/feed-upload-button/feed-upload-button.component';
5 | import { FeedListComponent } from '../feed/feed-list/feed-list.component';
6 | import { environment } from '../../environments/environment';
7 |
8 | @Component({
9 | selector: 'app-home',
10 | templateUrl: 'home.page.html',
11 | styleUrls: ['home.page.scss'],
12 | standalone: true,
13 | imports: [
14 | IonicModule,
15 | CommonModule,
16 | FeedUploadButtonComponent,
17 | FeedListComponent
18 | ]
19 | })
20 | export class HomePage {
21 | appName = environment.appName;
22 | }
--------------------------------------------------------------------------------
/udagram-frontend/src/app/menubar/menubar.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | {{ appName }}
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/udagram-frontend/src/app/menubar/menubar.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | position: relative;
4 | z-index: 1;
5 | }
6 |
7 | ion-title {
8 | font-weight: bold;
9 | font-family: 'Dancing Script', cursive;
10 | font-size: 180%;
11 | }
--------------------------------------------------------------------------------
/udagram-frontend/src/app/menubar/menubar.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
3 |
4 | import { MenubarComponent } from './menubar.component';
5 | import { environment } from '../../environments/environment';
6 |
7 |
8 | describe('MenubarPage', () => {
9 | let component: MenubarComponent;
10 | let fixture: ComponentFixture;
11 |
12 | beforeEach(async(() => {
13 | TestBed.configureTestingModule({
14 | declarations: [ MenubarComponent ],
15 | schemas: [CUSTOM_ELEMENTS_SCHEMA],
16 | })
17 | .compileComponents();
18 | }));
19 |
20 | beforeEach(() => {
21 | fixture = TestBed.createComponent(MenubarComponent);
22 | component = fixture.componentInstance;
23 | fixture.detectChanges();
24 | });
25 |
26 | it('should create', () => {
27 | expect(component).toBeTruthy();
28 | });
29 |
30 | it('title should be enviornment.AppTitle', () => {
31 | const app = fixture.nativeElement;
32 | const title = app.querySelectorAll('ion-title');
33 | expect(title.length).toEqual(1);
34 | expect(title[0].innerText).toEqual(environment.appName);
35 | });
36 | });
37 |
--------------------------------------------------------------------------------
/udagram-frontend/src/app/menubar/menubar.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { IonicModule } from '@ionic/angular';
3 | import { CommonModule } from '@angular/common';
4 | import { AuthMenuButtonComponent } from '../auth/auth-menu-button/auth-menu-button.component';
5 | import { environment } from '../../environments/environment';
6 |
7 | @Component({
8 | selector: 'app-menubar',
9 | templateUrl: './menubar.component.html',
10 | styleUrls: ['./menubar.component.scss'],
11 | standalone: true,
12 | imports: [
13 | IonicModule,
14 | CommonModule,
15 | AuthMenuButtonComponent
16 | ]
17 | })
18 | export class MenubarComponent {
19 | public appName = environment.appName;
20 | }
--------------------------------------------------------------------------------
/udagram-frontend/src/assets/icon/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/udacity/cd0354-monolith-to-microservices-project/eb4b5a2565773ef192e23b370bb51b841ab2257f/udagram-frontend/src/assets/icon/favicon.png
--------------------------------------------------------------------------------
/udagram-frontend/src/assets/shapes.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/udagram-frontend/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | // This file can be replaced during build by using the `fileReplacements` array.
2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
3 | // The list of file replacements can be found in `angular.json`.
4 |
5 | export const environment = {
6 | production: false,
7 | appName: 'Udagram',
8 | apiHost: 'http://localhost:8080/api/v0'
9 | };
10 |
11 | /*
12 | * For easier debugging in development mode, you can import the following file
13 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
14 | *
15 | * This import should be commented out in production mode because it will have a negative impact
16 | * on performance if an error is thrown.
17 | */
18 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI.
19 |
--------------------------------------------------------------------------------
/udagram-frontend/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // This file can be replaced during build by using the `fileReplacements` array.
2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
3 | // The list of file replacements can be found in `angular.json`.
4 |
5 | export const environment = {
6 | production: false,
7 | appName: 'Udagram',
8 | apiHost: 'http://localhost:8080/api/v0'
9 | };
10 |
11 | /*
12 | * For easier debugging in development mode, you can import the following file
13 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
14 | *
15 | * This import should be commented out in production mode because it will have a negative impact
16 | * on performance if an error is thrown.
17 | */
18 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI.
19 |
--------------------------------------------------------------------------------
/udagram-frontend/src/global.scss:
--------------------------------------------------------------------------------
1 | // http://ionicframework.com/docs/theming/
2 | @import '~@ionic/angular/css/core.css';
3 | @import '~@ionic/angular/css/normalize.css';
4 | @import '~@ionic/angular/css/structure.css';
5 | @import '~@ionic/angular/css/typography.css';
6 | @import '~@ionic/angular/css/display.css';
7 | @import '~@ionic/angular/css/padding.css';
8 | @import '~@ionic/angular/css/float-elements.css';
9 | @import '~@ionic/angular/css/text-alignment.css';
10 | @import '~@ionic/angular/css/text-transformation.css';
11 | @import '~@ionic/angular/css/flex-utils.css';
12 |
13 | // Fancy Fonts
14 | @import url('https://fonts.googleapis.com/css?family=Dancing+Script:700');
--------------------------------------------------------------------------------
/udagram-frontend/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Udagram
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/udagram-frontend/src/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular-devkit/build-angular'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage-istanbul-reporter'),
13 | require('@angular-devkit/build-angular/plugins/karma')
14 | ],
15 | client: {
16 | clearContext: false // leave Jasmine Spec Runner output visible in browser
17 | },
18 | coverageIstanbulReporter: {
19 | dir: require('path').join(__dirname, '../coverage'),
20 | reports: ['html', 'lcovonly', 'text-summary'],
21 | fixWebpackSourcePaths: true
22 | },
23 | reporters: ['progress', 'kjhtml'],
24 | port: 9876,
25 | colors: true,
26 | logLevel: config.LOG_INFO,
27 | autoWatch: true,
28 | browsers: ['Chrome'],
29 | singleRun: false
30 | });
31 | };
32 |
--------------------------------------------------------------------------------
/udagram-frontend/src/main.ts:
--------------------------------------------------------------------------------
1 | import { enableProdMode, importProvidersFrom } from '@angular/core';
2 | import { bootstrapApplication } from '@angular/platform-browser';
3 | import { RouteReuseStrategy, provideRouter } from '@angular/router';
4 | import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
5 | import { routes } from './app/app.routes';
6 | import { AppComponent } from './app/app.component';
7 | import { environment } from './environments/environment';
8 | import { provideHttpClient } from '@angular/common/http';
9 |
10 | if (environment.production) {
11 | enableProdMode();
12 | }
13 |
14 | bootstrapApplication(AppComponent, {
15 | providers: [
16 | { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
17 | importProvidersFrom(IonicModule.forRoot()),
18 | provideRouter(routes),
19 | provideHttpClient()
20 | ],
21 | });
--------------------------------------------------------------------------------
/udagram-frontend/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/guide/browser-support
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /** IE9, IE10, IE11, and Chrome <55 requires all of the following polyfills.
22 | * This also includes Android Emulators with older versions of Chrome and Google Search/Googlebot
23 | */
24 |
25 | // import 'core-js/es6/symbol';
26 | // import 'core-js/es6/object';
27 | // import 'core-js/es6/function';
28 | // import 'core-js/es6/parse-int';
29 | // import 'core-js/es6/parse-float';
30 | // import 'core-js/es6/number';
31 | // import 'core-js/es6/math';
32 | // import 'core-js/es6/string';
33 | // import 'core-js/es6/date';
34 | // import 'core-js/es6/array';
35 | // import 'core-js/es6/regexp';
36 | // import 'core-js/es6/map';
37 | // import 'core-js/es6/weak-map';
38 | // import 'core-js/es6/set';
39 |
40 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
41 | // import 'classlist.js'; // Run `npm install --save classlist.js`.
42 |
43 | /** IE10 and IE11 requires the following for the Reflect API. */
44 | // import 'core-js/es6/reflect';
45 |
46 | /**
47 | * Web Animations `@angular/platform-browser/animations`
48 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
49 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
50 | */
51 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`.
52 |
53 | /**
54 | * By default, zone.js will patch all possible macroTask and DomEvents
55 | * user can disable parts of macroTask/DomEvents patch by setting following flags
56 | * because those flags need to be set before `zone.js` being loaded, and webpack
57 | * will put import in the top of bundle, so user need to create a separate file
58 | * in this directory (for example: zone-flags.ts), and put the following flags
59 | * into that file, and then add the following code before importing zone.js.
60 | * import './zone-flags.ts';
61 | *
62 | * The flags allowed in zone-flags.ts are listed here.
63 | *
64 | * The following flags will work for all browsers.
65 | *
66 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
67 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
68 | * (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
69 | *
70 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
71 | * with the following flag, it will bypass `zone.js` patch for IE/Edge
72 | *
73 | * (window as any).__Zone_enable_cross_context_check = true;
74 | *
75 | */
76 |
77 | /***************************************************************************************************
78 | * Zone JS is required by default for Angular itself.
79 | */
80 | import 'zone.js/dist/zone'; // Included with Angular CLI.
81 |
82 |
83 | /***************************************************************************************************
84 | * APPLICATION IMPORTS
85 | */
86 |
--------------------------------------------------------------------------------
/udagram-frontend/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import 'zone.js/dist/zone-testing';
4 | import { getTestBed } from '@angular/core/testing';
5 | import {
6 | BrowserDynamicTestingModule,
7 | platformBrowserDynamicTesting
8 | } from '@angular/platform-browser-dynamic/testing';
9 |
10 | declare const require: any;
11 |
12 | // First, initialize the Angular testing environment.
13 | getTestBed().initTestEnvironment(
14 | BrowserDynamicTestingModule,
15 | platformBrowserDynamicTesting()
16 | );
17 | // Then we find all the tests.
18 | const context = require.context('./', true, /\.spec\.ts$/);
19 | // And load the modules.
20 | context.keys().map(context);
21 |
--------------------------------------------------------------------------------
/udagram-frontend/src/theme/variables.scss:
--------------------------------------------------------------------------------
1 | // Ionic Variables and Theming. For more info, please see:
2 | // http://ionicframework.com/docs/theming/
3 |
4 | /** Ionic CSS Variables **/
5 | :root {
6 | /** primary **/
7 | --ion-color-primary: #3880ff;
8 | --ion-color-primary-rgb: 56, 128, 255;
9 | --ion-color-primary-contrast: #ffffff;
10 | --ion-color-primary-contrast-rgb: 255, 255, 255;
11 | --ion-color-primary-shade: #3171e0;
12 | --ion-color-primary-tint: #4c8dff;
13 |
14 | /** secondary **/
15 | --ion-color-secondary: #0cd1e8;
16 | --ion-color-secondary-rgb: 12, 209, 232;
17 | --ion-color-secondary-contrast: #ffffff;
18 | --ion-color-secondary-contrast-rgb: 255, 255, 255;
19 | --ion-color-secondary-shade: #0bb8cc;
20 | --ion-color-secondary-tint: #24d6ea;
21 |
22 | /** tertiary **/
23 | --ion-color-tertiary: #7044ff;
24 | --ion-color-tertiary-rgb: 112, 68, 255;
25 | --ion-color-tertiary-contrast: #ffffff;
26 | --ion-color-tertiary-contrast-rgb: 255, 255, 255;
27 | --ion-color-tertiary-shade: #633ce0;
28 | --ion-color-tertiary-tint: #7e57ff;
29 |
30 | /** success **/
31 | --ion-color-success: #10dc60;
32 | --ion-color-success-rgb: 16, 220, 96;
33 | --ion-color-success-contrast: #ffffff;
34 | --ion-color-success-contrast-rgb: 255, 255, 255;
35 | --ion-color-success-shade: #0ec254;
36 | --ion-color-success-tint: #28e070;
37 |
38 | /** warning **/
39 | --ion-color-warning: #ffce00;
40 | --ion-color-warning-rgb: 255, 206, 0;
41 | --ion-color-warning-contrast: #ffffff;
42 | --ion-color-warning-contrast-rgb: 255, 255, 255;
43 | --ion-color-warning-shade: #e0b500;
44 | --ion-color-warning-tint: #ffd31a;
45 |
46 | /** danger **/
47 | --ion-color-danger: #f04141;
48 | --ion-color-danger-rgb: 245, 61, 61;
49 | --ion-color-danger-contrast: #ffffff;
50 | --ion-color-danger-contrast-rgb: 255, 255, 255;
51 | --ion-color-danger-shade: #d33939;
52 | --ion-color-danger-tint: #f25454;
53 |
54 | /** dark **/
55 | --ion-color-dark: #222428;
56 | --ion-color-dark-rgb: 34, 34, 34;
57 | --ion-color-dark-contrast: #ffffff;
58 | --ion-color-dark-contrast-rgb: 255, 255, 255;
59 | --ion-color-dark-shade: #1e2023;
60 | --ion-color-dark-tint: #383a3e;
61 |
62 | /** medium **/
63 | --ion-color-medium: #989aa2;
64 | --ion-color-medium-rgb: 152, 154, 162;
65 | --ion-color-medium-contrast: #ffffff;
66 | --ion-color-medium-contrast-rgb: 255, 255, 255;
67 | --ion-color-medium-shade: #86888f;
68 | --ion-color-medium-tint: #a2a4ab;
69 |
70 | /** light **/
71 | --ion-color-light: #f4f5f8;
72 | --ion-color-light-rgb: 244, 244, 244;
73 | --ion-color-light-contrast: #000000;
74 | --ion-color-light-contrast-rgb: 0, 0, 0;
75 | --ion-color-light-shade: #d7d8da;
76 | --ion-color-light-tint: #FAFAFA;
77 | }
78 |
--------------------------------------------------------------------------------
/udagram-frontend/src/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/app",
5 | "types": []
6 | },
7 | "exclude": [
8 | "test.ts",
9 | "**/*.spec.ts"
10 | ]
11 | }
12 |
--------------------------------------------------------------------------------
/udagram-frontend/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/spec",
5 | "types": [
6 | "jasmine",
7 | "node"
8 | ]
9 | },
10 | "files": [
11 | "test.ts",
12 | "polyfills.ts"
13 | ],
14 | "include": [
15 | "**/*.spec.ts",
16 | "**/*.d.ts"
17 | ]
18 | }
19 |
--------------------------------------------------------------------------------
/udagram-frontend/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "baseUrl": "./",
5 | "outDir": "./dist/out-tsc",
6 | "sourceMap": true,
7 | "declaration": false,
8 | "module": "es2022",
9 | "moduleResolution": "node",
10 | "experimentalDecorators": true,
11 | "importHelpers": true,
12 | "target": "es2022",
13 | "typeRoots": [
14 | "node_modules/@types"
15 | ],
16 | "lib": [
17 | "es2022",
18 | "dom"
19 | ],
20 | "skipLibCheck": true,
21 | "strict": false,
22 | "noImplicitAny": false,
23 | "noImplicitReturns": true,
24 | "noFallthroughCasesInSwitch": true,
25 | "strictPropertyInitialization": false,
26 | "useDefineForClassFields": false
27 | },
28 | "angularCompilerOptions": {
29 | "enableI18nLegacyMessageIdFormat": false,
30 | "strictInjectionParameters": true,
31 | "strictInputAccessModifiers": true,
32 | "strictTemplates": true
33 | }
34 | }
--------------------------------------------------------------------------------
/udagram-frontend/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "rulesDirectory": [
3 | "codelyzer"
4 | ],
5 | "rules": {
6 | "arrow-return-shorthand": true,
7 | "callable-types": true,
8 | "class-name": true,
9 | "comment-format": [
10 | true,
11 | "check-space"
12 | ],
13 | "curly": true,
14 | "deprecation": {
15 | "severity": "warn"
16 | },
17 | "eofline": true,
18 | "forin": true,
19 | "import-blacklist": [
20 | true,
21 | "rxjs/Rx"
22 | ],
23 | "import-spacing": true,
24 | "indent": [
25 | true,
26 | "spaces"
27 | ],
28 | "interface-over-type-literal": true,
29 | "label-position": true,
30 | "max-line-length": [
31 | true,
32 | 140
33 | ],
34 | "member-access": false,
35 | "member-ordering": [
36 | true,
37 | {
38 | "order": [
39 | "static-field",
40 | "instance-field",
41 | "static-method",
42 | "instance-method"
43 | ]
44 | }
45 | ],
46 | "no-arg": true,
47 | "no-bitwise": true,
48 | "no-console": [
49 | true,
50 | "debug",
51 | "info",
52 | "time",
53 | "timeEnd",
54 | "trace"
55 | ],
56 | "no-construct": true,
57 | "no-debugger": true,
58 | "no-duplicate-super": true,
59 | "no-empty": false,
60 | "no-empty-interface": true,
61 | "no-eval": true,
62 | "no-inferrable-types": [
63 | true,
64 | "ignore-params"
65 | ],
66 | "no-misused-new": true,
67 | "no-non-null-assertion": true,
68 | "no-redundant-jsdoc": true,
69 | "no-shadowed-variable": true,
70 | "no-string-literal": false,
71 | "no-string-throw": true,
72 | "no-switch-case-fall-through": true,
73 | "no-trailing-whitespace": true,
74 | "no-unnecessary-initializer": true,
75 | "no-unused-expression": true,
76 | "no-use-before-declare": true,
77 | "no-var-keyword": true,
78 | "object-literal-sort-keys": false,
79 | "one-line": [
80 | true,
81 | "check-open-brace",
82 | "check-catch",
83 | "check-else",
84 | "check-whitespace"
85 | ],
86 | "prefer-const": true,
87 | "quotemark": [
88 | true,
89 | "single"
90 | ],
91 | "radix": true,
92 | "semicolon": [
93 | true,
94 | "always"
95 | ],
96 | "triple-equals": [
97 | true,
98 | "allow-null-check"
99 | ],
100 | "typedef-whitespace": [
101 | true,
102 | {
103 | "call-signature": "nospace",
104 | "index-signature": "nospace",
105 | "parameter": "nospace",
106 | "property-declaration": "nospace",
107 | "variable-declaration": "nospace"
108 | }
109 | ],
110 | "unified-signatures": true,
111 | "variable-name": false,
112 | "whitespace": [
113 | true,
114 | "check-branch",
115 | "check-decl",
116 | "check-operator",
117 | "check-separator",
118 | "check-type"
119 | ],
120 | "no-output-on-prefix": true,
121 | "use-input-property-decorator": true,
122 | "use-output-property-decorator": true,
123 | "use-host-property-decorator": true,
124 | "no-input-rename": true,
125 | "no-output-rename": true,
126 | "use-life-cycle-interface": true,
127 | "use-pipe-transform-interface": true,
128 | "directive-class-suffix": true
129 | }
130 | }
131 |
--------------------------------------------------------------------------------
/udagram-frontend/udagram_tests/git_test.sh:
--------------------------------------------------------------------------------
1 | @ TODO
2 | Verify dev, staging, and master exist
3 | verify working on feature branch or similar
4 | verify cannot push to staging or master (protected branches)
--------------------------------------------------------------------------------