NIP-76: Private Channels - Draft 2 - Includes Client Implementation and Tool kit library

package.json

@@ -38,6 +38,7 @@
     "@twogate/ngx-photo-gallery": "^1.4.0",
     "@types/sharedworker": "^0.0.91",
     "angularx-qrcode": "^15.0.1",
+    "animiq-nip76-tools": "file:../../animiq-nip76-tools/dist",
     "dexie": "^3.2.3",
     "html5-qrcode": "^2.3.7",
     "idb": "^7.1.1",

src/app/app-routing.module.ts

@@ -33,6 +33,9 @@ import { LoginComponent } from './connect/login/login';
 import { CreateProfileComponent } from './connect/create/create';
 import { EditorBadgesComponent } from './editor-badges/editor';
 import { BadgeComponent } from './badge/badge';
+import { Nip76MainComponent } from './nip76/nip76-main/nip76-main.component';
+import { Nip76DemoService } from './nip76/demo-only/nip76-demo.service';
+import { Nip76DemoStarterComponent } from './nip76/demo-only/nip76-demo-starter/nip76-demo-starter.component';
 
 const routes: Routes = [
   {
@@ -139,6 +142,32 @@ const routes: Routes = [
       data: LoadingResolverService,
     },
   },
+  {
+    path: 'private-channels',
+    component: Nip76MainComponent,
+    canActivate: [AuthGuard],
+    resolve: {
+      data: LoadingResolverService,
+    },
+  },
+  {
+    path: 'private-channels/sent-rsvps',
+    component: Nip76MainComponent,
+    canActivate: [AuthGuard],
+    data: { tabIndex: 1 },
+    resolve: {
+      data: LoadingResolverService,
+    },
+  },  
+  {
+    path: 'private-channels/:channelPubKey/notes',
+    component: Nip76MainComponent,
+    canActivate: [AuthGuard],
+    data: { tabIndex: 3 },
+    resolve: {
+      data: LoadingResolverService,
+    },
+  },
   {
     path: 'badges/:id',
     component: BadgesComponent,

src/app/app.css

@@ -254,6 +254,9 @@ header {
   overscroll-behavior-y: contain;
   overflow-x: hidden;
   overflow-y: overlay !important;
+
+  flex-direction: column;
+  display: flex;
 }
 
 .app-mediaplayer {

src/app/app.html

@@ -175,6 +175,10 @@ <h3><span *ngIf="profile?.name">@</span>{{ profile?.name }}</h3>
           <mat-icon>badge</mat-icon>
           <span>Badges</span>
         </a>
+        <a [routerLink]="['/private-channels']" mat-menu-item (click)="toggleProfileMenu()" [routerLinkActiveOptions]="{ exact: true }" routerLinkActive="active">
+          <mat-icon>key</mat-icon>
+          <span>Private Channels</span>
+        </a>
         <a [routerLink]="['/settings']" mat-menu-item (click)="toggleProfileMenu()" [routerLinkActiveOptions]="{ exact: true }" routerLinkActive="active">
           <mat-icon>settings</mat-icon>
           <span>Settings</span>

src/app/app.module.ts

@@ -153,6 +153,19 @@ import { BadgeComponent } from './badge/badge';
 import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 import { DragScrollModule } from 'ngx-drag-scroll';
 import { ZappersListDialogComponent } from './shared/zappers-list-dialog/zappers-list-dialog.component';
+import { Nip76MainComponent } from './nip76/nip76-main/nip76-main.component';
+import { AddChannelDialog } from './nip76/nip76-add-channel-dialog/add-channel-dialog.component';
+import { Nip76EventButtonsComponent } from './nip76/nip76-event-buttons/nip76-event-buttons.component';
+import { Nip76EventThreadComponent } from './nip76/nip76-event-thread/nip76-event-thread.component';
+import { Nip76ContentComponent } from './nip76/nip76-content/nip76-event-content.component';
+import { Nip76AddInvitationComponent } from './nip76/nip76-add-invitation/nip76-add-invitation.component';
+import { Nip76DiagnosticsComponent } from './nip76/nip76-diagnostics/nip76-diagnostics.component';
+import { Nip76ChannelHeaderComponent } from './nip76/nip76-channel/nip76-channel.component';
+import { Nip76ChannelNotesComponent } from './nip76/nip76-channel-notes/nip76-channel-notes.component';
+import { Nip76RsvpsSentComponent } from './nip76/nip76-rsvps-sent/nip76-rsvps-sent.component';
+import { Nip76DemoService } from './nip76/demo-only/nip76-demo.service';
+import { Nip76DemoStarterComponent, Nip76DemoCreateComponent, Nip76DemoKeyComponent } from './nip76/demo-only/nip76-demo-starter/nip76-demo-starter.component';
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -244,6 +257,19 @@ import { ZappersListDialogComponent } from './shared/zappers-list-dialog/zappers
     TagsComponent,
     BadgeComponent,
     ZappersListDialogComponent,
+    Nip76MainComponent,
+    AddChannelDialog,
+    Nip76EventButtonsComponent,
+    Nip76EventThreadComponent,
+    Nip76ContentComponent,
+    Nip76AddInvitationComponent,
+    Nip76DiagnosticsComponent,
+    Nip76ChannelHeaderComponent,
+    Nip76ChannelNotesComponent,
+    Nip76RsvpsSentComponent,
+    Nip76DemoKeyComponent,
+    Nip76DemoCreateComponent,
+    Nip76DemoStarterComponent
   ],
   imports: [
     HttpClientModule,
@@ -322,7 +348,7 @@ import { ZappersListDialogComponent } from './shared/zappers-list-dialog/zappers
     }),
   ],
   exports: [],
