newportsite 1.1.3

package/src/lib/auth/register.component.html

@@ -0,0 +1,157 @@
+<!-- register.component -->
+<authtemplate>
+  <div class="auth-card">
+    <div class="auth-brand">
+      <div class="auth-logo">
+        <i class="bi bi-person-plus"></i>
+      </div>
+      <h1 class="auth-app-name">Newport</h1>
+      <p class="auth-subtitle">Crea il tuo account</p>
+    </div>
+
+    <form
+      [formGroup]="form"
+      (ngSubmit)="onSubmit(form.value)"
+      role="form"
+      aria-label="Modulo di registrazione"
+      autocomplete="off">
+      <!-- Login -->
+      <div class="auth-field">
+        <span class="auth-field-icon" aria-hidden="true"><i class="bi bi-person"></i></span>
+        <label for="login" class="visually-hidden">{{ msg?.get('app.login') }}</label>
+        <input
+          nvg
+          [attr.data-state]="0"
+          tabindex="1"
+          [formControl]="login"
+          type="text"
+          class="form-control auth-input"
+          id="login"
+          placeholder="{{ msg?.get('app.login') }}"
+          [attr.aria-label]="msg?.get('app.login')"
+          aria-required="true"
+          autocomplete="off" />
+      </div>
+
+      <!-- Password + Generate -->
+      <div class="auth-field">
+        <span class="auth-field-icon" aria-hidden="true"><i class="bi bi-lock"></i></span>
+        <label for="password" class="visually-hidden">{{ msg?.get('app.password') }}</label>
+        <input
+          nvg
+          [attr.data-state]="0"
+          tabindex="2"
+          [formControl]="password"
+          [type]="showPassword ? 'text' : 'password'"
+          class="form-control auth-input auth-input-padded2"
+          id="password"
+          placeholder="{{ msg?.get('app.password') }}"
+          [attr.aria-label]="msg?.get('app.password')"
+          aria-required="true"
+          aria-describedby="password-strength"
+          autocomplete="off" />
+        <div class="auth-toggle-group">
+          <button
+            type="button"
+            class="auth-toggle-btn"
+            tabindex="-1"
+            [attr.aria-pressed]="showPassword"
+            [attr.aria-label]="showPassword ? 'Nascondi password' : 'Mostra password'"
+            (click)="showPassword = !showPassword"
+            [title]="showPassword ? 'Nascondi password' : 'Mostra password'">
+            <i
+              class="bi"
+              aria-hidden="true"
+              [class.bi-eye]="!showPassword"
+              [class.bi-eye-slash]="showPassword"></i>
+          </button>
+          <button
+            type="button"
+            class="auth-toggle-btn btn-generate"
+            tabindex="-1"
+            aria-label="Genera password sicura"
+            (click)="generatePassword()"
+            title="Genera password sicura">
+            <i class="bi bi-shield-lock" aria-hidden="true"></i>
+          </button>
+        </div>
+      </div>
+
+      <!-- Password strength indicator -->
+      @if (password.value) {
+        <div
+          id="password-strength"
+          class="strength-meter"
+          role="status"
+          aria-live="polite"
+          [attr.aria-label]="'Sicurezza password: ' + passwordStrength.label">
+          <div class="strength-bar" role="presentation">
+            <div
+              class="strength-fill"
+              [style.width.%]="passwordStrength.score * 25"
+              [class.strength-weak]="passwordStrength.score === 1"
+              [class.strength-fair]="passwordStrength.score === 2"
+              [class.strength-good]="passwordStrength.score === 3"
+              [class.strength-strong]="passwordStrength.score === 4"></div>
+          </div>
+          <span
+            class="strength-label"
+            [class]="'strength-text-' + passwordStrength.score">
+            {{ passwordStrength.label }}
+          </span>
+        </div>
+        @if (passwordStrength.suggestions.length) {
+          <ul class="strength-suggestions" aria-label="Suggerimenti per migliorare la password">
+            @for (tip of passwordStrength.suggestions; track tip) {
+              <li>{{ tip }}</li>
+            }
+          </ul>
+        }
+      }
+
+      <!-- Confirm password -->
+      <div class="auth-field">
+        <span class="auth-field-icon" aria-hidden="true"><i class="bi bi-lock-fill"></i></span>
+        <label for="confirmpassword" class="visually-hidden">{{ msg?.get('app.repeatepassword') }}</label>
+        <input
+          nvg
+          [attr.data-state]="0"
+          tabindex="3"
+          [formControl]="confirmpassword"
+          [type]="showPassword ? 'text' : 'password'"
+          class="form-control auth-input"
+          id="confirmpassword"
+          placeholder="{{ msg?.get('app.repeatepassword') }}"
+          [attr.aria-label]="msg?.get('app.repeatepassword')"
+          aria-required="true"
+          [attr.aria-invalid]="showPasswordError || null" />
+      </div>
+      @if (showPasswordError) {
+        <div class="auth-error-msg" role="alert" aria-live="assertive">
+          {{ msg?.get('app.passworddoesntmatch') }}
+        </div>
+      }
+
+      <button
+        type="submit"
+        nvg
+        [attr.data-state]="0"
+        tabindex="4"
+        [disabled]="isSubmitDisabled"
+        [attr.aria-disabled]="isSubmitDisabled"
+        class="btn btn-primary btn-auth-submit">
+        {{ msg?.get('app.confirm') }}
+      </button>
+
+      <div class="auth-alt-action">
+        <span>Hai già un account?</span>
+        <a (click)="navigate('/auth/login')" class="auth-alt-link">{{
+          msg?.get('app.authtitle')
+        }}</a>
+      </div>
+    </form>
+
+    <alert></alert>
+  </div>
+</authtemplate>
+<!-- fine register.component -->

