collaborative note editing for public edit notes

Author: calebhiebert

net-api/net-api/Controllers/NotesController.cs

@@ -131,9 +131,15 @@ public async Task<IActionResult> PutNote(Guid id, Note note)
             }
 
             var userId = User.FindFirst(ClaimTypes.NameIdentifier)?.Value;
-            note.UserId = userId;
+            note.UserId = existingNote.UserId;
             note.User = null;
 
+            if (userId != existingNote.UserId)
+            {
+                note.PublicEdit = existingNote.PublicEdit;
+                note.PublicView = existingNote.PublicView;
+            }
+
             _context.Entry(note).State = EntityState.Modified;
 
             try

net-api/net-api/Controllers/UpdateHub.cs

@@ -1,8 +1,11 @@
 using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.SignalR;
+using Microsoft.EntityFrameworkCore;
 using Microsoft.IdentityModel.Tokens;
+using net_api.Models;
 using System;
 using System.IdentityModel.Tokens.Jwt;
+using System.Linq;
 using System.Security.Claims;
 using System.Security.Cryptography;
 using System.Threading.Tasks;
@@ -12,20 +15,93 @@ namespace net_api.Controllers
     [Authorize]
     public class UpdateHub : Hub
     {
+        private readonly IAuthorizationService _auth;
+        private readonly Context _context;
+
+        public UpdateHub(Context context, IAuthorizationService auth)
+        {
+            _context = context;
+            _auth = auth;
+        }
+
         public async Task Authenticate()
         {
             await Groups.AddToGroupAsync(Context.ConnectionId, $"notifications-{Context.User.FindFirst(ClaimTypes.NameIdentifier)?.Value}");
             await Clients.Caller.SendAsync("AuthenticateComplete");
         }
 
-        public async Task SubscribeCampaign(string campaignId)
+        public async Task SubscribeCampaign(Guid campaignId)
         {
-            await Groups.AddToGroupAsync(Context.ConnectionId, $"campaign-{campaignId}");
+            var campaign = await _context.Campaigns
+                .Where(c => c.Id == campaignId)
+                .Include(c => c.Members)
+                .FirstOrDefaultAsync();
+
+            if (campaign == null)
+            {
+                return;
+            }
+
+            var authResult = await _auth.AuthorizeAsync(Context.User, campaign, "CampaignViewPolicy");
+
+            if (authResult.Succeeded)
+            {
+                await Groups.AddToGroupAsync(Context.ConnectionId, $"campaign-{campaignId}");
+            }
         }
 
         public async Task UnsubscribeCampaign(string campaignId)
         {
             await Groups.RemoveFromGroupAsync(Context.ConnectionId, $"campaign-{campaignId}");
         }
+
+        public async Task SubscribeNote(Guid? noteId)
+        {
+            if (noteId != null)
+            {
+                await Groups.AddToGroupAsync(Context.ConnectionId, $"note-{noteId.ToString()}");
+            }
+        }
+
+        public async Task UnsubscribeNote(Guid? noteId)
+        {
+            if (noteId != null)
+            {
+                await Groups.RemoveFromGroupAsync(Context.ConnectionId, $"note-{noteId.ToString()}");
+            }
+        }
+
+        public async Task NoteCursorUpdate(Guid? noteId, CursorUpdate cursorUpdate)
+        {
+            if (noteId == null || cursorUpdate == null)
+            {
+                return;
+            }
+
+            var userId = Context.User.FindFirst(ClaimTypes.NameIdentifier)?.Value;
+
+            var user = await _context.Users
+                .Where(u => u.Id == userId)
+                .FirstOrDefaultAsync();
+
+            if (user == null)
+            {
+                return;
+            }
+
+            await Clients.GroupExcept($"note-{noteId.ToString()}", Context.ConnectionId)
+                .SendAsync("NoteCursorUpdate", new { Id = user.Id, DisplayName = user.Username, NoteId = noteId, Range = cursorUpdate.Range });
+        }
+
+        public async Task NoteDeltaUpdate(Guid? noteId, Object delta)
+        {
+            if (noteId == null || delta == null)
+            {
+                return;
+            }
+
+            await Clients.GroupExcept($"note-{noteId.ToString()}", Context.ConnectionId)
+                .SendAsync("NoteDeltaUpdate", new { Id = noteId, Delta = delta });
+        }
     }
 }

