Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Redesign Frontend: #133

Merged
merged 8 commits into from
Apr 7, 2024
Merged

Redesign Frontend: #133

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c8a57dd
Redesign Frontend:
Felefix201 Apr 7, 2024
11c7ee6
Optimize Frontend:
Felefix201 Apr 7, 2024
33fd5f6
Image for Navbar
Felefix201 Apr 7, 2024
82c7486
Remove new Person from RSA to Homescreen
Felefix201 Apr 7, 2024
ec5c741
Remove Interface from Menezes-Vanstone and put it into the Client Model
Felefix201 Apr 7, 2024
0c2acab
Comment
Felefix201 Apr 7, 2024
c67cbde
Dinge
Felefix201 Apr 7, 2024
f88c85c
Merge branch 'Tristan-H11:master' into master
Felefix201 Apr 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 11 additions & 4 deletions GUI/src/app/app-routing.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,37 @@
import {NgModule} from "@angular/core";
import {RouterModule, Routes} from "@angular/router";
import {StartseiteComponent} from "./startseite/startseite.component";
import {HomepageComponent} from "./homepage/homepage.component";
import {ExponentiationComponent} from "./exponentiation/exponentiation.component";
import {ExtendedGcdComponent} from "./extendedgcd/extended-gcd.component";
import {ShanksComponent} from "./shanks/shanks.component";
import {ClientComponent} from "./client/client.component";
import {ModularInverseComponent} from "./modular-inverse/modular-inverse.component";
import {MultiplicationComponent} from "./multiplication/multiplication.component";
import {MenezesVanstoneComponent} from "./menezes-vanstone/menezes-vanstone.component";
import {RsaComponent} from "./rsa/rsa.component";

/**
* Defines the routes of the application.
* The routing takes place in navbar.component.html and homepage.html
*/
export const routes: Routes = [
{path: "startseite", component: StartseiteComponent},
{path: "homepage", component: HomepageComponent},
{path: "client/:client", component: ClientComponent},
{path: "menezesVanstone", component: MenezesVanstoneComponent},
{path: "rsa", component: RsaComponent},
{path: "exponentiation", component: ExponentiationComponent},
{path: "extendedGcd", component: ExtendedGcdComponent},
{path: "shanks", component: ShanksComponent},
{path: "modularInverse", component: ModularInverseComponent},
{path: `multiplication`, component: MultiplicationComponent},
{path: "", redirectTo: "/startseite", pathMatch: "full"},
{path: "**", component: StartseiteComponent}
{path: "", redirectTo: "/homepage", pathMatch: "full"},
{path: "**", component: HomepageComponent}
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})

export class AppRoutingModule {
}
57 changes: 10 additions & 47 deletions GUI/src/app/app.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,54 +1,18 @@
<mat-sidenav-container *ngIf="isServerReachable" class="global-container">
<mat-sidenav class="sidenav" mode="side" opened>
<div class="inner-sidenav-container">
<button mat-stroked-button
*ngIf="!isTurboMode"
(click)="toggleTurboMode()"
class="turbo-toggle-button">
Normaler Modus aktiv
</button>
<button mat-flat-button
*ngIf="isTurboMode"
(click)="toggleTurboMode()"
class="turbo-toggle-button"
color="warn">
Turbo Modus aktiv
</button>
<div class="sidenav-header">

<div>Encryption Tool</div>
</div>

<button mat-stroked-button routerLink="/startseite">Startseite</button>
<mat-divider></mat-divider>
<div class="sidenav-client-button-container">
<button *ngFor="let client of getClients()" color="primary" mat-raised-button
routerLink="/client/{{client.name}}">{{client.name}}</button>
</div>
<mat-divider></mat-divider>
<button mat-stroked-button routerLink="/exponentiation">Exponentiation</button>
<mat-divider></mat-divider>
<button mat-stroked-button routerLink="/extendedGcd">Extended GCD</button>
<mat-divider></mat-divider>
<button mat-stroked-button routerLink="/shanks">Shanks</button>
<mat-divider></mat-divider>
<button mat-stroked-button routerLink="/modularInverse">Modulo Inverse</button>
<mat-divider></mat-divider>
<button mat-stroked-button routerLink="/multiplication">Multiplikation</button>
<mat-divider></mat-divider>
<button mat-stroked-button routerLink="/menezesVanstone">MenezesVanstone</button>

