WIP: Various fixes of user experience bugs and inconveniences

src/app/header/header.component.html

@@ -78,6 +78,7 @@
   <mat-menu #userMenu xPosition="before" [overlapTrigger]="false">
     <a mat-menu-item *ngIf="logged" routerLink="/user/{{username}}">Profile</a>
     <a mat-menu-item *ngIf="logged" routerLink="/profile/edit">Edit Profile</a>
+    <a mat-menu-item *ngIf="logged" routerLink="/user/{{username}}/contacts">Contacts</a>
     <a mat-menu-item *ngIf="loggedUnverified" routerLink="/user/{{username}}/verify-email">Verify Email</a>
     <a mat-menu-item routerLink="/account">Account</a>
     <a mat-menu-item routerLink="/" (click)="logout()">Logout</a>

src/app/model.service.ts

@@ -106,7 +106,12 @@ export class ModelService {
       const { email, token } = response.meta;
       return { email, token };
     } catch (e) {
-      throw { status: e.status, message: 'todo error' };
+      throw { status: e.status, message: getErrorMessage(e) };
+    }
+
+    function getErrorMessage(e): string {
+      const error = e.error.errors[0];
+      return (error.title === 'invalid request') ? error.detail : error.title;
     }
   }
 

src/app/shared/select-location/select-location.component.html

@@ -1,5 +1,11 @@
 <button [disabled]="disabled"
-  (click)="updateLocation()">Update My Location</button>
+  (click)="updateLocation()">Save Location</button>
+<button
+  *ngIf="location"
+  [disabled]="disabled"
+  (click)="removeLocation()"
+>Remove</button>
+<span class="no-location-info" *ngIf="!location">no location saved</span>
 <div class="edit-location-container">
   <div #locationContainer class="edit-location-map"></div>
   <div class="edit-location-overlay"></div>

src/app/shared/select-location/select-location.component.scss

@@ -18,3 +18,8 @@
   background-repeat: no-repeat;
   z-index: 1000;
 }
+
+.no-location-info {
+  font-style: italic;
+  color: grey;
+}

src/app/shared/select-location/select-location.component.spec.ts

@@ -1,14 +1,18 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { SelectLocationComponent } from './select-location.component';
+import { NotificationsService } from 'app/notifications/notifications.service';
 
 describe('SelectLocationComponent', () => {
   let component: SelectLocationComponent;
   let fixture: ComponentFixture<SelectLocationComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ SelectLocationComponent ]
+      declarations: [ SelectLocationComponent ],
+      providers: [
+        NotificationsService
+      ]
     })
     .compileComponents();
   }));

src/app/shared/select-location/select-location.component.ts

@@ -1,10 +1,10 @@
 import { Component, OnInit, Input, Output, ViewChild, ElementRef, EventEmitter } from '@angular/core';
-
 import { inRange } from 'lodash';
-
 import { LatLng, Map, TileLayer } from 'leaflet';
 import 'leaflet';
 
