//html
<div class="register-wrapper d-flex justify-content-center align-items-center">
<div class="card box">
<div class="card-header text-center">
<h4 class="card-title">Sign-up</h4>
</div>
<form class="form" [formGroup]="registerFormGroup" (ngSubmit)="RegisterUser()">
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter your Name" formControlName="name">
<div *ngIf="registerFormGroup.controls['name'].invalid && (registerFormGroup.controls['name'].dirty || registerFormGroup.controls['name'].touched)" class="text-danger">
<div *ngIf="registerFormGroup.controls['name'].errors?.['required']">Name is required.</div>
<div *ngIf="registerFormGroup.controls['name'].errors?.['minlength']">Name must be at least 2 characters long.</div>
<div *ngIf="registerFormGroup.controls['name'].errors?.['maxlength']">Name must be at most 20 characters long.</div>
</div>
</div>
<div class="form-group">
<label for="surname" class="form-label">Surname</label>
<input type="text" class="form-control" id="surname" placeholder="Enter your Surname" formControlName="surname">
<div *ngIf="registerFormGroup.controls['surname'].invalid && (registerFormGroup.controls['surname'].dirty || registerFormGroup.controls['surname'].touched)" class="text-danger">
<div *ngIf="registerFormGroup.controls['surname'].errors?.['required']">Surname is required.</div>
<div *ngIf="registerFormGroup.controls['surname'].errors?.['minlength']">Surname must be at least 2 characters long.</div>
<div *ngIf="registerFormGroup.controls['surname'].errors?.['maxlength']">Surname must be at most 20 characters long.</div>
</div>
</div>
<div class="form-group">
<label for="email" class="form-label">Email Address</label>
<input type="email" class="form-control" id="email" placeholder="Enter a valid Email address" formControlName="email">
<div *ngIf="registerFormGroup.controls['email'].invalid && (registerFormGroup.controls['email'].dirty || registerFormGroup.controls['email'].touched)" class="text-danger">
<div *ngIf="registerFormGroup.controls['email'].errors?.['required']">Email is required.</div>
<div *ngIf="registerFormGroup.controls['email'].errors?.['email']">Email is invalid.</div>
</div>
</div>
<div class="form-group">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password" placeholder="Enter between 8 to 15 characters" formControlName="password">
<div *ngIf="registerFormGroup.controls['password'].invalid && (registerFormGroup.controls['password'].dirty || registerFormGroup.controls['password'].touched)" class="text-danger">
<div *ngIf="registerFormGroup.controls['password'].errors?.['required']">Password is required.</div>
<div *ngIf="registerFormGroup.controls['password'].errors?.['minlength']">Password must be at least 8 characters.</div>
<div *ngIf="registerFormGroup.controls['password'].errors?.['maxlength']">Password cannot be more than 15 characters.</div>
</div>
</div>
<div class="form-group">
<label for="PhoneNumber" class="form-label">Phone Number</label>
<input type="text" class="form-control" id="PhoneNumber" placeholder="Enter your Phone Number" formControlName="PhoneNumber">
<div *ngIf="registerFormGroup.controls['PhoneNumber'].invalid && (registerFormGroup.controls['PhoneNumber'].dirty || registerFormGroup.controls['PhoneNumber'].touched)" class="text-danger">
<div *ngIf="registerFormGroup.controls['PhoneNumber'].errors?.['required']">Phone Number is required.</div>
<div *ngIf="registerFormGroup.controls['PhoneNumber'].errors?.['minlength']">Phone Number must be 10 digits.</div>
<div *ngIf="registerFormGroup.controls['PhoneNumber'].errors?.['maxlength']">Phone Number must be 10 digits.</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="Date_of_Birth" class="form-label">Date of Birth</label>
<input type="date" class="form-control" id="Date_of_Birth" placeholder="Enter your Date of Birth" formControlName="Date_of_Birth">
<div *ngIf="registerFormGroup.controls['Date_of_Birth'].invalid && (registerFormGroup.controls['Date_of_Birth'].dirty || registerFormGroup.controls['Date_of_Birth'].touched)" class="text-danger">
<div *ngIf="registerFormGroup.controls['Date_of_Birth'].errors?.['required']">Date of Birth is required.</div>
<div *ngIf="registerFormGroup.controls['Date_of_Birth'].errors?.['futureDate']">Date of birth cannot be a future date.</div>
<div *ngIf="registerFormGroup.controls['Date_of_Birth'].errors?.['olderThan100']">Date of birth cannot be more than 100 years ago.</div>
<div *ngIf="registerFormGroup.controls['Date_of_Birth'].errors?.['futureYear']">User cannot be younger than 16.</div>
</div>
</div>
<div class="form-group">
<label for="Id_Number" class="form-label">ID Number</label>
<input type="text" class="form-control" id="Id_Number" placeholder="Enter your ID Number" formControlName="Id_Number">
<div *ngIf="registerFormGroup.controls['Id_Number'].invalid && (registerFormGroup.controls['Id_Number'].dirty || registerFormGroup.controls['Id_Number'].touched)" class="text-danger">
<div *ngIf="registerFormGroup.controls['Id_Number'].errors?.['required']">ID Number is required.</div>
<div *ngIf="registerFormGroup.controls['Id_Number'].errors?.['minlength']">ID Number must be 13 digits.</div>
<div *ngIf="registerFormGroup.controls['Id_Number'].errors?.['maxlength']">ID Number must be 13 digits.</div>
</div>
</div>
<div class="form-group">
<label for="Physical_Address" class="form-label">Physical Address</label>
<input type="text" class="form-control" id="Physical_Address" placeholder="Enter your Physical Address" formControlName="Physical_Address">
<div *ngIf="registerFormGroup.controls['Physical_Address'].invalid && (registerFormGroup.controls['Physical_Address'].dirty || registerFormGroup.controls['Physical_Address'].touched)" class="text-danger">
<div *ngIf="registerFormGroup.controls['Physical_Address'].errors?.['required']">Physical Address is required.</div>
<div *ngIf="registerFormGroup.controls['Physical_Address'].errors?.['minlength']">Physical Address must be at least 7 characters long.</div>
<div *ngIf="registerFormGroup.controls['Physical_Address'].errors?.['maxlength']">Physical Address must be at most 100 characters long.</div>
</div>
</div>
<div class="form-group">
<label for="Photo" class="form-label">Photo</label>
<input type="file" class="form-control" id="Photo" (change)="onFileSelected($event)">
<div *ngIf="registerFormGroup.controls['Photo'].invalid && (registerFormGroup.controls['Photo'].dirty || registerFormGroup.controls['Photo'].touched)" class="text-danger">
<div *ngIf="registerFormGroup.controls['Photo'].errors?.['required']">Photo is required.</div>
</div>
</div>
<div class="form-group">
<label for="User_Type_ID" class="form-label">User Type</label>
<select class="form-control" id="User_Type_ID" formControlName="User_Type_ID">
<option value="1">Owner</option>
<option value="2">Employee</option>
<option value="3">Member</option>
</select>
<div *ngIf="registerFormGroup.controls['User_Type_ID'].invalid && (registerFormGroup.controls['User_Type_ID'].dirty || registerFormGroup.controls['User_Type_ID'].touched)" class="text-danger">
<div *ngIf="registerFormGroup.controls['User_Type_ID'].errors?.['required']">User Type is required.</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-footer d-flex justify-content-between">
<button type="submit" class="btn btn-primary">Sign-up</button>
<button type="button" class="btn btn-secondary" (click)="resetForm()">Cancel</button>
</div>
</form>
</div>
</div>
//ts
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { MatSnackBar } from '@angular/material/snack-bar';
import { UserService } from '../../Services/userprofile.service';
import { FlexLayoutModule } from '@angular/flex-layout';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-register',
standalone: true,
imports: [ReactiveFormsModule, CommonModule, FlexLayoutModule],
templateUrl: './register.component.html',
styleUrls: ['./register.component.css']
})
export class RegisterComponent {
submitted = false;
registerFormGroup: FormGroup;
selectedFile: File | null = null;
constructor(
private router: Router,
private userService: UserService,
private fb: FormBuilder,
private snackBar: MatSnackBar
) {
this.registerFormGroup = this.fb.group({
// email: ['', [Validators.required, Validators.email, Validators.pattern(/^[a-z0-9._%+-]+@gmail\.com$/), Validators.minLength(3), Validators.maxLength(50)]],
email: ['', [Validators.required, Validators.email]],
password: ['', [Validators.required, Validators.minLength(8), Validators.maxLength(15)]],
name: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(20)]],
surname: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(20)]],
// PhoneNumber: ['', [Validators.required, Validators.pattern(/^0\d{9}$/)]],
PhoneNumber: ['', [Validators.required, Validators.minLength(10), Validators.maxLength(10)]],
Date_of_Birth: ['', [Validators.required, this.validateDateOfBirth]],
// Id_Number: ['', [Validators.required, Validators.pattern(/^\d{2}(0[1-9]|1[0-2])(0[1-9]|[12][0-9]|3[01])\d{7}$/)]],
Id_Number: ['', [Validators.required, Validators.minLength(13), Validators.maxLength(13)]],
Physical_Address: ['', [Validators.required, Validators.minLength(7), Validators.maxLength(100)]],
Photo: ['', Validators.required],
// User_Status_ID: [1, [Validators.required, Validators.min(1), Validators.max(2)]],
// User_Type_ID: ['', [Validators.required, Validators.min(1), Validators.max(3)]]
User_Status_ID: [1, Validators.required],
User_Type_ID: ['', Validators.required]
});
}
ngOnInit() { }
validateDateOfBirth(control: any): { [key: string]: any } | null {
const selectedDate = new Date(control.value);
const currentDate = new Date();
const minDate = new Date(currentDate.getFullYear() - 100, currentDate.getMonth(), currentDate.getDate());
const maxDate = new Date(currentDate.getFullYear() - 16, currentDate.getMonth(), currentDate.getDate());
if (selectedDate > currentDate) {
return { 'futureDate': true };
}
if (selectedDate < minDate) {
return { 'olderThan100': true };
}
if (selectedDate > maxDate) {
return { 'futureYear': true };
}
return null;
}
onFileSelected(event: any) {
const file = event.target.files[0];
if (file) {
this.selectedFile = file;
this.registerFormGroup.patchValue({ Photo: file });
} else {
this.selectedFile = null;
}
}
RegisterUser() {
this.submitted = true;
if (this.registerFormGroup.valid && this.selectedFile) {
console.log('Form is valid');
console.log('Selected file:', this.selectedFile);
const emailLowerCase = this.registerFormGroup.value.email.toLowerCase();
this.registerFormGroup.patchValue({ email: emailLowerCase });
const formData: FormData = new FormData();
formData.append('name', this.registerFormGroup.value.name);
formData.append('surname', this.registerFormGroup.value.surname);
formData.append('email', this.registerFormGroup.value.email);
formData.append('password', this.registerFormGroup.value.password);
formData.append('PhoneNumber', this.registerFormGroup.value.PhoneNumber);
formData.append('Date_of_Birth', this.registerFormGroup.value.Date_of_Birth);
formData.append('Id_Number', this.registerFormGroup.value.Id_Number);
formData.append('Physical_Address', this.registerFormGroup.value.Physical_Address);
formData.append('Photo', this.selectedFile, this.selectedFile.name);
formData.append('User_Status_ID', this.registerFormGroup.value.User_Status_ID);
formData.append('User_Type_ID', this.registerFormGroup.value.User_Type_ID);
this.userService.RegisterUser(formData).subscribe({
next: (response) => {
console.log('Registration Success:', response);
this.registerFormGroup.reset();
this.openSnackbar('Your user profile has been created', 'success');
this.router.navigate(['/login']);
},
error: (error) => {
console.log('Registration Error:', error);
let errorMessage = 'Registration failed: ';
if (error.error === 'DuplicateEmail') {
errorMessage += 'This email address is already registered.';
} else if (error.error === 'DuplicatePhoneNumber') {
errorMessage += 'This phone number is already registered.';
} else if (error.error === 'DuplicateDateOfBirth') {
errorMessage += 'This date of birth is already registered.';
} else if (error.error === 'DuplicateIdNumber') {
errorMessage += 'This ID number is already registered.';
} else if (error.error === 'DuplicatePhoto') {
errorMessage += 'This photo is already associated with another user.';
} else {
errorMessage += 'Unknown error. Please try again later.';
}
this.openSnackbar(errorMessage, 'danger');
}
});
} else {
console.log('Form is not valid or file is not selected');
console.log(this.registerFormGroup.errors);
console.log(this.registerFormGroup.controls);
this.openSnackbar('Form is not filled in correctly', 'danger');
}
}
openSnackbar(message: string, type: 'success' | 'danger') {
this.snackBar.open(message, 'Close', {
duration: 5000,
panelClass: type === 'success' ? 'snackbar-success' : 'snackbar-danger'
});
}
get f() {
return this.registerFormGroup.controls;
}
resetForm() {
this.registerFormGroup.reset({
user_status_id: 1 // Reset user_status_id to default value of 1 (Active)
});
this.router.navigate(['/login']);
}
}
//css
.register-wrapper {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: #f0f4f7; /* Light blue background */
}
.box {
padding: 60px 50px 40px;
width: 100%;
max-width: 800px;
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.card-header {
text-align: center;
font-weight: 700;
color: #000; /* Blue color for header text */
}
.card-title {
font-size: 30px;
margin: 0;
}
.form-group label {
color: #000; /* Blue color for form labels */
}
.form-control {
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
transition: border-color 0.3s ease-in-out;
}
.form-control:focus {
border-color: #000; /* Blue border on focus */
box-shadow: 0 0 5px rgba(63, 81, 181, 0.2); /* Light blue shadow on focus */
}
.text-danger {
color: #f44336; /* Red color for error messages */
}
.btn-primary {
background-color: #4caf50; /* Green background for primary button */
border-color: #4caf50; /* Green border for primary button */
color: #fff; /* White text for primary button */
}
.btn-secondary {
background-color: #f44336; /* Red background for secondary button */
border-color: #f44336; /* Red border for secondary button */
color: #fff; /* White text for secondary button */
}
.card-footer {
display: flex;
justify-content: space-between;
padding: 20px;
}
.card-footer .btn {
width: 48%;
}
/* Snackbar Styles */
.snackbar {
visibility: visible;
min-width: 250px;
margin-left: -125px;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 2px;
padding: 16px;
position: fixed;
z-index: 1;
left: 50%;
bottom: 30px;
font-size: 17px;
}
.snackbar-success {
background-color: #4caf50; /* Green for success */
}
.snackbar-danger {
background-color: #f44336; /* Red for error */
}
.close-snackbar {
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
background: none;
border: none;
}
