Skip to content

Commit

Permalink
fix: zoneless RegisterFormComponent
Browse files Browse the repository at this point in the history
  • Loading branch information
@ralfaron
ralfaron committed Jun 21, 2024
1 parent 7bd3648 commit b236d5d
Show file tree
Hide file tree
Showing 3 changed files with 54 additions and 53 deletions.
4 changes: 2 additions & 2 deletions projects/aas-lib/src/lib/auth/register-form/register-form.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ <h5 class="modal-title text-info">
<button type="button" class="btn-close" (click)="cancel()" aria-label="Cancel"></button>
</div>
<div class="modal-body">
@for (message of messages; track message) {
@for (message of messages(); track message) {
<ngb-toast [autohide]="false" class="bg-danger w-100 mb-3">
<div class="d-flex">{{message}}</div>
</ngb-toast>
Expand All @@ -27,7 +27,7 @@ <h5 class="modal-title text-info">
</div>
<div class="form-floating mb-3">
<input type="text" class="form-control" id="intputRegisterName" [(ngModel)]="name" name="name"
[placeholder]="defaultName">
[placeholder]="defaultName()">
<label for="intputRegisterName" translate>LABEL_NAME</label>
</div>
@if (!passwordAsEMail) {
Expand Down
49 changes: 25 additions & 24 deletions projects/aas-lib/src/lib/auth/register-form/register-form.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
*****************************************************************************/

import isEmpty from 'lodash-es/isEmpty';
import { Component } from '@angular/core';
import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NgbActiveModal, NgbToast } from '@ng-bootstrap/ng-bootstrap';
import { isValidEMail, isValidPassword, stringFormat, UserProfile, getUserNameFromEMail } from 'common';
Expand All @@ -28,6 +28,7 @@ export interface RegisterFormResult {
styleUrls: ['./register-form.component.scss'],
standalone: true,
imports: [NgbToast, FormsModule, TranslateModule],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class RegisterFormComponent {
public constructor(
Expand All @@ -36,55 +37,55 @@ export class RegisterFormComponent {
private api: AuthApiService,
) {}

public userId = '';
public readonly userId = signal('');

public name = '';
public readonly name = signal('');

public defaultName = 'name';
public readonly defaultName = signal('name');

public password1 = '';
public readonly password1 = signal('');

public password2 = '';
public readonly password2 = signal('');

public stayLoggedIn = false;
public readonly stayLoggedIn = signal(false);

public passwordAsEMail = false;
public readonly passwordAsEMail = signal(false);

public messages: string[] = [];
public readonly messages = signal<string[]>([]);

public onInputEMail(): void {
this.defaultName = getUserNameFromEMail(this.userId);
this.defaultName.set(getUserNameFromEMail(this.userId()));
}

public submit(): void {
this.clearMessages();
if (isEmpty(this.userId)) {
if (isEmpty(this.userId())) {
this.pushMessage(stringFormat(this.translate.instant(ERRORS.EMAIL_REQUIRED)));
} else if (!isValidEMail(this.userId)) {
} else if (!isValidEMail(this.userId())) {
this.pushMessage(stringFormat(this.translate.instant(ERRORS.INVALID_EMAIL)));
} else if (!this.passwordAsEMail) {
if (isEmpty(this.password1)) {
} else if (!this.passwordAsEMail()) {
if (isEmpty(this.password1())) {
this.pushMessage(this.translate.instant(ERRORS.PASSWORD_REQUIRED));
} else if (!isValidPassword(this.password1)) {
} else if (!isValidPassword(this.password1())) {
this.pushMessage(this.translate.instant(ERRORS.INVALID_PASSWORD));
} else if (this.password1 !== this.password2) {
} else if (this.password1() !== this.password2()) {
this.pushMessage(this.translate.instant(ERRORS.PASSWORDS_NOT_EQUAL));
}
}

if (this.messages.length === 0) {
if (this.messages().length === 0) {
const profile: UserProfile = {
id: this.userId,
name: this.name ?? getUserNameFromEMail(this.userId),
password: this.password1,
id: this.userId(),
name: this.name() ?? getUserNameFromEMail(this.userId()),
password: this.password1(),
};

let result: RegisterFormResult | undefined;
this.api.register(profile).subscribe({
next: value => {
if (!this.passwordAsEMail) {
if (!this.passwordAsEMail()) {
result = {
stayLoggedIn: this.stayLoggedIn,
stayLoggedIn: this.stayLoggedIn(),
token: value.token,
};

Expand All @@ -101,10 +102,10 @@ export class RegisterFormComponent {
}

private pushMessage(message: string): void {
this.messages = [message];
this.messages.set([message]);
}

private clearMessages(): void {
this.messages = [];
this.messages.set([]);
}
}
54 changes: 27 additions & 27 deletions projects/aas-lib/src/test/auth/register-form.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,54 +55,54 @@ describe('RegisterFormComponent', () => {
spyOn(modal, 'close').and.callFake((...args) => expect(args[0]).toEqual(result));
spyOn(api, 'register').and.returnValue(of({ token }));

component.userId = 'john.doe@email.com';
component.name = 'John Doe';
component.password1 = '1234.Zyx';
component.password2 = '1234.Zyx';
component.stayLoggedIn = true;
component.userId.set('john.doe@email.com');
component.name.set('John Doe');
component.password1.set('1234.Zyx');
component.password2.set('1234.Zyx');
component.stayLoggedIn.set(true);
await component.submit();
expect(component.messages.length).toEqual(0);
expect(component.messages().length).toEqual(0);
expect(modal.close).toHaveBeenCalled();
}));

it('does not register a user with empty e-mail', fakeAsync(async () => {
component.userId = '';
component.passwordAsEMail = true;
component.userId.set('');
component.passwordAsEMail.set(true);
await component.submit();
expect(component.messages.length).toEqual(1);
expect(component.messages[0]).toEqual(ERRORS.EMAIL_REQUIRED);
expect(component.messages().length).toEqual(1);
expect(component.messages()[0]).toEqual(ERRORS.EMAIL_REQUIRED);
}));

it('does not register a user with invalid e-mail', fakeAsync(async () => {
component.userId = 'invalidEMail';
component.passwordAsEMail = true;
component.userId.set('invalidEMail');
component.passwordAsEMail.set(true);
await component.submit();
expect(component.messages.length).toEqual(1);
expect(component.messages[0]).toEqual(ERRORS.INVALID_EMAIL);
expect(component.messages().length).toEqual(1);
expect(component.messages()[0]).toEqual(ERRORS.INVALID_EMAIL);
}));

it('does not register a user with empty password', fakeAsync(async () => {
component.userId = 'john.doe@email.com';
component.password1 = '';
component.userId.set('john.doe@email.com');
component.password1.set('');
await component.submit();
expect(component.messages.length).toEqual(1);
expect(component.messages[0]).toEqual(ERRORS.PASSWORD_REQUIRED);
expect(component.messages().length).toEqual(1);
expect(component.messages()[0]).toEqual(ERRORS.PASSWORD_REQUIRED);
}));

it('does not register a user with invalid password', fakeAsync(async () => {
component.userId = 'john.doe@email.com';
component.password1 = '123';
component.userId.set('john.doe@email.com');
component.password1.set('123');
await component.submit();
expect(component.messages.length).toEqual(1);
expect(component.messages[0]).toEqual(ERRORS.INVALID_PASSWORD);
expect(component.messages().length).toEqual(1);
expect(component.messages()[0]).toEqual(ERRORS.INVALID_PASSWORD);
}));

it('does not register a user while invalid confirmed password', fakeAsync(async () => {
component.userId = 'john.doe@email.com';
component.password1 = '1234.Zyx';
component.password1 = 'Abcd.098';
component.userId.set('john.doe@email.com');
component.password1.set('1234.Zyx');
component.password1.set('Abcd.098');
await component.submit();
expect(component.messages.length).toEqual(1);
expect(component.messages[0]).toEqual(ERRORS.PASSWORDS_NOT_EQUAL);
expect(component.messages().length).toEqual(1);
expect(component.messages()[0]).toEqual(ERRORS.PASSWORDS_NOT_EQUAL);
}));
});

0 comments on commit b236d5d

Please sign in to comment.