[APIM-11537] Fix PR comments.

Author: kovaren

gravitee-apim-portal-webui-next/projects/gravitee-markdown/src/lib/components/card/README.md

@@ -1,6 +1,6 @@
 # Card Component
 
-A flexible card component for displaying structured content with optional title, subtitle, and markdown content. 
+A flexible card component for displaying structured content with optional title, subtitle, and markdown content.
 The component uses a token-based theming system that allows for easy customization through CSS custom properties and input properties.
 
 ## Features

gravitee-apim-portal-webui-next/src/app/app.config.ts

@@ -43,13 +43,12 @@ function initApp(
 ): () => Observable<unknown> {
   return () =>
     configService.initBaseURL().pipe(
-      switchMap(_ => authService.load()),
       switchMap(_ =>
         combineLatest([
           themeService.loadTheme(),
-          currentUserService.loadUser(),
           configService.loadConfiguration(),
           portalMenuLinksService.loadCustomLinks(),
+          authService.load().pipe(switchMap(_ => currentUserService.loadUser())),
         ]),
       ),
       catchError(error => {

gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.html

@@ -15,13 +15,14 @@
     limitations under the License.
 
 -->
-<form [formGroup]="logInForm" (ngSubmit)="logIn()" class="log-in__form__container" [class.mobile]="isMobile()">
+<form [formGroup]="logInForm" (ngSubmit)="logIn()" class="log-in__form__container" [appIsMobile]="'log-in__form__container--mobile'">
   <mat-card appearance="outlined" class="log-in">
     <mat-card-header class="log-in__form__header">
       <mat-card-title class="log-in__form__title" i18n="@@logInTitle">Login</mat-card-title>
     </mat-card-header>
     <mat-card-content class="log-in__form__content">
-      @if (isLocalLoginEnabled()) {
+      @let identityProviders = identityProviders$ | async;
+      @if (isLocalLoginEnabled) {
         <div class="log-in__form">
           <div class="log-in__form__fields">
             <mat-form-field appearance="outline" class="log-in__form__input">
@@ -39,40 +40,35 @@
               }
             </mat-form-field>
             @if (error() === 401) {
-              <mat-error class="log-in__form__error" i18n="@@logInError401"
+              <mat-error class="log-in__form__error m3-label-large" i18n="@@logInError401"
                 >The username or password you entered is incorrect, please try again.</mat-error
               >
             }
           </div>
           <div class="log-in__form__buttons">
-            <button
-              [disabled]="logInForm.invalid"
-              type="submit"
-              mat-flat-button
-              i18n="@@logInAction"
-              class="log-in__form__submit primary-button">
+            <button [disabled]="logInForm.invalid" type="submit" mat-flat-button i18n="@@logInAction" class="log-in__form__submit">
               Log in
             </button>
-            <a class="log-in__form__forgot-password" i18n="@@resetPasswordAction" routerLink="reset-password"> Forgot password? </a>
+            <a class="log-in__form__forgot-password m3-label-large" i18n="@@resetPasswordAction" routerLink="reset-password">
+              Forgot password?
+            </a>
           </div>
         </div>
-      }
-      <div class="log-in__sso">
-        @if (isLocalLoginEnabled() && identityProviders.length > 0) {
-          <div class="log-in__sso__separator">
-            <div class="log-in__sso__separator__line"></div>
-            <div class="log-in__sso__separator__label" i18n="@@orSeparator">OR</div>
+        @if ((identityProviders ?? []).length > 0) {
+          <div class="log-in__or-separator m3-label-large">
+            <div class="log-in__or-separator__line"></div>
+            <div class="log-in__or-separator__label" i18n="@@orSeparator">OR</div>
           </div>
         }
-        @for (provider of identityProviders; track provider.id) {
-          <button type="button" mat-stroked-button class="log-in__sso__idp secondary-button" (click)="authenticateSSO(provider)">
-            <div class="log-in__sso__idp__container">
-              <img class="log-in__sso__idp__logo" [src]="'assets/images/idp/' + getProviderLogo(provider)" alt="Provider Logo" />
-              <span class="log-in__sso__idp__label" i18n="@@logInSsoLabelPrefix">Continue with {{ provider.name }}</span>
-            </div>
-          </button>
-        }
-      </div>
+      }
+      @for (provider of identityProviders; track provider.id) {
+        <button type="button" mat-stroked-button class="log-in__sso-provider secondary-button" (click)="authenticateSSO(provider)">
+          <div class="log-in__sso-provider__container">
+            <img class="log-in__sso-provider__logo" [src]="'assets/images/idp/' + getProviderLogo(provider)" alt="Provider Logo" />
+            <span class="log-in__sso-provider__label m3-label-large" i18n="@@logInSsoLabelPrefix">Continue with {{ provider.name }}</span>
+          </div>
+        </button>
+      }
     </mat-card-content>
   </mat-card>
 </form>

gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.scss

@@ -23,7 +23,6 @@
 .log-in {
   display: flex;
   flex-flow: column;
-  background: #{theme.$background-color};
   gap: 20px;
 
   &__form {
@@ -35,16 +34,11 @@
       padding: 20px 20px 0;
     }
 
-    &__title {
-      font-size: 18px;
-      font-weight: 700;
-    }
-
     &__container {
       width: 400px;
       border-radius: 8px;
 
-      &.mobile {
+      &--mobile {
         max-width: 75vw;
       }
     }
@@ -72,7 +66,6 @@
     &__forgot-password {
       margin-top: 5px;
       color: #{theme.$primary-main-color};
-      font-size: 14px;
       text-align: center;
       text-decoration: none;
 
@@ -82,58 +75,54 @@
     }
 
     &__error {
-      font-size: 14px;
       text-align: center;
     }
   }
 
-  &__sso {
+  &__or-separator {
+    position: relative;
     display: flex;
-    flex-flow: column;
-    gap: 16px;
+    height: 30px;
+    align-items: center;
+    margin: 20px 0;
 
-    &__separator {
-      position: relative;
+    &__line {
+      width: 100%;
+      border-top: 1px solid #{theme.$card-border-color};
+    }
+
+    &__label {
+      position: absolute;
       display: flex;
-      height: 30px;
+      width: 40px;
+      height: 100%;
       align-items: center;
-      margin: 20px 0 4px;
-      font-size: 14px;
+      justify-content: center;
+      margin: auto;
+      background: #{theme.$card-background-color};
+      inset: 0;
+    }
+  }
 
-      &__line {
-        width: 100%;
-        border-top: 1px solid #{theme.$card-border-color};
-      }
+  &__sso-provider {
+    width: 100%;
+    padding: 0 18px;
+    margin-bottom: 16px;
+    color: #{theme.$button-text-text-color};
 
-      &__label {
-        position: absolute;
-        display: flex;
-        width: 40px;
-        height: 100%;
-        align-items: center;
-        justify-content: center;
-        margin: auto;
-        background: #{theme.$background-color};
-        inset: 0;
-      }
+    &:last-of-type {
+      margin-bottom: 0;
     }
 
-    &__idp {
-      width: 100%;
-      padding: 0 18px;
-      color: #{theme.$button-text-text-color};
-      font-weight: bold;
-
-      &__container {
-        display: flex;
-        align-items: center;
-        gap: 7px;
-      }
+    &__container {
+      display: flex;
+      align-items: center;
+      gap: 7px;
+    }
 
-      &__logo {
-        width: 23px;
-        height: 23px;
-      }
+    &__logo {
+      width: 23px;
+      height: 23px;
     }
   }
 }

gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.spec.ts

@@ -34,36 +34,47 @@ describe('LogInComponent', () => {
   let harnessLoader: HarnessLoader;
   let httpTestingController: HttpTestingController;
 
-  async function initComponent() {
-    fixture = TestBed.createComponent(LogInComponent);
-    harnessLoader = TestbedHarnessEnvironment.loader(fixture);
-    httpTestingController = TestBed.inject(HttpTestingController);
-    fixture.detectChanges();
-  }
-
-  function enableLocalLogin(enable: boolean) {
-    const configService = TestBed.inject(ConfigService) as unknown as ConfigServiceStub;
-    configService.configuration.authentication!.localLogin!.enabled = enable;
-  }
-
-  function initSsoProviders(providers: IdentityProvider[]) {
-    const identityProviderService = TestBed.inject(IdentityProviderService) as unknown as IdentityProviderServiceStub;
-    identityProviderService.providers = providers;
-  }
-
-  beforeEach(async () => {
+  const init = async (
+    params: Partial<{ enableLocalLogin: boolean; ssoProviders: IdentityProvider[] }> = {
+      enableLocalLogin: true,
+      ssoProviders: [],
+    },
+  ) => {
     await TestBed.configureTestingModule({
       imports: [LogInComponent, AppTestingModule],
+      providers: [
+        {
+          provide: ConfigService,
+          useFactory: () => {
+            const stub = new ConfigServiceStub();
+            stub.configuration.authentication!.localLogin!.enabled = params.enableLocalLogin;
+            return stub;
+          },
+        },
+        {
+          provide: IdentityProviderService,
+          useFactory: () => {
+            const stub = new IdentityProviderServiceStub();
+            stub.providers = params.ssoProviders!;
+            return stub;
+          },
+        },
+      ],
     }).compileComponents();
 
-    await initComponent();
-  });
+    fixture = TestBed.createComponent(LogInComponent);
+    harnessLoader = TestbedHarnessEnvironment.loader(fixture);
+    httpTestingController = TestBed.inject(HttpTestingController);
+    fixture.detectChanges();
+  };
 
   afterEach(() => {
     httpTestingController.verify();
   });
 
   it('should allow submit if username and password are valid', async () => {
+    await init();
+
     const submitButton = await harnessLoader.getHarness(MatButtonHarness.with({ text: 'Log in' }));
 
     const username = await harnessLoader.getHarness(MatInputHarness.with({ selector: '[formControlName="username"]' }));
@@ -78,6 +89,8 @@ describe('LogInComponent', () => {
   });
 
   it('should not validate form with missing username', async () => {
+    await init();
+
     const submitButton = await harnessLoader.getHarness(MatButtonHarness.with({ text: 'Log in' }));
 
     const password = await harnessLoader.getHarness(MatInputHarness.with({ selector: '[formControlName="password"]' }));
@@ -87,6 +100,8 @@ describe('LogInComponent', () => {
   });
 
   it('should not validate form with missing password', async () => {
+    await init();
+
     const submitButton = await harnessLoader.getHarness(MatButtonHarness.with({ text: 'Log in' }));
 
     const username = await harnessLoader.getHarness(MatInputHarness.with({ selector: '[formControlName="username"]' }));
@@ -96,6 +111,8 @@ describe('LogInComponent', () => {
   });
 
   it('should login and fetch current user on submit', async () => {
+    await init();
+
     const submitButton = await harnessLoader.getHarness(MatButtonHarness.with({ text: 'Log in' }));
     const username = await harnessLoader.getHarness(MatInputHarness.with({ selector: '[formControlName="username"]' }));
     await username.setValue('[email protected]');
@@ -110,15 +127,15 @@ describe('LogInComponent', () => {
   });
 
   it('should not display log-in form', async () => {
-    enableLocalLogin(false);
-    initSsoProviders([
-      {
-        id: 'github',
-        name: 'GitHub',
-      },
-    ]);
-
-    await initComponent();
+    await init({
+      enableLocalLogin: false,
+      ssoProviders: [
+        {
+          id: 'github',
+          name: 'GitHub',
+        },
+      ],
+    });
 
     const login = await harnessLoader.getHarnessOrNull(DivHarness.with({ selector: '.log-in__form' }));
     expect(login).toBeNull();
@@ -134,10 +151,9 @@ describe('LogInComponent', () => {
   });
 
   it('should not display SSO providers', async () => {
-    enableLocalLogin(true);
-    initSsoProviders([]);
-
-    await initComponent();
+    await init({
+      enableLocalLogin: true,
+    });
 
     const login = await harnessLoader.getHarnessOrNull(DivHarness.with({ selector: '.log-in__form' }));
     expect(login).not.toBeNull();
@@ -155,10 +171,10 @@ describe('LogInComponent', () => {
       { id: 'google', name: 'Google' },
       { id: 'graviteeio_am', name: 'Gravitee AM' },
     ];
-    enableLocalLogin(true);
-    initSsoProviders(identityProviders);
-
-    await initComponent();
+    await init({
+      enableLocalLogin: true,
+      ssoProviders: identityProviders,
+    });
 
     const orSeparator = await harnessLoader.getHarnessOrNull(DivHarness.with({ selector: '.log-in__sso__separator' }));
     expect(orSeparator).not.toBeNull();
@@ -174,13 +190,12 @@ describe('LogInComponent', () => {
   });
 
   it('should redirect when clicked on SSO provider', async () => {
-    enableLocalLogin(true);
-    initSsoProviders([{ id: 'google', name: 'Google' }]);
-
+    await init({
+      enableLocalLogin: true,
+      ssoProviders: [{ id: 'google', name: 'Google' }],
+    });
     const authenticateSSO = jest.spyOn(TestBed.inject(AuthService), 'authenticateSSO').mockReturnValue();
 
-    await initComponent();
-
     const ssoProvider = await harnessLoader.getHarness(MatButtonHarness.with({ selector: '.log-in__sso__idp' }));
     await ssoProvider.click();
     expect(authenticateSSO).toHaveBeenCalledWith({ id: 'google', name: 'Google' }, '');