7 files changed, 137 insertions, 1 deletions

diff --git a/client/src/app/+my-account/my-account-abuses/my-account-abuses-list.component.ts b/client/src/app/+my-account/my-account-abuses/my-account-abuses-list.component.ts
index e5dd723ff..9316fc0dd 100644
--- a/client/src/app/+my-account/my-account-abuses/my-account-abuses-list.component.ts
+++ b/client/src/app/+my-account/my-account-abuses/my-account-abuses-list.component.ts
@@ -1,4 +1,3 @@
-
 import { Component } from '@angular/core'
 
 @Component({
diff --git a/client/src/app/+my-account/my-account-applications/my-account-applications.component.html b/client/src/app/+my-account/my-account-applications/my-account-applications.component.html
new file mode 100644
index 000000000..62e2cb59b
--- /dev/null
+++ b/client/src/app/+my-account/my-account-applications/my-account-applications.component.html
@@ -0,0 +1,35 @@
+<h1>
+  <my-global-icon iconName="codesandbox" aria-hidden="true"></my-global-icon>
+  <ng-container i18n>Applications</ng-container>
+</h1>
+
+<div class="form-row"> <!-- built-in token grid -->
+  <div class="form-group col-12 col-lg-4 col-xl-3">
+    <h2 i18n class="applications-title">SUBSCRIPTION FEED</h2>
+    <div i18n class="applications-description">
+      Used to retrieve the list of videos of the creators 
+      you subscribed to from outside PeerTube
+    </div>
+  </div>
+
+  <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+
+    <div class="form-group">
+      <label i18n for="feed-url">Feed URL</label>
+      <my-input-readonly-copy [value]="feedUrl"></my-input-readonly-copy>
+    </div>
+    
+    <div class="form-group">
+      <label i18n for="feed-token">Feed Token</label>
+      <my-input-readonly-copy [value]="feedToken"></my-input-readonly-copy>
+    </div>
+
+  </div>
+</div>
+
+<div class="form-row mt-4"> <!-- submit placement block -->
+  <div class="col-md-7 col-xl-5"></div>
+  <div class="col-md-5 col-xl-5">
+    <input (click)="renewToken()" type="submit" i18n-value value="Renew token">
+  </div>
+</div>
diff --git a/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss b/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss
new file mode 100644
index 000000000..704132c03
--- /dev/null
+++ b/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss
@@ -0,0 +1,28 @@
+@import '_variables';
+@import '_mixins';
+
+label {
+  font-weight: $font-regular;
+  font-size: 100%;
+}
+
+.applications-title {
+  @include settings-big-title;
+}
+
+.form-group {
+  max-width: 500px;
+}
+
+input[type=submit] {
+  @include peertube-button;
+  @include orange-button;
+
+  display: flex;
+  margin-left: auto;
+
+  & + .form-error {
+    display: inline;
+    margin-left: 5px;
+  }
+}
diff --git a/client/src/app/+my-account/my-account-applications/my-account-applications.component.ts b/client/src/app/+my-account/my-account-applications/my-account-applications.component.ts
new file mode 100644
index 000000000..c3f09dfe3
--- /dev/null
+++ b/client/src/app/+my-account/my-account-applications/my-account-applications.component.ts
@@ -0,0 +1,57 @@
+
+import { Component, OnInit } from '@angular/core'
+import { AuthService, Notifier, ConfirmService } from '@app/core'
+import { VideoService } from '@app/shared/shared-main'
+import { FeedFormat } from '@shared/models'
+import { Subject, merge } from 'rxjs'
+import { debounceTime } from 'rxjs/operators'
+
+@Component({
+  selector: 'my-account-applications',
+  templateUrl: './my-account-applications.component.html',
+  styleUrls: [ './my-account-applications.component.scss' ]
+})
+export class MyAccountApplicationsComponent implements OnInit {
+  feedUrl: string
+  feedToken: string
+
+  private baseURL = window.location.protocol + '//' + window.location.host
+  private tokenStream = new Subject()
+
+  constructor (
+    private authService: AuthService,
+    private videoService: VideoService,
+    private notifier: Notifier,
+    private confirmService: ConfirmService
+  ) {}
+
+  ngOnInit () {
+    this.feedUrl = this.baseURL
+
+    merge(
+      this.tokenStream,
+      this.authService.userInformationLoaded
+    ).pipe(debounceTime(400))
+     .subscribe(
+       _ => {
+         const user = this.authService.getUser()
+         this.videoService.getVideoSubscriptionFeedUrls(user.account.id)
+                          .then(feeds => this.feedUrl = this.baseURL + feeds.find(f => f.format === FeedFormat.RSS).url)
+                          .then(_ => this.authService.getScopedTokens().then(tokens => this.feedToken = tokens.feedToken))
+       },
+
+       err => {
+         this.notifier.error(err.message)
+       }
+     )
+  }
+
+  async renewToken () {
+    const res = await this.confirmService.confirm('Renewing the token will disallow previously configured clients from retrieving the feed until they use the new token. Proceed?', 'Renew token')
+    if (res === false) return
+
+    await this.authService.renewScopedTokens()
+    this.notifier.success('Token renewed. Update your client configuration accordingly.')
+    this.tokenStream.next()
+  }
+}
diff --git a/client/src/app/+my-account/my-account-routing.module.ts b/client/src/app/+my-account/my-account-routing.module.ts
index 81380ec6e..226a4a7be 100644
--- a/client/src/app/+my-account/my-account-routing.module.ts
+++ b/client/src/app/+my-account/my-account-routing.module.ts
@@ -8,6 +8,7 @@ import { MyAccountServerBlocklistComponent } from './my-account-blocklist/my-acc
 import { MyAccountNotificationsComponent } from './my-account-notifications/my-account-notifications.component'
 import { MyAccountSettingsComponent } from './my-account-settings/my-account-settings.component'
 import { MyAccountComponent } from './my-account.component'
+import { MyAccountApplicationsComponent } from './my-account-applications/my-account-applications.component'
 
 const myAccountRoutes: Routes = [
   {
@@ -117,6 +118,15 @@ const myAccountRoutes: Routes = [
             title: $localize`My abuse reports`
           }
         }
+      },
+      {
+        path: 'applications',
+        component: MyAccountApplicationsComponent,
+        data: {
+          meta: {
+            title: 'Applications'
+          }
+        }
       }
     ]
   }
