Skip to content

Commit 4c4ffb5

Browse files
ivanovmasaivanovmasa
authored
Merge pull request #7 from ftn-projects/fix/material-module
Fix material module
2 parents e45bc48 + a8efc3d commit 4c4ffb5

10 files changed

Lines changed: 1241 additions & 418 deletions

‎MiniKmsClient/package-lock.json‎

Lines changed: 894 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎MiniKmsClient/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,12 @@
1111
"private": true,
1212
"dependencies": {
1313
"@angular/animations": "^17.0.0",
14+
"@angular/cdk": "^17.3.10",
1415
"@angular/common": "^17.0.0",
1516
"@angular/compiler": "^17.0.0",
1617
"@angular/core": "^17.0.0",
1718
"@angular/forms": "^17.0.0",
19+
"@angular/material": "^17.3.10",
1820
"@angular/platform-browser": "^17.0.0",
1921
"@angular/platform-browser-dynamic": "^17.0.0",
2022
"@angular/router": "^17.0.0",

‎MiniKmsClient/src/app/app-routing.module.ts‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,27 @@
11
import { NgModule } from '@angular/core';
22
import { RouterModule, Routes } from '@angular/router';
3+
import { authGuard } from './auth/auth.guard';
4+
import { ManageKeysComponent } from './manage-keys/manage-keys.component';
5+
import { LoginComponent } from './login/login.component';
6+
import { CryptoComponent } from './crypto/crypto.component';
37

4-
const routes: Routes = [];
8+
const routes: Routes = [
9+
{ path: '', redirectTo: '/login', pathMatch: 'full' },
10+
{ path: 'login', component: LoginComponent },
11+
{
12+
path: 'manage-keys',
13+
component: ManageKeysComponent,
14+
canActivate: [authGuard],
15+
data: { roles: ['manager'] }
16+
},
17+
{
18+
path: 'crypto',
19+
component: CryptoComponent,
20+
canActivate: [authGuard],
21+
data: { roles: ['manager', 'user'] }
22+
},
23+
{ path: '**', redirectTo: '/login' }
24+
];
525

626
@NgModule({
727
imports: [RouterModule.forRoot(routes)],

‎MiniKmsClient/src/app/app.component.html‎

Lines changed: 35 additions & 336 deletions
Large diffs are not rendered by default.

‎MiniKmsClient/src/app/app.component.ts‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,25 @@
11
import { Component } from '@angular/core';
2+
import { AuthService } from './auth/auth.service';
23

34
@Component({
45
selector: 'app-root',
56
templateUrl: './app.component.html',
6-
styleUrl: './app.component.scss'
7+
styleUrl: './app.component.css'
78
})
89
export class AppComponent {
9-
title = 'MiniKmsClient';
10+
title = 'mini-kms-client';
11+
12+
constructor(public authService: AuthService) {}
13+
14+
isManager(): boolean {
15+
return this.authService.hasRole('manager');
16+
}
17+
18+
isAuthenticated(): boolean {
19+
return this.authService.isAuthenticated();
20+
}
21+
22+
logout(): void {
23+
this.authService.logout();
24+
}
1025
}

‎MiniKmsClient/src/app/app.module.ts‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,31 @@
11
import { NgModule } from '@angular/core';
22
import { BrowserModule } from '@angular/platform-browser';
3+
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
4+
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
5+
import { HttpClientModule } from '@angular/common/http';
36

47
import { AppRoutingModule } from './app-routing.module';
58
import { AppComponent } from './app.component';
9+
import { LoginComponent } from './login/login.component';
10+
import { ManageKeysComponent } from './manage-keys/manage-keys.component';
11+
import { CryptoComponent } from './crypto/crypto.component';
12+
import { MaterialModule } from './common/material/material.module';
613

714
@NgModule({
815
declarations: [
9-
AppComponent
16+
AppComponent,
17+
LoginComponent,
18+
ManageKeysComponent,
19+
CryptoComponent
1020
],
1121
imports: [
1222
BrowserModule,
13-
AppRoutingModule
23+
BrowserAnimationsModule,
24+
ReactiveFormsModule,
25+
FormsModule,
26+
HttpClientModule,
27+
AppRoutingModule,
28+
MaterialModule
1429
],
1530
providers: [],
1631
bootstrap: [AppComponent]

‎MiniKmsClient/src/app/login/login.component.html‎

Lines changed: 61 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,63 @@
1-
<div class="login-container">
2-
<mat-card class="login-card">
3-
<mat-card-header>
4-
<mat-card-title>Mini KMS Login</mat-card-title>
5-
<mat-card-subtitle>Sign in to your account</mat-card-subtitle>
6-
</mat-card-header>
7-
8-
<mat-card-content>
9-
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()" class="login-form">
10-
<mat-form-field appearance="outline" class="full-width">
11-
<mat-label>Username</mat-label>
12-
<input matInput
13-
formControlName="username"
14-
autocomplete="username">
15-
<mat-icon matSuffix>person</mat-icon>
16-
<mat-error *ngIf="loginForm.get('username')?.invalid && loginForm.get('username')?.touched">
17-
{{ getErrorMessage('username') }}
18-
</mat-error>
19-
</mat-form-field>
20-
21-
<mat-form-field appearance="outline" class="full-width">
22-
<mat-label>Password</mat-label>
23-
<input matInput
24-
[type]="hidePassword ? 'password' : 'text'"
25-
formControlName="password"
26-
autocomplete="current-password">
27-
<button mat-icon-button
28-
matSuffix
29-
(click)="hidePassword = !hidePassword"
30-
type="button"
31-
[disabled]="loading">
32-
<mat-icon>{{ hidePassword ? 'visibility_off' : 'visibility' }}</mat-icon>
33-
</button>
34-
<mat-error *ngIf="loginForm.get('password')?.invalid && loginForm.get('password')?.touched">
35-
{{ getErrorMessage('password') }}
36-
</mat-error>
37-
</mat-form-field>
38-
39-
<button mat-raised-button
40-
color="primary"
41-
type="submit"
42-
class="full-width login-button"
43-
[disabled]="loginForm.invalid || loading">
44-
<div class="button-content">
1+
<body>
2+
<div class="login-container">
3+
<div class="login-card">
4+
<div class="login-header">
5+
<h1>Mini KMS</h1>
6+
<p>Sign in to your account</p>
7+
</div>
8+
9+
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()" class="login-form">
10+
<div class="input-group">
11+
<label class="input-label" for="username">Username</label>
12+
<div class="input-wrapper">
13+
<mat-icon class="input-icon">person</mat-icon>
14+
<input
15+
id="username"
16+
name="username"
17+
class="custom-input"
18+
formControlName="username"
19+
autocomplete="username"
20+
placeholder="Enter your username">
21+
</div>
22+
<div class="error-message" *ngIf="loginForm.get('username')?.invalid && loginForm.get('username')?.touched">
23+
{{ getErrorMessage('username') }}
24+
</div>
25+
</div>
26+
27+
<div class="input-group">
28+
<label class="input-label" for="password">Password</label>
29+
<div class="input-wrapper">
30+
<mat-icon class="input-icon">lock</mat-icon>
31+
<input
32+
id="password"
33+
name="password"
34+
class="custom-input"
35+
[type]="hidePassword ? 'password' : 'text'"
36+
formControlName="password"
37+
autocomplete="current-password"
38+
placeholder="Enter your password">
39+
<button
40+
type="button"
41+
class="visibility-toggle"
42+
(click)="hidePassword = !hidePassword"
43+
[disabled]="loading">
44+
<mat-icon>{{ hidePassword ? 'visibility_off' : 'visibility' }}</mat-icon>
45+
</button>
46+
</div>
47+
<div class="error-message" *ngIf="loginForm.get('password')?.invalid && loginForm.get('password')?.touched">
48+
{{ getErrorMessage('password') }}
49+
</div>
50+
</div>
51+
52+
<button
53+
type="submit"
54+
class="login-button"
55+
[disabled]="loginForm.invalid || loading"
56+
[class.loading]="loading">
4557
<mat-spinner *ngIf="loading" diameter="20"></mat-spinner>
4658
<span>{{ loading ? 'Signing in...' : 'Sign In' }}</span>
47-
</div>
48-
</button>
49-
</form>
50-
</mat-card-content>
51-
</mat-card>
52-
</div>
59+
</button>
60+
</form>
61+
</div>
62+
</div>
63+
</body>

0 commit comments

Comments
 (0)