7 files changed, 213 insertions, 39 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.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: [