_Bastler/we_bstly-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

change login to form + remember me, 2fa

Browse Source
This commit is contained in:
_Bastler 2021-05-19 19:26:51 +02:00
parent e3de9fad0d
commit 5304409ea4
6 changed files with 97 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/app-routing.module.ts
View File

@ -3,8 +3,6 @@ import {Routes, RouterModule} from '@angular/router';
import {AuthGuard, AuthUpdateGuard, AuthenticatedGuard, AnonymousGuard} from './auth/auth.guard';
import {ImprintComponent, PrivacyPolicyComponent, TermsOfServiceComponent} from './pages/general/general.component';
import {LoginComponent} from './pages/login/login.component';
import {LoginTotpComponent} from './pages/login-totp/login-totp.component';
import {FormLoginComponent} from './pages/form-login/form-login.component';
import {FormLoginTotpComponent} from './pages/form-login-totp/form-login-totp.component';
import {PasswordComponent} from './pages/password/password.component';
@ -30,8 +28,8 @@ const routes: Routes = [
{path: 'imprint', component: ImprintComponent, canActivate: [AuthUpdateGuard]},
{path: 'privacy-policy', component: PrivacyPolicyComponent, canActivate: [AuthUpdateGuard]},
{path: 'terms-of-service', component: TermsOfServiceComponent, canActivate: [AuthUpdateGuard]},
{path: 'login', component: LoginComponent, canActivate: [AnonymousGuard]},
{path: 'login/totp', component: LoginTotpComponent, canActivate: [AnonymousGuard]},
{path: 'login', component: FormLoginComponent, canActivate: [AnonymousGuard]},
{path: 'login/totp', component: FormLoginTotpComponent, canActivate: [AnonymousGuard]},
{path: 'service-login', component: FormLoginComponent, canActivate: [AnonymousGuard]},
{path: 'service-login/totp', component: FormLoginTotpComponent, canActivate: [AnonymousGuard]},
{path: 'password', component: PasswordComponent, canActivate: [AnonymousGuard]},

18
src/app/pages/form-login-totp/form-login-totp.component.html
View File

@ -1,28 +1,24 @@
<form [formGroup]="form">
<form ngNoForm action="{{apiUrl}}/auth/formlogin/totp" method="POST">
<form action="{{apiUrl}}/auth/formlogin/totp" method="POST" #totpForm>
<mat-card>
<mat-card-content>
<h2>{{'security.2fa.totp.external' | i18n}}<mat-icon style="font-size: 1em;">open_in_new
</mat-icon></h2>
</mat-icon>
</h2>
<mat-error *ngIf="loginInvalid">
{{'security.2fa.totp.invalid' | i18n}}
</mat-error>
<mat-form-field>
<input id="code" name="code" matInput placeholder="{{'security.2fa.totp.code' | i18n}}"
formControlName="code" required>
<input id="code" name="code" matInput placeholder="{{'security.2fa.totp.code' | i18n}}" required>
<mat-error>
{{'security.2fa.totp.missing' | i18n}}
</mat-error>
</mat-form-field>
<mat-slide-toggle id="keep" name="keep" formControlName="keep">
{{'security.2fa.totp.keepSession' | i18n}}
</mat-slide-toggle>
</mat-card-content>
<mat-card-actions>
<button type="submit" mat-raised-button color="primary"
[disabled]="form.invalid">{{'security.2fa.totp.login' | i18n}}<mat-icon style="font-size: 1em;">open_in_new
<button type="submit" mat-raised-button color="primary" (click)="totpForm.submit()"
[disabled]="totpForm.invalid">{{'security.2fa.totp.login' | i18n}}<mat-icon style="font-size: 1em;">
open_in_new
</mat-icon></button>
</mat-card-actions>
</mat-card>
</form>
</form>

16
src/app/pages/form-login-totp/form-login-totp.component.ts
View File

@ -1,5 +1,6 @@
import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {ActivatedRoute} from '@angular/router';
import {environment} from '../../../environments/environment';
@ -10,16 +11,17 @@ import { environment } from '../../../environments/environment';
})
export class FormLoginTotpComponent implements OnInit {
form: FormGroup;
public loginInvalid: boolean;
public apiUrl = environment.apiUrl;
loginInvalid: boolean;
apiUrl = environment.apiUrl;
constructor(private formBuilder: FormBuilder) { }
constructor(
private route: ActivatedRoute) {}
async ngOnInit() {
this.form = this.formBuilder.group({
code: ['', Validators.required],
keep : ['']
this.route.queryParams.subscribe(params => {
if(params['error'] || params['error'] == '') {
this.loginInvalid = true;
}
});
}

15
src/app/pages/form-login/form-login.component.html
View File

@ -1,5 +1,4 @@
<form [formGroup]="form">
<form ngNoForm action="{{apiUrl}}/auth/formlogin" method="POST">
<form action="{{apiUrl}}/auth/login" method="POST" #loginForm>
<mat-card>
<mat-card-content>
<h2>{{'login.external' | i18n}}<mat-icon style="font-size: 1em;">open_in_new
@ -9,29 +8,27 @@
{{'login.invalid' | i18n}}
</mat-error>
<mat-form-field>
<input id="username" name="username" matInput placeholder="{{'username' | i18n}}"
formControlName="username" required>
<input id="username" name="username" matInput placeholder="{{'username' | i18n}}" required>
<mat-error>
{{'username.missing' | i18n}}
</mat-error>
</mat-form-field>
<mat-form-field>
<input id="password" name="password" matInput type="password" placeholder="{{'password' | i18n}}"
formControlName="password" required>
required>
<mat-error>
{{'password.invalid.hint' | i18n}}
</mat-error>
</mat-form-field>
<mat-slide-toggle id="keep" name="keep" formControlName="keep">
<mat-slide-toggle id="keep" name="keep">
{{'login.keepSession' | i18n}}
</mat-slide-toggle>
</mat-card-content>
<mat-card-actions>
<button type="submit" mat-raised-button color="primary"
[disabled]="form.invalid">{{'login.external' | i18n}}<mat-icon style="font-size: 1em;">open_in_new
<button type="submit" (click)="loginForm.submit()" mat-raised-button color="primary" [disabled]="loginForm.invalid">{{'login.external' |
i18n}}<mat-icon style="font-size: 1em;">open_in_new
</mat-icon></button>
<a routerLink="/password" mat-raised-button color="warn">{{'password.forgot' | i18n}}</a>
</mat-card-actions>
</mat-card>
</form>
</form>

35
src/app/pages/form-login/form-login.component.ts
View File

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {environment} from '../../../environments/environment';
@ -10,20 +10,33 @@ import { environment } from '../../../environments/environment';
})
export class FormLoginComponent implements OnInit {
form: FormGroup;
public loginInvalid: boolean;
public apiUrl = environment.apiUrl;
@ViewChild('loginForm') loginForm: ElementRef;
loginInvalid: boolean;
apiUrl = environment.apiUrl;
targetRoute : string;
constructor(private formBuilder: FormBuilder) { }
constructor(
private router: Router,
private route: ActivatedRoute) {}
async ngOnInit() {
this.form = this.formBuilder.group({
username: ['', Validators.required],
password: ['', Validators.required],
keep : ['']
this.route.queryParams.subscribe(params => {
if(params['target']) {
this.targetRoute = params['target'];
this.router.navigate([], {queryParams: {target: null}, queryParamsHandling: 'merge'});
}
if(params['error'] || params['error'] == '') {
this.loginInvalid = true;
}
});
}
ngAfterViewInit(): void {
if(this.targetRoute) {
this.loginForm.nativeElement.action = this.loginForm.nativeElement.action + "?forward=" + window.location.origin + this.targetRoute;
}
}
}

5
src/app/pages/services/services.component.html
View File

@ -16,11 +16,14 @@
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header="name"> {{'service.name' | i18n}} </th>
<td mat-cell *matCellDef="let service" class="text-center">
<a href="{{service.url}}" [target]="service.sameSite ? '_self' : '_blank'" mat-button color="accent">
<a *ngIf="service.url" href="{{service.url}}" [target]="service.sameSite ? '_self' : '_blank'" mat-button color="accent">
<strong>{{'services.' + service.name + '.title' | i18n}}</strong>
<mat-icon *ngIf="!service.sameSite" inline="true">
open_in_new</mat-icon>
</a>
<a *ngIf="!service.url" mat-button disabled>
<strong>{{'services.' + service.name + '.title' | i18n}}</strong>
</a>
<div><small>{{'services.' + service.name + '.subtitle' | i18n}}</small></div>
</td>
</ng-container>