From 5d085e0aab34bb5b12d06349559e65e27f7ac229 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Franz=20Raumsch=C3=BCssel?=
<franz.raumschuessel@stud.th-deg.de>
Date: Fri, 27 Nov 2020 17:00:45 +0100
Subject: [PATCH] login popup added
---
angular.json | 5 +-
package-lock.json | 13 ++++++
package.json | 2 +
src/app/app.component.ts | 1 +
src/app/app.module.ts | 16 +++++--
src/app/login/login.component.html | 64 +++++++++++++++++---------
src/app/login/login.component.html.bak | 22 ---------
src/app/login/login.component.spec.ts | 39 ----------------
src/app/login/login.component.ts | 63 ++++++++++++++-----------
9 files changed, 111 insertions(+), 114 deletions(-)
delete mode 100644 src/app/login/login.component.html.bak
diff --git a/angular.json b/angular.json
index 650d5ab..34c688e 100644
--- a/angular.json
+++ b/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": {
diff --git a/package-lock.json b/package-lock.json
index 0c1dedc..18b53fe 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 2f3274f..5168e64 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 1015905..11243f3 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -8,3 +8,4 @@ import { Component } from '@angular/core';
export class AppComponent {
title = 'thd-navi-app';
}
+
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index bc1d047..1d77420 100644
--- a/src/app/app.module.ts
+++ b/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]
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index b9fb64b..be61411 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -1,22 +1,44 @@
-
-<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
diff --git a/src/app/login/login.component.html.bak b/src/app/login/login.component.html.bak
deleted file mode 100644
index 3e7374e..0000000
--- a/src/app/login/login.component.html.bak
+++ /dev/null
@@ -1,22 +0,0 @@
-<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
diff --git a/src/app/login/login.component.spec.ts b/src/app/login/login.component.spec.ts
index 0fec96c..e69de29 100644
--- a/src/app/login/login.component.spec.ts
+++ b/src/app/login/login.component.spec.ts
@@ -1,39 +0,0 @@
-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();
- });
-});
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
index 467f0f7..6ac8252 100644
--- a/src/app/login/login.component.ts
+++ b/src/app/login/login.component.ts
@@ -1,35 +1,46 @@
-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
--
GitLab