package/src/lib/auth/register.component.ts

@@ -0,0 +1,219 @@
+import {
+  Component,
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  DestroyRef,
+  inject,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import {
+  FormGroup,
+  AbstractControl,
+  FormBuilder,
+  Validators,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { EqualPasswordsValidator } from '../validators/index';
+
+import { GlobalService } from '../services/global.service';
+
+import { AppMessageService } from '../services/message.service';
+
+import { AlertService, UserService } from './services/index';
+import { User } from '../auth/models/user';
+import { AuthTemplateComponent } from '../template/authtemplate.component';
+import { InputDirective } from '../directives/input.directive';
+
+import { AlertComponent } from './alert.component';
+
+interface PasswordStrength {
+  score: number;
+  label: string;
+  suggestions: string[];
+}
+
+@Component({
+  templateUrl: 'register.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [AlertService, UserService],
+  imports: [
+    AuthTemplateComponent,
+    ReactiveFormsModule,
+    InputDirective,
+    AlertComponent,
+  ],
+})
+export class RegisterComponent implements AfterViewInit {
+  fb = inject(FormBuilder);
+  usv = inject(UserService);
+  als = inject(AlertService);
+  gsv = inject(GlobalService);
+  msg = inject(AppMessageService);
+
+  public form!: FormGroup;
+  public login!: AbstractControl;
+  public name!: AbstractControl;
+  public email!: AbstractControl;
+  public password!: AbstractControl;
+  public confirmpassword!: AbstractControl;
+  public passwords!: FormGroup;
+
+  public submitted: boolean = false;
+  public loading = false;
+  public showPassword = false;
+  public passwordStrength: PasswordStrength = {
+    score: 0,
+    label: '',
+    suggestions: [],
+  };
+  private destroyRef = inject(DestroyRef);
+
+  constructor() {
+    const fb = this.fb;
+
+    this.form = fb.group({
+      login: ['', Validators.compose([Validators.required])],
+      passwords: fb.group(
+        {
+          password: [
+            '',
+            Validators.compose([Validators.required, Validators.minLength(8)]),
+          ],
+          confirmpassword: ['', Validators.compose([Validators.required])],
+        },
+        {
+          validator: EqualPasswordsValidator.validate(
+            'password',
+            'confirmpassword'
+          ),
+        }
+      ),
+    });
+
+    this.login = this.form.controls['login'];
+    this.passwords = this.form.controls['passwords'] as FormGroup;
+    this.password = this.passwords.controls['password'];
+    this.confirmpassword = this.passwords.controls['confirmpassword'];
+
+    this.password.valueChanges
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((value: string) => {
+        this.passwordStrength = this.evaluateStrength(value);
+      });
+  }
+
+  get showPasswordError() {
+    return !this.confirmpassword.valid && this.confirmpassword.touched;
+  }
+
+  get isSubmitDisabled() {
+    return this.loading || !this.form.valid;
+  }
+
+  /** Lifecycle: focuses the login field on first render. */
+  public ngAfterViewInit(): void {
+    const loginElement = document.getElementById('login');
+    loginElement?.focus();
+  }
+
+  /** Generates a cryptographically random 16-char password satisfying all complexity rules. */
+  public generatePassword(): void {
+    const upper = 'ABCDEFGHJKLMNPQRSTUVWXYZ';
+    const lower = 'abcdefghjkmnpqrstuvwxyz';
+    const digits = '23456789';
+    const symbols = '!@#$%&*?';
+    const all = upper + lower + digits + symbols;
+
+    const array = new Uint32Array(16);
+    crypto.getRandomValues(array);
+
+    // Guarantee at least one from each category
+    const required = [
+      upper[array[0] % upper.length],
+      lower[array[1] % lower.length],
+      digits[array[2] % digits.length],
+      symbols[array[3] % symbols.length],
+    ];
+
+    const rest: string[] = [];
+    for (let i = 4; i < 16; i++) {
+      rest.push(all[array[i] % all.length]);
+    }
+
+    // Shuffle using Fisher-Yates with crypto random
+    const combined = [...required, ...rest];
+    const shuffleArray = new Uint32Array(combined.length);
+    crypto.getRandomValues(shuffleArray);
+    for (let i = combined.length - 1; i > 0; i--) {
+      const j = shuffleArray[i] % (i + 1);
+      [combined[i], combined[j]] = [combined[j], combined[i]];
+    }
+
+    const generated = combined.join('');
+    this.password.setValue(generated);
+    this.confirmpassword.setValue(generated);
+    this.showPassword = true;
+  }
+
+  /** Scores password strength (0–4) and returns a label with improvement suggestions. */
+  public evaluateStrength(value: string): PasswordStrength {
+    if (!value) {
+      return { score: 0, label: '', suggestions: [] };
+    }
+
+    let score = 0;
+    const suggestions: string[] = [];
+
+    if (value.length >= 8) score++;
+    else suggestions.push('Almeno 8 caratteri');
+
+    if (value.length >= 12) score++;
+    else if (value.length >= 8)
+      suggestions.push('12+ caratteri per maggiore sicurezza');
+
+    if (/[a-z]/.test(value) && /[A-Z]/.test(value)) score++;
+    else suggestions.push('Maiuscole e minuscole');
+
+    if (/[0-9]/.test(value) && /[^a-zA-Z0-9]/.test(value)) score++;
+    else {
+      if (!/[0-9]/.test(value)) suggestions.push('Aggiungi numeri');
+      if (!/[^a-zA-Z0-9]/.test(value))
+        suggestions.push('Aggiungi simboli (!@#$%&*)');
+    }
+
+    const labels = ['', 'Debole', 'Discreta', 'Buona', 'Forte'];
+    return { score, label: labels[score] || '', suggestions };
+  }
+
+  /** Submits the registration form: creates the user via UserService and redirects to login on success. */
+  public onSubmit(usr: any): void {
+    this.submitted = true;
+    if (this.form.valid) {
+      this.loading = true;
+      const user = new User();
+      user.login = usr.login;
+      user.name = usr.name === undefined ? '' : usr.name;
+      user.email = usr.email === undefined ? '' : usr.email;
+      user.password = usr.passwords.password;
+      user.token = '';
+      this.gsv.setCurrentUser(user);
+      this.usv.post(user).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+        next: () => {
+          this.gsv.logOff();
+          this.als.success('Registration successful', true);
+          this.gsv.navigate('/auth/login');
+        },
+        error: () => {
+          this.als.error(this.msg.get('app.registerfailed'));
+          this.loading = false;
+          this.gsv.setCurrentUser(null);
+        },
+      });
+    }
+  }
+
+  /** Delegates client-side navigation to GlobalService. */
+  public navigate(url: string) {
+    this.gsv.navigate(url);
+  }
+}

package/src/lib/auth/services/alert.service.ts

@@ -0,0 +1,47 @@
+import { Injectable, DestroyRef, inject } from '@angular/core';
+import { Router, NavigationStart } from '@angular/router';
+import { Observable, Subject } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { filter } from 'rxjs/operators';
+
+@Injectable()
+export class AlertService {
+  private router = inject(Router);
+  private destroyRef = inject(DestroyRef);
+
+  private subject = new Subject<{ type: string; text: string } | null>();
+  private keepAfterNavigationChange = false;
+
+  constructor() {
+    // clear alert message on route change
+    this.router.events
+      .pipe(
+        filter(event => event instanceof NavigationStart),
+        takeUntilDestroyed(this.destroyRef)
+      )
+      .subscribe(() => {
+        if (this.keepAfterNavigationChange) {
+          this.keepAfterNavigationChange = false;
+        } else {
+          this.subject.next(null);
+        }
+      });
+  }
+
+  /** Emits a success alert message; optionally persists it across the next navigation. */
+  public success(message: string, keepAfterNavigationChange = true) {
+    this.keepAfterNavigationChange = keepAfterNavigationChange;
+    this.subject.next({ type: 'success', text: message });
+  }
+
+  /** Emits an error alert message; optionally persists it across the next navigation. */
+  public error(message: string, keepAfterNavigationChange = true) {
+    this.keepAfterNavigationChange = keepAfterNavigationChange;
+    this.subject.next({ type: 'error', text: message });
+  }
+
+  /** Returns an Observable that emits alert messages (or null to clear). */
+  public getMessage(): Observable<any> {
+    return this.subject.asObservable();
+  }
+}

