Add config instance warning modal

client/src/app/app.component.ts

@@ -244,15 +244,19 @@ export class AppComponent implements OnInit {
     if (user.noWelcomeModal !== true) return this.welcomeModal.show()
 
     const config = this.serverService.getConfig()
-
-    if (user.noInstanceConfigWarningModal !== true && config.signup.allowed && config.instance.name.toLowerCase() === 'peertube') {
-      this.instanceService.getAbout()
-        .subscribe(about => {
-          if (!about.instance.terms) {
-            this.instanceConfigWarningModal.show()
-          }
-        })
-    }
+    if (user.noInstanceConfigWarningModal === true || !config.signup.allowed) return
+
+    this.instanceService.getAbout()
+      .subscribe(about => {
+        if (
+          config.instance.name.toLowerCase() === 'peertube' ||
+          !about.instance.terms ||
+          !about.instance.administrator ||
+          !about.instance.maintenanceLifetime
+        ) {
+          this.instanceConfigWarningModal.show(about)
+        }
+      })
   }
 
   private initHotkeys () {

client/src/app/modal/instance-config-warning-modal.component.html

@@ -1,14 +1,41 @@
 <ng-template #modal let-hide="close">
   <div class="modal-header">
-    <h4 i18n class="modal-title">Warning!</h4>
+    <h4 i18n class="modal-title">Configuration warning!</h4>
     <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
   </div>
 
   <div class="modal-body">
 
+    <p i18n>Hello dear administrator. You enabled user registration on your instance but you did not configure the following fields:</p>
+
+    <ul>
+      <li i18n *ngIf="about.instance.name.toLowerCase() === 'peertube'">Instance name</li>
+      <li i18n *ngIf="about.instance.shortDescription">Instance short description</li>
+
+      <li i18n *ngIf="!about.instance.administrator">Who you are</li>
+      <li i18n *ngIf="!about.instance.maintenanceLifetime">How long you plan to maintain your instance</li>
+      <li i18n *ngIf="!about.instance.businessModel">How you plan to pay your instance</li>
+
+      <li i18n *ngIf="!about.instance.moderationInformation">How you will moderate your instance</li>
+      <li i18n *ngIf="!about.instance.terms">Instance terms</li>
+    </ul>
+
+    <p>Please consider to configure these fields to help people to choose <strong>the appropriate instance</strong>.</p>
+
+    <div class="configure-instance">
+      <a i18n href="/admin/config/edit-custom" target="_blank" rel="noopener noreferrer">Configure these fields</a>
+    </div>
+
   </div>
 
   <div class="modal-footer inputs">
+    <my-peertube-checkbox
+      inputName="stopDisplayModal" [(ngModel)]="stopDisplayModal"
+      i18n-labelText labelText="Don't show me this warning anymore"
+    >
+
+    </my-peertube-checkbox>
+
     <span i18n class="action-button action-button-cancel" (click)="hide()">Close</span>
   </div>
 

client/src/app/modal/instance-config-warning-modal.component.scss

@@ -4,3 +4,17 @@
 .action-button-cancel {
   margin-right: 0 !important;
 }
+
+.modal-body {
+  font-size: 15px;
+}
+
+li {
+  margin-bottom: 10px;
+}
+
+.configure-instance {
+  text-align: center;
+  font-weight: 600;
+  font-size: 18px;
+}

client/src/app/modal/instance-config-warning-modal.component.ts

@@ -1,7 +1,8 @@
 import { Component, ElementRef, ViewChild } from '@angular/core'
 import { Notifier } from '@app/core'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { About } from '@shared/models/server'
+import { UserService } from '@app/shared'
 
 @Component({
   selector: 'my-instance-config-warning-modal',
@@ -11,13 +12,31 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 export class InstanceConfigWarningModalComponent {
   @ViewChild('modal', { static: true }) modal: ElementRef
 
+  stopDisplayModal = false
+  about: About
+
   constructor (
+    private userService: UserService,
     private modalService: NgbModal,
-    private notifier: Notifier,
-    private i18n: I18n
+    private notifier: Notifier
   ) { }
 
-  show () {
-    this.modalService.open(this.modal)
+  show (about: About) {
+    this.about = about
+
+    const ref = this.modalService.open(this.modal)
+
+    ref.result.finally(() => {
+      if (this.stopDisplayModal === true) this.doNotOpenAgain()
+    })
+  }
+
+  private doNotOpenAgain () {
+    this.userService.updateMyProfile({ noInstanceConfigWarningModal: true })
+        .subscribe(
+          () => console.log('We will not open the instance config warning modal again.'),
+
+          err => this.notifier.error(err.message)
+        )
   }
 }

client/src/app/modal/welcome-modal.component.html

@@ -7,24 +7,24 @@
   <div class="modal-body">
 
     <div class="block-links">
-      <div class="subtitle">Useful links</div>
+      <div i18n class="subtitle">Useful links</div>
 
       <ul>
-        <li>
+        <li i18n>
           Official PeerTube website: <a href="https://joinpeertube.org" target="_blank" rel="noopener noreferrer">https://joinpeertube.org</a>
         </li>
 
-        <li>
+        <li i18n>
           Discover CLI PeerTube tools (to upload or import videos, parse logs, prune storage directories, reset user password...):
           <a href="https://docs.joinpeertube.org/#/maintain-tools" target="_blank" rel="noopener noreferrer">https://docs.joinpeertube.org/#/maintain-tools</a>
         </li>
 
-        <li>
+        <li i18n>
           Understand how to administer your instance (managing users, following other instances, dealing with spammers...):
           <a href="https://docs.joinpeertube.org/#/admin-following-instances" target="_blank" rel="noopener noreferrer">https://docs.joinpeertube.org/#/admin-following-instances</a>
         </li>
 
-        <li>
+        <li i18n>
           Learn how to use PeerTube (setup your account, managing video playlists, discover third-party applications...):
           <a href="https://docs.joinpeertube.org/#/use-setup-account" target="_blank" rel="noopener noreferrer">https://docs.joinpeertube.org/#/use-setup-account</a>
         </li>
@@ -32,30 +32,32 @@
     </div>
 
     <div class="block-configuration">
-      <div class="subtitle">Configure your instance</div>
+      <div i18n class="subtitle">Configure your instance</div>
 
-      <p>
+      <p i18n>
         Now it's time to configure your instance! Choosing your <strong>instance name</strong>, <strong>setting up a description</strong>,
         specifying <strong>who you are</strong> and <strong>how long</strong> you plan to <strong>maintain your instance</strong>
         is very important for visitors to understand on what type of instance they are.
       </p>
 
-      <p>
+      <p i18n>
         If you want to open registrations, please decide what are <strong>your moderation rules</strong>, fill your <strong>instance terms</strong>
         and specify the categories and languages you speak. This way, users that are looking for a PeerTube instance on which they can register
         will be able to choose <strong>the right one</strong>.
       </p>
 
       <div class="configure-instance">
-        <a href="/admin/config/edit-custom" target="_blank" rel="noopener noreferrer">Configure your instance</a>
+        <a i18n href="/admin/config/edit-custom" target="_blank" rel="noopener noreferrer">Configure your instance</a>
       </div>
     </div>
 
     <div class="block-instance">
-      <div class="subtitle">Index your instance</div>
+      <div i18n class="subtitle">Index your instance</div>
 
-      If you want, you can index your PeerTube instance on the public PeerTube instances list:
-      <a href="https://instances.joinpeertube.org/instances">https://instances.joinpeertube.org/instances</a>
+      <ng-container i18n>
+        If you want, you can index your PeerTube instance on the public PeerTube instances list:
+        <a href="https://instances.joinpeertube.org/instances">https://instances.joinpeertube.org/instances</a>
+      </ng-container>
     </div>
   </div>
 

client/src/app/modal/welcome-modal.component.scss

@@ -5,10 +5,6 @@
   font-size: 15px;
 }
 
-.action-button-cancel {
-  margin-right: 0 !important;
-}
-
 .subtitle {
   font-weight: $font-semibold;
   margin-bottom: 10px;

client/src/app/modal/welcome-modal.component.ts

@@ -34,7 +34,5 @@ export class WelcomeModalComponent {
 
         err => this.notifier.error(err.message)
       )
-
-    return true
   }
 }

server/controllers/api/users/me.ts

@@ -190,19 +190,19 @@ async function updateMe (req: express.Request, res: express.Response) {
     }
   }
 
-  if (body.displayName !== undefined || body.description !== undefined) {
-    await sequelizeTypescript.transaction(async t => {
-      const userAccount = await AccountModel.load(user.Account.id, t)
+  await sequelizeTypescript.transaction(async t => {
+    await user.save({ transaction: t })
 
-      await user.save({ transaction: t })
+    if (body.displayName !== undefined || body.description !== undefined) {
+      const userAccount = await AccountModel.load(user.Account.id, t)
 
       if (body.displayName !== undefined) userAccount.name = body.displayName
       if (body.description !== undefined) userAccount.description = body.description
       await userAccount.save({ transaction: t })
 
       await sendUpdateActor(userAccount, t)
-    })
-  }
+    }
+  })
 
   if (sendVerificationEmail === true) {
     await sendVerifyUserEmail(user, true)