Register

todo-app-frontend/angular.json

@@ -30,8 +30,8 @@
                             "src/assets"
                         ],
                         "styles": [
-                          "@angular/material/prebuilt-themes/purple-green.css",
-                          "src/styles.scss"
+                            "@angular/material/prebuilt-themes/purple-green.css",
+                            "src/styles.scss"
                         ],
                         "scripts": []
                     },
@@ -94,8 +94,8 @@
                             "src/assets"
                         ],
                         "styles": [
-                          "@angular/material/prebuilt-themes/purple-green.css",
-                          "src/styles.scss"
+                            "@angular/material/prebuilt-themes/purple-green.css",
+                            "src/styles.scss"
                         ],
                         "scripts": []
                     }

todo-app-frontend/package.json

@@ -1,42 +1,42 @@
 {
-  "name": "todo-app-frontend",
-  "version": "0.0.0",
-  "scripts": {
-    "ng": "ng",
-    "start": "ng serve",
-    "build": "ng build",
-    "watch": "ng build --watch --configuration development",
-    "test": "ng test"
-  },
-  "private": true,
-  "dependencies": {
-    "@angular/animations": "^16.2.0",
-    "@angular/cdk": "^16.2.8",
-    "@angular/common": "^16.2.0",
-    "@angular/compiler": "^16.2.0",
-    "@angular/core": "^16.2.0",
-    "@angular/forms": "^16.2.0",
-    "@angular/material": "^16.2.8",
-    "@angular/platform-browser": "^16.2.0",
-    "@angular/platform-browser-dynamic": "^16.2.0",
-    "@angular/router": "^16.2.0",
-    "rxjs": "~7.8.0",
-    "tslib": "^2.3.0",
-    "zone.js": "~0.13.0"
-  },
-  "devDependencies": {
-    "@angular-devkit/build-angular": "^16.2.6",
-    "@angular/cli": "^16.2.6",
-    "@angular/compiler-cli": "^16.2.0",
-    "@types/jasmine": "~4.3.0",
-    "autoprefixer": "^10.4.16",
-    "jasmine-core": "~4.6.0",
-    "karma": "~6.4.0",
-    "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage": "~2.2.0",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.1.0",
-    "scss": "^0.2.4",
-    "typescript": "~5.1.3"
-  }
+    "name": "todo-app-frontend",
+    "version": "0.0.0",
+    "scripts": {
+        "ng": "ng",
+        "start": "ng serve",
+        "build": "ng build",
+        "watch": "ng build --watch --configuration development",
+        "test": "ng test"
+    },
+    "private": true,
+    "dependencies": {
+        "@angular/animations": "^16.2.0",
+        "@angular/cdk": "^16.2.8",
+        "@angular/common": "^16.2.0",
+        "@angular/compiler": "^16.2.0",
+        "@angular/core": "^16.2.0",
+        "@angular/forms": "^16.2.0",
+        "@angular/material": "^16.2.8",
+        "@angular/platform-browser": "^16.2.0",
+        "@angular/platform-browser-dynamic": "^16.2.0",
+        "@angular/router": "^16.2.0",
+        "rxjs": "~7.8.0",
+        "tslib": "^2.3.0",
+        "zone.js": "~0.13.0"
+    },
+    "devDependencies": {
+        "@angular-devkit/build-angular": "^16.2.6",
+        "@angular/cli": "^16.2.6",
+        "@angular/compiler-cli": "^16.2.0",
+        "@types/jasmine": "~4.3.0",
+        "autoprefixer": "^10.4.16",
+        "jasmine-core": "~4.6.0",
+        "karma": "~6.4.0",
+        "karma-chrome-launcher": "~3.2.0",
+        "karma-coverage": "~2.2.0",
+        "karma-jasmine": "~5.1.0",
+        "karma-jasmine-html-reporter": "~2.1.0",
+        "scss": "^0.2.4",
+        "typescript": "~5.1.3"
+    }
 }

todo-app-frontend/src/app/core/enums/RouterPaths.ts

@@ -1,4 +1,7 @@
 export enum RouterPaths {
     CURRENT_PATH = "",
     LOGIN_AUTH_PATH = "login",
+    REGISTER_AUTH_PATH = "register",
+    REGISTER_FULL_PATH = "auth/register",
+    LOGIN_FULL_PATH = "auth/login",
 }

