From 67e969fd75167d9de29ef2c42acf491a6387b230 Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Thu, 26 May 2022 13:59:53 +0300 Subject: [PATCH] UI: 2fa improvement mobile view; remove required maxVerificationFailuresBeforeUserLockout --- .../two-factor-auth-settings.component.html | 5 +--- .../two-factor-auth-settings.component.scss | 9 ++++++-- .../two-factor-auth-settings.component.ts | 1 - .../authentication-dialog.component.scss | 20 ++++++++++++++-- .../email-auth-dialog.component.html | 23 ++++++++++++------- .../sms-auth-dialog.component.html | 23 ++++++++++++------- .../pages/security/security.component.html | 7 +++++- .../pages/security/security.component.scss | 6 ++++- .../home/pages/security/security.component.ts | 22 ++++++++++++++++++ .../two-factor-auth-login.component.scss | 14 +++++++---- .../shared/models/two-factor-auth.models.ts | 15 ++++++++---- .../assets/locale/locale.constant-en_US.json | 7 ++++-- 12 files changed, 114 insertions(+), 38 deletions(-) diff --git a/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.html b/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.html index 1efa83a2eb..dde38b21f6 100644 --- a/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.html +++ b/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.html @@ -140,10 +140,7 @@ admin.2fa.max-verification-failures-before-user-lockout - - - {{ 'admin.2fa.max-verification-failures-before-user-lockout-required' | translate }} - + diff --git a/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.scss b/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.scss index e29f039fde..86254926b7 100644 --- a/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.scss +++ b/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.scss @@ -16,8 +16,7 @@ @import "../../../../../scss/constants"; -:host{ - +:host { mat-card.settings-card { @media #{$mat-md} { width: 90%; @@ -48,17 +47,22 @@ .mat-expansion-panel { box-shadow: none; margin: 1px 0 0; + &.provider { overflow: inherit; + .mat-expansion-panel-header { padding: 0 24px 0 8px; + &.mat-expanded { height: 48px; } + .mat-slide-toggle { margin-right: 8px; } } + .mat-expansion-panel-header-title { height: 40px; } @@ -73,6 +77,7 @@ .mat-expansion-panel-header > .mat-content { overflow: inherit; } + .mat-expansion-panel-body { padding: 0 16px 8px 8px; } diff --git a/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.ts b/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.ts index c3f49a0c61..7567d57d73 100644 --- a/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.ts +++ b/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.ts @@ -114,7 +114,6 @@ export class TwoFactorAuthSettingsComponent extends PageComponent implements OnI private build2faSettingsForm(): void { this.twoFaFormGroup = this.fb.group({ maxVerificationFailuresBeforeUserLockout: [30, [ - Validators.required, Validators.pattern(/^\d*$/), Validators.min(0), Validators.max(65535) diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/authentication-dialog.component.scss b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/authentication-dialog.component.scss index a9325b6468..116db0fb85 100644 --- a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/authentication-dialog.component.scss +++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/authentication-dialog.component.scss @@ -13,7 +13,9 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -:host{ +@import "../../../../../../scss/constants"; + +:host { .mat-toolbar > h2 { font-weight: 400; letter-spacing: 0.25px; @@ -30,9 +32,11 @@ &:not(:first-of-type) { margin: 0 0 8px; } + &.description { margin: 0; color: rgba(0, 0, 0, 0.54); + &:last-of-type { margin-bottom: 24px; } @@ -45,6 +49,13 @@ .code-container { max-width: 170px; + + &.full-width-xs { + @media #{$mat-xs} { + max-width: 100%; + width: 100%; + } + } } .result-title { @@ -63,6 +74,7 @@ .step-description { max-width: 450px; + &.input { margin: 12px 0 0; } @@ -78,26 +90,30 @@ .backup-code { max-width: 500px; + .container { max-width: 500px; margin: 40px 0 8px; + .code { letter-spacing: 0.25px; padding: 0 24px; margin-bottom: 16px; font-family: Roboto Mono, "Helvetica Neue", monospace; + &.even { text-align: right; } } } + .action-buttons { margin-bottom: 40px; } } & ::ng-deep { - .mat-horizontal-stepper-header{ + .mat-horizontal-stepper-header { pointer-events: none !important; } } diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/email-auth-dialog.component.html b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/email-auth-dialog.component.html index 963374f49d..45663845be 100644 --- a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/email-auth-dialog.component.html +++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/email-auth-dialog.component.html @@ -64,8 +64,8 @@

{{ 'security.2fa.dialog.verification-step-description' | translate : {address: emailConfigForm.get('email').value} }}

-
- +
+ - +
+ + +
diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html index 50256ccc39..25a444257e 100644 --- a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html +++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html @@ -66,8 +66,8 @@

{{ 'security.2fa.dialog.verification-step-description' | translate : {address: smsConfigForm.get('phone').value} }}

-
- +
+ - +
+ + +
diff --git a/ui-ngx/src/app/modules/home/pages/security/security.component.html b/ui-ngx/src/app/modules/home/pages/security/security.component.html index 4a43db2ce7..8e279f9c75 100644 --- a/ui-ngx/src/app/modules/home/pages/security/security.component.html +++ b/ui-ngx/src/app/modules/home/pages/security/security.component.html @@ -56,9 +56,14 @@

{{ providersData.get(provider).name | translate }}

-
+
{{ providersData.get(provider).description | translate }}
+ +
+ {{ providersData.get(provider).activatedHint | translate: providerDataInfo(provider) }} +
+ diff --git a/ui-ngx/src/app/modules/home/pages/security/security.component.scss b/ui-ngx/src/app/modules/home/pages/security/security.component.scss index 4688e46fae..7dad927038 100644 --- a/ui-ngx/src/app/modules/home/pages/security/security.component.scss +++ b/ui-ngx/src/app/modules/home/pages/security/security.component.scss @@ -19,6 +19,7 @@ .profile-container { padding: 8px; } + mat-card.profile-card { @media #{$mat-gt-sm} { width: 70%; @@ -29,16 +30,19 @@ @media #{$mat-gt-xl} { width: 45%; } + .mat-subheader { line-height: 24px; - color: rgba(0,0,0,0.54); + color: rgba(0, 0, 0, 0.54); font-size: 14px; font-weight: 400; } + .profile-last-login-ts { font-size: 16px; font-weight: 400; } + .profile-btn-subtext { font: 400 14px / 16px Roboto, "Helvetica Neue", sans-serif; letter-spacing: 0.25px; diff --git a/ui-ngx/src/app/modules/home/pages/security/security.component.ts b/ui-ngx/src/app/modules/home/pages/security/security.component.ts index e142dcbb1c..34eda9781a 100644 --- a/ui-ngx/src/app/modules/home/pages/security/security.component.ts +++ b/ui-ngx/src/app/modules/home/pages/security/security.component.ts @@ -30,6 +30,9 @@ import { ClipboardService } from 'ngx-clipboard'; import { TwoFactorAuthenticationService } from '@core/http/two-factor-authentication.service'; import { AccountTwoFaSettings, + BackupCodeTwoFactorAuthAccountConfig, + EmailTwoFactorAuthAccountConfig, + SmsTwoFactorAuthAccountConfig, twoFactorAuthProvidersData, TwoFactorAuthProviderType } from '@shared/models/two-factor-auth.models'; @@ -231,4 +234,23 @@ export class SecurityComponent extends PageComponent implements OnInit, OnDestro } }); } + + providerDataInfo(provider: TwoFactorAuthProviderType) { + const info = {info: null}; + const providerConfig = this.accountConfig.configs[provider]; + if (isDefinedAndNotNull(providerConfig)) { + switch (provider) { + case TwoFactorAuthProviderType.EMAIL: + info.info = (providerConfig as EmailTwoFactorAuthAccountConfig).email; + break; + case TwoFactorAuthProviderType.SMS: + info.info = (providerConfig as SmsTwoFactorAuthAccountConfig).phoneNumber; + break; + case TwoFactorAuthProviderType.BACKUP_CODE: + info.info = (providerConfig as BackupCodeTwoFactorAuthAccountConfig).codesLeft; + break; + } + } + return info; + } } diff --git a/ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.scss b/ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.scss index 4d559f5435..864d099e3c 100644 --- a/ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.scss +++ b/ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.scss @@ -18,8 +18,10 @@ :host { display: flex; flex: 1 1 0; + .tb-two-factor-auth-login-content { background-color: #eee; + .tb-two-factor-auth-login-card { padding: 48px 48px 48px 16px; @@ -27,7 +29,7 @@ width: 450px !important; } - .mat-card-title{ + .mat-card-title { font: 400 28px / 36px Roboto, "Helvetica Neue", sans-serif; } @@ -46,7 +48,7 @@ margin-top: 16px; } - .providers-container{ + .providers-container { padding: 0; .mat-body { @@ -61,19 +63,23 @@ } } } - ::ng-deep{ + + ::ng-deep { button.provider { text-align: start; font-weight: 400; + &:not(.mat-button-disabled) { border-color: rgba(255, 255, 255, .8); } - .icon{ + + .icon { height: 18px; width: 18px; vertical-align: sub; } } + .mat-form-field-invalid .mat-hint { margin-top: 20px; } diff --git a/ui-ngx/src/app/shared/models/two-factor-auth.models.ts b/ui-ngx/src/app/shared/models/two-factor-auth.models.ts index fc56838899..10040e00e7 100644 --- a/ui-ngx/src/app/shared/models/two-factor-auth.models.ts +++ b/ui-ngx/src/app/shared/models/two-factor-auth.models.ts @@ -103,9 +103,10 @@ export interface TwoFaProviderInfo { export interface TwoFactorAuthProviderData { name: string; description: string; + activatedHint: string; } -export interface TwoFactorAuthProviderLoginData extends TwoFactorAuthProviderData { +export interface TwoFactorAuthProviderLoginData extends Omit { icon: string; placeholder: string; } @@ -115,25 +116,29 @@ export const twoFactorAuthProvidersData = new Map