net-api/net-api/Models/CursorUpdate.cs

@@ -0,0 +1,18 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace net_api.Models
+{
+    public class CursorUpdate
+    {
+        public CursorRange Range { get; set; }
+    }
+
+    public class CursorRange
+    {
+        public int Index { get; set; }
+        public int Length { get; set; }
+    }
+}

ui/package.json

@@ -36,6 +36,7 @@
     "protobufjs": "^6.8.8",
     "quill": "^1.3.6",
     "quill-blot-formatter": "^1.0.5",
+    "quill-cursors": "^2.0.3",
     "quill-image-uploader": "^1.0.2",
     "quill-mention": "^2.1.0",
     "rxjs": "~6.4.0",

ui/src/app/login.service.ts

@@ -35,6 +35,7 @@ export class LoginService {
         responseType: 'token',
         redirectUri: `${location.protocol}//${location.host}/callback`,
         audience: 'https://dd.panchem.io',
+        scope: 'openid',
       });
     }
 
@@ -116,10 +117,8 @@ export class LoginService {
           resolve(true);
           this.onLogin.emit();
 
-          // Refresh the login token every 15 minutes as long as the user is on the page
-          setTimeout(() => {
-            this.checkSession();
-          }, 1000 * 60 * 15);
+          // Get a new token right away, this is done because authentication could have succeeded with an old token
+          this.checkSession();
         } catch (err) {
           localStorage.removeItem('auth-token');
           resolve(false);
@@ -144,13 +143,32 @@ export class LoginService {
   public checkSession() {
     const auth = this.getAuth();
 
-    auth.checkSession({}, (err, res) => {
-      if (err) {
-        Sentry.captureException(err);
-      } else {
-        this.saveToken(res.accessToken);
+    auth.checkSession(
+      {
+        domain: environment.auth0Domain,
+        clientID: environment.auth0ClientId,
+        responseType: 'token',
+        redirectUri: `${location.protocol}//${location.host}/callback`,
+        audience: 'https://dd.panchem.io',
+        scope: 'openid',
+      },
+      (err, res) => {
+        if (err) {
+          Sentry.captureException(err);
+        } else {
+          console.log('Refreshed Access Token');
+
+          this.getUserInfo(res.accessToken)
+            .then((userInfo) => {
+              this.saveToken(res.accessToken);
+              this.authData = userInfo;
+            })
+            .catch((err) => {
+              console.log('Error when updating access token', err);
+            });
+        }
       }
-    });
+    );
 
     // Refresh the token every 15 minutes as long as the user is on the page
     setTimeout(() => {

ui/src/app/note/note-editor/note-editor.component.html

@@ -8,6 +8,7 @@
       *ngIf="note"
       [note]="note"
       [editable]="editable"
+      [advancedEditable]="advancedEditable"
       (noteChange)="onNoteChange($event)"
       #noteform
     ></dd-note-form>

ui/src/app/note/note-editor/note-editor.component.ts

@@ -147,6 +147,7 @@ export class NoteEditorComponent implements OnInit {
   }
 
   public async editNote(note: INote) {
+    this.statusText = '';
     this.modal.open().then(() => {
       this.note = undefined;
     });
@@ -185,6 +186,10 @@ export class NoteEditorComponent implements OnInit {
     return this.note.userId === this.loginService.id || this.note.publicEdit;
   }
 
+  public get advancedEditable() {
+    return this.note.userId === this.loginService.id;
+  }
+
   public get user() {
     if (!this.note) {
       return null;

ui/src/app/note/note-form/note-form.component.html

@@ -4,13 +4,24 @@
       simple="true"
       [readOnly]="!editable"
       formControlName="content"
+      (textChange)="textChange($event)"
+      (selectionChange)="selectionChange($event)"
+      [cursorUpdates]="cursorUpdates"
+      [deltaUpdates]="deltaUpdates"
     ></dd-quill>
   </div>
 
-  <div class="form-group" *ngIf="editable">
+  <div class="form-group" *ngIf="advancedEditable">
     <label class="form-switch">
       <input type="checkbox" formControlName="publicView" />
       <i class="form-icon"></i> This note is publicly visible
     </label>
   </div>
+
+  <div class="form-group" *ngIf="advancedEditable">
+    <label class="form-switch">
+      <input type="checkbox" formControlName="publicEdit" />
+      <i class="form-icon"></i> This note is publicly editable
+    </label>
+  </div>
 </form>

ui/src/app/note/note-form/note-form.component.ts

@@ -4,21 +4,29 @@ import {
   Input,
   EventEmitter,
   Output,
-  ElementRef,
-  ViewChild,
-  AfterViewInit,
+  OnDestroy,
 } from '@angular/core';
 import { FormGroup, FormControl } from '@angular/forms';
 import { INote } from 'src/app/note.service';
+import { ICursorUpdate } from 'src/app/quill/quill.component';
+import { LoginService } from 'src/app/login.service';
+import { UpdateHubService, ConnectionState } from 'src/app/update-hub.service';
+import { filter } from 'rxjs/operators';
 
 @Component({
   selector: 'dd-note-form',
   templateUrl: './note-form.component.html',
   styleUrls: ['./note-form.component.css'],
 })
-export class NoteFormComponent implements OnInit {
+export class NoteFormComponent implements OnInit, OnDestroy {
   public formGroup: FormGroup;
 
+  // Events emitted here are passed to the quill instance
+  public cursorUpdates = new EventEmitter<ICursorUpdate>();
+
+  // Events emitted here are passed to the quill instance
+  public deltaUpdates = new EventEmitter<any>();
+
   @Input()
   public set note(note: INote) {
     this._note = note;
@@ -40,7 +48,13 @@ export class NoteFormComponent implements OnInit {
   @Input()
   public editable = false;
 
-  constructor() {}
+  @Input()
+  public advancedEditable = false;
+
+  constructor(
+    private login: LoginService,
+    private updateHub: UpdateHubService
+  ) {}
 
   ngOnInit() {
     this.formGroup = new FormGroup({
@@ -58,5 +72,42 @@ export class NoteFormComponent implements OnInit {
       this.note.content = v.content;
       this.noteChange.emit(this.note);
     });
+
+    this.updateHub.subscribeNote(this.note.id);
+
+    this.updateHub.stateUpdate.subscribe((state) => {
+      if (state === ConnectionState.CONNECTED) {
+        this.updateHub.subscribeNote(this.note.id);
+      }
+    });
+
+    this.updateHub.cursorUpdate
+      .pipe(filter((cu) => cu.noteId === this.note.id))
+      .subscribe((cu) => {
+        this.cursorUpdates.emit(cu);
+      });
+
+    this.updateHub.noteDeltaUpdate
+      .pipe(filter((ndu) => ndu.id === this.note.id))
+      .subscribe((ndu) => {
+        this.deltaUpdates.emit(ndu.delta);
+      });
+  }
+
+  ngOnDestroy() {
+    this.updateHub.sendNoteCursorUpdate(this.note.id, null);
+    this.updateHub.unsubscribeNote(this.note.id);
+  }
+
+  public textChange(delta) {
+    if (this.note.publicEdit) {
+      this.updateHub.sendNoteDeltaUpdate(this.note.id, delta);
+    }
+  }
+
+  public selectionChange(range) {
+    if (this.note.publicEdit) {
+      this.updateHub.sendNoteCursorUpdate(this.note.id, range);
+    }
   }
 }

ui/src/app/note/note-list/note-list.component.html

@@ -4,14 +4,20 @@
     *ngFor="let n of notes"
     (click)="noteSelected(n)"
   >
-    <div class="columns">
+    <div class="columns col-gapless">
       <div class="column">{{ n.title }}</div>
       <div class="column col-auto text-gray text-italic text-right hide-sm">
         {{ getUserText(n.userId) }}
       </div>
       <div class="column text-gray text-italic show-sm col-12">
         {{ getUserText(n.userId) }}
       </div>
+      <div
+        class="column col-auto d-flex align-items-center ml-1"
+        *ngIf="n.publicEdit"
+      >
+        <i class="icon icon-edit"></i>
+      </div>
     </div>
   </div>
 </div>