Skip to content

Convert login form to signal form #32

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bhalperin merged 4 commits into from
Dec 30, 2025
Merged

Convert login form to signal form #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
dfe5535
Updated dependencies
bhalperin Dec 30, 2025
ce16d43
Fixed: access signal value correctly
bhalperin Dec 30, 2025
9421c16
Convert login form to signal form (formerly reactive form)
bhalperin Dec 30, 2025
5e5809f
Tab width 4 in editor config
bhalperin Dec 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .editorconfig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ root = true
charset = utf-8
indent_style = tab
indent_size = 4
tab_width = 4
insert_final_newline = true
trim_trailing_whitespace = true

Expand Down
6 changes: 3 additions & 3 deletions apps/ui/src/app/components/gh-users/gh-users.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,17 @@
<div class="p-2" data-testid="noUsersFound">No users found</div>
}
<div class="p-2">
<button ghTooltipTrigger class="btn btn-primary btn-sm" [disabled]="pseudoPageIndex() === 0" data-bs-toggle="tooltip" data-bs-title="Previous page" (click)="decrementPage()">
<button ghTooltipTrigger class="btn btn-primary btn-sm" [disabled]="!usersPageResource.value().length || pseudoPageIndex() === 0" data-bs-toggle="tooltip" data-bs-title="Previous page" (click)="decrementPage()">
<i class="fa-solid fa-chevron-left"></i>
</button>
</div>
<div class="p-2">
<button ghTooltipTrigger class="btn btn-primary btn-sm" [disabled]="!usersPageResource.value" data-bs-toggle="tooltip" data-bs-title="Next page" (click)="incrementPage()">
<button ghTooltipTrigger class="btn btn-primary btn-sm" [disabled]="!usersPageResource.value().length" data-bs-toggle="tooltip" data-bs-title="Next page" (click)="incrementPage()">
<i class="fa-solid fa-chevron-right"></i>
</button>
</div>
<div class="p-2">
<button ghTooltipTrigger class="btn btn-primary btn-sm" [disabled]="!usersPageResource.value" data-bs-toggle="tooltip" data-bs-title="Show all avatars" (click)="flipUsersToFront()">
<button ghTooltipTrigger class="btn btn-primary btn-sm" [disabled]="!usersPageResource.value().length" data-bs-toggle="tooltip" data-bs-title="Show all avatars" (click)="flipUsersToFront()">
<i class="fa-regular fa-eye"></i>
</button>
</div>
Expand Down
10 changes: 5 additions & 5 deletions apps/ui/src/app/components/login/login.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,17 @@
<div class="login-email-password card p-3">
<div class="card-body">
<h4 class="card-title pb-3">Login with email and password</h4>
<form [formGroup]="loginForm" (ngSubmit)="submit()">
<form>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="text" class="form-control" formControlName="email" placeholder="Email" data-testid="email">
<input type="text" class="form-control" [field]="loginForm.email" placeholder="Email" data-testid="email" />
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password" formControlName="password" placeholder="Password" data-testid="password">
<input type="password" class="form-control" id="password" [field]="loginForm.password" placeholder="Password" data-testid="password" />
</div>
<button type="submit" class="btn btn-primary" id="submitUserPassword" [disabled]="!loginForm.valid">Submit</button>
@if (loading()) {
<button type="button" class="btn btn-primary" id="submitUserPassword" [disabled]="!loginForm().valid() || loginForm().submitting()" (click)="submitForm()">Submit</button>
@if (loginForm().submitting()) {
<div class="spinner-border spinner-border-sm ms-4" role="status" data-testid="spinner"></div>
}
</form>
Expand Down
56 changes: 33 additions & 23 deletions apps/ui/src/app/components/login/login.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,19 @@
import { CommonModule } from '@angular/common';
import { Component, inject, OnInit, signal } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import { email, Field, form, required, submit } from '@angular/forms/signals';
import { AppRouter } from 'fw-extensions/app-router';
import { firstValueFrom } from 'rxjs';
import { AuthService } from 'services/auth.service';

type LoginData = {
email: string;
password: string;
};

@Component({
selector: 'gh-login',
imports: [CommonModule, ReactiveFormsModule],
imports: [CommonModule, ReactiveFormsModule, Field],
templateUrl: './login.component.html',
styleUrl: './login.component.scss',
host: {
Expand All @@ -17,14 +23,18 @@ import { AuthService } from 'services/auth.service';
export class LoginComponent implements OnInit {
readonly #authService = inject(AuthService);
readonly #router = inject(AppRouter);
loginForm = new FormGroup({
email: new FormControl('', Validators.required),
password: new FormControl('', Validators.required),
readonly loginModel = signal<LoginData>({
email: '',
password: '',
});
protected loginForm = form(this.loginModel, (form) => {
required(form.email);
required(form.password);
email(form.email);
});
protected serverError = this.#authService.serverError;
protected connectionError = signal(false);
protected validCredentials = signal(true);
protected loading = signal(false);

ngOnInit(): void {
this.#authService.logout();
Expand All @@ -34,27 +44,27 @@ export class LoginComponent implements OnInit {
return firstValueFrom(this.#authService.isConnected());
}

async submit() {
console.log(this.loginForm.value);
this.connectionError.set(false);
this.validCredentials.set(true);
async submitForm() {
await submit(this.loginForm, async (form) => {
console.log(this.loginForm().value());
this.connectionError.set(false);
this.validCredentials.set(true);

if (await this.#isConnected()) {
const login$ = this.#authService.login(this.loginForm.value.email as string, this.loginForm.value.password as string);
if (await this.#isConnected()) {
const login$ = this.#authService.login(form.email().value(), form.password().value());

this.validCredentials.set(true);
this.loading.set(true);
this.validCredentials.set(true);

await firstValueFrom(login$);
this.loading.set(false);
if (this.#authService.authenticated) {
await this.#router.navigateToUsers();
} else if (!this.serverError()) {
this.validCredentials.set(false);
await firstValueFrom(login$);
if (this.#authService.authenticated) {
await this.#router.navigateToUsers();
} else if (!this.serverError()) {
this.validCredentials.set(false);
}
} else {
this.connectionError.set(true);
}
} else {
this.connectionError.set(true);
}
});
}

async goToGoogleLogin() {
Expand Down
22 changes: 11 additions & 11 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,15 +40,15 @@
"@angular/router": "^21.0.6",
"@fortawesome/fontawesome-free": "^7.1.0",
"@nestjs/axios": "^4.0.1",
"@nestjs/common": "^11.1.10",
"@nestjs/common": "^11.1.11",
"@nestjs/config": "^4.0.2",
"@nestjs/core": "^11.1.10",
"@nestjs/core": "^11.1.11",
"@nestjs/jwt": "^11.0.2",
"@nestjs/microservices": "^11.1.10",
"@nestjs/microservices": "^11.1.11",
"@nestjs/passport": "^11.0.5",
"@nestjs/platform-express": "^11.1.10",
"@nestjs/platform-express": "^11.1.11",
"@nestjs/swagger": "^11.2.3",
"@ngrx/signals": "^21.0.0",
"@ngrx/signals": "^21.0.1",
"@prisma/adapter-pg": "^7.2.0",
"@prisma/client": "^7.2.0",
"axios": "^1.13.2",
Expand Down Expand Up @@ -86,7 +86,7 @@
"@eslint/eslintrc": "^3.3.3",
"@eslint/js": "^9.39.2",
"@nestjs/schematics": "^11.0.9",
"@nestjs/testing": "^11.1.10",
"@nestjs/testing": "^11.1.11",
"@nx/angular": "22.3.3",
"@nx/devkit": "22.3.3",
"@nx/esbuild": "22.3.3",
Expand All @@ -105,8 +105,8 @@
"@schematics/angular": "^21.0.4",
"@svgr/webpack": "^8.1.0",
"@swc-node/register": "^1.11.1",
"@swc/core": "^1.15.7",
"@swc/helpers": "~0.5.17",
"@swc/core": "^1.15.8",
"@swc/helpers": "~0.5.18",
"@types/bcrypt": "^6.0.0",
"@types/bootstrap": "^5.2.10",
"@types/cookie-parser": "1.4.10",
Expand All @@ -118,9 +118,9 @@
"@types/passport-jwt": "^4.0.1",
"@types/passport-local": "^1.0.38",
"@types/pg": "^8.16.0",
"@typescript-eslint/eslint-plugin": "^8.50.0",
"@typescript-eslint/parser": "^8.50.0",
"copy-files-from-to": "^3.13.0",
"@typescript-eslint/eslint-plugin": "^8.51.0",
"@typescript-eslint/parser": "^8.51.0",
"copy-files-from-to": "^4.0.0",
"esbuild": "^0.27.2",
"eslint": "^9.39.2",
"eslint-config-prettier": "^10.1.8",
Expand Down
Loading
Loading