WIP plugins: add plugin settings/uninstall in client

2 files changed, 87 insertions, 2 deletions

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);
+      }
+    }
+  }
+}