Wenske-Services-Development/DotNetAngular
Template
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update gitignore and README.md

Browse Source 
fix dark
remove ng-bootstrap
This commit is contained in:
Nathalie Eugler
2026-06-10 22:03:14 +02:00
parent 38d39c818e
commit 8f4c0f68b0
16 changed files with 804 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ClientApp/package-lock.json
Generated
-17
View File
@@ -18,7 +18,6 @@
"@angular/platform-browser-dynamic": "^21.2.4",
"@angular/router": "^21.2.4",
"@auth0/angular-jwt": "^5.2.0",
"@ng-bootstrap/ng-bootstrap": "^20.0.0",
"bootstrap": "^5.3.8",
"bootstrap-icons": "^1.13.1",
"rxjs": "~7.8.0",
@@ -2330,22 +2329,6 @@
"@emnapi/runtime": "^1.7.1"
}
},
"node_modules/@ng-bootstrap/ng-bootstrap": {
"version": "20.0.0",
"resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-20.0.0.tgz",
"integrity": "sha512-Jt+GUQ0PdM8VsOUUVr7vTQXhwcGwe2DCe1mmfS21vz9pLSOtGRz41ohZKc1egUevj5Rxm2sHVq5Sve68/nTMfA==",
"dependencies": {
"tslib": "^2.3.0"
},
"peerDependencies": {
"@angular/common": "^21.0.0",
"@angular/core": "^21.0.0",
"@angular/forms": "^21.0.0",
"@angular/localize": "^21.0.0",
"@popperjs/core": "^2.11.8",
"rxjs": "^6.5.3 || ^7.4.0"
}
},
"node_modules/@npmcli/agent": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/@npmcli/agent/-/agent-4.0.0.tgz",
src/ClientApp/package.json
-1
View File
@@ -22,7 +22,6 @@
"@angular/platform-browser-dynamic": "^21.2.4",
"@angular/router": "^21.2.4",
"@auth0/angular-jwt": "^5.2.0",
"@ng-bootstrap/ng-bootstrap": "^20.0.0",
"bootstrap": "^5.3.8",
"bootstrap-icons": "^1.13.1",
"rxjs": "~7.8.0",
src/ClientApp/src/app/infrastructure/services/auth-service.ts
+2 -1
View File
@@ -37,7 +37,8 @@ export class AuthService implements IAuthService {
signOut() {
if (this.isBrowser) {
localStorage.clear();
localStorage.removeItem('token');
localStorage.removeItem('auth/refresh-token');
this.router.navigate(['/login']).catch(error => {
console.error('Navigation error:', error);
});
src/ClientApp/src/app/infrastructure/services/toast.service.ts
+3 -1
View File
@@ -8,7 +8,9 @@ export class ToastService {
toasts: Toast[] = [];
show(message: string, options: Partial<Toast> = {}) {
this.toasts.push({message, ...options});
const toast: Toast = {message, ...options};
this.toasts.push(toast);
setTimeout(() => this.remove(toast), toast.delay || 5000);
}
remove(toast: Toast) {
src/ClientApp/src/app/presentation/authentication/forget-password-popup/forget-password-popup.component.html
+1 -1
View File
@@ -21,6 +21,6 @@
<span class="visually-hidden" role="status">Loading...</span>
}
Send</button>
<button type="button" class="btn btn-light" (click)="activeModal.close()">Close</button>
<button type="button" class="btn btn-light" (click)="close.emit()">Close</button>
</div>
</div>
src/ClientApp/src/app/presentation/authentication/forget-password-popup/forget-password-popup.component.spec.ts
-4
View File
@@ -1,6 +1,5 @@
import {ComponentFixture, TestBed} from '@angular/core/testing';
import {ForgetPasswordPopupComponent} from './forget-password-popup.component';
import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
import {ResetPasswordService} from '../../../infrastructure/services/reset-password.service';
import {ToastService} from '../../../infrastructure/services/toast.service';
import {LoadingService} from '../../../infrastructure/services/loading.service';
@@ -11,19 +10,16 @@ describe('ForgetPasswordPopupComponent', () => {
let fixture: ComponentFixture<ForgetPasswordPopupComponent>;
let resetService: jasmine.SpyObj<ResetPasswordService>;
let toastService: jasmine.SpyObj<ToastService>;
let activeModal: jasmine.SpyObj<NgbActiveModal>;
beforeEach(async () => {
resetService = jasmine.createSpyObj('ResetPasswordService', ['sendResetPasswordLink']);
toastService = jasmine.createSpyObj('ToastService', ['show']);
activeModal = jasmine.createSpyObj('NgbActiveModal', ['close']);
await TestBed.configureTestingModule({
imports: [ForgetPasswordPopupComponent],
providers: [
{provide: ResetPasswordService, useValue: resetService},
{provide: ToastService, useValue: toastService},
{provide: NgbActiveModal, useValue: activeModal},
LoadingService,
]
}).compileComponents();
src/ClientApp/src/app/presentation/authentication/forget-password-popup/forget-password-popup.component.ts
+4 -6
View File
@@ -1,6 +1,5 @@
import {Component, inject} from '@angular/core';
import {Component, EventEmitter, inject, Output} from '@angular/core';
import {FormsModule} from "@angular/forms";
import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap";
import {ResetPasswordService} from "../../../infrastructure/services/reset-password.service";
import {ToastService} from "../../../infrastructure/services/toast.service";
import {LoadingService} from "../../../infrastructure/services/loading.service";
@@ -17,13 +16,12 @@ export class ForgetPasswordPopupComponent {
public resetPasswordEmail!: string;
public isValidEmail!: boolean;
activeModal = inject(NgbActiveModal);
@Output() close = new EventEmitter<void>();
resetService = inject(ResetPasswordService);
toastService = inject(ToastService);
loadingService = inject(LoadingService);
constructor() { }
checkValidEmail(event: string) {
const value = event;
const emailPattern = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,3}$/;
@@ -45,7 +43,7 @@ export class ForgetPasswordPopupComponent {
delay: 3000
});
this.resetPasswordEmail = "";
this.activeModal.close();
this.close.emit();
},
error: (err) => {
this.loadingService.hide();
src/ClientApp/src/app/presentation/authentication/login/login.component.html
+42 -29
View File
@@ -10,13 +10,16 @@
<div class="input-group">
<span class="input-group-text"><i class="bi bi-envelope-fill"></i></span>
<input [class.error]="loginForm.controls['email'].dirty && loginForm.hasError('required' , 'email')"
autocomplete="email" class="form-control" formControlName="email" id="email"
placeholder="E-Mail"
type="email">
autocomplete="email" class="form-control" formControlName="email" id="email"
placeholder="E-Mail"
type="email">
</div>
@if (loginForm.controls['email'].dirty && loginForm.hasError('pattern' , 'email')) {
<small
class="text-danger">*invalid E-Mail</small>
@if (loginForm.controls['email'].touched && loginForm.controls['email'].errors) {
@if (loginForm.controls['email'].errors['required']) {
<small class="text-danger">*Email is required</small>
} @else if (loginForm.controls['email'].errors['pattern']) {
<small class="text-danger">*invalid E-Mail</small>
}
}
<!-- Password -->
<div class="input-group mt-5">
@@ -28,15 +31,24 @@
placeholder="Password">
<span (click)="hideShowPassword()" class="input-group-text"><i class="bi {{eyeIcon}}"></i></span>
</div>
@if (loginForm.controls['password'].dirty && loginForm.hasError('required' , 'password')) {
<small
class="text-danger">*Password is required</small>
@if (loginForm.controls['password'].touched && loginForm.controls['password'].errors) {
@if (loginForm.controls['password'].errors['required']) {
<small class="text-danger">*Password is required</small>
}
}
<!-- Redirect links -->
<p class="m-1"><a (click)="openPopup()" class="fw-bold text-body" style="cursor: pointer;"><u>Forgot Password?</u></a></p>
@if (showForgotPasswordPopup) {
<div class="modal-backdrop fade show" style="z-index: 1050;"></div>
<div class="modal fade show d-block" tabindex="-1" style="z-index: 1055;">
<div class="modal-dialog modal-dialog-centered">
<app-forget-password-popup (close)="closePopup()"></app-forget-password-popup>
</div>
</div>
}
<div class="d-flex justify-content-center">
<button (click)="onLogin()" [disabled]="loginForm.invalid || loadingService.loading()" class="btn btn-lg btn-light"
type="submit">
type="submit">
@if (loadingService.loading()) {
<span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
<span class="visually-hidden" role="status">Loading...</span>
@@ -45,30 +57,31 @@
</button>
</div>
<p class="text-center text-black-50 mt-5 mb-0">You don´t have an account? <a [routerLink]="['/register']"
class="fw-bold text-body"><u>Sign
up here!</u></a></p>
class="fw-bold text-body"><u>Sign
up here!</u></a></p>
</form>
</div>
<!-- other Sign in -->
<!-- <div class="text-center py-3">-->
<!-- <p class="text-center">or Sign in with</p>-->
<!-- <a class="px-2" href="https://www.google.com" target="_blank"><img-->
<!-- alt=""-->
<!-- height="40"-->
<!-- ngSrc="https://www.freepnglogos.com/uploads/google-logo-png/google-logo-png-suite-everything-you-need-know-about-google-newest-0.png"-->
<!-- width="40"/></a>-->
<!-- <a class="px-2" href="https://www.github.com" target="_blank"><img-->
<!-- alt="" height="40"-->
<!-- ngSrc="https://www.freepnglogos.com/uploads/512x512-logo-png/512x512-logo-github-icon-35.png"-->
<!-- width="40"/></a>-->
<!-- <a class="px-2" href="https://www.facebook.com" target="_blank"><img-->
<!-- alt=""-->
<!-- height="40"-->
<!-- ngSrc="https://www.freepnglogos.com/uploads/facebook-logo-icon/facebook-logo-icon-facebook-icon-png-images-icons-and-png-backgrounds-1.png"-->
<!-- width="40"/></a>-->
<!-- </div>-->
<!-- <div class="text-center py-3">-->
<!-- <p class="text-center">or Sign in with</p>-->
<!-- <a class="px-2" href="https://www.google.com" target="_blank"><img-->
<!-- alt=""-->
<!-- height="40"-->
<!-- ngSrc="https://www.freepnglogos.com/uploads/google-logo-png/google-logo-png-suite-everything-you-need-know-about-google-newest-0.png"-->
<!-- width="40"/></a>-->
<!-- <a class="px-2" href="https://www.github.com" target="_blank"><img-->
<!-- alt="" height="40"-->
<!-- ngSrc="https://www.freepnglogos.com/uploads/512x512-logo-png/512x512-logo-github-icon-35.png"-->
<!-- width="40"/></a>-->
<!-- <a class="px-2" href="https://www.facebook.com" target="_blank"><img-->
<!-- alt=""-->
<!-- height="40"-->
<!-- ngSrc="https://www.freepnglogos.com/uploads/facebook-logo-icon/facebook-logo-icon-facebook-icon-png-images-icons-and-png-backgrounds-1.png"-->
<!-- width="40"/></a>-->
<!-- </div>-->
</div>
</div>
</div>
</div>
</div>
src/ClientApp/src/app/presentation/authentication/login/login.component.spec.ts
-3
View File
@@ -5,7 +5,6 @@ import {ToastService} from '../../../infrastructure/services/toast.service';
import {UserStoreService} from '../../../infrastructure/services/user-store.service';
import {LoadingService} from '../../../infrastructure/services/loading.service';
import {ActivatedRoute, Router} from '@angular/router';
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
import {of, throwError} from 'rxjs';
describe('LoginComponent', () => {
@@ -19,7 +18,6 @@ describe('LoginComponent', () => {
authService = jasmine.createSpyObj('AuthService', ['login', 'storeToken', 'storeRefreshToken', 'decodedToken']);
router = jasmine.createSpyObj('Router', ['navigate']);
toastService = jasmine.createSpyObj('ToastService', ['show']);
const modalService = jasmine.createSpyObj('NgbModal', ['open']);
await TestBed.configureTestingModule({
imports: [LoginComponent],
@@ -27,7 +25,6 @@ describe('LoginComponent', () => {
{provide: AuthService, useValue: authService},
{provide: Router, useValue: router},
{provide: ToastService, useValue: toastService},
{provide: NgbModal, useValue: modalService},
{provide: ActivatedRoute, useValue: {snapshot: {data: {}}, firstChild: null}},
UserStoreService,
LoadingService,
src/ClientApp/src/app/presentation/authentication/login/login.component.ts
+8 -4
View File
@@ -5,7 +5,6 @@ import ValidateForm from "../../../infrastructure/utilities/validate-form";
import {AuthService} from "../../../infrastructure/services/auth-service";
import {ToastService} from "../../../infrastructure/services/toast.service";
import {UserStoreService} from "../../../infrastructure/services/user-store.service";
import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
import {ForgetPasswordPopupComponent} from "../forget-password-popup/forget-password-popup.component";
import {LoadingService} from "../../../infrastructure/services/loading.service";
import {Title} from "@angular/platform-browser";
@@ -14,7 +13,8 @@ import {Title} from "@angular/platform-browser";
selector: 'app-login',
imports: [
ReactiveFormsModule,
RouterLink
RouterLink,
ForgetPasswordPopupComponent
],
templateUrl: './login.component.html',
standalone: true,
@@ -26,13 +26,13 @@ export class LoginComponent {
type: string = "password";
isText: boolean = true;
eyeIcon: string = "bi-eye-slash"
showForgotPasswordPopup = false;
loadingService = inject(LoadingService);
authenticateService = inject(AuthService)
toastService = inject(ToastService);
userStore = inject(UserStoreService);
private router = inject(Router)
modalService = inject(NgbModal)
title = inject(Title)
constructor(private formBuilder: FormBuilder) {
@@ -49,7 +49,11 @@ export class LoginComponent {
}
openPopup() {
this.modalService.open(ForgetPasswordPopupComponent, {centered: true ,backdrop: 'static' });
this.showForgotPasswordPopup = true;
}
closePopup() {
this.showForgotPasswordPopup = false;
}
onLogin() {
src/ClientApp/src/app/presentation/authentication/register/register.component.html
+48 -64
View File
@@ -17,20 +17,14 @@
</div>
<div>
@if (registerForm.controls['username'].touched && registerForm.controls['username'].errors) {
@if (registerForm.controls['username'].errors['minlength']) {
<small class="text-danger">
*Username must be at least 3 characters long
</small>
}
@if (registerForm.controls['username'].errors['maxlength']) {
<small class="text-danger">
*Username could contain max 20 characters long
</small>
}
@if (registerForm.controls['username'].errors['pattern']) {
<small class="text-danger">
*Username could contain only letters, numbers and underscore
</small>
@if (registerForm.controls['username'].errors['required']) {
<small class="text-danger">*Username is required</small>
} @else if (registerForm.controls['username'].errors['minlength']) {
<small class="text-danger">*Username must be at least 3 characters long</small>
} @else if (registerForm.controls['username'].errors['maxlength']) {
<small class="text-danger">*Username could contain max 20 characters long</small>
} @else if (registerForm.controls['username'].errors['pattern']) {
<small class="text-danger">*Username could contain only letters, numbers and underscore</small>
}
}
</div>
@@ -43,9 +37,12 @@
name="email" placeholder="E-Mail"
type="email">
</div>
@if (registerForm.controls['email'].dirty && registerForm.hasError('pattern' , 'email')) {
<small
class="text-danger">*invalid E-Mail</small>
@if (registerForm.controls['email'].touched && registerForm.controls['email'].errors) {
@if (registerForm.controls['email'].errors['required']) {
<small class="text-danger">*Email is required</small>
} @else if (registerForm.controls['email'].errors['pattern']) {
<small class="text-danger">*invalid E-Mail</small>
}
}
<!-- Password -->
@@ -60,64 +57,52 @@
</div>
<div>
@if (registerForm.controls['password'].touched && registerForm.controls['password'].errors) {
@if (registerForm.controls['password'].errors['minlength']) {
<small class="text-danger">
*Password must be at least 10 characters long
</small>
}
@if (registerForm.controls['password'].errors['uppercase']) {
<small class="text-danger">
*Password must contain at least one uppercase letter
</small>
}
@if (registerForm.controls['password'].errors['lowercase']) {
<small class="text-danger">
*Password must contain at least one lowercase letter
</small>
}
@if (registerForm.controls['password'].errors['number']) {
<small class="text-danger">
*Password must contain at least one number
</small>
}
@if (registerForm.controls['password'].errors['special']) {
<small class="text-danger">
*Password must contain at least one special character
</small>
@if (registerForm.controls['password'].errors['required']) {
<small class="text-danger">*Password is required</small>
} @else if (registerForm.controls['password'].errors['minlength']) {
<small class="text-danger">*Password must be at least 10 characters long</small>
} @else if (registerForm.controls['password'].errors['uppercase']) {
<small class="text-danger">*Password must contain at least one uppercase letter</small>
} @else if (registerForm.controls['password'].errors['lowercase']) {
<small class="text-danger">*Password must contain at least one lowercase letter</small>
} @else if (registerForm.controls['password'].errors['number']) {
<small class="text-danger">*Password must contain at least one number</small>
} @else if (registerForm.controls['password'].errors['special']) {
<small class="text-danger">*Password must contain at least one special character</small>
}
}
</div>
<!-- Checkbox Terms -->
<!-- <div class="form-check d-flex justify-content-center mt-5">-->
<!-- <input class="checkbox form-check-input me-2" formControlName="terms" id="terms" type="checkbox">-->
<!-- <label class="form-check-label" for="terms">-->
<!-- I agree to the <a [routerLink]="['/terms-of-service']" class="text-body"><u>Terms of service</u></a>-->
<!-- </label>-->
<!-- </div>-->
<!-- <div class="text-center">-->
<!-- @if (registerForm.controls['terms'].untouched && registerForm.controls['terms'].invalid) {-->
<!-- <small-->
<!-- class="text-danger">-->
<!-- *You must agree to the terms-->
<!-- </small>-->
<!-- }-->
<!-- </div>-->
<!-- <div class="form-check d-flex justify-content-center mt-5">-->
<!-- <input class="checkbox form-check-input me-2" formControlName="terms" id="terms" type="checkbox">-->
<!-- <label class="form-check-label" for="terms">-->
<!-- I agree to the <a [routerLink]="['/terms-of-service']" class="text-body"><u>Terms of service</u></a>-->
<!-- </label>-->
<!-- </div>-->
<!-- <div class="text-center">-->
<!-- @if (registerForm.controls['terms'].untouched && registerForm.controls['terms'].invalid) {-->
<!-- <small-->
<!-- class="text-danger">-->
<!-- *You must agree to the terms-->
<!-- </small>-->
<!-- }-->
<!-- </div>-->
<!-- Button -->
<div class="d-flex justify-content-center">
<button (click)="onSignUp()" [disabled]="registerForm.invalid || loadingService.loading()" class="btn btn-lg btn-light mt-5"
type="submit">
@if (loadingService.loading()) {
<span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
<span class="visually-hidden" role="status">Loading...</span>
}
Sign up
type="submit">
@if (loadingService.loading()) {
<span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
<span class="visually-hidden" role="status">Loading...</span>
}
Sign up
</button>
</div>
<p class="text-center text-black-50 mt-5 mb-0">Have already an account? <a [routerLink]="['/login']"
class="fw-bold text-body"><u>Sign
in here!</u></a></p>
class="fw-bold text-body"><u>Sign
in here!</u></a></p>
</form>
</div>
</div>
@@ -125,4 +110,3 @@
</div>
</div>
</div>
src/ClientApp/src/app/presentation/shared/toast/toast.component.html
+6 -7
View File
@@ -1,9 +1,8 @@
@for (toast of toastService.toasts; track toast) {
<ngb-toast
(hidden)="toastService.remove(toast)"
[autohide]="true"
[class]="toast.classname"
[delay]="toast.delay || 5000">
{{ toast.message }}
</ngb-toast>
<div class="toast show" [class]="toast.classname" role="alert">
<div class="toast-body d-flex justify-content-between align-items-center gap-2">
{{ toast.message }}
<button type="button" class="btn-close btn-close-white flex-shrink-0" (click)="toastService.remove(toast)"></button>
</div>
</div>
}
src/ClientApp/src/app/presentation/shared/toast/toast.component.scss
+1 -1
View File
@@ -1,4 +1,4 @@
ngb-toast {
.toast {
position: fixed;
top: 20px;
right: -100%; // Start außerhalb des Bildschirms
src/ClientApp/src/app/presentation/shared/toast/toast.component.ts
+1 -4
View File
@@ -1,13 +1,10 @@
import {Component, inject} from '@angular/core';
import {ToastService} from "../../../infrastructure/services/toast.service";
import {NgbToast} from "@ng-bootstrap/ng-bootstrap";
@Component({
selector: 'app-toast',
imports: [
NgbToast
],
imports: [],
templateUrl: './toast.component.html',
standalone: true,
styleUrls: ['./toast.component.scss']