NAS-130956 / 25.04 / Reduce numbers of layout shifts on login page (#…

…10612) * NAS-130956: Reduce numbers of layout shifts on login page * NAS-130956: Reduce numbers of layout shifts on login page * NAS-130956: PR update * NAS-130956: PR Update * NAS-130956: PR update * NAS-130956: PR update * NAS-130956: PR update * NAS-130956: PR Update * NAS-130956: PR update * NAS-130956: PR update
truenas · Sep 16, 2024 · e35fd82 · e35fd82
1 parent 3bdeda8
commit e35fd82
Show file tree

Hide file tree

Showing 107 changed files with 1,064 additions and 810 deletions.
diff --git a/src/app/core/testing/utils/mock-auth.utils.ts b/src/app/core/testing/utils/mock-auth.utils.ts
@@ -10,6 +10,7 @@ import { AccountAttribute } from 'app/enums/account-attribute.enum';
 import { Role } from 'app/enums/role.enum';
 import { LoggedInUser } from 'app/interfaces/ds-cache.interface';
 import { AuthService } from 'app/services/auth/auth.service';
+import { TokenLastUsedService } from 'app/services/token-last-used.service';
 import { WebSocketConnectionService } from 'app/services/websocket-connection.service';
 import { WebSocketService } from 'app/services/ws.service';
 
@@ -44,6 +45,7 @@ export function mockAuth(
           }),
           createSpyObject(Store),
           createSpyObject(WebSocketService),
+          createSpyObject(TokenLastUsedService),
           createSpyObject(Window),
         );
 

