Popup

src/app/login/login.component.html

-
-<div>
-  <h2>{{'cLoginText'|translate}}</h2>
-  <form [formGroup]="loginForm" (ngSubmit)="login()">
-    <p [ngClass]="{ 'has-error': isSubmitted && formControls.email.errors }">
-      <input type="email" placeholder="E-Mail" formControlName="email">
-    </p>
-    <div *ngIf="isSubmitted && formControls.email.errors">
-    <div *ngIf="formControls.email.errors.required">E-Mail is required</div>
+<div class="container">
+    <h1 class="text-center">Login with bootstrap popup</h1>
+    <button type="button" class="btn btn-primary" (click) = "show()">Login</button>
+     </div>
+  <!-- Creates the bootstrap modal where the image will appear -->
+  <div [style.display]="showModal ? 'block' : 'none'" class="modal" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title" id="myModalLabel">Login</h4>
+      </div>
+      <div class="modal-body">
+          <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
+              <div class="form-group">
+                  <label>Email</label>
+                  <input type="text" formControlName="email" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.email.errors }" />
+                  <div *ngIf="submitted && f.email.errors" class="invalid-feedback">
+                      <div *ngIf="f.email.errors.required">Email is required</div>
+                      <div *ngIf="f.email.errors.email">Email must be a valid email address</div>
+                  </div>
+              </div>
+              <div class="form-group">
+                  <label>Password</label>
+                  <input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
+                  <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
+                      <div *ngIf="f.password.errors.required">Password is required</div>
+                      <div *ngIf="f.password.errors.minlength">Password must be at least 6 characters</div>
+                  </div>
+                </div>
+            <div class="form-group form-check">
+              <label class="form-check-label">
+                <input class="form-check-input" type="checkbox" name="remember"> Remember me
+              </label>
+            </div>
+            <button type="submit" class="btn btn-primary">Submit</button>
+          </form>
+      </div>
+      <div class="modal-footer">
+          <button type="button" class="btn btn-dark" data-dismiss="modal" (click) = "hide()">Close</button>
+      
+      </div>
     </div>
-    <p [ngClass]="{ 'has-error': isSubmitted && formControls.password.errors }">
-      <input type="password" placeholder="Password" formControlName="password">
-    </p> 
-    <div *ngIf="isSubmitted && formControls.password.errors">
-    <div *ngIf="formControls.password.errors.required">Password is required</div>
-    </div>
-    <p>
-      <button mat-button type="submit" color="warn">LOGIN</button>
-      <!-- <input type="submit" value="Log in">-->
-    </p>
-  </form>
-</div>
+  </div>
+  </div>
\ No newline at end of file