-
diff --git a/client/src/app/login/login.component.scss b/client/src/app/login/login.component.scss
index 8ac231475..ccc98c12a 100644
--- a/client/src/app/login/login.component.scss
+++ b/client/src/app/login/login.component.scss
@@ -21,9 +21,49 @@ input[type=submit] {
color: var(--mainForegroundColor);
cursor: pointer;
transition: opacity cubic-bezier(0.39, 0.575, 0.565, 1);
-
+
&:hover {
text-decoration: none !important;
opacity: .7 !important;
}
}
+
+.login-form-and-externals {
+ display: flex;
+ flex-wrap: wrap;
+ font-size: 15px;
+
+ form {
+ margin: 0 50px 20px 0;
+ }
+
+ .external-login-blocks {
+ padding: 0 10px 10px 10px;
+ min-width: 200px;
+
+ .block-title {
+ font-weight: $font-semibold;
+ }
+
+ .external-login-block {
+ cursor: pointer;
+ border: 1px solid #d1d7e0;
+ border-radius: 5px;
+ margin: 10px 10px 0 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 35px;
+ min-width: 100px;
+
+ &:hover {
+ background-color: rgba(209, 215, 224, 0.5)
+ }
+
+ a {
+ @include disable-default-a-behaviour;
+ color: var(--mainForegroundColor);
+ }
+ }
+ }
+}
diff --git a/client/src/app/login/login.component.ts b/client/src/app/login/login.component.ts
index 9c8f5c52e..5db8d3dbb 100644
--- a/client/src/app/login/login.component.ts
+++ b/client/src/app/login/login.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'
+import { Component, ElementRef, OnInit, ViewChild, AfterViewInit } from '@angular/core'
import { Notifier, RedirectService } from '@app/core'
import { UserService } from '@app/shared'
import { AuthService } from '../core'
@@ -8,7 +8,8 @@ import { FormValidatorService } from '@app/shared/forms/form-validators/form-val
import { LoginValidatorsService } from '@app/shared/forms/form-validators/login-validators.service'
import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
import { ActivatedRoute } from '@angular/router'
-import { ServerConfig } from '@shared/models/server/server-config.model'
+import { ServerConfig, RegisteredExternalAuthConfig } from '@shared/models/server/server-config.model'
+import { environment } from 'src/environments/environment'
@Component({
selector: 'my-login',
@@ -16,13 +17,14 @@ import { ServerConfig } from '@shared/models/server/server-config.model'
styleUrls: [ './login.component.scss' ]
})
-export class LoginComponent extends FormReactive implements OnInit {
- @ViewChild('emailInput', { static: true }) input: ElementRef
+export class LoginComponent extends FormReactive implements OnInit, AfterViewInit {
+ @ViewChild('usernameInput', { static: false }) usernameInput: ElementRef
@ViewChild('forgotPasswordModal', { static: true }) forgotPasswordModal: ElementRef
error: string = null
forgotPasswordEmail = ''
isAuthenticatedWithExternalAuth = false
+ externalLogins: string[] = []
private openedForgotPasswordModal: NgbModalRef
private serverConfig: ServerConfig
@@ -63,8 +65,20 @@ export class LoginComponent extends FormReactive implements OnInit {
username: this.loginValidatorsService.LOGIN_USERNAME,
password: this.loginValidatorsService.LOGIN_PASSWORD
})
+ }
- this.input.nativeElement.focus()
+ ngAfterViewInit () {
+ if (this.usernameInput) {
+ this.usernameInput.nativeElement.focus()
+ }
+ }
+
+ getExternalLogins () {
+ return this.serverConfig.plugin.registeredExternalAuths
+ }
+
+ getAuthHref (auth: RegisteredExternalAuthConfig) {
+ return environment.apiUrl + `/plugins/${auth.name}/${auth.version}/auth/${auth.authName}`
}
login () {
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 72eb7b61e..46f1e99f7 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -53,8 +53,6 @@ $sub-menu-color: #F7F7F7;
$footer-height: 30px;
$footer-margin: 30px;
-$footer-border-color: $header-border-color;
-
$separator-border-color: rgba(0, 0, 0, 0.10);
$video-miniature-width: 238px;
diff --git a/server/controllers/api/config.ts b/server/controllers/api/config.ts
index e8941bc73..85f3ad3d9 100644
--- a/server/controllers/api/config.ts
+++ b/server/controllers/api/config.ts
@@ -278,6 +278,8 @@ function getIdAndPassAuthPlugins () {
for (const auth of p.idAndPassAuths) {
result.push({
npmName: p.npmName,
+ name: p.name,
+ version: p.version,
authName: auth.authName,
weight: auth.getWeight()
})
@@ -294,6 +296,8 @@ function getExternalAuthsPlugins () {
for (const auth of p.externalAuths) {
result.push({
npmName: p.npmName,
+ name: p.name,
+ version: p.version,
authName: auth.authName,
authDisplayName: auth.authDisplayName
})
diff --git a/server/lib/plugins/plugin-manager.ts b/server/lib/plugins/plugin-manager.ts
index 38336bcc6..f7b84b1ff 100644
--- a/server/lib/plugins/plugin-manager.ts
+++ b/server/lib/plugins/plugin-manager.ts
@@ -106,14 +106,24 @@ export class PluginManager implements ServerHook {
getIdAndPassAuths () {
return this.getRegisteredPlugins()
- .map(p => ({ npmName: p.npmName, idAndPassAuths: p.registerHelpersStore.getIdAndPassAuths() }))
+ .map(p => ({
+ npmName: p.npmName,
+ name: p.name,
+ version: p.version,
+ idAndPassAuths: p.registerHelpersStore.getIdAndPassAuths()
+ }))
.filter(v => v.idAndPassAuths.length !== 0)
}
getExternalAuths () {
return this.getRegisteredPlugins()
- .map(p => ({ npmName: p.npmName, externalAuths: p.registerHelpersStore.getExternalAuths() }))
- .filter(v => v.externalAuths.length !== 0)
+ .map(p => ({
+ npmName: p.npmName,
+ name: p.name,
+ version: p.version,
+ externalAuths: p.registerHelpersStore.getExternalAuths()
+ }))
+ .filter(v => v.externalAuths.length !== 0)
}
getRegisteredSettings (npmName: string) {
diff --git a/shared/models/server/server-config.model.ts b/shared/models/server/server-config.model.ts
index 0ff079216..a1f9b3b5d 100644
--- a/shared/models/server/server-config.model.ts
+++ b/shared/models/server/server-config.model.ts
@@ -14,12 +14,16 @@ export interface ServerConfigTheme extends ServerConfigPlugin {
export interface RegisteredExternalAuthConfig {
npmName: string
+ name: string
+ version: string
authName: string
authDisplayName: string
}
export interface RegisteredIdAndPassAuthConfig {
npmName: string
+ name: string
+ version: string
authName: string
weight: number
}