From ebefc902f59be6c5542c19ff706e310d9dddf75f Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 29 Apr 2020 10:42:35 +0200 Subject: [PATCH] Add external login buttons --- client/src/app/login/login.component.html | 74 ++++++++++++--------- client/src/app/login/login.component.scss | 42 +++++++++++- client/src/app/login/login.component.ts | 24 +++++-- client/src/sass/include/_variables.scss | 2 - server/controllers/api/config.ts | 4 ++ server/lib/plugins/plugin-manager.ts | 16 ++++- shared/models/server/server-config.model.ts | 4 ++ 7 files changed, 125 insertions(+), 41 deletions(-) diff --git a/client/src/app/login/login.component.html b/client/src/app/login/login.component.html index 3e53e5854..b0639d8ca 100644 --- a/client/src/app/login/login.component.html +++ b/client/src/app/login/login.component.html @@ -23,40 +23,54 @@ Request new verification email. -
-
-
- - - -
- - -
- {{ formErrors.password }} -
-
- - -
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 }