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

lib/core/src/lib/login/components/login/login.component.html

@@ -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

lib/core/src/lib/login/components/login/login.component.scss

@@ -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,21 +177,59 @@
         opacity: 0.54;
     }
 
-    .adf-login-form-field .adf-login-password-icon.adf-login-form-password-icon {
+    .adf-login-input:is(input) {
-        color: var(--adf-theme-foreground-text-color);
+        font-size: var(--theme-subheading-2-font-size);
     }
 
-    .adf-login__field {
+    .adf-login-form-field .adf-login-password-icon.adf-login-form-password-icon {
-        margin: 1em 0 0;
+        color: var(--adf-theme-foreground-text-color);
-        display: block;
-        padding-bottom: 18px;
         font-size: var(--theme-subheading-2-font-size);
+        top: 9px;
+        position: relative;
+        left: 7px;
+    }
 
-        & input:-webkit-autofill {
+    .adf-login-controls:has(div) {
-            /* stylelint-disable */
+        padding: 0 0 26px;
-            -webkit-box-shadow: 0 0 0 1000px var(--adf-theme-background-dialog-color) inset;
+        overflow: visible;
-            -webkit-text-fill-color: var(--adf-theme-foreground-text-color);
+        width: 100%;
-            /* stylelint-enable */
+        margin-bottom: 16px;
+
+        .adf-login-container {
+            margin-bottom: 20px;
+        }
+
+        .adf-login__field {
+            display: block;
+            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;
+                -webkit-text-fill-color: var(--adf-theme-foreground-text-color);
+                /* stylelint-enable */
+            }
         }
     }
 

lib/core/src/lib/login/components/login/login.component.spec.ts

@@ -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');

lib/core/src/lib/styles/_mat-selectors.scss

@@ -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';