package/src/lib/auth/services/auth.service.ts

@@ -0,0 +1,28 @@
+import { inject } from '@angular/core';
+import {
+  Router,
+  CanActivateFn,
+  ActivatedRouteSnapshot,
+  RouterStateSnapshot,
+} from '@angular/router';
+import { GlobalService } from '../../services/global.service';
+
+export const authGuard: CanActivateFn = (
+  _route: ActivatedRouteSnapshot,
+  state: RouterStateSnapshot
+): boolean => {
+  const gsv = inject(GlobalService);
+  const router = inject(Router);
+
+  if (gsv.isLogged()) {
+    return true;
+  }
+  gsv.setActiveLink('/auth/login');
+  router.navigate(['/auth/login'], {
+    queryParams: { returnUrl: state.url },
+  });
+  return false;
+};
+
+/** @deprecated Use authGuard functional guard instead */
+export const AuthGuard = authGuard;

package/src/lib/auth/services/index.ts

@@ -0,0 +1,3 @@
+export * from './alert.service';
+export * from './user.service';
+export * from './auth.service';

package/src/lib/auth/services/user.service.spec.ts

@@ -0,0 +1,112 @@
+import { TestBed } from '@angular/core/testing';
+import { provideHttpClient } from '@angular/common/http';
+import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
+import { Router } from '@angular/router';
+import { Location } from '@angular/common';
+import { UserService } from './user.service';
+import { GlobalService } from '../../services/global.service';
+import { User } from '../models/index';
+import { NEWPORT_CONFIG } from '../../config';
+
+const TEST_CONFIG = { apiUrl: 'http://test/', logicFactory: () => {}, projectsInfoLoader: () => Promise.resolve({}) };
+
+describe('UserService', () => {
+  let svc: UserService;
+  let httpMock: HttpTestingController;
+  let gsv: GlobalService;
+
+  const routerStub = { navigateByUrl: jest.fn().mockResolvedValue(true) };
+  const locationStub = { normalize: (url: string) => url };
+
+  const expectedUrl = 'http://test/users';
+
+  beforeEach(() => {
+    localStorage.clear();
+    jest.clearAllMocks();
+    TestBed.configureTestingModule({
+      providers: [
+        UserService,
+        GlobalService,
+        { provide: Router, useValue: routerStub },
+        { provide: Location, useValue: locationStub },
+        { provide: NEWPORT_CONFIG, useValue: TEST_CONFIG },
+        provideHttpClient(),
+        provideHttpClientTesting(),
+      ],
+    });
+    svc = TestBed.inject(UserService);
+    httpMock = TestBed.inject(HttpTestingController);
+    gsv = TestBed.inject(GlobalService);
+  });
+
+  afterEach(() => httpMock.verify());
+
+  describe('put() — login', () => {
+    it('sends a PUT request to the users endpoint', () => {
+      const credentials = Object.assign(new User(), { login: 'mario', password: 'secret' });
+      const mockResponse: Partial<User> = { token: 'jwt-token', name: 'Mario' };
+
+      svc.put(credentials).subscribe(res => {
+        expect(res.token).toBe('jwt-token');
+      });
+
+      const req = httpMock.expectOne(expectedUrl);
+      expect(req.request.method).toBe('PUT');
+      req.flush(mockResponse);
+    });
+
+    it('includes the Authorization header from GlobalService.jwt()', () => {
+      const credentials = new User();
+      svc.put(credentials).subscribe();
+
+      const req = httpMock.expectOne(expectedUrl);
+      expect(req.request.headers.get('Content-Type')).toBe('application/json');
+      req.flush({});
+    });
+  });
+
+  describe('post() — register', () => {
+    it('sends a POST request to the users endpoint', () => {
+      const newUser = Object.assign(new User(), { login: 'mario', password: 'secret' });
+      const mockResponse: Partial<User> = { token: 'new-token', name: 'Mario' };
+
+      svc.post(newUser).subscribe(res => {
+        expect(res.token).toBe('new-token');
+      });
+
+      const req = httpMock.expectOne(expectedUrl);
+      expect(req.request.method).toBe('POST');
+      req.flush(mockResponse);
+    });
+  });
+
+  describe('error handling', () => {
+    it('maps a server 400 error to a typed Error observable', done => {
+      // post() has no retry, so exactly one request is made
+      svc.post(new User()).subscribe({
+        error: (err: Error) => {
+          expect(err).toBeInstanceOf(Error);
+          expect(err.message).toContain('400');
+          done();
+        },
+      });
+
+      httpMock.expectOne(expectedUrl).flush(
+        { message: 'Bad Request' },
+        { status: 400, statusText: 'Bad Request' }
+      );
+    });
+
+    it('maps a network error to a typed Error observable', done => {
+      svc.post(new User()).subscribe({
+        error: (err: Error) => {
+          expect(err).toBeInstanceOf(Error);
+          expect(err.message).toBeTruthy();
+          done();
+        },
+      });
+
+      httpMock.expectOne(expectedUrl).error(new ErrorEvent('error', { message: 'Network failure' }));
+    });
+  });
+});

