WIP plugins: add plugin settings/uninstall in client

17 files changed, 404 insertions, 47 deletions

diff --git a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html
index 6bb8bcd75..d4501490f 100644
--- a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html
+++ b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html
@@ -7,7 +7,31 @@
 </div>
 
 <div class="plugins" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true">
-  <div class="section plugin" *ngFor="let plugin of plugins">
-    {{ plugin.name }}
+  <div class="card plugin" *ngFor="let plugin of plugins">
+    <div class="card-body">
+      <div class="first-row">
+        <a class="plugin-name" [routerLink]="getShowRouterLink(plugin)" title="Show plugin settings">{{ plugin.name }}</a>
+
+        <span class="plugin-version">{{ plugin.version }}</span>
+      </div>
+
+      <div class="second-row">
+        <div class="description">{{ plugin.description }}</div>
+
+        <div class="buttons">
+          <a class="action-button action-button-edit grey-button" target="_blank" rel="noopener noreferrer"
+             [href]="plugin.homepage" i18n-title title="Go to the plugin homepage"
+          >
+            <my-global-icon iconName="go"></my-global-icon>
+            <span i18n class="button-label">Homepage</span>
+          </a>
+
+
+          <my-edit-button [routerLink]="getShowRouterLink(plugin)" label="Settings" i18n-label></my-edit-button>
+
+          <my-delete-button (click)="uninstall(plugin)" label="Uninstall" i18n-label></my-delete-button>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
diff --git a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss
index 9e98fcd34..f250404ed 100644
--- a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss
+++ b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss
@@ -1,8 +1,37 @@
 @import '_variables';
 @import '_mixins';
 