todo-app-frontend/src/app/core/validators/form-validator.service.ts

@@ -0,0 +1,83 @@
+import { Injectable } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, Validators } from "@angular/forms";
+import { FormValidation } from "@enums/FormValidation";
+import { PasswordValidatorService } from "@core/validators/password-validator.service";
+
+@Injectable({
+    providedIn: 'root'
+})
+export class FormValidatorService {
+    readonly nameControl: FormControl = new FormControl(FormValidation.NAME_VALUE,
+        [
+            Validators.required,
+            Validators.maxLength(FormValidation.NAME_MAX_LENGTH),
+            Validators.minLength(FormValidation.NAME_MIN_LENGTH),
+            Validators.pattern(FormValidation.NAME_PATTERN)
+        ]
+    );
+
+    readonly surnameControl: FormControl = new FormControl(FormValidation.NAME_VALUE,
+        [
+            Validators.required,
+            Validators.maxLength(FormValidation.NAME_MAX_LENGTH),
+            Validators.minLength(FormValidation.NAME_MIN_LENGTH),
+            Validators.pattern(FormValidation.NAME_PATTERN)
+        ]
+    );
+
+    readonly emailControl: FormControl = new FormControl(
+        FormValidation.EMAIL_VALUE,
+        [
+            Validators.required,
+            Validators.pattern(FormValidation.EMAIL_PATTERN)
+        ]
+    );
+
+    readonly passwordControl: FormControl = new FormControl(
+        FormValidation.PASSWORD_VALUE,
+        [
+            Validators.required,
+            Validators.pattern(FormValidation.PASSWORD_PATTERN),
+        ]
+    );
+
+    readonly repeatPasswordControl: FormControl = new FormControl(
+        FormValidation.PASSWORD_VALUE,
+        [
+            Validators.required,
+            Validators.pattern(FormValidation.PASSWORD_PATTERN),
+        ]
+    );
+
+    private readonly passwordName: string = "userPassword";
+    private readonly repeatPassword: string = "repeatPassword";
+
+    constructor(private formBuilder: FormBuilder,
+                private passwordValidator: PasswordValidatorService) {
+    }
+
+    buildFormGroup(): FormGroup {
+        return this.formBuilder.group({
+            email: this.emailControl,
+            password: this.passwordControl
+        });
+    }
+
+    buildRegisterFormGroup(): FormGroup {
+        return this.formBuilder.group({
+            nameInputs: this.formBuilder.group({
+                firstName: this.nameControl,
+                lastName: this.surnameControl
+            }),
+            email: this.emailControl,
+            passwordInputs: this.formBuilder.group({
+                    userPassword: this.passwordControl,
+                    repeatPassword: this.repeatPasswordControl
+                },
+                {
+                    validator: this.passwordValidator.passwordMatchValidator(this.passwordName, this.repeatPassword)
+                }
+            )
+        });
+    }
+}

todo-app-frontend/src/app/core/validators/password-validator.service.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { AbstractControl, ValidatorFn } from "@angular/forms";
+
+@Injectable({
+    providedIn: 'root'
+})
+export class PasswordValidatorService {
+    constructor() {
+    }
+
+    passwordMatchValidator(passwordFieldName: string, repeatFieldName: string): ValidatorFn {
+        return (control: AbstractControl): { [key: string]: any } | null => {
+            const userPassword: AbstractControl<any, any> | null = control.get(passwordFieldName);
+            const repeatPassword: AbstractControl<any, any> | null = control.get(repeatFieldName);
+
+            if (!userPassword || !repeatPassword) {
+                return null;
+            }
+            return userPassword.value !== repeatPassword.value ? {'passwordMatch': true} : null;
+        };
+    }
+}

todo-app-frontend/src/app/pages/auth/auth-routing.module.ts

@@ -12,11 +12,17 @@ const routes: Routes = [
         path: RouterPaths.LOGIN_AUTH_PATH,
         loadChildren: () => import('./login/login.module')
             .then(module => module.LoginModule),
+    },
+    {
+        path: RouterPaths.REGISTER_AUTH_PATH,
+        loadChildren: () => import("./register/register.module")
+            .then(module => module.RegisterModule)
     }
 ];
 
 @NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule]
 })
-export class AuthRoutingModule { }
+export class AuthRoutingModule {
+}

