Migrate to bootstrap 4 and ng-bootstrap

2 files changed, 29 insertions, 32 deletions

diff --git a/client/src/app/login/login.component.html b/client/src/app/login/login.component.html
index 1846fd19e..fac63d44d 100644
--- a/client/src/app/login/login.component.html
+++ b/client/src/app/login/login.component.html
@@ -50,35 +50,29 @@
   </form>
 </div>
 
-<div bsModal #forgotPasswordModal="bs-modal" (onShown)="onForgotPasswordModalShown()" class="modal" tabindex="-1">
-  <div class="modal-dialog">
-    <div class="modal-content">
-
-      <div class="modal-header">
-        <span class="close" aria-hidden="true" (click)="hideForgotPasswordModal()"></span>
-        <h4 i18n class="modal-title">Forgot your password</h4>
-      </div>
+<!--<ng-template #forgotPasswordModal (onShown)="onForgotPasswordModalShown()">-->
+<ng-template #forgotPasswordModal>
+  <div class="modal-header">
+    <h4 i18n class="modal-title">Forgot your password</h4>
+    <span class="close" aria-hidden="true" (click)="hideForgotPasswordModal()"></span>
+  </div>
 
-      <div class="modal-body">
-        <div class="form-group">
-          <label i18n for="forgot-password-email">Email</label>
-          <input
-            type="email" id="forgot-password-email" i18n-placeholder placeholder="Email address" required
-            [(ngModel)]="forgotPasswordEmail" #forgotPasswordEmailInput
-          >
-        </div>
+  <div class="modal-body">
+    <div class="form-group">
+      <label i18n for="forgot-password-email">Email</label>
+      <input
+        type="email" id="forgot-password-email" i18n-placeholder placeholder="Email address" required
+        [(ngModel)]="forgotPasswordEmail" #forgotPasswordEmailInput
+      >
+    </div>
+  </div>
 
-        <div class="form-group inputs">
-          <span i18n class="action-button action-button-cancel" (click)="hideForgotPasswordModal()">
-            Cancel
-          </span>
+  <div class="modal-footer inputs">
+    <span i18n class="action-button action-button-cancel" (click)="hideForgotPasswordModal()">Cancel</span>
 
-          <input
-            type="submit" i18n-value value="Send me an email to reset my password" class="action-button-submit"
-            (click)="askResetPassword()" [disabled]="!forgotPasswordEmailInput.validity.valid"
-          >
-        </div>
-      </div>
-    </div>
+    <input
+      type="submit" i18n-value value="Send me an email to reset my password" class="action-button-submit"
+      (click)="askResetPassword()" [disabled]="!forgotPasswordEmailInput.validity.valid"
+    >
   </div>
-</div>
+</ng-template>
diff --git a/client/src/app/login/login.component.ts b/client/src/app/login/login.component.ts
index 9a68c12fa..8e8822510 100644
--- a/client/src/app/login/login.component.ts
+++ b/client/src/app/login/login.component.ts
@@ -2,12 +2,12 @@ import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'
 import { RedirectService, ServerService } from '@app/core'
 import { UserService } from '@app/shared'
 import { NotificationsService } from 'angular2-notifications'
-import { ModalDirective } from 'ngx-bootstrap/modal'
 import { AuthService } from '../core'
 import { FormReactive } from '../shared'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
 import { LoginValidatorsService } from '@app/shared/forms/form-validators/login-validators.service'
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
 
 @Component({
   selector: 'my-login',
@@ -16,14 +16,17 @@ import { LoginValidatorsService } from '@app/shared/forms/form-validators/login-
 })
 
 export class LoginComponent extends FormReactive implements OnInit {
-  @ViewChild('forgotPasswordModal') forgotPasswordModal: ModalDirective
+  @ViewChild('forgotPasswordModal') forgotPasswordModal: ElementRef
   @ViewChild('forgotPasswordEmailInput') forgotPasswordEmailInput: ElementRef
 
   error: string = null
   forgotPasswordEmail = ''
 
+  private openedForgotPasswordModal: NgbModalRef
+
   constructor (
     protected formValidatorService: FormValidatorService,
+    private modalService: NgbModal,
     private loginValidatorsService: LoginValidatorsService,
     private authService: AuthService,
     private userService: UserService,
@@ -84,10 +87,10 @@ export class LoginComponent extends FormReactive implements OnInit {
   }
 
   openForgotPasswordModal () {
-    this.forgotPasswordModal.show()
+    this.openedForgotPasswordModal = this.modalService.open(this.forgotPasswordModal)
   }
 
   hideForgotPasswordModal () {
-    this.forgotPasswordModal.hide()
+    this.openedForgotPasswordModal.close()
   }
 }