7 files changed, 43 insertions, 6 deletions

diff --git a/client/src/app/shared/shared-main/angular/index.ts b/client/src/app/shared/shared-main/angular/index.ts
index 4b87c2952..f72d60313 100644
--- a/client/src/app/shared/shared-main/angular/index.ts
+++ b/client/src/app/shared/shared-main/angular/index.ts
@@ -5,5 +5,6 @@ export * from './duration-formatter.pipe'
 export * from './from-now.pipe'
 export * from './infinite-scroller.directive'
 export * from './link.component'
+export * from './login-link.component'
 export * from './number-formatter.pipe'
 export * from './peertube-template.directive'
diff --git a/client/src/app/shared/shared-main/angular/link.component.html b/client/src/app/shared/shared-main/angular/link.component.html
index e61a1e085..2ea2df2b5 100644
--- a/client/src/app/shared/shared-main/angular/link.component.html
+++ b/client/src/app/shared/shared-main/angular/link.component.html
@@ -2,10 +2,10 @@
   <ng-content></ng-content>
 </ng-template>
 
-<a *ngIf="!href" [routerLink]="internalLink" [attr.title]="title" [tabindex]="tabindex">
+<a *ngIf="!href" [routerLink]="internalLink" [attr.title]="title" [tabindex]="tabindex" [ngClass]="builtClasses">
   <ng-template *ngTemplateOutlet="content"></ng-template>
 </a>
 
-<a *ngIf="href" [href]="href" [target]="target" [attr.title]="title" [tabindex]="tabindex">
+<a *ngIf="href" [href]="href" [target]="target" [attr.title]="title" [tabindex]="tabindex" [ngClass]="builtClasses">
   <ng-template *ngTemplateOutlet="content"></ng-template>
 </a>
diff --git a/client/src/app/shared/shared-main/angular/link.component.scss b/client/src/app/shared/shared-main/angular/link.component.scss
index bb86d5488..f54240d31 100644
--- a/client/src/app/shared/shared-main/angular/link.component.scss
+++ b/client/src/app/shared/shared-main/angular/link.component.scss
@@ -1,4 +1,4 @@
-a {
+.no-class {
   color: inherit;
   text-decoration: inherit;
   position: inherit;
diff --git a/client/src/app/shared/shared-main/angular/link.component.ts b/client/src/app/shared/shared-main/angular/link.component.ts
index ecbd9151c..1f5975589 100644
--- a/client/src/app/shared/shared-main/angular/link.component.ts
+++ b/client/src/app/shared/shared-main/angular/link.component.ts
@@ -1,17 +1,27 @@
-import { Component, Input } from '@angular/core'
+import { Component, Input, OnInit } from '@angular/core'
 
 @Component({
   selector: 'my-link',
   styleUrls: [ './link.component.scss' ],
   templateUrl: './link.component.html'
 })
-export class LinkComponent {
+export class LinkComponent implements OnInit {
   @Input() internalLink?: string | any[]
 
   @Input() href?: string
-  @Input() target?: string
+  @Input() target = '_self'
 
   @Input() title?: string
 
+  @Input() className?: string
+
   @Input() tabindex: string | number
+
+  builtClasses: string
+
+  ngOnInit () {
+    this.builtClasses = this.className
+      ? this.className
+      : 'no-class'
+  }
 }
diff --git a/client/src/app/shared/shared-main/angular/login-link.component.html b/client/src/app/shared/shared-main/angular/login-link.component.html
new file mode 100644
index 000000000..f90ffba68
--- /dev/null
+++ b/client/src/app/shared/shared-main/angular/login-link.component.html
@@ -0,0 +1 @@
+<my-link i18n internalLink="/login" [href]="getExternalLoginHref()" [className]="className">{{ label }}</my-link>
diff --git a/client/src/app/shared/shared-main/angular/login-link.component.ts b/client/src/app/shared/shared-main/angular/login-link.component.ts
new file mode 100644
index 000000000..7e3a773c2
--- /dev/null
+++ b/client/src/app/shared/shared-main/angular/login-link.component.ts
@@ -0,0 +1,22 @@
+import { environment } from 'src/environments/environment'
+import { Component, Input } from '@angular/core'
+import { ServerService } from '@app/core'
+import { PluginsManager } from '@root-helpers/plugins-manager'
+
+@Component({
+  selector: 'my-login-link',
+  templateUrl: './login-link.component.html'
+})
+export class LoginLinkComponent {
+  @Input() label = $localize`Login`
+
+  @Input() className?: string
+
+  constructor (private server: ServerService) {
+
+  }
+
+  getExternalLoginHref () {
+    return PluginsManager.getDefaultLoginHref(environment.apiUrl, this.server.getHTMLConfig())
+  }
+}
diff --git a/client/src/app/shared/shared-main/shared-main.module.ts b/client/src/app/shared/shared-main/shared-main.module.ts
index eb1642d97..0bdf27263 100644
--- a/client/src/app/shared/shared-main/shared-main.module.ts
+++ b/client/src/app/shared/shared-main/shared-main.module.ts
@@ -25,6 +25,7 @@ import {
   FromNowPipe,
   InfiniteScrollerDirective,
   LinkComponent,
+  LoginLinkComponent,
   NumberFormatterPipe,
   PeerTubeTemplateDirective
 } from './angular'
@@ -92,6 +93,7 @@ import { VideoChannelService } from './video-channel'
     InfiniteScrollerDirective,
     PeerTubeTemplateDirective,
     LinkComponent,
+    LoginLinkComponent,
 
     ActionDropdownComponent,
     ButtonComponent,
@@ -152,6 +154,7 @@ import { VideoChannelService } from './video-channel'
     InfiniteScrollerDirective,
     PeerTubeTemplateDirective,
     LinkComponent,
+    LoginLinkComponent,
 
     ActionDropdownComponent,
     ButtonComponent,