sh-edraft.de/sh_discord_bot
4
1
Fork 1
Code Issues 21 Pull Requests Actions Packages Projects 3 Releases 27 Wiki Activity

Added imprint & privacy to auth and improved getting url #251

Browse Source
This commit is contained in:
Sven Heidemann 2023-03-17 13:48:48 +01:00
parent 7be40ed236
commit 4420c0e11c
17 changed files with 194 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
kdb-web/src/app/components/footer/footer.component.html
View File

@ -1,28 +1,28 @@
<footer>
<div class="left">
<div class="frontend-version">
<div class="left">
<div class="frontend-version">
<span>
{{'footer.frontend' | translate}}:
</span>
<span>
<span>
{{frontendVersion.getVersionString()}}
</span>
</div>
<span class="version-divider">
</div>
<span class="version-divider">
|
</span>
<div class="backend-version">
<div class="backend-version">
<span>
{{'footer.backend' | translate}}:
</span>
<span>
<span>
{{backendVersion.getVersionString()}}
</span>
</div>
</div>
<div class="right">
<a [href]="privacy" target="_blank">{{'footer.privacy' | translate}}</a>
<span> | </span>
<a [href]="imprint" target="_blank">{{'footer.imprint' | translate}}</a>
</div>
</div>
<div class="right">
<button pButton label="{{'footer.privacy' | translate}}" class="btn text-btn" (click)="navigateToPrivacy()"></button>
<span> | </span>
<button pButton label="{{'footer.imprint' | translate}}" class="btn text-btn" (click)="navigateToImprint()"></button>
</div>
</footer>

14
kdb-web/src/app/components/footer/footer.component.ts
View File

@ -14,8 +14,8 @@ import { throwError } from "rxjs";
export class FooterComponent implements OnInit {
frontendVersion: SoftwareVersion = new SoftwareVersion("0", "0", "0");
backendVersion: SoftwareVersion = new SoftwareVersion("0", "0", "0");
public frontendVersion: SoftwareVersion = new SoftwareVersion("0", "0", "0");
public backendVersion: SoftwareVersion = new SoftwareVersion("0", "0", "0");
public privacy: string = "";
public imprint: string = "";
@ -27,8 +27,6 @@ export class FooterComponent implements OnInit {
) {}
ngOnInit(): void {
this.privacy = this.settings.getPrivacyURL();
this.imprint = this.settings.getImprintURL();
this.frontendVersion = this.settings.getWebVersion() ?? new SoftwareVersion('0', '0', '0');
this.spinnerService.showSpinner();
@ -47,4 +45,12 @@ export class FooterComponent implements OnInit {
});
}
public navigateToPrivacy(): void {
window.open(this.settings.getPrivacyURL(), "_blank");
}
public navigateToImprint(): void {
window.open(this.settings.getImprintURL(), "_blank");
}
}

4
kdb-web/src/app/modules/auth/auth.module.ts
View File