-.toggle-plugin-type {
+.first-row {
+  margin-bottom: 10px;
+
+  .plugin-name {
+    font-size: 16px;
+    margin-right: 10px;
+    font-weight: $font-semibold;
+  }
+
+  .plugin-version {
+    opacity: 0.6;
+  }
+}
+
+.second-row {
   display: flex;
-  justify-content: center;
-  margin-bottom: 30px;
+  align-items: center;
+  justify-content: space-between;
+
+  .description {
+    opacity: 0.8
+  }
+
+  .buttons {
+    > *:not(:last-child) {
+      margin-right: 10px;
+    }
+  }
+}
+
+.action-button {
+  @include peertube-button-link;
+  @include button-with-icon(21px, 0, -2px);
 }
diff --git a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts
index 9745bc36b..26a9a616e 100644
--- a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts
+++ b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts
@@ -3,13 +3,17 @@ import { PluginType } from '@shared/models/plugins/plugin.type'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { PluginApiService } from '@app/+admin/plugins/shared/plugin-api.service'
 import { ComponentPagination, hasMoreItems } from '@app/shared/rest/component-pagination.model'
-import { Notifier } from '@app/core'
+import { ConfirmService, Notifier } from '@app/core'
 import { PeerTubePlugin } from '@shared/models/plugins/peertube-plugin.model'
+import { ActivatedRoute, Router } from '@angular/router'
 
 @Component({
   selector: 'my-plugin-list-installed',
   templateUrl: './plugin-list-installed.component.html',
-  styleUrls: [ './plugin-list-installed.component.scss' ]
+  styleUrls: [
+    '../shared/toggle-plugin-type.scss',
+    './plugin-list-installed.component.scss'
+  ]
 })
 export class PluginListInstalledComponent implements OnInit {
   pluginTypeOptions: { label: string, value: PluginType }[] = []
@@ -26,12 +30,18 @@ export class PluginListInstalledComponent implements OnInit {
   constructor (
     private i18n: I18n,
     private pluginService: PluginApiService,
-    private notifier: Notifier
+    private notifier: Notifier,
+    private confirmService: ConfirmService,
+    private router: Router,
+    private route: ActivatedRoute
   ) {
     this.pluginTypeOptions = this.pluginService.getPluginTypeOptions()
   }
 
   ngOnInit () {
+    const query = this.route.snapshot.queryParams
+    if (query['pluginType']) this.pluginType = parseInt(query['pluginType'], 10)
+
     this.reloadPlugins()
   }
 
@@ -39,6 +49,8 @@ export class PluginListInstalledComponent implements OnInit {
     this.pagination.currentPage = 1
     this.plugins = []
 
+    this.router.navigate([], { queryParams: { pluginType: this.pluginType }})
+
     this.loadMorePlugins()
   }
 
@@ -69,4 +81,28 @@ export class PluginListInstalledComponent implements OnInit {
 
     return this.i18n('You don\'t have themes installed yet.')
   }
+
+  async uninstall (plugin: PeerTubePlugin) {
+    const res = await this.confirmService.confirm(
+      this.i18n('Do you really want to uninstall {{pluginName}}?', { pluginName: plugin.name }),
+      this.i18n('Uninstall')
+    )
+    if (res === false) return
+
+    this.pluginService.uninstall(plugin.name, plugin.type)
+      .subscribe(
+        () => {
+          this.notifier.success(this.i18n('{{pluginName}} uninstalled.', { pluginName: plugin.name }))
+
+          this.plugins = this.plugins.filter(p => p.name !== plugin.name)
+          this.pagination.totalItems--
+        },
+
+        err => this.notifier.error(err.message)
+      )
+  }
+
+  getShowRouterLink (plugin: PeerTubePlugin) {
+    return [ '/admin', 'plugins', 'show', this.pluginService.nameToNpmName(plugin.name, plugin.type) ]
+  }
 }
diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts
index db1f91f3d..787be2c8c 100644
--- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts
@@ -13,7 +13,10 @@ import { PluginApiService } from '@app/+admin/plugins/shared/plugin-api.service'
 @Component({
   selector: 'my-plugin-search',
   templateUrl: './plugin-search.component.html',
-  styleUrls: [ './plugin-search.component.scss' ]
+  styleUrls: [
+    '../shared/toggle-plugin-type.scss',
+    './plugin-search.component.scss'
+  ]
 })
 export class PluginSearchComponent implements OnInit {
   pluginTypeOptions: { label: string, value: PluginType }[] = []
diff --git a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.html b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.html
index e69de29bb..aae08b94d 100644
--- a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.html
+++ b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.html
@@ -0,0 +1,26 @@
+<ng-container *ngIf="plugin">
+
+  <h2>
+    <ng-container>{{ pluginTypeLabel }}</ng-container>
+    {{ plugin.name }}
+  </h2>
+
+  <form *ngIf="hasRegisteredSettings()" role="form" (ngSubmit)="formValidated()" [formGroup]="form">
+    <div class="form-group" *ngFor="let setting of registeredSettings">
+      <label [attr.for]="setting.name">{{ setting.label }}</label>
+
+      <input *ngIf="setting.type === 'input'" type="text" [id]="setting.name" [formControlName]="setting.name" />
+
+      <div *ngIf="formErrors[setting.name]" class="form-error">
+        {{ formErrors[setting.name] }}
+      </div>
+    </div>
+
+    <input type="submit" i18n value="Update plugin settings" [disabled]="!form.valid">
+  </form>
+
+  <div *ngIf="!hasRegisteredSettings()" i18n class="no-settings">
+    This {{ pluginTypeLabel }} does not have settings.
+  </div>
+
+</ng-container>
diff --git a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss
index 5e6774739..42fc1b634 100644
--- a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss
+++ b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss
@@ -1,2 +1,22 @@
 @import '_variables';
 @import '_mixins';
+
+h2 {
+  margin-bottom: 20px;
+}
+
+input:not([type=submit]) {
+  @include peertube-input-text(340px);
+  display: block;
+}
+
+.peertube-select-container {
+  @include peertube-select-container(340px);
+}
+
+input[type=submit], button {
+  @include peertube-button;
+  @include orange-button;
+
+  margin-top: 10px;
+}
diff --git a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.ts b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.ts
index f65599532..8750bfd38 100644
--- a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.ts
+++ b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.ts
@@ -1,14 +1,110 @@
-import { Component, OnInit } from '@angular/core'
+import { Component, OnDestroy, OnInit } from '@angular/core'
+import { PeerTubePlugin } from '@shared/models/plugins/peertube-plugin.model'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { PluginApiService } from '@app/+admin/plugins/shared/plugin-api.service'
+import { Notifier } from '@app/core'
+import { ActivatedRoute } from '@angular/router'
+import { Subscription } from 'rxjs'
+import { map, switchMap } from 'rxjs/operators'
+import { RegisterSettingOptions } from '@shared/models/plugins/register-setting.model'
+import { BuildFormArgument, BuildFormDefaultValues, FormReactive, FormValidatorService } from '@app/shared'
 
 @Component({
   selector: 'my-plugin-show-installed',
   templateUrl: './plugin-show-installed.component.html',
   styleUrls: [ './plugin-show-installed.component.scss' ]
 })
-export class PluginShowInstalledComponent implements OnInit {
+export class PluginShowInstalledComponent extends FormReactive implements OnInit, OnDestroy{
+  plugin: PeerTubePlugin
+  registeredSettings: RegisterSettingOptions[] = []
+  pluginTypeLabel: string
+
+  private sub: Subscription
+
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private i18n: I18n,
+    private pluginService: PluginApiService,
+    private notifier: Notifier,
+    private route: ActivatedRoute
+  ) {
+    super()
+  }
 
   ngOnInit () {
+    this.sub = this.route.params.subscribe(
+      routeParams => {
+        const npmName = routeParams['npmName']
+
+        this.loadPlugin(npmName)
+      }
+    )
+  }
+
+  ngOnDestroy () {
+    if (this.sub) this.sub.unsubscribe()
+  }
+
+  formValidated () {
+    const settings = this.form.value
+
+    this.pluginService.updatePluginSettings(this.plugin.name, this.plugin.type, settings)
+        .subscribe(
+          () => {
+            this.notifier.success(this.i18n('Settings updated.'))
+          },
+
+          err => this.notifier.error(err.message)
+        )
+  }
+
+  hasRegisteredSettings () {
+    return Array.isArray(this.registeredSettings) && this.registeredSettings.length !== 0
+  }
+
+  private loadPlugin (npmName: string) {
+    this.pluginService.getPlugin(npmName)
+        .pipe(switchMap(plugin => {
+          return this.pluginService.getPluginRegisteredSettings(plugin.name, plugin.type)
+            .pipe(map(data => ({ plugin, registeredSettings: data.settings })))
+        }))
+        .subscribe(
+          ({ plugin, registeredSettings }) => {
+            this.plugin = plugin
+            this.registeredSettings = registeredSettings
+
+            this.pluginTypeLabel = this.pluginService.getPluginTypeLabel(this.plugin.type)
+
+            this.buildSettingsForm()
+          },
+
+          err => this.notifier.error(err.message)
+        )
+  }
+
+  private buildSettingsForm () {
+    const defaultValues: BuildFormDefaultValues = {}
+    const buildOptions: BuildFormArgument = {}
+    const settingsValues: any = {}
+
+    for (const setting of this.registeredSettings) {
+      buildOptions[ setting.name ] = null
+      settingsValues[ setting.name ] = this.getSetting(setting.name)
+    }
+
+    this.buildForm(buildOptions)
+
+    this.form.patchValue(settingsValues)
+  }
+
+  private getSetting (name: string) {
+    const settings = this.plugin.settings
+
+    if (settings && settings[name]) return settings[name]
+
+    const registered = this.registeredSettings.find(r => r.name === name)
 
+    return registered.default
   }
 
 }
diff --git a/client/src/app/+admin/plugins/plugins.routes.ts b/client/src/app/+admin/plugins/plugins.routes.ts
index 58b5534fb..02e8fd324 100644
--- a/client/src/app/+admin/plugins/plugins.routes.ts
+++ b/client/src/app/+admin/plugins/plugins.routes.ts
@@ -40,7 +40,7 @@ export const PluginsRoutes: Routes = [
         }
       },
       {
-        path: 'show/:name',
+        path: 'show/:npmName',
         component: PluginShowInstalledComponent,
         data: {
           meta: {
diff --git a/client/src/app/+admin/plugins/shared/plugin-api.service.ts b/client/src/app/+admin/plugins/shared/plugin-api.service.ts
index bfc2b918f..1d33cd179 100644
--- a/client/src/app/+admin/plugins/shared/plugin-api.service.ts
+++ b/client/src/app/+admin/plugins/shared/plugin-api.service.ts
@@ -8,6 +8,9 @@ import { PluginType } from '@shared/models/plugins/plugin.type'
 import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
 import { ResultList } from '@shared/models'
 import { PeerTubePlugin } from '@shared/models/plugins/peertube-plugin.model'
+import { ManagePlugin } from '@shared/models/plugins/manage-plugin.model'
+import { InstallPlugin } from '@shared/models/plugins/install-plugin.model'
+import { RegisterSettingOptions } from '@shared/models/plugins/register-setting.model'
 
 @Injectable()
 export class PluginApiService {
@@ -23,16 +26,24 @@ export class PluginApiService {
   getPluginTypeOptions () {
     return [
       {
-        label: this.i18n('Plugin'),
+        label: this.i18n('Plugins'),
         value: PluginType.PLUGIN
       },
       {
-        label: this.i18n('Theme'),
+        label: this.i18n('Themes'),
         value: PluginType.THEME
       }
     ]
   }
 
+  getPluginTypeLabel (type: PluginType) {
+    if (type === PluginType.PLUGIN) {
+      return this.i18n('plugin')
+    }
+
+    return this.i18n('theme')
+  }
+
   getPlugins (
     type: PluginType,
     componentPagination: ComponentPagination,
@@ -47,4 +58,57 @@ export class PluginApiService {
     return this.authHttp.get<ResultList<PeerTubePlugin>>(PluginApiService.BASE_APPLICATION_URL, { params })
                .pipe(catchError(res => this.restExtractor.handleError(res)))
   }
+
+  getPlugin (npmName: string) {
+    const path = PluginApiService.BASE_APPLICATION_URL + '/' + npmName
+
+    return this.authHttp.get<PeerTubePlugin>(path)
+               .pipe(catchError(res => this.restExtractor.handleError(res)))
+  }
+
+  getPluginRegisteredSettings (pluginName: string, pluginType: PluginType) {
+    const path = PluginApiService.BASE_APPLICATION_URL + '/' + this.nameToNpmName(pluginName, pluginType) + '/registered-settings'
+
+    return this.authHttp.get<{ settings: RegisterSettingOptions[] }>(path)
+               .pipe(catchError(res => this.restExtractor.handleError(res)))
+  }
+
+  updatePluginSettings (pluginName: string, pluginType: PluginType, settings: any) {
+    const path = PluginApiService.BASE_APPLICATION_URL + '/' + this.nameToNpmName(pluginName, pluginType) + '/settings'
+
+    return this.authHttp.put(path, { settings })
+               .pipe(catchError(res => this.restExtractor.handleError(res)))
+  }
+
+  uninstall (pluginName: string, pluginType: PluginType) {
+    const body: ManagePlugin = {
+      npmName: this.nameToNpmName(pluginName, pluginType)
+    }
+
+    return this.authHttp.post(PluginApiService.BASE_APPLICATION_URL + '/uninstall', body)
+               .pipe(catchError(res => this.restExtractor.handleError(res)))
+  }
+
+  install (npmName: string) {
+    const body: InstallPlugin = {
+      npmName
+    }
+
+    return this.authHttp.post(PluginApiService.BASE_APPLICATION_URL + '/install', body)
+               .pipe(catchError(res => this.restExtractor.handleError(res)))
+  }
+
+  nameToNpmName (name: string, type: PluginType) {
+    const prefix = type === PluginType.PLUGIN
+      ? 'peertube-plugin-'
+      : 'peertube-theme-'
+
+    return prefix + name
+  }
+
+  pluginTypeFromNpmName (npmName: string) {
+    return npmName.startsWith('peertube-plugin-')
+      ? PluginType.PLUGIN
+      : PluginType.THEME
+  }
 }
diff --git a/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss b/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss
new file mode 100644
index 000000000..ea2eda28c
--- /dev/null
+++ b/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss
@@ -0,0 +1,21 @@
+@import '_variables';
+@import '_mixins';
+
+.toggle-plugin-type {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 30px;
+
+  p-selectButton {
+    /deep/ {
+      .ui-button-text {
+        font-size: 15px;
+      }
+
+      .ui-button.ui-state-active {
+        background-color: var(--mainColor);
+        border-color: var(--mainColor);
+      }
+    }
+  }
+}
diff --git a/client/src/sass/include/_bootstrap.scss b/client/src/sass/include/_bootstrap.scss
index 0a9c9a903..b1a23be6b 100644
--- a/client/src/sass/include/_bootstrap.scss
+++ b/client/src/sass/include/_bootstrap.scss
@@ -20,7 +20,7 @@
 //@import '~bootstrap/scss/custom-forms';
 @import '~bootstrap/scss/nav';
 //@import '~bootstrap/scss/navbar';
-//@import '~bootstrap/scss/card';
+@import '~bootstrap/scss/card';
 //@import '~bootstrap/scss/breadcrumb';
 //@import '~bootstrap/scss/pagination';
 @import '~bootstrap/scss/badge';
diff --git a/server/controllers/api/plugins.ts b/server/controllers/api/plugins.ts
index 89cc67f54..f17e8cab9 100644
--- a/server/controllers/api/plugins.ts
+++ b/server/controllers/api/plugins.ts
@@ -12,7 +12,7 @@ import { pluginsSortValidator } from '../../middlewares/validators'
 import { PluginModel } from '../../models/server/plugin'
 import { UserRight } from '../../../shared/models/users'
 import {
-  enabledPluginValidator,
+  existingPluginValidator,
   installPluginValidator,
   listPluginsValidator,
   uninstallPluginValidator,
@@ -35,18 +35,25 @@ pluginRouter.get('/',
   asyncMiddleware(listPlugins)
 )
 
-pluginRouter.get('/:pluginName/settings',
+pluginRouter.get('/:npmName',
   authenticate,
   ensureUserHasRight(UserRight.MANAGE_PLUGINS),
-  asyncMiddleware(enabledPluginValidator),
-  asyncMiddleware(listPluginSettings)
+  asyncMiddleware(existingPluginValidator),
+  getPlugin
 )
 
-pluginRouter.put('/:pluginName/settings',
+pluginRouter.get('/:npmName/registered-settings',
+  authenticate,
+  ensureUserHasRight(UserRight.MANAGE_PLUGINS),
+  asyncMiddleware(existingPluginValidator),
+  asyncMiddleware(getPluginRegisteredSettings)
+)
+
+pluginRouter.put('/:npmName/settings',
   authenticate,
   ensureUserHasRight(UserRight.MANAGE_PLUGINS),
   updatePluginSettingsValidator,
-  asyncMiddleware(enabledPluginValidator),
+  asyncMiddleware(existingPluginValidator),
   asyncMiddleware(updatePluginSettings)
 )
 
@@ -85,6 +92,12 @@ async function listPlugins (req: express.Request, res: express.Response) {
   return res.json(getFormattedObjects(resultList.data, resultList.total))
 }
 
+function getPlugin (req: express.Request, res: express.Response) {
+  const plugin = res.locals.plugin
+
+  return res.json(plugin.toFormattedJSON())
+}
+
 async function installPlugin (req: express.Request, res: express.Response) {
   const body: InstallPlugin = req.body
 
@@ -101,7 +114,7 @@ async function uninstallPlugin (req: express.Request, res: express.Response) {
   return res.sendStatus(204)
 }
 
-async function listPluginSettings (req: express.Request, res: express.Response) {
+async function getPluginRegisteredSettings (req: express.Request, res: express.Response) {
   const plugin = res.locals.plugin
 
   const settings = await PluginManager.Instance.getSettings(plugin.name)
diff --git a/server/helpers/custom-validators/plugins.ts b/server/helpers/custom-validators/plugins.ts
index 4ab5f9ce8..064af9ead 100644
--- a/server/helpers/custom-validators/plugins.ts
+++ b/server/helpers/custom-validators/plugins.ts
@@ -41,6 +41,10 @@ function isPluginEngineValid (engine: any) {
   return exists(engine) && exists(engine.peertube)
 }
 
+function isPluginHomepage (value: string) {
+  return isUrlValid(value)
+}
+
 function isStaticDirectoriesValid (staticDirs: any) {
   if (!exists(staticDirs) || typeof staticDirs !== 'object') return false
 
@@ -70,7 +74,7 @@ function isPackageJSONValid (packageJSON: PluginPackageJson, pluginType: PluginT
   return isNpmPluginNameValid(packageJSON.name) &&
     isPluginDescriptionValid(packageJSON.description) &&
     isPluginEngineValid(packageJSON.engine) &&
-    isUrlValid(packageJSON.homepage) &&
+    isPluginHomepage(packageJSON.homepage) &&
     exists(packageJSON.author) &&
     isUrlValid(packageJSON.bugs) &&
     (pluginType === PluginType.THEME || isSafePath(packageJSON.library)) &&
@@ -88,6 +92,7 @@ export {
   isPluginTypeValid,
   isPackageJSONValid,
   isThemeValid,
+  isPluginHomepage,
   isPluginVersionValid,
   isPluginNameValid,
   isPluginDescriptionValid,
diff --git a/server/lib/plugins/plugin-manager.ts b/server/lib/plugins/plugin-manager.ts
index 3d8375acd..8cdeff446 100644
--- a/server/lib/plugins/plugin-manager.ts
+++ b/server/lib/plugins/plugin-manager.ts
@@ -89,6 +89,8 @@ export class PluginManager {
   async runHook (hookName: string, param?: any) {
     let result = param
 
+    if (!this.hooks[hookName]) return result
+
     const wait = hookName.startsWith('static:')
 
     for (const hook of this.hooks[hookName]) {
@@ -162,8 +164,8 @@ export class PluginManager {
         : await installNpmPlugin(toInstall, version)
 
       name = fromDisk ? basename(toInstall) : toInstall
-      const pluginType = name.startsWith('peertube-theme-') ? PluginType.THEME : PluginType.PLUGIN
-      const pluginName = this.normalizePluginName(name)
+      const pluginType = PluginModel.getTypeFromNpmName(name)
+      const pluginName = PluginModel.normalizePluginName(name)
 
       const packageJSON = this.getPackageJSON(pluginName, pluginType)
       if (!isPackageJSONValid(packageJSON, pluginType)) {
@@ -173,6 +175,7 @@ export class PluginManager {
       [ plugin ] = await PluginModel.upsert({
         name: pluginName,
         description: packageJSON.description,
+        homepage: packageJSON.homepage,
         type: pluginType,
         version: packageJSON.version,
         enabled: true,
@@ -196,10 +199,10 @@ export class PluginManager {
     await this.registerPluginOrTheme(plugin)
   }
 
-  async uninstall (packageName: string) {
-    logger.info('Uninstalling plugin %s.', packageName)
+  async uninstall (npmName: string) {
+    logger.info('Uninstalling plugin %s.', npmName)
 
-    const pluginName = this.normalizePluginName(packageName)
+    const pluginName = PluginModel.normalizePluginName(npmName)
 
     try {
       await this.unregister(pluginName)
@@ -207,9 +210,9 @@ export class PluginManager {
       logger.warn('Cannot unregister plugin %s.', pluginName, { err })
     }
 
-    const plugin = await PluginModel.load(pluginName)
+    const plugin = await PluginModel.loadByNpmName(npmName)
     if (!plugin || plugin.uninstalled === true) {
-      logger.error('Cannot uninstall plugin %s: it does not exist or is already uninstalled.', packageName)
+      logger.error('Cannot uninstall plugin %s: it does not exist or is already uninstalled.', npmName)
       return
     }
 
@@ -218,9 +221,9 @@ export class PluginManager {
 
     await plugin.save()
 
-    await removeNpmPlugin(packageName)
+    await removeNpmPlugin(npmName)
 
-    logger.info('Plugin %s uninstalled.', packageName)
+    logger.info('Plugin %s uninstalled.', npmName)
   }
 
   // ###################### Private register ######################
@@ -353,10 +356,6 @@ export class PluginManager {
     return join(CONFIG.STORAGE.PLUGINS_DIR, 'node_modules', prefix + pluginName)
   }
 
-  private normalizePluginName (name: string) {
-    return name.replace(/^peertube-((theme)|(plugin))-/, '')
-  }
-
   // ###################### Private getters ######################
 
   private getRegisteredPluginsOrThemes (type: PluginType) {
diff --git a/server/middlewares/validators/plugins.ts b/server/middlewares/validators/plugins.ts
index 265ac7c17..a06add6b8 100644
--- a/server/middlewares/validators/plugins.ts
+++ b/server/middlewares/validators/plugins.ts
@@ -63,7 +63,7 @@ const uninstallPluginValidator = [
   body('npmName').custom(isNpmPluginNameValid).withMessage('Should have a valid npm name'),
 
   (req: express.Request, res: express.Response, next: express.NextFunction) => {
-    logger.debug('Checking managePluginValidator parameters', { parameters: req.body })
+    logger.debug('Checking uninstallPluginValidator parameters', { parameters: req.body })
 
     if (areValidationErrors(req, res)) return
 
@@ -71,15 +71,15 @@ const uninstallPluginValidator = [
   }
 ]
 
-const enabledPluginValidator = [
-  body('name').custom(isPluginNameValid).withMessage('Should have a valid plugin name'),
+const existingPluginValidator = [
+  param('npmName').custom(isPluginNameValid).withMessage('Should have a valid plugin name'),
 
   async (req: express.Request, res: express.Response, next: express.NextFunction) => {
-    logger.debug('Checking enabledPluginValidator parameters', { parameters: req.body })
+    logger.debug('Checking enabledPluginValidator parameters', { parameters: req.params })
 
     if (areValidationErrors(req, res)) return
 
-    const plugin = await PluginModel.load(req.body.name)
+    const plugin = await PluginModel.loadByNpmName(req.params.npmName)
     if (!plugin) {
       return res.status(404)
          .json({ error: 'Plugin not found' })
@@ -110,7 +110,7 @@ export {
   servePluginStaticDirectoryValidator,
   updatePluginSettingsValidator,
   uninstallPluginValidator,
-  enabledPluginValidator,
+  existingPluginValidator,
   installPluginValidator,
   listPluginsValidator
 }
diff --git a/server/models/server/plugin.ts b/server/models/server/plugin.ts
index 059a442de..60abaec65 100644
--- a/server/models/server/plugin.ts
+++ b/server/models/server/plugin.ts
@@ -1,7 +1,7 @@
 import { AllowNull, Column, CreatedAt, DataType, DefaultScope, Is, Model, Table, UpdatedAt } from 'sequelize-typescript'
 import { getSort, throwIfNotValid } from '../utils'
 import {
-  isPluginDescriptionValid,
+  isPluginDescriptionValid, isPluginHomepage,
   isPluginNameValid,
   isPluginTypeValid,
   isPluginVersionValid
@@ -20,7 +20,7 @@ import { FindAndCountOptions } from 'sequelize'
   tableName: 'plugin',
   indexes: [
     {
-      fields: [ 'name' ],
+      fields: [ 'name', 'type' ],
       unique: true
     }
   ]
@@ -59,6 +59,11 @@ export class PluginModel extends Model<PluginModel> {
   @Column
   description: string
 
+  @AllowNull(false)
+  @Is('PluginHomepage', value => throwIfNotValid(value, isPluginHomepage, 'homepage'))
+  @Column
+  homepage: string
+
   @AllowNull(true)
   @Column(DataType.JSONB)
   settings: any
@@ -84,10 +89,14 @@ export class PluginModel extends Model<PluginModel> {
     return PluginModel.findAll(query)
   }
 
-  static load (pluginName: string) {
+  static loadByNpmName (npmName: string) {
+    const name = this.normalizePluginName(npmName)
+    const type = this.getTypeFromNpmName(npmName)
+
     const query = {
       where: {
-        name: pluginName
+        name,
+        type
       }
     }
 
@@ -150,6 +159,16 @@ export class PluginModel extends Model<PluginModel> {
       })
   }
 
+  static normalizePluginName (name: string) {
+    return name.replace(/^peertube-((theme)|(plugin))-/, '')
+  }
+
+  static getTypeFromNpmName (npmName: string) {
+    return npmName.startsWith('peertube-plugin-')
+      ? PluginType.PLUGIN
+      : PluginType.THEME
+  }
+
   toFormattedJSON (): PeerTubePlugin {
     return {
       name: this.name,
@@ -159,6 +178,7 @@ export class PluginModel extends Model<PluginModel> {
       uninstalled: this.uninstalled,
       peertubeEngine: this.peertubeEngine,
       description: this.description,
+      homepage: this.homepage,
       settings: this.settings,
       createdAt: this.createdAt,
       updatedAt: this.updatedAt
diff --git a/shared/models/plugins/peertube-plugin.model.ts b/shared/models/plugins/peertube-plugin.model.ts
index 2a1dfb3a7..de3c7741b 100644
--- a/shared/models/plugins/peertube-plugin.model.ts
+++ b/shared/models/plugins/peertube-plugin.model.ts
@@ -6,7 +6,8 @@ export interface PeerTubePlugin {
   uninstalled: boolean
   peertubeEngine: string
   description: string
-  settings: any
+  homepage: string
+  settings: { [ name: string ]: string }
   createdAt: Date
   updatedAt: Date
 }