-  providers: [{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'outline' } }, AuthGuardService, AppUpdateService, CheckForUpdateService, ChatService, UserService],
+  providers: [{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'outline' } }, AuthGuardService, AppUpdateService, CheckForUpdateService, ChatService, UserService, Nip76DemoService],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

src/app/nip76/demo-only/nip76-demo-starter/nip76-demo-starter.component.html

@@ -0,0 +1,18 @@
+<mat-card class="intro">
+    <b>Thanks for coming to checkout the Nip76 Private Channels Demo.</b>
+    <p>
+        You may use your own private nostr key, but we understand why many users would be hesitant
+        to do this.  If so, please feel free to use a demo profile like
+        <a class="action-link" (click)="copyKey('Alice')">Alice</a> 
+        or <a class="action-link" (click)="copyKey('Bob')">Bob</a>,
+        or create an entirely new user.
+    </p>
+    <div  class="menubar">
+        <button class="menubar-button" mat-flat-button (click)="demoUserType = 'existing'"
+            [color]="demoUserType === 'existing' ? 'primary' : 'secondary'"> Use Existing User </button>
+        <button class="menubar-button" mat-flat-button (click)="demoUserType = 'new'"
+            [color]="demoUserType === 'new' ? 'primary' : 'secondary'"> Create New User </button>
+    </div>
+</mat-card>
+<nip76-demo-key *ngIf="demoUserType === 'existing'"></nip76-demo-key>
+<nip76-demo-create *ngIf="demoUserType === 'new'"></nip76-demo-create>

src/app/nip76/demo-only/nip76-demo-starter/nip76-demo-starter.component.scss

