Merge branch 'develop' into pr/1217

8 files changed, 215 insertions, 41 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
index 5970cac01..8c700752e 100644
--- a/client/src/app/+about/about-instance/about-instance.component.html
+++ b/client/src/app/+about/about-instance/about-instance.component.html
@@ -1,39 +1,52 @@
-<div i18n class="about-instance-title">
-  About {{ instanceName }} instance
-</div>
+<div class="row">
+  <div class="col-md-12 col-xl-6">
+    <div class="about-instance-title">
+      <div i18n>About {{ instanceName }} instance</div>
 
-<div class="short-description">
-  <div>{{ shortDescription }}</div>
-</div>
+      <div *ngIf="isContactFormEnabled" (click)="openContactModal()" i18n role="button" class="contact-admin">Contact administrator</div>
+    </div>
 
-<div class="description">
-  <div i18n class="section-title">Description</div>
+    <div class="short-description">
+      <div>{{ shortDescription }}</div>
+    </div>
 
-  <div [innerHTML]="descriptionHTML"></div>
-</div>
+    <div class="description">
+      <div i18n class="section-title">Description</div>
 
-<div class="terms" id="terms-section">
-  <div i18n class="section-title">Terms</div>
+      <div [innerHTML]="descriptionHTML"></div>
+    </div>
 
-  <div [innerHTML]="termsHTML"></div>
-</div>
+    <div class="terms" id="terms-section">
+      <div i18n class="section-title">Terms</div>
 
-<div class="signup">
-  <div i18n class="section-title">Signup</div>
+      <div [innerHTML]="termsHTML"></div>
+    </div>
 
-  <div *ngIf="isSignupAllowed">
-    <ng-container i18n>User registration is allowed and</ng-container>
+    <div class="signup">
+      <div i18n class="section-title">Signup</div>
 
-    <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>
+      <div *ngIf="isSignupAllowed">
+        <ng-container i18n>User registration is allowed and</ng-container>
 
-    <ng-container i18n *ngIf="userVideoQuota === -1">
-      this instance provides unlimited space for the videos of its users.
-    </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>
   </div>
 
-  <div i18n *ngIf="isSignupAllowed === false">
-    User registration is currently not allowed.
+  <div class="col-md-12 col-xl-6">
+    <label>Features found on this instance</label>
+    <my-instance-features-table></my-instance-features-table>
   </div>