@ -7,6 +7,7 @@ import { AuthHeaderComponent } from './components/auth-header/auth-header.compon
import { ForgetPasswordComponent } from './components/forget-password/forget-password.component';
import { LoginComponent } from './components/login/login.component';
import { RegistrationComponent } from './components/registration/registration.component';
import { AuthFooterComponent } from "./components/auth-footer/auth-footer.component";
@NgModule({
@ -14,7 +15,8 @@ import { RegistrationComponent } from './components/registration/registration.co
ForgetPasswordComponent,
LoginComponent,
RegistrationComponent,
AuthHeaderComponent
AuthHeaderComponent,
AuthFooterComponent
],
imports: [
CommonModule,

7
kdb-web/src/app/modules/auth/components/auth-footer/auth-footer.component.html Normal file
View File

@ -0,0 +1,7 @@
<div class="auth-footer">
<div class="logo-button-wrapper">
<button pButton label="{{'footer.privacy' | translate}}" class="btn text-btn" (click)="navigateToPrivacy()"></button>
<span> | </span>
<button pButton label="{{'footer.imprint' | translate}}" class="btn text-btn" (click)="navigateToImprint()"></button>
</div>
</div>

0
kdb-web/src/app/modules/auth/components/auth-footer/auth-footer.component.scss Normal file
View File

23
kdb-web/src/app/modules/auth/components/auth-footer/auth-footer.component.spec.ts Normal file
View File

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AuthFooterComponent } from './auth-footer.component';
describe('AuthFooterComponent', () => {
let component: AuthFooterComponent;
let fixture: ComponentFixture<AuthFooterComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ AuthFooterComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(AuthFooterComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

32
kdb-web/src/app/modules/auth/components/auth-footer/auth-footer.component.ts Normal file
View File

@ -0,0 +1,32 @@
import { Component, OnInit } from "@angular/core";
import { Router } from "@angular/router";
import { SettingsService } from "../../../../services/settings/settings.service";
@Component({
selector: "app-auth-footer",
templateUrl: "./auth-footer.component.html",
styleUrls: ["./auth-footer.component.scss"]
})
export class AuthFooterComponent implements OnInit {
private privacy: string = "";
private imprint: string = "";
constructor(
private settings: SettingsService
) {
}
ngOnInit(): void {
this.privacy = this.settings.getPrivacyURL();
this.imprint = this.settings.getImprintURL();
}
public navigateToPrivacy(): void {
window.open(this.settings.getPrivacyURL(), "_blank");
}
public navigateToImprint(): void {
window.open(this.settings.getImprintURL(), "_blank");
}
}

16
kdb-web/src/app/modules/auth/components/auth-header/auth-header.component.html
View File

@ -1,10 +1,10 @@
<div class="auth-header">
<div class="logo-button-wrapper">
<button type="button" pButton icon="pi pi-globe" class="btn icon-btn p-button-text" (click)="authLangMenu.toggle($event)"></button>
<p-menu #authLangMenu [popup]="true" [model]="langList" class="lang-menu"></p-menu>
</div>
<div class="logo-button-wrapper">
<button type="button" pButton icon="pi pi-palette" class="btn icon-btn p-button-text" (click)="authThemeMenu.toggle($event)"></button>
<p-menu #authThemeMenu [popup]="true" [model]="themeList" class="theme-menu"></p-menu>
</div>
<div class="logo-button-wrapper">
<button type="button" pButton icon="pi pi-globe" class="btn icon-btn p-button-text" (click)="authLangMenu.toggle($event)"></button>
<p-menu #authLangMenu [popup]="true" [model]="langList" class="lang-menu"></p-menu>
</div>
<div class="logo-button-wrapper">
<button type="button" pButton icon="pi pi-palette" class="btn icon-btn p-button-text" (click)="authThemeMenu.toggle($event)"></button>
<p-menu #authThemeMenu [popup]="true" [model]="themeList" class="theme-menu"></p-menu>
</div>
</div>

33
kdb-web/src/app/modules/auth/components/auth-header/auth-header.component.ts
View File

@ -1,12 +1,10 @@
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { TranslateService, LangChangeEvent } from '@ngx-translate/core';
import { MenuItem, PrimeNGConfig } from 'primeng/api';
import { catchError } from 'rxjs';
import { AuthService } from 'src/app/services/auth/auth.service';
import { SettingsService } from 'src/app/services/settings/settings.service';
import { SpinnerService } from 'src/app/services/spinner/spinner.service';
import { ThemeService } from 'src/app/services/theme/theme.service';
import { Component, OnInit } from "@angular/core";
import { Router } from "@angular/router";
import { TranslateService } from "@ngx-translate/core";
import { MenuItem, PrimeNGConfig } from "primeng/api";
import { SettingsService } from "src/app/services/settings/settings.service";
import { SpinnerService } from "src/app/services/spinner/spinner.service";
import { ThemeService } from "src/app/services/theme/theme.service";
@Component({
selector: 'app-auth-header',
@ -14,9 +12,8 @@ import { ThemeService } from 'src/app/services/theme/theme.service';
styleUrls: ['./auth-header.component.scss']
})
export class AuthHeaderComponent implements OnInit {
langList: MenuItem[] = [];
themeList: MenuItem[] = [];
userMenuList!: MenuItem[];
public langList: MenuItem[] = [];
public themeList: MenuItem[] = [];
constructor(
private router: Router,
@ -27,12 +24,12 @@ export class AuthHeaderComponent implements OnInit {
private config: PrimeNGConfig
) { }
ngOnInit(): void {
public ngOnInit(): void {
this.initMenuLists();
this.loadLang();
}
initMenuLists(): void {
private initMenuLists(): void {
this.langList = [
{
label: 'English', command: () => {
@ -58,16 +55,16 @@ export class AuthHeaderComponent implements OnInit {
});
}
changeTheme(name: string): void {
private changeTheme(name: string): void {
this.themeService.setTheme(name, true);
}
translate(lang: string) {
private translate(lang: string) {
this.translateService.use(lang);
this.translateService.get('primeng').subscribe(res => this.config.setTranslation(res));
}
loadLang(): void {
private loadLang(): void {
let lang = localStorage.getItem(`default_lang`);
if (!lang) {
lang = 'en';
@ -76,7 +73,7 @@ export class AuthHeaderComponent implements OnInit {
this.translate(lang);
}
setLang(lang: string): void {
private setLang(lang: string): void {
localStorage.setItem(`default_lang`, lang);
}

109
kdb-web/src/app/modules/auth/components/forget-password/forget-password.component.html
View File

@ -1,63 +1,64 @@
<section class="login-wrapper">
<div class="login-form-wrapper">
<div class="login-form">
<ng-container *ngIf="resetPasswordId === null; else resetPasswordForm">
<form [formGroup]="emailForm">
<h1>{{'auth.header' | translate}}</h1>
<div *ngIf="!ready" class="input-field">
<input type="email" pInputText formControlName="email"
placeholder="{{'common.email' | translate}}" autocomplete="username email">
</div>
<div *ngIf="ready" class="input-field-info-text">
{{'auth.forgot_password.send_confirmation_url' | translate}}
</div>
<div class="login-form-submit">
<button pButton label="{{'auth.forgot_password.reset_password' | translate}}"
class="btn login-form-submit-btn" (click)="forgotPassword()"
[disabled]="emailForm.invalid || ready"></button>
</div>
<div class="login-form-wrapper">
<div class="login-form">
<ng-container *ngIf="resetPasswordId === null; else resetPasswordForm">
<form [formGroup]="emailForm">
<h1>{{'auth.header' | translate}}</h1>
<div *ngIf="!ready" class="input-field">
<input type="email" pInputText formControlName="email"
placeholder="{{'common.email' | translate}}" autocomplete="username email">
</div>
<div *ngIf="ready" class="input-field-info-text">
{{'auth.forgot_password.send_confirmation_url' | translate}}
</div>
<div class="login-form-submit">
<button pButton label="{{'auth.forgot_password.reset_password' | translate}}"
class="btn login-form-submit-btn" (click)="forgotPassword()"
[disabled]="emailForm.invalid || ready"></button>
</div>
<div class="login-form-sub-button-wrapper">
<div class="login-form-sub-btn-wrapper">
<button pButton label="{{'auth.forgot_password.login' | translate}}"
class="btn login-form-sub-btn" (click)="login()"></button>
</div>
<div class="login-form-sub-btn-wrapper">
<button pButton label="{{'auth.forgot_password.register' | translate}}"
class="btn login-form-sub-btn" (click)="register()"></button>
</div>
</div>
</form>
</ng-container>
<div class="login-form-sub-button-wrapper">
<div class="login-form-sub-btn-wrapper">
<button pButton label="{{'auth.forgot_password.login' | translate}}"
class="btn login-form-sub-btn" (click)="login()"></button>
</div>
<div class="login-form-sub-btn-wrapper">
<button pButton label="{{'auth.forgot_password.register' | translate}}"
class="btn login-form-sub-btn" (click)="register()"></button>
</div>
</div>
</form>
</ng-container>
<ng-template #resetPasswordForm>
<form [formGroup]="passwordForm">
<h1>{{'auth.header' | translate}}</h1>
<ng-template #resetPasswordForm>
<form [formGroup]="passwordForm">
<h1>{{'auth.header' | translate}}</h1>
<div class="input-field">
<input type="password" pInputText formControlName="password"
placeholder="{{'auth.forgot_password.password' | translate}}" autocomplete="new-password">
</div>
<div class="input-field">
<input type="password" pInputText formControlName="password"
placeholder="{{'auth.forgot_password.password' | translate}}" autocomplete="new-password">
</div>
<div class="input-field">
<input type="password" pInputText formControlName="passwordRepeat"
placeholder="{{'auth.forgot_password.repeat_password' | translate}}"
[ngClass]="{ 'invalid-feedback-input': submitted && repeatErrors.password}">
<div *ngIf="submitted" class="invalid-feedback">
<div *ngIf="repeatErrors.password">{{'auth.forgot_password.passwords_do_not_match' |
translate}}</div>
</div>
</div>
<div class="input-field">
<input type="password" pInputText formControlName="passwordRepeat"
placeholder="{{'auth.forgot_password.repeat_password' | translate}}"
[ngClass]="{ 'invalid-feedback-input': submitted && repeatErrors.password}">
<div *ngIf="submitted" class="invalid-feedback">
<div *ngIf="repeatErrors.password">{{'auth.forgot_password.passwords_do_not_match' |
translate}}</div>
</div>
</div>
<div class="login-form-submit">
<button pButton label="{{'auth.forgot_password.reset_password' | translate}}"
class="btn login-form-submit-btn" (click)="resetPassword()"
[disabled]="passwordForm.invalid || ready"></button>
</div>
</form>
</ng-template>
</div>
<div class="login-form-submit">
<button pButton label="{{'auth.forgot_password.reset_password' | translate}}"
class="btn login-form-submit-btn" (click)="resetPassword()"
[disabled]="passwordForm.invalid || ready"></button>
</div>
</form>
</ng-template>
</div>
</div>
<app-auth-header></app-auth-header>
<app-auth-header></app-auth-header>
<app-auth-footer></app-auth-footer>
</section>

1
kdb-web/src/app/modules/auth/components/login/login.component.html
View File

@ -62,4 +62,5 @@
</div>
<app-auth-header></app-auth-header>
<app-auth-footer></app-auth-footer>
</section>

1
kdb-web/src/app/modules/auth/components/registration/registration.component.html
View File

@ -82,4 +82,5 @@
</div>
<app-auth-header></app-auth-header>
<app-auth-footer></app-auth-footer>
</section>

14
kdb-web/src/styles.scss
View File

@ -100,6 +100,9 @@ header {
}
}
.auth-footer {
}
.app {
height: 100%;
display: flex;
@ -474,6 +477,9 @@ footer {
.right {
width: 50%;
text-align: right;
.p-button-label {
font-weight: unset !important;
}
}
}
@ -488,7 +494,8 @@ footer {
gap: 15px;
.login-form-wrapper,
.auth-header {
.auth-header,
.auth-footer {
width: 350px;
height: 450px;
@ -549,6 +556,11 @@ footer {
width: 350px;
height: 75px;
}
.auth-footer {
width: 350px;
height: 75px;
}
}
.input-field {

4
kdb-web/src/styles/themes/default-dark-theme.scss
View File

@ -231,8 +231,10 @@
background-color: $secondaryBackgroundColor;
.login-form-wrapper,
.auth-header {
.auth-header,
.auth-footer {
background-color: $primaryBackgroundColor;
color: $primaryTextColor !important;
.login-form {
.input-field {

4
kdb-web/src/styles/themes/default-light-theme.scss
View File

@ -231,8 +231,10 @@
background-color: $secondaryBackgroundColor;
.login-form-wrapper,
.auth-header {
.auth-header,
.auth-footer {
background-color: $primaryBackgroundColor;
color: $primaryTextColor !important;
.login-form {
.input-field {

4
kdb-web/src/styles/themes/sh-edraft-dark-theme.scss
View File

@ -235,8 +235,10 @@
background-color: $secondaryBackgroundColor;
.login-form-wrapper,
.auth-header {
.auth-header,
.auth-footer {
background-color: $primaryBackgroundColor;
color: $primaryTextColor !important;
.login-form {
.input-field {

4
kdb-web/src/styles/themes/sh-edraft-light-theme.scss
View File

@ -231,8 +231,10 @@
background-color: $secondaryBackgroundColor;
.login-form-wrapper,
.auth-header {
.auth-header,
.auth-footer {
background-color: $primaryBackgroundColor;
color: $primaryTextColor !important;
.login-form {
.input-field {