Add informational message at login for visitors coming from upload button

resolves #1880

client/src/app/header/header.component.html

@@ -4,7 +4,7 @@
 >
 <span (click)="doSearch()" class="icon icon-search"></span>
 
-<a class="upload-button" routerLink="/videos/upload">
+<a class="upload-button" (click)="goToUpload()">
   <my-global-icon iconName="upload"></my-global-icon>
   <span i18n class="upload-button-label">Upload</span>
 </a>

client/src/app/header/header.component.scss

@@ -53,6 +53,7 @@
   @include orange-button;
   @include button-with-icon(22px, 3px, -1px);
 
+  color: var(--mainBackgroundColor) !important;
   margin-right: 25px;
 
   @media screen and (max-width: 800px) {

client/src/app/header/header.component.ts

@@ -2,8 +2,9 @@ import { filter, first, map, tap } from 'rxjs/operators'
 import { Component, OnInit } from '@angular/core'
 import { ActivatedRoute, NavigationEnd, Params, Router } from '@angular/router'
 import { getParameterByName } from '../shared/misc/utils'
-import { AuthService } from '@app/core'
+import { AuthService, ServerService, Notifier } from '@app/core'
 import { of } from 'rxjs'
+import { ServerConfig } from '@shared/models'
 
 @Component({
   selector: 'my-header',
@@ -14,10 +15,15 @@ import { of } from 'rxjs'
 export class HeaderComponent implements OnInit {
   searchValue = ''
 
+  private serverConfig: ServerConfig
+
   constructor (
     private router: Router,
     private route: ActivatedRoute,
-    private auth: AuthService
+    private auth: AuthService,
+    private serverService: ServerService,
+    private authService: AuthService,
+    private notifier: Notifier
   ) {}
 
   ngOnInit () {
@@ -27,6 +33,13 @@ export class HeaderComponent implements OnInit {
           map(() => getParameterByName('search', window.location.href))
         )
         .subscribe(searchQuery => this.searchValue = searchQuery || '')
+
+    this.serverConfig = this.serverService.getTmpConfig()
+    this.serverService.getConfig().subscribe(
+      config => this.serverConfig = config,
+
+      err => this.notifier.error(err.message)
+    )
   }
 
   doSearch () {
@@ -45,6 +58,25 @@ export class HeaderComponent implements OnInit {
     o.subscribe(() => this.router.navigate([ '/search' ], { queryParams }))
   }
 
+  isUserLoggedIn () {
+    return this.authService.isLoggedIn()
+  }
+
+  isRegistrationAllowed () {
+    return this.serverConfig.signup.allowed &&
+           this.serverConfig.signup.allowedForCurrentIP
+  }
+
+  goToUpload () {
+    if (this.isUserLoggedIn()) {
+      this.router.navigate([ '/videos/upload' ])
+    } else if (this.isRegistrationAllowed()) {
+      this.router.navigate([ '/signup' ])
+    } else {
+      this.router.navigate([ '/login', { fromUpload: true } ])
+    }
+  }
+
   private loadUserLanguagesIfNeeded (queryParams: any) {
     if (queryParams && queryParams.languageOneOf) return of(queryParams)
 

client/src/app/login/login.component.html

@@ -3,6 +3,18 @@
     Login
   </div>
 
+  <div class="alert alert-warning" *ngIf="from.upload" role="alert">
+    <h6 class="alert-heading" i18n>
+      If you are looking for an account…
+    </h6>
+    <div i18n>
+      Currently this instance doesn't allow for user registration, but you can find an instance 
+      that gives you the possibility to sign up for an account and upload your videos there.
+      Find yours among multiple instances at <a class="alert-link" [href]="instancesIndexUrl" target="_blank" rel="noopener noreferrer">{{ instancesIndexUrl }}</a>
+      , a directory of instances recommended by this instance.
+    </div>
+  </div>
+
   <div *ngIf="error" class="alert alert-danger">{{ error }}
     <span *ngIf="error === 'User email is not verified.'"> <a i18n routerLink="/verify-account/ask-send-email">Request new verification email.</a></span>
   </div>

client/src/app/login/login.component.scss

@@ -20,8 +20,10 @@ input[type=submit] {
 .create-an-account, .forgot-password-button {
   color: var(--mainForegroundColor);
   cursor: pointer;
+  transition: opacity cubic-bezier(0.39, 0.575, 0.565, 1);
   
   &:hover {
-    text-decoration: underline !important;
+    text-decoration: none !important;
+    opacity: .7 !important;
   }
 }

client/src/app/login/login.component.ts

@@ -1,5 +1,5 @@
 import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'
-import { Notifier, RedirectService, ServerService } from '@app/core'
+import { Notifier, RedirectService } from '@app/core'
 import { UserService } from '@app/shared'
 import { AuthService } from '../core'
 import { FormReactive } from '../shared'
@@ -7,8 +7,8 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
 import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
 import { LoginValidatorsService } from '@app/shared/forms/form-validators/login-validators.service'
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
-import { ActivatedRoute, Router } from '@angular/router'
+import { ActivatedRoute } from '@angular/router'
-import { ServerConfig } from '@shared/models'
+import { ServerConfig } from '@shared/models/server/server-config.model'
 
 @Component({
   selector: 'my-login',
@@ -22,6 +22,9 @@ export class LoginComponent extends FormReactive implements OnInit {
 
   error: string = null
   forgotPasswordEmail = ''
+  from = {
+    upload: false
+  }
 
   private openedForgotPasswordModal: NgbModalRef
   private serverConfig: ServerConfig
@@ -44,12 +47,17 @@ export class LoginComponent extends FormReactive implements OnInit {
     return this.serverConfig.signup.allowed === true
   }
 
+  get instancesIndexUrl () {
+    return this.serverConfig.followings.instance.autoFollowIndex.indexUrl || 'https://instances.joinpeertube.org'
+  }
+
   isEmailDisabled () {
     return this.serverConfig.email.enabled === false
   }
 
   ngOnInit () {
     this.serverConfig = this.route.snapshot.data.serverConfig
+    this.from.upload = Boolean(this.route.snapshot.paramMap.get('fromUpload'))
 
     this.buildForm({
       username: this.loginValidatorsService.LOGIN_USERNAME,

client/src/app/menu/menu.component.ts

@@ -33,7 +33,6 @@ export class MenuComponent implements OnInit {
     private authService: AuthService,
     private serverService: ServerService,
     private redirectService: RedirectService,
-    private themeService: ThemeService,
     private hotkeysService: HotkeysService
   ) {}
 

client/src/sass/bootstrap.scss

@@ -166,3 +166,7 @@ ngb-tabset.bootstrap {
 .dropdown-divider {
   margin: 0.3rem 0;
 }
+
+ngb-modal-backdrop {
+  z-index: 10000 !important;
+}

server/controllers/api/config.ts

@@ -155,6 +155,14 @@ async function getConfig (req: express.Request, res: express.Response) {
     },
     tracker: {
       enabled: CONFIG.TRACKER.ENABLED
+    },
+
+    followings: {
+      instance: {
+        autoFollowIndex: {
+          indexUrl: CONFIG.FOLLOWINGS.INSTANCE.AUTO_FOLLOW_INDEX.INDEX_URL
+        }
+      }
     }
   }
 

shared/models/server/server-config.model.ts

@@ -126,4 +126,12 @@ export interface ServerConfig {
   tracker: {
     enabled: boolean
   }
+
+  followings: {
+    instance: {
+      autoFollowIndex: {
+        indexUrl: string
+      }
+    }
+  }
 }