Scroll button + texts (#127)

rogermiretin2 · web-flow · commit 9a60f565b258 · 2025-11-19T12:09:45.000+01:00
* update version

* fix and enhance translations to en, ca and es

* home: remove outdated texts

* home: make the "scroll" button go down to the login button, and change its text to "Scroll to see more and sign in"

* add comments

* home: align-text

* i18n: small enhancements

* update changelog

* i18n: simplify sentence
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.1.5](https://github.com/in2workspace/in2-issuer-ui/releases/tag/v2.1.5)
+### Fixed
+- English grammar and clarity firxes in home and credential offer stepper pages.
+
+### Removed
+- Outdated text in home page.
+
 ## [2.1.4](https://github.com/in2workspace/in2-issuer-ui/releases/tag/v2.1.4)
 ### Changed
 - Removed hardcoded "DOME" references.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eudistack-issuer-ui",
-  "version": "2.1.4",
+  "version": "2.1.5",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
diff --git a/src/app/features/home/home.component.html b/src/app/features/home/home.component.html
@@ -1,5 +1,7 @@
 <div class="landing-page">
   <div class="container-nav">
+  <!-- HEADER BANNER -->
+    <!-- HEADER INTEGRATED NAVBAR -->
     <header class="main-header">
       <nav class="navbar">
         <div class="navbar-brand" href="/">
@@ -19,16 +21,18 @@
       </nav>
     </header>
 
+    <!-- HEADER TITLE AND SCROLL BUTTON SECTION -->
     <section class="cover" id="cover">
       <div class="cover-content">
         <h1>{{ "home.title" | translate }}</h1>
+        <!-- SCROLL BUTTON -->
         <div class="scroll-indicator">
           <a class="btn btn-primary" [href]="knowledge_base_url" target="_blank" rel="noopener noreferrer" tabindex="0">
             {{ "home.learn-more" | translate }}
             <img src="../../../assets/icons/arrow-right.png" alt="arrow">
           </a>
           <p class="scroller">{{ "home.scroll" | translate }}</p>
-          <a class="btn btn-link" (click)="navigateToSection('about-section')">
+          <a class="btn btn-link" (click)="scrollToLoginSection()">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="64"
@@ -64,38 +68,33 @@ <h1>{{ "home.title" | translate }}</h1>
       </div>
     </section>
   </div>
+  <!-- END HEADER BANNER -->
 
-  <section id="about-section" class="content-section">
+  <!-- CONTENT SECTION -->
+  <section class="content-section">
     <div class="content-wrapper">
       <p>
         {{ "home.intro-main" | translate }}
       </p>
       <ul>
-        <li [innerHTML]="'home.intro-first' | translate">
-
-        </li>
-        <li [innerHTML]="'home.intro-second' | translate">
-        </li>
+        <!-- we need 'innerHTML' because we are using <b> for styles -->
+        <li [innerHTML]="'home.intro-first' | translate"></li>
+        <li [innerHTML]="'home.intro-second' | translate"></li>
       </ul>
     </div>
   </section>
 
-  <section class="content-section">
+  <!-- LOGIN SECTION -->
+  <section id="login-section" #loginSection class="content-section">
     <div class="legal-representative">
-      <p>
+      <p class="legal-first-text">
         {{ "home.legal-first" | translate }}
       </p>
-      <p>
-        {{ "home.legal-second" | translate }}
-      </p>
-      <p>
-        {{ "home.legal-third" | translate }}
-      </p>
       <a class="btn-secondary" tabindex="0" (click)="login()">{{ "home.login-btn" | translate}}</a>
-
     </div>
   </section>
 
+  <!-- "GO TO WALLET" SECTION -->
   <section class="content-section wallet-section">
     <div class="wallet-info-container">
       <div class="wallet-info-qr">
@@ -112,6 +111,7 @@ <h2>{{ "home.obtain-wallet-title" | translate }}</h2>
     </div>
   </section>
 
+  <!-- FOOTER -->
   <footer class="main-footer">
     <span>
       <p>
diff --git a/src/app/features/home/home.component.scss b/src/app/features/home/home.component.scss
@@ -161,6 +161,10 @@
         margin-left: auto;
         margin-right: auto;
 
+        p.legal-first-text{
+          text-align: center;
+        }
+
         .btn-secondary {
           width: 100%;
           max-width: 16rem;
diff --git a/src/app/features/home/home.component.spec.ts b/src/app/features/home/home.component.spec.ts
@@ -1,13 +1,13 @@
-import { TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { HomeComponent } from './home.component';
 import { Router } from '@angular/router';
 import { AuthService } from 'src/app/core/services/auth.service';
 import { environment } from 'src/environments/environment';
-import { QRCodeModule } from 'angularx-qrcode';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 
 describe('HomeComponent', () => {
   let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
   let router: jest.Mocked<Router>;
   let authService: jest.Mocked<AuthService>;
 
@@ -22,15 +22,19 @@ describe('HomeComponent', () => {
     } as unknown as jest.Mocked<AuthService>;
 
     TestBed.configureTestingModule({
-      imports: [QRCodeModule, TranslateModule.forRoot({})],
+      imports: [
+        HomeComponent,
+        TranslateModule.forRoot({}),
+      ],
       providers: [
         TranslateService,
         { provide: Router, useValue: routerMock },
         { provide: AuthService, useValue: authServiceMock },
       ],
     });
 
-    component = TestBed.createComponent(HomeComponent).componentInstance;
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
     router = TestBed.inject(Router) as jest.Mocked<Router>;
     authService = TestBed.inject(AuthService) as jest.Mocked<AuthService>;
   });
@@ -40,11 +44,13 @@ describe('HomeComponent', () => {
   });
 
   it('should get logo source', () => {
-    expect(component.logoSrc).toBe("../../../assets/logos/" + environment.customizations.logo_src);
+    expect(component.logoSrc).toBe(
+      '../../../assets/logos/' + environment.customizations.logo_src,
+    );
   });
 
   it('should set walletUrl and knowledge_base_url from environment', () => {
-    expect(component.walletUrl).toBe(environment.wallet_url);
+    expect(component.walletUrl).toBe(environment.wallet_url ?? '');
     expect(component.knowledge_base_url).toBe(environment.knowledge_base_url);
   });
 
@@ -59,23 +65,17 @@ describe('HomeComponent', () => {
     expect(router.navigate).toHaveBeenCalledWith(['/login']);
   });
 
-  it('should scroll to the specified section when navigateToSection is called', () => {
+  it('should scroll to login section when scrollToLoginSection() is called', () => {
     const scrollIntoViewMock = jest.fn();
-    jest.spyOn(document, 'getElementById').mockReturnValue({
-      scrollIntoView: scrollIntoViewMock,
-    } as unknown as HTMLElement);
 
-    const sectionId = 'section1';
-    component.navigateToSection(sectionId);
-    expect(document.getElementById).toHaveBeenCalledWith(sectionId);
-    expect(scrollIntoViewMock).toHaveBeenCalledWith({ behavior: 'smooth' });
-  });
+    component.loginSection = {
+      nativeElement: {
+        scrollIntoView: scrollIntoViewMock,
+      } as unknown as HTMLElement,
+    } as any;
 
-  it('should do nothing if the section ID is not found', () => {
-    jest.spyOn(document, 'getElementById').mockReturnValue(null);
+    component.scrollToLoginSection();
 
-    const sectionId = 'nonexistent-section';
-    component.navigateToSection(sectionId);
-    expect(document.getElementById).toHaveBeenCalledWith(sectionId);
+    expect(scrollIntoViewMock).toHaveBeenCalledWith({ behavior: 'smooth' });
   });
 });
diff --git a/src/app/features/home/home.component.ts b/src/app/features/home/home.component.ts
@@ -1,4 +1,4 @@
-import { Component, inject } from '@angular/core';
+import { Component, ElementRef, inject, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
 import { AuthService } from 'src/app/core/services/auth.service';
 import { environment } from 'src/environments/environment';
@@ -13,6 +13,7 @@ import { TranslatePipe } from '@ngx-translate/core';
     imports: [QRCodeModule, TranslatePipe],
 })
 export class HomeComponent{
+  @ViewChild('loginSection') loginSection!: ElementRef<HTMLElement>;
   public walletUrl = environment.wallet_url ?? '';
   public knowledge_base_url = environment.knowledge_base_url;
   public readonly logoSrc = "../../../assets/logos/" + environment.customizations.logo_src;
@@ -29,8 +30,8 @@ export class HomeComponent{
     this.router.navigate(['/login']);
   }
 
-  public navigateToSection(sectionId: string): void {
-    document.getElementById(sectionId)?.scrollIntoView({ behavior: 'smooth' });
+  public scrollToLoginSection(): void {
+    this.loginSection.nativeElement.scrollIntoView({ behavior: 'smooth' });
   }
 
 }
diff --git a/src/assets/i18n/ca.json b/src/assets/i18n/ca.json
@@ -6,18 +6,16 @@
   "home": {
     "title": "Benvingut a l'Issuer de LEAR Credentials ",
     "learn-more": "Més informació",
-    "scroll": "Desplaça't per veure més",
-    "intro-main": "Aquest lloc està destinat als Representants Legals d'empreses que vulguin emetre una o més LEAR Credentials per a un o més empleats de l'empresa. Una LEAR Credential és un tipus de Credencial Verificable que permet a un empleat, designat per un representant legal, actuar en nom d'una organització amb un poder restringit envers tercers.",
-    "intro-first": "L'emissor de la LEAR Credential <strong>ha de ser un representant legal</strong> de l'empresa. El representant legal signarà la LEAR Credential amb un certificat digital eIDAS, que pot ser personal o un certificat de representació.",
-    "intro-second": "El receptor de la LEAR Credential (tant el subjecte com el titular de la credencial) <strong>pot ser qualsevol empleat (o contractista)</strong> de l'empresa. El representant legal delegarà un conjunt restringit de poders a aquesta persona. Aquests poders restringits estan inclosos dins la credencial i poden ser verificats per qualsevol tercera part que el titular presenti la LEAR Credential.",
+    "scroll": "Desplaça't per saber-ne més i iniciar sessió",
+    "intro-main": "Aquest lloc està destinat als Representants Legals d'empreses que vulguin emetre una o més LEAR Credentials per als seus empleats. Una LEAR Credential és un tipus de Credencial Verificable que permet a un empleat, designat per un representant legal, actuar en nom d'una organització amb poders restringits envers tercers.",
+    "intro-first": "L'emissor de la LEAR Credential <strong>ha de ser un representant legal</strong> de l'empresa.",
+    "intro-second": "El receptor de la LEAR Credential (tant el subjecte com el titular de la credencial) <strong>pot ser qualsevol empleat (o contractista)</strong> de l'empresa. El representant legal delegarà un conjunt restringit de poders a aquesta persona. Aquests poders restringits estan inclosos dins la credencial i poden ser verificats per qualsevol tercera part a qui el titular presenti la LEAR Credential.",
     "legal-first": "Has de ser un representant legal de l'empresa per poder delegar poders.",
-    "legal-second": "Necessites un certificat eIDAS per poder utilitzar el sistema. A més, hauràs de registrar el correu electrònic de la teva empresa.",
-    "legal-third": "Nota: si estàs llegint això al teu mòbil, probablement el botó no funcionarà, a menys que tinguis instal·lat el teu certificat eIDAS al mòbil. Normalment cal utilitzar un ordinador amb el certificat instal·lat al navegador.",
     "login-btn": "Inicia sessió com a Representant Legal",
-    "obtain-wallet-title": "Obté la teva cartera",
-    "obtain-wallet-intro": "Necessites un Wallet per emmagatzemar les teves LEAR Credentials i presentar-les a tercers.",
-    "obtain-wallet-detail": "Proporcionem una cartera senzilla suficient per autenticar-se i dur a terme tots els processos necessaris.",
-    "wallet-instructions": "Escaneja aquest codi QR o ves al teu mòbil a",
+    "obtain-wallet-title": "Obtingues el teu wallet",
+    "obtain-wallet-intro": "Necessites un wallet digital per emmagatzemar les teves LEAR Credentials i presentar-les a tercers.",
+    "obtain-wallet-detail": "Proporcionem un wallet senzill, suficient per autenticar-te als nostres serveis i dur a terme tots els processos necessaris.",
+    "wallet-instructions": "Escaneja aquest codi QR o, des del teu mòbil, ves a",
     "footer-license": "CC BY 4.0",
     "footer-privacy": "Política de Privacitat"
   },
@@ -154,7 +152,7 @@
     "environment-wallet": "Wallet de l'entorn",
     "first-assistance": "Consulta la ",
     "second-assistance": " per a més assistència.",
-    "wallet-guide": "Guia d'Usuaris del Wallet",
+    "wallet-guide": "Guia d'Usuari del Wallet",
     "expired-title": "Expiració d'oferta de credencial",
     "ask-refresh": "L'oferta de credencial està a punt d'expirar. Vols refrescar-la o sortir? Si expira, n'hauràs de demanar una altra al teu representant legal.",
     "remaining-time": "Temps restant:",
@@ -166,7 +164,7 @@
       "title": "Escaneja el codi QR per obtenir la credencial.",
       "directly": "directament",
       "test-purposes": "Per a propòsits de prova, obtén la Credencial Verificable amb la ",
-      "refresh-text": "Tens problemes per obtenir la credencial amb la Wallet?",
+      "refresh-text": "Tens problemes per obtenir la credencial amb el Wallet?",
       "refresh-link": "Obtingues una nova oferta de credencial"
     }
   },
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
@@ -7,18 +7,16 @@
   "home": {
     "title": "Welcome to the Issuer for LEAR Credentials",
     "learn-more": "Learn more",
-    "scroll": "Scroll to see more",
-    "intro-main": "This site is intended for Legal Representatives of companies who want to issue one or more LEAR Credentials to one or more employees of the company. A LEAR Credential is a type of Verifiable Credential which enables an employee, nominated by a legal representative, to act on behalf of an organisation with restricted power with respect to third-parties.",
-    "intro-first": "The issuer of the LEAR Credential <strong>must be a legal representative</strong> of the company. The legal representative will sign the LEAR Credential with an eIDAS digital certificate, which can be either a personal one or a certificate of representation.",
-    "intro-second": "The receiver of the LEARC redential (both the subject and holder of the credential) <strong>can be any employee (or contractor)</strong> of the company. The legal representative will delegate a restricted set of power to that person. Those restricted power are included inside the credential and can be verified by any Relying party to whom the holder presents the LEAR Credential.",
-    "legal-first": "You must be a legal representative of the company to be able to delegate power.",
-    "legal-second": "You need an eIDAS certificate to be able to use the system. In additionyou will have to register your company email.",
-    "legal-third": "Note: if you are reading this in your mobile, most probably the button will not work, unless you have installed your eIDAS certificate in the mobile. You typically need to use a PC, with the certificate installed in the browser.",
+    "scroll": "Scroll to see more and sign in",
+    "intro-main": "This site is intended for Legal Representatives of companies who want to issue LEAR Credentials to their employees. A LEAR Credential is a type of Verifiable Credential that enables an employee, nominated by a legal representative, to act on behalf of an organisation with restricted powers towards third parties.",
+    "intro-first": "The issuer of the LEAR Credential <strong>must be a legal representative</strong> of the company.",
+    "intro-second": "The receiver of the LEAR Credential (both the subject and the holder of the credential) <strong>can be any employee (or contractor)</strong> of the company. The legal representative will delegate a restricted set of powers to that person. These restricted powers are included in the credential and can be verified by any relying party to whom the holder presents the LEAR Credential.",
+    "legal-first": "You must be a legal representative of the company to be able to delegate powers.",
     "login-btn": "Login as Legal Representative",
-    "obtain-wallet-title": "Obtain your wallet",
-    "obtain-wallet-intro": "You need a wallet to store your LEAR Credentials and present them to Relying parties.",
-    "obtain-wallet-detail": "We provide a simple wallet enough for authenticating across our services and performing all needed processes.",
-    "wallet-instructions": "Scan this QR code or go in your mobile to",
+    "obtain-wallet-title": "Get your wallet",
+    "obtain-wallet-intro": "You need a digital wallet to store your LEAR Credentials and present them to relying parties.",
+    "obtain-wallet-detail": "We provide a simple wallet sufficient for authenticating across our services and performing all necessary processes.",
+    "wallet-instructions": "Scan this QR code or, on your mobile, go to",
     "footer-license": "CC BY 4.0",
     "footer-privacy": "Privacy Policy"
   },
@@ -144,7 +142,7 @@
     }
   },
   "credentialOffer": {
-    "first-label": "Log in to Wallet",
+    "first-label": "Log in to the Wallet",
     "second-label": "Get Credential",
     "no-data": "No credential offer data.",
     "getting": "Getting credential offer...",
@@ -153,19 +151,19 @@
     "environment-wallet": "environment Wallet",
     "first-assistance": "Check the ",
     "second-assistance": " for assistance.",
-    "wallet-guide": "Wallet Users Guide",
+    "wallet-guide": "Wallet User Guide",
     "expired-title": "Credential offer expiring",
     "ask-refresh": "Credential offer is about to expire. Would you like to refresh it or leave? If it expires, you will need to request a new one from your legal representative.",
     "remaining-time": "Time remaining:",
     "first-step": {
       "title": "Scan the QR code to log in and access the Digital Wallet.",
-      "test-purposes": "For tests purposes, access the "
+      "test-purposes": "For testing purposes, access the "
     },
     "second-step": {
       "title": "Scan the QR code to obtain the credential.",
       "directly": "directly",
-      "test-purposes": "For tests purposes, get the Verifiable Credential with the ",
-      "refresh-text": "Do you have problems when getting the credential with the Wallet?",
+      "test-purposes": "For testing purposes, get the Verifiable Credential with the ",
+      "refresh-text": "Do you have problems obtaining the credential with the Wallet?",
       "refresh-link": "Get a new credential offer"
     }
   },
diff --git a/src/assets/i18n/es.json b/src/assets/i18n/es.json

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "eudistack-issuer-ui",`
`3`		`- "version": "2.1.4",`
	`3`	`+ "version": "2.1.5",`
`4`	`4`	`"scripts": {`
`5`	`5`	`"ng": "ng",`
`6`	`6`	`"start": "ng serve",`