(F) Set login form

Clinics.Frontend/src/app/app.module.ts

@@ -12,6 +12,7 @@ import { HeaderComponent } from './components/template/header/header.component';
 import { FooterComponent } from './components/template/footer/footer.component';
 import { HomeComponent } from './components/home/home.component';
 import { LoginFormComponent } from './components/Authentication/login-form/login-form.component';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
   imports: [
@@ -20,6 +21,7 @@ import { LoginFormComponent } from './components/Authentication/login-form/login
     AppRoutingModule,
     NgbModule,
     ToastrModule.forRoot(),
+    FormsModule,
   ],
 
   // creators of services that this module contributes to the

Clinics.Frontend/src/app/classes/Authentication/login-command.ts

+export class LoginCommand {
+    
+    public userName!: string;
+    public password!: string;
+}

Clinics.Frontend/src/app/components/Authentication/login-form/login-form.component.css

+.custom-input,
+.custom-input::placeholder {
+    color: var(--heading-color);   
+}
+
+.custom-input::placeholder {
+    opacity: 40%;
+}
+
+.custom-label {
+    color: var(--heading-color);   
+    font-weight: 700;
+}
+
+.custom-cancel-button {
+    color: var(--heading-color);   
+}
+.custom-cancel-button:hover {
+    color: white;   
+    background-color: var(--heading-color);
+}
\ No newline at end of file

Clinics.Frontend/src/app/components/Authentication/login-form/login-form.component.html

-<p>login-form works!</p>
+<div class="custom-child" dir="rtl">
+    <div>
+
+        <div class="text-center" >
+            <h3 style="font-weight: 800;">تسجيل الدخول</h3>
+        </div>
+
+        <hr>
+
+        <form #loginForm="ngForm" (ngSubmit)="onSubmit()" class="text-center" autocomplete="off">
+
+            <!-- To avoid first field auto focus -->
+            <div class="form-group">
+                <input type="text" autofocus="autofocus" style="display:none" />
+            </div>
+
+            <div class="form-group mb-4">
+                <label for="username" class="col-form-label custom-label mb-2">اسم المستخدم <span class="text-danger">*</span></label>
+                <input type="text" class="form-control text-center custom-input"
+                placeholder="ادخل اسم المستخدم" dir="ltr"
+                [(ngModel)]="formModel.userName" name="userName"
+                #userName="ngModel" required maxlength="50"
+                >
+
+                <div *ngIf="(userName.touched || userName.dirty) && userName.errors" class="mt-2">
+                    <span class="text-danger">
+                        {{
+                            userName.errors['required'] ? 'هذا الحقل مطلوب'
+                            : ''
+                        }}
+                    </span>
+                </div>
+            </div>
+
+            <div class="form-group mb-4">
+                <label for="password" class="col-form-label custom-label mb-2">كلمة المرور <span class="text-danger">*</span></label>
+                <input type="password" class="form-control text-center custom-input mb-2"
+                placeholder="ادخل كلمة المرور" dir="ltr"
+                [(ngModel)]="formModel.password" name="password"
+                #password="ngModel" required maxlength="50"
+                >
+
+                <div *ngIf="(password.touched || password.dirty) && password.errors" class="mt-2">
+                    <span class="text-danger">
+                        {{
+                            password.errors['required'] ? 'هذا الحقل مطلوب'
+                            : ''
+                        }}
+                    </span>
+                </div>
+
+            </div>
+
+            <div class="d-grid gap-3">
+                <button
+                type="submit" class="btn btn-outline-primary"
+                [disabled]="!loginForm.dirty || loginForm.invalid">دخول</button>
+
+                <button type="button" class="btn btn-outline-secondary custom-cancel-button"
+                (click)="parentModal.dismiss()">الغاء</button>
+            </div>
+        </form>
+    </div>
+</div>
\ No newline at end of file

Clinics.Frontend/src/app/components/Authentication/login-form/login-form.component.ts

-import { Component } from '@angular/core';
+import { Component, Input, ViewChild } from '@angular/core';
+import { NgForm } from '@angular/forms';
+import { LoginCommand } from '../../../classes/Authentication/login-command';
 
 @Component({
   selector: 'app-login-form',
@@ -7,4 +9,18 @@ import { Component } from '@angular/core';
 })
 export class LoginFormComponent {
 
+  //#region Inputs
+  @Input("parentModal") parentModal : any;
+  //#endregion
+
+  //#region Variables
+  @ViewChild("loginForm") loginForm: NgForm;
+  formModel: LoginCommand = new LoginCommand();
+  //#endregion
+
+  //#region On submit
+  onSubmit(): void {}
+  //#endregion 
+
+
 }

