(F) Add login form

Clinics.Frontend/config.ts

+export const apiUrl = "https://localhost:7046/api";
\ No newline at end of file

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

@@ -11,6 +11,7 @@ import { LayoutComponent } from './components/template/layout/layout.component';
 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';
 
 @NgModule({
   imports: [
@@ -34,7 +35,8 @@ import { HomeComponent } from './components/home/home.component';
     LayoutComponent,
     HeaderComponent,
     FooterComponent,
-    HomeComponent
+    HomeComponent,
+    LoginFormComponent
   ],
   
   // identifies the root component that Angular should

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

+<p>login-form works!</p>

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

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-login-form',
+  templateUrl: './login-form.component.html',
+  styleUrl: './login-form.component.css'
+})
+export class LoginFormComponent {
+
+}

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

@@ -22,8 +22,9 @@
                             للاستفادة من خدمات هذا التطبيق، يحب عليك تسجيل الدخول أولاً
                         </p>
                         <div class="text-center">
-                            <a href="#about" class="more-btn"><span>تسجيل الدخول </span> <i
-                                    class="bi bi-chevron-right"></i></a>
+                            <button (click)="openLoginForm(loginModal)" class="btn more-btn">
+                                <a>تسجيل الدخول<i class="bi bi-chevron-right"></i></a>
+                            </button>
                         </div>
                     </div>
                 </div>
@@ -198,4 +199,19 @@
     </section>
     <!-- #endregion -->
 
+    <!-- #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>
+        </div>
+        <!-- <div class="modal-footer">
+        </div> -->
+    </ng-template>
+    <!-- #endregion -->
+
 </div>
\ No newline at end of file

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

 import { Component } from '@angular/core';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
   selector: 'app-home',
@@ -7,4 +8,13 @@ import { Component } from '@angular/core';
 })
 export class HomeComponent {
 
+  //#region CTOR DI
+  constructor (private modalService: NgbModal) {}
+  //#endregion
+
+  //#region Login
+  openLoginForm (content: any): void {
+    this.modalService.open(content);
+  }
+  //#endregion
 }