From 7418dca8c2b2f67f957d3d8bce8fe6cd5678ae92 Mon Sep 17 00:00:00 2001 From: mrkvon Date: Sun, 21 Jan 2018 23:43:03 +0100 Subject: [PATCH 1/5] redirect to /welcome after email verification when user is new --- src/app/model.service.spec.ts | 5 ++- src/app/model.service.ts | 6 +-- .../verify-email-code.component.spec.ts | 45 ++++++++++++++++++- .../verify-email-code.component.ts | 5 ++- 4 files changed, 53 insertions(+), 8 deletions(-) diff --git a/src/app/model.service.spec.ts b/src/app/model.service.spec.ts index 6c935e1..020680d 100644 --- a/src/app/model.service.spec.ts +++ b/src/app/model.service.spec.ts @@ -68,10 +68,11 @@ describe('ModelService', () => { req.flush({ meta: { email: 'email@example.com', - token: 'aaaa.bbbb.cccc' + token: 'aaaa.bbbb.cccc', + isNewUser: false } }); const response = await verifyEmailPromise; - expect(response).toEqual({ email: 'email@example.com', token: 'aaaa.bbbb.cccc' }); + expect(response).toEqual({ email: 'email@example.com', token: 'aaaa.bbbb.cccc', isNewUser: false }); })); }); diff --git a/src/app/model.service.ts b/src/app/model.service.ts index 209e025..fb7ed69 100644 --- a/src/app/model.service.ts +++ b/src/app/model.service.ts @@ -86,7 +86,7 @@ export class ModelService { }); } - async verifyEmail(username: string, code: string): Promise<{ email: string, token: string }> { + async verifyEmail(username: string, code: string): Promise<{ email: string, token: string, isNewUser: boolean }> { const body = { data: { @@ -103,8 +103,8 @@ export class ModelService { .patch(`${this.baseUrl}/account`, body, { headers: this.notLoggedHeaders }) .toPromise(); - const { email, token } = response.meta; - return { email, token }; + const { email, token, isNewUser } = response.meta; + return { email, token, isNewUser }; } catch (e) { throw { status: e.status, message: 'todo error' }; } diff --git a/src/app/verify-email-code/verify-email-code.component.spec.ts b/src/app/verify-email-code/verify-email-code.component.spec.ts index 5309782..7cc2447 100644 --- a/src/app/verify-email-code/verify-email-code.component.spec.ts +++ b/src/app/verify-email-code/verify-email-code.component.spec.ts @@ -24,7 +24,13 @@ class AuthStubService { class ModelStubService { async verifyEmail(_username: string, _code: string) { - return { email: 'email@example.com', token: 'aaaa.bbbb.cccc' }; + return { email: 'email@example.com', token: 'aaaa.bbbb.cccc', isNewUser: false }; + } +} + +class ModelStubService2 { + async verifyEmail(_username: string, _code: string) { + return { email: 'email@example.com', token: 'aaaa.bbbb.cccc', isNewUser: true }; } } @@ -140,6 +146,43 @@ describe('VerifyEmailCodeComponent', () => { })); }); + describe('successful verification of new user', () => { + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ VerifyEmailCodeComponent ], + providers: [ + { provide: AuthService, useClass: AuthStubService }, + { provide: ActivatedRoute, useClass: ActivatedRouteStub }, + HeaderControlService, + { provide: ModelService, useClass: ModelStubService2 }, + NotificationsService, + { provide: Router, useClass: RouterStub } + ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(VerifyEmailCodeComponent); + component = fixture.componentInstance; + + const notify = fixture.debugElement.injector.get(NotificationsService); + notifyInfoSpy = spyOn(notify, 'info'); + const router = fixture.debugElement.injector.get(Router); + navigateSpy = spyOn(router, 'navigate'); + + fixture.detectChanges(); + }); + + it('redirect to /welcome', async(async () => { + await fixture.whenStable(); + + expect(navigateSpy.calls.count()).toEqual(1); + expect(navigateSpy.calls.argsFor(0)[0]).toEqual(['/welcome']); + })); + + }); + describe('failed verification', () => { beforeEach(async(() => { TestBed.configureTestingModule({ diff --git a/src/app/verify-email-code/verify-email-code.component.ts b/src/app/verify-email-code/verify-email-code.component.ts index c576543..449dbc5 100644 --- a/src/app/verify-email-code/verify-email-code.component.ts +++ b/src/app/verify-email-code/verify-email-code.component.ts @@ -64,14 +64,15 @@ export class VerifyEmailCodeComponent implements OnInit, OnDestroy { try { // perform the verification - const { email, token } = await this.model.verifyEmail(username, code); + const { email, token, isNewUser } = await this.model.verifyEmail(username, code); // on success // inform this.notify.info(`your email ${email} was successfully verified`); // TODO login, when we get jwt token this.auth.login(token); // redirect to /home - await this.router.navigate(['/']); + const redirectTarget = (isNewUser) ? '/welcome' : '/'; + await this.router.navigate([redirectTarget]); } catch (e) { this.failed = true; // TODO better error reporting From a58f4bd9eabdea9f9330537b8ad201f2e5202155 Mon Sep 17 00:00:00 2001 From: mrkvon Date: Wed, 24 Jan 2018 02:01:45 +0100 Subject: [PATCH 2/5] welcome sequence - first draft unrelated: center loading page's content with flexbox --- src/app/app-routing.module.ts | 41 +++++++++++++++++++ src/app/app.module.ts | 16 +++++++- .../welcome-finish.component.html | 8 ++++ .../welcome-finish.component.scss | 0 .../welcome-finish.component.spec.ts | 25 +++++++++++ .../welcome-finish.component.ts | 15 +++++++ .../welcome-info/welcome-info.component.html | 9 ++++ .../welcome-info/welcome-info.component.scss | 0 .../welcome-info.component.spec.ts | 34 +++++++++++++++ .../welcome-info/welcome-info.component.ts | 15 +++++++ .../welcome-location.component.html | 9 ++++ .../welcome-location.component.scss | 0 .../welcome-location.component.spec.ts | 34 +++++++++++++++ .../welcome-location.component.ts | 15 +++++++ .../welcome-navigation.component.html | 5 +++ .../welcome-navigation.component.scss | 0 .../welcome-navigation.component.spec.ts | 29 +++++++++++++ .../welcome-navigation.component.ts | 27 ++++++++++++ .../welcome-start.component.html | 8 ++++ .../welcome-start.component.scss | 17 ++++++++ .../welcome-start.component.spec.ts | 31 ++++++++++++++ .../welcome-start/welcome-start.component.ts | 21 ++++++++++ .../welcome-tags/welcome-tags.component.html | 14 +++++++ .../welcome-tags/welcome-tags.component.scss | 0 .../welcome-tags.component.spec.ts | 40 ++++++++++++++++++ .../welcome-tags/welcome-tags.component.ts | 24 +++++++++++ src/app/welcome/welcome.component.html | 1 + src/app/welcome/welcome.component.scss | 0 src/app/welcome/welcome.component.spec.ts | 33 +++++++++++++++ src/app/welcome/welcome.component.ts | 22 ++++++++++ src/static/index.css | 10 ++++- src/testing/welcome-navigation-stub.ts | 9 ++++ 32 files changed, 509 insertions(+), 3 deletions(-) create mode 100644 src/app/welcome/welcome-finish/welcome-finish.component.html create mode 100644 src/app/welcome/welcome-finish/welcome-finish.component.scss create mode 100644 src/app/welcome/welcome-finish/welcome-finish.component.spec.ts create mode 100644 src/app/welcome/welcome-finish/welcome-finish.component.ts create mode 100644 src/app/welcome/welcome-info/welcome-info.component.html create mode 100644 src/app/welcome/welcome-info/welcome-info.component.scss create mode 100644 src/app/welcome/welcome-info/welcome-info.component.spec.ts create mode 100644 src/app/welcome/welcome-info/welcome-info.component.ts create mode 100644 src/app/welcome/welcome-location/welcome-location.component.html create mode 100644 src/app/welcome/welcome-location/welcome-location.component.scss create mode 100644 src/app/welcome/welcome-location/welcome-location.component.spec.ts create mode 100644 src/app/welcome/welcome-location/welcome-location.component.ts create mode 100644 src/app/welcome/welcome-navigation/welcome-navigation.component.html create mode 100644 src/app/welcome/welcome-navigation/welcome-navigation.component.scss create mode 100644 src/app/welcome/welcome-navigation/welcome-navigation.component.spec.ts create mode 100644 src/app/welcome/welcome-navigation/welcome-navigation.component.ts create mode 100644 src/app/welcome/welcome-start/welcome-start.component.html create mode 100644 src/app/welcome/welcome-start/welcome-start.component.scss create mode 100644 src/app/welcome/welcome-start/welcome-start.component.spec.ts create mode 100644 src/app/welcome/welcome-start/welcome-start.component.ts create mode 100644 src/app/welcome/welcome-tags/welcome-tags.component.html create mode 100644 src/app/welcome/welcome-tags/welcome-tags.component.scss create mode 100644 src/app/welcome/welcome-tags/welcome-tags.component.spec.ts create mode 100644 src/app/welcome/welcome-tags/welcome-tags.component.ts create mode 100644 src/app/welcome/welcome.component.html create mode 100644 src/app/welcome/welcome.component.scss create mode 100644 src/app/welcome/welcome.component.spec.ts create mode 100644 src/app/welcome/welcome.component.ts create mode 100644 src/testing/welcome-navigation-stub.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index f6e204b..97371e6 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -11,6 +11,14 @@ import { UserComponent } from './user/user.component'; import { MessagesWithUserComponent } from './messages-with-user/messages-with-user.component'; import { MapComponent } from './map/map.component'; +// welcome +import { WelcomeComponent } from './welcome/welcome.component'; +import { WelcomeStartComponent } from './welcome/welcome-start/welcome-start.component'; +import { WelcomeTagsComponent } from './welcome/welcome-tags/welcome-tags.component'; +import { WelcomeInfoComponent } from './welcome/welcome-info/welcome-info.component'; +import { WelcomeLocationComponent } from './welcome/welcome-location/welcome-location.component'; +import { WelcomeFinishComponent } from './welcome/welcome-finish/welcome-finish.component'; + // user edit import { UserEditComponent } from './user-edit/user-edit.component'; import { UserEditProfileComponent } from './user-edit/user-edit-profile/user-edit-profile.component'; @@ -353,6 +361,39 @@ const routes: Routes = [ user: LoggedUserResolver } }, + { + path: 'welcome', + component: WelcomeComponent, + canActivate: [AuthGuard], + resolve: { + user: LoggedUserResolver + }, + children: [ + { + path: '', + component: WelcomeStartComponent + }, + { + path: '1', + component: WelcomeTagsComponent, + resolve: { + userTags: LoggedUserTagsResolver + } + }, + { + path: '2', + component: WelcomeInfoComponent + }, + { + path: '3', + component: WelcomeLocationComponent + }, + { + path: 'done', + component: WelcomeFinishComponent + } + ] + }, { path: '**', component: FofComponent diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 1049e22..be03b65 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -110,6 +110,13 @@ import { CommentsComponent } from './comments/comments.component'; import { CommentComponent } from './comments/comment/comment.component'; import { CommentFormComponent } from './comments/comment-form/comment-form.component'; import { TagRelatedIdeasComponent } from './tag/tag-related-ideas/tag-related-ideas.component'; +import { WelcomeComponent } from './welcome/welcome.component'; +import { WelcomeStartComponent } from './welcome/welcome-start/welcome-start.component'; +import { WelcomeTagsComponent } from './welcome/welcome-tags/welcome-tags.component'; +import { WelcomeInfoComponent } from './welcome/welcome-info/welcome-info.component'; +import { WelcomeLocationComponent } from './welcome/welcome-location/welcome-location.component'; +import { WelcomeFinishComponent } from './welcome/welcome-finish/welcome-finish.component'; +import { WelcomeNavigationComponent } from './welcome/welcome-navigation/welcome-navigation.component'; @NgModule({ declarations: [ @@ -197,7 +204,14 @@ import { TagRelatedIdeasComponent } from './tag/tag-related-ideas/tag-related-id CommentsComponent, CommentComponent, CommentFormComponent, - TagRelatedIdeasComponent + TagRelatedIdeasComponent, + WelcomeComponent, + WelcomeStartComponent, + WelcomeTagsComponent, + WelcomeInfoComponent, + WelcomeLocationComponent, + WelcomeFinishComponent, + WelcomeNavigationComponent ], imports: [ BrowserModule, diff --git a/src/app/welcome/welcome-finish/welcome-finish.component.html b/src/app/welcome/welcome-finish/welcome-finish.component.html new file mode 100644 index 0000000..10ef5df --- /dev/null +++ b/src/app/welcome/welcome-finish/welcome-finish.component.html @@ -0,0 +1,8 @@ +

You are all set!

+
+ Thank you for your effort. +
+ + diff --git a/src/app/welcome/welcome-finish/welcome-finish.component.scss b/src/app/welcome/welcome-finish/welcome-finish.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/welcome/welcome-finish/welcome-finish.component.spec.ts b/src/app/welcome/welcome-finish/welcome-finish.component.spec.ts new file mode 100644 index 0000000..02f555f --- /dev/null +++ b/src/app/welcome/welcome-finish/welcome-finish.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { WelcomeFinishComponent } from './welcome-finish.component'; + +describe('WelcomeFinishComponent', () => { + let component: WelcomeFinishComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ WelcomeFinishComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(WelcomeFinishComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/welcome/welcome-finish/welcome-finish.component.ts b/src/app/welcome/welcome-finish/welcome-finish.component.ts new file mode 100644 index 0000000..f074fdb --- /dev/null +++ b/src/app/welcome/welcome-finish/welcome-finish.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-welcome-finish', + templateUrl: './welcome-finish.component.html', + styleUrls: ['./welcome-finish.component.scss'] +}) +export class WelcomeFinishComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/welcome/welcome-info/welcome-info.component.html b/src/app/welcome/welcome-info/welcome-info.component.html new file mode 100644 index 0000000..1dec325 --- /dev/null +++ b/src/app/welcome/welcome-info/welcome-info.component.html @@ -0,0 +1,9 @@ +

Who are you?

+ +
+

Share some basics so others can get to know you.

+
+ + + + diff --git a/src/app/welcome/welcome-info/welcome-info.component.scss b/src/app/welcome/welcome-info/welcome-info.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/welcome/welcome-info/welcome-info.component.spec.ts b/src/app/welcome/welcome-info/welcome-info.component.spec.ts new file mode 100644 index 0000000..ae434d3 --- /dev/null +++ b/src/app/welcome/welcome-info/welcome-info.component.spec.ts @@ -0,0 +1,34 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { Component } from '@angular/core'; + +import { WelcomeInfoComponent } from './welcome-info.component'; +import { WelcomeNavigationStubComponent } from '../../../testing/welcome-navigation-stub'; + +@Component({ selector: 'app-user-edit-profile', template: '' }) +class UserEditProfileStubComponent { } + +describe('WelcomeInfoComponent', () => { + let component: WelcomeInfoComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ + UserEditProfileStubComponent, + WelcomeInfoComponent, + WelcomeNavigationStubComponent + ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(WelcomeInfoComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/welcome/welcome-info/welcome-info.component.ts b/src/app/welcome/welcome-info/welcome-info.component.ts new file mode 100644 index 0000000..627a8e9 --- /dev/null +++ b/src/app/welcome/welcome-info/welcome-info.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-welcome-info', + templateUrl: './welcome-info.component.html', + styleUrls: ['./welcome-info.component.scss'] +}) +export class WelcomeInfoComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/welcome/welcome-location/welcome-location.component.html b/src/app/welcome/welcome-location/welcome-location.component.html new file mode 100644 index 0000000..4484c10 --- /dev/null +++ b/src/app/welcome/welcome-location/welcome-location.component.html @@ -0,0 +1,9 @@ +

Where are you?

+ +
+

You can see others on the map and others may see you.

+
+ + + + diff --git a/src/app/welcome/welcome-location/welcome-location.component.scss b/src/app/welcome/welcome-location/welcome-location.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/welcome/welcome-location/welcome-location.component.spec.ts b/src/app/welcome/welcome-location/welcome-location.component.spec.ts new file mode 100644 index 0000000..50f6e45 --- /dev/null +++ b/src/app/welcome/welcome-location/welcome-location.component.spec.ts @@ -0,0 +1,34 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { Component } from '@angular/core'; + +import { WelcomeLocationComponent } from './welcome-location.component'; +import { WelcomeNavigationStubComponent } from '../../../testing/welcome-navigation-stub'; + +@Component({ selector: 'app-user-edit-location', template: '' }) +class UserEditLocationStubComponent { } + +describe('WelcomeLocationComponent', () => { + let component: WelcomeLocationComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ + UserEditLocationStubComponent, + WelcomeLocationComponent, + WelcomeNavigationStubComponent + ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(WelcomeLocationComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/welcome/welcome-location/welcome-location.component.ts b/src/app/welcome/welcome-location/welcome-location.component.ts new file mode 100644 index 0000000..bde3d30 --- /dev/null +++ b/src/app/welcome/welcome-location/welcome-location.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-welcome-location', + templateUrl: './welcome-location.component.html', + styleUrls: ['./welcome-location.component.scss'] +}) +export class WelcomeLocationComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/welcome/welcome-navigation/welcome-navigation.component.html b/src/app/welcome/welcome-navigation/welcome-navigation.component.html new file mode 100644 index 0000000..d5b08ab --- /dev/null +++ b/src/app/welcome/welcome-navigation/welcome-navigation.component.html @@ -0,0 +1,5 @@ + diff --git a/src/app/welcome/welcome-navigation/welcome-navigation.component.scss b/src/app/welcome/welcome-navigation/welcome-navigation.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/welcome/welcome-navigation/welcome-navigation.component.spec.ts b/src/app/welcome/welcome-navigation/welcome-navigation.component.spec.ts new file mode 100644 index 0000000..c863894 --- /dev/null +++ b/src/app/welcome/welcome-navigation/welcome-navigation.component.spec.ts @@ -0,0 +1,29 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { RouterTestingModule } from '@angular/router/testing'; + +import { WelcomeNavigationComponent } from './welcome-navigation.component'; + +describe('WelcomeNavigationComponent', () => { + let component: WelcomeNavigationComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ WelcomeNavigationComponent ], + imports: [ + RouterTestingModule + ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(WelcomeNavigationComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/welcome/welcome-navigation/welcome-navigation.component.ts b/src/app/welcome/welcome-navigation/welcome-navigation.component.ts new file mode 100644 index 0000000..a027aeb --- /dev/null +++ b/src/app/welcome/welcome-navigation/welcome-navigation.component.ts @@ -0,0 +1,27 @@ +import { Component, Input, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-welcome-navigation', + templateUrl: './welcome-navigation.component.html', + styleUrls: ['./welcome-navigation.component.scss'] +}) +export class WelcomeNavigationComponent implements OnInit { + + // current step in navigation + @Input() step: number; + // total steps in navigation + @Input() steps = 3; + // is the "next" button disabled + @Input() disabled = true; + + public get nextStep(): string { + // is this the last step or not? + return (this.step < this.steps) ? String(this.step + 1) : 'done'; + } + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/welcome/welcome-start/welcome-start.component.html b/src/app/welcome/welcome-start/welcome-start.component.html new file mode 100644 index 0000000..5609214 --- /dev/null +++ b/src/app/welcome/welcome-start/welcome-start.component.html @@ -0,0 +1,8 @@ +Clathrus mushroom by Carl Linnae + +

Welcome, {{me.username}}!

+ + + diff --git a/src/app/welcome/welcome-start/welcome-start.component.scss b/src/app/welcome/welcome-start/welcome-start.component.scss new file mode 100644 index 0000000..37c3df2 --- /dev/null +++ b/src/app/welcome/welcome-start/welcome-start.component.scss @@ -0,0 +1,17 @@ +* { + text-align: center; +} + +h1 { + margin: 1em; +} + +nav { + font-size: 1.2em; +} + +img { + display: block; + margin: 0 auto; + width: 128px; +} diff --git a/src/app/welcome/welcome-start/welcome-start.component.spec.ts b/src/app/welcome/welcome-start/welcome-start.component.spec.ts new file mode 100644 index 0000000..7f73bc5 --- /dev/null +++ b/src/app/welcome/welcome-start/welcome-start.component.spec.ts @@ -0,0 +1,31 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { WelcomeStartComponent } from './welcome-start.component'; +import { AuthService } from '../../auth.service'; + +class AuthStubService { } + +describe('WelcomeStartComponent', () => { + let component: WelcomeStartComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ WelcomeStartComponent ], + providers: [ + { provide: AuthService, useClass: AuthStubService } + ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(WelcomeStartComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/welcome/welcome-start/welcome-start.component.ts b/src/app/welcome/welcome-start/welcome-start.component.ts new file mode 100644 index 0000000..9d3af1a --- /dev/null +++ b/src/app/welcome/welcome-start/welcome-start.component.ts @@ -0,0 +1,21 @@ +import { Component, OnInit } from '@angular/core'; + +import { AuthService } from '../../auth.service'; +import { User } from '../../shared/types'; + +@Component({ + selector: 'app-welcome-start', + templateUrl: './welcome-start.component.html', + styleUrls: ['./welcome-start.component.scss'] +}) +export class WelcomeStartComponent implements OnInit { + + public me: User; + + constructor(private auth: AuthService) { } + + ngOnInit() { + this.me = { username: this.auth.username }; + } + +} diff --git a/src/app/welcome/welcome-tags/welcome-tags.component.html b/src/app/welcome/welcome-tags/welcome-tags.component.html new file mode 100644 index 0000000..1cb68d3 --- /dev/null +++ b/src/app/welcome/welcome-tags/welcome-tags.component.html @@ -0,0 +1,14 @@ +

What do you care about?

+ +
+

Choose your tags. They represent what you care about. Tags will help you connect with similar-minded people.

+
+ +
+

Here are a few popular tags to inspire you:

+ +
+ + + + diff --git a/src/app/welcome/welcome-tags/welcome-tags.component.scss b/src/app/welcome/welcome-tags/welcome-tags.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/welcome/welcome-tags/welcome-tags.component.spec.ts b/src/app/welcome/welcome-tags/welcome-tags.component.spec.ts new file mode 100644 index 0000000..2aaa09c --- /dev/null +++ b/src/app/welcome/welcome-tags/welcome-tags.component.spec.ts @@ -0,0 +1,40 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { Component, Input } from '@angular/core'; + +import { WelcomeTagsComponent } from './welcome-tags.component'; +import { WelcomeNavigationStubComponent } from '../../../testing/welcome-navigation-stub'; + +@Component({ selector: 'app-tag-list', template: '' }) +class TagListStubComponent { + @Input() tags = []; +} + +@Component({ selector: 'app-user-edit-tags', template: '' }) +class UserEditTagsStubComponent { } + +describe('WelcomeTagsComponent', () => { + let component: WelcomeTagsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ + TagListStubComponent, + UserEditTagsStubComponent, + WelcomeNavigationStubComponent, + WelcomeTagsComponent + ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(WelcomeTagsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/welcome/welcome-tags/welcome-tags.component.ts b/src/app/welcome/welcome-tags/welcome-tags.component.ts new file mode 100644 index 0000000..5d1ec2b --- /dev/null +++ b/src/app/welcome/welcome-tags/welcome-tags.component.ts @@ -0,0 +1,24 @@ +import { Component, OnInit } from '@angular/core'; + +import { Tag } from '../../shared/types'; + +@Component({ + selector: 'app-welcome-tags', + templateUrl: './welcome-tags.component.html', + styleUrls: ['./welcome-tags.component.scss'] +}) +export class WelcomeTagsComponent implements OnInit { + + public popularTags: Tag[] = [ + { tagname: 'popular-tag-0' }, + { tagname: 'popular-tag-1' }, + { tagname: 'popular-tag-2' }, + { tagname: 'popular-tag-3' } + ]; + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/welcome/welcome.component.html b/src/app/welcome/welcome.component.html new file mode 100644 index 0000000..0680b43 --- /dev/null +++ b/src/app/welcome/welcome.component.html @@ -0,0 +1 @@ + diff --git a/src/app/welcome/welcome.component.scss b/src/app/welcome/welcome.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/welcome/welcome.component.spec.ts b/src/app/welcome/welcome.component.spec.ts new file mode 100644 index 0000000..d32e8c4 --- /dev/null +++ b/src/app/welcome/welcome.component.spec.ts @@ -0,0 +1,33 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { RouterTestingModule } from '@angular/router/testing'; + +import { WelcomeComponent } from './welcome.component'; +import { HeaderControlService } from '../header-control.service'; + +describe('WelcomeComponent', () => { + let component: WelcomeComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ WelcomeComponent ], + imports: [ + RouterTestingModule + ], + providers: [ + HeaderControlService + ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(WelcomeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/welcome/welcome.component.ts b/src/app/welcome/welcome.component.ts new file mode 100644 index 0000000..72583cb --- /dev/null +++ b/src/app/welcome/welcome.component.ts @@ -0,0 +1,22 @@ +import { Component, OnInit, OnDestroy } from '@angular/core'; + +import { HeaderControlService } from '../header-control.service'; + +@Component({ + selector: 'app-welcome', + templateUrl: './welcome.component.html', + styleUrls: ['./welcome.component.scss'] +}) +export class WelcomeComponent implements OnInit, OnDestroy { + + constructor(private headerControl: HeaderControlService) { } + + ngOnInit() { + this.headerControl.display(false); + } + + ngOnDestroy() { + this.headerControl.display(true); + } + +} diff --git a/src/static/index.css b/src/static/index.css index d745810..4f95d84 100644 --- a/src/static/index.css +++ b/src/static/index.css @@ -1,7 +1,13 @@ .loading-container { + height: 100%; text-align: center; - margin-top: 30px; - text-height: 50px; + display: flex; + flex-direction: column; + justify-content: center; +} + +.loading-container img { + margin: 0 auto; } /** credits to https://martinwolf.org/blog/2015/01/pure-css-savingloading-dots-animation */ diff --git a/src/testing/welcome-navigation-stub.ts b/src/testing/welcome-navigation-stub.ts new file mode 100644 index 0000000..6537419 --- /dev/null +++ b/src/testing/welcome-navigation-stub.ts @@ -0,0 +1,9 @@ +import { Component, Input } from '@angular/core'; + +@Component({ selector: 'app-welcome-navigation', template: '' }) +export class WelcomeNavigationStubComponent { + @Input() step; + @Input() steps; + @Input() disabled; + constructor() { } +} From 34ecfe1568ba92e0d3b54adc7d45070902533480 Mon Sep 17 00:00:00 2001 From: mrkvon Date: Wed, 24 Jan 2018 22:34:44 +0100 Subject: [PATCH 3/5] show popular tags in welcome-tags fetch popular tags from server (model) basic styling of welcome-navigation fix layout of select-location --- src/app/app-routing.module.ts | 11 ++++-- src/app/model.service.spec.ts | 24 +++++++++++++ src/app/model.service.ts | 21 ++++++++++- .../select-location.component.html | 5 +-- .../select-location.component.scss | 7 ++++ .../shared/tag-list/tag-list.component.html | 12 +++++-- .../shared/tag-list/tag-list.component.scss | 8 +++++ src/app/shared/tag-list/tag-list.component.ts | 2 ++ src/app/shared/types.ts | 1 + src/app/tags/tags-resolver.service.spec.ts | 36 ++++++++++++++++++- src/app/tags/tags-resolver.service.ts | 10 ++++++ .../welcome-navigation.component.html | 10 ++++-- .../welcome-navigation.component.scss | 11 ++++++ .../welcome-tags/welcome-tags.component.html | 2 +- .../welcome-tags.component.spec.ts | 10 ++++++ .../welcome-tags/welcome-tags.component.ts | 14 ++++---- 16 files changed, 165 insertions(+), 19 deletions(-) diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 97371e6..ed9c5db 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -83,7 +83,12 @@ import { TagResolver } from './tag/tag-resolver.service'; import { ContactResolver } from './contact/contact-resolver.service'; import { ThreadsResolver } from './messages/threads-resolver.service'; import { MessagesResolver } from './messages-with-user/messages-resolver.service'; -import { TagsRelatedToMyTagsResolver, RandomTagsResolver, TagsRelatedToTagResolver } from './tags/tags-resolver.service'; +import { + PopularTagsResolver, + TagsRelatedToMyTagsResolver, + RandomTagsResolver, + TagsRelatedToTagResolver +} from './tags/tags-resolver.service'; import { PeopleWithMyTagsResolver, NewPeopleResolver, PeopleWithTagResolver } from './people/people-resolver.service'; // services @@ -377,7 +382,8 @@ const routes: Routes = [ path: '1', component: WelcomeTagsComponent, resolve: { - userTags: LoggedUserTagsResolver + userTags: LoggedUserTagsResolver, + popularTags: PopularTagsResolver } }, { @@ -430,6 +436,7 @@ const routeWrapper: Routes = [ TagsRelatedToMyTagsResolver, TagsRelatedToTagResolver, RandomTagsResolver, + PopularTagsResolver, PeopleWithMyTagsResolver, PeopleWithTagResolver, NewPeopleResolver, diff --git a/src/app/model.service.spec.ts b/src/app/model.service.spec.ts index 020680d..94bb223 100644 --- a/src/app/model.service.spec.ts +++ b/src/app/model.service.spec.ts @@ -157,6 +157,30 @@ describe('ModelService', () => { })); }); + describe('findPopularTags(limit = 10)', () => { + it('should success', async(async () => { + const findPopularTagsPromise = service.findPopularTags(4); + + const req = httpMock.expectOne(`${baseUrl}/tags?sort=-popularCount&page[offset]=0&page[limit]=4`); + + expect(req.request.method).toEqual('GET'); + expect(req.request.headers.get('content-type')).toEqual('application/vnd.api+json'); + expect(req.request.headers.has('authorization')).toEqual(true); + + req.flush({ + data: [ + { type: 'tags', id: 'tag3', attributes: { popularCount: 25 } }, + { type: 'tags', id: 'tag4', attributes: { popularCount: 12 } }, + { type: 'tags', id: 'tag6', attributes: { popularCount: 11 } }, + { type: 'tags', id: 'tag0', attributes: { popularCount: 7 } } + ] + }); + + const response = await findPopularTagsPromise; + expect(response.length).toEqual(4); + })); + }); + describe('findNewUsers()', () => { it('should success', async(async () => { diff --git a/src/app/model.service.ts b/src/app/model.service.ts index fb7ed69..fd7c43c 100644 --- a/src/app/model.service.ts +++ b/src/app/model.service.ts @@ -519,6 +519,19 @@ export class ModelService { return tags; } + public async findPopularTags(limit = 10): Promise { + const headers = this.loggedHeaders; + + const response: any = await this.http + .get(`${this.baseUrl}/tags?sort=-popularCount&page[offset]=0&page[limit]=${limit}`, { headers }) + .toPromise(); + + const { data } = response; + + const tags: Tag[] = data.map(tag => this.deserializeTag(tag)); + return tags; + } + public async readMessagesWith(username: string): Promise { const headers = this.loggedHeaders; @@ -1070,7 +1083,13 @@ export class ModelService { } private deserializeTag(tagData: any): Tag { - return { tagname: tagData.id }; + const tag: Tag = { tagname: tagData.id }; + + if (tagData.attributes && tagData.attributes.hasOwnProperty('popularCount')) { + tag.popularCount = tagData.attributes.popularCount; + } + + return tag; } private deserializeUserTag(rawUserTag: any, included: any[]): UserTag { diff --git a/src/app/shared/select-location/select-location.component.html b/src/app/shared/select-location/select-location.component.html index 4c2c6af..7c49c0f 100644 --- a/src/app/shared/select-location/select-location.component.html +++ b/src/app/shared/select-location/select-location.component.html @@ -1,6 +1,7 @@ -
+
diff --git a/src/app/shared/select-location/select-location.component.scss b/src/app/shared/select-location/select-location.component.scss index bfd801f..3d5f7d8 100644 --- a/src/app/shared/select-location/select-location.component.scss +++ b/src/app/shared/select-location/select-location.component.scss @@ -18,3 +18,10 @@ background-repeat: no-repeat; z-index: 1000; } + +.save-button { + position: absolute; + z-index: 999; // above map but below header menu + top: 16px; + right: 16px; +} diff --git a/src/app/shared/tag-list/tag-list.component.html b/src/app/shared/tag-list/tag-list.component.html index b51e41c..05136f2 100644 --- a/src/app/shared/tag-list/tag-list.component.html +++ b/src/app/shared/tag-list/tag-list.component.html @@ -1,4 +1,12 @@ -
    +
    • {{tag.tagname}}
      • + [routerLink]="'/tag/' + tag.tagname">{{tag.tagname}} + {{tag.popularCount}}× + +
    + +
      +
    • {{tag.tagname}} + {{tag.popularCount}}× +
    diff --git a/src/app/shared/tag-list/tag-list.component.scss b/src/app/shared/tag-list/tag-list.component.scss index f72fc24..3a237ee 100644 --- a/src/app/shared/tag-list/tag-list.component.scss +++ b/src/app/shared/tag-list/tag-list.component.scss @@ -12,4 +12,12 @@ li { cursor: pointer; background-color: $accent; color: white; + + &.link-disabled { + cursor: auto; + } +} + +.tag-popularity { + font-size: small; } diff --git a/src/app/shared/tag-list/tag-list.component.ts b/src/app/shared/tag-list/tag-list.component.ts index ebbf00b..d2ed06b 100644 --- a/src/app/shared/tag-list/tag-list.component.ts +++ b/src/app/shared/tag-list/tag-list.component.ts @@ -11,6 +11,8 @@ export class TagListComponent implements OnInit { @Input() tags: Tag[] = []; + @Input() linksDisabled = false; + constructor() { } ngOnInit() { diff --git a/src/app/shared/types.ts b/src/app/shared/types.ts index d7a4e01..35fb3d0 100644 --- a/src/app/shared/types.ts +++ b/src/app/shared/types.ts @@ -26,6 +26,7 @@ export class User { export class Tag { constructor(public tagname: string, + public popularCount?: number, public created?: number) { // TODO fix the creator diff --git a/src/app/tags/tags-resolver.service.spec.ts b/src/app/tags/tags-resolver.service.spec.ts index 443ab52..5dafed7 100644 --- a/src/app/tags/tags-resolver.service.spec.ts +++ b/src/app/tags/tags-resolver.service.spec.ts @@ -1,6 +1,10 @@ import { TestBed, inject } from '@angular/core/testing'; -import { TagsRelatedToMyTagsResolver, RandomTagsResolver, TagsRelatedToTagResolver } from './tags-resolver.service'; +import { + PopularTagsResolver, + TagsRelatedToMyTagsResolver, + RandomTagsResolver, + TagsRelatedToTagResolver } from './tags-resolver.service'; import { ModelService } from '../model.service'; @@ -22,6 +26,14 @@ class ModelStubService { ]; } + public async findPopularTags(): Promise { + return [ + { tagname: 'tag1', popularCount: 21 }, + { tagname: 'tag0', popularCount: 12 }, + { tagname: 'tag2', popularCount: 2 } + ]; + } + public async findTagsByTags(tagsIn: Tag[]): Promise { // the tags to choose from @@ -86,6 +98,28 @@ describe('RandomTagsResolver', () => { })); }); +describe('PopularTagsResolver', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [ + PopularTagsResolver, + { provide: ModelService, useClass: ModelStubService } + ], + }); + }); + + it('should be created', inject([PopularTagsResolver], (service: PopularTagsResolver) => { + expect(service).toBeTruthy(); + })); + + it('should resolve with some tags', inject([PopularTagsResolver], async (service: PopularTagsResolver) => { + expect(service).toBeTruthy(); + const tags = await service.resolve(); + + expect(tags.length).toEqual(3); + })); +}); + describe('TagsRelatedToTagResolver', () => { beforeEach(() => { TestBed.configureTestingModule({ diff --git a/src/app/tags/tags-resolver.service.ts b/src/app/tags/tags-resolver.service.ts index 8923eaf..27e25d2 100644 --- a/src/app/tags/tags-resolver.service.ts +++ b/src/app/tags/tags-resolver.service.ts @@ -13,6 +13,16 @@ export class TagsRelatedToMyTagsResolver implements Resolve { } } +@Injectable() +export class PopularTagsResolver implements Resolve { + + constructor(private model: ModelService) { } + + async resolve(): Promise { + return await this.model.findPopularTags(); + } +} + @Injectable() export class RandomTagsResolver implements Resolve { diff --git a/src/app/welcome/welcome-navigation/welcome-navigation.component.html b/src/app/welcome/welcome-navigation/welcome-navigation.component.html index d5b08ab..63cf775 100644 --- a/src/app/welcome/welcome-navigation/welcome-navigation.component.html +++ b/src/app/welcome/welcome-navigation/welcome-navigation.component.html @@ -1,5 +1,9 @@ diff --git a/src/app/welcome/welcome-navigation/welcome-navigation.component.scss b/src/app/welcome/welcome-navigation/welcome-navigation.component.scss index e69de29..fe9891c 100644 --- a/src/app/welcome/welcome-navigation/welcome-navigation.component.scss +++ b/src/app/welcome/welcome-navigation/welcome-navigation.component.scss @@ -0,0 +1,11 @@ +* { + text-align: center; +} + +.skip-link { + color: gray; +} + +.link-button { + margin: 0.5em; +} diff --git a/src/app/welcome/welcome-tags/welcome-tags.component.html b/src/app/welcome/welcome-tags/welcome-tags.component.html index 1cb68d3..5558b53 100644 --- a/src/app/welcome/welcome-tags/welcome-tags.component.html +++ b/src/app/welcome/welcome-tags/welcome-tags.component.html @@ -6,7 +6,7 @@

    What do you care about?

    Here are a few popular tags to inspire you:

    - +
    diff --git a/src/app/welcome/welcome-tags/welcome-tags.component.spec.ts b/src/app/welcome/welcome-tags/welcome-tags.component.spec.ts index 2aaa09c..921b3c1 100644 --- a/src/app/welcome/welcome-tags/welcome-tags.component.spec.ts +++ b/src/app/welcome/welcome-tags/welcome-tags.component.spec.ts @@ -1,12 +1,19 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { Component, Input } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; +import { Observable } from 'rxjs/Observable'; import { WelcomeTagsComponent } from './welcome-tags.component'; import { WelcomeNavigationStubComponent } from '../../../testing/welcome-navigation-stub'; +class ActivatedRouteStub { + data = Observable.of({ popularTags: [] }); +} + @Component({ selector: 'app-tag-list', template: '' }) class TagListStubComponent { @Input() tags = []; + @Input() linksDisabled: boolean; } @Component({ selector: 'app-user-edit-tags', template: '' }) @@ -23,6 +30,9 @@ describe('WelcomeTagsComponent', () => { UserEditTagsStubComponent, WelcomeNavigationStubComponent, WelcomeTagsComponent + ], + providers: [ + { provide: ActivatedRoute, useClass: ActivatedRouteStub } ] }) .compileComponents(); diff --git a/src/app/welcome/welcome-tags/welcome-tags.component.ts b/src/app/welcome/welcome-tags/welcome-tags.component.ts index 5d1ec2b..f81d50b 100644 --- a/src/app/welcome/welcome-tags/welcome-tags.component.ts +++ b/src/app/welcome/welcome-tags/welcome-tags.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; import { Tag } from '../../shared/types'; @@ -9,16 +10,15 @@ import { Tag } from '../../shared/types'; }) export class WelcomeTagsComponent implements OnInit { - public popularTags: Tag[] = [ - { tagname: 'popular-tag-0' }, - { tagname: 'popular-tag-1' }, - { tagname: 'popular-tag-2' }, - { tagname: 'popular-tag-3' } - ]; + public popularTags: Tag[]; - constructor() { } + constructor(private route: ActivatedRoute) { } ngOnInit() { + this.route.data + .subscribe(({ popularTags }: { popularTags: Tag[] }) => { + this.popularTags = popularTags; + }); } } From 47eb6a48ec69df0f8a261faa0175795b0ed07ef6 Mon Sep 17 00:00:00 2001 From: mrkvon Date: Thu, 25 Jan 2018 18:15:03 +0100 Subject: [PATCH 4/5] API change for GET popular tags: popularCount => popularityByUses --- src/app/model.service.spec.ts | 10 +++++----- src/app/model.service.ts | 6 +++--- src/app/shared/tag-list/tag-list.component.html | 4 ++-- src/app/shared/types.ts | 2 +- src/app/tags/tags-resolver.service.spec.ts | 6 +++--- 5 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/app/model.service.spec.ts b/src/app/model.service.spec.ts index 94bb223..198883f 100644 --- a/src/app/model.service.spec.ts +++ b/src/app/model.service.spec.ts @@ -161,7 +161,7 @@ describe('ModelService', () => { it('should success', async(async () => { const findPopularTagsPromise = service.findPopularTags(4); - const req = httpMock.expectOne(`${baseUrl}/tags?sort=-popularCount&page[offset]=0&page[limit]=4`); + const req = httpMock.expectOne(`${baseUrl}/tags?sort=-popularityByUses&page[offset]=0&page[limit]=4`); expect(req.request.method).toEqual('GET'); expect(req.request.headers.get('content-type')).toEqual('application/vnd.api+json'); @@ -169,10 +169,10 @@ describe('ModelService', () => { req.flush({ data: [ - { type: 'tags', id: 'tag3', attributes: { popularCount: 25 } }, - { type: 'tags', id: 'tag4', attributes: { popularCount: 12 } }, - { type: 'tags', id: 'tag6', attributes: { popularCount: 11 } }, - { type: 'tags', id: 'tag0', attributes: { popularCount: 7 } } + { type: 'tags', id: 'tag3', attributes: { popularityByUses: 25 } }, + { type: 'tags', id: 'tag4', attributes: { popularityByUses: 12 } }, + { type: 'tags', id: 'tag6', attributes: { popularityByUses: 11 } }, + { type: 'tags', id: 'tag0', attributes: { popularityByUses: 7 } } ] }); diff --git a/src/app/model.service.ts b/src/app/model.service.ts index fd7c43c..a0de917 100644 --- a/src/app/model.service.ts +++ b/src/app/model.service.ts @@ -523,7 +523,7 @@ export class ModelService { const headers = this.loggedHeaders; const response: any = await this.http - .get(`${this.baseUrl}/tags?sort=-popularCount&page[offset]=0&page[limit]=${limit}`, { headers }) + .get(`${this.baseUrl}/tags?sort=-popularityByUses&page[offset]=0&page[limit]=${limit}`, { headers }) .toPromise(); const { data } = response; @@ -1085,8 +1085,8 @@ export class ModelService { private deserializeTag(tagData: any): Tag { const tag: Tag = { tagname: tagData.id }; - if (tagData.attributes && tagData.attributes.hasOwnProperty('popularCount')) { - tag.popularCount = tagData.attributes.popularCount; + if (tagData.attributes && tagData.attributes.hasOwnProperty('popularityByUses')) { + tag.popularityByUses = tagData.attributes.popularityByUses; } return tag; diff --git a/src/app/shared/tag-list/tag-list.component.html b/src/app/shared/tag-list/tag-list.component.html index 05136f2..94b984a 100644 --- a/src/app/shared/tag-list/tag-list.component.html +++ b/src/app/shared/tag-list/tag-list.component.html @@ -1,12 +1,12 @@
    • {{tag.tagname}} - {{tag.popularCount}}× + {{tag.popularityByUses}}×
    • {{tag.tagname}} - {{tag.popularCount}}× + {{tag.popularityByUses}}×
    diff --git a/src/app/shared/types.ts b/src/app/shared/types.ts index 35fb3d0..6d41027 100644 --- a/src/app/shared/types.ts +++ b/src/app/shared/types.ts @@ -26,7 +26,7 @@ export class User { export class Tag { constructor(public tagname: string, - public popularCount?: number, + public popularityByUses?: number, public created?: number) { // TODO fix the creator diff --git a/src/app/tags/tags-resolver.service.spec.ts b/src/app/tags/tags-resolver.service.spec.ts index 5dafed7..d075394 100644 --- a/src/app/tags/tags-resolver.service.spec.ts +++ b/src/app/tags/tags-resolver.service.spec.ts @@ -28,9 +28,9 @@ class ModelStubService { public async findPopularTags(): Promise { return [ - { tagname: 'tag1', popularCount: 21 }, - { tagname: 'tag0', popularCount: 12 }, - { tagname: 'tag2', popularCount: 2 } + { tagname: 'tag1', popularityByUses: 21 }, + { tagname: 'tag0', popularityByUses: 12 }, + { tagname: 'tag2', popularityByUses: 2 } ]; } From efba4cd137331cf88bd0686583a1925acb140f75 Mon Sep 17 00:00:00 2001 From: mrkvon Date: Fri, 16 Mar 2018 18:57:58 +0100 Subject: [PATCH 5/5] small fixes, text and style of welcome sequence --- src/app/header/header.component.ts | 1 + .../welcome/welcome-finish/welcome-finish.component.html | 7 ++----- .../welcome/welcome-finish/welcome-finish.component.scss | 3 +++ .../welcome-location/welcome-location.component.html | 2 +- .../welcome-location/welcome-location.component.scss | 7 +++++++ src/app/welcome/welcome-start/welcome-start.component.html | 2 +- 6 files changed, 15 insertions(+), 7 deletions(-) diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts index 89f15fc..3782377 100644 --- a/src/app/header/header.component.ts +++ b/src/app/header/header.component.ts @@ -64,6 +64,7 @@ export class HeaderComponent implements OnInit, OnDestroy { * Reloading avatar image */ this.updateAvatarSubscription = this.headerControl.updateAvatar$.subscribe(() => { + if (!this.display) { return; } this.avatar.reload(); }); } diff --git a/src/app/welcome/welcome-finish/welcome-finish.component.html b/src/app/welcome/welcome-finish/welcome-finish.component.html index 10ef5df..edbf7ac 100644 --- a/src/app/welcome/welcome-finish/welcome-finish.component.html +++ b/src/app/welcome/welcome-finish/welcome-finish.component.html @@ -1,8 +1,5 @@ -

    You are all set!

    -
    - Thank you for your effort. -
    +

    You are all set

    diff --git a/src/app/welcome/welcome-finish/welcome-finish.component.scss b/src/app/welcome/welcome-finish/welcome-finish.component.scss index e69de29..3da5b12 100644 --- a/src/app/welcome/welcome-finish/welcome-finish.component.scss +++ b/src/app/welcome/welcome-finish/welcome-finish.component.scss @@ -0,0 +1,3 @@ +* { + text-align: center; +} diff --git a/src/app/welcome/welcome-location/welcome-location.component.html b/src/app/welcome/welcome-location/welcome-location.component.html index 4484c10..d69138f 100644 --- a/src/app/welcome/welcome-location/welcome-location.component.html +++ b/src/app/welcome/welcome-location/welcome-location.component.html @@ -1,7 +1,7 @@

    Where are you?

    -

    You can see others on the map and others may see you.

    +

    You can find others on the map and others may find you.

    diff --git a/src/app/welcome/welcome-location/welcome-location.component.scss b/src/app/welcome/welcome-location/welcome-location.component.scss index e69de29..4839019 100644 --- a/src/app/welcome/welcome-location/welcome-location.component.scss +++ b/src/app/welcome/welcome-location/welcome-location.component.scss @@ -0,0 +1,7 @@ +* { + text-align: center; +} + +section { + margin-bottom: 1em; +} diff --git a/src/app/welcome/welcome-start/welcome-start.component.html b/src/app/welcome/welcome-start/welcome-start.component.html index 5609214..3e07fb8 100644 --- a/src/app/welcome/welcome-start/welcome-start.component.html +++ b/src/app/welcome/welcome-start/welcome-start.component.html @@ -1,6 +1,6 @@ Clathrus mushroom by Carl Linnae -

    Welcome, {{me.username}}!

    +

    Welcome, {{me.username}}