Improve P2P & Privacy section

3 files changed, 107 insertions, 0 deletions

diff --git a/client/src/app/+about/about-instance/about-instance.component.html b/client/src/app/+about/about-instance/about-instance.component.html
new file mode 100644
index 000000000..e433b0016
--- /dev/null
+++ b/client/src/app/+about/about-instance/about-instance.component.html
@@ -0,0 +1,39 @@
+<div i18n class="about-instance-title">
+  About {{ instanceName }} instance
+</div>
+
+<div class="short-description">
+  <div>{{ shortDescription }}</div>
+</div>
+
+<div class="description">
+  <div i18n class="section-title">Description</div>
+
+  <div [innerHTML]="descriptionHTML"></div>
+</div>
+
+<div class="terms">
+  <div i18n class="section-title">Terms</div>
+
+  <div [innerHTML]="termsHTML"></div>
+</div>
+
+<div class="signup">
+  <div i18n class="section-title">Signup</div>
+
+  <div *ngIf="isSignupAllowed">
+    <ng-container i18n>User registration is allowed and</ng-container>
+
+    <ng-container i18n *ngIf="userVideoQuota !== -1">
+      this instance provides a baseline quota of {{ userVideoQuota | bytes: 0 }} space for the videos of its users.
+    </ng-container>
+
+    <ng-container i18n *ngIf="userVideoQuota === -1">
+      this instance provides unlimited space for the videos of its users.
+    </ng-container>
+  </div>
+
+  <div i18n *ngIf="isSignupAllowed === false">
+    User registration is currently not allowed.
+  </div>
+</div>
\ No newline at end of file
diff --git a/client/src/app/+about/about-instance/about-instance.component.scss b/client/src/app/+about/about-instance/about-instance.component.scss
new file mode 100644
index 000000000..b451e85aa
--- /dev/null
+++ b/client/src/app/+about/about-instance/about-instance.component.scss
@@ -0,0 +1,18 @@
+@import '_variables';
+@import '_mixins';
+
+.about-instance-title {
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 15px;
+}
+
+.section-title {
+  font-weight: $font-semibold;
+  font-size: 20px;
+  margin-bottom: 5px;
+}
+
+.short-description, .description, .terms, .signup {
+  margin-bottom: 30px;
+}
diff --git a/client/src/app/+about/about-instance/about-instance.component.ts b/client/src/app/+about/about-instance/about-instance.component.ts
new file mode 100644
index 000000000..354f52ce7
--- /dev/null
+++ b/client/src/app/+about/about-instance/about-instance.component.ts
@@ -0,0 +1,50 @@
+import { Component, OnInit } from '@angular/core'
+import { ServerService } from '@app/core'
+import { MarkdownService } from '@app/videos/shared'
+import { NotificationsService } from 'angular2-notifications'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+
+@Component({
+  selector: 'my-about-instance',
+  templateUrl: './about-instance.component.html',
+  styleUrls: [ './about-instance.component.scss' ]
+})
+
+export class AboutInstanceComponent implements OnInit {
+  shortDescription = ''
+  descriptionHTML = ''
+  termsHTML = ''
+
+  constructor (
+    private notificationsService: NotificationsService,
+    private serverService: ServerService,
+    private markdownService: MarkdownService,
+    private i18n: I18n
+  ) {}
+
+  get instanceName () {
+    return this.serverService.getConfig().instance.name
+  }
+
+  get userVideoQuota () {
+    return this.serverService.getConfig().user.videoQuota
+  }
+
+  get isSignupAllowed () {
+    return this.serverService.getConfig().signup.allowed
+  }
+
+  ngOnInit () {
+    this.serverService.getAbout()
+      .subscribe(
+        res => {
+          this.shortDescription = res.instance.shortDescription
+          this.descriptionHTML = this.markdownService.textMarkdownToHTML(res.instance.description)
+          this.termsHTML = this.markdownService.textMarkdownToHTML(res.instance.terms)
+        },
+
+        err => this.notificationsService.error(this.i18n('Error getting about from server'), err)
+      )
+  }
+
+}