diff --git a/client/src/app/+my-account/my-account.component.ts b/client/src/app/+my-account/my-account.component.ts
index d6e9d1c15..12966aebb 100644
--- a/client/src/app/+my-account/my-account.component.ts
+++ b/client/src/app/+my-account/my-account.component.ts
@@ -41,6 +41,11 @@ export class MyAccountComponent implements OnInit {
           label: $localize`Abuse reports`,
           routerLink: '/my-account/abuses',
           iconName: 'flag'
+        },
+        {
+          label: $localize`Applications`,
+          routerLink: '/my-account/applications',
+          iconName: 'codesandbox'
         }
       ]
     }
diff --git a/client/src/app/+my-account/my-account.module.ts b/client/src/app/+my-account/my-account.module.ts
index 9e3fbcf65..70bf58aae 100644
--- a/client/src/app/+my-account/my-account.module.ts
+++ b/client/src/app/+my-account/my-account.module.ts
@@ -21,6 +21,7 @@ import { MyAccountNotificationPreferencesComponent } from './my-account-settings
 import { MyAccountProfileComponent } from './my-account-settings/my-account-profile/my-account-profile.component'
 import { MyAccountSettingsComponent } from './my-account-settings/my-account-settings.component'
 import { MyAccountComponent } from './my-account.component'
+import { VideoChangeOwnershipComponent } from './my-account-applications/my-account-applications.component'
 
 @NgModule({
   imports: [
@@ -51,6 +52,7 @@ import { MyAccountComponent } from './my-account.component'
     MyAccountAbusesListComponent,
     MyAccountServerBlocklistComponent,
     MyAccountNotificationsComponent,
+    MyAccountNotificationPreferencesComponent,
     MyAccountNotificationPreferencesComponent
   ],