add bootstrap in angular (tryed log in html)

reqtool/ReqmanAngular11/package.json

@@ -16,9 +16,12 @@
     "@angular/compiler": "~11.1.2",
     "@angular/core": "~11.1.2",
     "@angular/forms": "~11.1.2",
+    "@angular/localize": "~11.1.2",
     "@angular/platform-browser": "~11.1.2",
     "@angular/platform-browser-dynamic": "~11.1.2",
     "@angular/router": "~11.1.2",
+    "@ng-bootstrap/ng-bootstrap": "^9.0.2",
+    "bootstrap": "^4.6.0",
     "jwt-decode": "^3.1.2",
     "moment": "^2.29.1",
     "rxjs": "~6.6.0",

reqtool/ReqmanAngular11/src/app/app.component.ts

@@ -7,4 +7,4 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'ReqmanAngular11';
-}
+};
\ No newline at end of file

reqtool/ReqmanAngular11/src/app/app.module.ts

 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
+import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
+
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
@@ -29,13 +31,14 @@ import { PrefixListComponent } from './components/prefix-list/prefix-list.compon
     BoilerplateListComponent,
     AddPrefixComponent,
     PrefixDetailsComponent,
-    PrefixListComponent
+    PrefixListComponent,
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     FormsModule,
-    HttpClientModule
+    HttpClientModule,
+    NgbModule
   ],
   providers: [
     AuthService,

reqtool/ReqmanAngular11/src/app/components/boilerplate-details/boilerplate-details.component.html

@@ -28,7 +28,7 @@
               type="checkbox"
               class="form-control"
               id="has_suffix"
-              [(ngModel)]="currentboilerplate.has_main"
+              [(ngModel)]="currentboilerplate.has_suffix"
               name="has_suffix"
             />
           </div>

reqtool/ReqmanAngular11/src/app/components/login/login.component.html

-<div style="text-align:center">
+<!-- <div style="text-align:center">
     <h1>
         Login
     </h1>
@@ -8,4 +8,43 @@
   <input #password type='password' placeholder='password'>
   <button (click)="login(username.value, password.value)">login</button>
   <p>{{ error?.message }}</p>
-  <p *ngIf="error">{{ error?.error | json }}</p>
\ No newline at end of file
+  <p *ngIf="error">{{ error?.error | json }}</p> -->
+
+
+  <!-- Default form login -->
+<form class="text-center border border-light p-5">
+
+    <p class="h4 mb-4">Sign in</p>
+  
+    <!-- Email -->
+    <input #email type="email" id="defaultLoginFormEmail" class="form-control mb-4" placeholder="E-mail">
+  
+    <!-- Password -->
+    <input #password type="password" id="defaultLoginFormPassword" class="form-control mb-4" placeholder="Password">
+  
+    <div class="d-flex justify-content-around">
+      <div>
+        <!-- Remember me -->
+        <input
+            class="form-check-input"
+            type="checkbox"
+            value=""
+            id="flexCheckDefault"
+        />
+      </div>
+      <div>
+        <!-- Forgot password -->
+        <a href="">Forgot password?</a>
+      </div>
+    </div>
+  
+    <!-- Sign in button -->
+    <button mdbBtn color="info" block="true" class="my-4" type="submit" (click)="login(email.value, password.value)">Log in</button>
+  
+    <!-- Register -->
+    <p>Not a member?
+      <a href="">Register</a>
+    </p>
+  
+  </form>
+  <!-- Default form login -->
\ No newline at end of file

reqtool/ReqmanAngular11/src/polyfills.ts

+/***************************************************************************************************
+ * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
+ */
+import '@angular/localize/init';
 /**
  * This file includes polyfills needed by Angular and is loaded before the app.
  * You can add your own extra polyfills to this file.

reqtool/ReqmanAngular11/src/styles.scss

 /* You can add global styles to this file, and also import other style files */
+@import "~bootstrap/dist/css/bootstrap.css";
+
+
+/* Importing Bootstrap SCSS file. */
+@import '~bootstrap/scss/bootstrap';