diff --git a/demo-shell/src/app.config.json b/demo-shell/src/app.config.json index 1fb923074c..ac596789fb 100644 --- a/demo-shell/src/app.config.json +++ b/demo-shell/src/app.config.json @@ -4,7 +4,7 @@ "bpmHost": "{protocol}//{hostname}{:port}", "identityHost": "{protocol}//{hostname}{:port}/auth/admin/realms/alfresco", "loginRoute": "login", - "providers": "ALL", + "providers": "ECM", "contextRootBpm": "activiti-app", "authType": "BASIC", "locale": "en", diff --git a/demo-shell/src/app/components/login/login.component.html b/demo-shell/src/app/components/login/login.component.html index c35a95d4ac..9cc4833f9b 100644 --- a/demo-shell/src/app/components/login/login.component.html +++ b/demo-shell/src/app/components/login/login.component.html @@ -28,6 +28,15 @@ {{ 'LOGIN.SHOW_REMEMBERME'| translate }}

+

+ + {{ 'LOGIN.FORGOT-PASSWORD.FORGOT-PASSWORD' | translate }} + +

diff --git a/demo-shell/src/app/components/login/login.component.ts b/demo-shell/src/app/components/login/login.component.ts index 4425474dfc..b5f676ef79 100644 --- a/demo-shell/src/app/components/login/login.component.ts +++ b/demo-shell/src/app/components/login/login.component.ts @@ -33,6 +33,7 @@ export class LoginComponent { disableCsrf = false; showFooter = true; showRememberMe = true; + showForgotPassword = true; customSuccessRoute = false; customLogoImage = false; @@ -60,6 +61,10 @@ export class LoginComponent { this.showRememberMe = !this.showRememberMe; } + toggleForgotPassword() { + this.showForgotPassword = !this.showForgotPassword; + } + toggleSuccessRoute() { this.customSuccessRoute = !this.customSuccessRoute; if (!this.customSuccessRoute) { diff --git a/lib/core/src/lib/forgot-password/forgot-password.component.html b/lib/core/src/lib/forgot-password/forgot-password.component.html index 309668eb68..dbb0d0000d 100644 --- a/lib/core/src/lib/forgot-password/forgot-password.component.html +++ b/lib/core/src/lib/forgot-password/forgot-password.component.html @@ -1,71 +1,53 @@ -

+
+ + + + {{ 'RECOVER-PASSWORD.RECOVER-PASSWORD' | translate }} + + +
- - - - - {{ 'RECOVER-PASSWORD.RECOVER-PASSWORD' | translate }} - - - -
- - - -

{{ 'RECOVER-PASSWORD.MESSAGES.FILLER' | translate }}

-
+ +

{{ 'RECOVER-PASSWORD.MESSAGES.FILLER' | translate }}

+ +
+ -
- - - -
- - - - - - - - - - - - -
- -
- - - - - - {{ 'RECOVER-PASSWORD.RECOVER-PASSWORD' | translate }} - - - -
- - -
-

- {{ 'RECOVER-PASSWORD.MESSAGES.RESET-PASSWORD-EMAIL-SENT' | translate }} -

+
- - - - - - - - -
\ No newline at end of file + + + + + +
+ +
+ +
+ + + + {{ 'RECOVER-PASSWORD.RECOVER-PASSWORD' | translate }} + + +
+ + +
+

+ {{ 'RECOVER-PASSWORD.MESSAGES.RESET-PASSWORD-EMAIL-SENT' | translate }} +

+
+ + + + +
\ No newline at end of file diff --git a/lib/core/src/lib/forgot-password/forgot-password.component.scss b/lib/core/src/lib/forgot-password/forgot-password.component.scss index eb15a90223..5e20c5fc4c 100644 --- a/lib/core/src/lib/forgot-password/forgot-password.component.scss +++ b/lib/core/src/lib/forgot-password/forgot-password.component.scss @@ -1,129 +1,111 @@ -.forgot-password-div { - width: 100%; - height: 100vh; +.adf-forgot-password { display: flex; - flex-direction: row; justify-content: center; align-items: center; - position: fixed; - top: 0; - left: 0; - transform: translate(calc(50vw - 50%)); + min-height: 100vh; border-radius: 12px; background-color: var(--theme-forgot-password-background); + + mat-card { + padding: 24px; + width: 371px; + } + + ::ng-deep .mat-card-header-text { + margin: 0 !important; + } + + .adf-forgot-password-title { + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 28px; + letter-spacing: 0.15px; + color: var(--theme-forgot-password-title-color); + padding: 2px 0; + margin: 0; + } + + hr { + margin: 12px 0; + } + + .adf-forgot-password-filler { + display: flex; + align-items: center; + padding: 8px 0; + height: 16px; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + letter-spacing: 0.5px; + color: var(--theme-forgot-password-label-color); + margin: 0 0 8px; + } + + .adf-forgot-password-form-field { + height: 64px; + margin-top: 24px; + } + + .adf-forgot-password-label { + height: 32px; + padding: 6px 0; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 20px; + letter-spacing: 0.15px; + color: var(--theme-forgot-password-title-color); + } + + .adf-forgot-password-field { + text-decoration: none; + height: 32px; + line-height: 32px; + background: var(--theme-forgot-password-input-background-color); + border-radius: 6px; + width: 100%; + border: none; + outline: none; + margin-top: 10px; + padding: 0 6px; + } + + .adf-send-instructions-button { + width: 100%; + display: flex; + justify-content: center; + align-items: center; + padding: 4px 12px; + height: 32px; + background: var(--theme-forgot-password-button-background-color); + border-radius: 6px; + margin: 24px 0 0; + } + + .adf-close-button { + width: 100%; + display: flex; + justify-content: center; + align-items: center; + background-color: var(--theme-forgot-password-input-background-color); + color: var(--theme-forgot-password-title-color); + margin-top: 8px; + padding: 4px 12px; + height: 32px; + border-radius: 6px; + } + + .adf-password-reset-link-message { + height: 52px; + padding: 6px 0; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 20px; + letter-spacing: 0.25px; + color: var(--theme-forgot-password-title-color); + } } - -mat-card { - padding: 24px 24px; - width: 371px; - //height: 264px; -} - -::ng-deep .mat-card-header-text { - margin: 0 !important; -} - -.forgot-password-title { - font-style: normal; - font-weight: 400; - font-size: 20px; - line-height: 28px; - letter-spacing: 0.15px; - color: var(--theme-forgot-password-title-color); - padding: 2px 0; - margin: 0 !important; -} - -hr { - margin: 12px 0; -} - -.filler { - display: flex; - flex-direction: row; - align-items: center; - padding: 8px 0px; - height: 16px; - font-style: normal; - font-weight: 400; - font-size: 12px; - line-height: 16px; - letter-spacing: 0.5px; - color: var(--theme-forgot-password-label-color); - margin: 0 0 8px 0; -} - -.forgot-password-form-field { - height: 64px; - margin-top: 24px; -} - -.forgot-password-label { - height: 32px; - padding: 6px 0; - font-style: normal; - font-weight: 700; - font-size: 14px; - line-height: 20px; - letter-spacing: 0.15px; - color: var(--theme-forgot-password-title-color); -} - -.forgot-password-field { - text-decoration: none; - height: 32px; - line-height: 32px; - background: var(--theme-forgot-password-input-background-color); - border-radius: 6px; - width: 100%; - border: none !important; - outline: none; - margin-top: 10px !important; -} - -.send-instructions-button { - width: 100% !important; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - padding: 4px 12px; - height: 32px; - background: var(--theme-forgot-password-button-background-color); - border-radius: 6px; - margin: 24px 0 0 0 !important; -} - -.close-button { - width: 100%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - background-color: var(--theme-forgot-password-input-background-color); - color: var(--theme-forgot-password-title-color); - margin-top: 8px; - padding: 4px 12px; - height: 32px; - border-radius: 6px; -} - -.password-reset-link-message { - height: 52px; - padding: 6px 0; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 20px; - letter-spacing: 0.25px; - color: var(--theme-forgot-password-title-color); -} - - - - - - - - - diff --git a/lib/core/src/lib/forgot-password/forgot-password.component.spec.ts b/lib/core/src/lib/forgot-password/forgot-password.component.spec.ts index 53d8f894c2..9d318c4ef4 100644 --- a/lib/core/src/lib/forgot-password/forgot-password.component.spec.ts +++ b/lib/core/src/lib/forgot-password/forgot-password.component.spec.ts @@ -20,7 +20,6 @@ import { Router } from '@angular/router'; import { CoreTestingModule } from '../testing/core.testing.module'; import { ForgotPasswordComponent } from './forgot-password.component'; - describe('ResetPasswordComponent', () => { let component: ForgotPasswordComponent; let fixture: ComponentFixture; @@ -30,7 +29,6 @@ describe('ResetPasswordComponent', () => { TestBed.configureTestingModule({ imports: [CoreTestingModule], declarations: [ForgotPasswordComponent], - providers: [] }); fixture = TestBed.createComponent(ForgotPasswordComponent); @@ -39,37 +37,27 @@ describe('ResetPasswordComponent', () => { router = TestBed.inject(Router); }); - it('should be created', () => { - expect(component).toBeTruthy(); + afterEach(() => { + fixture.destroy(); }); it('send instructions button should be disabled by default', async () => { - component.ngOnInit(); - - fixture.detectChanges(); - await fixture.whenStable(); - expect(component.isButtonDisabled).toBeTruthy(); }); it('send instructions button should be disabled if username field is empty', async () => { - component.ngOnInit(); component.forgotPasswordForm.controls['userName'].setValue(''); - fixture.detectChanges(); - await fixture.whenStable(); - expect(component.isButtonDisabled).toBeTruthy(); }); it('send instructions button should be enabled when username field is not empty', async () => { - component.ngOnInit(); fixture.detectChanges(); await fixture.whenStable(); component.forgotPasswordForm.controls['userName'].setValue('userABC'); spyOn(component, 'isButtonDisabled').and.callThrough(); - const sendInstructionsBtn = fixture.debugElement.nativeElement.querySelector('.send-instructions-button'); + const sendInstructionsBtn = fixture.debugElement.nativeElement.querySelector('.adf-send-instructions-button'); fixture.detectChanges(); await fixture.whenStable(); @@ -79,37 +67,28 @@ describe('ResetPasswordComponent', () => { }); it('should send instructions to the email id corresponding to the username when the send instructions button is clicked', async () => { - component.ngOnInit(); component.forgotPasswordForm.controls['userName'].setValue('userABC'); spyOn(component, 'sendInstructions').and.callThrough(); - fixture.detectChanges(); await fixture.whenStable(); - const sendInstructionsBtn = fixture.debugElement.nativeElement.querySelector('.send-instructions-button'); + const sendInstructionsBtn = fixture.debugElement.nativeElement.querySelector('.adf-send-instructions-button'); sendInstructionsBtn.dispatchEvent(new Event('click')); - fixture.detectChanges(); - await fixture.whenStable(); - expect(component.sendInstructions).toHaveBeenCalled(); }); it('should route user back to login page when the close button is clicked', async () => { - component.ngOnInit(); spyOn(component, 'close').and.callThrough(); spyOn(router, 'navigate'); fixture.detectChanges(); await fixture.whenStable(); - const closeBtn = fixture.debugElement.nativeElement.querySelector('.close-button'); + const closeBtn = fixture.debugElement.nativeElement.querySelector('.adf-close-button'); closeBtn.dispatchEvent(new Event('click')); - fixture.detectChanges(); - await fixture.whenStable(); - expect(component.close).toHaveBeenCalled(); expect(router.navigate).toHaveBeenCalledWith(['./login']); }); diff --git a/lib/core/src/lib/forgot-password/forgot-password.component.ts b/lib/core/src/lib/forgot-password/forgot-password.component.ts index fc5941b382..77f34ec09e 100644 --- a/lib/core/src/lib/forgot-password/forgot-password.component.ts +++ b/lib/core/src/lib/forgot-password/forgot-password.component.ts @@ -9,7 +9,7 @@ import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { PeopleApi, ClientBody } from '@alfresco/js-api'; -import { AlfrescoApiService } from '@alfresco/adf-core'; +import { AlfrescoApiService } from '../services/alfresco-api.service'; import { Router } from '@angular/router'; @Component({ diff --git a/lib/core/src/lib/forgot-password/index.ts b/lib/core/src/lib/forgot-password/index.ts new file mode 100644 index 0000000000..a7e30cc675 --- /dev/null +++ b/lib/core/src/lib/forgot-password/index.ts @@ -0,0 +1,18 @@ +/*! + * @license + * Copyright 2019 Alfresco Software, Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export * from './public-api'; diff --git a/lib/core/src/lib/forgot-password/public-api.ts b/lib/core/src/lib/forgot-password/public-api.ts new file mode 100644 index 0000000000..8803574daf --- /dev/null +++ b/lib/core/src/lib/forgot-password/public-api.ts @@ -0,0 +1,19 @@ +/*! + * @license + * Copyright 2019 Alfresco Software, Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export * from './forgot-password.module'; +export * from './forgot-password.component'; diff --git a/lib/core/src/lib/login/components/login.component.html b/lib/core/src/lib/login/components/login.component.html index fdcfad4257..b6dadd815c 100644 --- a/lib/core/src/lib/login/components/login.component.html +++ b/lib/core/src/lib/login/components/login.component.html @@ -168,8 +168,8 @@ {{ 'LOGIN.LABEL.REMEMBER' | translate }}
-
-
+