todo-app-frontend/src/app/pages/auth/auth-utils/auth-utils.module.ts

@@ -5,17 +5,19 @@ import { EmailFieldComponent } from './email-field/email-field.component';
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { MatFormFieldModule } from "@angular/material/form-field";
 import { MatInputModule } from "@angular/material/input";
-
+import { NameFieldComponent } from './name-field/name-field.component';
 
 
 @NgModule({
     declarations: [
         PasswordFieldComponent,
-        EmailFieldComponent
+        EmailFieldComponent,
+        NameFieldComponent
     ],
     exports: [
         EmailFieldComponent,
-        PasswordFieldComponent
+        PasswordFieldComponent,
+        NameFieldComponent
     ],
     imports: [
         CommonModule,
@@ -25,4 +27,5 @@ import { MatInputModule } from "@angular/material/input";
         ReactiveFormsModule
     ]
 })
-export class AuthUtilsModule { }
+export class AuthUtilsModule {
+}

todo-app-frontend/src/app/pages/auth/auth-utils/email-field/email-field.component.html

@@ -1,8 +1,8 @@
 <mat-form-field class="full-width">
     <mat-label>Email</mat-label>
 
-    <input type="email" matInput [formControl]="emailControl"
-           placeholder="name@example.com">
+    <input [formControl]="emailControl" matInput placeholder="name@example.com"
+           type="email">
 
     <mat-error *ngIf="emailControl.hasError('pattern')">
         Please enter a valid email address

todo-app-frontend/src/app/pages/auth/auth-utils/name-field/name-field.component.html

@@ -0,0 +1,14 @@
+<mat-form-field class="full-width">
+    <mat-label>{{ nameLabel }}</mat-label>
+
+    <input [formControl]="nameControl" matInput placeholder="Your {{ nameLabel }}"
+           type="text">
+
+    <mat-error *ngIf="nameControl.hasError('pattern')">
+        Please enter a valid {{ nameLabel }}
+    </mat-error>
+
+    <mat-error *ngIf="nameControl.hasError('required')">
+        {{ nameLabel }} is <strong>required</strong>
+    </mat-error>
+</mat-form-field>

todo-app-frontend/src/app/pages/auth/auth-utils/name-field/name-field.component.scss

@@ -0,0 +1,4 @@
+.full-width {
+    width: 100%;
+    margin: 5px;
+}

todo-app-frontend/src/app/pages/auth/auth-utils/name-field/name-field.component.ts

@@ -0,0 +1,39 @@
+import { Component, Input } from '@angular/core';
+import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from "@angular/forms";
+
+@Component({
+    selector: 'app-name-field',
+    templateUrl: './name-field.component.html',
+    styleUrls: ['./name-field.component.scss'],
+    providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: NameFieldComponent,
+            multi: true,
+        }
+    ]
+})
+export class NameFieldComponent implements ControlValueAccessor {
+    @Input() nameLabel: string = "";
+    @Input() nameControl !: FormControl;
+
+    constructor() {
+    }
+
+    registerOnChange(onChange: any): void {
+        this.onChange = onChange;
+    }
+
+    registerOnTouched(onTouched: any): void {
+        this.onTouched = onTouched;
+    }
+
+    writeValue(obj: any): void {
+    }
+
+    private onChange = () => {
+    };
+
+    private onTouched = () => {
+    };
+}

todo-app-frontend/src/app/pages/auth/auth-utils/password-field/password-field.component.html

@@ -1,8 +1,8 @@
 <mat-form-field class="full-width">
-    <mat-label>Password</mat-label>
+    <mat-label>{{ passwordLabel }}</mat-label>
 
-    <input type="password" matInput [formControl]="passwordControl"
-           placeholder="Your password">
+    <input [formControl]="passwordControl" matInput placeholder="{{ passwordPlaceholder }}"
+           type="password">
 
     <mat-error *ngIf="passwordControl.hasError('pattern')">
         Please enter a valid password address

todo-app-frontend/src/app/pages/auth/auth-utils/password-field/password-field.component.ts

@@ -15,6 +15,7 @@ import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from "@angular/f
 })
 export class PasswordFieldComponent implements ControlValueAccessor {
     @Input() passwordLabel: string = "";
+    @Input() passwordPlaceholder: string = "";
     @Input() passwordControl!: FormControl;
 
     registerOnChange(onChange: any): void {