-</div>
\ No newline at end of file
+</div>
+
+<my-contact-admin-modal #contactAdminModal></my-contact-admin-modal>
diff --git a/client/src/app/+about/about-instance/about-instance.component.scss b/client/src/app/+about/about-instance/about-instance.component.scss
index b451e85aa..75cf57322 100644
--- a/client/src/app/+about/about-instance/about-instance.component.scss
+++ b/client/src/app/+about/about-instance/about-instance.component.scss
@@ -2,9 +2,19 @@
 @import '_mixins';
 
 .about-instance-title {
-  font-size: 20px;
-  font-weight: bold;
-  margin-bottom: 15px;
+  display: flex;
+  justify-content: space-between;
+
+  & > div {
+    font-size: 20px;
+    font-weight: bold;
+    margin-bottom: 15px;
+  }
+
+  & > .contact-admin {
+    @include peertube-button;
+    @include orange-button;
+  }
 }
 
 .section-title {
diff --git a/client/src/app/+about/about-instance/about-instance.component.ts b/client/src/app/+about/about-instance/about-instance.component.ts
index 354f52ce7..a1b30fa8c 100644
--- a/client/src/app/+about/about-instance/about-instance.component.ts
+++ b/client/src/app/+about/about-instance/about-instance.component.ts
@@ -1,23 +1,26 @@
-import { Component, OnInit } from '@angular/core'
-import { ServerService } from '@app/core'
-import { MarkdownService } from '@app/videos/shared'
-import { NotificationsService } from 'angular2-notifications'
+import { Component, OnInit, ViewChild } from '@angular/core'
+import { Notifier, ServerService } from '@app/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
+import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-admin-modal.component'
+import { InstanceService } from '@app/shared/instance/instance.service'
+import { MarkdownService } from '@app/shared/renderer'
 
 @Component({
   selector: 'my-about-instance',
   templateUrl: './about-instance.component.html',
   styleUrls: [ './about-instance.component.scss' ]
 })
-
 export class AboutInstanceComponent implements OnInit {
+  @ViewChild('contactAdminModal') contactAdminModal: ContactAdminModalComponent
+
   shortDescription = ''
   descriptionHTML = ''
   termsHTML = ''
 
   constructor (
-    private notificationsService: NotificationsService,
+    private notifier: Notifier,
     private serverService: ServerService,
+    private instanceService: InstanceService,
     private markdownService: MarkdownService,
     private i18n: I18n
   ) {}
@@ -34,8 +37,12 @@ export class AboutInstanceComponent implements OnInit {
     return this.serverService.getConfig().signup.allowed
   }
 
+  get isContactFormEnabled () {
+    return this.serverService.getConfig().email.enabled && this.serverService.getConfig().contactForm.enabled
+  }
+
   ngOnInit () {
-    this.serverService.getAbout()
+    this.instanceService.getAbout()
       .subscribe(
         res => {
           this.shortDescription = res.instance.shortDescription
@@ -43,8 +50,12 @@ export class AboutInstanceComponent implements OnInit {
           this.termsHTML = this.markdownService.textMarkdownToHTML(res.instance.terms)
         },
 
-        err => this.notificationsService.error(this.i18n('Error getting about from server'), err)
+        () => this.notifier.error(this.i18n('Cannot get about information from server'))
       )
   }
 
+  openContactModal () {
+    return this.contactAdminModal.show()
+  }
+
 }
diff --git a/client/src/app/+about/about-instance/contact-admin-modal.component.html b/client/src/app/+about/about-instance/contact-admin-modal.component.html
new file mode 100644
index 000000000..b2cbd0873
--- /dev/null
+++ b/client/src/app/+about/about-instance/contact-admin-modal.component.html
@@ -0,0 +1,50 @@
+<ng-template #modal>
+  <div class="modal-header">
+    <h4 i18n class="modal-title">Contact {{ instanceName }} administrator</h4>
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
+  </div>
+
+  <div class="modal-body">
+
+    <form novalidate [formGroup]="form" (ngSubmit)="sendForm()">
+      <div class="form-group">
+        <label i18n for="fromName">Your name</label>
+        <input
+          type="text" id="fromName"
+          formControlName="fromName" [ngClass]="{ 'input-error': formErrors.fromName }"
+        >
+        <div *ngIf="formErrors.fromName" class="form-error">{{ formErrors.fromName }}</div>
+      </div>
+
+      <div class="form-group">
+        <label i18n for="fromEmail">Your email</label>
+        <input
+          type="text" id="fromEmail"
+          formControlName="fromEmail" [ngClass]="{ 'input-error': formErrors['fromEmail'] }"
+        >
+        <div *ngIf="formErrors.fromEmail" class="form-error">{{ formErrors.fromEmail }}</div>
+      </div>
+
+      <div class="form-group">
+        <label i18n for="body">Your message</label>
+        <textarea id="body" formControlName="body" [ngClass]="{ 'input-error': formErrors['body'] }">
+        </textarea>
+        <div *ngIf="formErrors.body" class="form-error">{{ formErrors.body }}</div>
+      </div>
+
+      <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
+
+      <div class="form-group inputs">
+        <span i18n class="action-button action-button-cancel" (click)="hide()">
+          Cancel
+        </span>
+
+        <input
+          type="submit" i18n-value value="Submit" class="action-button-submit"
+          [disabled]="!form.valid"
+        >
+      </div>
+    </form>
+
+  </div>
+</ng-template>
diff --git a/client/src/app/+about/about-instance/contact-admin-modal.component.scss b/client/src/app/+about/about-instance/contact-admin-modal.component.scss
new file mode 100644
index 000000000..260d77888
--- /dev/null
+++ b/client/src/app/+about/about-instance/contact-admin-modal.component.scss
@@ -0,0 +1,11 @@
+@import 'variables';
+@import 'mixins';
+
+input[type=text] {
+  @include peertube-input-text(340px);
+  display: block;
+}
+
+textarea {
+  @include peertube-textarea(100%, 200px);
+}
diff --git a/client/src/app/+about/about-instance/contact-admin-modal.component.ts b/client/src/app/+about/about-instance/contact-admin-modal.component.ts
new file mode 100644
index 000000000..7d79c2215
--- /dev/null
+++ b/client/src/app/+about/about-instance/contact-admin-modal.component.ts
@@ -0,0 +1,77 @@
+import { Component, OnInit, ViewChild } from '@angular/core'
+import { Notifier, ServerService } from '@app/core'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
+import { FormReactive, InstanceValidatorsService } from '@app/shared'
+import { InstanceService } from '@app/shared/instance/instance.service'
+
+@Component({
+  selector: 'my-contact-admin-modal',
+  templateUrl: './contact-admin-modal.component.html',
+  styleUrls: [ './contact-admin-modal.component.scss' ]
+})
+export class ContactAdminModalComponent extends FormReactive implements OnInit {
+  @ViewChild('modal') modal: NgbModal
+
+  error: string
+
+  private openedModal: NgbModalRef
+
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private modalService: NgbModal,
+    private instanceValidatorsService: InstanceValidatorsService,
+    private instanceService: InstanceService,
+    private serverService: ServerService,
+    private notifier: Notifier,
+    private i18n: I18n
+  ) {
+    super()
+  }
+
+  get instanceName () {
+    return this.serverService.getConfig().instance.name
+  }
+
+  ngOnInit () {
+    this.buildForm({
+      fromName: this.instanceValidatorsService.FROM_NAME,
+      fromEmail: this.instanceValidatorsService.FROM_EMAIL,
+      body: this.instanceValidatorsService.BODY
+    })
+  }
+
+  show () {
+    this.openedModal = this.modalService.open(this.modal, { keyboard: false })
+  }
+
+  hide () {
+    this.form.reset()
+    this.error = undefined
+
+    this.openedModal.close()
+    this.openedModal = null
+  }
+
+  sendForm () {
+    const fromName = this.form.value['fromName']
+    const fromEmail = this.form.value[ 'fromEmail' ]
+    const body = this.form.value[ 'body' ]
+
+    this.instanceService.contactAdministrator(fromEmail, fromName, body)
+        .subscribe(
+          () => {
+            this.notifier.success(this.i18n('Your message has been sent.'))
+            this.hide()
+          },
+
+          err => {
+            this.error = err.status === 403
+              ? this.i18n('You already sent this form recently')
+              : err.message
+          }
+        )
+  }
+}
diff --git a/client/src/app/+about/about-peertube/about-peertube.component.html b/client/src/app/+about/about-peertube/about-peertube.component.html
index 13ce89f75..d3fc9a828 100644
--- a/client/src/app/+about/about-peertube/about-peertube.component.html
+++ b/client/src/app/+about/about-peertube/about-peertube.component.html
@@ -83,7 +83,7 @@
   <h6 i18n class="p2p-privacy-title">What will be done to mitigate this problem?</h6>
 
   <p i18n>
-    PeerTube is only in beta, and want to deliver the best countermeasures possible by the time the stable is released.
+    PeerTube is in its early stages, and want to deliver the best countermeasures possible by the time the stable is released.
     In the meantime, we want to test different ideas related to this issue:
   </p>
 
@@ -94,4 +94,4 @@
     <li i18n>Disable P2P from the administration interface</li>
     <li i18n>An automatic video redundancy program: we wouldn't know if the IP downloaded the video on purpose or if it was the automatized program</li>
   </ul>
-</div>
\ No newline at end of file
+</div>
diff --git a/client/src/app/+about/about.module.ts b/client/src/app/+about/about.module.ts
index ff6e8ef41..9c6b29740 100644
--- a/client/src/app/+about/about.module.ts
+++ b/client/src/app/+about/about.module.ts
@@ -5,6 +5,7 @@ import { AboutComponent } from './about.component'
 import { SharedModule } from '../shared'
 import { AboutInstanceComponent } from '@app/+about/about-instance/about-instance.component'
 import { AboutPeertubeComponent } from '@app/+about/about-peertube/about-peertube.component'
+import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-admin-modal.component'
 
 @NgModule({
   imports: [
@@ -15,7 +16,8 @@ import { AboutPeertubeComponent } from '@app/+about/about-peertube/about-peertub
   declarations: [
     AboutComponent,
     AboutInstanceComponent,
-    AboutPeertubeComponent
+    AboutPeertubeComponent,
+    ContactAdminModalComponent
   ],
 
   exports: [