From 82a032affd6aa348079b1f8ccc5ea94452793907 Mon Sep 17 00:00:00 2001
From: Mazdak Gibran <141390141+mazdakgibran@users.noreply.github.com>
Date: Thu, 8 Jan 2026 17:50:22 +0500
Subject: [PATCH] adding fields to user setup

adding fields to user setup  and error handling
---
 .../notifications.component.html              |  2 +-
 .../notifications/notifications.component.ts  |  3 +-
 .../setup-user/setup-user.component.html      | 43 ++++++++++++++++++-
 .../setup-user/setup-user.component.ts        | 11 ++++-
 src/assets/css/bootstrap.min.css              |  3 +-
 src/assets/i18n/Arabic.json                   |  5 ++-
 src/assets/i18n/English.json                  |  6 ++-
 7 files changed, 64 insertions(+), 9 deletions(-)

diff --git a/src/app/shared/components/notifications/notifications.component.html b/src/app/shared/components/notifications/notifications.component.html
index 09559e0..d805165 100644
--- a/src/app/shared/components/notifications/notifications.component.html
+++ b/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>
\ No newline at end of file
diff --git a/src/app/shared/components/notifications/notifications.component.ts b/src/app/shared/components/notifications/notifications.component.ts
index 4608fe9..661b673 100644
--- a/src/app/shared/components/notifications/notifications.component.ts
+++ b/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'
 })
diff --git a/src/app/user-management/setup-user/setup-user.component.html b/src/app/user-management/setup-user/setup-user.component.html
index 6348899..ad2e749 100644
--- a/src/app/user-management/setup-user/setup-user.component.html
+++ b/src/app/user-management/setup-user/setup-user.component.html
@@ -75,6 +75,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">
                                                                         {{ 'defaultPassword' | translate }}<span
@@ -94,10 +119,24 @@
                                                                     
                                                                 </div>
                                                             </div>
-                                                            <div class="col-md-6">
-                                                                
+                                                            
+                                                        </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">
                                                             <div class="col-md-6 ms-auto text-end">
                                                             <button type="button" class="btn btn-primary waves-effect waves-light" (click)="onSubmit()" [disabled]="userForm.invalid"
diff --git a/src/app/user-management/setup-user/setup-user.component.ts b/src/app/user-management/setup-user/setup-user.component.ts
index 4463e17..befccb4 100644
--- a/src/app/user-management/setup-user/setup-user.component.ts
+++ b/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();
diff --git a/src/assets/css/bootstrap.min.css b/src/assets/css/bootstrap.min.css
index 57034df..336a310 100644
--- a/src/assets/css/bootstrap.min.css
+++ b/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;
diff --git a/src/assets/i18n/Arabic.json b/src/assets/i18n/Arabic.json
index 2fd7716..10de332 100644
--- a/src/assets/i18n/Arabic.json
+++ b/src/assets/i18n/Arabic.json
@@ -246,5 +246,8 @@
     "permissionManagement": "إدارة الأذونات",
     "userCode": "مستخدم",
     "choose" : "يختار",
-    "allow": "يسمح"
+    "allow": "يسمح",
+    "ERR_SEC_0001": "البريد الإلكتروني موجود بالفعل",
+    "ERR_SEC_0002": "اسم المستخدم موجود بالفعل",
+    "ERR_SEC_0003": "كلمة المرور القديمة غير صحيحة"
 }
\ No newline at end of file
diff --git a/src/assets/i18n/English.json b/src/assets/i18n/English.json
index dddf514..b3a7c95 100644
--- a/src/assets/i18n/English.json
+++ b/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"
 }
\ No newline at end of file