transactions

front/v2/src/app/views/register-view/register-view.ts

@@ -1,11 +1,139 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { emailValidator } from '../../../utils/validators/emailValidator';
+import { SigningMethods, userModel } from '../../../models/userModel';
+import { emailPasswordDistinctValidator } from '../../../utils/validators/distinctEmailPasswordValidator';
+import { from } from 'rxjs';
+import { Router } from '@angular/router';
+import { userService } from '../../services/userService/userService';
 
 @Component({
   selector: 'register-view',
-  imports: [],
+  imports: [ReactiveFormsModule],
   templateUrl: './register-view.html',
-  styleUrl: './register-view.scss'
+  styleUrl: './register-view.scss',
 })
 export class RegisterView {
+  private userService = inject(userService);
+  private formBuilder = inject(FormBuilder);
+  private router = inject(Router);
+  form = this.formBuilder.group(
+    {
+      name: ['', [Validators.required]],
+      email: ['', [Validators.required, emailValidator]],
+      password: ['', [Validators.required, Validators.minLength(6)]],
+      confirmPassword: [''],
+      // preferredSigninMethod: [SigningMethods.Password],
+      // profilePicture: [null],
+      // bio: ['', [Validators.maxLength(500)]],
+      // socialMedia: this.formBuilder.group({
+      //   facebook: [''],
+      //   twitter: [''],
+      //   instagram: [''],
+      // }),
+      // termsAccepted: [false, [Validators.requiredTrue]],
+    },
+    { validators: emailPasswordDistinctValidator }
+  );
 
+  get name() {
+    return this.form.get('name');
+  }
+
+  get email() {
+    return this.form.get('email');
+  }
+
+  get password() {
+    return this.form.get('password');
+  }
+
+  get confirmPassword() {
+    return this.form.get('confirmPassword');
+  }
+
+  get bio() {
+    return this.form.get('bio');
+  }
+
+  get socialMedia() {
+    return this.form.get('socialMedia');
+  }
+
+  get profilePicture() {
+    return this.form.get('profilePicture');
+  }
+
+  get preferredSigninMethod() {
+    return this.form.get('preferredSigninMethod');
+  }
+
+  // getTermsAccepted() {
+  //   return this.form.value.termsAccepted;
+  // }
+
+  onSubmit() {
+    if (this.form.valid) {
+      const email = this.form.value.email;
+      const password = this.form.value.password;
+      const name = this.form.value.name;
+      from(this.userService.register(name, email, password)).subscribe({
+        next: (user) => {
+          this.router.navigate(['/']);
+        },
+        error: (error) => {
+          console.error('Register error:', error);
+        },
+      });
+    }
+  }
+
+  hasNameContent(): boolean {
+    const nameValue = this.name?.value;
+    return nameValue ? nameValue.trim().length > 0 : false;
+  }
+
+  hasEmailContent(): boolean {
+    const emailValue = this.email?.value;
+    return emailValue ? emailValue.trim().length > 0 : false;
+  }
+
+  hasPasswordContent(): boolean {
+    const passwordValue = this.password?.value;
+    return passwordValue ? passwordValue.trim().length > 0 : false;
+  }
+
+  hasConfirmPasswordContent(): boolean {
+    const confirmPasswordValue = this.confirmPassword?.value;
+    return confirmPasswordValue
+      ? confirmPasswordValue.trim().length > 0
+      : false;
+  }
+
+  emailHasErrors(): boolean {
+    const emailControl = this.email;
+    return emailControl
+      ? this.hasEmailContent() &&
+          emailControl.invalid &&
+          (emailControl.dirty || emailControl.touched)
+      : false;
+  }
+
+  passwordHasErrors(): boolean {
+    const passwordControl = this.password;
+    return passwordControl
+      ? this.hasPasswordContent() &&
+          passwordControl.invalid &&
+          (passwordControl.dirty || passwordControl.touched)
+      : false;
+  }
+
+  confirmPasswordHasErrors(): boolean {
+    const confirmPasswordControl = this.confirmPassword;
+    return confirmPasswordControl
+      ? this.hasConfirmPasswordContent() &&
+          confirmPasswordControl.invalid &&
+          (confirmPasswordControl.dirty || confirmPasswordControl.touched)
+      : false;
+  }
 }