package/src/lib/auth/services/user.service.ts

@@ -0,0 +1,47 @@
+import { Injectable, inject } from '@angular/core';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { Observable, throwError } from 'rxjs';
+import { GlobalService } from '../../services/global.service';
+
+import { User } from '../models/index';
+
+import { catchError, retry } from 'rxjs/operators';
+
+@Injectable()
+export class UserService {
+  private http = inject(HttpClient);
+  private globalService = inject(GlobalService);
+
+  private usersUrl: string = this.globalService.restService() + 'users';
+
+  public put(user: User): Observable<User> {
+    return this.http
+      .put<User>(this.usersUrl, user, this.globalService.jwt())
+      .pipe(retry(3), catchError(this.handleError));
+  }
+
+  public post(user: User): Observable<User> {
+    return this.http
+      .post<User>(this.usersUrl, user, this.globalService.jwt())
+      .pipe(catchError(this.handleError));
+  }
+
+  private handleError(error: HttpErrorResponse): Observable<never> {
+    let errorMessage = 'An error occurred';
+
+    if (error.error instanceof ErrorEvent) {
+      // Client-side or network error
+      errorMessage = `Client Error: ${error.error.message}`;
+      console.error('Client-side error:', error.error.message);
+    } else {
+      // Backend error
+      errorMessage = `Server Error (${error.status}): ${error.message}`;
+      console.error(
+        `Backend returned code ${error.status}, body:`,
+        error.error
+      );
+    }
+
+    return throwError(() => new Error(errorMessage));
+  }
+}

