leon.hoppe/ProjectManager
Archived
Private
Public Access
1
0
Fork 0
Code Activity

Fixed minor issues + added language support

Browse Source
This commit is contained in:
Leon Hoppe
2023-03-25 18:36:19 +01:00
parent 4422d8818a
commit 6dfb5a4b48
23 changed files with 334 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
ProjectManager.Frontend/src/app/sites/dashboard/dashboard.component.html
View File

@@ -1,9 +1,9 @@
<section id="main">
<h1 id="welcome">Willkommen {{crud.user.username}}</h1>
<h1 id="welcome">{{langs.currentLang?.welcome}} {{crud.user.username}}</h1>
<h2 id="title">Projekte</h2>
<h2 id="title">{{langs.currentLang?.projects}}</h2>
<div id="projects">
<span *ngIf="projects.projects.length == 0 && crud.user != undefined" class="disabled">Du hast noch keine Projekte erstellt</span>
<span *ngIf="projects.projects.length == 0 && crud.user != undefined" class="disabled">{{langs.currentLang?.noProjects}}</span>
<mat-card *ngFor="let project of projects.projects" class="project">
<mat-card-header>
<mat-card-title>{{project.name}}</mat-card-title>
@@ -11,9 +11,9 @@
</mat-card-header>
<mat-card-actions>
<button mat-button color="primary" (click)="router.navigate(['/project', project.projectId])">Öffnen</button>
<button mat-button color="accent" (click)="editProject(project.projectId)">Bearbeiten</button>
<button mat-button color="warn" (click)="deleteProject(project.projectId)">Löschen</button>
<button mat-button color="primary" (click)="openProject(project.projectId)">{{langs.currentLang?.open}}</button>
<button mat-button color="accent" (click)="editProject(project.projectId)">{{langs.currentLang?.edit}}</button>
<button mat-button color="warn" (click)="deleteProject(project.projectId)">{{langs.currentLang?.delete}}</button>
<button mat-icon-button color="warn" *ngIf="project.running" (click)="updateProjectStatus(project.projectId, false)"><mat-icon>pause</mat-icon></button>
<button mat-icon-button color="accent" *ngIf="!project.running" (click)="updateProjectStatus(project.projectId, true)"><mat-icon>play_arrow</mat-icon></button>

17
ProjectManager.Frontend/src/app/sites/dashboard/dashboard.component.ts
View File