Clinics.Frontend/src/app/components/home/home.component.html

@@ -10,7 +10,7 @@
             <div class="welcome position-relative">
                 <h2 style="margin-left: 0.5em">المركز الطبي</h2>
                 <br>
-                <p style="font-weight: 500; color:var(--heading-color);">لدى مركز الدراسات والبحوث العلمية</p>
+                <p style="font-weight: 500; color:var(--heading-color);">في مركز الدراسات والبحوث العلمية</p>
             </div>
 
             <div class="content row gy-4">
@@ -91,9 +91,9 @@
                             <h4>د. أحمد حافظ</h4>
                             <span>اخصائي جراحة وجه وفكين</span>
                             <div class="social">
-                                <a href=""><i class="bi bi-telephone"></i></a>
-                                <a href=""><i class="bi bi-envelope"></i></a>
-                                <a href=""><i class="bi bi-whatsapp"></i></a>
+                                <a><i class="bi bi-telephone"></i></a>
+                                <a><i class="bi bi-envelope"></i></a>
+                                <a><i class="bi bi-whatsapp"></i></a>
                             </div>
                         </div>
                     </div>
@@ -106,9 +106,9 @@
                             <h4>د. زهراء كنجو</h4>
                             <span>اخصائية تغذية</span>
                             <div class="social">
-                                <a href=""><i class="bi bi-telephone"></i></a>
-                                <a href=""><i class="bi bi-envelope"></i></a>
-                                <a href=""><i class="bi bi-whatsapp"></i></a>
+                                <a><i class="bi bi-telephone"></i></a>
+                                <a><i class="bi bi-envelope"></i></a>
+                                <a><i class="bi bi-whatsapp"></i></a>
                             </div>
                         </div>
                     </div>
@@ -121,9 +121,9 @@
                             <h4>د. رغدان ربيع</h4>
                             <span>اخصائي أمراض قلبية</span>
                             <div class="social">
-                                <a href=""><i class="bi bi-telephone"></i></a>
-                                <a href=""><i class="bi bi-envelope"></i></a>
-                                <a href=""><i class="bi bi-whatsapp"></i></a>
+                                <a><i class="bi bi-telephone"></i></a>
+                                <a><i class="bi bi-envelope"></i></a>
+                                <a><i class="bi bi-whatsapp"></i></a>
                             </div>
                         </div>
                     </div>
@@ -136,9 +136,9 @@
                             <h4>د. شام محمد</h4>
                             <span>اخصائية علاج فيزيائي</span>
                             <div class="social">
-                                <a href=""><i class="bi bi-telephone"></i></a>
-                                <a href=""><i class="bi bi-envelope"></i></a>
-                                <a href=""><i class="bi bi-whatsapp"></i></a>
+                                <a><i class="bi bi-telephone"></i></a>
+                                <a><i class="bi bi-envelope"></i></a>
+                                <a><i class="bi bi-whatsapp"></i></a>
                             </div>
                         </div>
                     </div>
@@ -201,16 +201,9 @@
 
     <!-- #region login pop-up -->
     <ng-template #loginModal let-modal>
-        <div class="modal-header">
-            <h4 class="modal-title" id="modal-basic-title">تسجيل الدخول</h4>
-            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
-                (click)="modal.dismiss('Cross click')"></button>
-        </div>
         <div class="modal-body">
-            <app-login-form></app-login-form>
+            <app-login-form [parentModal]="modal"></app-login-form>
         </div>
-        <!-- <div class="modal-footer">
-        </div> -->
     </ng-template>
     <!-- #endregion -->
 

Clinics.Frontend/tsconfig.json

@@ -5,6 +5,10 @@
   "compilerOptions": {
     "outDir": "./dist/out-tsc",
     "strict": true,
+    
+    // To avoid initialization of properties in classes
+    "strictPropertyInitialization": false,
+
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
@@ -29,4 +33,4 @@
     "strictInputAccessModifiers": true,
     "strictTemplates": true
   }
-}
+}
\ No newline at end of file