Skip to content
Snippets Groups Projects
Commit 5d085e0a authored by Franz Raumschüssel's avatar Franz Raumschüssel
Browse files

login popup added

parent bb4d8ca1
No related branches found
No related tags found
2 merge requests!4Popup,!1Popup
This commit is part of merge request !1. Comments created here will be created in the context of that merge request.
Hide whitespace changes
Inline Side-by-side
Showing
with 111 additions and 114 deletions
angular.json
+ 3
− 2
View file @ 5d085e0a
......@@ -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
+ 13
− 0
View file @ 5d085e0a
......@@ -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",
......
src/app/app.component.ts
+ 1
− 0
View file @ 5d085e0a
......@@ -8,3 +8,4 @@ import { Component } from '@angular/core';
export class AppComponent {
title = 'thd-navi-app';
}
src/app/app.module.ts
+ 12
− 4
View file @ 5d085e0a
......@@ -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
+ 43
− 21
View file @ 5d085e0a
<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
src/app/login/login.component.html.bak deleted 100644 → 0
+ 0
− 22
View file @ bb4d8ca1
<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
+ 0
− 39
View file @ 5d085e0a
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
+ 37
− 26
View file @ 5d085e0a
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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment