adding fields to user setup

adding fields to user setup  and error handling

src/app/shared/components/notifications/notifications.component.html

@@ -1,4 +1,4 @@
 <div *ngIf="notifications$ | async as notification" class="notification" [ngClass]="notification.type">
-    {{ notification.message }}
+     {{ notification.message | translate }}
     <button class="close-btn" (click)="clearNotification()">×</button>
 </div>

src/app/shared/components/notifications/notifications.component.ts

@@ -2,10 +2,11 @@ import { Component } from '@angular/core';
 import { Observable } from 'rxjs';
 import { NotificationService } from '../../services/notification.service';
 import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-notifications',
-  imports: [CommonModule],
+  imports: [CommonModule, TranslateModule],
   templateUrl: './notifications.component.html',
   styleUrl: './notifications.component.scss'
 })

src/app/user-management/setup-user/setup-user.component.html

@@ -74,6 +74,31 @@
 
                                                         </div>
                                                          <div class="row g-3 mb-3">
+                                                             <div class="col-md-6">
+                                                                <div class="d-flex align-items-center gap-2">
+                                                                    <label for="email" class="text-nowrap">
+                                                                        {{ 'email' | translate }}<span
+                                                                            class="mandatory">*</span>
+                                                                    </label>
+                                                                    <div class="password-wrapper position-relative w-100">
+                                                                       <input id="email"
+                                                                            class="form-control"
+                                                                            formControlName="email"   
+                                                                            name="email"                                                     
+                                                                            placeholder="{{ 'email' | translate }}" appNoWhitespaces/>
+                                                                            
+                                                                    <div class="text-danger" *ngIf="userForm.get('email')?.errors?.['required'] 
+                                                                                                    && userForm.get('email')?.touched">
+                                                                        {{ 'fieldRequired' | translate }}
+                                                                    </div>
+                                                                    <div class="text-danger" *ngIf="userForm.get('email')?.errors?.['email'] 
+                                                                                                    && userForm.get('email')?.touched">
+                                                                        {{"invalidEmail" | translate}}
+                                                                    </div>
+                                                                    </div>
+                                                                    
+                                                                </div>
+                                                            </div>
                                                             <div class="col-md-6">
                                                                 <div class="d-flex align-items-center gap-2">
                                                                     <label for="defaultPassword" class="text-nowrap">
@@ -94,8 +119,22 @@
                                                                     
                                                                 </div>
                                                             </div>
+                                                            
+                                                        </div>
                                                       <div class="col-md-6">
+                                                        <div class="d-flex align-items-center gap-2">
+                                                          <label for="userRole" class="text-nowrap">
+                                                            {{ 'SelectRole' | translate }}<span class="mandatory">*</span>
+                                                          </label>
+                                                            <div class="password-wrapper position-relative w-100">
+                                                              <ng-select id="userRole" class="form-select" formControlName="userRole" [items]="roleOptions" bindLabel="label"
+                                                                bindValue="value" placeholder="{{ 'SelectRole' | translate }}" >
+                                                              </ng-select>
                                                             
+                                                              <div class="text-danger" *ngIf="userForm.get('userRole')?.touched && userForm.get('userRole')?.invalid">
+                                                                {{ 'fieldRequired' | translate }}
+                                                              </div>
+                                                            </div>
                                                         </div>
                                                       </div>
                                                          <div class="row g-3 mb-3">

src/app/user-management/setup-user/setup-user.component.ts

@@ -35,6 +35,10 @@ export class SetupUserComponent implements OnInit {
   totalCount: number = 0;
   mode: 'edit' | 'view' = 'view';
   buttonPermissions: any;
+  roleOptions = [
+    { label: 'Admin', value: 'ADMIN' },
+    { label: 'User', value: 'USER' }
+  ];
 
 
   constructor(
@@ -78,7 +82,7 @@ export class SetupUserComponent implements OnInit {
       userId: this.userForm.value.userId,
       userFullname: this.userForm.value.userFullname,
       email: `${this.userForm.value.userId}@dummy.com`,
-      role: 'ADMIN',
+      role: this.userForm.value.userRole,
       porOrgacode: this.storageService.getItem('POR_ORGACODE'),
       password: this.userForm.value.defaultPassword
     }
@@ -90,6 +94,7 @@ export class SetupUserComponent implements OnInit {
       this.userForm.reset(); 
       this.mode = 'edit';
       },
+     
       error: (err: any) => console.error(err)
     });
 
@@ -131,7 +136,9 @@ ngOnInit(): void {
    this.userForm = this.fb.group({
       userId: ['', [Validators.required]],
       userFullname: ['', [Validators.required, Validators.maxLength(500)]],
-      defaultPassword: ['', Validators.required]
+      defaultPassword: ['', Validators.required],
+      email: ['', [Validators.required, Validators.email]],
+      userRole: ['', Validators.required]
     });  
   
   this.userService.loadUsers();

src/assets/css/bootstrap.min.css

@@ -2194,7 +2194,7 @@ font-size:.8125rem;
 	background-repeat: no-repeat;
 background-position:right .75rem center;
 	background-size: 16px 12px;
-	border: 1px solid #ced4da;
+	/* border: 1px solid #ced4da; */
 border-radius:.25rem;
 	-webkit-transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
 	transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
@@ -2204,6 +2204,7 @@ border-radius:.25rem;
 	-moz-appearance: none;
 	appearance: none
 }
+
 @media (prefers-reduced-motion:reduce) {
 .form-select {
 	-webkit-transition: none;

src/assets/i18n/Arabic.json

@@ -246,5 +246,8 @@
     "permissionManagement": "إدارة الأذونات",
     "userCode": "مستخدم",
     "choose" : "يختار",
-    "allow": "يسمح"
+    "allow": "يسمح",
+    "ERR_SEC_0001": "البريد الإلكتروني موجود بالفعل",
+    "ERR_SEC_0002": "اسم المستخدم موجود بالفعل",
+    "ERR_SEC_0003": "كلمة المرور القديمة غير صحيحة"
 }

src/assets/i18n/English.json

@@ -84,6 +84,7 @@
     "name":"Name",
     "EnterThirdPartyName":"Enter Third Party Name",
     "Email":"Email",
+    "email":"Email",
     "Address":"Address",
     "phoneNumber":"Phone Number",
     "PhoneNumberPlaceHolder":"Enter Phone Number",
@@ -245,5 +246,8 @@
     "permissionManagement": "Permission Managment",
     "userCode": "User",
     "choose" : "Choose",
-    "allow": "Allow"
+    "allow": "Allow",
+    "ERR_SEC_0001": "Email already exists",
+    "ERR_SEC_0002": "Username already exists",
+    "ERR_SEC_0003": "Old Password is not correct"
 }