Add informational message at login for visitors coming from upload button

resolves #1880

3 files changed, 26 insertions, 4 deletions

diff --git a/client/src/app/login/login.component.html b/client/src/app/login/login.component.html
index 9bbeab3be..162f44ded 100644
--- 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 8541a2681..8ac231475 100644
--- 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 ffadc9aa4..1394d6b58 100644
--- 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,