@@ -0,0 +1,28 @@
+.intro {
+    position: absolute;
+    top: 86px;
+    padding: 8px;
+    left: 198px;
+    z-index: 1000;
+    width: 66%;
+    background-color: floralwhite;
+    border-radius: 20px;
+}
+
+.menubar {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+.menubar-button {
+    display: flex;
+}
+
+.action-link {
+    cursor: pointer;
+}
+
+p {
+    margin: 4px 0px;
+}

src/app/nip76/demo-only/nip76-demo-starter/nip76-demo-starter.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Nip76DemoStarterComponent } from './nip76-demo-starter.component';
+
+describe('LoginOrCreateNewComponent', () => {
+  let component: Nip76DemoStarterComponent;
+  let fixture: ComponentFixture<Nip76DemoStarterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ Nip76DemoStarterComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(Nip76DemoStarterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/nip76/demo-only/nip76-demo-starter/nip76-demo-starter.component.ts

@@ -0,0 +1,103 @@
+import { Component } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { Router } from '@angular/router';
+import { filter } from 'rxjs';
+import { CreateProfileComponent } from 'src/app/connect/create/create';
+import { ConnectKeyComponent } from 'src/app/connect/key/key';
+import { AuthenticationService } from 'src/app/services/authentication';
+import { DataService } from 'src/app/services/data';
+import { ProfileService } from 'src/app/services/profile';
+import { SecurityService } from 'src/app/services/security';
+import { ThemeService } from 'src/app/services/theme';
+import { Utilities } from 'src/app/services/utilities';
+import { defaultSnackBarOpts } from '../../nip76.service';
+import { Nip76DemoService } from '../nip76-demo.service';
+
+
+
+@Component({
+  selector: 'app-nip76-demo-starter',
+  templateUrl: './nip76-demo-starter.component.html',
+  styleUrls: ['./nip76-demo-starter.component.scss']
+})
+export class Nip76DemoStarterComponent {
+  demoUserType: 'existing' | 'new' = 'existing';
+  constructor(
+    private snackBar: MatSnackBar,
+    private profileService: ProfileService,
+    private router: Router
+  ) { }
+
+  ngOnInit() {
+    this.profileService.profile$.pipe(filter(x => !!x)).subscribe(x => {
+      this.router.navigateByUrl('/private-channels');
+    });
+  }
+
+  copyKey(name: 'Alice' | 'Bob') {
+    const key = {
+      'Alice': 'nsec1y72ekupwshrl6zca2kx439uz23x4fqppc6gg9y9e5up5es06qqxqlcw698',
+      'Bob': 'nsec12l6c5g8e7gt9twyctk0t073trlrf2zzs88240k3d2dmqlyh2hwhq9s2wl3'
+    }[name];
+    navigator.clipboard.writeText(key);
+    this.snackBar.open(`${name}'s key is now in your clipboard.`, 'Hide', defaultSnackBarOpts);
+  }
+}
+
+@Component({
+  selector: 'nip76-demo-key',
+  templateUrl: '../../../connect/key/key.html',
+  styleUrls: ['../../../connect/key/key.css', '../../../connect/connect.css']
+})
+export class Nip76DemoKeyComponent extends ConnectKeyComponent {
+
+  constructor(
+    dialog: MatDialog,
+    theme: ThemeService,
+    private router1: Router,
+    security: SecurityService,
+    nip76DemoService: Nip76DemoService
+
+  ) {
+    super(dialog, theme, router1, security);
+    this.step = 3;
+  }
+
+  override async persistKey() {
+    super.persistKey();
+    setTimeout(() => {
+      this.router1.navigateByUrl('/private-channels');
+    }, 200)
+  }
+
+}
+
+@Component({
+  selector: 'nip76-demo-create',
+  templateUrl: '../../../connect/create/create.html',
+  styleUrls: ['../../../connect/create/create.css', '../../../connect/connect.css']
+})
+export class Nip76DemoCreateComponent extends CreateProfileComponent {
+
+  constructor(
+    utilities: Utilities,
+    dataService: DataService,
+    profileService: ProfileService,
+    authService: AuthenticationService,
+    theme: ThemeService,
+    private router1: Router,
+    security: SecurityService,
+    nip76DemoService: Nip76DemoService
+  ) {
+    super(utilities, dataService, profileService, authService, theme, router1, security)
+  }
+
+  override async persistKey() {
+    super.persistKey();
+    setTimeout(() => {
+      this.router1.navigateByUrl('/private-channels');
+    }, 200)
+  }
+}
+