Authentication Dialogs
Relevant source files
The following files were used as context for generating this wiki page:
- marketplace-frontend/src/app/components/sign-in-dialog/sign-in-dialog.component.ts
- marketplace-frontend/src/app/components/sign-up-dialog/sign-up-dialog.component.ts
- marketplace-frontend/src/app/components/sign-up-dialog/sign-up-dialog.service.ts
- marketplace-frontend/src/app/components/sign-in-dialog/sign-in-dialog.component.html
- marketplace-frontend/src/app/components/sign-up-dialog/sign-up-dialog.component.html
- marketplace-frontend/src/app/services/root/authorization.service.ts
- marketplace-backend/app/src/modules/auth/controllers/auth.controller.ts
Authentication Dialogs provide the user interface for identity management within the Marketplace application. This system manages user entry through two primary modal components: the SignInDialogComponent and the SignUpDialogComponent. These components collect user credentials and personal information to interact with the backend authentication services.
These dialogs integrate with the AuthorizationService for network requests and use Angular Material's MatDialog for presentation. They support standard credentials, social media links for navigation, and real-time form validation.
Sources: marketplace-frontend/src/app/components/sign-in-dialog/sign-in-dialog.component.ts, marketplace-frontend/src/app/components/sign-up-dialog/sign-up-dialog.component.ts
Sign-In Module
The SignInDialogComponent handles user authentication for existing accounts. It uses a FormGroup to capture the userName and password fields.
Logic and Data Flow
When a user submits the form, the component calls _authService.signIn(). Upon success, the service updates the customer information and authentication status, and displays a success toast message. If the authentication fails, the component displays an error message and remains open or closes based on the request finalization.
The following sequence diagram illustrates the sign-in process:
Key Form Fields and Validators
| Field | Type | Validators |
|---|---|---|
| userName | FormControl | Required, Pattern (USERNAME_VALIDATOR) |
| password | FormControl | Required, MinLength (6), MaxLength (20) |
Sources: marketplace-frontend/src/app/components/sign-in-dialog/sign-in-dialog.component.ts:74-86, marketplace-frontend/src/app/components/sign-in-dialog/sign-in-dialog.component.html:15-46
Sign-Up Module
The SignUpDialogComponent facilitates new user registration. Unlike the sign-in component, it uses a dedicated SignUpDialogService to encapsulate registration logic.
Registration Process
The registration form collects more extensive data, including the user's first name and email address. The backend controller creates a new customer record in the database, generates a JWT, and stores the session in a cookie and cache.
Sign-Up Form Components
The sign-up form includes specific character limits and validation patterns to ensure data integrity:
- First Name: Max 20 characters, follows
FIRST_NAME_VALIDATOR. - Username: Max 16 characters, follows
USERNAME_VALIDATOR. - Email: Validated via standard Angular
Validators.email. - Password: Enforced length between 6 and 20 characters with complex pattern requirements.
Sources: marketplace-frontend/src/app/components/sign-up-dialog/sign-up-dialog.component.ts:68-96, marketplace-frontend/src/app/components/sign-up-dialog/sign-up-dialog.component.html:26-92
Shared Interface and Interaction
The authentication dialogs share common UI behaviors, such as password visibility toggling and cross-navigation.
Dialog Switching
Users can navigate from the Sign-In dialog to the Sign-Up dialog via the _goToSignUp() method. This method closes the current SignInDialogComponent and uses DialogService to open the SignUpDialogComponent.
Sources: marketplace-frontend/src/app/components/sign-in-dialog/sign-in-dialog.component.ts:120-123, marketplace-frontend/src/app/components/sign-in-dialog/sign-in-dialog.component.html:64-70
Security and Feedback Features
- Password Toggle: Both components use an
_isPasswordHiddenboolean to switch the input type betweenpasswordandtext. - Visual Loading: The
showSpinneroperator andNgxSpinnerServiceprovide visual feedback during API calls. - Internationalization: All labels and messages are retrieved via
TranslateService(e.g.,sign-in-dialog.login-success).
Sources: marketplace-frontend/src/app/components/sign-in-dialog/sign-in-dialog.component.ts:46, 96, marketplace-frontend/src/app/components/sign-up-dialog/sign-up-dialog.component.ts:50, 106
Backend API Integration
The frontend dialogs interact with the following endpoints defined in AuthController:
| Endpoint | Method | DTO | Action |
|---|---|---|---|
/api/v1/auth/login | POST | LoginRequestDto | Validates credentials and returns JWT cookie. |
/api/v1/auth/register | POST | RegisterRequestDto | Creates user and initializes session. |
/api/v1/auth/logout | POST | N/A | Clears JWT cookie and removes user from cache. |
Sources: marketplace-backend/app/src/modules/auth/controllers/auth.controller.ts:54-80, marketplace-frontend/src/app/services/root/authorization.service.ts:46-60
Summary
Authentication Dialogs serve as the entry point for user interaction in the marketplace. By utilizing Angular Reactive Forms and centralized Authentication Services, the system ensures validated data entry and consistent session management across the frontend and backend.