@@ -1,4 +1,4 @@
import { Component } from '@angular/core';
import {Component, OnInit} from '@angular/core';
import {ProjectService} from "../../services/project.service";
import {CrudService} from "../../services/crud.service";
import {Router} from "@angular/router";
@@ -8,6 +8,9 @@ import {firstValueFrom} from "rxjs";
import {MatSnackBar} from "@angular/material/snack-bar";
import {TextDialogComponent} from "../../components/text-dialog/text-dialog.component";
import {NavigationComponent} from "../../components/navigation/navigation.component";
import {Project} from "../../entities/project";
import {LangService} from "../../services/lang.service";
import {Language} from "../../entities/language";
@Component({
selector: 'app-dashboard',
@@ -16,7 +19,17 @@ import {NavigationComponent} from "../../components/navigation/navigation.compon
})
export class DashboardComponent {
public constructor(public crud: CrudService, public projects: ProjectService, public router: Router, private dialog: MatDialog, private snackBar: MatSnackBar) {}
public constructor(public langs: LangService, public crud: CrudService, public projects: ProjectService, public router: Router, private dialog: MatDialog, private snackBar: MatSnackBar) {}
public async openProject(projectId: string) {
const response = await this.crud.sendGetRequest<{url: string}>('projects/' + projectId + '/url/string');
const url = response.content.url;
if (!url.startsWith("https")) {
window.open(`${this.crud.backendUrl}projects/${projectId}/url?token=${this.crud.authKey}`, '_blank').focus();
} else {
await this.router.navigate(['/project', projectId]);
}
}
public async editProject(projectId: string) {
const dialogRef = this.dialog.open(TextDialogComponent, {

16
ProjectManager.Frontend/src/app/sites/login/login.component.html
View File

@@ -1,29 +1,29 @@
<mat-card>
<mat-card-title>Einloggen</mat-card-title>
<mat-card-title>{{langs.currentLang?.login}}</mat-card-title>
<mat-divider></mat-divider>
<mat-card-content>
<form [formGroup]="form" (ngSubmit)="submit()">
<mat-form-field>
<mat-label>E-Mail</mat-label>
<mat-label>{{langs.currentLang?.email}}</mat-label>
<input type="text" matInput formControlName="email" required>
<mat-error *ngIf="form.hasError('required', 'email')">E-Mail ist erforderlich</mat-error>
<mat-error *ngIf="form.hasError('required', 'email')">{{langs.currentLang?.email}} {{langs.currentLang?.isRequired}}</mat-error>
<mat-error *ngIf="form.hasError('email', 'email') && !form.hasError('required', 'email')">
Bitte geben Sie eine gültige E-Mail-Adresse ein
{{langs.currentLang?.validEmail}}
</mat-error>
</mat-form-field>
<mat-form-field>
<mat-label>Passwort</mat-label>
<mat-label>{{langs.currentLang?.password}}</mat-label>
<input type="password" matInput formControlName="password" required>
<mat-error *ngIf="form.hasError('required', 'password')">Passwort ist erforderlich</mat-error>
<mat-error *ngIf="form.hasError('required', 'password')">{{langs.currentLang?.password}} {{langs.currentLang?.isRequired}}</mat-error>
</mat-form-field>
<mat-divider></mat-divider>
<span>Du besitzt keinen Account? <a routerLink="/register">Registrieren</a></span>
<span>{{langs.currentLang?.noAccount}} <a routerLink="/register">{{langs.currentLang?.register}}</a></span>
<mat-error *ngIf="error">{{error}}</mat-error>
<button type="submit" mat-button>Einloggen</button>
<button type="submit" mat-button>{{langs.currentLang?.login}}</button>
</form>
</mat-card-content>
</mat-card>

8
ProjectManager.Frontend/src/app/sites/login/login.component.ts
View File

@@ -1,8 +1,10 @@
import {Component} from '@angular/core';
import {Component, OnInit} from '@angular/core';
import {FormControl, FormGroup, Validators} from "@angular/forms";
import {CrudService} from "../../services/crud.service";
import {User} from "../../entities/user";
import {Router} from "@angular/router";
import {Language} from "../../entities/language";
import {LangService} from "../../services/lang.service";
@Component({
selector: 'app-login',
@@ -16,7 +18,7 @@ export class LoginComponent {
});
public error: string;
public constructor(private crud: CrudService, private router: Router) {
public constructor(public langs: LangService, private crud: CrudService, private router: Router) {
this.form.reset();
this.error = "";
}
@@ -33,7 +35,7 @@ export class LoginComponent {
await this.crud.loadUser(true);
await this.router.navigate(["/dashboard"]);
}else {
this.error = "E-Mail oder Passwort ist falsch";
this.error = this.langs.currentLang.emailOrPasswordWrong;
}
}
}

30
ProjectManager.Frontend/src/app/sites/profile/profile.component.html
View File

@@ -1,46 +1,46 @@
<mat-card id="content">
<mat-card-header>
<mat-card-title>Profil</mat-card-title>
<mat-card-subtitle>Einstellungen</mat-card-subtitle>
<mat-card-title>{{langs.currentLang?.profile}}</mat-card-title>
<mat-card-subtitle>{{langs.currentLang?.profileSub}}</mat-card-subtitle>
</mat-card-header>
<mat-card-content id="main">
<form [formGroup]="form" (ngSubmit)="update()" id="form">
<mat-form-field>
<mat-label>E-Mail</mat-label>
<mat-label>{{langs.currentLang?.email}}</mat-label>
<input type="text" matInput formControlName="email" required>
<mat-error *ngIf="form.hasError('required', 'email')">E-Mail ist erforderlich</mat-error>
<mat-error *ngIf="form.hasError('required', 'email')">{{langs.currentLang?.email}} {{langs.currentLang?.isRequired}}</mat-error>
<mat-error *ngIf="form.hasError('email', 'email') && !form.hasError('required', 'email')">
Bitte geben Sie eine gültige E-Mail-Adresse ein
{{langs.currentLang?.validEmail}}
</mat-error>
<mat-error *ngIf="form.hasError('maxlength', 'email') && !form.hasError('required', 'email')">
Der eingegebene Wert ist zu lang
{{langs.currentLang?.valueToLong}}
</mat-error>
</mat-form-field>
<mat-form-field>
<mat-label>Benutzername</mat-label>
<mat-label>{{langs.currentLang?.username}}</mat-label>
<input type="text" matInput formControlName="username" required>
<mat-error *ngIf="form.hasError('required', 'username')">Benutzername ist erforderlich</mat-error>
<mat-error *ngIf="form.hasError('required', 'username')">{{langs.currentLang?.username}} {{langs.currentLang?.isRequired}}</mat-error>
<mat-error *ngIf="form.hasError('maxlength', 'username') && !form.hasError('required', 'username')">
Der eingegebene Wert ist zu lang
{{langs.currentLang?.valueToLong}}
</mat-error>
</mat-form-field>
<div>
<mat-form-field>
<mat-label>Passwort</mat-label>
<mat-label>{{langs.currentLang?.password}}</mat-label>
<input type="password" matInput formControlName="password">
<mat-error *ngIf="form.hasError('maxlength', 'password')">
Der eingegebene Wert ist zu lang
{{langs.currentLang?.valueToLong}}
</mat-error>
</mat-form-field>
<mat-form-field>
<mat-label>Passwort wiederholen</mat-label>
<mat-label>{{langs.currentLang?.passwordRepeat}}</mat-label>
<input type="password" matInput formControlName="passwordRepeat">
<mat-error *ngIf="form.hasError('maxlength', 'passwordRepeat')">
Der eingegebene Wert ist zu lang
{{langs.currentLang?.valueToLong}}
</mat-error>
</mat-form-field>
</div>
@@ -51,7 +51,7 @@
</mat-card-content>
<mat-card-actions id="actions">
<button mat-button color="primary" (click)="update()">Account aktualisieren</button>
<button mat-button color="warn" (click)="delete()">Account löschen</button>
<button mat-button color="primary" (click)="update()">{{langs.currentLang?.updateAccount}}</button>
<button mat-button color="warn" (click)="delete()">{{langs.currentLang?.deleteAccount}}</button>
</mat-card-actions>
</mat-card>

22
ProjectManager.Frontend/src/app/sites/profile/profile.component.ts
View File

@@ -1,4 +1,4 @@
import {Component} from '@angular/core';
import {Component, OnInit} from '@angular/core';
import {CrudService} from "../../services/crud.service";
import {FormControl, FormGroup, Validators} from "@angular/forms";
import {MatDialog} from "@angular/material/dialog";
@@ -7,6 +7,8 @@ import {firstValueFrom} from "rxjs";
import {User} from "../../entities/user";
import {MatSnackBar} from "@angular/material/snack-bar";
import {Router} from "@angular/router";
import {Language} from "../../entities/language";
import {LangService} from "../../services/lang.service";
@Component({
selector: 'app-profile',
@@ -22,14 +24,14 @@ export class ProfileComponent {
});
public error: string;
public constructor(public crud: CrudService, private router: Router, public dialog: MatDialog, private snackBar: MatSnackBar) {
public constructor(public langs: LangService, public crud: CrudService, private router: Router, public dialog: MatDialog, private snackBar: MatSnackBar) {
this.form.get("email").setValue(this.crud.user?.email);
this.form.get("username").setValue(this.crud.user?.username);
}
public async update() {
if (!this.form.valid) return;
const result = await this.openDialog("Änderungen speichern?");
const result = await this.openDialog(this.langs.currentLang?.saveChanges);
if (!result) return;
this.error = "";
@@ -39,7 +41,7 @@ export class ProfileComponent {
const passwordRepeat = this.form.get("passwordRepeat").value;
if (password != passwordRepeat) {
this.error = "Passwörter stimmen nicht überein";
this.error = this.langs.currentLang?.passwordsDontMatch;
return;
}
@@ -47,25 +49,25 @@ export class ProfileComponent {
const response = await this.crud.sendPutRequest("users", user);
if (!response.success) {
this.error = "Aktualiserung fehlgeschlagen!";
this.error = this.langs.currentLang?.updateFailed;
return;
}
await this.crud.loadUser(true);
this.form.reset();
this.snackBar.open("Account aktualisiert!", undefined, {duration: 2000});
this.snackBar.open(this.langs.currentLang?.updateAccount, undefined, {duration: 2000});
await this.router.navigate(["dashboard"]);
}
public async delete() {
const result = await this.openDialog("Möchtest du deinen Account wirklich löschen?", "All deine Projekte werden für immer gelöscht!", ['', 'warn']);
const result = await this.openDialog(this.langs.currentLang?.deleteQuestion, this.langs.currentLang?.deleteWarning, ['', 'warn']);
if (!result) return;
await this.crud.sendDeleteRequest("users");
this.crud.setAuthKey(undefined);
this.crud.user = undefined;
this.snackBar.open("Account gelöscht!", undefined, {duration: 2000});
this.snackBar.open(this.langs.currentLang?.accountDeleted, undefined, {duration: 2000});
await this.router.navigate(["login"]);
}
@@ -75,8 +77,8 @@ export class ProfileComponent {
return new Promise<boolean>(async (resolve) => {
const dialogRef = this.dialog.open(DialogComponent, {
data: {title, subtitle, buttons: [
{text: "Abbrechen", value: false, color: colors[0]},
{text: "Bestätigen", value: true, color: colors[1]},
{text: this.langs.currentLang?.cancel, value: false, color: colors[0]},
{text: this.langs.currentLang?.submit, value: true, color: colors[1]},
]}
});

32
ProjectManager.Frontend/src/app/sites/register/register.component.html
View File

@@ -1,53 +1,53 @@
<mat-card>
<mat-card-title>Registrieren</mat-card-title>
<mat-card-title>{{langs.currentLang?.register}}</mat-card-title>
<mat-divider></mat-divider>
<mat-card-content>
<form [formGroup]="form" (ngSubmit)="submit()">
<mat-form-field>
<mat-label>E-Mail</mat-label>
<mat-label>{{langs.currentLang?.email}}</mat-label>
<input type="text" matInput formControlName="email" required>
<mat-error *ngIf="form.hasError('required', 'email')">E-Mail ist erforderlich</mat-error>
<mat-error *ngIf="form.hasError('required', 'email')">{{langs.currentLang?.email}} {{langs.currentLang?.isRequired}}</mat-error>
<mat-error *ngIf="form.hasError('email', 'email') && !form.hasError('required', 'email')">
Bitte geben Sie eine gültige E-Mail-Adresse ein
{{langs.currentLang?.validEmail}}
</mat-error>
<mat-error *ngIf="form.hasError('maxlength', 'email') && !form.hasError('required', 'email')">
Der eingegebene Wert ist zu lang
{{langs.currentLang?.valueToLong}}
</mat-error>
</mat-form-field>
<mat-form-field>
<mat-label>Benutzername</mat-label>
<mat-label>{{langs.currentLang?.username}}</mat-label>
<input type="text" matInput formControlName="username" required>
<mat-error *ngIf="form.hasError('required', 'username')">Benutzername ist erforderlich</mat-error>
<mat-error *ngIf="form.hasError('required', 'username')">{{langs.currentLang?.username}} {{langs.currentLang?.isRequired}}</mat-error>
<mat-error *ngIf="form.hasError('maxlength', 'username') && !form.hasError('required', 'username')">
Der eingegebene Wert ist zu lang
{{langs.currentLang?.valueToLong}}
</mat-error>
</mat-form-field>
<mat-form-field>
<mat-label>Passwort</mat-label>
<mat-label>{{langs.currentLang?.password}}</mat-label>
<input type="password" matInput formControlName="password" required>
<mat-error *ngIf="form.hasError('required', 'password')">Passwort ist erforderlich</mat-error>
<mat-error *ngIf="form.hasError('required', 'password')">{{langs.currentLang?.password}} {{langs.currentLang?.isRequired}}</mat-error>
<mat-error *ngIf="form.hasError('maxlength', 'password') && !form.hasError('required', 'password')">
Der eingegebene Wert ist zu lang
{{langs.currentLang?.valueToLong}}
</mat-error>
</mat-form-field>
<mat-form-field>
<mat-label>Passwort wiederholen</mat-label>
<mat-label>{{langs.currentLang?.passwordRepeat}}</mat-label>
<input type="password" matInput formControlName="passwordRepeat" required>
<mat-error *ngIf="form.hasError('required', 'passwordRepeat')">Passwort ist erforderlich</mat-error>
<mat-error *ngIf="form.hasError('required', 'passwordRepeat')">{{langs.currentLang?.password}} {{langs.currentLang?.isRequired}}</mat-error>
<mat-error *ngIf="form.hasError('maxlength', 'passwordRepeat') && !form.hasError('required', 'passwordRepeat')">
Der eingegebene Wert ist zu lang
{{langs.currentLang?.valueToLong}}
</mat-error>
</mat-form-field>
<mat-divider></mat-divider>
<span>Du hast bereits einen Account? <a routerLink="/login">Einloggen</a></span>
<span>{{langs.currentLang?.alreadyAccount}} <a routerLink="/login">{{langs.currentLang?.login}}</a></span>
<mat-error *ngIf="error">{{error}}</mat-error>
<button type="submit" mat-button>Registrieren</button>
<button type="submit" mat-button>{{langs.currentLang?.register}}</button>
</form>
</mat-card-content>
</mat-card>

10
ProjectManager.Frontend/src/app/sites/register/register.component.ts
View File

@@ -1,8 +1,10 @@
import { Component } from '@angular/core';
import {Component, OnInit} from '@angular/core';
import {FormControl, FormGroup, Validators} from "@angular/forms";
import {CrudService} from "../../services/crud.service";
import {Router} from "@angular/router";
import {User} from "../../entities/user";
import {Language} from "../../entities/language";
import {LangService} from "../../services/lang.service";
@Component({
selector: 'app-register',
@@ -18,7 +20,7 @@ export class RegisterComponent {
});
public error: string;
public constructor(private crud: CrudService, private router: Router) {}
public constructor(public langs: LangService, private crud: CrudService, private router: Router) {}
public async submit() {
this.error = "";
@@ -28,14 +30,14 @@ export class RegisterComponent {
const passwordRepeat = this.form.get("passwordRepeat").value;
if (password != passwordRepeat) {
this.error = "Passwörter stimmen nicht überein";
this.error = this.langs.currentLang?.passwordsDontMatch;
return;
}
const user: User = {email, username, password};
const result = await this.crud.sendPostRequest<{token: string}>("users/register", user);
if (!result.success) {
this.error = "Registrierung fehlgeschlagen";
this.error = this.langs.currentLang?.registerFailed;
return;
}