diff --git a/src/app/pages/signin/disconnected-message/disconnected-message.component.scss b/src/app/pages/signin/disconnected-message/disconnected-message.component.scss
@@ -1,7 +1,7 @@
 :host {
   align-items: center;
   display: flex;
-  padding: 32px 32px 0;
+  padding: 28px 16px 10px;
 }
 
 .fake-icon {

diff --git a/src/app/pages/signin/failover-status/failover-status.component.html b/src/app/pages/signin/failover-status/failover-status.component.html
@@ -1,7 +1,4 @@
 <p class="failover-status-message">{{ statusMessage() | translate }}</p>
-@if (!disabledReasons()) {
-  <ngx-skeleton-loader></ngx-skeleton-loader>
-}
 @if (areReasonsShown()) {
   <div class="failover-reasons">
     @for (reason of disabledReasons(); track reason) {

diff --git a/src/app/pages/signin/failover-status/failover-status.component.scss b/src/app/pages/signin/failover-status/failover-status.component.scss
@@ -1,16 +1,23 @@
 :host {
   display: block;
+  margin-top: 10px;
   text-align: center;
 }
 
 p {
-  margin-bottom: 0.4rem;
-  margin-top: 0.4rem;
+  margin: 0.4rem;
 }
 
 ngx-skeleton-loader {
   display: inline-block;
   flex: 0;
   height: 20px;
   width: 80%;
+
+  &::ng-deep {
+    span.loader {
+      height: 22px;
+      margin: 0;
+    }
+  }
 }
diff --git a/src/app/pages/signin/signin-form/signin-form.component.html b/src/app/pages/signin/signin-form/signin-form.component.html
@@ -27,7 +27,7 @@
       type="button"
       color="primary"
       ixTest="log-in"
-      [disabled]="isLoading$ | async"
+      [disabled]="isFormDisabled()"
       (click)="login()"
     >
       {{ 'Log In' | translate }}
@@ -58,7 +58,7 @@
         type="button"
         color="primary"
         ixTest="log-in"
-        [disabled]="isLoading$ | async"
+        [disabled]="isFormDisabled()"
         (click)="loginWithOtp()"
       >
         {{ 'Proceed' | translate }}
@@ -68,7 +68,7 @@
         mat-button
         type="button"
         ixTest="otp-log-in"
-        [disabled]="isLoading$ | async"
+        [disabled]="isFormDisabled()"
         (click)="cancelOtpLogin()"
       >{{ 'Cancel' | translate }}</button>
     </div>

diff --git a/src/app/pages/signin/signin-form/signin-form.component.scss b/src/app/pages/signin/signin-form/signin-form.component.scss
@@ -11,3 +11,10 @@
     display: inline-block;
   }
 }
+
+input,
+button {
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
diff --git a/src/app/pages/signin/signin-form/signin-form.component.spec.ts b/src/app/pages/signin/signin-form/signin-form.component.spec.ts
@@ -45,7 +45,11 @@ describe('SigninFormComponent', () => {
   });
 
   beforeEach(async () => {
-    spectator = createComponent();
+    spectator = createComponent({
+      props: {
+        disabled: false,
+      },
+    });
 
     loader = TestbedHarnessEnvironment.loader(spectator.fixture);
     form = await loader.getHarness(IxFormHarness);

diff --git a/src/app/pages/signin/signin-form/signin-form.component.ts b/src/app/pages/signin/signin-form/signin-form.component.ts
@@ -1,7 +1,8 @@
 import { AsyncPipe } from '@angular/common';
 import {
-  ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, OnInit,
+  ChangeDetectionStrategy, ChangeDetectorRef, Component, computed, effect, Inject, input, OnInit,
 } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import {
   FormBuilder, Validators, FormsModule, ReactiveFormsModule,
 } from '@angular/forms';
@@ -44,6 +45,8 @@ import { WebSocketService } from 'app/services/ws.service';
   ],
 })
 export class SigninFormComponent implements OnInit {
+  disabled = input.required<boolean>();
+
   hasTwoFactor = false;
   showSecurityWarning = false;
 
@@ -57,7 +60,8 @@ export class SigninFormComponent implements OnInit {
     otp: ['', Validators.required],
   });
 
-  protected isLoading$ = this.signinStore.isLoading$;
+  protected isLoading = toSignal(this.signinStore.isLoading$);
+  readonly isFormDisabled = computed(() => this.disabled() || this.isLoading());
 
   constructor(
     private formBuilder: FormBuilder,
@@ -69,11 +73,19 @@ export class SigninFormComponent implements OnInit {
     private cdr: ChangeDetectorRef,
     @Inject(WINDOW) private window: Window,
   ) {
+    effect(() => {
+      if (this.isFormDisabled()) {
+        this.form.disable();
+      } else {
+        this.form.enable();
+      }
+    });
+
     if (this.window.location.protocol !== 'https:') {
       this.showSecurityWarning = true;
     }
 
-    this.isLoading$.pipe(
+    this.signinStore.isLoading$.pipe(
       filter((isLoading) => !isLoading),
       take(1),
       untilDestroyed(this),

diff --git a/src/app/pages/signin/signin.component.html b/src/app/pages/signin/signin.component.html
@@ -3,55 +3,74 @@
 
 <div class="page-wrap login-form">
   <div class="session-form-hold">
-    <mat-progress-bar
-      value="0"
-      class="session-progress"
-      [mode]="(hasLoadingIndicator$ | async) ? 'indeterminate' : 'determinate'"
-    ></mat-progress-bar>
-    <mat-card>
-      <mat-card-content>
-        @if (isConnected$ | async) {
-          <div>
-            <div class="logo-wrapper">
-              <ix-icon name="ix:logo_truenas_scale_full" class="logo"></ix-icon>
-            </div>
+    @if ((isConnected$ | async) || (!(isConnected$ | async) && (isConnectedDelayed$ | async) !== null)) {
+      <mat-progress-bar
+        value="0"
+        class="session-progress"
+        [mode]="(hasLoadingIndicator$ | async) ? 'indeterminate' : 'determinate'"
+      ></mat-progress-bar>
+    }
 
-            <div class="card-bottom">
-              @if (canLogin$ | async) {
-                <div class="form-container">
-                  @if (wasAdminSet$ | async) {
-                    <ix-signin-form></ix-signin-form>
-                  } @else {
-                    <ix-set-admin-password-form></ix-set-admin-password-form>
-                  }
+    @if (!(isConnected$ | async) && (isConnectedDelayed$ | async) !== null) {
+      <mat-card>
+        <mat-card-content>
+          <ix-disconnected-message
+            [hasFailover]="hasFailover$ | async"
+          ></ix-disconnected-message>
+        </mat-card-content>
+      </mat-card>
+    } @else if (isConnected$ | async) {
+        @if (hasAuthToken && (isTokenWithinTimeline$ | async)) {
+          <mat-card>
+            <mat-card-content>
+              <h3 class="logging-in">{{ 'Logging in...' | translate }}</h3>
+            </mat-card-content>
+          </mat-card>
+        } @else {
+          <mat-card>
+            <mat-card-content>
+              <div>
+                <div class="logo-wrapper">
+                  <ix-icon name="ix:logo_truenas_scale_full" class="logo"></ix-icon>
                 </div>
-              }
 
-              @if (failover$ | async; as failover) {
-                @if (hasFailover$ | async) {
-                  <ix-failover-status
-                    class="failover-status"
-                    [status]="failover.status"
-                    [failoverIps]="failover.ips"
-                    [disabledReasons]="failover.disabledReasons"
-                  ></ix-failover-status>
-                }
-              }
+                <div class="card-bottom">
+                  <div class="form-container">
+                    @if (wasAdminSet$ | async) {
+                      <ix-signin-form [disabled]="!(canLogin$ | async)"></ix-signin-form>
+                    } @else {
+                      <ix-set-admin-password-form></ix-set-admin-password-form>
+                    }
+                  </div>
+
+                  @if (failover$ | async; as failover) {
+                    @if (hasFailover$ | async) {
+                      <ix-failover-status
+                        class="failover-status"
+                        [status]="failover.status"
+                        [failoverIps]="failover.ips"
+                        [disabledReasons]="failover.disabledReasons"
+                      ></ix-failover-status>
+                    }
+                  }
 
-              <ix-true-command-status></ix-true-command-status>
+                  <ix-true-command-status></ix-true-command-status>
 
-              <div class="ix-logo">
-                <img src="assets/images/ix_logo_full.png" height="40" width="80" alt="iX Systems">
+                  <div class="ix-logo">
+                    <img src="assets/images/ix_logo_full.png" height="40" width="80" alt="iX Systems">
+                  </div>
+                  <ix-copyright-line class="copyright" [withIxLogo]="false"></ix-copyright-line>
+                </div>
               </div>
-              <ix-copyright-line class="copyright" [withIxLogo]="false"></ix-copyright-line>
-            </div>
-          </div>
-        } @else {
-          <ix-disconnected-message
-            [hasFailover]="hasFailover$ | async"
-          ></ix-disconnected-message>
+            </mat-card-content>
+          </mat-card>
         }
-      </mat-card-content>
-    </mat-card>
+    } @else {
+      <div class="logo-with-animation-wrapper">
+        <div>
+          <ix-icon name="ix:logo_truenas_scale_full"></ix-icon>
+        </div>
+      </div>
+    }
   </div>
 </div>
diff --git a/src/app/pages/signin/signin.component.scss b/src/app/pages/signin/signin.component.scss
@@ -46,6 +46,7 @@
 }
 
 .card-bottom {
+  overflow: auto;
   padding: 0 16px;
 }
 
@@ -58,19 +59,20 @@
 }
 
 .form-container {
-  margin-bottom: 20px;
   padding: 20px 32px 8px;
 }
 
 .logo-wrapper {
   background-color: var(--bg2);
+
   // Fallback for browsers that don't support image-set
   background-image: url('assets/images/signin/stars-sky-800w.jpg');
   background-image: image-set(url('assets/images/signin/stars-sky-400w.avif') 1x,
   url('assets/images/signin/stars-sky-800w.avif') 2x,
   url('assets/images/signin/stars-sky-1200w.avif') 3x);
   background-size: cover;
   border-bottom: solid 1px var(--lines);
+  height: 250px;
 
   padding: 20% 0;
   position: relative;
@@ -85,6 +87,24 @@
   }
 }
 
+.logo-with-animation-wrapper {
+  align-items: center;
+  display: flex;
+  height: 100vh;
+  justify-content: center;
+
+  > div {
+    animation: loading 2s linear infinite;
+    height: 65px;
+    opacity: 0.3;
+    width: 300px;
+
+    ix-icon {
+      fill: var(--fg1);
+    }
+  }
+}
+
 @media (max-width: 600px) {
   .page-wrap {
     bottom: 0;
@@ -122,11 +142,17 @@
   }
 
   .logo-wrapper {
+    align-items: center;
+    display: flex;
+    justify-content: center;
     padding: 20% 0;
   }
 }
 
-.failover-status {
-  margin-top: 25px;
+.logging-in {
+  box-sizing: border-box;
+  color: var(--fg2);
+  padding: 49px 16px 37px;
+  text-align: center;
+  width: 100%;
 }
-