Datenschutz und Impressum angeben #251 #252
| @@ -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,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"); | ||||
|   } | ||||
|  | ||||
| } | ||||
|   | ||||
| @@ -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, | ||||
|   | ||||
| @@ -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,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(); | ||||
|   }); | ||||
| }); | ||||
| @@ -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"); | ||||
|   } | ||||
|  | ||||
| } | ||||
| @@ -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> | ||||
|   <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> | ||||
|   | ||||
| @@ -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); | ||||
|   } | ||||
|  | ||||
|   | ||||
| @@ -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> | ||||
|   | ||||
| @@ -62,4 +62,5 @@ | ||||
|   </div> | ||||
|  | ||||
|   <app-auth-header></app-auth-header> | ||||
|   <app-auth-footer></app-auth-footer> | ||||
| </section> | ||||
|   | ||||
| @@ -82,4 +82,5 @@ | ||||
|   </div> | ||||
|  | ||||
|   <app-auth-header></app-auth-header> | ||||
|   <app-auth-footer></app-auth-footer> | ||||
| </section> | ||||
|   | ||||
| @@ -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 { | ||||
|   | ||||
| @@ -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 { | ||||
|   | ||||
| @@ -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 { | ||||
|   | ||||
| @@ -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 { | ||||
|   | ||||
| @@ -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 { | ||||
|   | ||||
		Reference in New Issue
	
	Block a user