Add informational message at login for visitors coming from upload button

resolves #1880

diff --git a/client/src/app/header/header.component.html b/client/src/app/header/header.component.html
index 8ee41c4de3fe5df221b5c18fb1546745adb8bd0d..4b3d5e10515c5a1e2ed5fcd0bfb9d0dadc9c978f 100644 (file)
--- a/client/src/app/header/header.component.html
+++ b/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>

diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss
index 736035b72ba776b6a60bef4b6c31aa0f7cec6c54..2bbde74bc7d2dbe659f2e5559915726ad0b7eff4 100644 (file)
--- a/client/src/app/header/header.component.scss
+++ b/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) {

diff --git a/client/src/app/header/header.component.ts b/client/src/app/header/header.component.ts
index c6e942e0e5c2368c024f661c3786c42bfd64da93..192d6945b3fcffd2763d6ebc7ba76ca4ec601731 100644 (file)
--- a/client/src/app/header/header.component.ts
+++ b/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)
 

diff --git a/client/src/app/login/login.component.html b/client/src/app/login/login.component.html
index 9bbeab3be3a97e93aab455527d46b40e164a4921..162f44ded8a7d0c2b36b0d04af7128adff35f9cb 100644 (file)
--- a/client/src/app/login/login.component.html
+++ b/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>

diff --git a/client/src/app/login/login.component.scss b/client/src/app/login/login.component.scss
index 8541a2681378165adf4643e7e3056435e987fcac..8ac231475ecc52c1ab015c18e04eb72a981752cd 100644 (file)
--- a/client/src/app/login/login.component.scss
+++ b/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;
   }
 }

diff --git a/client/src/app/login/login.component.ts b/client/src/app/login/login.component.ts
index ffadc9aa46eda943e120d8f2a9cb3ea20197650c..1394d6b5856be98c7ac63591dd478151d409534b 100644 (file)
--- a/client/src/app/login/login.component.ts
+++ b/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 { ServerConfig } from '@shared/models'
+import { ActivatedRoute } from '@angular/router'
+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,

diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts
index 2d522b5217da58aa8a098a5e3850ee2eedfb08fb..1d7651e78f4f99b157b8cd0bf1abfd780de8045e 100644 (file)
--- a/client/src/app/menu/menu.component.ts
+++ b/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
   ) {}
 

diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index a3261a8a66868ed92760d2afc91826d05859d77a..dc0d075c9a0dbb588c03c91458516f3a42e539eb 100644 (file)
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -165,4 +165,8 @@ ngb-tabset.bootstrap {
 
 .dropdown-divider {
   margin: 0.3rem 0;
-}
\ No newline at end of file
+}
+
+ngb-modal-backdrop {
+  z-index: 10000 !important;
+}

diff --git a/server/controllers/api/config.ts b/server/controllers/api/config.ts
index 6fad82408b4fcc25682046a68b7ca0f6726e94a4..06ee1ee857a739d032a29ca4ce377c4ac6f3e154 100644 (file)
--- a/server/controllers/api/config.ts
+++ b/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
+        }
+      }
     }
   }
 

diff --git a/shared/models/server/server-config.model.ts b/shared/models/server/server-config.model.ts
index 6d10723333f2c900672274934df467c4a391a77c..f1bb2153cd3f42d2f785ebcb922bae148655353e 100644 (file)
--- a/shared/models/server/server-config.model.ts
+++ b/shared/models/server/server-config.model.ts
@@ -126,4 +126,12 @@ export interface ServerConfig {
   tracker: {
     enabled: boolean
   }
+
+  followings: {
+    instance: {
+      autoFollowIndex: {
+        indexUrl: string
+      }
+    }
+  }
 }