inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-19 17:14:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-7519] - Login page (#9565)

Browse Source
This commit is contained in:
jacekpluta 2024-04-17 11:05:54 +02:00 committed by VitoAlbano
parent 4b454b6b83
commit 585cd08e90
4 changed files with 69 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
lib/core/src/lib/login/components/login/login.component.html
View File

@ -43,18 +43,20 @@
<div *ngIf="!ssoLogin">
<!--USERNAME FIELD-->
<div class="adf-login__field"
<div class="adf-login__field adf-login-container"
[ngClass]="{'adf-is-invalid': isErrorStyle(form.controls.username)}">
<mat-form-field class="adf-full-width adf-login-form-field"
floatPlaceholder="never"
color="primary">
<mat-label class="adf-login-form-input-label">
{{'LOGIN.LABEL.USERNAME' | translate }}
</mat-label>
<input matInput
type="text"
class="adf-full-width"
class="adf-login-input"
formControlName="username"
id="username"
data-automation-id="username"
placeholder="{{'LOGIN.LABEL.USERNAME' | translate }}"
autocapitalize="none"
(blur)="trimUsername($event)">
</mat-form-field>
@ -74,10 +76,13 @@
<mat-form-field class="adf-full-width adf-login-form-field"
floatPlaceholder="never"
color="primary">
<mat-label class="adf-login-form-input-label">
{{'LOGIN.LABEL.PASSWORD' | translate }}
</mat-label>
<input matInput
placeholder="{{'LOGIN.LABEL.PASSWORD' | translate }}"
[type]="isPasswordShow ? 'text' : 'password'"
formControlName="password"
class="adf-login-input"
id="password"
data-automation-id="password">
<button matSuffix

54
lib/core/src/lib/login/components/login/login.component.scss
View File

@ -1,4 +1,5 @@
@import '../../../styles/mixins';
@import 'styles/mat-selectors';
.adf-login {
@include flex-column;
@ -88,6 +89,8 @@
}
.adf-login-card-header-text {
padding-bottom: 42px;
padding-top: 0;
margin: 0 auto;
}
@ -98,7 +101,7 @@
}
.adf-alfresco-logo {
padding: 24px 16px;
padding: 24px 16px 24px;
}
.adf-alfresco-logo img {
@ -114,6 +117,7 @@
.adf-login-button-label {
color: var(--theme-accent-color-default-contrast);
font-weight: bolder;
}
.adf-login-button.adf-isChecking {
@ -145,12 +149,6 @@
margin-top: 5px;
}
.adf-login-controls {
padding: 0 0 26px;
overflow: visible;
width: 100%;
}
.adf-login-action {
margin-top: 20px;
display: flex;
@ -179,16 +177,53 @@
opacity: 0.54;
}
.adf-login-input:is(input) {
font-size: var(--theme-subheading-2-font-size);
}
.adf-login-form-field .adf-login-password-icon.adf-login-form-password-icon {
color: var(--adf-theme-foreground-text-color);
font-size: var(--theme-subheading-2-font-size);
top: 9px;
position: relative;
left: 7px;
}
.adf-login-controls:has(div) {
padding: 0 0 26px;
overflow: visible;
width: 100%;
margin-bottom: 16px;
.adf-login-container {
margin-bottom: 20px;
}
.adf-login__field {
margin: 1em 0 0;
display: block;
padding-bottom: 18px;
padding-bottom: 16px;
font-size: var(--theme-subheading-2-font-size);
#{$mat-form-field-infix} {
min-height: 0;
padding-bottom: 3px;
padding-top: 20px;
.adf-login-form-input-label {
font-size: var(--theme-subheading-2-font-size);
}
#{$mat-floating-label-float-above} {
padding-bottom: 6px;
}
#{$mat-floating-label--required} {
&::after {
font-size: var(--theme-subheading-2-font-size);
}
}
}
& input:-webkit-autofill {
/* stylelint-disable */
-webkit-box-shadow: 0 0 0 1000px var(--adf-theme-background-dialog-color) inset;
@ -196,6 +231,7 @@
/* stylelint-enable */
}
}
}
.adf-login-validation {
background-color: transparent;

4
lib/core/src/lib/login/components/login/login.component.spec.ts
View File

@ -305,13 +305,13 @@ describe('LoginComponent', () => {
it('should render Login form with all the keys to be translated', () => {
expect(element.querySelector('[data-automation-id="username"]')).toBeDefined();
expect(element.querySelector('[data-automation-id="username"]').getAttribute('placeholder')).toEqual('LOGIN.LABEL.USERNAME');
expect(element.querySelectorAll('.adf-login-form-input-label')[0].innerText).toEqual('LOGIN.LABEL.USERNAME');
expect(element.querySelector('#adf-login-remember')).toBeDefined();
expect(element.querySelector('#adf-login-remember').innerText).toContain('LOGIN.LABEL.REMEMBER');
expect(element.querySelector('[data-automation-id="password"]')).toBeDefined();
expect(element.querySelector('[data-automation-id="password"]').getAttribute('placeholder')).toEqual('LOGIN.LABEL.PASSWORD');
expect(element.querySelectorAll('.adf-login-form-input-label')[1].innerText).toContain('LOGIN.LABEL.PASSWORD');
expect(element.querySelector('#adf-login-action-left')).toBeDefined();
expect(element.querySelector('#adf-login-action-left').innerText).toEqual('LOGIN.ACTION.HELP');

5
lib/core/src/lib/styles/_mat-selectors.scss
View File

@ -100,4 +100,7 @@ $mat-select-arrow-wrapper: '.mat-mdc-select-arrow-wrapper';
$mat-dialog-title: '.mdc-dialog__title';
$mat-expansion-panel-body: '.mat-expansion-panel-body';
$mat-dialog-surface: '.mat-mdc-dialog-surface';
$mdc-dialog: '.mdc-dialog'
$mdc-dialog: '.mdc-dialog';
$mat-text-filed-input: '.mdc-text-field__input';
$mat-floating-label-float-above: '.mdc-floating-label--float-above';
$mat-floating-label--required: '.mdc-floating-label--required';