<div class="sidenav-footer">
<mat-divider></mat-divider>
Integrationsprojekt Kryptographie
</div>
</div>
<!--
If the server is reachable, the navbar and the main content are displayed.
-->
<mat-sidenav-container *ngIf="isServerReachable" class="sidenav-container">
<mat-sidenav mode="side" opened class="sidenav">
<app-navbar></app-navbar>
</mat-sidenav>
<mat-sidenav-content class="sidenav-content">
<mat-sidenav-content class="main-content">
<router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>

<!--
If the server is not reachable, a message is displayed to the user.
-->
<div *ngIf="!isServerReachable" class="big-server-not-reachable-text">
Der Server ist derzeit nicht erreichbar.
<br><br>
Expand All @@ -61,5 +25,4 @@
</mat-form-field>
<!-- Button zum Speichern der server IP -->
<button mat-raised-button (click)="saveServerURL()">Speichern</button>

</div>
81 changes: 10 additions & 71 deletions GUI/src/app/app.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,86 +1,25 @@
.global-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
// Style for the app component

.sidenav-header {
font-size: 1.8vw;
.big-server-not-reachable-text {
font-size: 2.5vh;
font-weight: bold;
margin-bottom: 1vw;
margin-top: 1vw;
text-align: center;
margin-top: 40vh;
}

.sidenav-header > div {
line-height: 3vh;
}

.sidenav-logo {
width: 100%;
margin-bottom: 1vh;
}

.sidenav-content {
.main-content {
height: 96vh;
width: 77vw;
background-color: #eee;
padding: 2vh 2vw;
}

.sidenav-footer {
margin-top: auto;
width: 100%;
text-align: center;
font-size: 1.2vh;
}

.inner-sidenav-container {
height: 100%;
.sidenav-container {
height: 100vh;
display: flex;
flex-direction: column;
row-gap: 1vh;
overflow: hidden;
flex-direction: row;
}

.sidenav {
height: 100%;
width: 19vw;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #fff;
padding: 2vh 2vw;
}

.sidenav button {
width: 100%;
cursor: pointer;
font-size: 1.8vh;
padding: 2vh 2vw;
}

.sidenav-client-button-container {
display: flex;
flex-direction: column;
row-gap: 1vh;
justify-content: flex-end;
}

.big-server-not-reachable-text {
font-size: 2.5vh;
font-weight: bold;
text-align: center;
margin-top: 40vh;
}

.turbo-toggle-button {
display: flex;
width: 1vw;
height: 1vh;
font-size: 1.8vh;
cursor: pointer;
}
width: 20vw;
}
102 changes: 49 additions & 53 deletions GUI/src/app/app.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {Component, OnInit, signal} from "@angular/core";
import {Component, OnInit} from "@angular/core";
import {CommonModule} from "@angular/common";
import {RouterLink, RouterOutlet} from "@angular/router";
import {MatSidenavModule} from "@angular/material/sidenav";
Expand All @@ -7,15 +7,15 @@ import {MatDividerModule} from "@angular/material/divider";
import {MatButtonModule} from "@angular/material/button";
import {RsaBackendRequestService} from "./services/backend-api/rsa-backend-request.service";
import {MatSnackBar} from "@angular/material/snack-bar";
import {Client} from "./models/client";
import {StateManagementService} from "./services/management/state-management.service";
import {MatSlideToggleModule} from "@angular/material/slide-toggle";
import {FormsModule} from "@angular/forms";
import {MatInputModule} from "@angular/material/input";
import {NavbarComponent} from "./navbar/navbar.component";

@Component({
selector: "app-root",
standalone: true,
selector: "app-root",
standalone: true,
imports: [
CommonModule,
RouterOutlet,
Expand All @@ -27,66 +27,62 @@ import {MatInputModule} from "@angular/material/input";
MatSlideToggleModule,
FormsModule,
MatInputModule,
NavbarComponent,
],
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"]
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"]
})

/**
* Main Component of the application.
* The component is responsible for the initialization of the application and the server connection.
* The server connection is checked at the beginning of the application.
* The server URL can be changed in the settings.
* The server URL is saved in the local storage.
* The routing to Navbar and Homepage is done in the html file of app.component.html
*/
export class AppComponent implements OnInit {

public isServerReachable: boolean = false;
public serverURL: string = this.stateService.getServerUrl()();
public isServerReachable: boolean = false;
public serverURL: string = this.stateService.getServerUrl()();

public get isTurboMode(): boolean {
return this.stateService.getUseFastMath()();
constructor(private backendRequestService: RsaBackendRequestService,
private stateService: StateManagementService,
private snackBar: MatSnackBar) {
}

public set isTurboMode(useFastMath: boolean) {
this.stateService.getUseFastMath().update(value => useFastMath);
/**
* Initialize the clients and check the server connection.
*/
ngOnInit(): void {
this.stateService.createClient("Alice");
this.stateService.createClient("Bob");
this.backendRequestService.checkHealth().then((result) => {
this.isServerReachable = result;
});
}

constructor(private backendRequestService: RsaBackendRequestService,
private stateService: StateManagementService,
private snackBar: MatSnackBar) {
}

ngOnInit(): void {
this.stateService.createClient("Alice");
this.stateService.createClient("Bob");

this.backendRequestService.checkHealth().then((result) => {
this.isServerReachable = result;
});
}

/**
* Schaltet den Turbo-Modus um.
* Check the server connection.
*/
public toggleTurboMode() {
this.isTurboMode = !this.isTurboMode;
public checkServerConnection() {
this.backendRequestService.checkHealth().then((result) => {
if (result) {
this.snackBar.open("Server ist erreichbar!", "OK", {duration: 4000});
} else {
this.snackBar.open("Server ist nicht erreichbar!", "OK", {duration: 4000});
}
});
}

/**
* Prüft die Erreichbarkeit des Servers.
*/
public checkServerConnection() {
this.backendRequestService.checkHealth().then((result) => {
if (result) {
this.snackBar.open("Server ist erreichbar!", "OK", {duration: 4000});
} else {
this.snackBar.open("Server ist nicht erreichbar!", "OK", {duration: 4000});
}
});
}

public getClients(): Set<Client> {
return this.stateService.getAllClients();
}

public saveServerURL() {
this.stateService.setServerUrl(this.serverURL);
this.snackBar.open("Server URL gespeichert!", "OK", {duration: 4000});
setTimeout(() => {
this.checkServerConnection();
}, 4000);
}
/**
* Save the server URL in the local storage.
*/
public saveServerURL() {
this.stateService.setServerUrl(this.serverURL);
this.snackBar.open("Server URL gespeichert!", "OK", {duration: 4000});
setTimeout(() => {
this.checkServerConnection();
}, 4000);
}
}
9 changes: 8 additions & 1 deletion GUI/src/app/app.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,13 @@ import {routes} from './app-routing.module';
import {provideAnimations} from '@angular/platform-browser/animations';
import {provideHttpClient} from "@angular/common/http";

/**
* Configuration for the application.
* providers: List of providers for the application.
* provideAnimations: Provider for the animations.
* provideHttpClient: Provider for the HttpClient.
* provideRouter: Provider for the router.
*/
export const appConfig: ApplicationConfig = {
providers: [provideRouter(routes), provideAnimations(), provideHttpClient()]
providers: [provideRouter(routes), provideAnimations(), provideHttpClient()]
};
22 changes: 22 additions & 0 deletions GUI/src/app/homepage/homepage.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<mat-accordion multi>
<div class="encription-container">
<mat-expansion-panel expanded>
<mat-expansion-panel-header>
<mat-panel-title>
<!-- todo, text auslagern in component für besseres databinding (two-way-binding)-->
Wählen Sie eine Art ver Verschlüsselung aus
</mat-panel-title>
</mat-expansion-panel-header>

<div class="button-container">
<button mat-raised-button routerLink="/menezesVanstone" color="primary">Menezes-Vanstone</button>
<button mat-raised-button routerLink="/rsa" color="primary">RSA</button>
</div>
</mat-expansion-panel>
</div>
</mat-accordion>
<div class="element-below-accordion-container">
<button mat-fab color="primary" (click)="openNameInputDialog()">
<mat-icon>person_add</mat-icon>
</button>
</div>
Loading
Loading