Skip to content

Commit

Permalink
Lucas Frontend Redesign
Browse files Browse the repository at this point in the history
  • Loading branch information
@Tristan-H11
Tristan-H11 authored Apr 7, 2024
2 parents 5735c23 + f88c85c commit 155556c
Show file tree
Hide file tree
Showing 23 changed files with 530 additions and 239 deletions.
15 changes: 11 additions & 4 deletions GUI/src/app/app-routing.module.ts
View file
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
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
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
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
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
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

0 comments on commit 155556c

Please sign in to comment.