login popup added

angular.json

@@ -24,9 +24,10 @@
               "src/assets"
             ],
             "styles": [
-              "src/custom-theme.scss"
+              "src/custom-theme.scss",
+              "node_modules/bootstrap/dist/css/bootstrap.min.css"
             ],
-            "scripts": []
+            "scripts": ["node_modules/bootstrap/dist/js/bootstrap.min.js"]
           },
           "configurations": {
             "production": {

package-lock.json

@@ -1967,6 +1967,14 @@
         "glob-to-regexp": "^0.3.0"
       }
     },
+    "@ng-bootstrap/ng-bootstrap": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-8.0.0.tgz",
+      "integrity": "sha512-v77Gfd8xHH+exq0WqIqVRlxbUEHdA/2+RUJenUP2IDTQN9E1rWl7O461/kosr+0XPuxPArHQJxhh/WsCYckcNg==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "@ngtools/webpack": {
       "version": "11.0.1",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-11.0.1.tgz",
@@ -3246,6 +3254,11 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "bootstrap": {
+      "version": "4.5.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.3.tgz",
+      "integrity": "sha512-o9ppKQioXGqhw8Z7mah6KdTYpNQY//tipnkxppWhPbiSWdD+1raYsnhwEZjkTHYbGee4cVQ0Rx65EhOY/HNLcQ=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

package.json

@@ -23,8 +23,10 @@
     "@angular/platform-browser": "~10.0.5",
     "@angular/platform-browser-dynamic": "~10.0.5",
     "@angular/router": "~10.0.5",
+    "@ng-bootstrap/ng-bootstrap": "^8.0.0",
     "@ngx-translate/core": "^13.0.0",
     "@ngx-translate/http-loader": "^6.0.0",
+    "bootstrap": "^4.5.3",
     "ngx-translate-cache": "^9.0.2",
     "rxjs": "~6.5.5",
     "tslib": "^2.0.0",

src/app/app.component.ts

@@ -8,3 +8,4 @@ import { Component } from '@angular/core';
 export class AppComponent {
   title = 'thd-navi-app';
 }
+

src/app/app.module.ts

@@ -28,12 +28,17 @@ import { MatTabsModule } from  '@angular/material/tabs';
 import { I18nModule } from './i18n/i18n.module';
 import { SelectLanguageComponent } from './select-language/select-language.component';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatSelectModule } from '@angular/material/select';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatIconModule } from '@angular/material/icon';
 import { AdminComponent } from './admin/admin.component';
 import { JwtGuard } from './jwt.guard';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import {MatInputModule} from '@angular/material/input';
+import {MatCardModule} from '@angular/material/card';
+import {MatDialogModule } from '@angular/material/dialog';
+
+
 
 @NgModule({
   declarations: [
@@ -42,16 +47,16 @@ import { JwtGuard } from './jwt.guard';
     NavigationComponent,
     RoomsComponent,
     InternationalComponent,
-    LoginComponent,
     EventComponent,
     ThabellaComponent,
     SelectLanguageComponent,
-    AdminComponent
+    AdminComponent,
+    LoginComponent
   ],
   imports: [
     BrowserModule,
     RouterModule.forRoot([
-      { path: '', component: StartComponent },
+      { path: 'start', component: StartComponent },
       { path: 'navigation', component: NavigationComponent },
       { path: 'rooms', component: RoomsComponent },
       { path: 'international', component: InternationalComponent },
@@ -71,6 +76,9 @@ import { JwtGuard } from './jwt.guard';
     FormsModule,
     ReactiveFormsModule,
     MatButtonToggleModule,
+    MatInputModule,
+    MatCardModule,
+    MatDialogModule,
     MatIconModule],
   providers: [],
   bootstrap: [AppComponent]

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>
+  </div>
\ No newline at end of file
-    <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>

src/app/login/login.component.html.bak

-<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>
-      <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>
-  
\ No newline at end of file

src/app/login/login.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { LoginComponent } from './login.component';
-
-import { RouterTestingModule } from '@angular/router/testing';
-
-import { FormsModule } from '@angular/forms'
-import { ReactiveFormsModule } from '@angular/forms';
-import { TranslateModule, TranslateService, TranslateStore } from "@ngx-translate/core";
-
-describe('LoginComponent', () => {
-  let component: LoginComponent;
-  let fixture: ComponentFixture<LoginComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [LoginComponent],
-      imports: [
-        RouterTestingModule,
-        TranslateModule.forRoot(),
-        ReactiveFormsModule,
-        FormsModule
-      ],
-      //providers: [TranslateService, TranslateStore]
-
-    })
-      .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(LoginComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/login/login.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { Router } from '@angular/router';
-import { JwtService } from '../jwt.service';
 
 @Component({
   selector: 'app-login',
   templateUrl: './login.component.html',
-  styleUrls: ['./login.component.scss']
+  styleUrls: ['./login.component.css']
 })
-export class LoginComponent implements OnInit {
-
-  constructor(private jwtService: JwtService, private router: Router, private formBuilder: FormBuilder) { }
-
-  loginForm: FormGroup;
-  isSubmitted = false;
-
-  ngOnInit(): void {
-    this.loginForm = this.formBuilder.group({
-      email: ['', Validators.required],
-      password: ['', Validators.required]
-    });
+export class LoginComponent {
+  title = 'angulartoastr';
+  showModal: boolean;
+  registerForm: FormGroup;
+  submitted = false;
+  constructor(private formBuilder: FormBuilder) { }
+  show()
+  {
+    this.showModal = true; // Show-Hide Modal Check
+    
   }
-
-  get formControls() { return this.loginForm.controls; }
-
-  login() {
-    this.isSubmitted = true;
-    if (this.loginForm.invalid) {
-      return;
-    }
-    this.jwtService.login(this.loginForm.value);
-    this.router.navigateByUrl('/admin');
+  //Bootstrap Modal Close event
+  hide()
+  {
+    this.showModal = false;
   }
+  ngOnInit() {
+    this.registerForm = this.formBuilder.group({
+        email: ['', [Validators.required, Validators.email]],
+        password: ['', [Validators.required, Validators.minLength(6)]]
+    });
+}
+// convenience getter for easy access to form fields
+get f() { return this.registerForm.controls; }
+onSubmit() {
+    this.submitted = true;
+    // stop here if form is invalid
+    if (this.registerForm.invalid) {
+        return;
+    }
+    if(this.submitted)
+    {
+      this.showModal = false;
+    }
+   
 }
+  
+}
\ No newline at end of file