From d43c6b1ffc5e6c895f9e9f9de6625f17a9755c20 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 14 Jan 2021 14:13:23 +0100 Subject: Implement remote interaction --- .../remote-interaction-routing.module.ts | 23 +++++++++ .../remote-interaction.component.html | 7 +++ .../remote-interaction.component.scss | 2 + .../remote-interaction.component.ts | 56 ++++++++++++++++++++++ .../remote-interaction.module.ts | 26 ++++++++++ .../comment/video-comment-add.component.html | 8 +--- client/src/app/app-routing.module.ts | 6 ++- client/src/app/core/routing/redirect.service.ts | 4 +- .../app/shared/form-validators/user-validators.ts | 11 +++++ .../remote-subscribe.component.html | 6 +-- .../remote-subscribe.component.ts | 37 ++++++++------ .../subscribe-button.component.html | 2 +- server/controllers/webfinger.ts | 5 ++ server/tests/misc-endpoints.ts | 25 ++++++++++ 14 files changed, 189 insertions(+), 29 deletions(-) create mode 100644 client/src/app/+remote-interaction/remote-interaction-routing.module.ts create mode 100644 client/src/app/+remote-interaction/remote-interaction.component.html create mode 100644 client/src/app/+remote-interaction/remote-interaction.component.scss create mode 100644 client/src/app/+remote-interaction/remote-interaction.component.ts create mode 100644 client/src/app/+remote-interaction/remote-interaction.module.ts diff --git a/client/src/app/+remote-interaction/remote-interaction-routing.module.ts b/client/src/app/+remote-interaction/remote-interaction-routing.module.ts new file mode 100644 index 000000000..1dddfb3ba --- /dev/null +++ b/client/src/app/+remote-interaction/remote-interaction-routing.module.ts @@ -0,0 +1,23 @@ +import { NgModule } from '@angular/core' +import { RouterModule, Routes } from '@angular/router' +import { LoginGuard } from '@app/core' +import { RemoteInteractionComponent } from './remote-interaction.component' + +const remoteInteractionRoutes: Routes = [ + { + path: '', + component: RemoteInteractionComponent, + canActivate: [ LoginGuard ], + data: { + meta: { + title: $localize`Remote interaction` + } + } + } +] + +@NgModule({ + imports: [ RouterModule.forChild(remoteInteractionRoutes) ], + exports: [ RouterModule ] +}) +export class RemoteInteractionRoutingModule {} diff --git a/client/src/app/+remote-interaction/remote-interaction.component.html b/client/src/app/+remote-interaction/remote-interaction.component.html new file mode 100644 index 000000000..e59783b9a --- /dev/null +++ b/client/src/app/+remote-interaction/remote-interaction.component.html @@ -0,0 +1,7 @@ +
+ +
+ {{ error }} +
+ +
diff --git a/client/src/app/+remote-interaction/remote-interaction.component.scss b/client/src/app/+remote-interaction/remote-interaction.component.scss new file mode 100644 index 000000000..5e6774739 --- /dev/null +++ b/client/src/app/+remote-interaction/remote-interaction.component.scss @@ -0,0 +1,2 @@ +@import '_variables'; +@import '_mixins'; diff --git a/client/src/app/+remote-interaction/remote-interaction.component.ts b/client/src/app/+remote-interaction/remote-interaction.component.ts new file mode 100644 index 000000000..e24607b24 --- /dev/null +++ b/client/src/app/+remote-interaction/remote-interaction.component.ts @@ -0,0 +1,56 @@ +import { forkJoin } from 'rxjs' +import { Component, OnInit } from '@angular/core' +import { ActivatedRoute, Router } from '@angular/router' +import { VideoChannel } from '@app/shared/shared-main' +import { SearchService } from '@app/shared/shared-search' + +@Component({ + selector: 'my-remote-interaction', + templateUrl: './remote-interaction.component.html', + styleUrls: ['./remote-interaction.component.scss'] +}) +export class RemoteInteractionComponent implements OnInit { + error = '' + + constructor ( + private route: ActivatedRoute, + private router: Router, + private search: SearchService + ) { } + + ngOnInit () { + const uri = this.route.snapshot.queryParams['uri'] + + if (!uri) { + this.error = $localize`URL parameter is missing in URL parameters` + return + } + + this.loadUrl(uri) + } + + private loadUrl (uri: string) { + forkJoin([ + this.search.searchVideos({ search: uri }), + this.search.searchVideoChannels({ search: uri }) + ]).subscribe(([ videoResult, channelResult ]) => { + let redirectUrl: string + + if (videoResult.data.length !== 0) { + const video = videoResult.data[0] + + redirectUrl = '/videos/watch/' + video.uuid + } else if (channelResult.data.length !== 0) { + const channel = new VideoChannel(channelResult.data[0]) + + redirectUrl = '/video-channels/' + channel.nameWithHost + } else { + this.error = $localize`Cannot access to the remote resource` + return + } + + this.router.navigateByUrl(redirectUrl) + }) + } + +} diff --git a/client/src/app/+remote-interaction/remote-interaction.module.ts b/client/src/app/+remote-interaction/remote-interaction.module.ts new file mode 100644 index 000000000..9f9f1cdfd --- /dev/null +++ b/client/src/app/+remote-interaction/remote-interaction.module.ts @@ -0,0 +1,26 @@ +import { CommonModule } from '@angular/common' +import { NgModule } from '@angular/core' +import { SharedSearchModule } from '@app/shared/shared-search' +import { RemoteInteractionRoutingModule } from './remote-interaction-routing.module' +import { RemoteInteractionComponent } from './remote-interaction.component' + +@NgModule({ + imports: [ + CommonModule, + + SharedSearchModule, + + RemoteInteractionRoutingModule + ], + + declarations: [ + RemoteInteractionComponent + ], + + exports: [ + RemoteInteractionComponent + ], + + providers: [] +}) +export class RemoteInteractionModule { } diff --git a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.html b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.html index ca9cd863b..fdefed09a 100644 --- a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.html +++ b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.html @@ -57,13 +57,9 @@
- You can comment using an account on any ActivityPub-compatible instance. - On most platforms, you can find the video by typing its URL in the search bar and then comment it - from within the software's interface. - - - If you have an account on Mastodon or Pleroma, you can open it directly in their interface: + You can comment using an account on any ActivityPub-compatible instance (PeerTube/Mastodon/Pleroma account for example). +
diff --git a/client/src/app/app-routing.module.ts b/client/src/app/app-routing.module.ts index bcae29c9a..7a55a7b8d 100644 --- a/client/src/app/app-routing.module.ts +++ b/client/src/app/app-routing.module.ts @@ -2,9 +2,9 @@ import { NgModule } from '@angular/core' import { RouteReuseStrategy, RouterModule, Routes } from '@angular/router' import { CustomReuseStrategy } from '@app/core/routing/custom-reuse-strategy' import { MenuGuards } from '@app/core/routing/menu-guard.service' +import { POSSIBLE_LOCALES } from '@shared/core-utils/i18n' import { PreloadSelectedModulesList } from './core' import { EmptyComponent } from './empty.component' -import { POSSIBLE_LOCALES } from '@shared/core-utils/i18n' const routes: Routes = [ { @@ -57,6 +57,10 @@ const routes: Routes = [ path: 'videos', loadChildren: () => import('./+videos/videos.module').then(m => m.VideosModule) }, + { + path: 'remote-interaction', + loadChildren: () => import('./+remote-interaction/remote-interaction.module').then(m => m.RemoteInteractionModule) + }, { path: '', component: EmptyComponent // Avoid 404, app component will redirect dynamically diff --git a/client/src/app/core/routing/redirect.service.ts b/client/src/app/core/routing/redirect.service.ts index 4f4b346e2..3218040bf 100644 --- a/client/src/app/core/routing/redirect.service.ts +++ b/client/src/app/core/routing/redirect.service.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core' -import { NavigationEnd, Router } from '@angular/router' +import { NavigationCancel, NavigationEnd, Router } from '@angular/router' import { ServerService } from '../server' @Injectable() @@ -36,7 +36,7 @@ export class RedirectService { // Track previous url this.currentUrl = this.router.url router.events.subscribe(event => { - if (event instanceof NavigationEnd) { + if (event instanceof NavigationEnd || event instanceof NavigationCancel) { this.previousUrl = this.currentUrl this.currentUrl = event.url } diff --git a/client/src/app/shared/form-validators/user-validators.ts b/client/src/app/shared/form-validators/user-validators.ts index a27290035..3f462ca3b 100644 --- a/client/src/app/shared/form-validators/user-validators.ts +++ b/client/src/app/shared/form-validators/user-validators.ts @@ -39,6 +39,17 @@ export const USER_EMAIL_VALIDATOR: BuildFormValidator = { } } +export const USER_HANDLE_VALIDATOR: BuildFormValidator = { + VALIDATORS: [ + Validators.required, + Validators.pattern(/@.+/) + ], + MESSAGES: { + 'required': $localize`Handle is required.`, + 'pattern': $localize`Handle must be valid (chocobozzz@example.com).` + } +} + export const USER_EXISTING_PASSWORD_VALIDATOR: BuildFormValidator = { VALIDATORS: [ Validators.required diff --git a/client/src/app/shared/shared-user-subscription/remote-subscribe.component.html b/client/src/app/shared/shared-user-subscription/remote-subscribe.component.html index acfec0a8e..a00c3d1c7 100644 --- a/client/src/app/shared/shared-user-subscription/remote-subscribe.component.html +++ b/client/src/app/shared/shared-user-subscription/remote-subscribe.component.html @@ -15,8 +15,7 @@ - You can subscribe to the channel via any ActivityPub-capable fediverse instance.

- For instance with Mastodon or Pleroma you can type the channel URL in the search box and subscribe there. + You can subscribe to the channel via any ActivityPub-capable fediverse instance (PeerTube, Mastodon or Pleroma for example). @@ -24,8 +23,7 @@ - You can interact with this via any ActivityPub-capable fediverse instance.

- For instance with Mastodon or Pleroma you can type the current URL in the search box and interact with it there. + You can interact with this via any ActivityPub-capable fediverse instance (PeerTube, Mastodon or Pleroma for example). diff --git a/client/src/app/shared/shared-user-subscription/remote-subscribe.component.ts b/client/src/app/shared/shared-user-subscription/remote-subscribe.component.ts index b46c91bf8..666199523 100644 --- a/client/src/app/shared/shared-user-subscription/remote-subscribe.component.ts +++ b/client/src/app/shared/shared-user-subscription/remote-subscribe.component.ts @@ -1,6 +1,7 @@ import { Component, Input, OnInit } from '@angular/core' +import { Notifier } from '@app/core' import { FormReactive, FormValidatorService } from '@app/shared/shared-forms' -import { USER_EMAIL_VALIDATOR } from '../form-validators/user-validators' +import { USER_HANDLE_VALIDATOR } from '../form-validators/user-validators' @Component({ selector: 'my-remote-subscribe', @@ -13,14 +14,15 @@ export class RemoteSubscribeComponent extends FormReactive implements OnInit { @Input() showHelp = false constructor ( - protected formValidatorService: FormValidatorService + protected formValidatorService: FormValidatorService, + private notifier: Notifier ) { super() } ngOnInit () { this.buildForm({ - text: USER_EMAIL_VALIDATOR + text: USER_HANDLE_VALIDATOR }) } @@ -35,22 +37,27 @@ export class RemoteSubscribeComponent extends FormReactive implements OnInit { const address = this.form.value['text'] const [ username, hostname ] = address.split('@') + const protocol = window.location.protocol + // Should not have CORS error because https://tools.ietf.org/html/rfc7033#section-5 - fetch(`https://${hostname}/.well-known/webfinger?resource=acct:${username}@${hostname}`) + fetch(`${protocol}//${hostname}/.well-known/webfinger?resource=acct:${username}@${hostname}`) .then(response => response.json()) - .then(data => new Promise((resolve, reject) => { - if (data && Array.isArray(data.links)) { - const link: { template: string } = data.links.find((link: any) => { - return link && typeof link.template === 'string' && link.rel === 'http://ostatus.org/schema/1.0/subscribe' - }) - - if (link && link.template.includes('{uri}')) { - resolve(link.template.replace('{uri}', encodeURIComponent(this.uri))) - } + .then(data => new Promise((res, rej) => { + if (!data || Array.isArray(data.links) === false) return rej() + + const link: { template: string } = data.links.find((link: any) => { + return link && typeof link.template === 'string' && link.rel === 'http://ostatus.org/schema/1.0/subscribe' + }) + + if (link && link.template.includes('{uri}')) { + res(link.template.replace('{uri}', encodeURIComponent(this.uri))) } - reject() })) .then(window.open) - .catch(err => console.error(err)) + .catch(err => { + console.error(err) + + this.notifier.error($localize`Cannot fetch information of this remote account`) + }) } } diff --git a/client/src/app/shared/shared-user-subscription/subscribe-button.component.html b/client/src/app/shared/shared-user-subscription/subscribe-button.component.html index 607a7e113..75cfc918b 100644 --- a/client/src/app/shared/shared-user-subscription/subscribe-button.component.html +++ b/client/src/app/shared/shared-user-subscription/subscribe-button.component.html @@ -59,7 +59,7 @@ diff --git a/server/controllers/webfinger.ts b/server/controllers/webfinger.ts index 5c308d9ad..885e4498f 100644 --- a/server/controllers/webfinger.ts +++ b/server/controllers/webfinger.ts @@ -1,5 +1,6 @@ import * as cors from 'cors' import * as express from 'express' +import { WEBSERVER } from '@server/initializers/constants' import { asyncMiddleware } from '../middlewares' import { webfingerValidator } from '../middlewares/validators' @@ -31,6 +32,10 @@ function webfingerController (req: express.Request, res: express.Response) { rel: 'self', type: 'application/activity+json', href: actor.url + }, + { + rel: 'http://ostatus.org/schema/1.0/subscribe', + template: WEBSERVER.URL + '/remote-interaction?uri={uri}' } ] } diff --git a/server/tests/misc-endpoints.ts b/server/tests/misc-endpoints.ts index 162b53e18..09e5afcf9 100644 --- a/server/tests/misc-endpoints.ts +++ b/server/tests/misc-endpoints.ts @@ -80,6 +80,31 @@ describe('Test misc endpoints', function () { expect(res.header.location).to.equal('/my-account/settings') }) + + it('Should test webfinger', async function () { + const resource = 'acct:peertube@' + server.host + const accountUrl = server.url + '/accounts/peertube' + + const res = await makeGetRequest({ + url: server.url, + path: '/.well-known/webfinger?resource=' + resource, + statusCodeExpected: HttpStatusCode.OK_200 + }) + + const data = res.body + + expect(data.subject).to.equal(resource) + expect(data.aliases).to.contain(accountUrl) + + const self = data.links.find(l => l.rel === 'self') + expect(self).to.exist + expect(self.type).to.equal('application/activity+json') + expect(self.href).to.equal(accountUrl) + + const remoteInteract = data.links.find(l => l.rel === 'http://ostatus.org/schema/1.0/subscribe') + expect(remoteInteract).to.exist + expect(remoteInteract.template).to.equal(server.url + '/remote-interaction?uri={uri}') + }) }) describe('Test classic static endpoints', function () { -- cgit v1.2.3