+import { NotificationsService } from 'app/notifications/notifications.service';
+
 @Component({
   selector: 'app-select-location',
   templateUrl: './select-location.component.html',
@@ -23,16 +23,18 @@ export class SelectLocationComponent implements OnInit {
   @Input() disabled = false;
 
   // tslint:disable-next-line:no-output-on-prefix
-  @Output() public onSubmit = new EventEmitter<[number, number]>();
+  @Output() public submit = new EventEmitter<[number, number]>();
 
-  constructor() { }
+  constructor(private notify: NotificationsService) { }
 
   ngOnInit() {
     const location = (this.location) ? this.location : [0, 0];
 
+    const zoom = (this.location) ? 8 : 1;
+
     this.map = new Map(this.locationContainer.nativeElement, {
       center: new LatLng(location[0], location[1]),
-      zoom: 8,
+      zoom,
       scrollWheelZoom: 'center', // zoom to the center point
       layers: [
         new TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
@@ -69,7 +71,18 @@ export class SelectLocationComponent implements OnInit {
     const { lat, lng } = this.map.getCenter();
     const location: [number, number] = [lat, lng];
 
-    this.onSubmit.emit(location);
+    // prevent saving the null island
+    if (location[0] === 0 && location[1] === 0) {
+      this.notify.error('Please choose a non-default location.');
+
+      return;
+    }
+
+    this.submit.emit(location);
+  }
+
+  public removeLocation() {
+    this.submit.emit(null);
   }
 
 }

src/app/user-edit/user-edit-location/user-edit-location.component.html

@@ -1,2 +1,2 @@
-<app-select-location [location]="user.preciseLocation" (onSubmit)="updateLocation($event)" [disabled]="isSelectLocationDisabled">
+<app-select-location [location]="user.preciseLocation" (submit)="updateLocation($event)" [disabled]="isSelectLocationDisabled">
 </app-select-location>

src/app/user-edit/user-edit-location/user-edit-location.component.spec.ts

@@ -5,9 +5,9 @@ import { By } from '@angular/platform-browser';
 import { ActivatedRoute } from '@angular/router';
 import { Observable } from 'rxjs/Observable';
 
-import { ModelService } from '../../model.service';
-import { NotificationsService } from '../../notifications/notifications.service';
-import { User } from '../../shared/types';
+import { ModelService } from 'app/model.service';
+import { NotificationsService } from 'app/notifications/notifications.service';
+import { User } from 'app/shared/types';
 
 import { UserEditLocationComponent } from './user-edit-location.component';
 
@@ -16,7 +16,7 @@ class SelectLocationStubComponent {
   @Input() location;
   @Input() disabled;
   // tslint:disable-next-line:no-output-on-prefix
-  @Output() onSubmit = new EventEmitter<[number, number]>();
+  @Output() submit = new EventEmitter<[number, number]>();
 }
 
 class ActivatedRouteStub {
@@ -70,13 +70,27 @@ describe('UserEditLocationComponent', () => {
 
     // emit the location-update event
     const selectLocation = fixture.debugElement.query(By.css('app-select-location'));
-    selectLocation.componentInstance.onSubmit.emit([7, 9]);
+    selectLocation.componentInstance.submit.emit([7, 9]);
 
     // wait for model.updateUser to resolve
     tick();
 
     expect(spyNotificationsInfo.calls.count()).toEqual(1);
 
-    expect(spyNotificationsInfo.calls.first().args[0]).toEqual('Your location was updated.');
+    expect(spyNotificationsInfo.calls.first().args[0]).toEqual('Your location was saved.');
+  }));
+
+  it('should notify about success after a successful removal', fakeAsync(() => {
+
+    // emit the location-update event
+    const selectLocation = fixture.debugElement.query(By.css('app-select-location'));
+    selectLocation.componentInstance.submit.emit(null);
+
+    // wait for model.updateUser to resolve
+    tick();
+
+    expect(spyNotificationsInfo.calls.count()).toEqual(1);
+
+    expect(spyNotificationsInfo.calls.first().args[0]).toEqual('Your location was removed.');
   }));
 });

src/app/user-edit/user-edit-location/user-edit-location.component.ts

@@ -25,7 +25,10 @@ export class UserEditLocationComponent implements OnInit {
     });
   }
 
-  async updateLocation(location: [number, number]) {
+  /**
+   * Save or remove the location.
+   */
+  async updateLocation(location: [number, number]|null) {
     this.isSelectLocationDisabled = true;
 
     const updatedUser = await this.model.updateUser(this.user.username, { location });
@@ -34,7 +37,8 @@ export class UserEditLocationComponent implements OnInit {
 
     this.isSelectLocationDisabled = false;
 
-    this.notify.info('Your location was updated.');
+    // notify about success
+    const savedOrRemoved = (location) ? 'saved' : 'removed';
+    this.notify.info(`Your location was ${savedOrRemoved}.`);
   }
-
 }

src/app/user/contacts/user-contact/user-contact.component.html

@@ -1,12 +1,39 @@
 <div class="user-contact-wrapper">
   <a routerLink="/user/{{contact.from.username}}">
     <app-avatar class="user-contact-avatar" [username]="contact.from.username"></app-avatar>
-    <div *ngIf="contact.from.givenName + contact.from.familyName" class="contact-name">{{contact.from.givenName}} {{contact.from.familyName}}</div>
-    <div class="contact-username-trust">
+  </a>
+  <div *ngIf="contact.from.givenName + contact.from.familyName" class="contact-name">
+    <a routerLink="/user/{{contact.from.username}}">
+      {{contact.from.givenName}} {{contact.from.familyName}}
+    </a>
+  </div>
+  <div class="contact-username-trust">
+    <a routerLink="/user/{{contact.from.username}}">
       <span class="contact-username">{{contact.from.username}}</span>
-      <span *ngIf="contact.trust" class="contact-trust"[ngClass]="'contact-trust-' + contact.trust">&#9679;</span>
+    </a>
+    <span
+      *ngIf="contact.trust"
+      class="contact-trust"
+      [title]="trustLevelDescription"
+      [ngClass]="'contact-trust-' + contact.trust"
+    >&#9679;</span>
+    <span
+      *ngIf="contact.reference"
+      class="contact-reference-toggle"
+    >
+      <mat-icon (click)="toggleReferenceVisibility()">subject</mat-icon>
+    </span>
+  </div>
+  <div
+    class="contact-reference"
+    *ngIf="referenceVisibility">
+    <div class="reference-label">
+      reference:
     </div>
-  </a>
+    <app-editor-output
+      [value]="contact.reference">
+    </app-editor-output>
+  </div>
 
   <div class="contact-actions" *ngIf="!contact.isConfirmed">
     <div><i>pending</i></div>

src/app/user/contacts/user-contact/user-contact.component.scss

@@ -7,6 +7,8 @@ $trust-diameter: 1em;
 $trust-color-1: green;
 $trust-color-2: yellow;
 
+$content-padding: ($contact-width - $avatar-size)/2;
+
 .user-contact-wrapper {
   width: $contact-width;
   border: 3px solid $darker;
@@ -18,12 +20,13 @@ $trust-color-2: yellow;
   width: $avatar-size;
   height: $avatar-size;
   display: block;
-  margin: ($contact-width - $avatar-size)/2 auto;
+  margin: $content-padding auto;
 }
 
 .contact-username-trust {
   text-align: center;
   display: block;
+  padding-bottom: $content-padding;
 }
 
 .contact-trust-1 {
@@ -42,10 +45,36 @@ $trust-color-2: yellow;
   color: $trust-color-1;
 }
 
+.contact-trust {
+  cursor: default;
+}
+
 .contact-username {
   color: gray;
 }
 
 .contact-actions {
   text-align: center;
 }
+
+.contact-reference-toggle {
+  cursor: pointer;
+
+  mat-icon {
+    height: 1em;
+    width: 1em;
+    font-size: 1em;
+    vertical-align: middle;
+  }
+}
+
+.contact-reference {
+  font-size: small;
+  text-align: justify;
+  padding: 0 $content-padding $content-padding;
+
+  .reference-label {
+    color: grey;
+    font-style: italic;
+  }
+}

src/app/user/contacts/user-contact/user-contact.component.spec.ts

@@ -1,11 +1,11 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { RouterTestingModule } from '@angular/router/testing';
 import { Input, Component } from '@angular/core';
 
 import { UserContactComponent } from './user-contact.component';
-
-import { Contact } from '../../../shared/types';
-import { RouterLinkStubDirective } from '../../../../testing/router-stubs';
+import { Contact } from 'app/shared/types';
+import { EditorOutputComponent } from 'app/shared/editor-output/editor-output.component';
+import { MaterialModule } from 'app/material.module';
 
 @Component({ selector: 'app-avatar', template: '' })
 class AvatarStubComponent {
@@ -19,10 +19,14 @@ describe('UserContactComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [
-        UserContactComponent,
-        RouterLinkStubDirective,
-        AvatarStubComponent
+        AvatarStubComponent,
+        EditorOutputComponent,
+        UserContactComponent
       ],
+      imports: [
+        MaterialModule,
+        RouterTestingModule
+      ]
     })
     .compileComponents();
   }));

src/app/user/contacts/user-contact/user-contact.component.ts

@@ -15,9 +15,40 @@ export class UserContactComponent implements OnInit {
   @Input()
   public contact: Contact;
 
+  public referenceVisibility = false;
+
+  // TODO this should be dried
+  public trustLevels = [
+    {
+      value: 1,
+      label: 'some trust: not met in reality'
+    },
+    {
+      value: 2,
+      label: 'trust: acquaintance, friend, ...'
+    },
+    {
+      value: 4,
+      label: 'high trust: good friend, collaborator, ...'
+    },
+    {
+      value: 8,
+      label: 'full trust: close friend, family, long term collaborator, ...'
+    }
+  ];
+
   constructor() { }
 
   ngOnInit() {
   }
 
+  get trustLevelDescription(): string {
+    const level = this.trustLevels.find(lvl => lvl.value === this.contact.trust);
+    return level.label;
+  }
+
+  public toggleReferenceVisibility() {
+    this.referenceVisibility = !this.referenceVisibility;
+  }
+
 }

src/app/verify-email-code/verify-email-code.component.html

@@ -0,0 +1,5 @@
+<div *ngIf="verifying">
+  verifying...
+</div>
+
+<app-fof *ngIf="failed" [message]="errorMessage"></app-fof>