package/src/lib/common/card.component.html

@@ -0,0 +1,72 @@
+<div [@flipState]="flip()" class="card">
+  <div #front [hidden]="flip() === 'back'" class="flipfront">
+    <div>
+      <div class="card-body">
+        <div class="card-title fs-18px">
+          <span class="align-self-start" [ngClass]="stateClass()"> </span>
+          <span
+            class="bg-transparent truncate"
+            title="{{ msg?.getProjectDescription('foldertitle') }}">
+            {{ msg?.getProjectDescription('foldertitle') }}
+          </span>
+        </div>
+        @for (front of item().frontitems; track front) {
+          <div>
+            <div>{{ front.name_id }}</div>
+            <div id="{{ front.id }}">{{ front.value_id }}</div>
+          </div>
+        }
+      </div>
+      <div class="nopaddingtae">
+        <div class="p-1">
+          <div
+            title="{{ msg?.get('app.modify') }}"
+            class="btn bi bi-box-arrow-right"
+            (click)="activateitem(item().key_id)"></div>
+          <div
+            title="{{ msg?.get('app.minus') }}"
+            class="btn bi bi-patch-minus"
+            (click)="deleteitem(item().key_id)"></div>
+          <div
+            [hidden]="printHidden"
+            title="{{ msg?.get('app.print') }}"
+            class="btn bi bi-printer"
+            (click)="printitem(item().key_id)"></div>
+          <div
+            [hidden]="summaryHidden"
+            title="{{ msg?.get('app.back') }}"
+            class="btn bi bi-arrow-clockwise"
+            (click)="toggleFlip(item().key_id)"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div [hidden]="flip() === 'front'" class="flipback">
+    <div class="card">
+      <div class="card-body">
+        <h5 class="card-title">
+          <span class="align-self-start" [ngClass]="stateClass()"> </span>
+          <span
+            class="bg-transparent truncate"
+            title="{{ msg?.getProjectDescription('foldertitle') }}">
+            {{ msg?.getProjectDescription('foldertitle') }}
+          </span>
+        </h5>
+        @for (back of item().backitems; track back) {
+          <div>
+            <div id="{{ back.id }}">{{ back.name_id }}</div>
+            <div>{{ back.value_id }}</div>
+          </div>
+        }
+      </div>
+      <div class="nopaddingtae">
+        <div class="p-1">
+          <div
+            title="{{ msg?.get('app.front') }}"
+            class="btn bi bi-arrow-counterclockwise"
+            (click)="toggleFlip(item().key_id)"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>