From e687fb0a47ab0c3cbcb395c5bd4892717b8f889d Mon Sep 17 00:00:00 2001 From: Daniel Palafox Date: Wed, 6 Mar 2024 13:53:40 -0600 Subject: [PATCH] Fix/9072-sign-in-sign-in-updates (#2174) * fix: Add missing translation properties * feature: Add new sign in updates behind togglz --------- Co-authored-by: Daniel Palafox --- .../my-orcid-alerts.component.html | 101 ++++++-- .../my-orcid-alerts.component.scss | 36 +++ .../my-orcid-alerts.component.scss-theme.scss | 26 ++ .../my-orcid-alerts.component.ts | 3 + .../my-orcid-alerts/my-orcid-alerts.module.ts | 3 +- src/app/cdk/panel/panels/panels.component.ts | 1 - ...-factor-authentication-form.component.html | 215 +++++++++------- ...-factor-authentication-form.component.scss | 61 +++++ ...hentication-form.component.scss-theme.scss | 15 ++ ...wo-factor-authentication-form.component.ts | 6 +- .../print-errors/print-errors.component.html | 156 +++++++++--- .../print-errors/print-errors.component.ts | 26 +- .../form-sign-in/form-sign-in.component.html | 239 ++++++++++++++---- .../form-sign-in/form-sign-in.component.scss | 27 ++ .../form-sign-in/form-sign-in.component.ts | 61 ++++- .../components/sign-in.scss-theme.scss | 50 ++++ src/app/sign-in/components/sign-in.style.scss | 155 ++++++++++++ .../components/social/social.component.html | 24 +- .../components/social/social.component.scss | 18 ++ .../components/social/social.component.ts | 4 +- .../pages/sign-in/sign-in.component.html | 84 +++++- .../pages/sign-in/sign-in.component.scss | 57 +++++ .../sign-in/sign-in.component.scss-theme.scss | 32 +++ .../pages/sign-in/sign-in.component.ts | 30 ++- .../properties/signin/signin.en.properties | 6 +- .../properties/signin/signin.lr.properties | 4 +- .../properties/signin/signin.rl.properties | 4 +- .../properties/signin/signin.xx.properties | 4 +- 28 files changed, 1230 insertions(+), 218 deletions(-) create mode 100644 src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.scss-theme.scss create mode 100644 src/app/sign-in/components/sign-in.scss-theme.scss create mode 100644 src/app/sign-in/components/sign-in.style.scss diff --git a/src/app/cdk/my-orcid-alerts/my-orcid-alerts.component.html b/src/app/cdk/my-orcid-alerts/my-orcid-alerts.component.html index 2bc28c15f9..fd31a567b5 100644 --- a/src/app/cdk/my-orcid-alerts/my-orcid-alerts.component.html +++ b/src/app/cdk/my-orcid-alerts/my-orcid-alerts.component.html @@ -1,21 +1,84 @@ - - -
-

- + + +

+

+ + Your email couldn't be verified, please check the link you used to + verify it. + + + Thank you for verifying your email + +

+
+ + + + + +
+
+ + check_circle + warning + - Your email couldn't be verified, please check the link you used to - verify it. - - - Thank you for verifying your email - -

+
+
+
+ + Almost done! + +
+
+ + Sign in to complete your email verification + + + Your email couldn't be verified, please check the link you used to + verify it. + +
+
- - + + +
+
+ warning +
+
+
+ + Something's not quite right... + +
+
+ Please check that your sign in details are correct and then try signing in again +
+
+
+ + diff --git a/src/app/cdk/my-orcid-alerts/my-orcid-alerts.component.scss b/src/app/cdk/my-orcid-alerts/my-orcid-alerts.component.scss index 3538c0f31d..28a7f42e50 100644 --- a/src/app/cdk/my-orcid-alerts/my-orcid-alerts.component.scss +++ b/src/app/cdk/my-orcid-alerts/my-orcid-alerts.component.scss @@ -14,3 +14,39 @@ mat-toolbar { } } } + +.verification, +.invalid { + .main-paragraph { + margin-bottom: 16px; + } + .content div:not(:last-child) { + margin-bottom: 8px; + } + + padding: 16px; + border: solid 2px; + border-radius: 4px; + display: flex; + + p { + margin: 0; + } + + mat-icon, + img { + margin-right: 16px; + } + + mat-form-field,.input-container { + width: 100%; + } + + mat-form-field { + margin-bottom: 8px; + } +} + +.invalid,.verification { + margin-bottom: 24px; +} diff --git a/src/app/cdk/my-orcid-alerts/my-orcid-alerts.component.scss-theme.scss b/src/app/cdk/my-orcid-alerts/my-orcid-alerts.component.scss-theme.scss index 1c42fbd00e..3001ae4976 100644 --- a/src/app/cdk/my-orcid-alerts/my-orcid-alerts.component.scss-theme.scss +++ b/src/app/cdk/my-orcid-alerts/my-orcid-alerts.component.scss-theme.scss @@ -1,14 +1,40 @@ +@use '@angular/material' as mat; @import 'src/assets/scss/material.orcid-theme.scss'; @mixin my-orcid-alerts-theme($theme) { $primary: map-get($theme, primary); $accent: map-get($theme, accent); + $warn: map-get($theme, warn); $foreground: map-get($theme, foreground); $background: map-get($theme, background); .mat-toolbar { background: map-get($foreground, 'state-notice-light'); color: $orcid-dark-primary-text; } + + .verification { + background-color: mat.get-color-from-palette( + $background, + brand-primary-lightest + ); + border-color: map-get($foreground, 'brand-primary'); + + mat-icon { + color: mat.get-color-from-palette( + $foreground, + 'brand-primary' + ) !important; + } + } + + .invalid { + background-color: mat.get-color-from-palette($warn, 50); + border-color: map-get($foreground, 'state-warning-dark'); + + mat-icon { + color: map-get($foreground, 'state-warning-dark'); + } + } } @include my-orcid-alerts-theme($orcid-app-theme); diff --git a/src/app/cdk/my-orcid-alerts/my-orcid-alerts.component.ts b/src/app/cdk/my-orcid-alerts/my-orcid-alerts.component.ts index c1811e8f13..5ca1ba12ab 100644 --- a/src/app/cdk/my-orcid-alerts/my-orcid-alerts.component.ts +++ b/src/app/cdk/my-orcid-alerts/my-orcid-alerts.component.ts @@ -11,6 +11,9 @@ import { Component, Input, OnInit } from '@angular/core' export class MyOrcidAlertsComponent implements OnInit { @Input() emailVerified: boolean @Input() invalidVerifyUrl: boolean + @Input() signInUpdatesV1Togglz: boolean + @Input() printError: boolean + @Input() badCredentials: boolean constructor() {} diff --git a/src/app/cdk/my-orcid-alerts/my-orcid-alerts.module.ts b/src/app/cdk/my-orcid-alerts/my-orcid-alerts.module.ts index a39fa91894..90496527b2 100644 --- a/src/app/cdk/my-orcid-alerts/my-orcid-alerts.module.ts +++ b/src/app/cdk/my-orcid-alerts/my-orcid-alerts.module.ts @@ -2,10 +2,11 @@ import { NgModule } from '@angular/core' import { CommonModule } from '@angular/common' import { MyOrcidAlertsComponent } from './my-orcid-alerts.component' import { MatToolbarModule } from '@angular/material/toolbar' +import { MatIconModule } from '@angular/material/icon' @NgModule({ declarations: [MyOrcidAlertsComponent], - imports: [CommonModule, MatToolbarModule], + imports: [CommonModule, MatToolbarModule, MatIconModule], exports: [MyOrcidAlertsComponent], }) export class MyOrcidAlertsModule {} diff --git a/src/app/cdk/panel/panels/panels.component.ts b/src/app/cdk/panel/panels/panels.component.ts index dfa8440e5a..dbd74cbbb3 100644 --- a/src/app/cdk/panel/panels/panels.component.ts +++ b/src/app/cdk/panel/panels/panels.component.ts @@ -81,7 +81,6 @@ export class PanelsComponent implements OnInit { private _dialog: MatDialog, private _platform: PlatformInfoService, private _verificationEmailModalService: VerificationEmailModalService, - private _togglz: TogglzService ) {} add(type: string, action?: ADD_EVENT_ACTION) { diff --git a/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.html b/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.html index f3bf0efeb3..ac1b032298 100644 --- a/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.html +++ b/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.html @@ -1,56 +1,77 @@
-

Two-factor authentication

- - - Two-factor authentication code - - - {{ inputVerificationCode.value?.length || 0 }}/6Two-factor authentication

+
+ Two-factor authentication code + + - -

- Authentication code is required -

-

- {{ inputVerificationCode.value?.length || 0 }}/6 -

- + Two-factor authentication code + + + {{ inputVerificationCode.value?.length || 0 }}/6 + +

+ Authentication code is required +

+

+ {{ inputVerificationCode.value?.length || 0 }}/6 +

+ - -

- Invalid authentication code length -

-

- {{ inputVerificationCode.value?.length || 0 }}/6 -

- - +

+ Invalid authentication code length +

+

+ {{ inputVerificationCode.value?.length || 0 }}/6 +

+ + +

Enter a code @@ -64,7 +85,11 @@ Don't have your device? Enter a recovery code @@ -75,7 +100,11 @@ Don't have your device or recovery code? ORCID Help Center

- - - Recovery code +
+ Recovery code - - {{ inputRecoveryCode.value?.length || 0 }}/10 - -

- Recovery code is required -

-

{{ inputRecoveryCode.value?.length || 0 }}/10

- + + Recovery code + + + {{ inputRecoveryCode.value?.length || 0 }}/10 + +

+ Recovery code is required +

+

{{ inputRecoveryCode.value?.length || 0 }}/10

+ - -

- Invalid recovery code length -

-

{{ inputRecoveryCode.value?.length || 0 }}/10

- - +

+ Invalid recovery code length +

+

{{ inputRecoveryCode.value?.length || 0 }}/10

+ + +
diff --git a/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.scss b/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.scss index cf143c793e..c9b74ad4e1 100644 --- a/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.scss +++ b/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.scss @@ -29,3 +29,64 @@ .orcid-error { margin-top: 20px !important; } + +.input-container { + margin-bottom: 20px; + ::ng-deep { + mat-error { + margin-top: 8px !important; + font-size: 12px; + } + + mat-form-field { + padding-top: 8px; + + .mat-form-field-subscript-wrapper { + padding: 0; + } + + .mat-form-field-wrapper { + padding-bottom: 2px; + } + } + + .mat-form-field-appearance-outline { + .mat-form-field-wrapper { + margin: 0; + + .mat-form-field-outline { + top: 0px; + } + + .mat-form-field-prefix { + top: 0.35em; + + mat-icon { + margin-inline-end: 8px; + } + } + + .mat-form-field-flex { + .mat-form-field-infix { + border-top: 0px; + padding: 10px 0 10px 0; + } + } + } + } + + mat-form-field.mat-form-field.mat-primary.mat-form-field-type-mat-input.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-invalid { + margin-bottom: 0px; + } + } +} + +mat-label.orc-font-small-print { + font-weight: bold; + display: block; + margin-bottom: 4px; + + label { + font-weight: normal; + } +} diff --git a/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.scss-theme.scss b/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.scss-theme.scss new file mode 100644 index 0000000000..c2cb366e91 --- /dev/null +++ b/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.scss-theme.scss @@ -0,0 +1,15 @@ +@use '@angular/material' as mat; +@import 'src/assets/scss/material.orcid-theme.scss'; + +@mixin two-factor-authentication-form-theme($theme) { + $primary: map-get($theme, primary); + $background: map-get($theme, background); + $foreground: map-get($theme, foreground); + + .authenticate-button { + color: $orcid-light-primary-text; + background: mat.get-color-from-palette($primary, 700); + } +} + +@include two-factor-authentication-form-theme($orcid-app-theme); diff --git a/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.ts b/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.ts index 6023b3057d..16c2997c8e 100644 --- a/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.ts +++ b/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.ts @@ -19,12 +19,16 @@ import { WINDOW } from '../../window' @Component({ selector: 'app-two-factor-authentication-form', templateUrl: './two-factor-authentication-form.component.html', - styleUrls: ['./two-factor-authentication-form.component.scss'], + styleUrls: [ + './two-factor-authentication-form.component.scss', + './two-factor-authentication-form.component.scss-theme.scss' + ], preserveWhitespaces: true, }) export class TwoFactorAuthenticationFormComponent implements AfterViewInit { @Input() showBadVerificationCode: boolean @Input() showBadRecoveryCode: boolean + @Input() signInUpdatesV1Togglz: boolean @Output() authenticate = new EventEmitter<{ verificationCode?: string recoveryCode?: string diff --git a/src/app/sign-in/components/errors/print-errors/print-errors.component.html b/src/app/sign-in/components/errors/print-errors/print-errors.component.html index 6fc9225992..5807d7be61 100644 --- a/src/app/sign-in/components/errors/print-errors/print-errors.component.html +++ b/src/app/sign-in/components/errors/print-errors/print-errors.component.html @@ -1,37 +1,119 @@ - - error - - Incorrect username and/or password - - - - error - - This account is deprecated. Please refer to account: - - {{ orcidPrimaryDeprecated }} - - - error - - The ORCID record exists but has not been claimed. Would you like to - - resend the claim email? - - - error - - Invalid ORCID iD, please - - contact support - + + + error + + Incorrect username and/or password + + + + error + + This account is deprecated. Please refer to account: + + {{ orcidPrimaryDeprecated }} + + + error + + The ORCID record exists but has not been claimed. Would you like to + + resend the claim email? + + + error + + Invalid ORCID iD, please + + contact support + + + +
+
+ error +
+
+
+

+ + + The email address + + {{ email }} + is already associated with + + an unclaimed + + a deactivated + + ORCID record. + + You cannot sign in to ORCID with this email address until you have claimed the record. + + + You will need to reactivate the account before you can sign in with this email address + + + + + + This ORCID account has been deprecated. The active account is +  {{ orcidPrimaryDeprecated }} + +

+
+ + +
+
+ diff --git a/src/app/sign-in/components/errors/print-errors/print-errors.component.ts b/src/app/sign-in/components/errors/print-errors/print-errors.component.ts index fdb064c56d..d559535b01 100644 --- a/src/app/sign-in/components/errors/print-errors/print-errors.component.ts +++ b/src/app/sign-in/components/errors/print-errors/print-errors.component.ts @@ -1,19 +1,29 @@ -import { Component, Inject, Input, OnInit } from '@angular/core' +import { Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core' import { WINDOW } from '../../../../cdk/window' @Component({ selector: 'app-print-errors', templateUrl: './print-errors.component.html', - styleUrls: ['./print-errors.component.scss'], + styleUrls: [ + './print-errors.component.scss', + '../../sign-in.style.scss', + '../../sign-in.scss-theme.scss' + ], preserveWhitespaces: true, }) export class PrintErrorsComponent implements OnInit { @Input() badCredentials: boolean @Input() showDeprecatedError: boolean + @Input() showDeactivatedError: boolean @Input() showUnclaimedError: boolean @Input() showInvalidUser: boolean @Input() orcidPrimaryDeprecated: string @Input() email: string + @Input() signInUpdatesV1Togglz: boolean + + @Output() signInActiveAccount = new EventEmitter() + @Output() deactivatedAccount = new EventEmitter() + @Output() unclaimedAccount = new EventEmitter() constructor(@Inject(WINDOW) private window: Window) {} @@ -23,6 +33,18 @@ export class PrintErrorsComponent implements OnInit { this.navigateTo(`resend-claim?email=` + encodeURIComponent(this.email)) } + unclaimed() { + this.unclaimedAccount.emit() + } + + deactivated() { + this.deactivatedAccount.emit() + } + + deprecatedAccount() { + this.signInActiveAccount.emit() + } + navigateTo(val) { this.window.location.href = val } diff --git a/src/app/sign-in/components/form-sign-in/form-sign-in.component.html b/src/app/sign-in/components/form-sign-in/form-sign-in.component.html index c76580eb09..8e63d98efc 100644 --- a/src/app/sign-in/components/form-sign-in/form-sign-in.component.html +++ b/src/app/sign-in/components/form-sign-in/form-sign-in.component.html @@ -1,60 +1,185 @@ - - - Email or 16-digit ORCID iD - - - example@email.com or 0000-0001-2345-6789 - + + + + Email or 16-digit ORCID iD + + + example@email.com or 0000-0001-2345-6789 + - Email or 16-digit ORCID iD is required - + Email or 16-digit ORCID iD is required + - Use the format example@email.com or 0000-0001-2345-6789 - - + Use the format example@email.com or 0000-0001-2345-6789 + + + + + Password + + + + Passwords must be 256 characters or less. Please + + + reset your password + + + to sign in. + + + + + + + +
+ + Email +  or  + ORCID iD + + + + + + For example: joe@institution.edu or 0000-1234-5678-9101 + + + Please enter a valid email address or your ORCID iD + + + Please enter a valid email address or ORCID iD, for example: joe@institution.edu or 0000-1234-5678-9101 + + + + +
+
+ Password + + + + +
+
+ error +
+
+
+

+ Your password is more than 256 characters long. + You cannot sign in to this ORCID account until you have reset your password +

+
+ +
+
+
+ + - - Password - - - - Passwords must be 256 characters or less. Please - - - reset your password - - - to sign in. - - - + - + Forgot your password or ORCID ID? -
+
Don't have an ORCID iD yet? diff --git a/src/app/sign-in/components/form-sign-in/form-sign-in.component.scss b/src/app/sign-in/components/form-sign-in/form-sign-in.component.scss index be84fda615..4b0ee1f435 100644 --- a/src/app/sign-in/components/form-sign-in/form-sign-in.component.scss +++ b/src/app/sign-in/components/form-sign-in/form-sign-in.component.scss @@ -29,3 +29,30 @@ button { .register-now { display: inline; } + +mat-form-field,.input-container { + width: 100%; +} + +mat-form-field,.input-container { + margin-bottom: 8px; +} + +mat-label.orc-font-small-print { + font-weight: bold; + display: block; + margin-bottom: 4px; + + label { + font-weight: normal; + } +} + +.forgot-password-button { + justify-content: center; + margin-top: 16px; +} + + mat-divider { + margin: 0px 0 30px 0; + } diff --git a/src/app/sign-in/components/form-sign-in/form-sign-in.component.ts b/src/app/sign-in/components/form-sign-in/form-sign-in.component.ts index 9b4f1c4566..d6291501b9 100644 --- a/src/app/sign-in/components/form-sign-in/form-sign-in.component.ts +++ b/src/app/sign-in/components/form-sign-in/form-sign-in.component.ts @@ -18,7 +18,7 @@ import { } from '@angular/forms' import { ActivatedRoute, Router } from '@angular/router' import { catchError, first, map, takeUntil, tap } from 'rxjs/operators' -import { isRedirectToTheAuthorizationPage } from 'src/app/constants' +import { ApplicationRoutes, isRedirectToTheAuthorizationPage } from 'src/app/constants' import { UserService } from 'src/app/core' import { OauthParameters, RequestInfoForm } from 'src/app/types' @@ -36,17 +36,25 @@ import { UserSession } from 'src/app/types/session.local' import { ERROR_REPORT } from 'src/app/errors' import { ErrorStateMatcherForPasswordField } from '../../ErrorStateMatcherForPasswordField' import { GoogleTagManagerService } from '../../../core/google-tag-manager/google-tag-manager.service' +import { SnackbarService } from 'src/app/cdk/snackbar/snackbar.service' @Component({ selector: 'app-form-sign-in', templateUrl: './form-sign-in.component.html', - styleUrls: ['./form-sign-in.component.scss'], + styleUrls: [ + './form-sign-in.component.scss', + '../sign-in.style.scss', + '../sign-in.scss-theme.scss' + ], preserveWhitespaces: true, }) export class FormSignInComponent implements OnInit, AfterViewInit, OnDestroy { @ViewChild('firstInput') firstInput: ElementRef @Input() signInType: TypeSignIn @Input() signInData: SignInData + @Input() signInUpdatesV1Togglz: boolean + @Input() emailVerified: boolean + @Input() invalidVerifyUrl: boolean @Output() isOauthError = new EventEmitter() @Output() show2FAEmitter = new EventEmitter() @Output() loading = new EventEmitter() @@ -70,6 +78,17 @@ export class FormSignInComponent implements OnInit, AfterViewInit, OnDestroy { authorizationFormSubmitted: boolean backendErrorsMatcher = new ErrorStateMatcherForPasswordField() + placeholderUsername = $localize`:@@ngOrcid.signin.username:Email or 16-digit ORCID iD` + placeholderPassword = $localize`:@@ngOrcid.signin.yourOrcidPassword:Your ORCID password` + + get passwordForm() { + return this.authorizationForm.controls.password + } + + get usernameForm() { + return this.authorizationForm.controls.username + } + constructor( private _user: UserService, private _platformInfo: PlatformInfoService, @@ -82,7 +101,8 @@ export class FormSignInComponent implements OnInit, AfterViewInit, OnDestroy { private _errorHandler: ErrorHandlerService, private _signInGuard: SignInGuard, private _userInfo: UserService, - private cd: ChangeDetectorRef + private cd: ChangeDetectorRef, + private _snackBar: SnackbarService, ) { this.signInLocal.type = this.signInType combineLatest([_userInfo.getUserSession(), _platformInfo.get()]) @@ -258,6 +278,7 @@ export class FormSignInComponent implements OnInit, AfterViewInit, OnDestroy { this.showBadRecoveryCode = false this.showInvalidUser = false this.badCredentials = false + this.printError = false } register() { @@ -378,6 +399,40 @@ export class FormSignInComponent implements OnInit, AfterViewInit, OnDestroy { this.authorizationForm.get('username').updateValueAndValidity() } + navigateToClaim() { + this.window.location.href = `/resend-claim?email=${encodeURIComponent(this.email)}` + } + + signInActiveAccount() { + this.usernameForm.setValue(this.orcidPrimaryDeprecated) + this.showDeprecatedError = false + this.printError = false + } + + reactivateEmail() { + const $deactivate = this._signIn.reactivation(this.email) + $deactivate.subscribe((data) => { + if (data.error) { + this._errorHandler + .handleError( + new Error(data.error), + ERROR_REPORT.REGISTER_REACTIVATED_EMAIL + ) + .subscribe() + } else { + this._snackBar.showSuccessMessage({ + title: $localize`:@@register.reactivating:Reactivating your account`, + // tslint:disable-next-line: max-line-length + message: $localize`:@@ngOrcid.signin.verify.reactivationSent:Thank you for reactivating your ORCID record; please complete the process by following the steps in the email we are now sending you. If you don’t receive an email from us, please`, + action: $localize`:@@shared.contactSupport:contact support.`, + actionURL: `https://support.orcid.org/`, + closable: true, + }) + this._router.navigate([ApplicationRoutes.signin]) + } + }) + } + navigateTo(val: string): void { if (val.indexOf('orcid.org/my-orcid')) { this._router.navigate(['/my-orcid']) diff --git a/src/app/sign-in/components/sign-in.scss-theme.scss b/src/app/sign-in/components/sign-in.scss-theme.scss new file mode 100644 index 0000000000..73417eee24 --- /dev/null +++ b/src/app/sign-in/components/sign-in.scss-theme.scss @@ -0,0 +1,50 @@ +@use '@angular/material' as mat; +@import 'src/assets/scss/material.orcid-theme.scss'; + +@mixin theme($theme) { + $primary: map-get($theme, primary); + $accent: map-get($theme, accent); + $warn: map-get($theme, warn); + $foreground: map-get($theme, foreground); + $background: map-get($theme, background); + + a > mat-icon { + color: mat.get-color-from-palette($primary, 200) !important; + } + + ::ng-deep .valid { + color: mat.get-color-from-palette($accent, 900); + } + + .error { + color: map-get($foreground, 'state-warning-dark'); + } + + .text-light { + color: map-get($foreground, 'text-dark-mid'); + } + + .info { + margin-top: 24px; + background-color: mat.get-color-from-palette( + $background, + state-notice-lightest + ); + border-color: mat.get-color-from-palette( + $foreground, + 'state-notice-dark' + ) !important; + + mat-icon { + color: mat.get-color-from-palette( + $foreground, + 'state-notice-dark' + ) !important; + } + a { + color: mat.get-color-from-palette($primary, 700); + } + } +} + +@include theme($orcid-app-theme); diff --git a/src/app/sign-in/components/sign-in.style.scss b/src/app/sign-in/components/sign-in.style.scss new file mode 100644 index 0000000000..7b526565dd --- /dev/null +++ b/src/app/sign-in/components/sign-in.style.scss @@ -0,0 +1,155 @@ +a { + text-decoration: underline; + font-weight: normal; +} + +.no-top-margin { + margin-top: 0; +} + +h2 { + margin-block-start: 0; + margin-block-end: 0; +} + +legend { + margin-top: 32px; + margin-bottom: 2px; + font-weight: bold; + h3 { + margin-block-start: 0; + margin-block-end: 0; + font-weight: bold; + } +} + +fieldset { + border: none; + margin: 0; + padding: 0; +} + +.margin-tb-32 { + margin-top: 32px; + margin-bottom: 32px; +} + +mat-card-title img { + margin-bottom: 16px; +} + +.input-container { + padding-bottom: 20px; +} + +mat-label.orc-font-small-print { + font-weight: bold; + display: block; + margin-bottom: 4px; + + label { + font-weight: normal; + } +} + +.columns-12 { + :host ::ng-deep { + .mat-card-title { + margin-top: 64px; + } + .mat-card.orcid-wizard { + margin-top: 32px !important; + mat-card-content { + margin-left: 64px; + margin-right: 64px; + margin-bottom: 64px; + } + } + } +} + +.input-container { + ::ng-deep { + mat-error { + margin-top: 8px; + font-size: 12px; + } + + mat-form-field { + padding-top: 8px; + + .mat-form-field-subscript-wrapper { + padding: 0; + } + + .mat-form-field-wrapper { + padding-bottom: 2px; + } + } + + .mat-form-field-appearance-outline { + .mat-form-field-wrapper { + margin: 0; + + .mat-form-field-outline { + top: 0px; + } + + .mat-form-field-prefix { + top: 0.35em; + + mat-icon { + margin-inline-end: 8px; + } + } + + .mat-form-field-flex { + .mat-form-field-infix { + border-top: 0px; + padding: 10px 0 10px 0; + } + } + } + } + + mat-form-field.mat-form-field.mat-primary.mat-form-field-type-mat-input.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-invalid { + margin-bottom: 0px; + } + } +} + +.orc-font-heading-small { + font-style: normal; + font-weight: 500; +} + +.info { + .main-paragraph { + margin-bottom: 16px; + } + .content div:not(:last-child) { + margin-bottom: 16px; + } + + padding: 16px; + border: solid 2px; + border-radius: 4px; + display: flex; + + p { + margin: 0; + } + + mat-icon, + img { + margin-right: 16px; + } + + mat-form-field,.input-container { + width: 100%; + } + + mat-form-field { + margin-bottom: 8px; + } +} diff --git a/src/app/sign-in/components/social/social.component.html b/src/app/sign-in/components/social/social.component.html index b756a24ad7..1708ccf4f5 100644 --- a/src/app/sign-in/components/social/social.component.html +++ b/src/app/sign-in/components/social/social.component.html @@ -2,14 +2,24 @@ mat-raised-button id="access-through-your-institution-button" (click)="accessThroughInstitution()" - class="institution mat-button-wrap-text-with-icon mobile-fixed-width mat-elevation-z0" + class="mat-button-wrap-text-with-icon mobile-fixed-width mat-elevation-z0" + [ngClass]="{ + 'institution' : !signInUpdatesV1Togglz, + 'institutional' : signInUpdatesV1Togglz, + 'mobile' : signInUpdatesV1Togglz && !platform.columns12 + }" type="button" [attr.aria-label]="labelInstitutionalButton" > - Institutional - + Institutional + Access through your institution + + Sign in through your institution + @@ -19,6 +29,7 @@ class="google mat-button-wrap-text-with-icon mobile-fixed-width mat-elevation-z0" type="submit" [attr.aria-label]="labelGoogleButton" + [ngClass]="{ 'google': signInUpdatesV1Togglz }" > Google @@ -26,7 +37,12 @@ -
+ + +
{{ orLabel | uppercase }}
+ + + + + + diff --git a/src/app/sign-in/pages/sign-in/sign-in.component.scss b/src/app/sign-in/pages/sign-in/sign-in.component.scss index 0f2dc7c25f..3ed478e0f5 100644 --- a/src/app/sign-in/pages/sign-in/sign-in.component.scss +++ b/src/app/sign-in/pages/sign-in/sign-in.component.scss @@ -43,3 +43,60 @@ width: 64px; } } + +.sign-in-wrapper { + padding: 64px; + h1 { + margin-top: 0; + } + + .orc-font-heading-small { + font-style: normal; + font-weight: 500; + } + + mat-card-title { + margin: 0 0 32px 0 !important; + } + + mat-card-content { + margin: 0px; + } + + .icon { + margin-bottom: 32px !important; + } + + .forgot { + margin-top: 24px; + } + + mat-divider,.separator { + margin: 24px 0; + } + + .separator { + display: flex; + align-items: center; + text-align: center; + } + + .separator::before, + .separator::after { + content: ''; + flex: 1; + } + + .separator:not(:empty)::before { + margin-right: .5em; + } + + .separator:not(:empty)::after { + margin-left: .5em; + } + +} + +.sign-in-wrapper.mobile { + padding: 0; +} diff --git a/src/app/sign-in/pages/sign-in/sign-in.component.scss-theme.scss b/src/app/sign-in/pages/sign-in/sign-in.component.scss-theme.scss index bc0e1b3a56..fced8d03e8 100644 --- a/src/app/sign-in/pages/sign-in/sign-in.component.scss-theme.scss +++ b/src/app/sign-in/pages/sign-in/sign-in.component.scss-theme.scss @@ -10,6 +10,38 @@ .display-1 { color: mat.get-color-from-palette($primary); } + + .sign-in-to-orcid-button { + color: $orcid-light-primary-text; + background: mat.get-color-from-palette($primary, 700); + } + + .separator::before, + .separator::after { + content: ''; + border-bottom: 1px solid mat.get-color-from-palette($foreground, dividers); + } + + .info { + background-color: mat.get-color-from-palette( + $background, + state-notice-lightest + ); + border-color: mat.get-color-from-palette( + $foreground, + 'state-notice-dark' + ) !important; + + mat-icon { + color: mat.get-color-from-palette( + $foreground, + 'state-notice-dark' + ) !important; + } + a { + color: mat.get-color-from-palette($primary, 700); + } + } } @include sign-in-theme($orcid-app-theme); diff --git a/src/app/sign-in/pages/sign-in/sign-in.component.ts b/src/app/sign-in/pages/sign-in/sign-in.component.ts index 62f92961ee..854a944000 100644 --- a/src/app/sign-in/pages/sign-in/sign-in.component.ts +++ b/src/app/sign-in/pages/sign-in/sign-in.component.ts @@ -1,4 +1,4 @@ -import { HttpParams } from '@angular/common/http' + import { HttpParams } from '@angular/common/http' import { Component, HostBinding, @@ -7,7 +7,7 @@ import { ViewChild, } from '@angular/core' import { combineLatest } from 'rxjs' -import { first } from 'rxjs/operators' +import { first, take } from 'rxjs/operators' import { UserSession } from 'src/app/types/session.local' import { PlatformInfo, PlatformInfoService } from '../../../cdk/platform-info' @@ -16,6 +16,8 @@ import { UserService } from '../../../core' import { RequestInfoForm } from '../../../types/request-info-form.endpoint' import { TypeSignIn } from '../../../types/sign-in.local' import { FormSignInComponent } from '../../components/form-sign-in/form-sign-in.component' +import { TogglzService } from 'src/app/core/togglz/togglz.service' +import { Router } from '@angular/router' @Component({ selector: 'app-sign-in', @@ -45,19 +47,30 @@ export class SignInComponent implements OnInit { errorDescription: string emailVerified: boolean invalidVerifyUrl: boolean + platform: PlatformInfo + signInUpdatesV1Togglz = false + orLabel = $localize`:@@ngOrcid.signin.or:or` + constructor( private _platformInfo: PlatformInfoService, + private _router: Router, + private _togglz: TogglzService, private _userInfo: UserService, @Inject(WINDOW) private window: Window ) {} ngOnInit() { + this._togglz + .getStateOf('SIGN_IN_UPDATES_V1') + .pipe(take(1)) + .subscribe((value) => (this.signInUpdatesV1Togglz = value)) + combineLatest([this._userInfo.getUserSession(), this._platformInfo.get()]) .pipe(first()) .subscribe(([session, platform]) => { session = session as UserSession - platform = platform as PlatformInfo + this.platform = platform as PlatformInfo this.isLoggedIn = session.loggedIn this.isForceLogin = session.oauthSession?.forceLogin @@ -86,6 +99,17 @@ export class SignInComponent implements OnInit { }) } + register() { + this._platformInfo + .get() + .pipe(first()) + .subscribe((platform) => { + this._router.navigate(['/register'], { + queryParams: platform.queryParameters, + }) + }) + } + show2FAEmitter($event) { this.show2FA = true } diff --git a/src/locale/properties/signin/signin.en.properties b/src/locale/properties/signin/signin.en.properties index ee357396b8..b889ab8215 100644 --- a/src/locale/properties/signin/signin.en.properties +++ b/src/locale/properties/signin/signin.en.properties @@ -70,16 +70,18 @@ ngOrcid.signin.signInInstitution=Sign in through your institution ngOrcid.signin.yourOrcidPassword=Your ORCID password ngOrcid.signin.enterValidEmailOrOrcidForExample=Please enter a valid email address or ORCID iD, for example: joe@institution.edu or 0000-1234-5678-9101 ngOrcid.signin.enterValidEmailOrOrcid=Please enter a valid email address or your ORCID iD -ngOrcid.signin.yourPasswordMoreThan=Your password is more than 256 characters long. You cannot sign in to this ORCID account until you have reset your password +ngOrcid.signin.yourPasswordMoreThan=Your password is more than 256 characters long. +ngOrcid.signin.yourCannotSignIn=You cannot sign in to this ORCID account until you have reset your password ngOrcid.signin.resetYourPassword=Reset your password ngOrcid.signin.somethingNotQuiteRight=Something's not quite right... ngOrcid.signin.checkYourSignIn=Please check that your sign in details are correct and then try signing in again ngOrcid.signin.almostDone=Almost done! ngOrcid.signin.signInToComplete=Sign in to complete your email verification ngOrcid.signin.theEmailAddress=The email address -ngOrcid.signin.isAssociatedWithDeactivate=is associated with a deactivated ORCID account. You will need to reactivate the account before you can sign in with this email address +ngOrcid.signin.needToReactivateAccount=You will need to reactivate the account before you can sign in with this email address ngOrcid.signin.cannotSignInToOrcid=You cannot sign in to ORCID with this email address until you have claimed the record. ngOrcid.signin.claimYourOrcidRecord=Claim your ORCID record ngOrcid.signin.orcidAccountHasBeenDeprecated=This ORCID account has been deprecated. The active account is +ngOrcid.signin.signInToActive=Sign in to the active ORCID account ngOrcid.signin.dontHaveYourOrcid=Don't have your ORCID iD yet? ngOrcid.signin.forExample=For example: joe@institution.edu or 0000-1234-5678-9101 diff --git a/src/locale/properties/signin/signin.lr.properties b/src/locale/properties/signin/signin.lr.properties index 91ad10c0de..220de8d8a9 100644 --- a/src/locale/properties/signin/signin.lr.properties +++ b/src/locale/properties/signin/signin.lr.properties @@ -72,13 +72,14 @@ ngOrcid.signin.yourOrcidPassword=LR ngOrcid.signin.enterValidEmailOrOrcidForELRample=LR ngOrcid.signin.enterValidEmailOrOrcid=LR ngOrcid.signin.yourPasswordMoreThan=LR +ngOrcid.signin.yourCannotSignIn=LR ngOrcid.signin.resetYourPassword=LR ngOrcid.signin.somethingNotQuiteRight=LR ngOrcid.signin.checkYourSignIn=LR ngOrcid.signin.almostDone=LR ngOrcid.signin.signInToComplete=LR ngOrcid.signin.theEmailAddress=LR -ngOrcid.signin.isAssociatedWithDeactivate=LR +ngOrcid.signin.needToReactivateAccount=LR ngOrcid.signin.cannotSignInToOrcid=LR ngOrcid.signin.claimYourOrcidRecord=LR ngOrcid.signin.orcidAccountHasBeenDeprecated=LR @@ -87,3 +88,4 @@ ngOrcid.signin.unclaimedExists2=LR ngOrcid.signin.enterValidEmailOrOrcidForExample=LR ngOrcid.signin.dontHaveYourOrcid=LR ngOrcid.signin.forExample=LR +ngOrcid.signin.signInToActive=LR diff --git a/src/locale/properties/signin/signin.rl.properties b/src/locale/properties/signin/signin.rl.properties index 77909b1b02..dd94b2abce 100644 --- a/src/locale/properties/signin/signin.rl.properties +++ b/src/locale/properties/signin/signin.rl.properties @@ -72,13 +72,14 @@ ngOrcid.signin.yourOrcidPassword=RL ngOrcid.signin.enterValidEmailOrOrcidForERLample=RL ngOrcid.signin.enterValidEmailOrOrcid=RL ngOrcid.signin.yourPasswordMoreThan=RL +ngOrcid.signin.yourCannotSignIn=RL ngOrcid.signin.resetYourPassword=RL ngOrcid.signin.somethingNotQuiteRight=RL ngOrcid.signin.checkYourSignIn=RL ngOrcid.signin.almostDone=RL ngOrcid.signin.signInToComplete=RL ngOrcid.signin.theEmailAddress=RL -ngOrcid.signin.isAssociatedWithDeactivate=RL +ngOrcid.signin.needToReactivateAccount=RL ngOrcid.signin.cannotSignInToOrcid=RL ngOrcid.signin.claimYourOrcidRecord=RL ngOrcid.signin.orcidAccountHasBeenDeprecated=RL @@ -87,3 +88,4 @@ ngOrcid.signin.unclaimedExists2=RL ngOrcid.signin.enterValidEmailOrOrcidForExample=RL ngOrcid.signin.dontHaveYourOrcid=RL ngOrcid.signin.forExample=RL +ngOrcid.signin.signInToActive=RL diff --git a/src/locale/properties/signin/signin.xx.properties b/src/locale/properties/signin/signin.xx.properties index 0b2d2b0995..211a78b258 100644 --- a/src/locale/properties/signin/signin.xx.properties +++ b/src/locale/properties/signin/signin.xx.properties @@ -73,15 +73,17 @@ ngOrcid.signin.yourOrcidPassword=X ngOrcid.signin.enterValidEmailOrOrcidForExample=X ngOrcid.signin.enterValidEmailOrOrcid=X ngOrcid.signin.yourPasswordMoreThan=X +ngOrcid.signin.yourCannotSignIn=X ngOrcid.signin.resetYourPassword=X ngOrcid.signin.somethingNotQuiteRight=X ngOrcid.signin.checkYourSignIn=X ngOrcid.signin.almostDone=X ngOrcid.signin.signInToComplete=X ngOrcid.signin.theEmailAddress=X -ngOrcid.signin.isAssociatedWithDeactivate=X +ngOrcid.signin.needToReactivateAccount=X ngOrcid.signin.cannotSignInToOrcid=X ngOrcid.signin.claimYourOrcidRecord=X ngOrcid.signin.orcidAccountHasBeenDeprecated=X ngOrcid.signin.dontHaveYourOrcid=X ngOrcid.signin.forExample=X +ngOrcid.signin.signInToActive=X